/* ==========================================================
   SVFutureTechAI Theme
   File : header.css
   Part : 1
   Sections
   --------------------------------------------
   1. Header Variables
   2. Announcement Bar
   3. Main Header
   4. Logo
   5. Navigation
   6. Menu Items
   7. Active Menu
   8. Hover Effects
========================================================== */


/* ==========================================================
   1. HEADER VARIABLES
========================================================== */

:root{

    --header-height:72px;
    --header-top-height:42px;

    --header-bg:#ffffff;
    --header-text:#111827;

    --header-border:#e5e7eb;

    --header-shadow:
        0 8px 24px rgba(0,0,0,.06);

    --menu-gap:30px;

    --menu-font-size:15px;

    --menu-font-weight:600;

    --menu-radius:8px;

    --header-transition:.30s ease;

}



/* ==========================================================
   2. ANNOUNCEMENT BAR
========================================================== */

.sv-top-bar{

    width:100%;

    height:var(--header-top-height);

    background:linear-gradient(
        90deg,
        var(--sv-primary),
        var(--sv-secondary)
    );

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:500;

    position:relative;

    z-index:500;

}

.sv-top-bar a{

    color:#ffffff;

    font-weight:600;

    transition:.25s;

}

.sv-top-bar a:hover{

    opacity:.85;

}

.sv-top-bar__inner{

    width:100%;

    max-width:var(--container);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

}

.sv-top-bar__left{

    display:flex;

    align-items:center;

    gap:12px;

}

.sv-top-bar__right{

    display:flex;

    align-items:center;

    gap:20px;

}

.sv-top-bar__badge{

    padding:4px 10px;

    border-radius:20px;

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

    backdrop-filter:blur(5px);

    font-size:13px;

}



/* ==========================================================
   3. MAIN HEADER
========================================================== */

.site-header{

    position:relative;

    width:100%;

    background:var(--header-bg);

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

    transition:all .30s ease;

    z-index:999;

}

.site-header__inner{

    max-width:var(--container);

    height:var(--header-height);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

    gap:30px;

}

.site-header.is-sticky{

    position:fixed;

    left:0;

    top:0;

    width:100%;

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

    backdrop-filter:blur(12px);

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

    animation:slideHeader .35s ease;

}

@keyframes slideHeader{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}



/* ==========================================================
   4. LOGO
========================================================== */

.site-logo{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}

.site-logo img{

    width:auto;

    max-height:48px;

    display:block;

}

.site-logo__text{

    display:flex;

    flex-direction:column;

    line-height:1.1;

}

.site-logo__title{

    font-size:26px;

    font-weight:700;

    color:var(--sv-primary);

}

.site-logo__subtitle{

    font-size:12px;

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

}



/* ==========================================================
   5. NAVIGATION LAYOUT
========================================================== */

.site-navigation{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

}

.site-navigation ul{

    display:flex;

    align-items:center;

    gap:var(--menu-gap);

    margin:0;

    padding:0;

}

.site-navigation li{

    list-style:none;

    position:relative;

}



/* ==========================================================
   6. MENU ITEMS
========================================================== */

.site-navigation a{

    display:flex;

    align-items:center;

    gap:6px;

    height:var(--header-height);

    color:var(--header-text);

    font-size:var(--menu-font-size);

    font-weight:var(--menu-font-weight);

    position:relative;

    transition:var(--header-transition);

}

.site-navigation a svg{

    width:14px;

    height:14px;

    transition:.25s;

}



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

.site-navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:16px;

    width:0;

    height:2px;

    background:var(--sv-primary);

    transition:.30s;

}



/* ==========================================================
   7. ACTIVE MENU
========================================================== */

.site-navigation li.is-active > a,

.site-navigation li.active > a,

.site-navigation a.is-active{

    color:var(--sv-primary);

}

.site-navigation li.is-active > a::after,

.site-navigation li.active > a::after,

.site-navigation a.is-active::after{

    width:100%;

}



/* ==========================================================
   8. MENU HOVER EFFECTS
========================================================== */

.site-navigation li:hover>a{

    color:var(--sv-primary);

}

.site-navigation li:hover>a::after{

    width:100%;

}

.site-navigation li:hover>a svg{

    transform:rotate(180deg);

}



/* ==========================================================
   HEADER ACTION AREA
========================================================== */

