/* =========================================================
   VEDANTA ERP WEBSITE
   PREMIUM NAVBAR
   CAPS.ai STYLE INTERACTION
   COMPLETE RESPONSIVE VERSION
========================================================= */


/* =========================================================
   ROOT COLOR VARIABLES
========================================================= */

:root {

    --vedanta-purple: #7b438e;
    --vedanta-purple-light: rgba(123, 67, 142, 0.10);

    --vedanta-red: #df3547;
    --vedanta-red-light: rgba(223, 53, 71, 0.10);

    --vedanta-blue: #174c7d;
    --vedanta-blue-light: rgba(160, 186, 211, 0.01);

    --vedanta-teal: #1497a6;
    --vedanta-teal-light: rgba(20, 151, 166, 0.10);

    --vedanta-orange: #f5a623;
    --vedanta-orange-dark: #dc8a18;
    --vedanta-orange-light: rgba(245, 165, 35, 0.012);

    --vedanta-dark: #153f4a;
    --vedanta-dark-2: #304757;

    --vedanta-text: #3a4c59;
    --vedanta-text-light: #73828e;

    --vedanta-border: rgba(21, 63, 74, 0.09);

}


/* =========================================================
   BASIC RESET FOR NAVBAR
========================================================= */

.vedanta-navbar *,
.vedanta-navbar *::before,
.vedanta-navbar *::after {

    box-sizing: border-box;

}


/* =========================================================
   NAVBAR TAP HIGHLIGHT
========================================================= */

.vedanta-navbar a,
.vedanta-navbar button {

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   MAIN FIXED NAVBAR
========================================================= */

.vedanta-navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    background:
        rgba(255, 255, 255, 0.94);

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

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

    border-bottom:
        1px solid rgba(21, 63, 74, 0.07);

    box-shadow:
        0 8px 30px rgba(15, 48, 56, 0.04);

    transition:
        background 0.30s ease,
        box-shadow 0.30s ease,
        border-color 0.30s ease;

}


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

.vedanta-navbar.scrolled {

    background:
        rgba(255, 255, 255, 0.98);

    border-bottom:
        1px solid rgba(21, 63, 74, 0.10);

    box-shadow:
        0 14px 40px rgba(15, 48, 56, 0.10);

}


/* =========================================================
   MULTICOLOR TOP ACCENT
========================================================= */

.navbar-gradient-line {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            var(--vedanta-red) 0%,
            #f0522d 15%,
            var(--vedanta-purple) 35%,
            var(--vedanta-blue) 55%,
            var(--vedanta-teal) 75%,
            var(--vedanta-orange) 100%
        );

}


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

.navbar-container {

    width:
        min(
            calc(100% - 64px),
            1480px
        );

    min-height:
        88px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        28px;

}


/* =========================================================
   BRAND
========================================================= */

.navbar-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        0;

    color:
        inherit;

    text-decoration:
        none;

}


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

.brand-logo {

    width:
        auto;

    height:
        62px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;


    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.brand-logo img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;

}


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

.navbar-brand:hover .brand-logo {

    transform:
        translateY(-1px);


}


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

.brand-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        0;

}


/* =========================================================
   BRAND NAME
========================================================= */

.brand-name {

    display:
        block;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        22px;

    line-height:
        1.1;

    font-weight:
        900;

    letter-spacing:
        -0.045em;

    white-space:
        nowrap;

    background:
        linear-gradient(
            90deg,
            var(--vedanta-purple),
            var(--vedanta-blue),
            var(--vedanta-teal)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


/* =========================================================
   BRAND TAGLINE
========================================================= */

.brand-tagline {

    display:
        block;

    margin-top:
        5px;

    font-size:
        8px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    color:
        var(--vedanta-text-light);

    white-space:
        nowrap;

}


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

.navbar-menu {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        2px;

    min-width:
        0;

}


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

.nav-link {

    position:
        relative;

    min-height:
        46px;

    padding:
        0 13px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border:
        none;

    background:
        transparent;

    color:
        #50636d;

    font-family:
        inherit;

    font-size:
        16px;

    font-weight:
        750;

    line-height:
        1;

    text-decoration:
        none;

    white-space:
        nowrap;

    cursor:
        pointer;

    border-radius:
        10px;

    transition:
        color 0.22s ease,
        background 0.22s ease;

}


/* =========================================================
   NAV LINK UNDERLINE
========================================================= */

.nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        4px;

    width:
        0;

    height:
        2px;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            var(--vedanta-purple),
            var(--vedanta-teal)
        );

    transform:
        translateX(-50%);

    transition:
        width 0.25s ease;

}


