/* =========================
   BY REEM - CANDLES DESIGN
   Luxury Handmade Style
========================= */


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



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



body{

    background:#fdfaf6;

    font-family:'Montserrat',sans-serif;

    color:#3d342d;

}



/* ================= NAVBAR ================= */


nav{

    width:100%;

    height:85px;

    background:#ffffff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 7%;

    border-bottom:1px solid #eee2d5;

}



.logo{

    font-family:'Playfair Display',serif;

    font-size:36px;

    color:#b38b4d;

}



nav ul{

    display:flex;

    gap:35px;

    list-style:none;

}



nav ul li a{

    text-decoration:none;

    color:#4a4038;

    font-size:15px;

    font-weight:500;

    transition:.3s;

}



nav ul li a:hover{

    color:#b38b4d;

}



/* ================= BANNER ================= */


.banner{

    height:380px;

    background:

    linear-gradient(
    rgba(250,240,225,.85),
    rgba(250,240,225,.85)
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

}



.banner h1{

    font-family:'Playfair Display',serif;

    font-size:65px;

    color:#4a392b;

    margin-bottom:20px;

}



.banner p{

    font-size:18px;

    color:#756556;

}



/* ================= PRODUCTS ================= */


.products{

    width:90%;

    max-width:1200px;

    margin:70px auto;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}





.product{

    background:white;

    border-radius:20px;

    padding:25px;

    text-align:center;

    box-shadow:

    0 15px 40px rgba(0,0,0,.07);

    transition:.4s;

}





.product:hover{

    transform:translateY(-12px);

}





/* IMAGE AREA */

.product img{

    width:100%;

    height:300px;

    object-fit:contain;

    display:block;

    margin:auto;

    border-radius:15px;

    background:#faf7f2;

}





/* PRODUCT TITLE */


.product h2{

    font-family:'Playfair Display',serif;

    font-size:28px;

    margin:20px 0 12px;

    color:#4a392b;

}





/* DESCRIPTION */


.description{

    font-size:14px;

    line-height:1.8;

    color:#777;

    min-height:90px;

}





/* PRICE */


.product h3{

    color:#b38b4d;

    font-size:25px;

    margin:20px;

    font-weight:600;

}





/* BUTTON */


button{

    background:#b38b4d;

    color:white;

    border:none;

    padding:13px 35px;

    border-radius:50px;

    font-size:14px;

    font-weight:500;

    cursor:pointer;

    transition:.3s;

}



button:hover{

    background:#8f6b36;

    transform:scale(1.05);

}





/* ================= FOOTER ================= */


footer{

    background:#2c2722;

    color:white;

    text-align:center;

    padding:35px;

    font-size:14px;

}





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


@media(max-width:768px){


nav{

    flex-direction:column;

    height:auto;

    padding:20px;

}



nav ul{

    margin-top:15px;

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

}



.logo{

    font-size:32px;

}



.banner h1{

    font-size:42px;

}



.products{

    width:95%;

}



.product img{

    height:250px;

}



}