:root{
        --ease:cubic-bezier(.22,1,.36,1);
    }

    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }

    body{
        min-height:300vh;
        font-family:Inter,sans-serif;

        background:
        radial-gradient(
            circle at top center,
            rgba(25,118,210,.08),
            transparent 45%
        ),
        #ffffff;
    }

/* ===================================
   NAVBAR SHELL
=================================== */

.header-shell{

    position:fixed;

    top:12px;
    left:50%;

    transform:translateX(-50%);

    width:1440px;

    z-index:9999;

    transition:
    width .9s cubic-bezier(.22,1,.36,1),
    transform .45s ease;
}
.header-shell.nav-hidden{

    transform:
    translateX(-50%)
    translateY(-10px);

    opacity:.92;
}


.header-shell::before{

    content:"";

    position:absolute;

    inset:-25px;

    background:
    linear-gradient(
        90deg,
        rgba(255,43,43,.05),
        rgba(255,178,29,.05),
        rgba(25,118,210,.05)
    );

    filter:blur(40px);

    z-index:-1;
}

.header-shell.scrolled{

    width:706px;
}

/* ===================================
   NAVBAR
=================================== */

.navbar-custom{

    width:100%;
    height:62px;

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

    backdrop-filter:
    blur(30px)
    saturate(180%);

    -webkit-backdrop-filter:
    blur(30px)
    saturate(180%);

    border:
    1px solid rgba(11,18,32,.08);

    border-radius:999px;

    padding:0 24px;

    display:flex;
    align-items:center;

    box-shadow:
    0 20px 60px rgba(11,18,32,.04);

    transition:
    box-shadow .45s ease;
}
.header-shell.scrolled .navbar-custom{

    box-shadow:
    0 15px 40px rgba(11,18,32,.08);
}

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

.logo{

    position:relative;

    display:flex;
    align-items:center;

    width:220px;
    height:40px;

    margin-right:180px;

    transition:
    margin-right .9s cubic-bezier(.22,1,.36,1),
    filter .3s ease;
}
.logo:hover{

    filter:
    drop-shadow(
        0 0 12px rgba(25,118,210,.15)
    );
}

.logo-full{

    position:absolute;

    left:0;
    top:50%;

    transform:translateY(-50%);

    height:40px;

    opacity:1;

    transition:
    opacity .45s ease,
    transform .6s cubic-bezier(.22,1,.36,1);
}
.logo-icon{

    position:absolute;

    left:0;
    top:50%;

    transform:
    translateY(-50%)
    scale(.8);

    height:34px;

    opacity:0;
    transition:
    opacity .45s ease,
    transform .6s cubic-bezier(.22,1,.36,1);
}
.header-shell.scrolled .logo{

    margin-right:40px;
    width:50px;

    transition:
    width .9s cubic-bezier(.22,1,.36,1),
    margin-right .9s cubic-bezier(.22,1,.36,1),
    filter .3s ease;
}
.header-shell.scrolled .logo-full{

    opacity:0;

    transform:
    translateY(-50%)
    translateX(-10px);
}

.header-shell.scrolled .logo-icon{

    opacity:1;

    transform:
    translateY(-50%)
    scale(1);
}
.logo img{

    height:40px;

    display:block;
}
/* ===================================
   RIGHT SECTION
=================================== */
.nav-right{

    display:flex;

    align-items:center;

    gap:32px;

    margin-left:auto;
}

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

.nav-menu{
    position:relative;
    display:flex;

    align-items:center;

    gap:40px;

    list-style:none;

    margin:0;
    padding:0;
}

.nav-indicator{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    height:38px;

    border-radius:999px;

    background:
    rgba(25,118,210,.08);

    border:
    1px solid rgba(25,118,210,.08);

    backdrop-filter:
    blur(30px)
    saturate(180%);

    transition:
    all .45s cubic-bezier(.22,1,.36,1);

    z-index:0;
}

.nav-menu li{
    position:relative;
    z-index:2;
}

.nav-menu a{

    color:#0B1220;

    text-decoration:none;

    font-size:18px;

    font-weight:500;

    display:flex;

    align-items:center;

    transition:
    color .3s ease;
}

.nav-menu a:hover{

    color:#1976D2;
}
.nav-menu a.active{

    background:
    rgba(25,118,210,.08);

    color:#1976D2;

    padding:8px 14px;

    border-radius:999px;
}
/* ===================================
   BADGES
=================================== */

