*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    font-family:'Inter',sans-serif; 
    
} 
/* Header background:#f8f8f8; */

.mainHeader{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(231,228,228);

    transition:.45s cubic-bezier(.4,0,.2,1);

}

.container{

    max-width:1320px;

}

.navbar{

    min-height:86px;

    padding:0;

}

/* Logo */

.logo img{

    height:34px;

    transition:.45s;

}

.logo:hover img{

    transform:scale(1.05);

}

/* Navigation */

.navbar-nav{

    gap:10px;

}

.nav-item{

    position:relative;

}

/* Navigation Link */

.nav-link{

    position:relative;

    color:#111 !important;

    font-size:15px;

    font-weight:500;

    padding:10px 18px !important;

    transition:.35s;

}

.nav-link:hover{

    color:#000 !important;

}

/* Underline */

.nav-link::before{

    content:"";

    position:absolute;

    bottom:5px;

    left:50%;

    width:0;

    height:2px;

    background:#111;

    transform:translateX(-50%);

    transition:.35s;

}

.nav-link:hover::before{

    width:22px;

}




/* ==========================================
   DROPDOWN GROUP
========================================== */

.megaNavGroup{

    width:100%;

}


/* ==========================================
   DROPDOWN BUTTON
========================================== */

.megaNavDrop{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 15px;

    border:0;

    background:transparent;

    border-radius:12px;

    color:#28345e;

    font-family:inherit;

    font-size:20px;

    font-weight:500;

    text-align:left;

    cursor:pointer;

    transition:
        background .3s ease,
        color .3s ease;

}


.megaNavDrop:hover{

    background:rgba(255,255,255,.75);

    color:#18275d;

}


/* ==========================================
   ARROW
========================================== */

.megaArrow{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    line-height:1;

    transition:
        transform .35s ease;

}


/* Open arrow */

.megaNavGroup.open .megaArrow{

    transform:rotate(90deg);

}


/* ==========================================
   SUB MENU
========================================== */

.megaSubMenu{

    max-height:0;

    overflow:hidden;

    opacity:0;

    padding-left:15px;

    transition:
        max-height .45s ease,
        opacity .35s ease,
        padding .35s ease;

}


/* OPEN */

.megaNavGroup.open .megaSubMenu{

    max-height:400px;

    opacity:1;

    padding-top:5px;

    padding-bottom:8px;

}


/* ==========================================
   SUB MENU LINKS
========================================== */

.megaSubMenu a{

    display:block;

    padding:8px 15px;

    color:#66718f;

    text-decoration:none;

    font-size:16px;

    border-radius:8px;

    transform:translateY(-5px);

    opacity:0;

    transition:
        background .25s ease,
        color .25s ease,
        transform .35s ease,
        opacity .35s ease;

}


/* Reveal */

.megaNavGroup.open .megaSubMenu a{

    opacity:1;

    transform:translateY(0);

}


/* Hover */

.megaSubMenu a:hover{

    background:rgba(255,255,255,.65);

    color:#18275d;

    padding-left:20px;

}


/* Remove Bootstrap Arrow */

.dropdown-toggle::after{

    display:none !important;

}

/* Premium Arrow */

.dropdown-toggle{

    display:flex;

    align-items:center;

    gap:8px;

}

.dropdown-toggle span.arrow{

    width:7px;

    height:7px;

    border-right:2px solid #222;

    border-bottom:2px solid #222;

    transform:rotate(45deg);

    transition:.35s;

    margin-top:-4px;

}

.dropdown:hover>.dropdown-toggle span.arrow{

    transform:rotate(225deg);

    margin-top:2px;

}

/* Invisible Bridge */

.dropdown{

    position:relative;

}

.dropdown::before{

    content:"";

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    height:24px;

}

/* Dropdown */

.dropdown-menu{

    display:block;

    position:absolute;

    top:calc(100% + 10px);

    left:0;

    min-width:250px;

    padding:12px;
    margin-top:-7px;
    border:none;

    border-radius:18px;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(25px);

    -webkit-backdrop-filter:blur(25px);

    box-shadow:

        0 25px 60px rgba(0,0,0,.08);

    opacity:0;

    visibility:hidden;

    transform:translateY(18px);

    pointer-events:none;

    transition:

        opacity .35s,

        transform .35s,

        visibility .35s;

}

/* Show Menu */

.dropdown:hover>.dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

    pointer-events:auto;

}

/* Dropdown Items */

.dropdown-menu a{

    display:block;

    padding:12px 18px;

    color:#111;

    text-decoration:none;

    border-radius:12px;

    font-size:14px;

    font-weight:500;

    transition:.3s;

}

.dropdown-menu a:hover{

    background:#f4f4f4;

    padding-left:26px;

}

/* Contact Button */

.contactBtn{

    display:flex;

    align-items:center;

    gap:8px;

    color:#111;

    text-decoration:none;

    font-weight:600;

    font-size:15px;

    transition:.35s;

}

.contactBtn span{

    transition:.35s;

}

.contactBtn:hover{

    color:#000;

}

.contactBtn:hover span{

    transform:translate(6px,-6px);

}

/* Toggler */

.navbar-toggler{

    border:none;

    box-shadow:none !important;

}

 




/* ==================================================
   HEADER RIGHT SIDE
================================================== */

.header-right{

    display:flex;

    align-items:center;

    gap:12px;

}


/* ==================================================
   MENU OPEN BUTTON
================================================== */

.megaMenuOpen{

    width:44px;

    height:44px;

    border:0;

    border-radius:50%;

    background:#fff;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:3px;

    cursor:pointer;

    box-shadow:
        0 10px 30px rgba(0,0,0,.12);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.megaMenuOpen span{

    display:block;

    width:25px;

    height:3px;

    border-radius:10px;

    background:#17174b;

    transition:.3s;

}


.megaMenuOpen:hover{

    transform:scale(1.08);

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);

}


/* ==================================================
   FULL SCREEN MENU
================================================== */

.megaMenu{

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    visibility:hidden;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .45s ease,
        visibility .45s ease;

}


.megaMenu.open{

    visibility:visible;

    opacity:1;

    pointer-events:auto;

}


/* ==================================================
   LEFT SIDEBAR
================================================== */

/* ==========================================
   MEGA MENU LEFT SIDEBAR
========================================== */

.megaSidebar{

    position:relative;

    width:25%;

    min-width:280px;

    height:100vh;

    max-height:100vh;

    background:#eef3fb;

    padding:125px 22px 40px;

    overflow-y:auto;

    overflow-x:hidden;

    transform:translateX(-40px);

    transition:
        transform .6s cubic-bezier(.22,1,.36,1);

    scrollbar-width:thin;

    scrollbar-color:#b8c1d4 transparent;

}


/* Chrome / Edge / Safari */

.megaSidebar::-webkit-scrollbar{

    width:6px;

}

.megaSidebar::-webkit-scrollbar-track{

    background:transparent;

}

.megaSidebar::-webkit-scrollbar-thumb{

    background:#b8c1d4;

    border-radius:20px;

}

.megaSidebar::-webkit-scrollbar-thumb:hover{

    background:#8995ae;

}


.megaMenu.open .megaSidebar{

    transform:translateX(0);

}

/* ==================================================
   CLOSE BUTTON
================================================== */

.megaMenuClose{

    position:absolute;

    top:12px;

    left:14px;

    width:42px;

    height:42px;

    border:0;

    border-radius:50%;

    background:#fff;

    cursor:pointer;

    box-shadow:
        0 15px 35px rgba(0,0,0,.12);

    transition:
        transform .35s ease;

}


.megaMenuClose:hover{

    transform:rotate(90deg);

}


.megaMenuClose span{

    position:absolute;

    left:10px;

    top:18px;

    width:20px;

    height:3px;

    border-radius:10px;

    background:#111;

}


.megaMenuClose span:first-child{

    transform:rotate(45deg);

}


.megaMenuClose span:last-child{

    transform:rotate(-45deg);

}


/* ==================================================
   LEFT NAVIGATION
================================================== */

.megaNavigation{

    display:flex;

    flex-direction:column;

    gap:3px;

}


