@font-face {
  font-family: "jura";
  src: url("../font/jura/Jura-Regular.ttf");
  font-weight: normal;
  font-display: swap;
}
.jura {
  font-family: jura;
}

@font-face {
  font-family: "jura-bold";
  src: url("../font/jura/Jura-Bold.ttf");
  font-weight: normal;
  font-display: swap;
}
.jura-bold {
  font-family: jura-bold;
}
@font-face {
  font-family: "jura-light";
  src: url("../font/jura/Jura-Light.ttf");
  font-weight: normal;
  font-display: swap;
}
.jura-light {
  font-family: jura-light;
}
@font-face {
  font-family: "jura-medium";
  src: url("../font/jura/Jura-Medium.ttf");
  font-weight: normal;
  font-display: swap;
}
.jura-medium {
  font-family: jura-medium;
}
@font-face {
  font-family: "jura-semi-bold";
  src: url("../font/jura/Jura-SemiBold.ttf");
  font-weight: normal;
  font-display: swap;
}
.jura-semi-bold {
  font-family: jura-semi-bold;
}
/* yanonoe font*/
@font-face {
  font-family: "yanone";
  src: url("../font/yanone/Yanone-Regular.ttf");
  font-weight: normal;
  font-display: swap;
}
.yanone {
  font-family: yanone;
}
@font-face {
  font-family: "yanone-bold";
  src: url("../font/yanone/Yanone-Bold.ttf");
  font-weight: normal;
  font-display: swap;
}
.yanone-bold {
  font-family: yanone-bold;
}
@font-face {
  font-family: "yanone-extra-light";
  src: url("../font/yanone/Yanone-ExtraLight.ttf");
  font-weight: normal;
  font-display: swap;
}
.yanone-extra-light {
  font-family: yanone-extra-light;
}
@font-face {
  font-family: "yanone-light";
  src: url("../font/yanone/Yanone-Light.ttf");
  font-weight: normal;
  font-display: swap;
}
.yanone-light {
  font-family: yanone-light;
}
@font-face {
  font-family: "yanone-medium";
  src: url("../font/yanone/Yanone-Medium.ttf");
  font-weight: normal;
  font-display: swap;
}
.yanone-medium {
  font-family: yanone-medium;
}
@font-face {
  font-family: "yanone-semi-bold";
  src: url("../font/yanone/Yanone-SemiBold.ttf");
  font-weight: normal;
  font-display: swap;
}
.yanone-semi-bold {
  font-family: yanone-semi-bold;
}
@font-face {
  font-family: "Poppins";
  src: url("../font/popins/Poppins-Regular.ttf");
  font-weight: normal;
  font-display: swap;
}

.font-poppins {
  font-family: "Poppins";
}

/* SWIPER BUTTONS */
.hover-effect-btn {
  /* subtle 3D shadow */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.hover-effect-btn:hover {
  /* حرکت و برجستگی */
  transform: translateY(-2px) scale(1.03);
  /* سایه قوی‌تر برای حس عمق */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 10px 20px rgba(0, 0, 0, 0.2);
  /* optional subtle glow */
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.5);
}

/* SWIPER STYLES */
.swiper-pagination-bullet {
  background-color: #fff;
  width: 26px;
  border-radius: 60px;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  width: 53px;
}

.swiper .swiper-pagination {
  bottom: 0;
}
.arkaSwiper .swiper-pagination {
  text-align: right;
  padding-right: 15px;
}
.greenMoujSwiper .swiper-pagination {
  text-align: left;
  padding-left: 15px;
}
.gradient-border {
  --border-width: 2px;

  position: relative;
  background: #222;
  border-radius: 35px;

  &::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(
      60deg,
      hsl(224, 85%, 66%),
      hsl(269, 85%, 66%),
      hsl(314, 85%, 66%),
      hsl(359, 85%, 66%),
      hsl(44, 85%, 66%),
      hsl(89, 85%, 66%),
      hsl(134, 85%, 66%),
      hsl(179, 85%, 66%)
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: 35px;
    animation: moveGradient 4s alternate infinite;
  }
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}

/* CHANGE COLOR ANIMATION EFFECT */
#fade-text {
  white-space: pre-wrap;
}
#fade-text .char {
  display: inline;
}

