@keyframes scroll_4013 {
    0% {
      transform: translateY(0%);
    }
  
    50% {
      transform: translateY(90%);
    }
  }
  .slide {
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .slide.active {
    opacity: 1;
    z-index: 10;
  }
  .slide:not(.active) {
    z-index: 0;
  }
  .fixed-text {
    font-size: clamp(1.6rem, 5vw,1.9rem); /* حداقل، حداکثر و اندازه متوسط */
    max-width: 90%;
    text-align: center;
    white-space: nowrap;
  }
  @media (max-height:321px) {
    .fixed-text {
      margin-top: -4.5rem !important;
    }
  }
  @media (max-height:321px) {
    .infobtn {
      margin-top: 2rem !important;
      margin-bottom: 4.5rem !important;
    }
  }
  /* مدیا کوئری برای تغییر سایز در صفحه‌های کوچک‌تر */
  @media (max-width: 768px) {
    .fixed-text {
      font-size: clamp(1.2rem, 4vw, 2.5rem); /* کنترل تغییرات در سایزهای کوچک‌تر */
      padding: 10px 20px; /* کاهش پدینگ */
    }
  }
  @media (max-width: 480px) {
    .fixed-text {
      font-size: clamp(1rem, 6vw, 1.4rem); /* کوچک‌تر شدن در گوشی‌های کوچک */
    }
  }
  html {
    scroll-behavior: smooth;
  }
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  .arrow {
    cursor: pointer;
    height: 60px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.1s;
    width: 50px;
  }
  .arrow-top, .arrow-bottom {
    background-color: #ffffff;
    height: 4px;
    position: absolute;
    top: 50%;
    width: 100%;
  }
  .arrow-top:after, .arrow-bottom:after {
    background-color: #ff0000;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.15s;
  }
  .arrow-top {
    transform: rotate(45deg);
    transform-origin: bottom right;
  }
  .arrow-top:after {
    left: 100%;
    right: 0;
    transition-delay: 0s;
  }
  .arrow-bottom {
    transform: rotate(-45deg);
    transform-origin: top right;
  }
  .arrow-bottom:after {
    left: 0;
    right: 100%;
    transition-delay: 0.15s;
  }
  .arrow:hover .arrow-top:after {
    left: 0;
    transition-delay: 0.15s;
  }
  .arrow:hover .arrow-bottom:after {
    right: 0;
    transition-delay: 0s;
  }
  .arrow:active {
    transform: translateY(-50%) scale(0.9);
  }
  .arrow {
    cursor: pointer;
    height: 60px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.1s;
    width: 50px;
  }
  .arrow-pt, .arrow-pb {
    background-color: #ffffff;
    height: 4px;
    position: absolute;
    top: 50%;
    width: 100%;
    right: 3rem;
  }
  .arrow-pt:after, .arrow-pb:after {
    background-color: #ff0000;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.15s;
  }
  .arrow-pt {
    transform: rotate(135deg);
    transform-origin: bottom right;
  }
  .arrow-pt:after {
    left: 100%;
    right: 0;
    transition-delay: 0s;
  }
  .arrow-pb {
    transform: rotate(-135deg);
    transform-origin: top right;
    margin-top: 4px;
  }
  .arrow-pb:after {
    left: 0;
    right: 100%;
    transition-delay: 0.15s;
  }
  .arrow:hover .arrow-pt:after {
    left: 0;
    transition-delay: 0.15s;
  }
  .arrow:hover .arrow-pb:after {
    right: 0;
    transition-delay: 0s;
  }
  .arrow:active {
    transform: translateY(-50%) scale(0.9);
  }
  @media (max-width: 640px) {
    .under640 {
    margin-bottom: -20px;
    }
  }
  @media (max-width: 640px) {
    .box-1 {
 font-size: 0.75rem;
    }
    .box-2{
      font-size: 1rem;
    }
  }
    .box-2 {
 line-height: 38px;
    }
    .box-3 {
      line-height: 31px;
      text-wrap: wrap;
         }
    @media (max-width: 1278px) {
      .box-2 {
      margin-bottom: 40px;
      font-size: 10rem;
      text-wrap: wrap;
      }
    }
    @media (max-width: 1330px) {
      .fr-box2 {
        font-size: 2vw;
      text-wrap:wrap;
      line-height: 30px;
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      }
    }
    @media (max-width: 1022px) {
      .box-10 {
      font-size: 5rem;
      text-wrap: wrap;
      line-height: 30px;
      }
    }
  .custom-box {
    position: relative;
    overflow: hidden; /* مخفی کردن اسکرول پیش‌فرض */
}
.custom-box {
  position: relative;
  overflow: hidden; /* مخفی کردن اسکرول پیش‌فرض */
}
.word-spacing{
  word-spacing: 4px; /* فاصله دلخواه بین کلمات */
}
.word-spacing-2{
  word-spacing: 4px; /* فاصله دلخواه بین کلمات */
}
@media (max-width: 365px) {
  .xs{
     font-size: 5vw;
     text-wrap: nowrap;
     margin-top: -40px;
  }
}
@media (max-width: 1022px) {
  .res{
     font-size: 5vw;
     text-wrap: nowrap;
  }
}
.outer {
  width: 40;
  height: auto;
  border-radius: 10px;
  position: relative;
  margin: 20px; /* فاصله بین باکس‌ها */
}
.card {
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 9px;
  border: solid 1px #202222;
  background-size: 20px 20px;
  background: radial-gradient(circle 280px at 0% 0%, #444444, #0c0d0d);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-direction: column;
  color: #fff;
}
.ray {
  width: 350px;
  height: auto;
  border-radius:200px;
  position: absolute;
  background-color: #c7c7c7;
  opacity: 0.4;
  box-shadow: 0 0 50px #fff;
  filter: blur(10px);
  transform-origin: 10%;
  top: 0%;
  left: 0;
  transform: rotate(40deg);
}
.card .text {
  font-weight: bolder;
  font-size: 1rem;
  height: auto;
  background: linear-gradient(50deg, #ffffff 4%, #fff, #ffffff);
  background-clip: text;
  color: transparent;
}
.card .text p {
  font-weight: bolder;
  font-size: 1rem;
  background: linear-gradient(180deg, #ffffff 4%, #fff, #dad9d9);
  background-clip: text;
  color: transparent;
  margin-bottom: 200px;
  margin-top: 10px;
}
.card .text h2 {
  font-weight: bolder;
  font-size: 1rem;
 background-color: #000000;
  background-clip: text;
  color: transparent;
  text-wrap: nowrap;
  margin-top: 10px;
}
.golden-button {
  margin-top: 2em;
  display: flex;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  border: none;
  border-radius: 0.3em;
  height: 3.5em;
  line-height: 2.5em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: -2em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
    inset 0 -2px 5px 1px rgba(139, 66, 8, 1),
    inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
  background-image: linear-gradient(
    160deg,
    #a54e07,
    #b47e11,
    #fef1a2,
    #bc881b,
    #a54e07
  );
  text-align: center;
  justify-content: center;
  justify-items: center;
  justify-self: center;
}
@media (max-width:1022px) {
  .card .text p {
    font-weight: bolder;
    font-size: 1rem;
    background: linear-gradient(180deg, #ffffff 4%, #fff, #dad9d9);
    background-clip: text;
    color: transparent;
    margin-bottom: 50px;
    margin-top: 0px;
  }
}
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(20px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* مطمئن شوید صفحه لودینگ بالای همه عناصر دیگر است */
}
.loader {
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: not-allowed;
scale: 0.8;
}
.central {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 10em;
height: 10em;
border-radius: 50%;
box-shadow: 0.5em 1em 1em blue,
  -0.5em 0.5em 1em lime,
  0.5em -0.5em 1em cyan,
  -0.5em -0.5em 1em yellow;
}
.external-shadow {
width: 10em;
height: 10em;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-shadow: 0.5em 0.5em 3em blue,
  -0.5em 0.5em 3em lime,
  0.5em -0.5em 3em cyan,
  -0.5em -0.5em 3em yellow;
z-index: 999;
animation: rotate 3s linear infinite;
background-color: #ffffff;
}
.intern {
position: absolute;
color: rgb(0, 0, 0);
font-size: 1.4rem;
z-index: 9999;
}
.intern::before {
content: "";
animation: percent 2s ease-in-out infinite;
}
@keyframes rotate {
0% {
  transform: rotate(0deg);
}
50% {
  transform: rotate(180deg);
}
100% {
  transform: rotate(360deg);
}
}
@keyframes percent {
0% {
  content: 'لطفا صبر کنید';
  text-wrap: nowrap;
}
}
@media (max-width: 640px) { /* تنظیمات برای موبایل */
  .hero-text h1 {
    font-size: 16px; /* کاهش سایز متن برای موبایل */
    line-height: 1; /* تنظیم فاصله بین خطوط */
   text-wrap:nowrap;
  }
}