/*==========================================================
CUBEXSOFT 2.0 NAVBAR
==========================================================*/

/*==========================================================
DESIGN TOKENS
==========================================================*/

:root{

    --nav-height:82px;
    --topbar-height:24px;

    --radius-sm:6px;
    --radius-md:8px;
    --radius-lg:10px;

    --primary:#2563EB;
    --primary-dark:#1D4ED8;

    --text:#0F172A;
    --text-light:#475569;

    --border:#E5E7EB;

    --bg:#FFFFFF;
    --bg-soft:#F8FAFC;

    --shadow:
        0 10px 35px rgba(15,23,42,.08);

}

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

.mega-footer{

    display:flex;

    justify-content:center;

    margin-top:24px;

    padding-top:18px;

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

}
.view-all-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 22px;

    font-size:14px;

    font-weight:600;

    color:var(--primary);

    text-decoration:none;

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

    border-radius:6px;

    transition:all .2s ease;

}
.view-all-btn:hover{

    background:var(--primary);

    color:#fff;

}
.view-all-btn span{

    transition:transform .2s ease;

}

.view-all-btn:hover span{

    transform:translateX(4px);

}
/*==========================================================
PANELS
==========================================================*/

.mega-panel{

    display:none;

    animation:panelFade .18s ease;

}

.mega-panel.active{

    display:block;

}

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

