/* ==============================================================
   VRAJA TECHNOLOGIES
   MASTER HEADER + MEGA MENU
   FINAL CLEAN VERSION
================================================================ */


/* ==============================================================
   ELEMENTOR CONTAINER FIX
================================================================ */

.elementor-widget-shortcode:has(#vraja-navigation-only),
.elementor-widget-shortcode:has(#vraja-navigation-only)
> .elementor-widget-container {

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    overflow: visible !important;
}


/*
   Header container that directly contains
   the shortcode becomes sticky.
*/

.e-con:has(> .elementor-widget-shortcode #vraja-navigation-only) {

    position: sticky !important;

    top: 0;

    z-index: 99990 !important;

    overflow: visible !important;
}



/* ==============================================================
   ROOT
================================================================ */

#vraja-navigation-only {

    --brand: #1769E0;
    --brand-dark: #0D52B9;

    --brand-soft: #EEF5FF;
    --brand-icon: #EAF3FF;

    --text: #303A4B;
    --muted: #667085;

    --border: #DCE4ED;
    --border-hover: #BFD4F2;

    --white: #FFFFFF;

    --header-bg:
        rgba(248, 251, 255, .92);

    --mega-bg:
        #F8FAFD;

    --side-bg:
        #F4F7FB;

    --shadow:
        0 3px 6px rgba(16,24,40,.03),
        0 14px 28px rgba(16,24,40,.08),
        0 28px 55px rgba(16,24,40,.09);

    width: 100%;

    height: 80px;

    position: relative;

    z-index: 9999;

    overflow: visible;

    background: var(--header-bg);

    border-bottom:
        1px solid
        rgba(220,228,237,.70);

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

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

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    transition:
        background-color .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}



/* ==============================================================
   SCROLLED HEADER
================================================================ */

#vraja-navigation-only.is-scrolled {

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

    border-bottom-color:
        rgba(209,219,231,.90);

    box-shadow:
        0 3px 15px
        rgba(16,24,40,.07);
}



#vraja-navigation-only,
#vraja-navigation-only * {

    box-sizing: border-box;
}


#vraja-navigation-only a {

    color: inherit;

    text-decoration: none;
}


#vraja-navigation-only button {

    font-family: inherit;
}



/* ==============================================================
   HEADER ROW
================================================================ */

#vraja-navigation-only .vraja-header-inner {

    width:
        min(
            1300px,
            calc(100% - 40px)
        );

    height: 80px;

    min-height: 80px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    position:
        relative;

    overflow:
        visible;
}



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

#vraja-navigation-only .vraja-logo {

    width:
        165px;

    flex:
        0 0 165px;

    display:
        flex !important;

    align-items:
        center;

    margin:
        0;

    padding:
        0;
}


#vraja-navigation-only .vraja-logo img {

    display:
        block !important;

    width:
        150px !important;

    max-width:
        150px !important;

    height:
        auto !important;

    max-height:
        62px;

    object-fit:
        contain;
}



/* ==============================================================
   MAIN NAV
================================================================ */

#vraja-navigation-only .main-nav {

    flex:
        1 1 auto;

    min-width:
        0;

    height:
        80px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        3px;

    position:
        relative;

    overflow:
        visible;
}


#vraja-navigation-only .nav-item {

    position:
        static;

    flex:
        0 0 auto;
}



/*
   Company / Knowledge dropdowns
   positioned relative to their button.
*/

#vraja-navigation-only
.nav-item.simple-item {

    position:
        relative;
}



/* ==============================================================
   MAIN NAV BUTTON
================================================================ */

#vraja-navigation-only .nav-button {

    position:
        relative;

    height:
        48px;

    min-height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin:
        0;

    padding:
        0 14px;

    border:
        0 !important;

    border-radius:
        10px;

    background:
        transparent;

    appearance:
        none;

    -webkit-appearance:
        none;

    box-shadow:
        none !important;

    color:
        #273248;

    cursor:
        pointer;

    white-space:
        nowrap;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        -.01em;

    transition:
        color .18s ease,
        background-color .18s ease;
}


#vraja-navigation-only
.nav-button:hover,

#vraja-navigation-only
.nav-item.open
> .nav-button {

    color:
        var(--brand);

    background:
        var(--brand-soft);
}



