@font-face {
  font-family: "IRANSansWeb";
  src: url("../fonts/IRANSansWeb.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IRANSansWeb";
  src: url("../fonts/IRANSansWeb_Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IRANSansWeb";
  src: url("../fonts/IRANSansWeb_Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IRANSansWeb";
  src: url("../fonts/IRANSansWeb_Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --list-container-bg: orange;
}

/* transition to left */
.ttl {
  transition: padding 0.3s ease;
}

.owl-dots {
  position: absolute;
  top: calc(100% - 40px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* استفاده در پروژه */

html {
  scroll-behavior: smooth;
}

body {
  font-family: "IRANSansWeb", tahoma;
}

a {
  transition: color 0.3s ease;
}

.desktop a {
  position: relative;
}

.desktop a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 4px;
  width: 0;
  margin: 0 auto;
  background-color: #fb7828;
  -webkit-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.sub-menu a::before {
  background-color: unset;
}

.desktop a:hover::before {
  width: 100%;
}

img {
  width: 100%;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

img:hover {
  opacity: 1;
}

.caption {
  color: #666;
}

.b1-content {
  position: absolute;
  bottom: -180px;
  transition: all 0.5s ease;
  background: linear-gradient(to bottom, transparent, #000);
}

.b1:hover .b1-content {
  bottom: 0;
}

.b2-content {
  position: absolute;
  bottom: 0;
  min-height: 10%;
  transition: min-height 0.5s ease, background 0.5s ease;
  text-align: center;
  background: linear-gradient(to bottom, rgba(2, 22, 81, 0), #021651);
}

.b2-content p {
  margin-top: 100px;
}

.b2-content small {
  padding-bottom: 50px;
}

.b2:hover .b2-content {
  min-height: 100%;
  background: rgba(2, 22, 81, 0.7);
}

.list-container {
  position: relative;
  overflow: hidden; /* اسکرول پیش‌فرض رو مخفی می‌کنیم */
  height: 450px;
}

/* محتوای قابل اسکرول */
.list-content {
  height: 100%;
  overflow-y: scroll;
  padding-right: 10px; /* برای جا دادن اسکرول سفارشی */
  box-sizing: content-box;
  scrollbar-width: none; /* مخفی کردن اسکرول پیش‌فرض در Firefox */
}
.list-content::-webkit-scrollbar {
  display: none; /* مخفی کردن اسکرول پیش‌فرض در Chrome/Safari/Edge */
}

.list-container::after {
  content: "";
  position: absolute;
  top: var(--scrollbar-top, 0);
  right: 0;
  width: 3px;
  height: var(--scrollbar-height, 0);
  background-color: var(--list-container-bg);
  border-radius: 3px;
  transition: height 0.1s linear, top 0.1s linear;
  pointer-events: none; /* برای جلوگیری از تداخل با رویدادهای ماوس */
}

.slice2 {
  border: 2px solid #dfdfdf;
  border-right: 0;
  position: relative;
  padding-top: 1rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.slice2 > a {
  position: absolute;
  top: -13px;
  background-color: #fff;
  padding-left: 1rem;
}

.gray img {
  filter: grayscale(60%);

  width: 90%;
  transition: all 0.3s ease;
}

.gray:hover img {
  filter: none;
}

.scroll-top-btn {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.scroll-top-btn.show {
  opacity: 1;
}

.mobile-menu {
  transition: height 0.5s ease;
}

.archive-items {
  transition: height 0.3s ease;
}

.copy-link-box.active {
  background-color: green;
  color: #fff;
}

.sub-menu {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.d-ostans,
.d-categories {
  display: none;
  top: calc(100% + 8px);
}

.has-sub:hover .d-ostans,
.has-sub:hover .d-categories {
  display: grid;
}

.m-ostans,
.m-categories {
  height: 0;
  transition: 0.3s ease;
}

.record {
  background-color: transparent;
}
.record.active {
  background-color: #f22;
  animation: recordanimate 2s infinite linear;
}

@keyframes recordanimate {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.footer-border {
  position: relative;
  border: none;
  font-size: 18px;
  text-align: right;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  border-bottom: 0;
  /* padding: 0 0 13px 0; */
  margin: 0 0 15px 0;
  max-width: 275px;
  /* width: 150px; */
  /* float: right; */
}

.footer-border::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 61px;
  height: 2px;
  background-color: var(--footer-bg-color);
}

.footer-border::after {
  content: "";
  position: absolute;
  right: 40px;
  bottom: 0;
  width: 61px;
  height: 2px;
  background-color: rgba(237, 28, 36, 0);
  width: 16px;
  border: 3px solid var(--footer-border-color);
  height: 10px;
  background-color: transparent;
  bottom: -3px;
  -webkit-animation: footerLine 7s linear infinite;
  animation: footerLine 7s linear infinite;
}

@keyframes footerLine {
  0% {
    right: 40px;
  }

  50% {
    right: 0;
  }

  100% {
    right: 40px;
  }
}



.online-text {
  font-weight: bold;
  color: rgb(255, 68, 68); /* سبز روشن */
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0% {
    text-shadow: 0 0 0px rgba(255, 68, 68, 0.0);
  }
  40% {
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.6),
                 0 0 16px rgba(255, 68, 68, 0.3),
                 0 0 24px rgba(255, 68, 68, 0.1);
  }
  100% {
    text-shadow: 0 0 0px rgba(255, 68, 68, 0.0);
  }
}