/*==================================================
GSPL HEADER CSS
Part 1
==================================================*/

/*==========================
Google Fonts
==========================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/*==========================
Variables
==========================*/

:root{

    --primary:#C32026;
    --secondary:#111111;
    --white:#ffffff;
    --text:#555555;
    --border:#e8e8e8;
    --bg:#f7f7f7;

    --transition:.35s ease;

    --radius:6px;

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

}

/*==========================
Reset
==========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    color:var(--secondary);
    overflow-x:hidden;

}

a{

    text-decoration:none;
    transition:var(--transition);

}

ul{

    list-style:none;

}

img{

    display:block;
    max-width:100%;

}

/*==========================
Container
==========================*/

.gspl-container{

    width:100%;
    max-width:1320px;
    margin:auto;

    padding:0 15px;

}

/*==========================
Top Bar
==========================*/

.gspl-topbar{

    background:#111;

    color:#fff;

    font-size:14px;

}

.gspl-topbar .gspl-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:42px;

}

.topbar-left{

    display:flex;

    gap:25px;

}

.topbar-left a{

    color:#fff;

    display:flex;

    align-items:center;

    gap:8px;

}

.topbar-left a:hover{

    color:var(--primary);

}

.topbar-right{

    letter-spacing:.5px;

    font-weight:500;

}

/*==========================
Header
==========================*/

.gspl-topbar{

    transition:all .35s ease;

}

.gspl-header{

    position:fixed;

    top:42px;

    left:0;

    width:100%;

    z-index:9999;

    transition:all .35s ease;

}

.gspl-header.scrolled{

    top:0;

}

.gspl-topbar.hide{

    transform:translateY(-100%);

    opacity:0;

}

.gspl-header .gspl-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

/*==========================
Logo
==========================*/

.gspl-logo img{

    height:58px;

    width:auto;

}

/*==========================
Desktop Navigation
==========================*/

.gspl-navbar{

    margin-left:auto;

    margin-right:40px;

}

.gspl-menu{

    display:flex;

    align-items:center;

    gap:34px;

}

.gspl-menu>li{

    position:relative;

}

.gspl-menu>li>a{

    color:#111;

    font-size:15px;

    font-weight:600;

    padding:34px 0;

    display:block;

    font-family:'Space Grotesk',sans-serif;

    transition:.3s;

}

.gspl-menu>li:hover>a{

    color:var(--primary);

}

/*==========================
Desktop Dropdown
==========================*/

.has-dropdown{

    position:relative;

}

.mega-menu{

    position:absolute;

    left:0;

    top:100%;

    width:280px;

    background:#fff;

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

    border-radius:0 0 8px 8px;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;

    padding:15px 0;

    z-index:999;

}

.has-dropdown:hover .mega-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.mega-menu a{

    display:block;

    padding:13px 22px;

    color:#222;

    font-size:15px;

    font-weight:500;

    border-bottom:1px solid #f1f1f1;

}

.mega-menu a:last-child{

    border:none;

}

.mega-menu a:hover{

    color:var(--primary);

    padding-left:28px;

    background:#fafafa;

}

/*==========================
Header Right
==========================*/

.header-right{

    display:flex;

    align-items:center;

    gap:18px;

}

/*==========================
Quote Button
==========================*/

.quote-btn{

    background:var(--primary);

    color:#fff;

    padding:14px 28px;

    border-radius:5px;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.quote-btn:hover{

    background:#111;

}

/*==========================
Hamburger
==========================*/

.mobile-toggle{

    width:46px;

    height:46px;

    border:none;

    background:#111;

    display:none;

    cursor:pointer;

    border-radius:5px;

    position:relative;

}

.mobile-toggle span{

    position:absolute;

    left:11px;

    width:24px;

    height:2px;

    background:#fff;

    transition:.35s;

}

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

    top:14px;

}

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

    top:22px;

}

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

    top:30px;

}

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

    transform:rotate(45deg);

    top:22px;

}

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

    opacity:0;

}

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

    transform:rotate(-45deg);

    top:22px;

}

/*==================================================
GSPL HEADER CSS
Part 2
Mobile Menu + Responsive
==================================================*/

