@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;

  direction: rtl;

  background:
    radial-gradient(circle at 20% 20%, rgba(176,138,69,.035), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(22,32,51,.025), transparent 30%),
    #f3efe6;

  color: #162033;

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

}



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


.site-header {

  width: 100%;

  padding: 30px 6% 22px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 1px solid rgba(176,138,69,.55);

}



.brand {

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

  font-size: 17px;

  letter-spacing: 3px;

  color: #162033;

  white-space: nowrap;

  direction: ltr;

}



.main-nav {

  display: flex;

  align-items: center;

  gap: 30px;

}



.main-nav a {

  color: #162033;

  text-decoration: none;

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

  font-size: 14px;

  transition: color .25s ease;

}



.main-nav a:hover {

  color: #b08a45;

}




.nav-divider {

  width: 1px;

  height: 18px;

  background: rgba(176,138,69,.65);

}




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


.category-intro {

  text-align: center;

  padding: 78px 20px 35px;

}



.category-intro h1 {

  margin: 0;

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

  font-size: 34px;

  font-weight: 400;

  letter-spacing: 0;

  color: #162033;

}



.category-intro p {

  margin: 18px 0 25px;

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

  font-size: 16px;

  color: #555;

}




.ornament {

  width: 90px;

  height: 1px;

  background: #b08a45;

  margin: 0 auto;

  position: relative;

}



.ornament::before,
.ornament::after {

  content: "";

  position: absolute;

  top: -3px;

  width: 6px;

  height: 6px;

  border: 1px solid #b08a45;

  transform: rotate(45deg);

  background: #f3efe6;

}



.ornament::before {

  left: 18px;

}



.ornament::after {

  right: 18px;

}




/* ================================
   DOMAIN LIST
================================ */


.domain-list {

  width: 1120px;

  max-width: 88%;

  margin: 35px auto 100px;

  display: grid;

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

  column-gap: 80px;

  row-gap: 0;

}



.domain-item {

  display: flex;

  align-items: center;

  min-height: 58px;

  border-bottom: 1px solid rgba(176,138,69,.16);

}



.domain-number {

  width:45px;
  flex-shrink:0;

  direction:ltr !important;
  unicode-bidi:bidi-override !important;

  text-align:center;

  font-family:Arial,sans-serif;

  font-size:11px;

  letter-spacing:1px;

  color:#a3844d;

}



.domain-link {

  display: inline-block;

  padding: 8px 12px;

  color: #162033;

  text-decoration: none;

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

  font-size: 16px;

  letter-spacing: 0;

  border: 1px solid transparent;

  transition:

    border-color .25s ease,

    background .25s ease,

    color .25s ease;

}



.domain-link:hover {

  border-color: rgba(176,138,69,.55);

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

  color: #162033;

  cursor: pointer;

}




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


.modal {

  position: fixed;

  inset: 0;

  z-index: 1000;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 35px;

  background: rgba(12,18,29,.72);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

}



.modal.active {

  display: flex;

}



.modal-backdrop {

  position: absolute;

  inset: 0;

}



.modal-content {

  position: relative;

  z-index: 2;

  max-width: 90vw;

  max-height: 90vh;

  display: flex;

  align-items: center;

  justify-content: center;

}



.modal-content img {

  display: block;

  max-width: 86vw;

  max-height: 86vh;

  width: auto;

  height: auto;

  object-fit: contain;

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

  padding: 8px;

  background: #f3efe6;

}




/* ================================
   CLOSE BUTTON
================================ */


.modal-close {

  position: absolute;

  top: 24px;

  right: 30px;

  z-index: 3;

  width: 36px;

  height: 36px;

  border: none;

  background: transparent;

  color: #fff;

  font-family: Arial, sans-serif;

  font-size: 31px;

  font-weight: 300;

  line-height: 36px;

  cursor: pointer;

  opacity: .85;

}



.modal-close:hover {

  opacity: 1;

}




body.modal-open {

  overflow: hidden;

}


/* ================================
   PERSIAN PAGE DOMAIN DIRECTION FIX
================================ */

.domain-list {
  direction:ltr;
}


.domain-item {
  direction:ltr;
}


.domain-link {
  direction:ltr;
  text-align:left;
}


.domain-number {
  direction:ltr;
  text-align:left;
}


/* ================================
   TABLET
================================ */


@media (max-width: 900px) {


  .site-header {

    padding: 25px 5% 20px;

  }


  .brand {

    font-size: 14px;

    letter-spacing: 2px;

  }


  .main-nav {

    gap: 16px;

  }


  .main-nav a {

    font-size: 12px;

  }


  .domain-list {

    max-width: 90%;

    column-gap: 35px;

  }


}




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


@media (max-width: 650px) {


  .site-header {

    flex-direction: column;

    gap: 20px;

    text-align: center;

  }


  .main-nav {

    flex-wrap: wrap;

    justify-content: center;

    gap: 15px 22px;

  }


  .category-intro {

    padding-top: 55px;

  }


  .category-intro h1 {

    font-size: 27px;

  }


  .category-intro p {

    font-size: 14px;

  }


  .domain-list {

    grid-template-columns: 1fr;

    max-width: 88%;

  }


  .domain-item {

    min-height: 55px;

  }


  .domain-link {

    font-size: 15px;

  }


  .modal {

    padding: 15px;

  }


  .modal-content img {

    max-width: 92vw;

    max-height: 82vh;

  }


  .modal-close {

    top: 12px;

    right: 15px;

  }


}