.megaNavItem{

    position:relative;

    display:block;

    padding:14px 15px;

    border-radius:12px;

    color:#28345e;

    text-decoration:none;

    font-size:20px;

    font-weight:500;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.megaNavItem:hover{

    background:rgba(255,255,255,.75);

    color:#18275d;

    transform:translateX(3px);

}


.megaNavItem.active{

    background:#fff;

    color:#26346d;

    box-shadow:
        0 5px 20px rgba(30,50,100,.06);

}


.megaNavItem.active::before{

    content:"";

    position:absolute;

    left:0;

    top:10px;

    bottom:10px;

    width:6px;

    border-radius:10px;

    background:#4d7cff;

}


/* ==================================================
   SMALL NAVIGATION
================================================== */

.megaNavSmall{

    margin-top:32px;

    display:flex;

    flex-direction:column;

    gap:5px;

}


.megaNavSmall a{

    padding:9px 15px;

    color:#536083;

    text-decoration:none;

    font-size:18px;

    transition:
        color .3s ease,
        transform .3s ease;

}


.megaNavSmall a:hover{

    color:#172457;

    transform:translateX(4px);

}


/* ==================================================
   RIGHT CONTENT
================================================== */

.megaContent{

    flex:1;

    height:100vh;

    background:#fff;

    overflow-y:auto;

    transform:translateX(40px);

    transition:
        transform .7s cubic-bezier(.22,1,.36,1);

}


.megaMenu.open .megaContent{

    transform:translateX(0);

}


.megaContentInner{

    padding:90px 6vw;

}


.megaContent h2{

    margin:0 0 70px;

    font-size:48px;

    font-weight:600;

    color:#111;

    letter-spacing:-2px;

}


/* ==================================================
   CARDS
================================================== */

.megaCards{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:35px;

}


.megaCard{

    position:relative;

    height:570px;

    overflow:hidden;

    border-radius:18px;

    display:block;

    text-decoration:none;

    background:#111;

}


.megaCard img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .8s cubic-bezier(.22,1,.36,1);

}


.megaCard:hover img{

    transform:scale(1.06);

}


/* ==================================================
   CARD GRADIENT
================================================== */

.megaCardOverlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.95) 0%,
            rgba(0,0,0,.55) 35%,
            rgba(0,0,0,0) 75%
        );

}


/* ==================================================
   CARD CONTENT
================================================== */

.megaCardContent{

    position:absolute;

    left:30px;

    right:30px;

    bottom:28px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:20px;

    color:#fff;

}


.megaCardContent h3{

    margin:0;

    font-size:32px;

    font-weight:500;

}


.megaCardContent span{

    white-space:nowrap;

    font-size:18px;

    border-bottom:1px solid #fff;

    padding-bottom:5px;

    transition:
        transform .3s ease;

}


.megaCard:hover .megaCardContent span{

    transform:translateX(6px);

}


/* ==================================================
   BACKDROP
================================================== */

.megaMenuBackdrop{

    position:fixed;

    inset:0;

    z-index:9998;

    background:rgba(0,0,0,.35);

    opacity:0;

    visibility:hidden;

    transition:.4s;

}


.megaMenuBackdrop.open{

    opacity:1;

    visibility:visible;

}


/* ==================================================
   BODY LOCK
================================================== */

body.mega-open{

    overflow:hidden;

}


/* ==================================================
   TABLET
================================================== */

@media(max-width:1100px){

    .megaSidebar{

        width:30%;

    }

    .megaContentInner{

        padding:70px 35px;

    }

    .megaContent h2{

        font-size:40px;

    }

    .megaCard{

        height:450px;

    }

}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:767px){

    .megaMenu{

        flex-direction:column;

        overflow-y:auto;

    }

     .megaSidebar{

        width:100%;

        min-width:0;

        height:100vh;

        max-height:100vh;

        min-height:0;

        overflow-y:auto;

        overflow-x:hidden;

        padding:110px 20px 40px;

    }

    .megaContent{

        width:100%;
        display: none;
        height:auto;

        overflow:visible;

    }

    .megaContentInner{

        padding:50px 20px;

    }

    .megaContent h2{

        font-size:34px;

        margin-bottom:35px;

    }

    .megaCards{

        grid-template-columns:1fr;

    }

    .megaCard{

        height:350px;

    }

    .megaNavItem{

        font-size:20px;

    }

    .megaNavSmall a{

        font-size:17px;

    }

    .megaMenuClose{

        width:64px;

        height:64px;

    }

}


/* ==================================================
   SMALL MOBILE
================================================== */

@media(max-width:480px){

    .megaCard{

        height:300px;

    }

    .megaCardContent{

        left:20px;

        right:20px;

    }

    .megaCardContent h3{

        font-size:25px;

    }

    .megaCardContent span{

        font-size:15px;

    }

}


/* Mobile */

@media(max-width:991px){

    .navbar{

        min-height:75px;

    }

    .navbar-collapse{

        margin-top:15px;

        background:#fff;

        border-radius:20px;

        padding:15px;

        box-shadow:

            0 20px 40px rgba(0,0,0,.08);

    }

    .navbar-nav{

        gap:0;

    }

    .nav-link{

        padding:16px !important;

    }

    .nav-link::before{

        display:none;

    }

    .dropdown::before{

        display:none;

    }

    .dropdown-menu{

        display:none;

        opacity:1;

        visibility:visible;

        transform:none;

        position:relative;

        top:0;

        left:0;

        width:100%;

        background:#f8f8f8;

        box-shadow:none;

        border-radius:12px;

        margin-top:8px;

        pointer-events:auto;

    }

    .dropdown.show .dropdown-menu{

        display:block;

    }

    .contactBtn{

        margin-top:20px;

        padding-left:15px;

    }

}











/*==================================================
 HERO SECTION
==================================================*/

.hero-slider{
    padding:50px 0 0px;
    position:relative;
    overflow:hidden; 
}
 
.hero-slide{
    position:absolute;
    inset:0;
    width:100%;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s;
}

.hero-slide.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    z-index:2;
}
 

/*==================================================
 LEFT CONTENT
==================================================*/

.heroText{
    overflow:hidden;
}

.heroText>*{
    opacity:0;
    transform:translateY(25px);
}

.hero-slide.active .miniTitle{
    animation:fadeUp .5s .05s forwards;
}

.hero-slide.active h1{
    animation:fadeUp .6s .18s forwards;
}

.hero-slide.active p{
    animation:fadeUp .6s .35s forwards;
}

.hero-slide.active .heroBtn{
    animation:fadeUp .6s .52s forwards;
}

.miniTitle{
    display:inline-block;
    padding:6px 15px;
    border-radius:50px;
    background:#f4f4f4;
    font-size:12px;
    font-weight:600;
    letter-spacing:.5px;
}

.heroText h1{
    margin:14px 0;
    font-size:34px;
    line-height:1.2;
    font-weight:700;
}

.heroText p{
    color:#666;
    font-size:15px;
    line-height:1.8;
    margin-bottom:20px;
}


/*==================================================
 BUTTON
==================================================*/

.heroBtn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 24px;

    border-radius:40px;

    background:#111;
    color:#fff;
    text-decoration:none;

    transition:.35s;
}

.heroBtn:hover{

    background:#000;

    color:#fff;

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}
 
/*==================================================
 ANIMATIONS
==================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes cardIn{

    from{

        opacity:0;

        transform:
            translateX(60px)
            rotate(-12deg);

    }

    to{

        opacity:1;

        transform:
            translateX(0)
            rotate(-7deg);

    }

}


/*==================================================
 MOBILE
==================================================*/

@media(max-width:768px){

.hero-wrapper{

    height:auto;

}

.hero-slide{

    position:relative;

    display:none;

    opacity:1;

    visibility:visible;

    transform:none;

}

.hero-slide.active{

    display:block;

}

.heroBox{

    min-height:auto;

    padding:25px 0;

}

.heroText{

    text-align:center;

    margin-bottom:25px;

}

.heroText h1{

    font-size:28px;

}
 
}

 



/*==================================================
PREMIUM HERO
==================================================*/

.hero-section{

    position:relative;

    width:calc(100% - 30px);

    height:500px;

    margin:10px 15px 30px;

    border-radius:20px;

    overflow:hidden;

    background:#111;

}


/*==================================================
   ONE MAIN VIDEO
==================================================*/
.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

    transform:scale(1.04);

    animation:heroVideoZoom 12s ease-in-out infinite alternate;

} 


/*==================================================
   VIDEO OVERLAY
==================================================*/

.hero-video-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,0.02),
            rgba(0,0,0,0.05)
        );

}


/*==================================================
SLIDES
==================================================*/

.premium-slide{
    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    opacity:0;
    visibility:hidden;

    transition:
    opacity 1.3s ease,
    transform 6.5s linear,
    visibility 1.3s;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transform:scale(1.08);
}

.premium-slide.active{

    opacity:1;
    visibility:visible;

    transform:scale(1);

    z-index:10;

}
 


/*==================================================
OVERLAY
==================================================*/

.overlay{

position:absolute;
inset:0;

background:
radial-gradient(circle at top right,
rgba(255,255,255,.12),
transparent 35%),

radial-gradient(circle at bottom left,
rgba(255,255,255,.08),
transparent 40%);

}


/*==================================================
CONTENT
==================================================*/

.hero-content{

position:relative;

z-index:20;

max-width:900px;

padding:20px;

}


/*==================================================
TAG
==================================================*/

.hero-tag{

display:inline-block;

padding:8px 18px;

border-radius:40px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.15);

color:#fff;

font-size:13px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

}


/*==================================================
HEADING
==================================================*/

.hero-content h1{

margin-top:20px;

font-size:42px;

line-height:1.05;

font-weight:800;

color:#fff;

letter-spacing:-2px;

text-shadow:

0 15px 35px rgba(0,0,0,.25);

}