.header-actions{

    display:flex;

    align-items:center;

    gap:16px;

    flex-shrink:0;

}



/* ==========================================================
   SIMPLE ICON BUTTON
========================================================== */

.header-icon{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

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

    transition:.25s;

}

.header-icon svg{

    width:20px;

    height:20px;

}

.header-icon:hover{

    background:var(--sv-primary-light);

    border-color:var(--sv-primary);

    color:var(--sv-primary);

}



/* ==========================================================
   PRIMARY HEADER BUTTON
========================================================== */

.header-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:10px;

    background:var(--sv-primary);

    color:#ffffff;

    font-weight:600;

    transition:.30s;

}

.header-btn:hover{

    background:var(--sv-primary-dark);

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(37,99,235,.25);

}



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

.header-divider{

    width:1px;

    height:28px;

    background:var(--sv-border);

}



/* ==========================================================
   REMOVE DRUPAL MENU DEFAULTS
========================================================== */

.region-header ul.menu{

    margin:0;

    padding:0;

}

.region-header ul.menu li{

    margin:0;

    padding:0;

}

.region-header ul.menu li::before{

    display:none;

}


 
/* ==========================================================
   HEADER.CSS - PART 2
   Mega Menu
   Dropdown Menu
   Multi-column Layout
   Category Icons
   Desktop Hover Effects
   ========================================================== */


/* ==========================================================
   DROPDOWN WRAPPER
========================================================== */

.sv-nav__item--dropdown{
    position:relative;
}

.sv-nav__item--dropdown > a{
    display:flex;
    align-items:center;
    gap:6px;
}

.sv-nav__item--dropdown > a svg,
.sv-nav__item--dropdown > a i{
    font-size:11px;
    transition:transform .25s ease;
}


/* ==========================================================
   DROPDOWN PANEL
========================================================== */

.sv-dropdown{
    position:absolute;
    top:100%;
    left:0;
    min-width:240px;
    background:#fff;
    border:1px solid var(--sv-border);
    border-radius:14px;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s;
    z-index:999;
    overflow:hidden;
}

.sv-menu-item:hover>.sv-dropdown{
    display:block;
}

.sv-nav__item--dropdown:hover > .sv-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.sv-nav__item--dropdown:hover > a svg{
    transform:rotate(180deg);
}


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

.sv-dropdown ul{

    padding:12px 0;

}

.sv-dropdown li{

    width:100%;

}

.sv-dropdown li a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px 22px;

    font-size:15px;

    color:var(--sv-text);

    transition:.25s;

}

.sv-dropdown li a:hover{

    background:#f5f9ff;

    color:var(--sv-primary);

    padding-left:28px;

}

.sv-dropdown li+li{

    border-top:1px solid #f1f1f1;

}


/* ==========================================================
   DROPDOWN ICONS
========================================================== */

.sv-dropdown__icon{

    width:38px;

    height:38px;

    border-radius:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--sv-primary-light);

    color:var(--sv-primary);

    flex-shrink:0;

    transition:.25s;

}

.sv-dropdown li:hover .sv-dropdown__icon{

    background:var(--sv-primary);

    color:#fff;

}


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

.sv-mega-menu{

    position:absolute;

    top:100%;

    left:50%;

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

    width:1100px;

    background:#fff;

    border-radius:18px;

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

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

    opacity:0;

    visibility:hidden;

    transition:.30s ease;

    overflow:hidden;

    z-index:999;

}

.sv-nav__item--mega:hover .sv-mega-menu{

    opacity:1;

    visibility:visible;

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

}


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

.sv-mega-container{

    display:grid;

    grid-template-columns:

        repeat(4,1fr);

    gap:40px;

    padding:40px;

}


/* ==========================================================
   MEGA COLUMN
========================================================== */

.sv-mega-column{

    display:flex;

    flex-direction:column;

}

.sv-mega-title{

    font-size:15px;

    font-weight:700;

    color:var(--sv-text);

    margin-bottom:18px;

    position:relative;

    padding-bottom:12px;

}

.sv-mega-title:after{

    content:"";

    width:40px;

    height:3px;

    background:var(--sv-primary);

    position:absolute;

    left:0;

    bottom:0;

    border-radius:20px;

}


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