/* =========================================================
   NAV LINK HOVER
========================================================= */

.nav-link:hover {

    color:
        var(--vedanta-dark);

    background:
        rgba(20, 151, 166, 0.045);

}


.nav-link:hover::after,
.nav-link.active::after {

    width:
        22px;

}


/* =========================================================
   ACTIVE NAV
========================================================= */

.nav-link.active {

    color:
        var(--vedanta-dark);

}


/* =========================================================
   NAV DROPDOWN
========================================================= */

.nav-dropdown {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

}


/* =========================================================
   DROPDOWN HOVER BRIDGE
   CAPS STYLE
========================================================= */

.nav-dropdown::after {

    content:
        "";

    position:
        absolute;

    top:
        100%;

    left:
        -30px;

    right:
        -30px;

    height:
        18px;

    background:
        transparent;

    pointer-events:
        auto;

}


/* =========================================================
   DROPDOWN TRIGGER
========================================================= */

.dropdown-trigger {

    appearance:
        none;

    -webkit-appearance:
        none;

}


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

.dropdown-arrow {

    font-size:
        9px;

    color:
        #82929a;

    transition:
        transform 0.25s ease,
        color 0.25s ease;

}


/* =========================================================
   DROPDOWN OPEN ARROW
========================================================= */

.nav-dropdown.open .dropdown-arrow {

    transform:
        rotate(180deg);

    color:
        var(--vedanta-teal);

}


/* =========================================================
   DESKTOP SOLUTIONS MEGA MENU
========================================================= */

.solutions-mega-menu {

    position:
        fixed;

    top:
        88px;

    left:
        50%;

    width:
        min(
            calc(100vw - 120px),
            1080px
        );

    display:
        grid;

    grid-template-columns:
        280px minmax(0, 1fr);

    gap:
        20px;

    padding:
        20px;

    z-index:
        9998;

    background:
        rgba(255, 255, 255, 0.98);

    backdrop-filter:
        blur(20px) saturate(160%);

    -webkit-backdrop-filter:
        blur(20px) saturate(160%);

    border:
        1px solid rgba(21, 63, 74, 0.10);

    border-radius:
        20px;

    box-shadow:
        0 22px 60px rgba(15, 48, 56, 0.15);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

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

    transform-origin:
        top center;

    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s ease;

    overflow:
        hidden;

}


/* =========================================================
   MEGA MENU TOP MULTICOLOR ACCENT
========================================================= */

.solutions-mega-menu::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            var(--vedanta-red) 0%,
            var(--vedanta-purple) 30%,
            var(--vedanta-blue) 52%,
            var(--vedanta-teal) 74%,
            var(--vedanta-orange) 100%
        );

    opacity:
        0.95;

}


/* =========================================================
   OPEN THROUGH JAVASCRIPT
========================================================= */

.nav-dropdown.open .solutions-mega-menu {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

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

}


/* =========================================================
   CAPS STYLE HOVER OPEN
========================================================= */

@media (min-width: 981px) {

    .nav-dropdown:hover:not(.hover-disabled)
    .solutions-mega-menu {

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

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

    }

}


/* =========================================================
   HOVER DISABLED
   Prevent click-close -> hover-immediate-reopen
========================================================= */

.nav-dropdown.hover-disabled
.solutions-mega-menu,

.nav-dropdown:hover.hover-disabled
.solutions-mega-menu,

.nav-dropdown.open.hover-disabled
.solutions-mega-menu {

    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;

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

}


/* =========================================================
   MEGA MENU HEADER
========================================================= */

.mega-menu-header {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    min-width:
        0;

    min-height:
        100%;

    padding:
        6px 20px 6px 2px;

    margin:
        0;

    border:
        none;

    border-right:
        1px solid rgba(21, 63, 74, 0.08);

}


/* =========================================================
   MEGA EYEBROW
========================================================= */

.mega-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        10px;

    font-size:
        9px;

    line-height:
        1.2;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    color:
        #2d6b87;

}