/* Active underline */

#vraja-navigation-only
.nav-button::before {

    content:
        "";

    position:
        absolute;

    left:
        12px;

    right:
        12px;

    bottom:
        -16px;

    height:
        2px;

    background:
        var(--brand);

    border-radius:
        10px;

    transform:
        scaleX(0);

    transition:
        transform .18s ease;
}


#vraja-navigation-only
.nav-item.open
> .nav-button::before {

    transform:
        scaleX(1);
}



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

#vraja-navigation-only .nav-arrow {

    display:
        block;

    width:
        14px !important;

    height:
        14px !important;

    flex:
        0 0 14px;

    transition:
        transform .18s ease;
}


#vraja-navigation-only
.nav-item.open
> .nav-button
.nav-arrow {

    transform:
        rotate(180deg);
}



/* ==============================================================
   MEGA DROPDOWN
================================================================ */

#vraja-navigation-only .mega-wrap {

    position:
        absolute;

    top:
        80px;

    left:
        50%;

    z-index:
        99999;

    width:
        min(
            1275px,
            calc(100vw - 48px)
        );

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

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

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;
}


#vraja-navigation-only
.nav-item.open
> .mega-wrap {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

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



/* Hover bridge */

#vraja-navigation-only
.mega-wrap::before {

    content:
        "";

    position:
        absolute;

    top:
        -18px;

    left:
        0;

    right:
        0;

    height:
        20px;
}



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

#vraja-navigation-only .mega-card {

    width:
        100%;

    height:
        auto !important;

    min-height:
        0 !important;

    display:
        grid;

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

    overflow:
        hidden;

    background:
        var(--mega-bg);

    border:
        1px solid
        #D7E0EA;

    border-radius:
        17px;

    box-shadow:
        var(--shadow);
}



/* ==============================================================
   LEFT CATEGORY AREA
================================================================ */

#vraja-navigation-only .mega-tabs {

    min-height:
        0 !important;

    height:
        auto !important;

    padding:
        18px 14px;

    background:
        var(--side-bg);

    border-right:
        1px solid
        #DCE4ED;
}



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

#vraja-navigation-only .tab-btn {

    width:
        100%;

    min-height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        11px;

    margin:
        0 0 5px;

    padding:
        9px 11px;

    border:
        1px solid
        transparent !important;

    border-radius:
        12px;

    background:
        transparent;

    appearance:
        none;

    -webkit-appearance:
        none;

    box-shadow:
        none !important;

    color:
        #465268;

    cursor:
        pointer;

    text-align:
        left;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.3;

    transition:
        color .18s ease,
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease;
}


#vraja-navigation-only
.tab-btn:hover:not(.active) {

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

    border-color:
        #E0E7F0 !important;

    color:
        var(--brand);
}


#vraja-navigation-only
.tab-btn.active {

    background:
        #FFFFFF;

    color:
        var(--brand);

    border:
        1px solid
        #D2DDE9 !important;

    box-shadow:
        0 4px 14px
        rgba(31,55,92,.07) !important;
}



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

#vraja-navigation-only .tab-icon {

    width:
        40px;

    height:
        40px;

    min-width:
        40px;

    flex:
        0 0 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #D8E6F8;

    border-radius:
        10px;

    background:
        var(--brand-icon);

    color:
        var(--brand);
}


#vraja-navigation-only
.tab-icon svg {

    width:
        20px !important;

    height:
        20px !important;

    display:
        block;
}



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

#vraja-navigation-only .mega-content {

    min-width:
        0;

    padding:
        22px;

    background:
        var(--mega-bg);

    overflow:
        hidden;
}



/* ==============================================================
   TAB PANELS
================================================================ */

#vraja-navigation-only .tab-panel {

    display:
        none;
}


#vraja-navigation-only
.tab-panel.active {

    display:
        block;
}



/* ==============================================================
   SERVICES + SOLUTIONS GRID

   Both are now THREE columns.
================================================================ */

#vraja-navigation-only .menu-grid,
#vraja-navigation-only .menu-grid.three {

    display:
        grid;

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

    gap:
        12px 14px;
}



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