.sv-mega-links{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.sv-mega-links a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px;

    border-radius:12px;

    transition:.25s;

}

.sv-mega-links a:hover{

    background:#f7fbff;

}


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

.sv-category-icon{

    width:44px;

    height:44px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#eef5ff;

    color:var(--sv-primary);

    transition:.3s;

    flex-shrink:0;

}

.sv-mega-links a:hover .sv-category-icon{

    background:var(--sv-primary);

    color:#fff;

    transform:scale(1.08);

}


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

.sv-category-content{

    display:flex;

    flex-direction:column;

}

.sv-category-content strong{

    font-size:15px;

    color:var(--sv-text);

    margin-bottom:4px;

}

.sv-category-content span{

    font-size:13px;

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

}


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

.sv-mega-feature{

    background:linear-gradient(
        135deg,
        #2563eb,
        #4f46e5
    );

    color:#fff;

    border-radius:18px;

    padding:24px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:280px;

}

.sv-mega-feature h3{

    color:#fff;

    margin-bottom:14px;

}

.sv-mega-feature p{

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

    font-size:14px;

}

.sv-mega-feature .sv-btn{

    margin-top:24px;

}


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

.sv-mega-links a{

    position:relative;

    overflow:hidden;

}

.sv-mega-links a:before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:var(--sv-primary);

    transform:scaleY(0);

    transition:.25s;

}

.sv-mega-links a:hover:before{

    transform:scaleY(1);

}


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

.sv-link-arrow{

    margin-left:auto;

    opacity:0;

    transform:translateX(-8px);

    transition:.25s;

}

.sv-mega-links a:hover .sv-link-arrow{

    opacity:1;

    transform:translateX(0);

}


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

@keyframes svMegaFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.sv-nav__item--mega:hover .sv-mega-menu{

    animation:svMegaFade .3s ease;

}


/* ==========================================================
   DESKTOP MENU HOVER
========================================================== */

.sv-nav > li{

    position:relative;

}

.sv-nav > li > a{

    position:relative;

}

.sv-nav > li > a:after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:50%;

    width:0;

    height:2px;

    background:var(--sv-primary);

    transition:.25s;

    transform:translateX(-50%);

}

.sv-nav > li:hover > a{

    color:var(--sv-primary);

}

.sv-nav > li:hover > a:after{

    width:70%;

}


/* ==========================================================
   MENU ITEM ACTIVE
========================================================== */

.sv-nav > li.active > a{

    color:var(--sv-primary);

    font-weight:600;

}

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

    width:70%;

}


/* ==========================================================
   SUBMENU SPACING
========================================================== */

.sv-dropdown li:first-child{

    padding-top:4px;

}

.sv-dropdown li:last-child{

    padding-bottom:4px;

}


/* ==========================================================
   DESKTOP ONLY
========================================================== */

@media(min-width:1200px){

    .sv-nav__item--dropdown:hover>.sv-dropdown{

        display:block;

    }

    .sv-nav__item--mega:hover>.sv-mega-menu{

        display:block;

    }

}


/* ==========================================================
   HEADER PART 3
   Search Box
   Search Popup
   Login Button
   Primary CTA
   Notification
   Avatar
========================================================== */


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

.sv-header-search-toggle{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    cursor:pointer;
    transition:.25s ease;
    color:var(--sv-text);
}

.sv-header-search-toggle:hover{
    background:var(--sv-primary-light);
    color:var(--sv-primary);
}


/* ==========================================================
   SEARCH INPUT (INLINE)
========================================================== */

.sv-search{
    position:relative;
    width:280px;
}

.sv-search input{

    width:100%;
    height:46px;

    border:1px solid var(--sv-border);
    border-radius:50px;

    background:#fff;

    padding:0 50px 0 18px;

    font-size:15px;

    transition:.3s;
}

.sv-search input:focus{

    border-color:var(--sv-primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.08);

}

.sv-search button{

    position:absolute;

    top:50%;
    right:15px;

    transform:translateY(-50%);

    width:24px;
    height:24px;

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

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

    background:none;

}

.sv-search button:hover{

    color:var(--sv-primary);

}


/* ==========================================================
   SEARCH POPUP OVERLAY
========================================================== */

.sv-search-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.65);

    backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.sv-search-overlay.active{

    opacity:1;
    visibility:visible;

}


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