/* =========================================================
   EYEBROW DOT
========================================================= */

.mega-eyebrow::before {

    content:
        "";

    width:
        7px;

    height:
        7px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--vedanta-red),
            var(--vedanta-purple),
            var(--vedanta-teal)
        );

    box-shadow:
        0 0 0 4px rgba(20, 151, 166, 0.06);

}


/* =========================================================
   MEGA MENU TITLE
========================================================= */

.mega-menu-header h3 {

    max-width:
        250px;

    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        24px;

    line-height:
        1.22;

    font-weight:
        800;

    letter-spacing:
        -0.04em;

    color:
        var(--vedanta-dark-2);

}


/* =========================================================
   MEGA MENU TITLE SPAN
========================================================= */

.mega-menu-header h3 span {

    background:
        linear-gradient(
            90deg,
            var(--vedanta-purple),
            var(--vedanta-blue),
            var(--vedanta-teal)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


/* =========================================================
   MEGA MENU DESCRIPTION
========================================================= */

.mega-menu-header p {

    max-width:
        255px;

    margin:
        12px 0 0;

    font-size:
        12px;

    line-height:
        1.65;

    font-weight:
        500;

    color:
        #647583;

}


/* =========================================================
   EXPLORE ALL SOLUTIONS
========================================================= */

.mega-all-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    margin-top:
        18px;

    min-height:
        40px;

    padding:
        0 15px;

    border-radius:
        11px;

    font-size:
        11px;

    font-weight:
        800;

    color:
        #2d6b87;

    text-decoration:
        none;

    white-space:
        nowrap;

    background:
        linear-gradient(
            135deg,
            rgba(20, 151, 166, 0.08),
            rgba(23, 76, 125, 0.06)
        );

    border:
        1px solid rgba(20, 151, 166, 0.09);

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease;

}


.mega-all-link:hover {

    transform:
        translateY(-1px);

    background:
        linear-gradient(
            135deg,
            rgba(20, 151, 166, 0.13),
            rgba(23, 76, 125, 0.09)
        );

    border-color:
        rgba(20, 151, 166, 0.18);

}


.mega-all-link i {

    transition:
        transform 0.22s ease;

}


.mega-all-link:hover i {

    transform:
        translateX(3px);

}


/* =========================================================
   MEGA MENU GRID
========================================================= */

.mega-menu-grid {

    display:
        grid;

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

    gap:
        8px;

    min-width:
        0;

}


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

.solution-card {

    position:
        relative;

    min-height:
        68px;

    padding:
        9px 11px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid transparent;

    border-radius:
        13px;

    background:
        #fbfdfe;

    color:
        inherit;

    text-decoration:
        none;

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;

}


/* =========================================================
   SOLUTION CARD ACCENT
========================================================= */

.solution-card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        12px;

    bottom:
        12px;

    width:
        2px;

    border-radius:
        10px;

    background:
        linear-gradient(
            180deg,
            var(--vedanta-teal),
            var(--vedanta-blue)
        );

    opacity:
        0;

    transition:
        opacity 0.22s ease;

}


/* =========================================================
   SOLUTION CARD HOVER
========================================================= */

.solution-card:hover {

    background:
        linear-gradient(
            135deg,
            #f7fbfc,
            #ffffff
        );

    border-color:
        rgba(20, 151, 166, 0.12);

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px rgba(15, 48, 56, 0.06);

}


.solution-card:hover::before {

    opacity:
        1;

}


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

.solution-icon {

    width:
        40px;

    height:
        40px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    font-size:
        16px;

    line-height:
        1;

    transition:
        transform 0.22s ease;

}


.solution-card:hover .solution-icon {

    transform:
        scale(1.05);

}


/* =========================================================
   SOLUTION ICON INTERNAL
========================================================= */

.solution-icon i {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    line-height:
        1;

}


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

.solution-content {

    flex:
        1;

    min-width:
        0;

    overflow:
        hidden;

}


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

.solution-content h4 {

    margin:
        0 0 3px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        12px;

    line-height:
        1.25;

    font-weight:
        800;

    letter-spacing:
        -0.01em;

    color:
        var(--vedanta-text);

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    transition:
        color 0.20s ease;

}


.solution-card:hover .solution-content h4 {

    color:
        var(--vedanta-dark);

}


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