/*==================================================
DESCRIPTION
==================================================*/

.hero-content p{

margin:30px auto;

max-width:760px;

font-size:20px;

line-height:1.9;

color:rgba(255,255,255,.88);

}


/*==================================================
BUTTONS
==================================================*/

.hero-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

margin-top:20px;

}


.btn-main{

padding:16px 34px;

border-radius:50px;

background:#fff;

color:#111;

font-weight:700;

text-decoration:none;

transition:.35s;

box-shadow:

0 20px 45px rgba(0,0,0,.18);

}


.btn-main:hover{

transform:translateY(-5px);

color:#111;

}


.btn-outline{

padding:16px 34px;

border-radius:50px;

border:2px solid rgba(255,255,255,.35);

background:rgba(255,255,255,.10);

backdrop-filter:blur(18px);

color:#fff;

text-decoration:none;

transition:.35s;

}


.btn-outline:hover{

background:#fff;

color:#111;

transform:translateY(-5px);

}


/*==================================================
SCROLL ICON
==================================================*/

.scroll-down{

position:absolute;

left:50%;

bottom:20px;

transform:translateX(-50%);

z-index:100;

}


.scroll-down span{

display:block;

width:24px;

height:40px;

border:2px solid rgba(255,255,255,.65);

border-radius:30px;

position:relative;

}


.scroll-down span::before{

content:"";

position:absolute;

left:50%;

top:8px;

width:5px;

height:8px;

background:#fff;

border-radius:50%;

transform:translateX(-50%);

animation:scrollMove 2s infinite;

}


/*==================================================
TEXT ANIMATIONS
==================================================*/

.hero-tag,
.hero-content h1,
.hero-content p,
.hero-buttons{
    opacity:0;
    transform:translateY(40px);
}

.premium-slide.active .hero-tag{
    animation:fadeUp .8s .3s forwards;
}

.premium-slide.active h1{
    animation:fadeUp .8s .6s forwards;
}

.premium-slide.active p{
    animation:fadeUp .8s .9s forwards;
}

.premium-slide.active .hero-buttons{
    animation:fadeUp .8s 1.2s forwards;
}


/*==================================================
BACKGROUND ZOOM
==================================================*/
 

@keyframes bgZoom{

0%{

transform:scale(1.10);

}

100%{

transform:scale(1);

}

}


/*==================================================
FADE UP
==================================================*/

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/*==================================================
SCROLL ICON
==================================================*/

@keyframes scrollMove{

0%{

opacity:0;

top:8px;

}

50%{

opacity:1;

}

100%{

opacity:0;

top:22px;

}

}


/*==================================================
FLOATING LIGHTS
==================================================*/

.premium-slide::before{

content:"";

position:absolute;

width:520px;

height:520px;

border-radius:50%;

background:rgba(255,255,255,.06);

filter:blur(80px);

top:-180px;

left:-120px;

animation:floatLight1 10s ease-in-out infinite;

}

.premium-slide::after{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

background:rgba(255,255,255,.05);

filter:blur(100px);

bottom:-180px;

right:-120px;

animation:floatLight2 12s ease-in-out infinite;

}

@keyframes floatLight1{

0%{

transform:translate(0,0);

}

50%{

transform:translate(70px,40px);

}

100%{

transform:translate(0,0);

}

}

@keyframes floatLight2{

0%{

transform:translate(0,0);

}

50%{

transform:translate(-70px,-40px);

}

100%{

transform:translate(0,0);

}

}


/*==================================================
BUTTON EFFECT
==================================================*/

.btn-main{

position:relative;

overflow:hidden;

}

.btn-main::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:80%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.65),
transparent);

transform:skewX(-20deg);

transition:.8s;

}

.btn-main:hover::before{

left:130%;

}


/*==================================================
TEXT SHADOW
==================================================*/

.hero-content h1{

text-shadow:

0 20px 45px rgba(0,0,0,.35);

}

.hero-content p{

text-shadow:

0 5px 20px rgba(0,0,0,.35);

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:991px){

.hero-section{

height:460px;

}

.hero-content{

padding:20px;

}

.hero-content h1{

font-size:32px;

}

.hero-content p{

font-size:18px;

max-width:90%;

}

}


@media(max-width:768px){

.hero-section{

height:430px;

}

.hero-tag{

font-size:11px;

padding:7px 14px;

}

.hero-content h1{

font-size:30px;

line-height:1.15;

}

.hero-content p{

font-size:16px;

line-height:1.7;

margin:20px auto;

}

.hero-buttons{

gap:12px;

}

.btn-main,
.btn-outline{

padding:13px 22px;

font-size:15px;

}

.scroll-down{

display:none;

}

}


@media(max-width:480px){

.hero-section{

height:400px;

}

.hero-content h1{

font-size:32px;

}

.hero-content p{

font-size:15px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-main,
.btn-outline{

width:220px;

text-align:center;

}

}






/*==========================
Hero Section
==========================*/

.welcome-section{

    padding:50px 0;

    background:#fff;

}

.welcome-wrapper{

    display:flex;

    align-items:center;

    gap:80px;

}

.welcome-image{

    flex:0 0 30%;
    margin-left:7%;

}

.welcome-image img{

    width:100%;

    border-radius:12px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

    transition:.5s;

}

.welcome-image img:hover{

    transform:translateY(-8px);

}

.welcome-content{

    flex:1;

}

.welcome-subtitle{

    font-size:18px;

    color:#888;

    text-transform:uppercase;

    letter-spacing:2px;

}

.welcome-name{

    font-size:52px;

    font-weight:800;

    line-height:1.05;

    margin:15px 0;

    color:#111;

}

.welcome-role{

    font-size:32px;

    font-weight:600;

    color:#c7d600;

    margin-bottom:25px;

}

.welcome-text{

    font-size:18px;

    line-height:1.8;

    color:#666;

    max-width:550px;

}

.welcome-action{

    margin-top:40px;

    display:flex;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.resume-btn{

    background:#111;

    color:#fff;

    text-decoration:none;

    padding:5px 55px;

    border-radius:50px;

    transition:.35s;

}

.resume-btn:hover{

    background:#c7d600;

    color:#111;

}

.welcome-social{

    display:flex;

    gap:15px;

}

.welcome-social a{

    width:48px;

    height:48px;

    border:1px solid #ddd;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#111;

    text-decoration:none;

    transition:.35s;

}

.welcome-social a:hover{

    background:#111;

    color:#fff;

    transform:translateY(-5px);

}

@media(max-width:991px){

.welcome-wrapper{

    flex-direction:column;

    text-align:center;

}

.welcome-name{

    font-size:30px;

}

.welcome-role{

    font-size:24px;

}

.welcome-text{

    margin:auto;

}

.welcome-action{

    justify-content:center;

}

}

@media(max-width:576px){

.welcome-section{

    padding:70px 0;

}

.welcome-name{

    font-size:28px;

}

.welcome-role{

    font-size:20px;

}

.welcome-text{

    font-size:16px;

}

}









/*=========================================
PROCESS SECTION
=========================================*/

.process-section{

    padding:40px 0; 

}

.process-wrapper{

    display:flex;

    gap:20px;

    width:100%;

    height:460px;

}



/*=========================================
CARD
=========================================*/

.process-card{

    position:relative;

    flex:1;

    border-radius:20px;

    overflow:hidden;

    cursor:pointer;

    transition:

        flex .65s cubic-bezier(.4,0,.2,1),

        transform .45s ease,

        box-shadow .45s ease;

    min-width:110px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}



/* Active Card */

.process-card.active{

    flex:5.8;

}



/*=========================================
IMAGE
=========================================*/

.process-card img{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s ease;

}

.process-card:hover img{

    transform:scale(1.08);

}
.process-card img{

    transition:

        transform .8s ease,

        filter .6s ease;

}

.process-card:not(.active) img{

    filter:brightness(.82);

}

.process-card.active img{

    filter:brightness(1);

}


/*=========================================
OVERLAY
=========================================*/

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.75),

        rgba(0,0,0,.25),

        rgba(0,0,0,.15)

    );

}



/*=========================================
CONTENT
=========================================*/

.content{

    position:absolute;

    inset:0;

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    color:#fff;

    z-index:2;

}



/*=========================================
ICON
=========================================*/

.icon{

    font-size:54px;

}



/*=========================================
TITLE
=========================================*/

.content h2{

    margin:0;

    font-size:32px;

    font-weight:700;

    transition:.5s;

}



/*=========================================
DESCRIPTION
=========================================*/

.content p{

    margin-top:20px;

    font-size:18px;

    line-height:1.8;

    max-width:420px;

    opacity:1;

    transition:.5s;

}



/*=========================================
COLLAPSED CARDS
=========================================*/

.process-card:not(.active) .content{

    align-items:center;
 

}



.process-card:not(.active) .icon{

    margin-top:20px;

}



.process-card:not(.active) h2{

    writing-mode:vertical-rl;

    transform:rotate(180deg);

    font-size:22px;

    margin-top:auto;

    margin-bottom:25px;

}



