/*=========================================================
SCS HEADER & NAVIGATION
=========================================================*/

:root{

    --primary:#233b6e;
    --secondary:#58bdd1;
    --accent:#f4b223;

    --white:#ffffff;
    --dark:#222222;
    --border:#e8edf3;

    --shadow:0 15px 40px rgba(0,0,0,.08);

    --transition:.30s ease;

}

/*=========================================================
GLOBAL
=========================================================*/

*{

    box-sizing:border-box;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    margin:0;

    padding:0;

    list-style:none;

}

/*=========================================================
TOP NOTICE
=========================================================*/

.top-notice{

    background:#233b6e;

    color:#fff;

    font-size:13px;

}

.top-notice .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:42px;

}

.top-notice-left{

    display:flex;

    align-items:center;

    gap:8px;

}

.top-notice-right a{

    color:#fff;

    font-weight:600;

}

.top-notice-right a:hover{

    color:#f4b223;

}

/*=========================================================
TOP BAR
=========================================================*/

.topbar{

    background:#fff;

    border-bottom:1px solid #ececec;

}

.topbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:48px;

}

.top-left{

    display:flex;

    align-items:center;

    gap:22px;

}

.top-left a,

.top-left span{

    color:#555;

    font-size:13px;

    display:flex;

    align-items:center;

    gap:6px;

}

.top-right{

    display:flex;

    align-items:center;

    gap:12px;

}

.top-right a{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f7f8fa;

    color:var(--primary);

}

.top-right a:hover{

    background:var(--secondary);

    color:#fff;

}

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

#site-header{

    background:#fff;

    z-index:9999;

    box-shadow:0 2px 10px rgba(0,0,0,.04);

}

.header-wrapper{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:82px;

    width:100%;

}

.logo{

    flex:0 0 170px;

}

.logo img{

   

    display:block;

}

/*=========================================================
MAIN NAVIGATION
=========================================================*/
.main-nav{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 30px;

}
.nav-menu{

    display:flex;

    align-items:center;

    gap:16px;

}

.nav-menu>li{

    position:relative;

}
.nav-menu>li.mega-menu{

    position:static;

}
.nav-menu>li>a{

    position:relative;

    display:flex;

    align-items:center;

    gap:6px;

    height:82px;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

}

.nav-menu>li>a:hover,

.nav-menu>li.active>a{

    color:var(--secondary);

}

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

    content:"";

    position:absolute;

    left:50%;

    bottom:16px;

    transform:translateX(-50%);

    width:26px;

    height:3px;

    background:var(--accent);

    border-radius:50px;

}
.nav-menu i{

    font-size:11px;

}

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

.header-actions{

    flex:0 0 180px;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:14px;

}
.header-search{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#f7f8fa;

    color:var(--primary);

    cursor:pointer;

}

.header-search:hover{

    background:var(--secondary);

    color:#fff;

}

.quote-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:145px;

    height:44px;

    padding:0 20px;

    border-radius:50px;

    background:var(--secondary);

    color:#fff;

    font-weight:700;

}

.quote-btn:hover{

    background:var(--primary);

    color:#fff;

}
.mobile-toggle{

    display:none;

    width:46px;

    height:46px;

    background:transparent;

    border:none;

    cursor:pointer;

    padding:0;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

}

.mobile-toggle span{

    display:block;

    width:24px;

    height:2px;

    background:var(--primary);

    border-radius:30px;

    transition:.30s ease;

}

.mobile-toggle:hover span{

    background:var(--secondary);

}
/*=========================================================
DROPDOWN MENU
=========================================================*/

.dropdown{

    position:relative;

}

.dropdown-menu{

    position:absolute;

    top:100%;

    left:0;

    min-width:280px;

    background:#fff;

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

    border-top:3px solid var(--secondary);

    border-radius:0 0 10px 10px;

    box-shadow:var(--shadow);

    padding:8px 0;

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:var(--transition);

    z-index:9999;

}

.dropdown:hover>.dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu li{

    width:100%;

}

.dropdown-menu li a{

    display:block;

    padding:11px 22px;

    color:#555;

    font-size:13px;

    font-weight:500;

    line-height:1.45;

}