.sv-search-popup{

    position:fixed;

    top:50%;
    left:50%;

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

    width:min(760px,92%);

    background:#fff;

    border-radius:18px;

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

    padding:32px;

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.sv-search-popup.active{

    opacity:1;

    visibility:visible;

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

}

.sv-search-popup h3{

    margin-bottom:22px;

    font-size:24px;

    font-weight:700;

}


/* ==========================================================
   SEARCH POPUP FORM
========================================================== */

.sv-search-popup-form{

    position:relative;

}

.sv-search-popup-form input{

    width:100%;

    height:58px;

    border-radius:60px;

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

    padding:0 65px 0 24px;

    font-size:17px;

}

.sv-search-popup-form input:focus{

    border-color:var(--sv-primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.08);

}

.sv-search-popup-form button{

    position:absolute;

    right:18px;
    top:50%;

    transform:translateY(-50%);

    width:34px;
    height:34px;

    border-radius:50%;

    background:var(--sv-primary);

    color:#fff;

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

}

.sv-search-popup-form button:hover{

    background:var(--sv-primary-dark);

}


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

.sv-search-close{

    position:absolute;

    top:18px;
    right:18px;

    width:38px;
    height:38px;

    border-radius:50%;

    background:#f3f4f6;

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

    cursor:pointer;

    transition:.25s;

}

.sv-search-close:hover{

    background:#e5e7eb;

    transform:rotate(90deg);

}


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

.sv-search-suggestions{

    margin-top:28px;

}

.sv-search-suggestions-title{

    font-size:14px;

    font-weight:600;

    margin-bottom:12px;

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

}

.sv-search-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.sv-search-tag{

    padding:10px 18px;

    border-radius:40px;

    background:#f8fafc;

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

    transition:.25s;

    font-size:14px;

}

.sv-search-tag:hover{

    background:var(--sv-primary);

    color:#fff;

    border-color:var(--sv-primary);

}


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

.sv-btn-login{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:42px;

    padding:0 22px;

    border-radius:50px;

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

    background:#fff;

    font-weight:600;

    transition:.25s;

    white-space:nowrap;

}

.sv-btn-login:hover{

    background:var(--sv-primary-light);

    border-color:var(--sv-primary);

    color:var(--sv-primary);

}


/* ==========================================================
   PRIMARY CTA BUTTON
========================================================== */

.sv-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:13px 28px;

    border-radius:50px;

    background:var(--sv-primary);

    color:#fff;

    font-weight:600;

    transition:.3s;

    box-shadow:0 12px 28px rgba(37,99,235,.20);

}

.sv-btn-primary:hover{

    background:var(--sv-primary-dark);

    transform:translateY(-2px);

    box-shadow:0 18px 34px rgba(37,99,235,.28);

}

.sv-btn-primary:active{

    transform:translateY(0);

}


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

.sv-header-actions{

    display:flex;

    align-items:center;

    gap:16px;

}


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

.sv-notification{

    position:relative;

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;

}

.sv-notification:hover{

    background:var(--sv-primary-light);

}

.sv-notification-badge{

    position:absolute;

    top:4px;

    right:4px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#ef4444;

    color:#fff;

    font-size:11px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #fff;

}


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

.sv-avatar{

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

}

.sv-avatar-image{

    width:42px;

    height:42px;

    border-radius:50%;

    overflow:hidden;

    border:2px solid #fff;

    box-shadow:var(--sv-shadow-sm);

}

.sv-avatar-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.sv-avatar-info{

    display:flex;

    flex-direction:column;

}

.sv-avatar-name{

    font-size:14px;

    font-weight:600;

    color:var(--sv-text);

}

.sv-avatar-role{

    font-size:12px;

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

}


/* ==========================================================
   USER MENU DROPDOWN
========================================================== */

.sv-avatar-dropdown{

    position:absolute;

    top:calc(100% + 14px);

    right:0;

    width:240px;

    background:#fff;

    border-radius:14px;

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

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

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:.25s;

    overflow:hidden;

    z-index:100;

}

.sv-avatar:hover .sv-avatar-dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.sv-avatar-dropdown a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 20px;

    transition:.25s;

    font-size:15px;

}

.sv-avatar-dropdown a:hover{

    background:var(--sv-primary-light);

    color:var(--sv-primary);

}