.solution-content p {

    display:
        block;

    margin:
        0;

    font-size:
        10px;

    line-height:
        1.35;

    font-weight:
        500;

    color:
        var(--vedanta-text-light);

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


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

.solution-arrow {

    flex-shrink:
        0;

    margin-left:
        auto;

    font-size:
        10px;

    line-height:
        1;

    color:
        #8fb8c6;

    transition:
        transform 0.20s ease,
        color 0.20s ease;

}


.solution-card:hover .solution-arrow {

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

    color:
        var(--vedanta-teal);

}


/* =========================================================
   SOLUTION ICON COLOR THEMES
========================================================= */

.icon-purple {

    color:
        var(--vedanta-purple);

    background:
        var(--vedanta-purple-light);

}


.icon-blue {

    color:
        var(--vedanta-blue);

    background:
        var(--vedanta-blue-light);

}


.icon-red {

    color:
        var(--vedanta-red);

    background:
        var(--vedanta-red-light);

}


.icon-orange {

    color:
        var(--vedanta-orange-dark);

    background:
        var(--vedanta-orange-light);

}


.icon-teal {

    color:
        var(--vedanta-teal);

    background:
        var(--vedanta-teal-light);

}


.icon-indigo {

    color:
        #5a4e94;

    background:
        rgba(90, 78, 148, 0.10);

}


.icon-pink {

    color:
        #b04872;

    background:
        rgba(176, 72, 114, 0.10);

}


.icon-green {

    color:
        #23816f;

    background:
        rgba(35, 129, 111, 0.10);

}


/* =========================================================
   FONT AWESOME SUPPORT
========================================================= */

.solution-icon i,
.solution-arrow,
.mega-all-link i,
.login-button i,
.mobile-login-button i {

    font-weight:
        700;

}


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

.navbar-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        12px;

}


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

.contact-link {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        0 10px;

    color:
        #52656e;

    font-size:
        13px;

    font-weight:
        750;

    text-decoration:
        none;

    white-space:
        nowrap;

    transition:
        color 0.22s ease;

}


.contact-link::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        5px;

    width:
        0;

    height:
        2px;

    border-radius:
        20px;

    background:
        var(--vedanta-teal);

    transform:
        translateX(-50%);

    transition:
        width 0.22s ease;

}


.contact-link:hover {

    color:
        var(--vedanta-dark);

}


.contact-link:hover::after {

    width:
        22px;

}


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

.login-button {

    position:
        relative;

    min-width:
        116px;

    height:
        48px;

    padding:
        0 18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    overflow:
        hidden;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius:
        13px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--vedanta-dark),
            var(--vedanta-blue),
            var(--vedanta-teal)
        );

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none;

    white-space:
        nowrap;

    box-shadow:
        0 10px 25px rgba(21, 63, 74, 0.16);

    transition:
        transform 0.30s ease,
        box-shadow 0.30s ease;

}


/* =========================================================
   LOGIN SHINE
========================================================= */

.login-button::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -100%;

    width:
        70%;

    height:
        100%;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.22),
            transparent
        );

    transform:
        skewX(-25deg);

    transition:
        left 0.60s ease;

}


.login-button:hover::before {

    left:
        140%;

}


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

.login-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 32px rgba(21, 63, 74, 0.25);

}


.login-button span,
.login-button i {

    position:
        relative;

    z-index:
        1;

}


.login-button i {

    font-size:
        13px;

    transition:
        transform 0.25s ease;

}


