/* =====================================
Luxury Lingerie Shop
CUUP Style CSS
===================================== */


*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{

font-family:

"Helvetica Neue",
Helvetica,
Arial,
sans-serif;


background:#faf8f5;


color:#222;


line-height:1.6;


}



img{

max-width:100%;

display:block;

}



a{

text-decoration:none;

color:inherit;

}







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


.header{


height:90px;


padding:0 60px;


display:flex;


align-items:center;


justify-content:space-between;


background:#fff;


border-bottom:1px solid #eee;


}



.logo{


font-size:22px;


letter-spacing:5px;


font-weight:300;


}



nav{


display:flex;


gap:40px;


}



nav a{


font-size:14px;


letter-spacing:2px;


text-transform:uppercase;


}









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


.hero{


position:relative;


height:85vh;


overflow:hidden;


}



.hero img{


width:100%;


height:100%;


object-fit:cover;


}



.hero-content{


position:absolute;


top:50%;


left:50%;


transform:
translate(-50%,-50%);


text-align:center;


color:white;


width:90%;


}



.hero-content h1{


font-size:60px;


font-weight:300;


letter-spacing:5px;


margin-bottom:20px;


}



.hero-content p{


font-size:20px;


margin-bottom:35px;


}



.hero-content a{


display:inline-block;


background:white;


padding:15px 45px;


letter-spacing:2px;


}









/* ==========================
ABOUT
========================== */


.about{


padding:100px 20px;


text-align:center;


background:#fff;


}



.about h2{


font-size:42px;


font-weight:300;


letter-spacing:3px;


margin-bottom:30px;


}



.about p{


max-width:700px;


margin:auto;


color:#777;


font-size:18px;


}









/* ==========================
PRODUCT GRID
========================== */


.collection{


padding:100px 60px;


}



.collection h2{


text-align:center;


font-size:42px;


font-weight:300;


margin-bottom:60px;


letter-spacing:3px;


}



.product-grid{


display:grid;


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


gap:35px;


}




.product-card{


background:white;


cursor:pointer;


transition:.3s;


}



.product-card:hover{


transform:translateY(-8px);


}




.product-card img{


width:100%;


aspect-ratio:3/4;


object-fit:cover;


}




.product-info{


padding:20px;


text-align:center;


}



.product-info h3{


font-weight:400;


font-size:18px;


letter-spacing:1px;


}



.product-info p{


color:#777;


margin-top:8px;


}









/* ==========================
MODAL
========================== */


.modal{


display:none;


position:fixed;


z-index:999;


left:0;


top:0;


width:100%;


height:100%;


background:

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


overflow:auto;


}




.modal-content{


background:white;


max-width:700px;


margin:50px auto;


padding:40px;


position:relative;


}



.close{


position:absolute;


right:25px;


top:15px;


font-size:35px;


cursor:pointer;


font-weight:200;


}



.detail-image{


width:100%;


max-height:600px;


object-fit:cover;


margin-bottom:30px;


}



.modal-content h2{


font-size:32px;


font-weight:300;


margin-bottom:10px;


}



#detail-price{


font-size:22px;


margin-bottom:20px;


}



#detail-description{


color:#666;


}









/* ==========================
MODEL
========================== */


.model-box{


display:flex;


gap:20px;


align-items:center;


margin:30px 0;


}



.model-avatar{


width:90px;


height:90px;


border-radius:50%;


object-fit:cover;


}



.model-box h3{


font-weight:400;


}



.model-box p{


color:#777;


}









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


.contact-buttons{


display:flex;


gap:15px;


margin-top:25px;


}



.contact-buttons a{


flex:1;


padding:15px;


text-align:center;


color:white;


letter-spacing:1px;


}



.whatsapp{


background:#25D366;


}



.messenger{


background:#0084FF;


}




.contact-buy{


width:100%;


margin-top:20px;


padding:18px;


border:none;


background:#111;


color:white;


font-size:15px;


letter-spacing:3px;


cursor:pointer;


}









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


footer{


padding:60px 20px;


text-align:center;


background:#111;


color:white;


letter-spacing:2px;


}









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


@media(max-width:900px){



.header{


padding:0 20px;


}



nav{


display:none;


}




.hero{


height:70vh;


}




.hero-content h1{


font-size:36px;


}



.product-grid{


grid-template-columns:
repeat(2,1fr);


gap:15px;


}




.collection{


padding:60px 20px;


}



}




@media(max-width:500px){



.product-grid{


grid-template-columns:1fr;


}



.modal-content{


margin:20px;


padding:25px;


}



}