/* ==========================================================
   STICKY HEADER
   SVFutureTechAI Theme
   Part 4
========================================================== */

/* Sticky Enabled */

.sv-header--sticky{

    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index:9999;

}

/* Fixed Header (Added via JS on Scroll) */

.sv-header.is-fixed{

    position:fixed;
    top:0;
    left:0;
    width:100%;

    animation:svHeaderSlide .35s ease forwards;

}

/* Header Wrapper */

.sv-header{

    position:relative;

    width:100%;

    transition:
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        padding .35s ease,
        transform .35s ease;

}

/* Default Header */

.sv-header:not(.is-scrolled){

    background:#ffffff;

    border-bottom:1px solid transparent;

    box-shadow:none;

}

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

.sv-header.is-scrolled{

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

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(226,232,240,.7);

    box-shadow:
        0 12px 30px rgba(15,23,42,.06);

}

/* Slightly reduce header height */

.sv-header.is-scrolled .sv-header__inner{

    min-height:72px;

}

/* Logo Animation */

.sv-header.is-scrolled .sv-logo img{

    transform:scale(.96);

}

.sv-logo img{

    transition:transform .35s ease;

}
.sv-logo img{
    height:46px;
    width:auto;
}
/* Navigation */

.sv-header.is-scrolled .sv-nav>ul>li>a{

    color:#111827;

}

/* Active Item */

.sv-header.is-scrolled
.sv-nav>ul>li.active>a{

    color:var(--sv-primary);

}

/* CTA Button */

.sv-header.is-scrolled
.sv-btn-primary{

    box-shadow:
        0 10px 25px rgba(37,99,235,.18);

}

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

.sv-header--glass{

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

    backdrop-filter:blur(22px);

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

    border-bottom:

        1px solid rgba(255,255,255,.35);

}

.sv-header--glass.is-scrolled{

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

}

/* ==========================================================
   HEADER SHADOW LEVELS
========================================================== */

.sv-shadow-sm{

    box-shadow:

        0 4px 12px rgba(15,23,42,.05);

}

.sv-shadow-md{

    box-shadow:

        0 12px 30px rgba(15,23,42,.08);

}

.sv-shadow-lg{

    box-shadow:

        0 20px 45px rgba(15,23,42,.12);

}

/* Apply Automatically */

.sv-header.is-scrolled{

    box-shadow:

        0 10px 25px rgba(15,23,42,.06);

}

/* ==========================================================
   HEADER BORDER TRANSITION
========================================================== */

.sv-header{

    border-bottom:

        1px solid transparent;

}

.sv-header.is-scrolled{

    border-bottom:

        1px solid rgba(226,232,240,.9);

}

/* ==========================================================
   SCROLL DOWN
========================================================== */

.sv-header.hide{

    transform:

        translateY(-100%);

}

/* Scroll Up */

.sv-header.show{

    transform:

        translateY(0);

}

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

@keyframes svHeaderSlide{

    from{

        opacity:0;

        transform:

            translateY(-100%);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

/* ==========================================================
   BLUR SUPPORT
========================================================== */

@supports(backdrop-filter:blur(12px)){

    .sv-header.is-scrolled{

        backdrop-filter:blur(20px);

    }

}

/* ==========================================================
   FALLBACK
========================================================== */

@supports not (backdrop-filter:blur(10px)){

    .sv-header.is-scrolled{

        background:#ffffff;

    }

}

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

.sv-header__inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:84px;

    transition:

        min-height .3s ease;

}

/* ==========================================================
   SCROLL PROGRESS BAR
========================================================== */

.sv-scroll-progress{

    position:absolute;

    bottom:0;

    left:0;

    height:3px;

    width:0;

    background:

        linear-gradient(

            90deg,

            var(--sv-primary),

            #5b8dff

        );

    transition:width .15s linear;

    z-index:20;

}

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

.sv-header-overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            to bottom,

            rgba(255,255,255,.12),

            rgba(255,255,255,0)

        );

}

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

.sv-header.is-scrolled
.sv-search{

    max-width:260px;

}

.sv-search{

    transition:

        max-width .35s ease;

}

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

.sv-header .sv-btn{

    transition:

        transform .25s ease,

        box-shadow .25s ease;

}

.sv-header.is-scrolled .sv-btn:hover{

    transform:

        translateY(-2px);

}

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