.process-card:not(.active) p{

    display:none;

}



/*=========================================
ACTIVE CARD
=========================================*/

.process-card.active .content{

    justify-content:space-between;

    align-items:flex-start;

}



.process-card.active .icon{

    margin-top:0;

}



.process-card.active h2{

    writing-mode:horizontal-tb;

    transform:none;

}



.process-card.active p{

    display:block;

}

 


/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px){

.process-wrapper{

    flex-direction:column;

    height:auto;

}

.process-card{

    min-height:140px;

}

.process-card.active{

    min-height:420px;

}

.process-card:not(.active) h2{

    writing-mode:horizontal-tb;

    transform:none;

    margin-top:25px;

    margin-bottom:20px;

}

}


.process-card .content{

    transition:.45s ease;

}

.process-card:not(.active) p{

    opacity:0;

    transform:translateY(20px);

}

.process-card.active p{

    opacity:1;

    transform:translateY(0);

}

.process-card h2{

    transition:.45s ease;

}

.process-card.active h2{

    transform:translateY(0);

}

.process-card .icon{

    transition:.45s ease;

}

.process-card.active .icon{

    transform:scale(1);

}

.process-card:not(.active) .icon{

    transform:scale(.9);

}














.partners-section{

    background:#171717;

    padding:60px 0;

    overflow:hidden;

}

.partners-wrapper{

    display:grid;

    grid-template-columns:35% 65%;

    align-items:center;

    gap:60px;

}

.tag{

    display:inline-block;

    background:#262626;

    color:#fff;

    padding:12px 28px;

    border-radius:40px;

    font-size:14px;

    margin-bottom:25px;

}

.partners-left h2{

    color:#fff;

    font-size:42px;

    font-weight:700;

    line-height:1.1;

}

.logo-row{

    overflow:hidden;

    margin-bottom:18px;

}

.logo-track{

    display:flex;

    gap:20px;

    width:max-content;

}

.logo-box{

    width:170px;

    height:80px;

    background:#e9e9e9;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.logo-box img{

    max-width:120px;

    max-height:38px;

    opacity:.9;

    transition:.3s;

}

.logo-box:hover img{

    opacity:1;

    transform:scale(1.08);

}

.leftMove .logo-track{

    animation:moveLeft 28s linear infinite;

}

.rightMove .logo-track{

    animation:moveRight 28s linear infinite;

}

@keyframes moveLeft{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@keyframes moveRight{

    from{

        transform:translateX(-50%);

    }

    to{

        transform:translateX(0);

    }

}

.logo-row:hover .logo-track{

    animation-play-state:paused;

}

@media(max-width:992px){

.partners-wrapper{

    grid-template-columns:1fr;

}

.partners-left{

    margin-bottom:50px;

}

.partners-left h2{

    font-size:48px;

}

.logo-box{

    width:140px;

    height:70px;

}

}









/*======================================
DIGITAL FUTURE
======================================*/

.future-section{

    padding:30px 0px 80px;

    background:#ffffff;

    overflow:hidden;

}

.future-title{

    text-align:center;

    margin-bottom:80px;

}

.future-title h2{

    font-size:42px;

    font-weight:700;

    color:#111;

    line-height:1.1;

}



/*========================*/

.future-gallery{

    display:flex;

    justify-content:center;

    align-items:flex-end;

}



/*========================*/

.future-card{

    width:240px;

    height:360px;

    border-radius:28px;

    overflow:hidden;

    position:relative;

    cursor:pointer;

    margin-left:-35px;

    transition:all .55s cubic-bezier(.23,1,.32,1);

    box-shadow:0 20px 40px rgba(0,0,0,.10);

}

.future-card:first-child{

    margin-left:0;

}



/*========================*/

.future-card img{

    width:100%;

    height:auto;

    /*object-fit:cover;*/

    transition:transform .7s ease;

}



/*========================*/

.card1{

    transform:rotate(-8deg);

}

.card2{

    transform:rotate(-4deg);

}

.card3{

    transform:rotate(0deg);

}

.card4{

    transform:rotate(4deg);

}

.card5{

    transform:rotate(8deg);

}



/*========================*/

.future-card:hover{

    transform:translateY(-35px) scale(1.03);

    z-index:20;

    box-shadow:0 40px 80px rgba(0,0,0,.18);

}

.future-card:hover img{

    transform:scale(1.08);

}



/*========================*/

@media(max-width:992px){

.future-gallery{

    flex-wrap:wrap;

    gap:20px;

}

.future-card{

    margin-left:0;

    transform:none !important;

}

.future-card:hover{

    transform:translateY(-15px) scale(1.02) !important;

}

.future-title h2{

    font-size:48px;

}

}

@media(max-width:576px){

.future-card{

    width:180px;

    height:260px;

}

.future-title h2{

    font-size:36px;

}

}


.future-card{

    animation:floatCard 5s ease-in-out infinite;

}

.card2{

    animation-delay:.4s;

}

.card3{

    animation-delay:.8s;

}

.card4{

    animation-delay:1.2s;

}

.card5{

    animation-delay:1.6s;

}

@keyframes floatCard{

    0%,100%{

        translate:0 0;

    }

    50%{

        translate:0 -8px;

    }

}









/*==================================================
TESTIMONIAL SECTION
==================================================*/

.testimonial-section{

    position:relative;

    padding:20px;

    background:#111111;

    overflow:hidden;

}

/* Background Glow */

.testimonial-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:rgba(255,255,255,.04);

    border-radius:50%;

    top:-180px;

    left:-120px;

    filter:blur(90px);

}

.testimonial-section::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(255,255,255,.03);

    border-radius:50%;

    right:-80px;

    bottom:-100px;

    filter:blur(90px);

}


/*==================================================
HEADING
==================================================*/

.testimonial-heading{

    text-align:center;
 

}

.testimonial-tag{

    display:inline-block;

    padding:12px 26px;

    border-radius:40px;

    background:#1f1f1f;

    color:#fff;

    font-size:14px;

    letter-spacing:1px;

    margin-bottom:25px;

}

.testimonial-heading h2{

    color:#fff;

    font-size:64px;

    font-weight:700;

    line-height:1.15;

    margin:0;

}


/*==================================================
SLIDER
==================================================*/

.testimonial-slider{

    position:relative;

    max-width:900px;

    margin:auto;

}


/*==================================================
CARD
==================================================*/

.testimonial-item{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:

        opacity .55s ease,

        transform .55s ease,

        visibility .55s;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:30px;

    padding:10px;

    text-align:center;

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.testimonial-item.active{

    position:relative;

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/*==================================================
QUOTE ICON
==================================================*/

.quote-icon{

    font-size:70px;

    color:#c7f400;


}


/*==================================================
TEXT
==================================================*/

.testimonial-text{

    color:#d9d9d9;

    font-size:22px;

    line-height:1.5;

    max-width:720px;

    margin:0 auto 35px;

}


/*==================================================
RATING
==================================================*/

.testimonial-rating{

    margin-bottom:35px;

}

.testimonial-rating i{

    color:#FFD54A;

    font-size:24px;

    margin:0 3px;

}


/*==================================================
CLIENT
==================================================*/

.testimonial-client{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

}

.testimonial-client img{

    width:78px;

    height:78px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid rgba(255,255,255,.15);

    transition:.4s;

}

.testimonial-item:hover .testimonial-client img{

    transform:scale(1.08);

}

.testimonial-client h4{

    color:#fff;

    font-size:22px;

    margin:0;

}

.testimonial-client span{

    color:#bdbdbd;

    font-size:15px;

}


/*==================================================
NAVIGATION
==================================================*/

.testimonial-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    margin-top:40px;

}

.testimonial-prev,
.testimonial-next{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#1d1d1d;

    color:#fff;

    font-size:18px;

    transition:.35s;

}

.testimonial-prev:hover,
.testimonial-next:hover{

    background:#c7f400;

    color:#111;

}


/*==================================================
DOTS
==================================================*/

.testimonial-dots{

    display:flex;

    gap:12px;

}

.testimonial-dots .dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#666;

    transition:.35s;

    cursor:pointer;

}

.testimonial-dots .dot.active{

    background:#c7f400;

    transform:scale(1.4);

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

.testimonial-item{

    padding:10px;

}

.testimonial-heading h2{

    font-size:46px;

}

.testimonial-text{

    font-size:18px;

}

}

@media(max-width:576px){

.testimonial-section{

    padding:20px;

}

.testimonial-heading h2{

    font-size:34px;

}

.testimonial-text{

    font-size:16px;

    line-height:1.5;

}

.testimonial-client{

    flex-direction:column;

}

}











/*=========================================
TEAM SECTION
=========================================*/

.team-section{

    padding:20px 0;

    background:#ffffff;

    overflow:hidden;

}

.team-heading{

    text-align:center;

    margin-bottom:20px;

}

.team-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    background:#f2f2f2;

    color:#666;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:18px;

}

