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


* {
  box-sizing:border-box;
}


body {

  margin:0;
  padding:0;

  direction:rtl;

  background:#f4f0e8;

  color:#101827;

  font-family:"Vazirmatn", Tahoma, Arial, sans-serif;

}



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


.site-header {

  width:100%;

  padding:28px 5vw;

  display:flex;

  align-items:center;

  justify-content:space-between;

  border-bottom:1px solid rgba(154,122,61,.25);

}



.brand {

  font-family:Georgia,"Times New Roman",serif;

  font-size:15px;

  letter-spacing:.16em;

  direction:ltr;

}



.main-nav {

  display:flex;

  align-items:center;

  gap:26px;

}



.main-nav a {

  text-decoration:none;

  color:#101827;

  font-family:"Vazirmatn", Tahoma, Arial, sans-serif;

  font-size:14px;

}



.main-nav a:hover {

  color:#9a7a3d;

}



.nav-divider {

  width:1px;

  height:16px;

  background:rgba(154,122,61,.5);

}



/* =================================
   INTRO
================================= */


.collection-intro {

  text-align:center;

  padding:90px 20px 55px;

}



.collection-intro h1 {

  font-family:Georgia,"Times New Roman",serif;

  font-size:52px;

  font-weight:500;

  margin:0;

}



.collection-intro p {

  margin-top:25px;

  color:#9a7a3d;

  font-family:"Vazirmatn", Tahoma, Arial, sans-serif;

  font-size:20px;

}





/* =================================
   LUXURY COLLECTION GRID
================================= */


.collection-sections {

  width:1250px;

  max-width:92%;

  margin:80px auto 120px;


  display:grid;

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

  gap:35px;

}





.collection-item {

  position:relative;

  text-align:center;

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

  border:1px solid rgba(176,138,69,.35);

  padding:12px 12px 18px;

  text-decoration:none;

  color:inherit;

  transition:

  transform .35s ease,

  border-color .35s ease;

}



.collection-item:hover {

  transform:translateY(-6px);

  border-color:#b08a45;

}





.collection-item::before,
.collection-item::after {

  content:"";

  position:absolute;

  width:35px;

  height:35px;

  border-color:#b08a45;

}



.collection-item::before {

  top:-1px;

  left:-1px;

  border-top:1px solid;

  border-left:1px solid;

}



.collection-item::after {

  bottom:-1px;

  right:-1px;

  border-bottom:1px solid;

  border-right:1px solid;

}





.collection-item img {

  width:100%;

  aspect-ratio:16 / 9;

  object-fit:cover;

  display:block;

}





.collection-item h2 {

  margin:22px 0 12px;

  font-family:"Vazirmatn", Tahoma, Arial, sans-serif;

  font-size:23px;

  font-weight:400;

  color:#162033;

}





.gold-line {

  width:45px;

  height:1px;

  background:#b08a45;

  margin:0 auto 10px;

}





.collection-item p {

  margin:0;

  font-family:"Vazirmatn", Tahoma, Arial, sans-serif;

  font-size:14px;

  color:#444;

}





.collection-item:last-child {

  grid-column:2;

}





@media(max-width:900px){


.collection-sections {

  grid-template-columns:1fr;

}



.collection-item:last-child {

  grid-column:auto;

}


}




@media(max-width:700px){


.site-header {

  flex-direction:column;

  gap:18px;

}



.main-nav {

  flex-wrap:wrap;

  justify-content:center;

}



.collection-intro h1 {

  font-size:36px;

}



.collection-item h2 {

  font-size:20px;

}


}