.plus{

    margin-left:8px;

    color:#b5b5b5;
}
.work-count{

    width:20px;
    height:20px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #FF2B2B,
        #FFB21D
    );

    color:white;

    display:flex;

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

    font-size:11px;

    margin-left:6px;

    font-weight:600;
}

.hot-badge{

    background:
    linear-gradient(
        135deg,
        #1976D2,
        #0B1220
    );

    color:white;

    padding:8px 14px;

    border-radius:999px;

    font-size:13px;
}
/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:1500px){

    .header-shell{
        width:calc(100vw - 30px);
    }
    .header-shell.scrolled{
        width:706px;
    }
}


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

.menu-toggle{

    display:none;

    width:46px;
    height:46px;

    border:none;

    background:none;

    cursor:pointer;

    padding:0;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;
}

.menu-toggle span{

    width:22px;

    height:2px;

    background:#0B1220;

    border-radius:50px;

    transition:.3s;
}

.drawer-overlay{

    position:fixed;

    inset:0;

    background:rgba(8,12,18,.35);

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;
}

.mobile-drawer{

    position:fixed;

    top:0;

    right:-100%;

    width:100%;

    height:100vh;

    background:#fff;

    z-index:9999;

    transition:right .45s cubic-bezier(.22,1,.36,1);

    display:flex;

    flex-direction:column;
}

.mobile-drawer.open{

    right:0;
}

.drawer-overlay.show{

    opacity:1;

    visibility:visible;
}

.drawer-header{

    height:74px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 22px;

    border-bottom:1px solid rgba(0,0,0,.06);
}

.drawer-logo{

    height:36px;
}

.drawer-close{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#f5f5f5;

    cursor:pointer;

    font-size:24px;
}

.drawer-body{

    flex:1;

    overflow-y:auto;

    padding:18px 24px;
}

.drawer-menu{

    list-style:none;

    margin:0;

    padding:0;
}

.drawer-menu li{

    border-bottom:1px solid rgba(0,0,0,.06);
}

.drawer-menu a{

    height:64px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    text-decoration:none;

    color:#0B1220;

    font-size:20px;

    font-weight:600;
}

.contact-btn{

    position:relative;

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

    height:46px;
    padding:0 30px;

    background:#fff;
    color:#111;

    text-decoration:none;

    font-size:15px;
    font-weight:600;
    letter-spacing:.2px;

    border:1.5px solid #111;
    border-radius:999px;

    overflow:hidden;

    transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    background .28s,
    color .28s,
    box-shadow .28s;

    box-shadow:
    3px 3px 0 rgba(0,0,0,.08);
}

.contact-btn::before{

    content:"";

    position:absolute;

    inset:3px;

    border:1px solid rgba(0,0,0,.14);

    border-radius:999px;

    pointer-events:none;
}
.contact-btn::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:.08;

    background:

    repeating-linear-gradient(
        -45deg,
        transparent 0px,
        transparent 4px,
        rgba(0,0,0,.12) 5px,
        transparent 6px
    );

    pointer-events:none;
}
.contact-btn:hover{

    background:#111;

    color:#fff;

    transform:translateY(-2px);

    box-shadow:
    6px 6px 0 rgba(0,0,0,.08);
}

.contact-btn:active{

    transform:translateY(0);

    box-shadow:
    2px 2px 0 rgba(0,0,0,.08);
}
.contact-btn span{

    margin-left:12px;

    transition:.3s;
}

.contact-btn:hover span{

    transform:translate(3px,-3px);
}
@media (max-width:991px){

    .header-shell{

        width:calc(100vw - 20px);

        top:10px;
    }

    .header-shell.scrolled{

        width:calc(100vw - 20px);
    }

    .navbar-custom{

        display:grid;

        grid-template-columns:auto 1fr auto;

        align-items:center;

        gap:12px;

        padding:0 16px;

    }
    .logo{

        margin-right:0;

        width:auto;

        grid-column: ;
    }

    .logo-full{

        opacity:1 !important;

        transform:translateY(-50%) !important;
    }

    .logo-icon{

        display:none;
    }

    .nav-menu{

        display:none;
    }

    .nav-right{

        display:none;
    }

    .menu-toggle{

        display:flex;

        justify-self:end;
    }

    .contact-btn{
        width: max-content;
        justify-self: end;   /* or end */
        padding: 0 24px;
    }


}
/*====================================
DRAWER TOGGLE
====================================*/