@keyframes panelFade{

    from{

        opacity:0;

        transform:translateY(6px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*==========================================================
CATEGORY ACTIVE
==========================================================*/

.mega-category{

    cursor:pointer;

}

.mega-category.active{

    background:#EFF6FF;

    color:var(--primary);

    border-right:3px solid var(--primary);

}

.mega-category.active svg{

    color:var(--primary);

}
/*==========================================================
HEADER
==========================================================*/

.site-header{

    position:relative;

    z-index:9999;

    width:100%;

}

/*==========================================================
ANNOUNCEMENT BAR
==========================================================*/

.announcement-bar{

    height:var(--topbar-height);

    background:
        linear-gradient(
            90deg,
            #0B1735,
            #102246);

    color:#D8E5F5;

    font-size:13px;

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

}

.announcement-content{

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

}

.announcement-item{

    display:flex;

    align-items:center;

    gap:8px;

    white-space:nowrap;

}

.announcement-item strong{

    color:#FFFFFF;

    font-weight:700;

}

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

.navbar{

    position:relative;

    height:var(--nav-height);

    background:#FFFFFF;

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

    transition:.25s ease;

}

.navbar.scrolled{

    box-shadow:var(--shadow);

}

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

.navbar .container{

    height:100%;

}

.navbar-inner{

    height:100%;

    display:grid;

    grid-template-columns:

        220px

        1fr

        auto;

    align-items:center;

    gap:40px;

}

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

.nav-logo{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.nav-logo img{

    width:210px;

    height:auto;

    display:block;

}

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

.nav-menu{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:34px;

    list-style:none;

    margin:0;

    padding:0;

}

.nav-menu>li{

    position:relative;

}

.nav-menu>li>a{

    display:flex;

    align-items:center;

    gap:8px;

    height:var(--nav-height);

    color:var(--text);

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.2s ease;

}

.nav-menu>li>a svg{

    width:16px;

    height:16px;

    transition:.2s;

}

.nav-menu>li>a:hover{

    color:var(--primary);

}

.nav-menu>li>a:hover svg{

    color:var(--primary);

}

/*==========================================================
OFFERS
==========================================================*/

.offers-link{

    color:#EA580C !important;

    font-weight:700 !important;

}

.offers-link svg{

    color:#EA580C;

}

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

.nav-right{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:12px;

}

/*==========================================================
SEARCH
==========================================================*/

.nav-search{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFFFFF;

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

    border-radius:var(--radius-md);

    cursor:pointer;

    transition:.2s ease;

}

.nav-search svg{

    width:18px;

    height:18px;

    color:#64748B;

}

.nav-search:hover{

    border-color:var(--primary);

    background:#F8FAFC;

}

.nav-search:hover svg{

    color:var(--primary);

}

/*==========================================================
LANGUAGE
==========================================================*/

.nav-language{

    display:flex;

    align-items:center;

    gap:8px;

    height:42px;

    padding:0 16px;

    background:#fff;

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

    border-radius:8px;

    cursor:pointer;

    font-weight:600;

    transition:.25s ease;

}

.nav-language:hover{

    border-color:var(--primary);

    color:var(--primary);

}
.language-dropdown{

    position:relative;

}
.language-menu{

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    width:180px;

    background:#fff;

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

    border-radius:10px;

    box-shadow:0 18px 40px rgba(15,23,42,.08);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.25s ease;

    z-index:1000;

}
.language-dropdown:hover .language-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}
.language-menu a{

    display:block;

    padding:12px 18px;

    color:var(--dark);

    text-decoration:none;

    font-size:14px;

    transition:.2s ease;

}

.language-menu a:hover{

    background:#F8FAFC;

    color:var(--primary);

}
.nav-language svg{

    width:16px;

    height:16px;

}

.nav-language:hover{

    border-color:var(--primary);

    color:var(--primary);

    background:#F8FAFC;

}

/*==========================================================
LIVE CHAT BUTTON
==========================================================*/

.live-chat-btn{

    height:44px;

    padding:0 18px;

    display:flex;

    align-items:center;

    gap:10px;

    background:var(--primary);

    color:#FFFFFF;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    border-radius:var(--radius-md);

    transition:.2s ease;

}

.live-chat-btn svg{

    width:18px;

    height:18px;

}

.live-chat-btn:hover{

    background:var(--primary-dark);

}

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

.mobile-toggle{

    display:none;

    width:44px;

    height:44px;

    align-items:center;

    justify-content:center;

    background:#FFFFFF;

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

    border-radius:var(--radius-md);

    cursor:pointer;

}

.mobile-toggle svg{

    width:22px;

    height:22px;

}

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

.nav-menu>li.active>a{

    color:var(--primary);

}

.nav-menu>li.active>a::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:2px;

    background:var(--primary);

}

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

.navbar.scrolled{

    border-bottom-color:#DCE3EC;

    box-shadow:

        0 8px 24px rgba(15,23,42,.08);

}
/*==========================================================
MEGA MENU
==========================================================*/

.mega-menu{

     position:absolute;

    top:100%;

    left:50%;

    transform:translateX(-50%);

    width:min(1320px,95vw);

    background:#FFFFFF;

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

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

    box-shadow:
        0 14px 40px rgba(15,23,42,.08);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

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

    z-index:9999;
    margin-top:0;

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

border-radius:0 0 8px 8px;
}
.mega-menu.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}
/*==========================================================
OPEN
==========================================================*/

/*.navbar:hover .mega-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

/*==========================================================
MEGA CONTAINER
==========================================================*/

.mega-container{

    max-width:1360px;

    margin:auto;

    padding:0;

}

/*==========================================================
MAIN LAYOUT
==========================================================*/

.mega-inner{

    display:grid;

    grid-template-columns:220px 1fr;

    min-height:520px;

}

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

.mega-sidebar{

    background:#FAFBFC;

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

    padding:14px 0;

}

/*==========================================================
CATEGORY
==========================================================*/

.mega-category{

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

    gap:12px;

    text-align:left;

    width:100%;

    padding:14px 18px;

    height:48px;


    color:var(--text-light);

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.2s ease;

}
.mega-category{

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

    gap:12px;

    text-align:left;

    width:100%;

    padding:14px 18px;

}

.mega-category>div{

    display:flex;

    align-items:center;

    gap:12px;

}

.mega-category svg{

    width:18px;

    height:18px;

    color:#64748B;

}

.mega-category small{

    color:#94A3B8;

    font-size:12px;

}

.mega-category:hover{

    background:#F8FAFC;

    color:var(--primary);

}

.mega-category:hover svg{

    color:var(--primary);

}

.mega-category.active{

    background:#EFF6FF;

    color:var(--primary);

    border-right:3px solid var(--primary);

}

.mega-category.active svg{

    color:var(--primary);

}

.mega-category.active small{

    color:var(--primary);

}

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

.mega-content{

    padding:28px 30px;

}

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

.mega-heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding-bottom:20px;

    margin-bottom:24px;

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

}
.mega-heading > div{

    flex:1;

}

.mega-heading h3{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:var(--text);

}
.mega-heading p{

    white-space:nowrap;

}

.mega-heading p{

    margin:0px 0 0;

    max-width:520px;

    color:#64748B;

    font-size:14px;

    line-height:1.7;

}

.view-all-link{

    display:flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:var(--primary);

    font-weight:600;

    font-size:14px;

}

.view-all-link:hover{

    text-decoration:underline;

}
/*==========================================================
PRODUCT GRID
==========================================================*/

.mega-products-grid{

    display:grid;

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

    gap:14px;

}

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

.mega-product{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:16px;

    background:#FFFFFF;

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

    border-radius:6px;

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

    min-height:104px;

}

.mega-product:hover{

    border-color:var(--primary);

    background:#FBFDFF;

}

.mega-product img{

    width:40px;

    height:40px;

    flex-shrink:0;

    object-fit:contain;

}

.mega-product>div{

    flex:1;

}

.mega-product h5{

    margin:0 0 6px;

    font-size:15px;

    line-height:1.4;

}

.mega-product h5 a{

    color:var(--text);

    text-decoration:none;

    transition:.2s;

}

.mega-product:hover h5 a{

    color:var(--primary);

}

.mega-product p{

    margin:0;

    color:#64748B;

    font-size:13px;

    line-height:1.6;

}

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

.mega-bottom{

    margin-top:22px;

    padding-top:18px;

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

    display:flex;

    justify-content:flex-end;

}

.mega-bottom a{

    display:flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    color:var(--primary);

}

.mega-bottom a:hover{

    text-decoration:underline;

}

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

@media (max-width:1200px){

    .mega-inner{

        grid-template-columns:220px 1fr;

    }

    .mega-products-grid{

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

    }

}

@media (max-width:992px){

    .announcement-bar{

        display:none;

    }

    .nav-menu{

        display:none;

    }

    .nav-right{

        display:none;

    }

    .mobile-toggle{

        display:flex;

    }

    .navbar-inner{

        grid-template-columns:1fr auto;

    }

    .mega-menu{

        display:none;

    }

}

@media (max-width:768px){

    .nav-logo img{

        width:170px;

    }

}