@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;
  }
  }
  #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;
  }
  }
  
  
  
  
  .cards {
    width: 100%;
    height: 100%;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.527);
    text-align: center;
  }
  
  .cards p {
    font-size: 20px;
    color: #dad9d9;
  }
  
  .slider {
    width: 100%;
    height: var(--height);
    overflow: hidden;
  }
  .slider .list {
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
  }
  .slider .list .item {
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 60s linear infinite; /* تغییر مدت زمان به 30 ثانیه */
    transition: filter 0.5s;
    animation-delay: calc(
      (60s / var(--quantity)) * (var(--position) - 1) - 60s /* تغییر مدت زمان به 30 ثانیه */
    ) !important;
  }
  
  @keyframes autoRun {
    from {
      left: 100%;
    }
    to {
      left: calc(var(--width) * -1);
    }
  }
  
  .slider[reverse="true"] .item {
    animation: reversePlay 60s linear infinite; /* تغییر مدت زمان به 30 ثانیه */
  }
  
  @keyframes reversePlay {
    from {
      left: calc(var(--width) * -1);
    }
    to {
      left: 100%;
    }
  }
  
  
  
  /* From Uiverse.io by andreafortuna00 */ 
  .cardpr {
    max-width: 320px;
    display: flex;
    flex-direction: column;
    border-radius: 1.5rem;
    background-color: rgba(0, 0, 0, 1);
    padding: 1.5rem;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3);
  }
  
  .price {
    font-size: 3rem;
    line-height: 1;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
  }
  
  .listspr {
  
    display: flex;
    flex-direction: column;
    grid-row-gap: 0.75rem;
    row-gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgba(255, 255, 255, 1);
  }
  
  .listpr {
    display: flex;
    align-items: center;
  }
  
  .listpr svg {
    height: 1rem;
    width: 1rem;
  }
  
  .listpr span {
    margin-left: 1rem;
  }
  
  .action {
    margin-top: 2rem;
    width: 100%;
    border: 2px solid  rgba(255, 255, 255, 1);
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 1);
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    text-align: center;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 1);
    outline: none;
    text-decoration: none;
    transition: all .2s ease;
  }
  
  .action:hover {
    color: rgba(255, 255, 255, 1);
    background-color: transparent;
  }
  .pricebox{
    align-items: center;
    justify-content: center;
  }
  
  
  
  .timeline-container {
    min-height: 100vh;
    padding: 2em 0 4em 0;
    background: url('ax/1348.jpg') no-repeat center center;
    background-size: cover;
    padding: 50px 0;
    margin-top: 400px;
  }
  
  .timeline-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2em;
  }
  
  .timeline-header {
    text-align: center;
    margin-bottom: 3em;
  }
  
  h2 {
  
    font-weight: 900;
    font-size: 2.5em;
    color: #ffffff;
    letter-spacing: 0.02em;
  
    @media (min-width: 40em) {
      font-size: 4.75em;
    }
  }
  
  .timeline-subtitle {
  
    font-weight: 300;
    text-transform: uppercase;
    font-size: 1em;
    margin: 0.5em 0;
  }
  
  .timeline-list {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: 1em;
  
    &::before {
      content: "";
      position: absolute;
      left:5px;
      top: 0;
      bottom: 0;
      width: 5px;
      background: #ccc;
      animation: scaleVertical 3s 1s ease both;
    }
  
    .timeline-item {
      position: relative;
      margin-bottom: 3em;
      padding-left: 40px;
  
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: -10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #b4b4b4;
        border: 5px solid #000000;
        animation: revealScaleUp 0.75s ease both;
      }
  
      .timeline-content {
        background: rgba(255, 255, 255, 0.363);
        padding: 1.5em;
        border-radius: 10px;
        color: #000000;
        animation: revealFromLeft 0.5s ease both;
      }
    }
  }
  
  @keyframes scaleVertical {
    from {
      transform: scaleY(0);
    }
    to {
      transform: scaleY(1);
    }
  }
  
  @keyframes revealFromLeft {
    from {
      transform: translateX(-1em);
      opacity: 0;
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes revealScaleUp {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    50% {
      opacity: 1;
      transform: scale(1.3);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  
  
  /*/@media (max-height: 1330px) {
    .rs1 {
        margin-top:20px; /* کاهش سایز فونت برای نمایش بهتر */
    /*/}}/*/
    /*/@media (max-height: 1330px) {
      .rs2{
          margin-top:45px; /* کاهش سایز فونت برای نمایش بهتر */
     /*/ }}/*/