/* ==========================================
   HEADER V2.0
   HAMZA FIREPLACES
========================================== */


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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:var(--header-height);

    z-index:1000;

    background:transparent;

    transition:.4s ease;

}


/* ==========================================
   HEADER ON SCROLL
========================================== */

.header.scrolled{

    background:rgba(111,113,109,.95);

    backdrop-filter:blur(15px);

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

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

}

/* ==========================================
   LOGO SWAP ON SCROLL
========================================== */

.header.scrolled .logo-white{

    opacity:0;

}

.header.scrolled .logo-color{

    opacity:1;

}

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

.header .container{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


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

.logo{

    position: relative;

    display: flex;

    align-items: center;

    top: 6px;

}

.logo:hover{

    transform:scale(1.03);

}


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

.logo{

    position:relative;

    display:flex;

    align-items:center;

}

.logo img{

    transition:opacity .35s ease;
}

/* White logo (default) */

.logo-white{

    width:190px;

    height:auto;

    display:block;

    opacity:1;
}

/* Colored logo */

.logo-color{

    position:absolute;

    top:0;

    left:0;

    width:190px;

    height:auto;

    opacity:0;
}


/* ==========================================
   FLAME
========================================== */

.logo-flame{

    position:absolute;

    width:40px;

    left:82px;

    top:20px;

    z-index:5;

    pointer-events:none;

    transform-origin:center bottom;

    animation:flameFlicker 1.6s ease-in-out infinite;

}


/* ==========================================
   REALISTIC FLAME
========================================== */

@keyframes flameFlicker{

    0%{

        transform:
        translateY(0)
        scale(1)
        rotate(0deg);

        filter:
        drop-shadow(0 0 6px rgba(255,120,0,.7))
        drop-shadow(0 0 12px rgba(255,80,0,.4));

    }

    20%{

        transform:
        translateY(-1px)
        scale(1.04)
        rotate(-2deg);

    }

    40%{

        transform:
        translateY(-2px)
        scale(1.08)
        rotate(2deg);

        filter:
        drop-shadow(0 0 12px rgba(255,170,0,.9))
        drop-shadow(0 0 22px rgba(255,90,0,.7));

    }

    60%{

        transform:
        translateY(-1px)
        scale(.98)
        rotate(-1deg);

    }

    80%{

        transform:
        translateY(-2px)
        scale(1.06)
        rotate(1deg);

    }

    100%{

        transform:
        translateY(0)
        scale(1)
        rotate(0deg);

        filter:
        drop-shadow(0 0 6px rgba(255,120,0,.7))
        drop-shadow(0 0 12px rgba(255,80,0,.4));

    }

}


/* ==========================================
   DESKTOP NAVIGATION
========================================== */

.navbar{

    display:flex;

    align-items:center;

}

.nav-links{

    display:flex;

    align-items:center;

    gap:42px;

}

/* ==========================================
   DESKTOP NAVIGATION
========================================== */

.nav-links{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:42px;

}

.nav-links li{

    position:relative;

    list-style:none;

}


/* ==========================================
   NAVIGATION LINKS
========================================== */

.nav-links a{

    position:relative;

    display:inline-block;

    color:var(--white);

    font-size:16px;

    font-weight:500;

    letter-spacing:.3px;

    padding:8px 0;

    transition:var(--transition);

}


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

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--primary);

    border-radius:20px;

    transition:.35s ease;

}


/* ==========================================
   HOVER EFFECT
========================================== */

.nav-links a:hover{

    color:var(--primary);

}

.nav-links a:hover::after{

    width:100%;

}


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

.nav-links a.active{

    color:var(--primary);

}

.nav-links a.active::after{

    width:100%;

}

.nav-links .nav-cta{

    padding:11px 18px;

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

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

    color:var(--white);

    background:var(--primary);

}

.nav-links .nav-cta::after{

    display:none;

}

.nav-links .nav-cta:hover{

    color:var(--white);

    background:var(--primary-dark);

}


/* ==========================================
   HEADER AFTER SCROLL
========================================== */

.header.scrolled .nav-links a{

    color:var(--white);

}

.header.scrolled .nav-links a:hover{

    color:var(--primary);

}

.header.scrolled .nav-links a.active{

    color:var(--primary);

}


/* ==========================================
   DESKTOP NAVIGATION ANIMATION
========================================== */

.nav-links li{

    opacity:0;

    transform:translateY(-12px);

    animation:navFade .6s forwards;

}

.nav-links li:nth-child(1){ animation-delay:.10s; }
.nav-links li:nth-child(2){ animation-delay:.18s; }
.nav-links li:nth-child(3){ animation-delay:.26s; }
.nav-links li:nth-child(4){ animation-delay:.34s; }
.nav-links li:nth-child(5){ animation-delay:.42s; }
.nav-links li:nth-child(6){ animation-delay:.50s; }
.nav-links li:nth-child(7){ animation-delay:.58s; }


@keyframes navFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================
   MENU TOGGLE
========================================== */

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    background:transparent;

    border:none;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    z-index:2100;

}

