/* ===========================
   RESET
=========================== */

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

html{
scroll-behavior:smooth;
}

body{

background:#0a0a0a;
color:#fff;
font-family:'Poppins',sans-serif;
overflow-x:hidden;

}

a{

text-decoration:none;
color:#fff;

}

img{

max-width:100%;
display:block;

}

/* ===========================
   ANNOUNCEMENT
=========================== */

.announcement{

height:36px;
display:flex;
justify-content:center;
align-items:center;
font-size:11px;
letter-spacing:2px;
background:#050505;
border-bottom:1px solid #1d1d1d;
color:#d8d8d8;

}

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

header{

width:100%;
height:85px;

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

padding:0 70px;

position:sticky;
top:0;

background:#0a0a0aee;
backdrop-filter:blur(10px);

border-bottom:1px solid #202020;

z-index:999;

}

.logo img{

width:65px;

}

nav{

display:flex;
gap:38px;

}

nav a{

font-size:12px;
letter-spacing:2px;
transition:.35s;

}

nav a:hover,
nav .active{

color:#d8c4a4;

}

.icons{

display:flex;
gap:22px;
font-size:18px;

}

.icons i{

cursor:pointer;
transition:.35s;

}

.icons i:hover{

color:#d8c4a4;

}

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

.hero{

min-height:92vh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

padding:60px 70px;

gap:40px;

}

.hero-logo{

width:180px;

margin-bottom:35px;

}

.hero-content h1{

font-family:'Cinzel',serif;

font-size:54px;

font-weight:500;

letter-spacing:6px;

line-height:70px;

margin-bottom:25px;

}

.hero-content p{

color:#bdbdbd;

font-size:15px;

line-height:30px;

max-width:480px;

margin-bottom:40px;

}

.hero-btn{

display:inline-flex;

align-items:center;

gap:12px;

padding:17px 34px;

border:1px solid #555;

transition:.35s;

letter-spacing:2px;

font-size:12px;

}

.hero-btn:hover{

background:#fff;

color:#000;

}

.hero-image{

display:flex;

justify-content:center;

}

.hero-image img{

width:520px;

animation:float 5s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}
/* ===========================
   COLLECTIONS
=========================== */

.collections{

padding:90px 70px;

display:grid;

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

gap:30px;

}

.collection{

background:#111;

border:1px solid #232323;

border-radius:18px;

padding:35px;

display:flex;

justify-content:space-between;

align-items:center;

transition:.35s;

overflow:hidden;

min-height:330px;

}

.collection:hover{

transform:translateY(-8px);

border-color:#666;

}

.collection-info span{

font-size:11px;

letter-spacing:3px;

color:#b8b8b8;

}

.collection-info h2{

font-family:'Cinzel',serif;

font-size:42px;

margin:18px 0;

}

.collection-info p{

color:#bdbdbd;

line-height:28px;

max-width:300px;

margin-bottom:30px;

}

.collection-info a{

display:inline-block;

padding:14px 28px;

border:1px solid #555;

letter-spacing:2px;

font-size:12px;

transition:.35s;

}

.collection-info a:hover{

background:#fff;

color:#000;

}

.collection-photo{

width:210px;

height:260px;

border-radius:16px;

background:linear-gradient(180deg,#333,#555);

}

.collection-photo.beige{

background:#d8c4a4;

}

/* ===========================
   BEST SELLERS
=========================== */

.best-sellers{

padding:20px 70px 90px;

}

.section-title{

margin-bottom:40px;

}

.section-title span{

font-size:11px;

letter-spacing:3px;

color:#bdbdbd;

}

.section-title h2{

font-family:'Cinzel',serif;

font-size:42px;

margin-top:10px;

}

.products{

display:grid;

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

gap:25px;

}

.product-card{

background:#111;

border:1px solid #232323;

border-radius:16px;

padding:18px;

transition:.35s;

}

.product-card:hover{

transform:translateY(-8px);

border-color:#666;

}

.product-image{

height:300px;

background:#1d1d1d;

border-radius:12px;

margin-bottom:20px;

}

.product-card h3{

font-size:18px;

margin-bottom:10px;

}

.product-card p{

color:#bdbdbd;

margin-bottom:20px;

}

.product-card a{

display:inline-block;

padding:12px 22px;

border:1px solid #555;

font-size:12px;

letter-spacing:2px;

transition:.35s;

}

.product-card a:hover{

background:#fff;

color:#000;

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

.about-home{

padding:90px 70px;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.about-text span{

font-size:11px;

letter-spacing:3px;

color:#bdbdbd;

}

.about-text h2{

font-family:'Cinzel',serif;

font-size:50px;

line-height:68px;

margin:20px 0;

}

.about-text p{

color:#bdbdbd;

line-height:30px;

max-width:520px;

margin-bottom:35px;

}

.about-text a{

display:inline-block;

padding:16px 34px;

border:1px solid #555;

letter-spacing:2px;

font-size:12px;

transition:.35s;

}

.about-text a:hover{

background:#fff;

color:#000;

}

.about-photo{

display:flex;

justify-content:center;

}

.about-photo img{

width:500px;

filter:drop-shadow(0 25px 60px rgba(0,0,0,.55));

}

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

footer{

margin-top:80px;

padding:70px;

border-top:1px solid #222;

display:flex;

flex-direction:column;

align-items:center;

gap:30px;

background:#080808;

}

.footer-logo{

display:flex;

flex-direction:column;

align-items:center;

}

.footer-logo img{

width:90px;

margin-bottom:20px;

}

.footer-logo p{

color:#bdbdbd;

}

.footer-links{

display:flex;

gap:35px;

}

.footer-links a{

letter-spacing:2px;

font-size:12px;

transition:.35s;

}

.footer-links a:hover{

color:#d8c4a4;

}

.copyright{

color:#777;

font-size:12px;

margin-top:15px;

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:1000px){

header{

padding:0 20px;

}

nav{

display:none;

}

.hero,
.collections,
.about-home{

grid-template-columns:1fr;

padding:40px 20px;

}

.hero-content{

text-align:center;

}

.hero-content p{

margin:auto auto 35px;

}

.hero-logo{

margin:0 auto 30px;

}

.hero-btn{

margin:auto;

}

.products{

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

}

.about-text{

text-align:center;

}

.about-photo img{

width:320px;

}

footer{

padding:50px 20px;

}

}

@media(max-width:650px){

.products{

grid-template-columns:1fr;

}

.collection{

flex-direction:column;

text-align:center;

gap:30px;

}

.hero h1{

font-size:34px;

line-height:48px;

}

.section-title h2,
.about-text h2{

font-size:32px;

line-height:45px;

}

.hero-image img{

width:290px;

}

.footer-links{

flex-direction:column;

gap:18px;

}

}
body{

opacity:0;

transition:.6s;

}

.show{

opacity:1 !important;

transform:translateY(0) !important;

}

.product-card,
.collection,
.box,
.contact-form,
.about-photo{

opacity:0;

transform:translateY(50px);

transition:1s;

}

.active-size{

background:#fff !important;

color:#000 !important;

border-color:#fff !important;

}

.active-filter{

background:#fff !important;

color:#000 !important;

}