#vraja-navigation-only
.mega-content
.menu-link {

    position:
        relative;

    width:
        100%;

    min-width:
        0;

    min-height:
        66px;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        12px;

    padding:
        10px 38px
        10px 12px;

    background:
        #FFFFFF;

    border:
        1px solid
        var(--border) !important;

    border-radius:
        12px;

    color:
        #303A4B !important;

    box-shadow:
        0 2px 4px
        rgba(16,24,40,.025);

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.35;

    overflow:
        hidden;

    transition:
        color .18s ease,
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}



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

#vraja-navigation-only
.mega-content
.menu-link:hover,

#vraja-navigation-only
.mega-content
.menu-link:focus-visible {

    background:
        #FFFFFF;

    color:
        var(--brand) !important;

    border-color:
        var(--border-hover) !important;

    box-shadow:
        0 6px 16px
        rgba(23,105,224,.07);

    transform:
        translateY(-1px);
}



/* ==============================================================
   HOVER RIGHT ARROW
================================================================ */

#vraja-navigation-only
.mega-content
.menu-link::after {

    content:
        "›";

    position:
        absolute;

    top:
        50%;

    right:
        13px;

    width:
        18px;

    height:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0;

    padding:
        0;

    color:
        #8E9AAC;

    font-size:
        18px;

    font-weight:
        400;

    line-height:
        18px;

    opacity:
        0;

    pointer-events:
        none;

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

    transition:
        opacity .16s ease,
        transform .16s ease;
}


#vraja-navigation-only
.mega-content
.menu-link:hover::after,

#vraja-navigation-only
.mega-content
.menu-link:focus-visible::after {

    opacity:
        1;

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



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

#vraja-navigation-only .menu-icon {

    width:
        42px;

    height:
        42px;

    min-width:
        42px;

    flex:
        0 0 42px;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:
        1px solid
        #D8E6F8;

    border-radius:
        10px;

    background:
        var(--brand-icon);

    color:
        var(--brand);

    box-shadow:
        none;
}


#vraja-navigation-only
.menu-icon svg {

    width:
        20px !important;

    height:
        20px !important;

    display:
        block;
}



/* ==============================================================
   COMPANY + KNOWLEDGE HUB
   SMALL COMPACT DROPDOWN
================================================================ */

