@keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@font-face {
  font-family: "iransans";
  src: url("../../fonts/iransans/IRANSansX-bold.woff") format("woff"),
    url("../../fonts/iransans/IRANSansX-Regular.woff") format("woff"),
    url("../../fonts/iransans/IRANSansXV.woff2") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Estedlal";
  src: url("../../fonts/Estedad/Estedad-Medium.ttf") format("truetype"),
    url("../../fonts/Estedad/Estedad-ExtraBold.woff2") format("woff2"),
    url("../../fonts/Estedad/Estedad-Black.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Estedlal", "iransans", "iranyekan", serif;
  direction: rtl;
  
  color: var(--primary-color);
  background-color: #eeeeee;
}

html {
  scroll-behavior: smooth;
}
/*font-style*/

*::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 5px;
}

/*header-start*/

.bg-after-tow,
.bg-after {
  position: relative;
  z-index: 1;
}

.bg-after-tow::after,
.bg-after::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bg-after-tow::after {
  background-color: rgba(40, 40, 40, 0.55);
}
.bg-after::after {
  background-color: rgba(0, 29, 95, 0.4);
  opacity: 0.73;
}

.top-height {
  padding-bottom: 56.25%;
}

.header {
  z-index: 500;
}

.border-design {
  position: relative;
}
.border-design::after {
  content: "";
  position: absolute;
  top: -4px;
  inset-inline-start: 0;
  width: 30%;
  background: var(--blue-color);
  height: 4px;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--primary-color);
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 1.75rem;
  font-weight: bolder;
}

@media (min-width: 768px) {
  .top-height {
    padding-bottom: 26.25%;
  }
}
@media (min-width: 1024px) {
  .contain {
    width: 80% !important;
    margin: 0 auto;
  }
}

.h-fixed {
  background-attachment: fixed;
}

.top-header-add {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  max-width: 100%;
  margin: 0 auto;
  animation: slideInDown 0.6s;
  background: var(--primary-color);
}