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

.btn-primary, .btn-outline{ display:inline-flex; align-items:center; justify-content:center; padding:18px 36px; border-radius:14px; text-decoration:none; font-weight:800; text-transform:uppercase; }
.btn-primary{ background:linear-gradient(180deg,#fef08a 0%,#eab308 100%); color:#0b0416; box-shadow: 0 8px 0 #854d0e, 0 15px 20px rgba(0,0,0,.35); }

body{
    font-family:'Plus Jakarta Sans',sans-serif;
    background:#0b0416;
    color:#fff;
    min-height:100vh;
}

/* NAV */


.logo-img {
    height: 48px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05);
}
.btn-gold{
    padding:12px 24px;
    background:linear-gradient(180deg,#fef08a,#eab308);
    color:#0b0416;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    text-decoration:none;
}


nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(11,4,22,.75);
    backdrop-filter:blur(20px);
    
}

.nav-inner{
    max-width:1200px;
    margin:auto;
    height:80px;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo-img{
    height:70px;
    width:auto;
    max-width:200px;
    object-fit:contain;
}

/* LINKS */
.nav-links{
    display:flex;
    gap:8px;
    padding:6px;
    border-radius:999px;
    background:rgba(255,255,255,.03);
    
}

.nav-links a{
    text-decoration:none;
    color:#fff;
    font-size:14px;
    padding:10px 18px;
    border-radius:999px;
    opacity:.75;
    transition:.3s;
}

.nav-links a:hover,
.nav-links a.active{
    opacity:1;
    background:rgba(255,255,255,.08);
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

/* BUTTONS */
.btn-goldmobile{
    padding:12px 24px;
    background:linear-gradient(180deg,#fef08a,#eab308);
    color:#0b0416;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    text-decoration:none;
}

.btn-primary{
    display:inline-block;
    padding:18px 36px;
    border-radius:14px;
    background:linear-gradient(180deg,#fef08a,#eab308);
    color:#0b0416;
    font-weight:800;
    text-transform:uppercase;
    text-decoration:none;
}

/* HAMBURGER */
.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:white;
    font-size:30px;
    cursor:pointer;
}

/* MOBILE MENU */
#mobileMenu{
    display:none;
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:25px;
    background:rgba(11,4,22,.97);
    backdrop-filter:blur(20px);
}
@media(max-width:768px){

    .nav-links,
    .desktop-btn{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .logo-img{
        height:40px;
    }

    .hero-container{
        padding:8rem 1.2rem 4rem;
    }

    .btn-primary{
        width:100%;
        text-align:center;
    }
    .nav-links a{
        text-align: white;
        font-family: 'Courier New', Courier, monospace;
        
    }
}




/* ================= HERO IMAGE SLIDER ================= */

.hero-slider{
    position:relative;
    min-height:100vh;
    overflow:hidden;
}


/* Images container */

.hero-slider::before,
.hero-slider::after{

    content:"";
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    animation:heroImages 18s infinite ease-in-out;

    z-index:0;
}


/* First image */

.hero-slider::before{

background-image:url(
'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?auto=format&fit=crop&q=90&w=2200'
);

}


/* Second layer */

.hero-slider::after{

background-image:url(
'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=90&w=2200'
);

animation-delay:9s;

opacity:0;

}





@keyframes heroImages{


0%{

opacity:0;
transform:scale(1);

}


10%{

opacity:1;

}


45%{

opacity:1;
transform:scale(1.08);

}



55%{

opacity:0;

}



100%{

opacity:0;

}


}






/* Mobile optimization */

@media(max-width:768px){


.hero-slider::before,
.hero-slider::after{

background-position:center;


}



}