/*==========================
Overlay
==========================*/

.mobile-overlay{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.72);
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:998;

}

.mobile-overlay.active{

    opacity:1;
    visibility:visible;

}

/*==========================
Mobile Drawer
==========================*/

.mobile-menu{

    position:fixed;

    top:0;
    left:-440px;

    width:350px;
    max-width:92%;

    height:100vh;

    background:#fff;

    z-index:999;

    display:flex;
    flex-direction:column;

    transition:.45s cubic-bezier(.22,.61,.36,1);
    border-radius:0 18px 18px 0;

    box-shadow:0 20px 70px rgba(0,0,0,.22);

}

.mobile-menu.active{

    left:0;

}

/*==========================
Mobile Header
==========================*/

.mobile-menu-header{

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 24px;

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

}

.mobile-menu-header img{

    height:55px;

}

.mobile-close{

    width:42px;

    height:42px;

    border:none;

    background:#111;

    color:#fff;

    border-radius:5px;

    cursor:pointer;

    font-size:28px;

    transition:.3s;

}

.mobile-close:hover{

    background:var(--primary);

}

/*==========================
Navigation
==========================*/

.mobile-nav{

    flex:1;

    overflow-y:auto;

}

.mobile-nav ul{

    padding:15px 0;

}

.mobile-nav li{

    border-bottom:1px solid #f1f1f1;

}

.mobile-nav a{

    display:block;

    padding:18px 24px;

    color:#111;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.mobile-nav a:hover{

    color:var(--primary);
    padding-left:28px;

}

/*==========================
Accordion
==========================*/

.mobile-dropdown-btn{

    width:100%;

    border:none;

    background:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 24px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    color:#111;

    transition:.3s;

}

.mobile-dropdown-btn:hover{

    color:var(--primary);

}

.mobile-dropdown-btn .plus{

  font-size:26px;
  font-weight:300;

    line-height:1;

    transition:.3s;

}

.mobile-dropdown.active .plus{

    transform:rotate(45deg);

}

.mobile-submenu{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    background:#fafafa;

}

.mobile-dropdown.active .mobile-submenu{

    max-height:500px;

}

.mobile-submenu a{

    padding:14px 40px;

    font-size:15px;

    color:#555;

    border-bottom:1px solid #ececec;

}

.mobile-submenu a:hover{

    color:var(--primary);

    background:#fff;

    padding-left:46px;

}

/*==========================
Footer
==========================*/

.mobile-footer{

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

    padding:20px;

}

.mobile-footer a{

    display:block;

}

.mobile-footer a:first-child,
.mobile-footer a:nth-child(2){

    color:#555;

    margin-bottom:12px;

    font-size:15px;

}

.mobile-footer a:first-child:hover,
.mobile-footer a:nth-child(2):hover{

    color:var(--primary);

}

.mobile-quote-btn{

    margin-top:18px;

    width:100%;

    background:var(--primary);

    color:#fff !important;

    text-align:center;

    padding:14px;

    border-radius:8px;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.mobile-quote-btn:hover{

    background:#111;

}

/*==========================
Body Lock
==========================*/

body.menu-open{

    overflow:hidden;

}

/*==========================
Responsive
==========================*/

@media(max-width:1200px){

    .gspl-menu{

        gap:24px;

    }

}

@media(max-width:992px){

    .gspl-navbar{

        display:none;

    }

    .quote-btn{

        display:none;

    }

    .mobile-toggle{

        display:block;

    }

    .gspl-header .gspl-container{

        height:80px;

    }

}

@media(max-width:768px){

    .gspl-topbar{

        display:none;

    }

    .gspl-logo img{

        height:50px;

    }

}

@media(max-width:576px){

    .mobile-menu{

        width:300px;

    }

    .mobile-menu-header{

        padding:0 15px;

    }

    .mobile-nav a,
    .mobile-dropdown-btn{

        padding:16px 18px;

    }

    .mobile-submenu a{

        padding:13px 32px;

    }

    .mobile-footer{

        padding:18px;

    }

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

.gspl-header{

    transition: box-shadow .35s ease;

}

.gspl-header.scrolled{

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

}