.drawer-toggle{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    background:none;

    border:none;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    color:#172B4D;

    transition:.3s;

}

.drawer-toggle:hover{

    color:#1976D2;

}

.drawer-toggle span:first-child{

    display:flex;

    align-items:center;

    gap:12px;

}
.drawer-icon{

    width:26px;

    height:26px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F5F7FA;

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

}

.drawer-dropdown.active>.drawer-toggle .drawer-icon{

    transform:rotate(180deg);

    background:#1976D2;

    color:#fff;

}

.drawer-content{

    margin-left:14px;

    padding-left:16px;

    border-left:1px solid #ECECEC;

}

.drawer-content a{

    display:flex;

    align-items:center;

    padding:12px 0 12px 18px;

    color:#555;

    text-decoration:none;

    font-size:15px;

    transition:.25s;

    border-radius:8px;

}

.drawer-content a:hover{

    color:#1976D2;

    padding-left:28px;

}

/* Second Level */
.drawer-content .drawer-dropdown {
    margin-left: 16px;
}

/* Third Level Links */
.drawer-content .drawer-content a {
    display: block;
    padding: 12px 0 12px 18px;
    font-size: 15px;
    color: #555;
}

/* Third Level Toggle */
.drawer-content .drawer-toggle {
    padding-left: 18px;
}

/* Optional vertical guide line */
.drawer-content {
    border-left: 1px solid #efefef;
    margin-left: 12px;
    padding-left: 8px;
}

.drawer-dropdown{

    border-bottom:1px solid #F1F3F5;
}

.drawer-dropdown:last-child{

    border-bottom:none;

}

.mega-menu-shell{

    position:fixed;

    top:85px;

    left:50%;

    transform:translateX(-50%) translateY(20px);

    width:min(1400px,95vw);

    display:flex;
    justify-content:center;

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:99999;

    pointer-events:none;
}

.mega-menu-shell.menu-open{

    opacity:1;
    visibility:visible;

    transform:translateX(-50%) translateY(0);

    pointer-events:auto;
}
.mega-menu{

    width:min(1400px,95vw);

    background:#fcfcfc;

    border-radius:5px;

    border:1px solid #edf2f7;

    box-shadow:

    0 24px 80px rgba(10,25,41,.14),

    0 6px 24px rgba(10,25,41,.08);

    overflow:hidden;

}


/*new*/
/*==========================================
MEGA BODY
==========================================*/
.mega-body{

    display:flex;

    flex-direction:column;

    min-height:auto;

}


.mega-content{

    padding:36px;

}
.mega-panel{

    display:none;

    animation:fadePanel .3s ease;

}

.mega-panel.active{

    display:block;

}
@keyframes fadePanel{

    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
.panel-header{

    display:flex;

    align-items:flex-start;

    gap:24px;

    margin-bottom:40px;

}
.panel-header span{

    font-size:64px;

    font-weight:700;

    color:#ececec;

    line-height:1;

}
.panel-header h3{

    margin:0;

    font-size:34px;

    font-weight:700;

    color:#111;

}
.panel-header p{

    margin-top:10px;

    max-width:700px;

    color:#666;

    line-height:1.8;

}


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

.modules-grid{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:22px;

}
.service-module{

    position:relative;

    padding:24px;

    border:1.5px solid #111;

    border-radius:16px;

    background:white;

    transition:.3s;

}
.service-module::before{

    content:"";

    position:absolute;

    inset:5px;

    border:1px solid rgba(0,0,0,.12);

    border-radius:11px;

    pointer-events:none;

}
.service-module::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:.025;

    border-radius:16px;

    pointer-events:none;

    background:
    repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 4px,
        rgba(0,0,0,.4) 5px,
        transparent 6px
    );
}
.service-details{

    transition:.35s;

}

.service-nav:hover .service-details{

    transform:translateX(8px);

}