.login-button:hover i {

    transform:
        translateX(3px);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {

    display:
        none;

    width:
        48px;

    height:
        48px;

    margin-left:
        auto;

    padding:
        0;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;

    background:
        rgba(255, 255, 255, 0.92);

    border:
        1px solid rgba(21, 63, 74, 0.10);

    border-radius:
        14px;

    box-shadow:
        0 7px 18px rgba(15, 48, 56, 0.05);

    cursor:
        pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


.mobile-menu-button:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(20, 151, 166, 0.20);

    box-shadow:
        0 10px 22px rgba(15, 48, 56, 0.10);

}


/* =========================================================
   HAMBURGER LINES
========================================================= */

.mobile-menu-button span {

    display:
        block;

    width:
        21px;

    height:
        2px;

    border-radius:
        10px;

    background:
        var(--vedanta-dark);

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;

}


/* =========================================================
   MOBILE BUTTON ACTIVE
========================================================= */

.mobile-menu-button.active span:nth-child(1) {

    transform:
        translateY(7px) rotate(45deg);

}


.mobile-menu-button.active span:nth-child(2) {

    opacity:
        0;

}


.mobile-menu-button.active span:nth-child(3) {

    transform:
        translateY(-7px) rotate(-45deg);

}


/* =========================================================
   MOBILE NAVIGATION DEFAULT
========================================================= */

.mobile-navigation {

    display:
        none;

}


/* =========================================================
   MOBILE SOLUTIONS TRIGGER
========================================================= */

.mobile-solutions-trigger {

    appearance:
        none;

    -webkit-appearance:
        none;

}


/* =========================================================
   MOBILE SOLUTIONS ARROW
========================================================= */

.mobile-solutions-trigger i {

    transition:
        transform 0.25s ease;

}


.mobile-solutions-trigger.active i {

    transform:
        rotate(180deg);

}


/* =========================================================
   BODY LOCK
   CAPS STYLE
========================================================= */

body.mobile-nav-open {

    overflow:
        hidden;

}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1350px) {

    .navbar-container {

        width:
            calc(100% - 48px);

        gap:
            16px;

    }


    .nav-link {

        padding:
            0 10px;

        font-size:
            13px;

    }

}


/* =========================================================
   MEDIUM DESKTOP MEGA MENU
========================================================= */

@media (max-width: 1200px) {

    .solutions-mega-menu {

        width:
            min(
                calc(100vw - 60px),
                950px
            );

        grid-template-columns:
            250px minmax(0, 1fr);

        gap:
            16px;

        padding:
            18px;

    }


    .mega-menu-header {

        padding-right:
            16px;

    }


    .mega-menu-header h3 {

        max-width:
            220px;

        font-size:
            22px;

    }


    .mega-menu-header p {

        max-width:
            220px;

        font-size:
            11px;

    }


    .mega-all-link {

        margin-top:
            15px;

    }


    .mega-menu-grid {

        gap:
            7px;

    }


    .solution-card {

        min-height:
            64px;

        padding:
            8px 10px;

    }


    .solution-icon {

        width:
            38px;

        height:
            38px;

        border-radius:
            11px;

        font-size:
            14px;

    }


    .solution-content h4 {

        font-size:
            11px;

    }


    .solution-content p {

        font-size:
            9px;

    }

}


/* =========================================================
   SMALL LAPTOP
========================================================= */

@media (max-width: 1050px) {

    .solutions-mega-menu {

        width:
            calc(100vw - 40px);

        grid-template-columns:
            230px minmax(0, 1fr);

        gap:
            14px;

    }


    .mega-menu-header {

        padding-right:
            14px;

    }


    .mega-menu-header h3 {

        font-size:
            20px;

    }


    .mega-menu-header p {

        font-size:
            10px;

    }


    .mega-menu-grid {

        gap:
            6px;

    }


    .solution-card {

        min-height:
            60px;

    }


    .solution-arrow {

        display:
            none;

    }

}


/* =========================================================
   MEDIUM LAPTOP NAVBAR
========================================================= */

@media (max-width: 1180px) {

    .navbar-container {

        grid-template-columns:
            auto 1fr auto;

        gap:
            12px;

    }


    .brand-logo {

        width:
            auto;

        height:
            56px;

    }


    .brand-name {

        font-size:
            20px;

    }


    .nav-link {

        padding:
            0 8px;

        font-size:
            12px;

    }


    .navbar-actions {

        gap:
            8px;

    }


    .contact-link {

        display:
            none;

    }


    .login-button {

        min-width:
            105px;

        height:
            46px;

        padding:
            0 16px;

    }

}


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