#vraja-navigation-only
.simple-wrap {

    top:
        64px;

    left:
        50%;

    width:
        335px;

    max-width:
        calc(100vw - 30px);

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


#vraja-navigation-only
.nav-item.open
> .simple-wrap {

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



/* ==============================================================
   SMALL SIMPLE CARD
================================================================ */

#vraja-navigation-only
.simple-card {

    padding:
        9px;

    background:
        #F8FAFD;

    border:
        1px solid
        #DCE4ED;

    border-radius:
        14px;

    box-shadow:
        0 10px 26px
        rgba(16,24,40,.10);
}


#vraja-navigation-only
.simple-grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        6px;
}



/* ==============================================================
   SIMPLE MENU ITEM
================================================================ */

#vraja-navigation-only
.simple-card
.menu-link {

    position:
        relative;

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        7px 35px
        7px 9px;

    background:
        #FFFFFF;

    border:
        1px solid
        #DFE6EF !important;

    border-radius:
        10px;

    color:
        #303A4B;

    font-size:
        13.5px;

    font-weight:
        600;

    transition:
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


#vraja-navigation-only
.simple-card
.menu-link:hover {

    color:
        var(--brand);

    border-color:
        var(--border-hover) !important;

    box-shadow:
        0 4px 12px
        rgba(23,105,224,.06);
}



/* Small simple-menu icon */

#vraja-navigation-only
.simple-card
.menu-icon {

    width:
        34px;

    height:
        34px;

    min-width:
        34px;

    flex-basis:
        34px;

    border-radius:
        9px;
}


#vraja-navigation-only
.simple-card
.menu-icon svg {

    width:
        17px !important;

    height:
        17px !important;
}



/* Simple hover arrow */

#vraja-navigation-only
.simple-card
.menu-link::after {

    content:
        "›";

    position:
        absolute;

    right:
        11px;

    top:
        50%;

    color:
        #93A0B2;

    font-size:
        17px;

    opacity:
        0;

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

    transition:
        opacity .16s ease,
        transform .16s ease;
}


#vraja-navigation-only
.simple-card
.menu-link:hover::after {

    opacity:
        1;

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



/* ==============================================================
   HEADER ACTIONS
================================================================ */

#vraja-navigation-only
.header-actions {

    flex:
        0 0 auto;

    margin-left:
        auto;

    display:
        flex !important;

    align-items:
        center;

    gap:
        10px;
}



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

#vraja-navigation-only
.shop-btn {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #CEDDF1;

    border-radius:
        11px;

    background:
        rgba(240,246,255,.82);

    color:
        var(--brand);

    box-shadow:
        0 3px 10px
        rgba(23,105,224,.04);

    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


#vraja-navigation-only
.shop-btn:hover {

    background:
        #E7F1FF;

    border-color:
        #BDD2EF;

    box-shadow:
        0 5px 12px
        rgba(23,105,224,.08);
}


#vraja-navigation-only
.shop-btn svg {

    width:
        21px !important;

    height:
        21px !important;
}



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

#vraja-navigation-only
.contact-btn {

    min-height:
        48px;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        0 19px;

    border:
        1px solid
        var(--brand);

    border-radius:
        11px;

    background:
        var(--brand);

    color:
        #FFFFFF !important;

    font-size:
        14px;

    font-weight:
        700;

    white-space:
        nowrap;

    box-shadow:
        0 8px 20px
        rgba(23,105,224,.16);

    transition:
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


#vraja-navigation-only
.contact-btn:hover {

    background:
        var(--brand-dark);

    box-shadow:
        0 10px 24px
        rgba(23,105,224,.22);

    transform:
        translateY(-1px);
}


#vraja-navigation-only
.contact-btn svg {

    width:
        16px !important;

    height:
        16px !important;
}



/* ==============================================================
   SVG
================================================================ */

#vraja-navigation-only svg {

    display:
        block;

    overflow:
        visible;
}



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

@media (max-width: 1200px) {

    #vraja-navigation-only
    .vraja-header-inner {

        width:
            calc(100% - 30px);

        gap:
            12px;
    }


    #vraja-navigation-only
    .vraja-logo {

        width:
            135px;

        flex-basis:
            135px;
    }


    #vraja-navigation-only
    .vraja-logo img {

        width:
            125px !important;

        max-width:
            125px !important;
    }


    #vraja-navigation-only
    .nav-button {

        padding:
            0 9px;

        font-size:
            13px;
    }


    #vraja-navigation-only
    .mega-wrap {

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


    #vraja-navigation-only
    .mega-card {

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


    /*
       Still 3 columns when enough space exists.
    */

    #vraja-navigation-only
    .menu-grid,
    #vraja-navigation-only
    .menu-grid.three {

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


    #vraja-navigation-only
    .mega-content {

        padding:
            18px;
    }


    #vraja-navigation-only
    .contact-btn {

        padding:
            0 13px;
    }

}



/* ==============================================================
   SMALL DESKTOP
================================================================ */

@media (max-width: 1050px) {

    #vraja-navigation-only
    .menu-grid,
    #vraja-navigation-only
    .menu-grid.three {

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

}



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

@media (max-width: 960px) {

    #vraja-navigation-only {

        height:
            68px;
    }


    #vraja-navigation-only
    .vraja-header-inner {

        height:
            68px;

        min-height:
            68px;

        width:
            calc(100% - 24px);
    }


    #vraja-navigation-only
    .main-nav {

        display:
            none;
    }


    #vraja-navigation-only
    .vraja-logo {

        width:
            auto;

        flex-basis:
            auto;
    }


    #vraja-navigation-only
    .vraja-logo img {

        width:
            115px !important;

        max-width:
            115px !important;
    }


    #vraja-navigation-only
    .header-actions {

        margin-left:
            auto;
    }

}



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

@media (max-width: 520px) {

    #vraja-navigation-only
    .shop-btn {

        width:
            42px;

        height:
            42px;

        flex-basis:
            42px;
    }


    #vraja-navigation-only
    .contact-btn {

        min-height:#vraja-navigation-only .vraja-header-inner
            42px;

        padding:
            0 12px;

        font-size:
            12px;
    }

}



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

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

    #vraja-navigation-only * {

        transition:
            none !important;

        animation:
            none !important;
    }

}