/* General Styles */
* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'InterRegular';
    font-style: normal;
    font-weight: normal;
    src: local('InterRegular'), url('../fonts/Inter-Regular.otf') format('woff');
}

@font-face {
    font-family: 'InterMedium';
    font-style: normal;
    font-weight: normal;
    src: local('InterMedium'), url('../fonts/Inter-Medium.otf') format('woff');
}

@font-face {
    font-family: 'InterSemiMedium';
    font-style: normal;
    font-weight: normal;
    src: local('InterSemiMedium'), url('../fonts/Inter-Medium.otf') format('woff');
}
@font-face {
    font-family: 'InterSemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('InterSemiBold'), url('../fonts/Inter-SemiBold.otf') format('woff');
}
@font-face {
    font-family: 'InterLight';
    font-style: normal;
    font-weight: normal;
    src: local('InterLight'), url('../fonts/Inter-Light-BETA.otf') format('woff');
}


body {
    font-family: InterRegular !important;
    margin: 0;
    padding: 0;
    background-color: #0f1114;
    color: #ffffff;
}
.d-none{
    display:none;
}

section {
    padding: 0px 68px;
}

a {
    color: #f57c00;
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
}

p {
    margin-bottom: 1em;
}

/* Header */
/* Header container */
.headdiv {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 999;
    background-color: transparent;
}