.sv-logo{

    transition:

        transform .35s ease;

}

.sv-header.is-scrolled .sv-logo{

    transform:

        translateY(-1px);

}

/* ==========================================================
   HIGH CONTRAST MODE
========================================================== */

@media (prefers-contrast:more){

    .sv-header{

        background:#ffffff;

        border-bottom:2px solid #000;

    }

}

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

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

    .sv-header,

    .sv-logo,

    .sv-btn,

    .sv-search,

    .sv-header__inner{

        transition:none;

    }

    .sv-header.is-fixed{

        animation:none;

    }

}


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

.sv-header__mobile {
    display: none;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 20px;
    background: var(--sv-white);
    border-bottom: 1px solid var(--sv-border);
    position: relative;
    z-index: 1200;
}

.sv-header__mobile-logo img {
    height: 42px;
    width: auto;
}

.sv-header__mobile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.sv-hamburger {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--sv-white);
    border: 1px solid var(--sv-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
}

.sv-hamburger:hover {
    background: var(--sv-primary-light);
    border-color: var(--sv-primary);
}

.sv-hamburger:focus-visible {
    outline: 3px solid rgba(37,99,235,.25);
}

.sv-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--sv-text);
    position: relative;
    transition: all .3s ease;
}

.sv-hamburger span::before,
.sv-hamburger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--sv-text);
    transition: all .3s ease;
}

.sv-hamburger span::before {
    top: -7px;
}

.sv-hamburger span::after {
    top: 7px;
}

/* Active */

.sv-hamburger.active span {
    background: transparent;
}

.sv-hamburger.active span::before {
    transform: rotate(45deg);
    top: 0;
}

.sv-hamburger.active span::after {
    transform: rotate(-45deg);
    top: 0;
}

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

.sv-mobile-nav {
    position: fixed;
    top: 0;
    left: -360px;
    width: 340px;
    max-width: 90%;
    height: 100vh;
    background: var(--sv-white);
    overflow-y: auto;
    box-shadow: var(--sv-shadow-lg);
    transition: left .35s ease;
    z-index: 1300;
    display: flex;
    flex-direction: column;
}

.sv-mobile-nav.active {
    left: 0;
}

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

.sv-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px;
    border-bottom: 1px solid var(--sv-border);
}

.sv-mobile-nav__logo img {
    height: 42px;
}

.sv-mobile-close {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--sv-bg);
    border: none;
    cursor: pointer;
    transition: .3s;
}

.sv-mobile-close:hover {
    background: var(--sv-primary);
    color: #fff;
}

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

.sv-mobile-menu {
    padding: 12px 0;
}

.sv-mobile-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-mobile-menu li {
    border-bottom: 1px solid var(--sv-border);
}

.sv-mobile-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sv-text);
    transition: .25s;
}

.sv-mobile-menu a:hover {
    color: var(--sv-primary);
    background: var(--sv-primary-light);
}

.sv-mobile-menu .active > a {
    color: var(--sv-primary);
    background: var(--sv-primary-light);
}

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

.sv-submenu-toggle-icon {
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
}

.sv-submenu-toggle-icon::before,
.sv-submenu-toggle-icon::after {
    content: "";
    position: absolute;
    background: var(--sv-text-light);
    transition: .3s ease;
}

.sv-submenu-toggle-icon::before {
    width: 14px;
    height: 2px;
    top: 9px;
    left: 3px;
}

.sv-submenu-toggle-icon::after {
    width: 2px;
    height: 14px;
    top: 3px;
    left: 9px;
}

li.open > a .sv-submenu-toggle-icon::after {
    transform: scaleY(0);
}

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

.sv-mobile-submenu {
    display: none;
    background: #fafbfc;
}

li.open > .sv-mobile-submenu {
    display: block;
}

.sv-mobile-submenu a {
    padding-left: 48px;
    font-size: 14px;
    font-weight: 500;
}

.sv-mobile-submenu .sv-mobile-submenu a {
    padding-left: 68px;
}

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

.sv-mobile-footer {
    margin-top: auto;
    padding: 24px;
    border-top: 1px solid var(--sv-border);
}

.sv-mobile-footer .sv-btn {
    width: 100%;
    justify-content: center;
}

