:root {
    --gold: #DDBB6A;
    --black: #0F0F0F;
    --cream: #F8F5EF;
}


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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    background: var(--black);
    color: var(--cream);
}


/* HEADER */

header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
}

header img{

    width:80px;

    transition:.4s;

}

header img:hover{

    transform:scale(1.08);

}


header a {
    color: var(--gold);
    text-decoration: none;
    border: 1px solid var(--gold);
    padding: 8px 15px;
    border-radius: 30px;
}


/* HERO */



.hero-content h1{

    font-size: clamp(3rem,8vw,6rem);
    letter-spacing:10px;
    color:var(--gold);
    text-transform:uppercase;

    text-shadow:
    0 0 15px rgba(212,175,55,.35);

}


.hero-content p{

    max-width:650px;

    margin:25px auto;

    line-height:1.8;

    font-size:1.15rem;

    color:#ddd;

}


.hero-content a{

    display:inline-block;

    padding:16px 38px;

    border-radius:40px;

    text-decoration:none;

    color:black;

    background:var(--gold);

    font-weight:bold;

    transition:.4s;

}


.hero-content a:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 35px rgba(212,175,55,.35);

}


/* COLLECTION */

section {
    padding: 80px 20px;
}


h2 {

    text-align:center;
    color:var(--gold);
    margin-bottom:40px;

}


.products {

    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));
    gap:35px;

}


/* PRODUCT CARD */

.product-card{

    background:#111;

    border-radius:25px;

    overflow:hidden;

    transition:.5s;

    border:1px solid rgba(212,175,55,.12);
    margin-bottom:20px;

}

.product-card:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.5);

}

.product-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.5s;

}


.product-card:hover img{

    transform:scale(1.05);

}


.product-info {

    padding:20px;

}


.product-info h3 {

    margin-bottom:10px;

}


.price {

    color:var(--gold);
    font-weight:bold;

}


.buy-btn {

    display:inline-block;
    margin-top:15px;
    padding:10px 20px;
    background:var(--gold);
    color:black;
    text-decoration:none;
    border-radius:25px;

}


/* FOOTER */

footer {

    text-align:center;
    padding:30px;
    background:#111;

}


/* MOBILE */

@media(max-width:600px){

.hero-content h1{

font-size:3rem;

}

}


/* SCROLL ANIMATION */

.product-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.product-card.show {
    opacity: 1;
    transform: translateY(0);
}


/* IMAGE LIGHTBOX */

.lightbox {

    display:none;
    position:fixed;
    z-index:2000;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);

    justify-content:center;
    align-items:center;

}


.lightbox img {

    max-width:90%;
    max-height:90%;
    border-radius:15px;

}


.lightbox.show {

    display:flex;

}


.close-lightbox {

    position:absolute;
    top:20px;
    right:30px;
    font-size:40px;
    color:white;
    cursor:pointer;

}


/* HERO ANIMATION */

.hero-content {

    animation: heroReveal 1.5s ease forwards;

}


@keyframes heroReveal {

    from {

        opacity:0;
        transform:translateY(40px);

    }


    to {

        opacity:1;
        transform:translateY(0);

    }

}


/* BUTTON EFFECT */

.hero-content a {

    transition:0.4s ease;

}


.hero-content a:hover {

    background:var(--gold);
    color:black;
    transform:scale(1.05);

}


/* FLOATING WHATSAPP */

.whatsapp-float {

    position:fixed;
    bottom:25px;
    right:25px;

    background:#25D366;
    color:white;

    width:60px;
    height:60px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:25px;

    text-decoration:none;

    z-index:1500;

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

}




/* ========= PREMIUM HERO ========= */

.hero{

    position:relative;

    height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

}


.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    animation:heroMove 18s ease-in-out infinite alternate;

}


.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.80)
    );

}


.hero-content{

    position:relative;

    z-index:2;

    text-align:center;

    padding:20px;

    animation:heroText 1.4s ease;

}


.hero-tag{

    color:var(--gold);

    letter-spacing:4px;

    font-size:.9rem;

    margin-bottom:15px;

}


@keyframes heroMove{

    0%{

        transform:
        scale(1)
        translateX(0);

    }

    100%{

        transform:
        scale(1.12)
        translateX(-20px);

    }

}


@keyframes heroText{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}




/******** COLLECTIONS ********/

.collections{

padding:80px 20px;

}


.collections h2{

text-align:center;
font-size:3rem;
margin-bottom:50px;
color:var(--gold);

}


.category-card{

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

border:1px solid rgba(212,175,55,.4);

border-radius:25px;

padding:40px 20px;

margin-bottom:40px;

text-align:center;

box-shadow:0 0 25px rgba(212,175,55,.15);

}


.category-card h3{

color:var(--gold);

font-size:2rem;

margin-bottom:15px;

letter-spacing:4px;

}


.category-card p{

margin-bottom:25px;

font-size:1.1rem;

}


.category-card button{

padding:15px 35px;

border:none;

border-radius:50px;

cursor:pointer;

font-size:1rem;

font-weight:bold;

background:var(--gold);

transition:.4s;

}


.category-card button:hover{

transform:translateY(-5px);

}


#products,
#perfumes,
#abayas{

display:none;
margin-top:30px;

}



#back-to-collections{

text-align:center;

padding:20px;

}


#back-to-collections a{

text-decoration:none;

padding:12px 25px;

border-radius:50px;

background:var(--gold);

color:black;

font-weight:bold;

transition:.3s;

}


#back-to-collections a:hover{

opacity:.9;

}


#products,
#perfumes,
#abayas{

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:35px;

}







.collections-float{

position:fixed;

left:25px;

bottom:25px;

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--gold);

color:black;

text-decoration:none;

font-size:30px;

font-weight:bold;

z-index:1500;

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

}





.category-image{

width:100%;

max-height:280px;

object-fit:cover;

border-radius:20px;

margin-bottom:25px;

transition:.4s;

}


.category-image:hover{

transform:scale(1.02);

}