/* Main nav wrapper */
.top_nav {
    width: 86.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    height: auto;
    flex-wrap: wrap;
}

    /* Logo */
    .top_nav .logo img {
        height: 35px;
        width: auto;
    }

    /* Navigation list */
    .top_nav nav ul.ulofheader {
        display: flex;
        gap: 2em;
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

    .top_nav nav a {
        color: #000;
        font-family: InterMedium;
        font-size: 15px;
        text-decoration: none;
    }

/* CTA Button */
.btn_orange {
    background: linear-gradient(70deg, #FEC801, #F15925);
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: InterRegular !important;
    font-size: 14px;
}

/* Hamburger button */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .top_nav {
/*        flex-direction: column;*/
        align-items: flex-start;
    }

    .menu-toggle {
        display: block;
        align-self: flex-end;
    }

    .main-nav {
        width: 100%;
        display: none;
        flex-direction: column;
        margin-top: 10px;
    }

        .main-nav.active {
            display: flex;
        }

    .ulofheader {
        flex-direction: column;
        gap: 1em;
        width: 100%;
        padding-left: 0;
    }

        .ulofheader li {
            width: 100%;
        }

            .ulofheader li a {
                display: block;
                padding: 10px;
                font-size: 16px;
                color: #000;
            }

    .btn_orange {
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 576px) {
    .top_nav {
        width: 100%;
        padding: 10px 15px;
    }

        .top_nav .logo img {
            height: 30px;
        }

        .top_nav nav a {
            font-size: 14px;
        }

    .btn_orange {
        padding: 8px 12px;
        font-size: 13px;
    }
}



/*------------hero section start here------------------*/
/* Hero Section */
.hero {
    background: url('../images/HeroImage.png') no-repeat center center/cover;
    color: #fff;
    position: relative;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Overlay text inside hero */
.overlay_text {
    position: absolute;
    width: 90%;
    bottom: 90px;
}

/* Animate hero text on load */
.herofull {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
/*    opacity: 0;
    transform: translateY(100px);
    animation: slideUpFade 1s ease-out 0.2s forwards;*/
}

/* Left side */
.heroleft {
    width: 72%;
}

/* Right side */
.heroright {
    width: 28%;
}

/* Highlight text */
.orangetxt {
    font-size: 15px;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    margin: 0;
    display: inline-block;
    padding: 6px 25px;
    border: 1px solid #F36E1E;
    color: #fff;
    border-radius: 16px;
}

/* Main welcome text */
.heroleft .weltxt {
    font-size: 47px;
    margin: 19px 0 0;
    font-family: InterSemiMedium;
    line-height: 60px;
}

/* Description under right section */
.heroright .subtext {
    font-size: 15px;
    margin: 54px 0px 0px;
}

/* Call to action button */
.assetbtn {
    margin-top: 21px;
}

/* Header nav link style overrides */
.ulofheader li a {
    color: #000;
}

    .ulofheader li a:hover {
        cursor: pointer;
    }

.activehead {
    color: #F36E1E !important;
}

/* ------------------------------- */
/* 📱 Responsive Media Queries     */
/* ------------------------------- */

/* Tablets and below */
@media (max-width: 991px) {
    .overlay_text {
        bottom: 60px;
    }

    .heroleft {
        width: 100%;
    }

    .heroright {
        width: 100%;
        margin-top: 20px;
    }

    .heroleft .weltxt {
        font-size: 36px;
        line-height: 48px;
    }

    .heroright .subtext {
        font-size: 14px;
        margin: 20px 0 0;
    }

    .assetbtn {
        width: 100%;
        font-size: 15px;
    }
}

/* Mobile devices */
@media (max-width: 576px) {
    .hero {
        height: auto;
        padding: 80px 0 60px;
    }

    .overlay_text {
        position: static;
        width: 90%;
        margin: 10% auto;
    }

    .heroleft .weltxt {
        font-size: 28px;
        line-height: 38px;
        text-align: center;
    }

    .heroright .subtext {
        font-size: 13px;
        text-align: center;
    }

    .herofull {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .orangetxt {
        font-size: 13px;
        padding: 5px 18px;
    }

    .assetbtn {
        font-size: 14px;
        padding: 10px 20px;
    }
}

/*------------hero section end here------------------*/



/*--------------------- Content Blocks start here---------------- */
/* Base section */
.content_blocks {
    background-image: url(../images/index2ndbg.png);
    padding-top: 63px;
    padding-bottom: 63px;
}

.content_blocksfull {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

/* Images */
.conimgblo {
    width: 598px;
    height: 299px;
    overflow: hidden;
    z-index: 99;
}

    .conimgblo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Text box */
.contxtblo {
    width: 595px;
    height: auto;
    min-height: 355px;
    border-radius: 15px;
    border: 1px solid #363636;
    background: rgba(0, 0, 0, 1);
    box-shadow: rgba(241, 89, 37, 0.1) 0px 7px 29px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contxtbloin {
    padding: 53px;
    z-index: 999;
}

.centeritem {
    width: 100%;
    text-align: center;
}

.whatiscom {
    font-size: 38px;
    font-family: InterSemiMedium;
    margin-top: 25px;
    display: block;
}

.conlastitem {
    margin-top: 25px;
    display: block;
    text-align: center;
    font-size: 15px;
    color: #E3E3E3;
    line-height: 24px;
}

.thirdcontxt {
    margin-top: -55px;
}

.forthconimg {
    margin-top: 18px;
}

/* Cost section */
.costdiv {
    width: 100%;
    border: 1px solid #8D8D8D;
    padding: 22px 30px;
    margin-top: 57px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(16, 23, 38, 1) 0%, rgba(7, 9, 15, 1) 100%);
}

.costdivf {
    width: 10%;
    display: flex;
    align-items: flex-start;
}

.costdivfimg {
    height: 65px;
    width: 65px;
    overflow: hidden;
}

    .costdivfimg img {
        width: 100%;
    }

.costdivs {
    width: 90%;
}

.w100 {
    width: 100%;
}

.noncomdiv label {
    font-size: 23px;
    font-family: InterMedium;
}

.noncomdivin label {
    font-size: 15px;
    margin-top: 11px;
    display: block;
    line-height: 24px;
    color: #E3E3E3;
}

/* -------------------------------------- */
/* 📱 Responsive Queries */
/* -------------------------------------- */

@media (max-width: 991px) {
    .conimgblo,
    .contxtblo {
        width: 100%;
        height: auto;
    }

    .contxtbloin {
        padding: 35px 20px;
    }

    .whatiscom {
        font-size: 30px;
    }

    .costdivf {
        width: 15%;
    }

    .costdivs {
        width: 85%;
    }
}

@media (max-width: 768px) {
    .contxtbloin {
        padding: 25px 15px;
    }
    .thirdcontxt {
        margin-top: 0px;
    }
    .forthconimg {
        margin-top: 0;
    }

    .whatiscom {
        font-size: 24px;
    }

    .conlastitem,
    .noncomdivin label {
        font-size: 14px;
        line-height: 22px;
    }

    .noncomdiv label {
        font-size: 18px;
    }

    .costdivf {
        width: 100%;
        justify-content: center;
        margin-bottom: 15px;
    }

    .costdivs {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .content_blocks {
        padding-top: 0px;
        padding-bottom: 40px;
    }

    .whatiscom {
        font-size: 22px;
    }

    .conlastitem {
        font-size: 13px;
    }

    .noncomdiv label {
        font-size: 17px;
    }

    .noncomdivin label {
        font-size: 13px;
        line-height: 20px;
    }

    .costdiv {
        padding: 20px;
        flex-direction: column;
        align-items: center;
    }

    .costdivfimg {
        height: 50px;
        width: 50px;
    }
}


/*--------------------- Content Blocks end here---------------- */




/* soldiv */
.soldiv{
    background-color: #0c111c;
    padding: 62px 0px;
}
.soldivf{
    display: flex;
    justify-content: center;
}
.soldiv .soldivs{
    display: flex;
    justify-content: center;
}
.soldiv .whatcomp{
    font-size: 38px;
    font-family: InterSemiMedium;
    margin-top: 25px;
}
/* soldiv ends */

/* Intro */

.intro {
    position: relative;
    height: 100vh;
    background: url('../images/introcomp.png') center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

  .scrolhero {
     position: relative;
    height: 100vh;
    background: url(../images/3.png) center / cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 15px;
  box-shadow: 5px 0px 26px 0px #362119;
}
.scrolhero-text {
    position: relative;
    color: white;
    text-align: center;
    z-index: 2;
    will-change: transform;
    transition: transform 0.05s ease-out;
}
.introcotxt{
    font-size: 47px;
    font-family: InterSemiBold;
}
.introcotxtsec{
    font-size: 23px;
    margin-top: 38px;
    display: block;
    width: 69%;
}
.cenintxtx{
    display: flex;
    justify-content: center;
}
.ylwtxt{
    color: #FEC801;
}

/* Cards & Approach */

.insideapp{
    padding: 46px 0px;
}

.approach .apptxt{
    font-size: 30px;
    font-family: InterSemiBold;
    margin: 0;
}
.approach .apptxtin{
    font-size: 15px;
    margin-top: 12px;
    display: block;
}

.appcomptxt{
margin-top: 83px !important;
display: block;
}
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2em;
    margin-top: 38px;
}

.cardscit {
    gap: 1.7em !important;
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
}
.card {
    background-color: #000;
    padding: 15px;
    border-radius: 16px;
    border: 1px solid #363636;
    box-shadow: 0px 0px 19px 0px #362119;
    position: relative;
    overflow: hidden;
     transition: box-shadow 0.5s ease; 
}
.card .cardimg{
    height: 40px;
    width: 40px;
    overflow: hidden;
}
.card .cardimg img{
width: 100%;
}

.card .cardlbl{
    font-family: InterSemiMedium;
    font-size: 19px;
    margin-top: 23px;
    display: inline-block;
    position: relative;
    padding-bottom: 15px;
}
.card .cardlbl::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
   background: linear-gradient(to right, #E3E3E3, rgba(227, 227, 227, 0));
}

.card p{
font-family: InterRegular;
font-size: 15px;
margin-top: 15px;
margin-bottom: 45px;
color: #E3E3E3;
}
.card .icononhov{
    position: absolute;
    right: 10px;
    bottom: 10px;
      opacity: 0;
    transform: translateY(20px); 
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none; 
}
.card:hover .icononhov{
     opacity: 1;
    transform: translateY(0); 
}
.card:hover {
             box-shadow: inset 0 0 24px 0px #ffffff3b;
             cursor: pointer;
}

.learndiv{
    display: flex;
    justify-content: center;
    margin-top: 38px;
}
 /* card div ends */




/* foundation Section start here*/
.foundation {
    background-color: #000;
}

.foundin {
    padding: 63px 0px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.robtxt {
    font-size: 38px;
    font-family: InterSemiBold;
    margin-top: 15px;
    text-align: center;
    color: #fff;
}

.longtxt {
    margin-top: 30px;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
    color: #E3E3E3;
}

.cardsfoundation {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin-top: 40px;
}

.cardt {
    height: 372px;
    width: 338px;
    border-radius: 15px;
    overflow: hidden;
    padding: 23px;
    position: relative;
    border: 1px solid #363636;
    box-shadow: rgb(241 89 37 / 10%) 0px 0px 44px 0px;
    background-size: cover !important;
    background-position: center;
}

.cardtlbl {
    font-size: 19px;
    font-family: 'InterRegular';
    color: #fff;
}

.floatctxt {
    font-family: InterRegular !important;
    line-height: 25px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    position: absolute;
    bottom: 44px;
    left: 24px;
    width: 87%;
    letter-spacing: 0.02em;
    color: #E3E3E3;
}

.cardt:hover .floatctxt {
    opacity: 1;
    transform: translateY(0);
}

.seccard {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 30px;
}

.learndiv {
    width: 100%;
    text-align: center;
    margin-top: 40px;
}

    .learndiv a {
        color: #F15925;
        font-size: 16px;
        font-family: InterRegular;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }

/* Hover states */
.fcardt {
    background: url(../images/cards/OO1.png) no-repeat center center;
}

    .fcardt:hover {
        background: url(../images/cards/OO1H.png) no-repeat center center;
    }

.scardt {
    background: url(../images/cards/OO2.png) no-repeat center center;
}

    .scardt:hover {
        background: url(../images/cards/OO2H.png) no-repeat center center;
    }

.tcardt {
    background: url(../images/cards/OO3.png) no-repeat center center;
}

    .tcardt:hover {
        background: url(../images/cards/OO3H.png) no-repeat center center;
    }

.focardt {
    background: url(../images/cards/OO4.png) no-repeat center center;
}

    .focardt:hover {
        background: url(../images/cards/OO4H.png) no-repeat center center;
    }

.ficardt {
    background: url(../images/cards/OO5.png) no-repeat center center;
}

    .ficardt:hover {
        background: url(../images/cards/OO5H.png) no-repeat center center;
    }

/* --------------------------- */
/* 📱 Responsive Media Queries */
/* --------------------------- */

@media (max-width: 991px) {
    .robtxt {
        font-size: 30px;
    }

    .cardt {
        width: 100%;
        height: auto;
        min-height: 350px;
    }

    .floatctxt {
        font-size: 14px;
    }

    .cardtlbl {
        font-size: 17px;
    }
}

@media (max-width: 768px) {
    .robtxt {
        font-size: 26px;
    }
    section {
        padding: 0px 20px;
    }

    .cardt {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .floatctxt {
        font-size: 13px;
        left: 20px;
        bottom: 30px;
    }

    .cardsfoundation,
    .seccard {
        gap: 20px;
    }

    .learndiv a {
        font-size: 15px;
    }
    .checklist {
        padding: 20px !important;
    }
}

@media (max-width: 480px) {
    .robtxt {
        font-size: 22px;
    }
    section {
        padding: 0px 20px;
    }
    .cardtlbl {
        font-size: 16px;
    }

    .floatctxt {
        font-size: 12px;
        line-height: 20px;
    }

    .longtxt {
        font-size: 14px;
        line-height: 24px;
        padding: 0 10px;
    }

    .foundin {
        padding: 40px 0px;
    }

    .cardt {
        padding: 20px;
    }

    .checklist {
        padding: 20px !important;
    }
}

/* fonudation section ends here*/



/* Checklist Section start here*/
.checklist {
    text-align: center;
    padding: 70px;
    background: url(../images/Indexlastsection.png);
    background-size: cover;
    background-position: center;
}

.checkindiv {
    background-color: #000;
    margin-bottom: 76px;
    padding: 46px;
    border-radius: 15px;
    border: 1px solid #363636;
    box-shadow: rgb(241 89 37 / 10%) 0px 0px 44px 0px;
}

.checklbl {
    font-size: 38px;
    font-family: InterSemiBold;
    color: #fff;
}

.checkindiv p {
    font-size: 19px;
    margin-top: 15px;
    margin-bottom: 60px;
    color: #E3E3E3;
}

.readinesstxt {
    margin-top: 30px;
    font-size: 32px;
    font-family: InterSemiBold;
    color: #fff;
}

.matxt {
    font-size: 15px;
    margin-top: 15px;
    color: #E3E3E3;
}

.indiv {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 38px;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
}

.indivf {
    width: 58%;
}

.indivs {
    width: 38%;
    display: flex;
    justify-content: flex-end;
}

.indivsimg {
    width: 100%;
    max-width: 496px;
    height: auto;
    overflow: hidden;
    margin-top: 10px;
}

    .indivsimg img {
        width: 100%;
        height: auto;
    }

.wintxt {
    font-size: 32px;
    font-family: InterSemiBold;
    text-align: left;
    color: #fff;
}

.lefttxt {
    text-align: left;
}

.ullidiv ul {
    text-align: left;
    padding-left: 0;
    list-style: none;
}

    .ullidiv ul li {
        display: flex;
        align-items: flex-start;
        margin-top: 19px;
        font-size: 15px;
        color: #E3E3E3;
    }

        .ullidiv ul li img {
            width: 20px;
            height: 20px;
            margin-top: 2px;
        }

        .ullidiv ul li label {
            vertical-align: super;
            margin-left: 11px;
        }

.perstxt {
    text-align: left;
    margin-top: 30px;
}

    .perstxt a {
        color: #F15925;
        font-size: 15px;
        font-family: InterRegular;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

.excladiv {
    padding: 12px 16px;
    text-align: left;
    background-color: #07090F;
    margin-top: 38px;
    border: 1px solid #8D8D8D;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(16, 23, 38, 1) 0%, rgba(7, 9, 15, 1) 100%);
    color: #fff;
    font-size: 16px;
}

    .excladiv img {
        vertical-align: bottom;
    }

    .excladiv label {
        font-size: 19px;
        vertical-align: super;
        margin-left: 12px;
        font-family: 'InterLight';
    }

/* --------------------------- */
/* 📱 Responsive Media Queries */
/* --------------------------- */

@media (max-width: 991px) {
    .checklist {
        padding: 50px 30px;
    }
   

    .checklbl {
        font-size: 32px;
    }

    .readinesstxt {
        font-size: 26px;
    }

    .wintxt {
        font-size: 26px;
    }

    .indivf {
        width: 100%;
    }

    .indivs {
        width: 100%;
        justify-content: center;
    }

    .indivsimg {
        max-width: 100%;
        margin: 0 auto;
    }

    .perstxt {
        text-align: center;
    }

    .excladiv {
        text-align: center;
    }

        .excladiv label {
            display: inline-block;
            margin-top: 10px;
        }
}

@media (max-width: 768px) {
    .checklbl {
        font-size: 26px;
    }

    .readinesstxt {
        font-size: 22px;
    }

    .wintxt {
        font-size: 22px;
    }

    .checkindiv {
        padding: 30px 20px;
    }

        .checkindiv p {
            font-size: 16px;
            margin-bottom: 40px;
        }

    .ullidiv ul li {
        font-size: 14px;
    }

    .excladiv label {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .checklbl {
        font-size: 22px;
    }

    .wintxt,
    .readinesstxt {
        font-size: 20px;
    }

    .matxt {
        font-size: 14px;
    }

    .checkindiv p {
        font-size: 14px;
    }

    .perstxt a {
        font-size: 14px;
    }

    .excladiv label {
        font-size: 15px;
    }

    .indiv {
        flex-direction: column;
        gap: 20px;
    }

    .checklist {
        padding: 40px 15px;
    }
    
}

/* Checklist Section end here*/


/*--------------------- Footer start here*/
.footerSection {
    background-color: #000;
}

footer {
    background-color: #000000;
    padding: 0px 68px;
    color: #ccc;
    border: 1px solid #363636;
    border-bottom: none;
    border-radius: 20px;
    border-right: none;
    border-left: none;
    box-shadow: rgb(241 89 37 / 10%) 0px 0px 44px 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.footerclms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2em;
    padding: 23px 0px;
}

footer img {
    max-width: 150px;
    height: auto;
}

.footltxt {
    font-family: InterLight;
    font-size: 15px;
    line-height: 20px;
    margin-top: 10px;
}

.linksdiv {
    margin-top: 7px;
}

.linkslbl {
    font-size: 15px;
    font-family: InterMedium;
}

.linksdiv ul {
    text-align: left;
    margin-top: 15px;
    line-height: 25px;
    padding-left: 0;
    list-style: none;
}

.linksdiv ul li a {
    font-size: 15px;
    font-family: InterLight;
    color: #E3E3E3 !important;
    text-decoration: none;
    display: inline-block;
}

.linksdiv ul li {
    margin-bottom: 8px;
}

.footimg {
    vertical-align: sub;
    margin-right: 8px;
    width: 16px;
    height: 16px;
}

.contaul {
    line-height: 32px !important;
}

.finalfoot {
    border-top: 1px solid #333;
}

.footer_bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 23px 68px;
    background-color: #000000;
    align-items: center;
}

.footer_bottom ul {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1em;
    list-style: none;
}

.footer_bottom p,
.footer_bottom ul li a {
    font-size: 12px;
    font-family: InterLight;
    margin: 0px;
    color: #E3E3E3 !important;
    text-decoration: none;
}

/* ---------------- Responsive Footer ---------------- */
@media (max-width: 768px) {
    footer {
        padding: 0px 20px;
    }

    .footerclms {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footerclms > div {
        margin-bottom: 20px;
    }

    .linksdiv ul,
    .contaul {
/*        text-align: center;*/
    }

    .linksdiv ul li a {
        font-size: 14px;
    }

    .footer_bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 15px 20px;
    }

    .footer_bottom ul {
        /*justify-content: center;*/
    }

    .footimg {
        margin-right: 5px;
    }
}


/*-------------------footer legend here---------------------------*/

/* what is COMPaaS */
.headcendiv {
    text-align: center;
}
.whead {
    background: url('../images/what&who.png') no-repeat center center/cover;
    height: 464px;
    width: 100%;
}

.whead2 {
    background: url('../images/whatisCOMPaaS/it&contect.png') no-repeat center center/cover;
    height: 464px;
    width: 100%;
}

.checklistWnW {
    text-align: center;
    padding: 70px;
    background: #000;
}

.whetertxt{
    font-size: 19px;
    margin-top: 22px;
    width: 90%;
    line-height: 30px;
        color: #E3E3E3;
}
.windivsimg{
    width: 496px;
    height: 260px;
    overflow: hidden;
    margin-top: 18px;
    }
    
    .headcvrdiv {
        display: flex;
        justify-content: center;
        padding-top: 180px;
    }
    .headcenlbl{
        font-size: 30px;
        font-family: InterSemiBold;
    }
    .hometxt{
   font-size: 19px;
    padding-top: 22px;
    display: block;
    }
    .homeintxt{
        font-size: 15px;
    }
@media (max-width: 768px) {
    .checklistWnW {
        padding: 20px;
    }
}


/*------what is compaas source process start here-----------*/
.mainScrollAnimationBox {
    padding-top: 50px;
    background: url(webassets/images/whatisBg.png), linear-gradient(82.28deg, #020304 3.03%, #101726 100%);
}

.scrollAnimationContent {
    text-align: center;
    margin: 40px 0;
}

.svg-wrapper {
    display: flex;
    width: 100%;
    position: relative;
}

.scrollAnimation {
    position: relative;
}

#linesvg {
    margin: 0 auto;
}

.scrollAnimationCard {
    position: absolute;
    width: 100%;
    top: 50px;
}

    .scrollAnimationCard > div:nth-child(2) {
        position: relative;
        top: -100px;
    }

    .scrollAnimationCard > div:nth-child(3) {
        position: relative;
        top: -200px;
    }

    .scrollAnimationCard > div:nth-child(4) {
        position: relative;
        top: -300px;
    }

    .scrollAnimationCard > div:nth-child(5) {
        position: relative;
        top: -400px;
    }

.card-right {
    margin-left: auto;
}

    .card-right img {
        text-align: right !important;
    }

.svgContainerCard {
    min-height: 304px;
    max-width: 450px;
}

    .svgContainerCard img {
        width: 100px;
        height: auto;
    }

    .svgContainerCard div {
        background-color: black;
        border: 1px solid #363636;
        box-shadow: 0px 0px 44px 0px #f159251a;
        border-radius: 16px;
        padding: 30px;
        text-align: center;
        position: relative;
        top: -20px;
    }

        .svgContainerCard div h6 {
            font-size: 2rem;
            color: white;
            margin-bottom: 30px;
        }

        .svgContainerCard div p {
            font-size: 20px;
            color: white;
            font-weight: 400;
        }

@media (max-width: 991px) {
    .scrollAnimationCard {
        position: relative !important;
        top: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin-top: 40px;
    }

        .scrollAnimationCard > div {
            position: relative !important;
            top: 0 !important;
            margin: 0 auto !important;
            width: 90% !important;
        }

    .card-left,
    .card-right {
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .svg-wrapper {
        flex-direction: column;
        align-items: center;
    }

    #linesvg {
        display: none !important; /* Hide vertical line on mobile */
    }

    .svgContainerCard {
        max-width: 100% !important;
        min-height: auto !important;
    }

        .svgContainerCard img {
            width: 60px;
            height: auto;
            margin-bottom: 10px;
        }

        .svgContainerCard div {
            padding: 20px 15px;
            top: 0 !important;
        }

            .svgContainerCard div h6 {
                font-size: 1.3rem;
                margin-bottom: 15px;
            }

            .svgContainerCard div p {
                font-size: 14px;
                line-height: 22px;
            }
}

.nextStep {
    text-align: center;
    padding: 70px;
    /*background: url(../images/Indexlastsection.png);*/
    background-size: cover;
    background-position: center;
}
.btn-group {
    display: inline-flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-secondary-what {
    background: transparent;
    border: 1px solid #f97b30;
    color: white;
    padding: 11px 28px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;

}
@media (max-width: 991px) {
    .btn-secondary-what {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .btn-group {
        flex-direction: column;
        gap: 12px;
        width: -webkit-fill-available;
    }

    .btn-secondary-what {
        width: inherit;
    }
    .nextStep {
        padding: 38px;
    }
    
}


    /*------what is compaas source process end here-----------*/



    /*-----------core it framwork start here----------*/
    .citfcardt {
        background: url(../images/coreItFramework/LBaaS.png);
    }

        .citfcardt:hover {
            box-shadow: 1px 2px 12px inset #5c5555;
        }

    .citscardt {
        background: url(../images/coreItFramework/WAF.png);
    }

        .citscardt:hover {
            box-shadow: 1px 2px 12px inset #5c5555;
        }

    .cittcardt {
        background: url(../images/coreItFramework/SCM.png);
    }

        .cittcardt:hover {
            box-shadow: 1px 2px 12px inset #5c5555;
        }

    .citfrthcardt {
        background: url(../images/coreItFramework/FH&NS.png);
    }

        .citfrthcardt:hover {
            box-shadow: 1px 2px 12px inset #5c5555;
        }

    .citfifcardt {
        background: url(../images/coreItFramework/IPS.png);
    }

        .citfifcardt:hover {
            box-shadow: 1px 2px 12px inset #5c5555;
        }

    .citsixcardt {
        background: url(../images/coreItFramework/nsc.png);
    }

        .citsixcardt:hover {
            box-shadow: 1px 2px 12px inset #5c5555;
        }

    .citsevcardt {
        background: url(../images/coreItFramework/SIEM.png);
    }

        .citsevcardt:hover {
            box-shadow: 1px 2px 12px inset #5c5555;
        }


    .citeigcardt {
        background: url(../images/coreItFramework/ossh.png);
    }

        .citeigcardt:hover {
            box-shadow: 1px 2px 12px inset #5c5555;
        }


    .citenincardt {
        background: url(../images/coreItFramework/vapt.png);
    }

        .citenincardt:hover {
            box-shadow: 1px 2px 12px inset #5c5555;
        }


    /*-----------core it framwork start here----------*/






    /*---------------- get in touch start here----------------*/
    .getintouch {
        padding: 0px 150px;
        background: #000;
    }

    .gcontdiv {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

        .gcontdiv .gcard {
            width: 26.45%;
            border: 1px solid #8D8D8D;
            padding: 30px;
        }

    .gcard {
        border-radius: 8px;
    }

    .gcon {
        font-size: 38px;
        font-family: InterMedium;
    }

    .gconsec {
        font-size: 15px;
        font-family: InterLight;
        margin-top: 10px;
        display: block;
    }

    .gformdiv {
        display: flex;
        flex-wrap: wrap;
        padding-top: 76px;
        padding-bottom: 76px;
    }

    .fgform {
        width: 50%;
    }

    .sgform {
        width: 50%;
    }

    .fgform label {
        font-size: 38px;
        font-family: InterMedium;
    }

    .egformdiv {
        margin-top: 23px;
    }

        .egformdiv label {
            font-size: 12px;
            font-family: InterMedium;
            margin-bottom: 5px;
            display: block;
        }

        .egformdiv .inputingfrm {
            width: 100%;
            font-size: 14px;
            padding: 8px;
            border: none !important;
            border-bottom: 1px solid #8D8D8D !important;
            background: linear-gradient(#101726, #07090F);
            color: #fff;
        }

            .egformdiv .inputingfrm :focus-visible {
                outline: none;
            }

    .dubbtndiv {
        margin-top: 57px;
    }

    @media (max-width: 991px) {
        .getintouch {
            padding: 30px 20px;
        }

        .gcontdiv {
            gap: 20px;
        }

            .gcontdiv .gcard {
                width: 100%;
                padding: 25px;
            }

        .gcon {
            font-size: 26px;
            text-align: center;
        }

        .gconsec {
            text-align: center;
            font-size: 14px;
        }

        .gformdiv {
            flex-direction: column;
            padding-top: 40px;
            padding-bottom: 40px;
        }

        .fgform,
        .sgform {
            width: 100%;
            text-align: center;
        }

            .fgform label {
                font-size: 26px;
                line-height: 1.4;
            }

        .maincform {
            padding: 0 10px;
        }

        .egformdiv {
            margin-top: 20px;
        }

            .egformdiv label {
                font-size: 13px;
                text-align: left;
            }

            .egformdiv .inputingfrm {
                font-size: 14px;
                padding: 10px;
            }

        .dubbtndiv {
            margin-top: 40px;
        }

        .btn_orange {
            font-size: 15px;
            padding: 10px;
        }

        #successtxt {
            font-size: 13px;
            margin-top: 15px;
        }
    }

    @media (max-width: 576px) {
        .gcon {
            font-size: 22px;
        }

        .fgform label {
            font-size: 22px;
        }

        .egformdiv .inputingfrm {
            font-size: 13px;
            padding: 8px;
        }
    }


    /*-----------------    get input touch legend here---------------------*/

    .m-0 {
        margin: 0px !important;
    }

    .paragraph1 {
        font-size: 19px;
        margin-top: 22px;
        line-height: 30px;
        color: #E3E3E3;
        padding-right: 16px;
    }

    .paragraph2 {
        font-size: 19px;
        margin-top: 22px;
        line-height: 30px;
        color: #E3E3E3;
        padding-left: 16px;
    }

    .missionDiv {
        border: 1px solid #8D8D8D;
        padding: 10px;
        border-radius: 8px;
        margin-top: 30px;
        background: linear-gradient(to bottom, rgba(16, 23, 38, 1), rgba(7, 9, 15, 1));
    }

        .missionDiv p {
            color: #FEC801;
            font-size: 23px;
            margin: 0;
        }



    /* -------------------stand out css start here------------------- */
    .standOutSection {
        padding: 40px 20px;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 30px;
        position: relative;
        min-height: 320px;
    }

    .noncomdivNew {
        flex: 1 1 280px;
        max-width: 320px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        user-select: none;
    }

        .noncomdivNew label {
            font-weight: 700;
            font-size: 1.2rem;
            line-height: 1.3;
            z-index: 3;
            position: relative;
            color: #ffffff;
        }
    /* The large background logo behind label */
    /* .noncomdivNew::before {
      content: "";
      position: absolute;
      top: 175px;
      left: 50%;
      width: 200px;
      height: 200px;
      background: url('../images/whoweare/icon/compaaswatermark.png') no-repeat center/contain;
      filter: brightness(0.15);
      transform: translate(-50%, -50%);
      pointer-events: none;
      user-select: none;
      z-index: 1;
    } */

    .standOutDiv {
        flex: 2 1 600px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

        /* Each card */
        .standOutDiv > div {
            background: #000;
            padding: 25px;
            border-radius: 8px;
            /*box-shadow: 0 0 8px rgb(255 140 0 / 0.3);*/
            display: flex;
            gap: 30px;
            align-items: flex-start;
            transition: box-shadow 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

            .standOutDiv > div:hover {
                box-shadow: inset 0 0 24px 0px #ffffff47;
            }

    .imgHov {
        position: absolute;
        right: -14px;
        bottom: -18px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
        pointer-events: none;
    }

    .standOutDiv > div:hover .imgHov {
        opacity: 1;
        transform: translateY(0);
    }

    /* Icon container */
    .icon-container {
        flex-shrink: 0;
        /*width: 32px;
        height: 32px;*/
        /* background: #FF8C00; */
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #1a1a1a;
        font-size: 18px;
        user-select: none;
        /* box-shadow: 0 0 6px rgb(255 140 0 / 0.6); */
    }

    /* Content */
    .content {
        flex: 1;
        color: #eee;
    }

        .content .title {
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 4px;
            color: #fff;
        }

        .content .subtitle {
            font-weight: 400;
            font-size: 0.85rem;
            color: #ccc;
        }

    /* Responsive adjustments */
    @media (max-width: 900px) {
        section {
            flex-direction: column;
            align-items: center;
        }

        .noncomdiv {
            max-width: 100%;
            margin-bottom: 20px;
        }

            .noncomdiv::before {
                width: 160px;
                height: 160px;
            }

        .standOutDiv {
            width: 100%;
        }
    }

    @media (max-width: 450px) {
        .standOutDiv > div {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .icon-container {
            width: 28px;
            height: 28px;
            font-size: 16px;
            border-radius: 5px;
        }

        .content .title {
            font-size: 0.95rem;
        }

        .content .subtitle {
            font-size: 0.8rem;
        }
    }

    /* -------------------stand out css end here------------------- */



    /* -------------------ISO part css start here------------------- */

    /* Container styling */
    .certification-container {
        /* max-width: 850px; */
        width: 100%;
        border: 1px solid rgba(255 255 255 / 0.1);
        border-radius: 8px;
        padding: 24px 28px;
        backdrop-filter: saturate(180%) blur(12px);
        background-color: rgba(19, 26, 38, 0.6);
        box-shadow: 0 0 1rem rgb(80 90 105 / 0.12), inset 0 0 0.5rem rgb(255 255 255 / 0.05);
    }

        /* Heading */
        .certification-container h1 {
            font-weight: 600;
            font-size: 1.35rem;
            margin-bottom: 12px;
            color: #f7f8fa;
        }

        /* Intro paragraph */
        .certification-container .introNew {
            font-size: 0.9rem;
            line-height: 1.5;
            color: #bec5d1;
            margin-bottom: 24px;
        }

    /* Info box */
    .info-box {
        background-color: #000000e6;
        border-radius: 4px;
        padding: 16px 20px;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        box-shadow: 0 0 1rem rgb(0 0 0 / 0.8);
    }

        /* Icon container */
        .info-box .icon-wrapper {
            flex-shrink: 0;
            width: 52px;
            height: 52px;
            border-radius: 8px;
            background-color: #111820;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 10px #000 inset, 0 0 6px #b0bac9;
        }

            /* Icon image */
            .info-box .icon-wrapper img {
                max-width: 36px;
                max-height: 36px;
                object-fit: contain;
            }

        /* Info text */
        .info-box .info-text {
            flex: 1;
            font-size: 0.9rem;
            line-height: 1.4;
            color: #b0bac9;
            user-select: text;
        }

    /* Responsive font sizes & container padding */
    @media (max-width: 767px) {
        .certification-container {
            padding: 20px 20px;
        }

            .certification-container h1 {
                font-size: 1.15rem;
            }

            .certification-container .introNew,
            .info-box .info-text {
                font-size: 0.85rem;
            }

        .info-box .icon-wrapper {
            width: 44px;
            height: 44px;
        }

            .info-box .icon-wrapper img {
                max-width: 28px;
                max-height: 28px;
            }
    }

    @media (max-width: 400px) {
        .certification-container {
            padding: 18px 14px;
        }

        .info-box {
            gap: 12px;
            padding: 14px 16px;
        }

            .info-box .icon-wrapper {
                width: 38px;
                height: 38px;
            }

                .info-box .icon-wrapper img {
                    max-width: 24px;
                    max-height: 24px;
                }

        .certification-container h1 {
            font-size: 1.05rem;
        }

        .certification-container .introNew,
        .info-box .info-text {
            font-size: 0.8rem;
        }
    }


    /* -------------------ISO part css end here------------------- */


    .successDiv {
        margin: 6px 0px;
        font-size: 14px;
    }