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


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background:
    radial-gradient(
      circle at top,
      rgba(255,255,255,.75),
      rgba(245,241,232,.95)
    ),
    #f3efe6;

  color: #162033;

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


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


.site-header {

  width: 100%;

  padding: 28px 55px 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: rgba(248,245,238,.92);

}


.brand {

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

  font-size: 18px;

  letter-spacing: 2.5px;

  color: #162033;

}



.main-nav {

  display: flex;

  align-items: center;

  gap: 30px;

}



.main-nav a {

  text-decoration: none;

  color: #162033;

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

  font-size: 14px;

  letter-spacing: 0;

  transition: color .25s ease;

}



.main-nav a:hover {

  color: #b08a45;

}



.nav-divider {

  width: 1px;

  height: 18px;

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

}



/* =================================
   GOLD DIVIDER
================================= */


.gold-divider {

  width:100%;

  height:1px;

  background:#b08a45;

  opacity:.65;

}



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


.home-page {

  width:1250px;

  max-width:92%;

  margin:0 auto;

  padding:75px 0 100px;

}



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


.home-intro {

  text-align:center;

  margin-bottom:42px;

}



.home-intro h1 {

  margin:0;

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

  font-size:42px;

  font-weight:400;

  letter-spacing:3px;

  color:#162033;

}



.home-intro p {

  margin:20px 0 0;

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

  font-size:22px;

  color:#9a7a3d;

}



/* =================================
   SLIDESHOW
================================= */


.hero-slider {

  position:relative;

  width:100%;

  aspect-ratio:16 / 9;

  overflow:hidden;

  background:#ddd;

}



.hero-slide {

  position:absolute;

  inset:0;

  opacity:0;

  transition:opacity 1s ease;

  pointer-events:none;

}



.hero-slide.active {

  opacity:1;

}



.hero-slide img {

  width:100%;

  height:100%;

  display:block;

  object-fit:cover;

}



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


.enter-collection {

  text-align:center;

  margin-top:38px;

}



.enter-collection a {

  display:inline-block;

  padding:17px 38px;

  border:1px solid #b08a45;

  color:#9a7a3d;

  text-decoration:none;

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

  font-size:18px;

  letter-spacing:0;

  transition:
    background .25s ease,
    color .25s ease;

}



.enter-collection a:hover {

  background:#b08a45;

  color:#fff;

}



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


@media (max-width:800px) {


  .site-header {

    padding:22px 25px;

    flex-direction:column;

    gap:18px;

  }



  .brand {

    font-size:15px;

    text-align:center;

  }



  .main-nav {

    gap:18px;

    flex-wrap:wrap;

    justify-content:center;

  }



  .main-nav a {

    font-size:13px;

  }



  .home-page {

    max-width:92%;

    padding-top:55px;

  }



  .home-intro h1 {

    font-size:30px;

    letter-spacing:2px;

  }



  .home-intro p {

    font-size:18px;

  }



  .hero-slider {

    aspect-ratio:16 / 9;

  }



  .enter-collection a {

    font-size:17px;

    padding:15px 30px;

  }

}