.team-heading h2{

    font-size:42px;

    font-weight:700;

    color:#111;

    line-height:1.1;

    margin-bottom:20px;

}

.team-heading p{

    max-width:620px;

    margin:auto;

    color:#777;

    font-size:18px;

    line-height:1.8;

}


/*=========================================
GRID
=========================================*/

.team-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:25px;

}


/*=========================================
CARD
=========================================*/

.team-card{

    text-align:center;

    transition:.45s ease;

}


/*=========================================
AVATAR
=========================================*/

.team-avatar{

    position:relative;

    width:190px;

    height:190px;

    margin:auto;

}


/*=========================================
BLOB
=========================================*/

.avatar-bg{

    position:absolute;

    inset:0;

    background:#f3f3f3;

    border-radius:45% 55% 60% 40% /
                  42% 38% 62% 58%;

    transition:.5s;

}


/*=========================================
IMAGE
=========================================*/

.team-avatar img{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:210px;

    z-index:2;

    transition:.45s ease;

}


/*=========================================
INFO
=========================================*/

.team-info{

    margin-top:30px;

}

.team-info h3{

    font-size:22px;

    color:#111;

    margin-bottom:8px;

    transition:.35s;

}

.team-info span{

    display:block;

    color:#888;

    font-size:17px;

    transition:.35s;

}


/*=========================================
SOCIAL
=========================================*/

.team-social{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:22px;

    opacity:0;

    transform:translateY(20px);

    transition:.4s;

}

.team-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#111;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    transition:.3s;

}

.team-social a:hover{

    background:#c7f400;

    color:#111;

}


/*=========================================
HOVER
=========================================*/

.team-card:hover .avatar-bg{

    background:#c7f400;

    border-radius:58% 42% 36% 64% /
                  55% 60% 40% 45%;

}

.team-card:hover img{

    transform:

        translateX(-50%)

        translateY(-18px)

        scale(1.05);

}

.team-card:hover h3{

    transform:translateY(-4px);

}

.team-card:hover span{

    color:#444;

}

.team-card:hover .team-social{

    opacity:1;

    transform:translateY(0);

}

.team-card:hover{

    transform:translateY(-10px);

}


/*=========================================
SHADOW
=========================================*/

.team-avatar{

    filter:drop-shadow(

        0 18px 30px rgba(0,0,0,.08)

    );

}

.team-card:hover .team-avatar{

    filter:drop-shadow(

        0 28px 45px rgba(0,0,0,.18)

    );

}


/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px){

.team-grid{

grid-template-columns:repeat(2,1fr);

}

.team-heading h2{

font-size:46px;

}

}

@media(max-width:576px){

.team-grid{

grid-template-columns:1fr;

}

.team-avatar{

width:220px;

height:220px;

}

.team-avatar img{

width:180px;

}

.team-heading h2{

font-size:34px;

}

.team-heading p{

font-size:16px;

}

}












/*=========================================
FOOTER
=========================================*/

.footer{

    position:relative;

    background:#f2f2f2;

    color:#000;

    padding:30px 0 10px;

    overflow:hidden;

}

/*=========================================
TOP CURVE
=========================================*/
 

/*=========================================
ANIMATED TOP BORDER
=========================================*/

.footer::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:linear-gradient(
        90deg,
        #c7f400,
        #00d2ff,
        #8b5cf6,
        #c7f400
    );

    background-size:300%;

    animation:footerBorder 8s linear infinite;

}

@keyframes footerBorder{

0%{background-position:0%;}

100%{background-position:300%;}

}

/*=========================================
WATERMARK
=========================================*/

.footer-watermark{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    font-size:240px;

    font-weight:800;

    color:rgba(255,255,255,.03);

    pointer-events:none;

    user-select:none;

}

/*=========================================
CTA
=========================================*/

.footer-cta{

    text-align:center;

    margin-bottom:30px;
    padding-top:10px;
    position:relative;

    z-index:2;

}

.footer-cta h2{

    font-size:34px;

    line-height:1.1;

    margin-bottom:25px;

}

.footer-cta p{

    color:#999;

    font-size:18px;

    max-width:700px;

    margin:auto;

    margin-bottom:40px;

}

/*=========================================
BUTTON
=========================================*/

.footer-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 42px;

    background:#c7f400;

    color:#111;

    border-radius:60px;

    font-weight:700;

    text-decoration:none;

    transition:.4s;

    box-shadow:0 20px 45px rgba(199,244,0,.25);

}

.footer-btn i{

    transition:.35s;

}

.footer-btn:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 60px rgba(199,244,0,.45);

}

.footer-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
MAIN GRID
=========================================*/

.footer-grid{

    display:grid;

    grid-template-columns:
    1fr
    1fr
    1fr
    1fr;

    gap:50px;

    position:relative;

    z-index:2;

}

/*=========================================
LOGO
=========================================*/

.footer-logo{

    font-size:34px;

    font-weight:800;

    margin-bottom:18px;

}

.footer-about{

    color:#9c9c9c;

    line-height:1.9;

}

/*=========================================
HEADINGS
=========================================*/

.footer-title{

    font-size:15px;

    margin-bottom:15px;

}

/*=========================================
LINKS
=========================================*/

.footer-links{

    list-style:none;

    padding:0;

}

.footer-links li{

    margin-bottom:5px;

}

.footer-links a{

    color:#999;

    text-decoration:none;

    transition:.35s;

    position:relative;
    
    font-size: 14px;

}

.footer-links a::before{

    content:"→";

    position:absolute;

    left:-20px;

    opacity:0;

    transition:.35s;

    color:#ccc;

}

.footer-links a:hover{

    color:#000;
    
    text-decoration: none;
    
    padding-left:5px;
    
    

}

.footer-links a:hover::before{

    opacity:1;

}

/*=========================================
CONTACT
=========================================*/

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-box{

    background:#171717;

    padding:18px;

    border-radius:16px;

    transition:.35s;

}

.contact-box:hover{

    background:#202020;

    transform:translateY(-5px);

}

.contact-box i{

    color:#c7f400;

    margin-right:10px;

}

/*=========================================
SOCIAL
=========================================*/

.footer-social{

    display:flex;

    gap:16px;
 

}

.footer-social a{

    width:38px;

    height:38px;

    border-radius:50%;

    background:#b8b8b6;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:#c7f400;

    color:#111;

    transform:translateY(-8px);

}

/*=========================================
BOTTOM
=========================================*/

.footer-bottom{

    margin-top:10px;

    padding-top:10px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    color:#888;

    position:relative;

    z-index:2;

}

/*=========================================
BACKGROUND GLOW
=========================================*/

.footer-glow{

    position:absolute;

    width:550px;

    height:550px;

    background:#c7f400;

    filter:blur(180px);

    opacity:.07;

    border-radius:50%;

    top:-100px;

    right:-120px;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:992px){

.footer-grid{

grid-template-columns:repeat(2,1fr);

}

.footer-cta h2{

font-size:48px;

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-social{

justify-content:center;

}

.footer-watermark{

font-size:120px;

}

.footer-cta h2{

font-size:36px;

}

}







/* ==========================================
   HERO CODE ANIMATION BACKGROUND
========================================== */

.hero-wrapper{

    position:relative;

    overflow:hidden;

    background:#fff;

}
 

/* Keep slider content above animation */

.hero-slide{

    position:relative;

    z-index:2;

}


/* Keep actual text above canvas */

.heroText{

    position:relative;

    z-index:5;

}


/* Optional soft glass effect */

.herosec-1{

    position:relative;

    z-index:5;

}


/* Slightly cleaner text */

.heroText h1{

    position:relative;

    z-index:5;

}


.heroText p{

    position:relative;

    z-index:5;

}







/* ==========================================
   MATRIX HERO SLIDER
========================================== */

.hero-slider{
    padding-top:70px; 
    width:100%;
}


/* Main wrapper */

.hero-wrapper{

    position:relative;

    width:100%;

    min-height:180px;

    overflow:hidden;

    background:#fff;

}


/* Matrix canvas */

#codeCanvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:0;

    pointer-events:none;

}


/* ==========================================
   SLIDES
========================================== */

.hero-slide{

    position:absolute;

    inset:0;

    width:100%;

    min-height:180px;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    z-index:1;

    transition:
        opacity .7s ease,
        visibility .7s ease;

}


/* ACTIVE SLIDE */

.hero-slide.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    z-index:2;

}


/* ==========================================
   CONTENT ABOVE MATRIX
========================================== */

.hero-slide .container{

    position:relative;

    z-index:5;

}


.heroBox{ 

    display:flex;

    align-items:center;

    justify-content:center;

}


/* Text */

.heroText{

    position:relative;

    z-index:10;

}


/* Heading */

.heroText h1{

    position:relative;

    z-index:10;

    margin:0 0 10px;

    font-size:28px;

    line-height:1.15;

    font-weight:700;

}


/* Paragraph */

.heroText p{

    position:relative;

    z-index:10;

    max-width:700px;

    margin:0 auto;

    font-size:17px;

    line-height:1.8;

}