@media (max-width: 980px) {

    .navbar-container {

        width:
            calc(100% - 40px);

        min-height:
            78px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            15px;

    }


    .navbar-menu,
    .navbar-actions {

        display:
            none;

    }


    .mobile-menu-button {

        display:
            flex;

    }


    .brand-logo {

        width:
            auto;

        height:
            54px;

        border-radius:
            16px;

    }


    .brand-name {

        font-size:
            20px;

    }


    .brand-tagline {

        font-size:
            8px;

    }


    /* =============================================
       HIDE DESKTOP MEGA MENU
    ============================================== */

    .solutions-mega-menu {

        display:
            none !important;

    }


    /* =============================================
       MOBILE NAVIGATION PANEL
    ============================================== */

    .mobile-navigation {

        position:
            fixed;

        top:
            88px;

        left:
            16px;

        right:
            16px;

        display:
            block;

        max-height:
            0;

        overflow:
            hidden;

        padding:
            0;

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        z-index:
            9997;

        background:
            rgba(255, 255, 255, 0.98);

        backdrop-filter:
            blur(22px);

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

        border:
            1px solid rgba(21, 63, 74, 0.09);

        border-radius:
            22px;

        box-shadow:
            0 24px 60px rgba(15, 48, 56, 0.16);

        transition:
            max-height 0.35s ease,
            opacity 0.25s ease,
            padding 0.25s ease,
            visibility 0.25s ease;

    }


    /* =============================================
       MOBILE NAV OPEN
    ============================================== */

    .mobile-navigation.open {

        max-height:
            calc(100vh - 110px);

        overflow-y:
            auto;

        padding:
            12px;

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

    }


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

    .mobile-navigation::-webkit-scrollbar {

        width:
            4px;

    }


    .mobile-navigation::-webkit-scrollbar-thumb {

        background:
            rgba(21, 63, 74, 0.15);

        border-radius:
            10px;

    }


    /* =============================================
       MOBILE NAV LINKS
    ============================================== */

    .mobile-nav-link,
    .mobile-solutions-trigger {

        width:
            100%;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        min-height:
            52px;

        padding:
            0 14px;

        font-size:
            15px;

        font-weight:
            700;

        color:
            #314952;

        text-decoration:
            none;

        border-radius:
            12px;

        background:
            transparent;

        border:
            none;

        outline:
            none;

        cursor:
            pointer;

        transition:
            background 0.25s ease,
            color 0.25s ease;

    }


    .mobile-nav-link:hover,
    .mobile-solutions-trigger:hover {

        color:
            var(--vedanta-dark);

        background:
            rgba(20, 151, 166, 0.06);

    }


    /* =============================================
       MOBILE SOLUTIONS ARROW
    ============================================== */

    .mobile-solutions-trigger i {

        transition:
            transform 0.25s ease;

    }


    .mobile-solutions-trigger.active i {

        transform:
            rotate(180deg);

    }


    /* =============================================
       MOBILE SOLUTIONS MENU
    ============================================== */

    .mobile-solutions-menu {

        display:
            none;

        padding:
            5px 8px 10px;

    }


    .mobile-solutions-menu.open {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            5px;

    }


    /* =============================================
       MOBILE SOLUTION LINKS
    ============================================== */

    .mobile-solutions-menu a {

        display:
            flex;

        align-items:
            center;

        gap:
            12px;

        min-height:
            46px;

        padding:
            0 12px;

        font-size:
            13px;

        font-weight:
            650;

        color:
            #61747b;

        text-decoration:
            none;

        border-radius:
            11px;

        background:
            #f8fbfc;

        transition:
            background 0.25s ease,
            transform 0.25s ease,
            color 0.25s ease;

    }


    .mobile-solutions-menu a:hover {

        color:
            var(--vedanta-dark);

        background:
            #f1f7f8;

        transform:
            translateX(3px);

    }


    .mobile-solutions-menu i {

        width:
            20px;

        flex-shrink:
            0;

        text-align:
            center;

        color:
            var(--vedanta-teal);

    }


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

    .mobile-login-button {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            10px;

        width:
            100%;

        height:
            52px;

        margin-top:
            10px;

        border-radius:
            14px;

        font-size:
            15px;

        font-weight:
            800;

        color:
            #ffffff;

        text-decoration:
            none;

        background:
            linear-gradient(
                135deg,
                var(--vedanta-dark),
                var(--vedanta-blue),
                var(--vedanta-teal)
            );

        box-shadow:
            0 10px 25px rgba(21, 63, 74, 0.16);

    }


    .mobile-login-button i {

        transition:
            transform 0.25s ease;

    }


    .mobile-login-button:hover i {

        transform:
            translateX(3px);

    }

}


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