.sv-mobile-social {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.sv-mobile-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sv-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

.sv-mobile-social a:hover {
    background: var(--sv-primary);
    color: #fff;
}

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

.sv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: .35s;
    z-index: 1250;
}

.sv-overlay.active {
    opacity: 1;
    visibility: visible;
}

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

body.sv-menu-open {
    overflow: hidden;
}

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

@media (max-width: 1199px) {

    .sv-header__desktop {
        display: none;
    }

    .sv-header__mobile {
        display: flex;
    }

}

@media (max-width: 991px) {

    .sv-mobile-nav {
        width: 320px;
    }

}

@media (max-width: 767px) {

    .sv-header__mobile {
        height: 66px;
        padding: 0 16px;
    }

    .sv-header__mobile-logo img {
        height: 36px;
    }

    .sv-mobile-nav {
        width: 100%;
        max-width: 100%;
    }

    .sv-mobile-menu a {
        padding: 16px 20px;
    }

}

@media (max-width: 480px) {

    .sv-header__mobile {
        height: 60px;
    }

    .sv-hamburger {
        width: 42px;
        height: 42px;
    }

    .sv-mobile-nav__header {
        padding: 18px;
    }

    .sv-mobile-footer {
        padding: 18px;
    }

}


/*==================================================
  HEADER.CSS - PART 6
  Tablet
  Large Desktop
  Accessibility
  Focus States
  Reduced Motion
  RTL Support
  Print Styles
====================================================*/


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

@media (min-width:768px) and (max-width:1199px){

    .sv-header{
        padding:0 20px;
    }

    .sv-header__container{
        min-height:72px;
        gap:20px;
    }

    .sv-header__logo img{
        max-height:42px;
    }

    .sv-nav{
        display:none;
    }

    .sv-header__actions{
        margin-left:auto;
        gap:14px;
    }

    .sv-search{
        width:220px;
    }

    .sv-header__btn{
        padding:10px 18px;
        font-size:.9rem;
    }

    .sv-header__mobile-toggle{
        display:flex;
    }

}


/*==================================================
  LARGE DESKTOP
====================================================*/

@media (min-width:1600px){

    .sv-header{

        padding:0 48px;

    }

    .sv-header__container{

        max-width:1500px;

    }

    .sv-nav{

        gap:34px;

    }

    .sv-nav__link{

        font-size:15px;

    }

    .sv-header__actions{

        gap:20px;

    }

}


@media (min-width:1920px){

    .sv-header__container{

        max-width:1700px;

    }

}



/*==================================================
  ACCESSIBILITY
====================================================*/

.sv-header a{

    text-decoration:none;

}

.sv-header button{

    font:inherit;

}

.sv-header img{

    max-width:100%;

    height:auto;

}

.sv-header svg{

    flex-shrink:0;

}

.sv-header button:disabled{

    opacity:.5;

    cursor:not-allowed;

}

.sv-header [aria-expanded="true"]{

    color:var(--sv-primary);

}

.sv-header [aria-current="page"]{

    color:var(--sv-primary);

    font-weight:600;

}

.sv-header [hidden]{

    display:none !important;

}


/*==================================================
  KEYBOARD FOCUS
====================================================*/

.sv-header a:focus-visible,
.sv-header button:focus-visible,
.sv-header input:focus-visible{

    outline:3px solid var(--sv-primary);

    outline-offset:3px;

    border-radius:6px;

}

.sv-nav__link:focus-visible{

    background:var(--sv-primary-light);

}

.sv-search__input:focus-visible{

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}


/*==================================================
  SKIP LINK
====================================================*/

.sv-skip-link{

    position:absolute;

    top:-50px;

    left:20px;

    background:var(--sv-primary);

    color:#fff;

    padding:12px 18px;

    z-index:99999;

    border-radius:8px;

    transition:.25s;

}

.sv-skip-link:focus{

    top:20px;

}



/*==================================================
  SCREEN READER
====================================================*/

.sr-only{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}



/*==================================================
  HIGH CONTRAST
====================================================*/

@media (prefers-contrast:more){

    .sv-header{

        border-bottom:2px solid #000;

    }

    .sv-nav__link{

        color:#000;

    }

    .sv-header__btn{

        border:2px solid currentColor;

    }

}



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

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

    *{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

    .sv-mega-menu{

        animation:none;

    }

    .sv-dropdown{

        animation:none;

    }

}