.menu-toggle span{

    width:28px;

    height:3px;

    background:var(--white);

    border-radius:30px;

    transition:.35s ease;

}


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

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

    transform:translateY(9px) rotate(45deg);

}

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

    opacity:0;

}

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

    transform:translateY(-9px) rotate(-45deg);

}

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

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:340px;

    max-width:90%;

    height:100vh;

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

    backdrop-filter:blur(18px);

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

    z-index:2000;

    padding:110px 40px 50px;

    transition:right .45s ease;

    overflow-y:auto;

}

.mobile-menu.active{

    right:0;

}


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

.mobile-menu ul{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.mobile-menu li{

    list-style:none;

}


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

.mobile-menu a{

    display:block;

    color:var(--white);

    font-size:22px;

    font-weight:500;

    transition:var(--transition);

}

.mobile-menu a:hover{

    color:var(--primary);

    padding-left:12px;

}

.mobile-menu a.nav-cta{

    display:inline-block;

    padding:12px 18px;

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

    background:var(--primary);

    color:var(--white);

}

.mobile-menu a.nav-cta:hover{

    padding-left:18px;

    background:var(--primary-dark);

    color:var(--white);

}


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

.close-menu{

    position:absolute;

    top:25px;

    right:25px;

    width:45px;

    height:45px;

    border:none;

    background:none;

    color:var(--white);

    font-size:36px;

    cursor:pointer;

    transition:.3s;

}

.close-menu:hover{

    color:var(--primary);

    transform:rotate(90deg);

}


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

.menu-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:1900;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}


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

.mobile-menu li{

    opacity:0;

    transform:translateX(30px);

    transition:.35s ease;

}

.mobile-menu.active li{

    opacity:1;

    transform:translateX(0);

}

.mobile-menu.active li:nth-child(1){transition-delay:.10s;}
.mobile-menu.active li:nth-child(2){transition-delay:.16s;}
.mobile-menu.active li:nth-child(3){transition-delay:.22s;}
.mobile-menu.active li:nth-child(4){transition-delay:.28s;}
.mobile-menu.active li:nth-child(5){transition-delay:.34s;}
.mobile-menu.active li:nth-child(6){transition-delay:.40s;}
.mobile-menu.active li:nth-child(7){transition-delay:.46s;}


/* ==========================================
   TABLET & MOBILE
========================================== */

@media (max-width:992px){

    .navbar{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .header .container{

        justify-content:space-between;

    }

}


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

@media (max-width:576px){

    .mobile-menu{

        width:100%;

        max-width:100%;

        padding:100px 30px 40px;

    }

    .mobile-menu a{

        font-size:20px;

    }

}

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

/* Large Desktop */

@media (min-width:1400px){

    .header .container{

        max-width:1400px;

    }

    .nav-links{

        gap:52px;

    }

    .logo-base{

        width:205px;

    }

    .logo-flame{

        width:22px;

        left:93px;

        top:22px;

    }

}


/* Laptop */

@media (max-width:1200px){

    .nav-links{

        gap:34px;

    }

    .nav-links a{

        font-size:15px;

    }

    .logo-base{

        width:175px;

    }

    .logo-flame{

        width:19px;

        left:79px;

        top:20px;

    }

}


/* Tablet */

@media (max-width:992px){

    .header{

        height:90px;

    }

    .logo-base{

        width:165px;

    }

    .logo-flame{

        width:18px;

        left:74px;

        top:18px;

    }

}


/* Mobile */

@media (max-width:768px){

    .header{

        height:80px;

    }

    .logo{

        margin-left:-4px;

    }

    .logo-base{

        width:150px;

    }

    .logo-white,
    .logo-color{

        width:150px;
        height:auto;
        display:block;
        object-fit:contain;
        transform:translateX(-1px);
    }

    .logo-color{

        top:-6px;
    }

    .logo-flame{

        width:16px;

        left:67px;

        top:17px;

    }

}


/* Small Mobile */

@media (max-width:480px){

    .header{

        height:74px;

    }

    .logo{

        margin-left:-6px;

    }

    .logo-base{

        width:135px;

    }

    .logo-white,
    .logo-color{

        width:135px;
        height:auto;
        display:block;
        object-fit:contain;
        transform:translateX(-1px);
    }

    .logo-color{

        top:-6px;
    }

    .logo-flame{

        width:15px;

        left:60px;

        top:15px;

    }

}


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

.nav-links a:focus-visible,
.mobile-menu a:focus-visible,
.menu-toggle:focus-visible,
.close-menu:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:5px;

    border-radius:6px;

}


/* ==========================================
   SMOOTH TRANSITIONS
========================================== */

.header,
.logo,
.logo-base,
.logo-flame,
.nav-links a,
.menu-toggle span,
.mobile-menu,
.menu-overlay{

    transition:
        background-color .35s ease,
        color .35s ease,
        transform .35s ease,
        opacity .35s ease;

}


/* ==========================================
   REDUCE MOTION SUPPORT
========================================== */

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

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}