.service-nav.active .service-details{

    transform:translateX(8px);

}
.service-module h6{

    margin-bottom:18px;

    padding-bottom:14px;

    border-bottom:1px dashed rgba(0,0,0,.12);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.service-module h6 span{

    background:linear-gradient(
        90deg,
        #61A8FF,
        #7B5BFF,
        #E78A52
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.service-links{

    display:flex;

    flex-direction:column;

}
.service-links a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:11px 0;

    color:#555;

    text-decoration:none;

    transition:all .25s ease;

    border-bottom:1px solid rgba(0,0,0,.04);

}
.service-links a::after{

    content:"↗";

    opacity:0;

    transform:translateX(-6px);

    transition:.25s;

}


.service-links a:hover::after{

    opacity:1;

    transform:translateX(0);



}
.service-links a:hover{

    color:#111;

    padding-left:8px;



}

.service-links a:hover::after{

    opacity:1;

    transform:translateX(0);


}


/*topbar*/

/*==========================================
TOP TABS
==========================================*/

.mega-tabs{

    display:flex;

    align-items:center;

    gap:0;

    height:58px;

    padding:0 30px;

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(circle at 15% 50%,
        rgba(74,144,226,.18) 0%,
        transparent 45%),

    radial-gradient(circle at 85% 30%,
        rgba(123,91,255,.10) 0%,
        transparent 40%),

    linear-gradient(
        180deg,
        #12263b 0%,
        #0d1b2b 45%,
        #09131f 100%
    );

    border-bottom:1px solid rgba(255,255,255,.06);

    box-shadow:

    inset 0 -1px rgba(255,255,255,.03);

}
.mega-tabs::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.05;

    background-image:

    linear-gradient(
        rgba(255,255,255,.08) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.08) 1px,
        transparent 1px
    );

    background-size:40px 40px;

}

.mega-tabs::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:1px;

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

}
.mega-tab{

    position:relative;

    display:flex;

    align-items:center;

    height:100%;

    padding:0 22px;

    border:none;

    background:none;

    color:#9BA8B8;

    font-size:14px;

    font-weight:500;

    cursor:pointer;

    transition:.3s ease;


}
.mega-tab:hover{

    color:#EAF3FF;



}
.mega-tab.active{

    background:linear-gradient(
        90deg,
        #67B6FF,
        #7D5DFF,
        #D98B63
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}
.mega-tab::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:1px;

    background:linear-gradient(
        90deg,
        #67B6FF,
        #7D5DFF
    );

    box-shadow:

    0 0 12px rgba(103,182,255,.45);

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

}
.mega-tab:hover::after{

    width:100%;

}
.mega-tab.active::after{

    width:100%;

}


/*industry dopdown*/
/*==========================================
INDUSTRIES DROPDOWN
==========================================*/

.industries-trigger{

    position:relative;

}

.industry-dropdown{

    position:absolute;

    top:calc(100% + 18px);

    left:50%;

    transform:translateX(-50%) translateY(15px);

    width:360px;

    padding:12px;

    background:#fff;

    border:1px solid #edf2f7;

    border-radius:16px;

    box-shadow:
    0 24px 80px rgba(10,25,41,.12),
    0 6px 24px rgba(10,25,41,.06);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    z-index:99999;

    transition:
    opacity .28s ease,
    transform .28s ease,
    visibility .28s;

}

/* Open */

.industry-dropdown.open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(-50%) translateY(0);

}

/* Links */

.industry-dropdown a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 18px;

    border-radius:10px;

    text-decoration:none;

    color:#444;

    font-size:15px;

    font-weight:500;

    transition:all .25s ease;

}

/* Arrow */

.industry-dropdown a::after{

    content:"↗";

    opacity:0;

    transform:translateX(-6px);

    transition:.25s;

}

/* Hover */

.industry-dropdown a:hover{

    background:#f8fbff;

    color:#111;

    padding-left:24px;

}

.industry-dropdown a:hover::after{

    opacity:1;

    transform:translateX(0);

}

/* Divider */

.industry-dropdown a:not(:last-child){

    border-bottom:1px solid rgba(0,0,0,.05);

}

/* Level 2 (AI & GenAI, Software Engineering...) */
.nested-menu{
    padding-left:18px;
    border-left:1px solid rgba(255,255,255,.08);
}

/* Level 3 (AI Consulting, AI Development...) */
.nested-level-2{
    margin-left:18px;
}

.nested-level-2>.drawer-toggle{
    font-size:15px;
}

.nested-level-2 .drawer-content a{
    padding-left:18px;
    font-size:14px;
}