@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

:root{
    --primary:#F47A30;
    --primary-dark:#9e4300;
    --text:#1c1b1b;
    --light:#ffffff;
}


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

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

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

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

    border-bottom:1px solid rgba(244,122,48,.12);

    transition:.35s ease;

}


.site-header.scrolled{

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

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

}



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

.header-container{

    max-width:1400px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:85px;

    padding:0 25px;

}



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

.logo{

    font-family:'Bebas Neue',sans-serif;

    font-size:42px;

    letter-spacing:2px;

    text-decoration:none;

    color:var(--primary-dark);

    transition:.3s;

}

.logo:hover{

    color:var(--primary);

}



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

.nav-menu{

    display:flex;

    align-items:center;

    gap:40px;

}

.nav-menu a{

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

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#444;

    text-decoration:none;

    position:relative;

    transition:.3s;

}


.nav-menu a:hover{

    color:var(--primary);

}


.nav-menu a::after{

    content:'';

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}


.nav-menu a:hover::after{

    width:100%;

}



/* ================= QUOTE BTN ================= */

.quote-btn{

    background:var(--primary);

    color:#fff;

    padding:14px 28px;

    border-radius:10px;

    text-decoration:none;

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

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    transition:.3s;

}


.quote-btn:hover{

    transform:translateY(-3px);

    background:#e56a20;

}



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

.mobile-btn{

    display:none;

}



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

.hamburger{

    display:none;

    width:42px;

    height:42px;

    background:none;

    border:none;

    cursor:pointer;

    position:relative;

    padding:0;

}


.hamburger span{

    position:absolute;

    left:50%;

    width:28px;

    height:3px;

    background:#222;

    border-radius:20px;

    transform:translateX(-50%);

    transition:.35s ease;

}


.hamburger span:nth-child(1){

    top:11px;

}


.hamburger span:nth-child(2){

    top:19px;

}


.hamburger span:nth-child(3){

    top:27px;

}



/* Active Hamburger */

.hamburger.active span:nth-child(1){

    top:19px;

    transform:

    translateX(-50%)

    rotate(45deg);

}


.hamburger.active span:nth-child(2){

    opacity:0;

}


.hamburger.active span:nth-child(3){

    top:19px;

    transform:

    translateX(-50%)

    rotate(-45deg);

}



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

@media(max-width:992px){

.header-container{

padding:15px 20px;

}


.logo{

font-size:38px;

}


.quote-btn{

display:none;

}


.hamburger{

display:block;

z-index:10001;

}


/* Mobile Menu */

.nav-menu{

position:fixed;

top:74px;

left:-100%;

width:100%;

height:calc(100vh - 74px);

background:#fff;

flex-direction:column;

align-items:flex-start;

padding:45px 30px;

gap:28px;

transition:.4s ease;

box-shadow:

0 20px 40px rgba(0,0,0,.05);

}


.nav-menu.active{

left:0;

}


.nav-menu a{

font-size:16px;

color:#222;

}


.mobile-btn{

display:inline-block !important;

margin-top:20px;

background:var(--primary);

color:#fff !important;

padding:14px 24px;

border-radius:10px;

}


.mobile-btn::after{

display:none;

}

}



/* ================= SMALL PHONE ================= */

@media(max-width:480px){

.header-container{

padding:14px 16px;

}


.logo{

font-size:34px;

}


.nav-menu{

padding:35px 22px;

gap:24px;

}


.nav-menu a{

font-size:15px;

}


.mobile-btn{

width:100%;

text-align:center;

}

}
.logo{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.logo img{

    height:100px;

    width:auto;

    object-fit:contain;

    transition:.3s ease;

}

.logo img:hover{

    transform:scale(1.05);

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

@media(max-width:768px){

.site-header{

    height:80px;

}

.header-container{

    height:80px;

    padding:0 15px;

}


/* Logo Bigger */

.logo img{

    height:60px;

    width:auto;

    object-fit:contain;

}


/* Hamburger */

.hamburger{

    width:38px;

    height:38px;

}

.hamburger span{

    width:26px;

    height:2.5px;

}

.hamburger span:nth-child(1){

    top:10px;

}

.hamburger span:nth-child(2){

    top:17px;

}

.hamburger span:nth-child(3){

    top:24px;

}


/* Mobile Menu */

.nav-menu{

    top:80px;

    height:calc(100vh - 80px);

    padding:35px 25px;

}

}