* {
  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;

}



.main-nav a:hover {

  color:#b08a45;

}



.nav-divider {

  width:1px;

  height:18px;

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

}





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


.category-intro {

  text-align:center;

  padding:78px 20px 35px;

}



.category-intro h1 {

  margin:0;

  font-size:34px;

  font-weight:400;

  letter-spacing:0;

  color:#162033;

}



.category-intro p {

  margin:18px 0 25px;

  font-size:16px;

  color:#555;

}





/* ================================
   ORNAMENT
================================ */


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

  direction:ltr;

}



.domain-item {

  display:flex;

  align-items:center;

  min-height:58px;

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

  direction:ltr;

}



.domain-number {

  width:45px;

  flex-shrink:0;

  font-family:Arial,sans-serif;

  font-size:11px;

  letter-spacing:1px;

  color:#a3844d;

  text-align:left;

}



.domain-link {

  display:inline-block;

  padding:8px 12px;

  color:#162033;

  text-decoration:none;

  font-family:Arial,sans-serif;

  font-size:16px;

  letter-spacing:.4px;

  direction:ltr;

  text-align:left;

  border:1px solid transparent;

}



.domain-link:hover {

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

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

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

}



.modal.active {

  display:flex;

}



.modal-backdrop {

  position:absolute;

  inset:0;

}



.modal-content {

  position:relative;

  z-index:2;

}



.modal-content img {

  display:block;

  max-width:86vw;

  max-height:86vh;

  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;

  border:none;

  background:transparent;

  color:#fff;

  font-size:31px;

  cursor:pointer;

}





body.modal-open {

  overflow:hidden;

}





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


@media(max-width:650px){


.site-header{

 flex-direction:column;

 gap:20px;

}


.main-nav{

 flex-wrap:wrap;

 justify-content:center;

}


.domain-list{

 grid-template-columns:1fr;

 max-width:88%;

}



.category-intro h1{

 font-size:27px;

}


.domain-link{

 font-size:15px;

}


}