/* ==========================================
   OPTIONAL GLASS EFFECT
========================================== */

.herosec-1{

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(5px);

    -webkit-backdrop-filter:blur(5px);

    border-radius:40px;

    padding:55px 40px;

}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

    .hero-slider{

        padding-top:90px;

    }

    .hero-wrapper{

        min-height:300px;

    }

    .hero-slide{

        min-height:500px;

    }

    .heroBox{

        min-height:200px;

        padding:30px 15px;

    }

    .heroText h1{

        font-size:22px;

    }

    .heroText p{

        font-size:15px;

    }

    .herosec-1{

        padding:20px 20px;

        border-radius:25px;

    }

}




.inner-title-head{paddint-top:5px; margin-top:5px;} 
.inner-title-head h4 span{ font-weight:bold; border-right:1px solid #000; padding-right:12px;}
.inner-title-head h4 small {font-size: 16px; padding-left:15px; color:#3F3F3F;}
.inner-title-head small{color:#3F3F3F; }




/* ==========================================
   ABOUT PAGE BANNER
========================================== */

.about-section{

    position:relative;

    width:calc(100% - 30px);

    min-height:390px;

    margin:15px 15px 0;

    border-radius:40px;

    overflow:hidden;

    display:flex;

    align-items:center;

    background-image:url('../images/aboutus-banner-bg.jpg');

    background-size:cover;

    background-position:center;

    isolation:isolate;

}


/* Dark / soft overlay */

.about-banner-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            120deg,
            rgba(10,18,35,.82),
            rgba(20,30,55,.52),
            rgba(10,10,20,.72)
        );

    z-index:-1;

}


/* ==========================================
   QUOTATION MARKS
========================================== */

.about-quote{

    position:absolute;

    font-family:Georgia,serif;

    font-size:220px;

    line-height:1;

    font-weight:700;

    color:rgba(255,255,255,.10);

    user-select:none;

    pointer-events:none;

    z-index:0;

    animation:quoteFloat 6s ease-in-out infinite;

}


.quote-left{

    left:5%;

    top:25px;

}


.quote-right{

    right:6%;

    bottom:-55px;

    animation-delay:1.5s;

}


/* ==========================================
   CONTENT
========================================== */

.about-banner-content{

    position:relative;

    z-index:5;

    max-width:850px;

    padding:70px 20px;

    color:#fff;

}


.about-breadcrumb{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 16px;

    border-radius:50px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.20);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    font-size:13px;

    color:rgba(255,255,255,.82);

    margin-bottom:22px;

}


.about-breadcrumb span{

    opacity:.5;

}


.about-banner-content h1{

    margin:0;

    font-size:64px;

    line-height:1;

    font-weight:800;

    letter-spacing:-2px;

    color:#fff;

}


.about-line{

    width:70px;

    height:4px;

    margin:25px 0;

    border-radius:20px;

    background:#fff;

}


.about-banner-content p{

    max-width:650px;

    margin:0;

    font-size:18px;

    line-height:1.8;

    color:rgba(255,255,255,.86);

}


/* ==========================================
   QUOTE ANIMATION
========================================== */

@keyframes quoteFloat{

    0%,
    100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-12px) rotate(2deg);

    }

}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

    .about-section{

        width:calc(100% - 16px);

        margin:90px 8px 0;

        min-height:330px;

        border-radius:28px;

    }


    .about-banner-content{

        padding:55px 25px;

    }


    .about-banner-content h1{

        font-size:42px;

        letter-spacing:-1px;

    }


    .about-banner-content p{

        font-size:15px;

        line-height:1.7;

    }


    .about-quote{

        font-size:150px;

    }

}





/* ==========================================
   ABOUT INTRO
========================================== */

.about-intro{

    padding:30px 0;

    background:#fff;

}


.about-intro-grid{

    display:grid;

    grid-template-columns:
        1.1fr .9fr;

    gap:80px;

    align-items:center;

}


/* ==========================================
   LABEL
========================================== */

.about-label{

    display:inline-block;

    padding:7px 15px;

    border-radius:50px;

    background:#f3f5f8;

    color:#5d6675;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

}


/* ==========================================
   HEADING
========================================== */

.about-intro-content h2{

    margin:22px 0;

    max-width:650px;

    font-size:50px;

    line-height:1.1;

    letter-spacing:-2px;

    font-weight:750;

    color:#151923;

}


.about-intro-content h2 span{

    display:block;

    color:#6573ff;

}


/* ==========================================
   TEXT
========================================== */

.about-lead{

    font-size:19px !important;

    line-height:1.8 !important;

    color:#363d49 !important;

}


.about-intro-content p{

    max-width:650px;

    font-size:16px;

    line-height:1.9;

    color:#727985;

}


/* ==========================================
   POINTS
========================================== */

.about-points{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:14px 25px;

    margin-top:30px;

}


.about-points div{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    font-weight:600;

    color:#303744;

}


.about-points i{

    font-size:20px;

    color:#6573ff;

}


/* ==========================================
   VISUAL
========================================== */

.about-intro-visual{

    position:relative;

    min-height:470px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* Main image card */

.about-image-card{

    position:relative;

    width:330px;

    height:330px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #f5f7ff,
            #edf0ff
        );

    box-shadow:
        0 30px 80px rgba(50,60,100,.14);

    z-index:2;

}


.about-image-card img{

    width:220px;

    height:220px;

    object-fit:contain;

    /*transition:*/
    /*    transform .7s ease;*/

}


/*.about-image-card:hover img{*/

/*    transform:scale(1.08) rotate(3deg);*/

/*}*/


/* ==========================================
   ORBIT
========================================== */

.about-orbit{

    position:absolute;

    width:390px;

    height:390px;

    border:1px dashed rgba(101,115,255,.25);

    border-radius:50%;

    animation:
        orbitRotate 18s linear infinite;

}


.about-orbit::before{

    content:"";

    position:absolute;

    width:13px;

    height:13px;

    border-radius:50%;

    background:#6573ff;

    top:45px;

    left:50px;

    box-shadow:
        0 0 0 8px rgba(101,115,255,.08);

}


/* ==========================================
   FLOATING CARD
========================================== */

.about-floating-card{

    position:absolute;

    right:0;

    bottom:45px;

    width:180px;

    padding:20px;

    border-radius:18px;

    background:
        rgba(255,255,255,.88);

    border:1px solid #edf0f5;

    box-shadow:
        0 20px 50px rgba(30,40,70,.12);

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);

    z-index:5;

    animation:
        aboutFloat 4s ease-in-out infinite;

}


.about-floating-card strong{

    display:block;

    font-size:28px;

    color:#6573ff;

}


.about-floating-card span{

    display:block;

    margin-top:5px;

    font-size:13px;

    line-height:1.5;

    color:#656d7b;

}

/* Naviation */

.navi-link{
    color: #000;
    margin-bottom: 22px;
}
.navi-link p{
    font-size: 13px;
}
.navi-link:hover{
    color: #000;
    text-decoration: none;
}


/* ==========================================
   ANIMATIONS
========================================== */

@keyframes orbitRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


@keyframes aboutFloat{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:991px){

    .about-intro{

        padding:80px 0;

    }

    .about-intro-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-intro-content{

        text-align:center;

    }

    .about-intro-content h2{

        margin-left:auto;

        margin-right:auto;

        font-size:42px;

    }

    .about-intro-content p{

        margin-left:auto;

        margin-right:auto;

    }

    .about-points{

        max-width:600px;

        margin-left:auto;

        margin-right:auto;

        text-align:left;

    }

}


@media(max-width:576px){

    .about-intro-content h2{

        font-size:34px;

    }

    .about-points{

        grid-template-columns:1fr;

    }

    .about-intro-visual{

        min-height:380px;

    }

    .about-image-card{

        width:260px;

        height:260px;

    }

    .about-image-card img{

        width:175px;

        height:175px;

    }

    .about-orbit{

        width:310px;

        height:310px;

    }

    .about-floating-card{

        right:5px;

        bottom:20px;

    }

}









/* =========================================================
   ABOUT US — NEW PREMIUM SECTIONS
   ========================================================= */

.about-story,
.company-journey,
.experience-section,
.industries-section,
.what-we-do-section,
.founder-section,
.vision-section,
.philosophy-section,
.why-us-section,
.about-final-cta{
    position:relative;
    overflow:hidden;
}


/* =========================================================
   SECTION COMMON HEADING
   ========================================================= */

.section-heading{
    max-width:850px;
    margin:0 auto 70px;
}

.section-heading > span{
    display:inline-block;
    margin-bottom:18px;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#777;
}

.section-heading h2{
    margin:0;
    font-size:52px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-2px;
    color:#111;
}

.section-heading h2 span{
    color:#c7d600;
}

.section-heading p{
    max-width:650px;
    margin:25px auto 0;
    color:#777;
    font-size:17px;
    line-height:1.8;
}


/* =========================================================
   ABOUT STORY
   ========================================================= */