.dropdown-menu li a:hover{

    background:#f8fbfd;

    color:var(--secondary);

    padding-left:28px;

}

/*=========================================================
FULL WIDTH MEGA MENU
=========================================================*/

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

.mega-menu{

    position:static;

}

.mega-menu-wrapper{

    position:absolute;

    top:82px;

    left:50%;

    transform:translateX(-50%);

    width:1320px;

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

    background:#fff;

    border-top:3px solid var(--secondary);

    border-radius:0 0 12px 12px;

    box-shadow:0 18px 45px rgba(0,0,0,.15);

    opacity:0;

    visibility:hidden;

    transition:all .25s ease;

    z-index:99999;

    overflow:hidden;

}
.mega-menu:hover>.mega-menu-wrapper{

    opacity:1;

    visibility:visible;

}
.mega-menu-grid{

    width:100%;

    display:grid;

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

    gap:34px;

    padding:30px 34px;

    align-items:start;

    box-sizing:border-box;

}
.mega-column{

    min-width:0;

}

.mega-column h4{

    margin:0 0 14px;

    padding-bottom:10px;

    color:var(--primary);

    font-size:15px;

    font-weight:700;

    border-bottom:2px solid #edf2f7;

}

.mega-column a{

    display:block;

    padding:5px 0;

    color:#555;

    font-size:13px;

    line-height:1.45;

    white-space:normal;

    transition:.25s;

}

.mega-column a:hover{

    color:var(--secondary);

    padding-left:6px;

}

.mega-column hr{

    margin:14px 0;

    border:0;

    border-top:1px solid #ececec;

}

.menu-view-all{

    display:inline-block;

    margin-top:8px;

    color:var(--primary) !important;

    font-weight:700 !important;

}

.menu-view-all:hover{

    color:var(--secondary) !important;

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

#site-header.header-scrolled{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#fff;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    animation:headerSlide .35s ease;

}

.header-scrolled .header-wrapper{

    min-height:72px;

}

/*.header-scrolled .logo img{

    height:56px;

}*/

.header-scrolled .nav-menu>li>a{

    height:72px;

}

@keyframes headerSlide{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

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

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.30s ease;

    z-index:99998;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:360px;

    max-width:100%;

    height:100vh;

    background:#fff;

    overflow-y:auto;

    transition:.35s ease;

    z-index:99999;

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

}

.mobile-menu.active{

    right:0;

}

body.menu-open{

    overflow:hidden;

}

.mobile-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    border-bottom:1px solid #edf1f6;

    background:#fff;

    position:sticky;

    top:0;

    z-index:10;

}

.mobile-logo img{

    height:56px;

}

.mobile-close{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#f3f6fb;

    color:var(--primary);

    cursor:pointer;

    font-size:18px;

}

.mobile-body{

    padding:0;

}

.mobile-nav{

    width:100%;

}

.mobile-nav li{

    width:100%;
				
    display:block;

}

.mobile-nav{

    margin:0;

    padding:0;

    list-style:none;

}

.mobile-nav>li{

    border-bottom:1px solid #edf1f6;

}

.mobile-nav>li>a{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    width:100%;

    padding:16px 20px;

    color:var(--primary);

    font-size:15px;

    font-weight:600;

    text-align:left;

    gap:14px;

}

.mobile-nav>li>a i{

    width:22px;

    min-width:22px;

    text-align:center;

    color:var(--secondary);

}

.mobile-nav>li>a span{

    flex:1;

}

.mobile-nav>li>a>.fa-chevron-down{

    margin-left:auto;

    font-size:12px;

    transition:.30s ease;

}

.has-submenu.open>a>.fa-chevron-down{

    transform:rotate(180deg);

}

.mobile-nav>li>a:hover{

    background:#f7fafc;

}


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

@media (max-width:991px){

    .main-nav{

        display:none;

    }

    .quote-btn{

        display:none;

    }

    .header-search{

        display:none;

    }

    .mobile-toggle{

        display:flex;

    }

    .header-wrapper{

        min-height:72px;

    }

    .logo img{

        height:56px;

    }

}

