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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Manrope',sans-serif;
    background:#F9F6F1;
    color:#4A3527;
}


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

nav{
    width:100%;
    padding:22px 9%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:fixed;
    top:0;
    left:0;
    background:rgba(249,246,241,.92);
    backdrop-filter:blur(12px);
    z-index:1000;
}

nav ul{
    display:flex;
    gap:35px;
    align-items:center;
    list-style:none;
}

nav a{
    text-decoration:none;
    color:#4A3527;
    font-weight:600;
    transition:.35s;
}

nav a:hover{
    color:#C8A96A;
}


/* =========================
   HOME
========================= */

.hero{
    min-height:100vh;

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

    text-align:center;

    padding:100px 20px 70px;

    background:#EDE7DA;
}

.hero-text{
    max-width:800px;

    animation:fade 1.4s ease;

    position:relative;
    z-index:2;
}


/* =========================
   BOBO
========================= */

.hero-bobo{
    width:360px;
    height:360px;

    object-fit:contain;

    display:block;

    margin:0 auto 20px;
}


/* =========================
   HOME TEXT
========================= */

.hero h1{
    font-family:'Cormorant Garamond',serif;

    font-size:85px;
    font-weight:600;

    margin-bottom:15px;
}

.hero p{
    font-size:20px;

    line-height:1.8;

    margin-bottom:45px;
}


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

.button{
    display:inline-block;

    padding:16px 42px;

    background:#C8A96A;

    color:white;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.4s;
}

.button:hover{
    background:#4A3527;

    transform:translateY(-5px);
}


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