.about-story{
    padding:10px 0;
    background:#fff;
}

.about-intro-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:90px;
}

.about-intro-content{
    max-width:700px;
}

.about-label{
    display:inline-block;
    margin-bottom:20px;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    color:#888;
}

.about-intro-content h2{
    margin:0 0 25px;
    font-size:55px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:-2px;
    color:#111;
}

.about-intro-content h2 span{
    color:#c7d600;
}

.about-lead{
    font-size:21px !important;
    color:#333 !important;
    line-height:1.7 !important;
}

.about-intro-content p{
    color:#666;
    font-size:17px;
    line-height:1.9;
}

.about-highlight{
    margin-top:35px;
    padding:25px 30px;
    border-left:4px solid #c7d600;
    background:#f7f7f7;
    color:#222;
    font-size:20px;
    font-weight:600;
    line-height:1.6;
}

.about-highlight span{
    color:#c7d600;
    font-size:35px;
}


/* Visual */

.about-intro-visual{
    position:relative;
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.about-image-card{
    width:380px;
    height:380px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(
            145deg,
            #f5f5f5,
            #ffffff
        );
    box-shadow:
        0 40px 90px rgba(0,0,0,.12);
    position:relative;
    z-index:2;
}

.about-image-card img{
    width:70%;
    height:auto;
    /*transition:.6s ease;*/
}

/*.about-image-card:hover img{*/
/*    transform:scale(1.08) rotate(3deg);*/
/*}*/

.about-floating-card{
    position:absolute;
    right:0;
    bottom:55px;
    z-index:5;
    padding:22px 28px;
    border-radius:20px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(15px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.about-floating-card strong{
    display:block;
    font-size:35px;
    line-height:1;
    color:#111;
}

.about-floating-card span{
    display:block;
    margin-top:8px;
    font-size:13px;
    color:#777;
}

.about-orbit{
    position:absolute;
    width:470px;
    height:470px;
    border:1px solid #e7e7e7;
    border-radius:50%;
    animation:aboutOrbit 15s linear infinite;
}

@keyframes aboutOrbit{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}


/* =========================================================
   COMPANY JOURNEY
   ========================================================= */

.company-journey{
    padding:120px 0;
    background:#f7f7f7;
}

.journey-timeline{
    position:relative;
    max-width:1000px;
    margin:auto;
}

.journey-timeline::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    background:#dcdcdc;
    transform:translateX(-50%);
}

.journey-item{
    position:relative;
    display:grid;
    grid-template-columns:1fr 80px 1fr;
    align-items:center;
    min-height:180px;
}

.journey-year{
    text-align:right;
    padding-right:40px;
    font-size:34px;
    font-weight:800;
    color:#111;
}

.journey-dot{
    position:relative;
    width:18px;
    height:18px;
    margin:auto;
    border-radius:50%;
    background:#c7d600;
    border:5px solid #f7f7f7;
    box-shadow:0 0 0 1px #c7d600;
    z-index:2;
}

.journey-content{
    padding-left:40px;
}

.journey-content h3{
    margin:0 0 10px;
    font-size:22px;
    font-weight:700;
    color:#111;
}

.journey-content p{
    margin:0;
    color:#777;
    line-height:1.7;
    font-size:15px;
}


/* =========================================================
   EXPERIENCE
   ========================================================= */

.experience-section{
    padding:110px 0;
    background:#fff;
}

.experience-grid{
    display:grid;
    grid-template-columns:
        repeat(4,1fr);
    gap:20px;
}

.experience-card{
    min-height:220px;
    padding:35px 25px;
    border:1px solid #e8e8e8;
    border-radius:25px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    transition:.45s ease;
    background:#fff;
}

.experience-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.08);
}

.experience-card strong{
    font-size:52px;
    line-height:1;
    font-weight:800;
    color:#111;
}

.experience-card span{
    margin-top:20px;
    color:#777;
    font-size:15px;
    line-height:1.6;
}


/* =========================================================
   INDUSTRIES
   ========================================================= */

.industries-section{
    padding:120px 0;
    background:#f7f7f7;
}

.industries-grid{
    display:grid;
    grid-template-columns:
        repeat(5,1fr);
    gap:15px;
}

.industry-card{
    min-height:350px;
    padding:35px 25px;
    border-radius:25px;
    background:#fff;
    transition:.45s ease;
}

.industry-card:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(0,0,0,.10);
}

.industry-icon{
    width:60px;
    height:60px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f1f4d7;
    color:#9aa800;
    font-size:25px;
    margin-bottom:35px;
}

.industry-card h3{
    font-size:20px;
    font-weight:700;
    color:#111;
    margin-bottom:15px;
}

.industry-card p{
    color:#777;
    font-size:14px;
    line-height:1.8;
}


/* =========================================================
   WHAT WE DO
   ========================================================= */

.what-we-do-section{
    padding:120px 0;
    background:#fff;
}

.services-grid{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);
    gap:20px;
}

.service-card{
    padding:40px;
    min-height:260px;
    border:1px solid #e8e8e8;
    border-radius:25px;
    transition:.45s ease;
}

.service-card:hover{
    background:#111;
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.15);
}

.service-card i{
    display:block;
    font-size:38px;
    margin-bottom:25px;
    color:#a9b700;
}

.service-card h3{
    font-size:22px;
    color:#111;
    font-weight:700;
    margin-bottom:15px;
}

.service-card p{
    color:#777;
    line-height:1.7;
}

.service-card:hover h3,
.service-card:hover p{
    color:#fff;
}


/* =========================================================
   FOUNDER
   ========================================================= */

.founder-section{
    padding:130px 0;
    background:#f5f5f5;
}

.founder-grid{
    display:grid;
    grid-template-columns:
        .8fr 1.2fr;
    gap:100px;
    align-items:center;
}

.founder-visual{
    position:relative;
}

.founder-image-wrap{
    overflow:hidden;
    border-radius:35px;
    background:#ddd;
    box-shadow:
        0 35px 80px rgba(0,0,0,.15);
}

.founder-image-wrap img{
    display:block;
    width:100%;
    height:600px;
    object-fit:cover;
    transition:.7s ease;
}

.founder-image-wrap:hover img{
    transform:scale(1.04);
}

.founder-badge{
    position:absolute;
    right:-30px;
    bottom:35px;
    padding:22px 30px;
    border-radius:20px;
    background:#111;
    color:#fff;
    box-shadow:0 25px 50px rgba(0,0,0,.2);
}

.founder-badge strong{
    display:block;
    font-size:32px;
}

.founder-badge span{
    font-size:13px;
    color:#aaa;
}

.founder-content h2{
    margin:0;
    font-size:58px;
    font-weight:800;
    letter-spacing:-2px;
    color:#111;
}

.founder-content h4{
    margin:8px 0 30px;
    font-size:20px;
    color:#a4b300;
}

.founder-content p{
    color:#666;
    font-size:16px;
    line-height:1.9;
}

.founder-lead{
    font-size:21px !important;
    color:#222 !important;
}

.founder-quote{
    margin-top:30px;
    padding:25px 30px;
    border-radius:20px;
    background:#fff;
    font-size:19px;
    font-weight:600;
    line-height:1.7;
}

.founder-quote span{
    color:#c7d600;
    font-size:35px;
}

.founder-signature{
    margin-top:30px;
}

.founder-signature strong{
    display:block;
    font-size:20px;
    color:#111;
}

.founder-signature span,
.founder-signature small{
    display:block;
    color:#777;
    margin-top:4px;
}


/* =========================================================
   VISION
   ========================================================= */

.vision-section{
    padding:120px 0;
    background:#111;
    color:#fff;
}

.vision-content{
    max-width:750px;
    margin-bottom:70px;
}

.vision-content > span{
    font-size:13px;
    letter-spacing:2px;
    font-weight:700;
    color:#c7d600;
}

.vision-content h2{
    margin:20px 0 25px;
    font-size:60px;
    line-height:1;
    font-weight:800;
    letter-spacing:-2px;
}

.vision-content p{
    color:#aaa;
    font-size:17px;
    line-height:1.8;
}

.vision-grid{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);
    gap:20px;
}

.vision-card{
    padding:35px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:25px;
    background:rgba(255,255,255,.04);
    transition:.45s ease;
}

.vision-card:hover{
    transform:translateY(-10px);
    background:rgba(255,255,255,.08);
}

.vision-card i{
    color:#c7d600;
    font-size:35px;
}

.vision-card h3{
    margin:25px 0 12px;
    font-size:23px;
}

.vision-card p{
    color:#aaa;
    line-height:1.7;
}


/* =========================================================
   PHILOSOPHY
   ========================================================= */

.philosophy-section{
    padding:120px 0;
    background:#fff;
}

.philosophy-grid{
    display:grid;
    grid-template-columns:
        repeat(5,1fr);
    gap:15px;
}

.philosophy-card{
    min-height:260px;
    padding:30px;
    border-top:3px solid #111;
    transition:.4s ease;
}