/* scroll animation */
/* CSS */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* text animation */
.animate span:nth-of-type(2) {
  animation-delay: 0.05s;
}
.animate span:nth-of-type(3) {
  animation-delay: 0.1s;
}
.animate span:nth-of-type(4) {
  animation-delay: 0.15s;
}
.animate span:nth-of-type(5) {
  animation-delay: 0.2s;
}
.animate span:nth-of-type(6) {
  animation-delay: 0.25s;
}
.animate span:nth-of-type(7) {
  animation-delay: 0.3s;
}
.animate span:nth-of-type(8) {
  animation-delay: 0.35s;
}
.animate span:nth-of-type(9) {
  animation-delay: 0.4s;
}
.animate span:nth-of-type(10) {
  animation-delay: 0.45s;
}
.animate span:nth-of-type(11) {
  animation-delay: 0.5s;
}
.animate span:nth-of-type(12) {
  animation-delay: 0.55s;
}
.animate span:nth-of-type(13) {
  animation-delay: 0.6s;
}
.animate span:nth-of-type(14) {
  animation-delay: 0.65s;
}
.animate span:nth-of-type(15) {
  animation-delay: 0.7s;
}
.animate span:nth-of-type(16) {
  animation-delay: 0.75s;
}
.animate span:nth-of-type(17) {
  animation-delay: 0.8s;
}
.animate span:nth-of-type(18) {
  animation-delay: 0.85s;
}
.animate span:nth-of-type(19) {
  animation-delay: 0.9s;
}
.animate span:nth-of-type(20) {
  animation-delay: 0.95s;
}

/* Animation One */

.one span {
  color: #24a8e6;
  opacity: 0;
  transform: translate(-150px, -50px) rotate(-180deg) scale(3);
  animation: revolveScale 0.4s forwards;
}

@keyframes revolveScale {
  60% {
    transform: translate(20px, 20px) rotate(30deg) scale(0.3);
  }

  100% {
    transform: translate(0) rotate(0) scale(1);
    opacity: 1;
  }
}

/* Animation Two */

.two span {
  color: #a5cb21;
  opacity: 0;
  transform: translate(200px, -100px) scale(2);
  animation: ballDrop 0.3s forwards;
}

@keyframes ballDrop {
  60% {
    transform: translate(0, 20px) rotate(-180deg) scale(0.5);
  }

  100% {
    transform: translate(0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

/* Animation Three */

.three span {
  opacity: 0;
  transform: translate(-300px, 0) scale(0);
  animation: sideSlide 0.5s forwards;
}

@keyframes sideSlide {
  60% {
    transform: translate(20px, 0) scale(1);
  }

  80% {
    transform: translate(20px, 0) scale(1);
  }

  99% {
    transform: translate(0) scale(1.2);
  }

  100% {
    transform: translate(0) scale(1);
    opacity: 1;
  }
}

/* Animation Four */

.four span {
  color: #8d6a00;
  opacity: 0;
  transform: translate(0, -100px) rotate(360deg) scale(0);
  animation: revolveDrop 0.3s forwards;
}

@keyframes revolveDrop {
  30% {
    transform: translate(0, -50px) rotate(180deg) scale(1);
  }

  60% {
    transform: translate(0, 20px) scale(0.8) rotate(0deg);
  }

  100% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Animation Five */

.five span {
  color: #dd3f0f;
  opacity: 0;
  transform: translate(0, -100px) rotate(360deg) scale(0);
  animation: dropVanish 0.5s forwards;
}

@keyframes dropVanish {
  30% {
    transform: translate(0, -50px) rotate(180deg) scale(1);
  }

  50% {
    transform: translate(0, 20px) scale(0.8) rotate(0deg);
    opacity: 1;
  }

  80% {
    transform: translate(-100px, -100px) scale(1.5) rotate(-180deg);
    opacity: 0;
  }

  100% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Animation Six */

.six span {
  color: #ddb40f;
  opacity: 0;
  transform: rotate(-180deg) translate(150px, 0);
  animation: twister 0.5s forwards;
}

@keyframes twister {
  10% {
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) translate(0);
    opacity: 1;
  }
}

/* Animation Seven */

.seven span {
  color: #348c04;
  opacity: 0;
  transform: translate(-150px, 0) scale(0.3);
  animation: leftRight 0.5s forwards;
}

@keyframes leftRight {
  40% {
    transform: translate(50px, 0) scale(0.7);
    opacity: 1;
    color: #348c04;
  }

  60% {
    color: #0f40ba;
  }

  80% {
    transform: translate(0) scale(2);
    opacity: 0;
  }

  100% {
    transform: translate(0) scale(1);
    opacity: 1;
  }
}