/*==================================================
  RTL SUPPORT
====================================================*/

[dir="rtl"] .sv-header__container{

    flex-direction:row-reverse;

}

[dir="rtl"] .sv-nav{

    flex-direction:row-reverse;

}

[dir="rtl"] .sv-header__actions{

    margin-left:0;

    margin-right:auto;

}

[dir="rtl"] .sv-search svg{

    left:auto;

    right:16px;

}

[dir="rtl"] .sv-search input{

    padding-left:18px;

    padding-right:42px;

}

[dir="rtl"] .sv-dropdown{

    left:auto;

    right:0;

}

[dir="rtl"] .sv-mega-menu{

    left:auto;

    right:0;

}

[dir="rtl"] .sv-mega-menu__columns{

    direction:rtl;

}



/*==================================================
  PRINT
====================================================*/

@media print{

    .sv-header{

        position:relative !important;

        background:#fff !important;

        color:#000 !important;

        box-shadow:none !important;

        border-bottom:1px solid #000;

    }

    .sv-nav,
    .sv-header__actions,
    .sv-search,
    .sv-header__mobile-toggle,
    .sv-mega-menu,
    .sv-dropdown{

        display:none !important;

    }

    .sv-header__logo{

        display:block;

        text-align:center;

        margin:0 auto;

    }

}



/*==================================================
  TOUCH DEVICES
====================================================*/

@media (hover:none){

    .sv-nav__link:hover{

        background:none;

    }

    .sv-header__btn:hover{

        transform:none;

    }

}



/*==================================================
  SAFE AREA (iPhone Notch)
====================================================*/

@supports(padding:max(0px)){

    .sv-header{

        padding-left:max(20px,env(safe-area-inset-left));

        padding-right:max(20px,env(safe-area-inset-right));

    }

}



/*==================================================
  HEADER LOADING STATE
====================================================*/

.sv-header--loading{

    pointer-events:none;

    opacity:.75;

}

.sv-header--loading .sv-header__logo,
.sv-header--loading .sv-nav__link,
.sv-header--loading .sv-header__btn{

    animation:svPulse 1.4s infinite ease-in-out;

}

@keyframes svPulse{

    0%{

        opacity:.4;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.4;

    }

}



/*==================================================
  END OF HEADER.CSS
====================================================*/

.region-primary-menu .menu{
    display:flex;
    align-items:center;
    gap:28px;
    list-style:none;
    margin:0;
    padding:0;
}

.region-primary-menu .menu li{
    margin:0;
}

.region-primary-menu .menu a{
    text-decoration:none;
    font-weight:600;
    color:#222;
}

.sv-header-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.sv-header-center{
    flex:1;
    display:flex;
    justify-content:center;
}

.sv-header-left{
    flex:0 0 auto;
}

.sv-header-right{
    display:flex;
    align-items:center;
    gap:16px;
}

.sv-primary-menu{
    display:flex;
    align-items:center;
    gap:32px;
    list-style:none;
    margin:0;
    padding:0;
}

.sv-primary-menu > li{
    position:relative;
}

.sv-primary-menu > li > a{
    display:flex;
    align-items:center;
    padding:30px 0;
    font-weight:600;
    color:#111827;
    text-decoration:none;
}




.sv-header-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:80px;

}

.sv-header-left{

    width:220px;

}

.sv-header-center{

    flex:1;

}

.sv-header-right{

    width:220px;

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

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


.sv-mobile-toggle{

    width:46px;
    height:46px;

    display:none;

    border:none;

    background:transparent;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

}

.sv-mobile-toggle span{

    display:block;

    width:24px;

    height:2px;

    background:#111827;

    border-radius:10px;

    transition:.3s;

}

.sv-mobile-toggle.is-open span:nth-child(1){

    transform:rotate(45deg) translate(5px,5px);

}

.sv-mobile-toggle.is-open span:nth-child(2){

    opacity:0;

}

.sv-mobile-toggle.is-open span:nth-child(3){

    transform:rotate(-45deg) translate(5px,-5px);

}

@media(max-width:991px){

    .sv-mobile-toggle{

        display:flex;

    }

    .sv-header-center{

        display:none;

    }

}

@media(max-width:991px){

    .sv-header-center{

        display:none;

    }

}