@media (max-width:480px){

    .mobile-menu{

        width:100%;

    }

}
/*=========================================================
SEARCH OVERLAY
=========================================================*/

.search-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    opacity:0;

    visibility:hidden;

    transition:.30s;

    z-index:999999;

}

.search-overlay.active{

    opacity:1;

    visibility:visible;

}

.search-box{

    position:absolute;

    left:50%;

    top:8%;

    transform:translateX(-50%);

    width:92%;

    max-width:980px;

    background:#fff;

    border-radius:22px;

    padding:36px;

    box-shadow:0 25px 70px rgba(0,0,0,.18);

}

.search-box form{

    width:100%;

}

.search-input-group{

    display:flex;

    align-items:center;

    width:100%;

    gap:18px;

}

.search-input-group input{

    flex:1;

    width:100%;

    height:68px;

    border:1px solid #dde3ea;

    border-radius:50px;

    padding:0 28px;

    outline:none;

    font-size:22px;

    background:#fff;

}

.search-input-group input:focus{

    border-color:var(--secondary);

    box-shadow:0 0 0 4px rgba(86,189,212,.15);

}

.search-input-group button{

    width:68px;

    min-width:68px;

    height:68px;

    border:none;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.30s;

    flex-shrink:0;

}

.search-input-group button:hover{

    background:#1e2f4d;

}
.search-close{

    position:absolute;

    top:-20px;

    right:18px;

    width:24px;

    height:24px;

    border:none;

    border-radius:50%;

    background:#f5f7fb;

    color:#1e2f4d;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

    z-index:10;

}

.search-close:hover{

    background:var(--secondary);

    color:#fff;

}

@media (max-width:768px){

    .search-box{

        top:6%;

        padding:20px;

    }

    .search-box form{

        gap:12px;

    }

    .search-box input{

        height:56px;

        font-size:18px;

        padding:0 20px;

    }

    .search-box button{

        width:56px;

        height:56px;

        font-size:18px;

    }

}
/*=========================================================
MOBILE ACCORDION
=========================================================*/

.mobile-accordion{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 20px;

    background:#fff;

    border:0;

    cursor:pointer;

    font:inherit;

    color:var(--primary);

    text-align:left;

}

.mobile-accordion span{

    display:flex;

    align-items:center;

    gap:14px;

    flex:1;

}

.mobile-accordion i:first-child{

    width:22px;

    min-width:22px;

    color:var(--secondary);

    text-align:center;

}

.mobile-accordion i:last-child{

    font-size:14px;

    color:var(--primary);

    transition:.3s;

}

.mobile-accordion.active i:last-child{

    transform:rotate(45deg);

}

/* PANEL */

.mobile-panel{

    display:none;

    width:100%;

    background:#f8fbff;

    border-top:1px solid #edf2f7;

}
.mobile-panel.active{

    display:block !important;

    animation:mobileAccordion .25s ease;

}

@keyframes mobileAccordion{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* LINKS */

.mobile-panel a{

    display:block;

    width:100%;

    padding:14px 22px 14px 55px;

    color:var(--primary);

    font-size:15px;

    font-weight:500;

    border-bottom:1px solid #edf2f7;

}
.mobile-panel a:last-child{

    border-bottom:0;

}

.mobile-panel a:hover{

    background:#fff;

    color:var(--secondary);

}
.mobile-accordion.active .fa-plus:before{

    content:"\f068";

}
/* VIEW ALL */

.mobile-panel .view-all{

    color:var(--primary);

    font-weight:700;

}
/*=========================================================
MOBILE CTA
=========================================================*/

.mobile-cta{

    padding:20px;

    border-top:1px solid #edf2f7;

    background:#fff;

    position:sticky;

    bottom:0;

}

.mobile-quote-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    height:52px;

    background:var(--secondary);

    color:#fff;

    font-size:16px;

    font-weight:700;

    border-radius:50px;

    transition:.30s;

}

.mobile-quote-btn:hover{

    background:var(--primary);

    color:#fff;

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