@media (max-width: 600px) {

    .navbar-container {

        width:
            calc(100% - 28px);

        min-height:
            74px;

    }


    .brand-logo {

        width:
            auto;

        height:
            50px;

        border-radius:
            15px;

    }


    .brand-name {

        font-size:
            19px;

    }


    .brand-tagline {

        font-size:
            7px;

        letter-spacing:
            0.15em;

    }


    .mobile-menu-button {

        width:
            46px;

        height:
            46px;

    }


    .mobile-navigation {

        top:
            82px;

        left:
            12px;

        right:
            12px;

    }


    .mobile-navigation.open {

        max-height:
            calc(100vh - 100px);

    }


    .mobile-nav-link,
    .mobile-solutions-trigger {

        min-height:
            50px;

        font-size:
            14px;

    }


    .mobile-solutions-menu a {

        min-height:
            44px;

        font-size:
            12px;

    }


    .mobile-login-button {

        height:
            50px;

        font-size:
            14px;

    }

}


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

@media (max-width: 400px) {

    .navbar-container {

        width:
            calc(100% - 22px);

    }


    .brand-logo {

        width:
            auto;

        height:
            48px;

    }


    .brand-name {

        font-size:
            17px;

    }


    .brand-tagline {

        font-size:
            6px;

    }


    .mobile-menu-button {

        width:
            44px;

        height:
            44px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 350px) {

    .brand-content {

        display:
            none;

    }


    .brand-logo {

        width:
            auto;

        height:
            50px;

    }

}


/* =========================================================
   ACCESSIBILITY - KEYBOARD FOCUS
========================================================= */

.nav-link:focus-visible,
.contact-link:focus-visible,
.login-button:focus-visible,
.mega-all-link:focus-visible,
.solution-card:focus-visible,
.mobile-menu-button:focus-visible,
.mobile-nav-link:focus-visible,
.mobile-solutions-trigger:focus-visible,
.mobile-solutions-menu a:focus-visible,
.mobile-login-button:focus-visible {

    outline:
        3px solid rgba(20, 151, 166, 0.30);

    outline-offset:
        3px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .vedanta-navbar,
    .brand-logo,
    .nav-link,
    .nav-link::after,
    .dropdown-arrow,
    .contact-link,
    .contact-link::after,
    .login-button,
    .login-button::before,
    .login-button i,
    .solutions-mega-menu,
    .mega-all-link,
    .mega-all-link i,
    .solution-card,
    .solution-card::before,
    .solution-icon,
    .solution-content h4,
    .solution-arrow,
    .mobile-menu-button,
    .mobile-menu-button span,
    .mobile-navigation,
    .mobile-solutions-trigger i,
    .mobile-solutions-menu a,
    .mobile-login-button i {

        transition:
            none !important;

    }

}

/* =========================================================
   SOLUTIONS NAV CONTROL
========================================================= */

.solutions-nav-control {

    display:
        inline-flex;

    align-items:
        center;

    position:
        relative;

}


/* =========================================================
   SOLUTIONS PAGE LINK
========================================================= */

.solutions-page-link {

    padding-right:
        4px;

}


/* Remove underline spacing conflict */

.solutions-page-link::after {

    right:
        4px;

}


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

.solutions-dropdown-button {

    width:
        24px;

    min-height:
        46px;

    padding:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #82929a;

    cursor:
        pointer;

    transition:
        color 0.22s ease,
        background 0.22s ease;

}


.solutions-dropdown-button:hover {

    color:
        var(--vedanta-teal);

    background:
        rgba(20, 151, 166, 0.05);

}


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

.solutions-dropdown-button .dropdown-arrow {

    font-size:
        9px;

    transition:
        transform 0.25s ease,
        color 0.25s ease;

}


.nav-dropdown.open
.solutions-dropdown-button
.dropdown-arrow {

    transform:
        rotate(180deg);

    color:
        var(--vedanta-teal);

}


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

@media (max-width: 980px) {

    .solutions-nav-control {

        width:
            100%;

    }


    .solutions-page-link {

        flex:
            1;

        justify-content:
            flex-start;

        padding-left:
            14px;

    }


    .solutions-dropdown-button {

        width:
            48px;

        min-height:
            52px;

    }

}
.contact-link.active {
    color: var(--vedanta-dark);
}

.contact-link.active::after {
    width: 22px;
}