@keyframes fade{

    from{
        opacity:0;
        transform:translateY(35px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =========================
   COLLECTION
========================= */

.collection{
    padding:100px 9%;

    text-align:center;

    background:#F9F6F1;

    scroll-margin-top:90px;
}

.collection h2{
    font-size:42px;

    margin-bottom:15px;

    font-family:'Cormorant Garamond',serif;
}

.collection-intro{
    max-width:600px;

    margin:auto;

    color:#7b6250;
}


/* =========================
   PRODUCT CARDS
========================= */

.products{
    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:20px;

    max-width:1400px;

    margin:60px auto 0;
}

.card{
    min-height:520px;

    padding:20px 28px 35px;

    border-radius:20px;

    transition:.3s;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

    color:inherit;
}

.card:hover{
    transform:translateY(-10px);
}

.card img{
    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:12px;

    margin-bottom:5px;
}

.card h3{
    margin-top:20px;

    font-size:24px;
}

.card p{
    line-height:1.7;

    margin:12px 0 18px;
}

.card strong{
    font-size:18px;

    font-weight:600;

    white-space:nowrap;

    margin-top:auto;
}

.view-details{
    margin-top:12px;

    font-size:14px;

    font-weight:600;
}


/* =========================
   SWEET WISP
========================= */

.sweet-wisp{
    background:#F3E8D5;

    color:#9A7048;
}

.sweet-wisp p{
    color:#9A7048;
}


/* =========================
   EBONY WIND
========================= */

.ebony-wind{
    background:#C9B8A6;

    color:#5A4030;
}

.ebony-wind p{
    color:#5A4030;
}


/* =========================
   DEW FALL
========================= */

.dew-fall{
    background:#DDE7E8;

    color:#55777C;
}

.dew-fall p{
    color:#55777C;
}


/* =========================
   JASMINE JAY
========================= */

.jasmine-jay{
    background:#D7E6D2;

    color:#587052;
}

.jasmine-jay p{
    color:#587052;
}


/* =========================
   UPCOMING RELEASES
========================= */

.upcoming{
    padding:120px 9%;

    background:#EDE7DA;

    text-align:center;

    scroll-margin-top:90px;
}

.upcoming h2{
    font-family:'Cormorant Garamond',serif;

    font-size:55px;

    font-weight:600;

    margin-bottom:60px;
}

.upcoming-products{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:35px;

    max-width:1250px;

    margin:0 auto;
}

.upcoming-card{
    min-height:500px;

    padding:25px 30px 40px;

    border-radius:24px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    transition:.3s;
}

.upcoming-card:hover{
    transform:translateY(-8px);
}

.upcoming-card img{
    width:100%;

    height:270px;

    object-fit:cover;

    border-radius:16px;

    margin-bottom:25px;
}

.upcoming-card h3{
    font-family:'Cormorant Garamond',serif;

    font-size:30px;

    margin-bottom:10px;
}

.upcoming-card p{
    line-height:1.7;

    margin-bottom:15px;
}

.upcoming-card strong{
    font-size:18px;

    font-weight:600;

    margin-top:auto;
}


/* =========================
   PETAL SHOW
========================= */

.petal-show{
    background:#EED9D8;

    color:#A35F68;
}

.petal-show p{
    color:#A35F68;
}


/* =========================
   LILAC LARK
========================= */

.lilac-lark{
    background:#E4DCEB;

    color:#74577F;
}

.lilac-lark p{
    color:#74577F;
}


/* =========================
   ROSETTA EMBER
========================= */

.rosetta-ember{
    background:#F0D4D2;

    color:#8A4F4B;
}

.rosetta-ember p{
    color:#8A4F4B;
}


/* =========================
   OUR STORY
========================= */

.story{
    padding:120px 20%;

    background:#F9F6F1;

    text-align:center;

    scroll-margin-top:90px;
}

.story-text{
    max-width:800px;

    margin:0 auto;
}

.story h2{
    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    font-weight:600;

    margin-bottom:50px;
}

.story h3{
    font-family:'Cormorant Garamond',serif;

    font-size:30px;

    font-weight:600;

    line-height:1.4;

    margin:50px 0 25px;
}

.story p{
    font-family:'Manrope',sans-serif;

    font-size:17px;

    line-height:2;

    color:#6f5a4b;

    margin-bottom:30px;
}

.story em{
    font-style:italic;
}


/* =========================
   CONTACT
========================= */

.contact{
    padding:120px 12%;

    background:#F9F6F1;

    text-align:left;

    scroll-margin-top:90px;
}

.contact h2{
    font-family:'Cormorant Garamond',serif;

    font-size:55px;

    font-weight:600;

    margin-bottom:20px;
}

.contact-intro{
    max-width:550px;

    font-size:17px;

    line-height:1.8;

    color:#6f5a4b;

    margin-bottom:45px;
}

.contact-details{
    display:block;
}

.contact-details p{
    margin:8px 0 30px;

    font-size:16px;

    color:#7b6250;
}

.contact-details strong{
    display:block;

    font-family:'Cormorant Garamond',serif;

    font-size:25px;

    font-weight:600;

    color:#4A3527;

    margin-bottom:5px;
}

.contact-details a{
    color:#5A4030;

    text-decoration:underline;

    text-underline-offset:4px;
}

.contact-details a:hover{
    color:#C8A96A;
}


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

@media(max-width:1100px){

    .products{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .upcoming-products{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


@media(max-width:600px){

    nav ul{
        gap:15px;

        flex-wrap:wrap;
    }

    nav{
        padding:18px 5%;
    }

    .hero{
        padding:110px 20px 70px;
    }

    .hero-bobo{
        width:300px;
        height:300px;
    }

    .hero h1{
        font-size:55px;
    }

    .hero p{
        font-size:17px;
    }

    .collection{
        padding:90px 6%;
    }

    .collection h2{
        font-size:38px;
    }

    .products{
        grid-template-columns:1fr;
    }

    .card{
        width:100%;
    }

    .story{
        padding:100px 10%;
    }

    .story h2{
        font-size:48px;
    }

    .upcoming{
        padding:90px 6%;
    }

    .upcoming h2{
        font-size:45px;
    }

    .upcoming-products{
        grid-template-columns:1fr;
    }

    .upcoming-card{
        width:100%;
    }

    .contact{
        padding:90px 10%;
    }

    .contact h2{
        font-size:48px;
    }
    /* =========================
   RESTORE BOBO SIZE
========================= */

.hero-bobo{
    width:360px !important;
    height:360px !important;
    max-width:360px !important;
    max-height:360px !important;
    object-fit:contain !important;
    display:block !important;
    margin:0 auto 20px !important;
}

}