.philosophy-card:hover{
    transform:translateY(-8px);
    border-color:#c7d600;
}

.philosophy-card strong{
    font-size:14px;
    color:#aaa;
}

.philosophy-card h3{
    margin:45px 0 15px;
    font-size:23px;
}

.philosophy-card p{
    color:#777;
    font-size:14px;
    line-height:1.7;
}


/* =========================================================
   WHY US
   ========================================================= */

.why-us-section{
    padding:120px 0;
    background:#f7f7f7;
}

.why-us-grid{
    display:grid;
    grid-template-columns:
        1fr 1fr;
    gap:100px;
    align-items:center;
}

.why-us-content h2{
    margin:0 0 25px;
    font-size:55px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:-2px;
}

.why-us-content h2 span{
    color:#c7d600;
}

.why-us-content p{
    color:#666;
    font-size:17px;
    line-height:1.8;
}

.why-point{
    display:flex;
    align-items:flex-start;
    gap:25px;
    padding:25px 0;
    border-bottom:1px solid #ddd;
}

.why-point > span{
    font-size:14px;
    color:#aaa;
    font-weight:700;
}

.why-point h3{
    margin:0 0 7px;
    font-size:22px;
}

.why-point p{
    margin:0;
    color:#777;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.about-final-cta{
    padding:130px 0;
    background:#111;
    color:#fff;
    text-align:center;
}

.about-final-content{
    max-width:850px;
    margin:auto;
}

.about-final-content > span{
    color:#c7d600;
    font-size:13px;
    letter-spacing:2px;
    font-weight:700;
}

.about-final-content h2{
    margin:20px 0;
    font-size:70px;
    line-height:1;
    font-weight:800;
    letter-spacing:-3px;
}

.about-final-content p{
    max-width:700px;
    margin:0 auto;
    color:#aaa;
    font-size:17px;
    line-height:1.8;
}

.about-final-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:40px;
    flex-wrap:wrap;
}

.about-cta-primary,
.about-cta-secondary{
    padding:15px 28px;
    border-radius:50px;
    text-decoration:none;
    transition:.35s ease;
}

.about-cta-primary{
    background:#c7d600;
    color:#111;
}

.about-cta-secondary{
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
}

.about-cta-primary:hover,
.about-cta-secondary:hover{
    transform:translateY(-5px);
}

.about-final-line{
    margin-top:45px;
    color:#777;
    font-size:14px;
}


/* =======================
   ALL PAGES NAVIGATION CSS 
   ======================= */
.navi-link{
    text-decoration: none;
    color: #fff;
    margin-bottom: 22px;
}


/* CSS Mobile Modification for Menu Navigation */
.navbar-toggler-icon {
    display:block;
    width:24px;
    height:18px;
    position:relative;
    background-image:none !important;
    background-color:transparent !important;
    border-top:2px solid #17174b;
    border-bottom:2px solid #17174b;
}

.navbar-toggler-icon::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:2px;
    background:#17174b;
    transform:translateY(-50%);
    border-radius:10px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

    .industries-grid{
        grid-template-columns:
            repeat(3,1fr);
    }

    .philosophy-grid{
        grid-template-columns:
            repeat(3,1fr);
    }

    .experience-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:991px){

    .about-intro-grid,
    .founder-grid,
    .why-us-grid{
        grid-template-columns:1fr;
        gap:60px;
    }

    .about-intro-content h2,
    .founder-content h2,
    .why-us-content h2{
        font-size:44px;
    }

    .about-intro-visual{
        min-height:430px;
    }

    .founder-image-wrap img{
        height:500px;
    }

    .services-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .vision-grid{
        grid-template-columns:
            1fr;
    }

}


@media(max-width:767px){

    .about-story,
    .company-journey,
    .experience-section,
    .industries-section,
    .what-we-do-section,
    .founder-section,
    .vision-section,
    .philosophy-section,
    .why-us-section,
    .about-final-cta{
        padding:80px 0;
    }

    .section-heading{
        margin-bottom:45px;
    }

    .section-heading h2{
        font-size:38px;
    }

    .about-intro-content h2,
    .founder-content h2,
    .why-us-content h2{
        font-size:38px;
    }

    .about-image-card{
        width:280px;
        height:280px;
    }

    .about-orbit{
        width:340px;
        height:340px;
    }

    .about-floating-card{
        right:5px;
        bottom:20px;
    }

    .journey-timeline::before{
        left:10px;
    }

    .journey-item{
        grid-template-columns:
            35px 1fr;
        min-height:0;
        padding:25px 0;
    }

    .journey-year{
        grid-column:2;
        grid-row:1;
        text-align:left;
        padding:0 0 8px;
        font-size:25px;
    }

    .journey-dot{
        grid-column:1;
        grid-row:1 / span 2;
    }

    .journey-content{
        grid-column:2;
        padding:0;
    }

    .experience-grid,
    .industries-grid,
    .services-grid,
    .philosophy-grid{
        grid-template-columns:1fr;
    }

    .vision-content h2{
        font-size:45px;
    }

    .about-final-content h2{
        font-size:48px;
    }

    .founder-image-wrap img{
        height:420px;
    }

}


@media(max-width:480px){

    .about-intro-content h2,
    .founder-content h2,
    .why-us-content h2{
        font-size:34px;
    }

    .section-heading h2{
        font-size:32px;
    }

    .about-final-content h2{
        font-size:40px;
    }

    .about-floating-card{
        padding:15px 20px;
    }

}

/* ==========================================================
   REQUESTED UPDATES - 2026-09-21
   Only the requested mobile header / index visual adjustments
   ========================================================== */

/* 2) Welcome image: grayscale by default, original colour on hover */
.welcome-image img{
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
    transition:filter .45s ease, -webkit-filter .45s ease, transform .5s ease;
}
.welcome-image img:hover{
    filter:grayscale(0%);
    -webkit-filter:grayscale(0%);
}

/* 3) WHAT WE DO FOR YOU - View More: visible background button */
.partners-left .welcome-action .resume-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:145px;
    min-height:44px;
    padding:10px 30px;
    background:#c7d600;
    color:#111;
    border:1px solid #c7d600;
    box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.partners-left .welcome-action .resume-btn:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}

/* 4) We Shape Your Digital Future - exact image centering */
.future-card{
    overflow:hidden;
}
.future-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 50%;
    display:block;
}

/* 1) MOBILE HEADER - both menu controls remain available */
@media (max-width:991.98px){

    .mainHeader .navbar{
        position:relative;
        display:flex;
        align-items:center;
        flex-wrap:wrap;
    }

    .mainHeader .navbar-brand{
        margin-right:auto;
    }

    /* First menu: Bootstrap/main navigation */
    .mainHeader .navbar-toggler{
        display:flex !important;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        padding:9px;
        margin-left:8px;
        border:0 !important;
        border-radius:50%;
        background:#fff;
        box-shadow:0 10px 30px rgba(0,0,0,.10);
        order:2;
        flex:0 0 44px;
    }

    .mainHeader .navbar-toggler:focus{
        outline:none;
        box-shadow:0 10px 30px rgba(0,0,0,.14);
    }

    /* Second menu: full-screen mega menu */
    .mainHeader .header-right{
        display:flex !important;
        align-items:center;
        gap:8px;
        margin-left:8px;
        order:3;
    }

    /* Contact is desktop-only; both menu buttons remain */
    .mainHeader .header-right .contactBtn{
        display:none !important;
    }

    .mainHeader .megaMenuOpen{
        display:flex !important;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        flex:0 0 44px;
    }

    /* Main Bootstrap menu opens underneath the header */
    .mainHeader .navbar-collapse{
        flex-basis:100%;
        width:100%;
        order:4;
    }

    .mainHeader .navbar-collapse.show,
    .mainHeader .navbar-collapse.collapsing{
        display:block;
    }

    /* Hide the decorative hero images/animation on mobile for a clean fit.
       The actual text/navigation remain unchanged. */
    #codeCanvas,
    .hero-video{
        display:none !important;
    }

    /* Mega menu: mobile uses the navigation panel only */
    .megaMenu{
        overflow:hidden;
    }

    .megaMenu .megaSidebar{
        width:100%;
        min-width:0;
        height:100dvh;
        max-height:100dvh;
        padding:82px 18px 32px;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .megaMenu .megaContent{
        display:none;
    }

    .megaMenuClose{
        position:fixed;
        top:16px;
        left:16px;
        z-index:3;
        width:44px;
        height:44px;
    }

    .megaMenuClose span{
        left:12px;
        top:20px;
        width:20px;
    }
}

@media (max-width:575.98px){

    .mainHeader .navbar-toggler,
    .mainHeader .megaMenuOpen{
        width:40px;
        height:40px;
        flex-basis:40px;
    }

    .mainHeader .navbar-toggler{
        padding:8px;
    }

    .mainHeader .header-right{
        margin-left:5px;
    }

    .megaNavigation .megaNavItem,
    .megaNavigation .megaNavDrop{
        font-size:18px;
    }
}