@import url("../fonts/airplusIcon/airplusIcon.css");

body {
  direction: rtl;
  font-family: "IRANSansXFaNum";
}

/* Text Slider Fade */
.sliderText {
  width: 600px;
  height: 150px;
  margin: 10px auto;
  position: relative;
  font-size: 40px;
  text-align: center;
  color: black;
}

.sliderText .slide1,
.slide2,
.slide3,
.slide4 {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 20px;
}

.sliderText .slide1 {
  animation: fade 5s infinite;
  -webkit-animation: fade 5s infinite;
}

.sliderText .slide2 {
  animation: fade2 5s infinite;
  -webkit-animation: fade2 5s infinite;
}

.sliderText .slide3 {
  animation: fade3 5s infinite;
  -webkit-animation: fade3 5s infinite;
}

.sliderText .slide4 {
  animation: fade3 5s infinite;
  -webkit-animation: fade3 5s infinite;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  60% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fade2 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  45% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fade3 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  45% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  65% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fade4 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  60% {
    opacity: 0;
  }

  65% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  85% {
    opacity: 0;
  }
}

/* Text Slider Fade */

.extra-icon {
  visibility: hidden;
  border-radius: 50%;
}

.extra-link:hover .extra-icon {
  color: #111827;
  background-color: #fdfdfdc4;
  visibility: visible;
}

/* dot loader */
.dot-loader {
  border-radius: 50%;
  aspect-ratio: 1;
  animation: dotLoader 1s infinite linear alternate;
  background: var(--color1);
  box-shadow: var(--gap) 0 var(--color1), calc(-1 * var(--gap)) 0 var(--color2);
}

@keyframes dotLoader {
  0%   { box-shadow: var(--gap) 0 var(--color1), calc(-1 * var(--gap)) 0 var(--color2); background: var(--color1); }
  33%  { box-shadow: var(--gap) 0 var(--color1), calc(-1 * var(--gap)) 0 var(--color2); background: var(--color2); }
  66%  { box-shadow: var(--gap) 0 var(--color2), calc(-1 * var(--gap)) 0 var(--color1); background: var(--color2); }
  100% { box-shadow: var(--gap) 0 var(--color2), calc(-1 * var(--gap)) 0 var(--color1); background: var(--color1); }
}