/* ================= FREE ICON ANIMATION ================= */
.free-courses-section__cta-icon {
  min-width: 140px;
  width: 140px;
  height: 140px;

  position: relative;

  animation: bounceFloat 3s ease-in-out infinite;
}

/* main image */
.free-courses-section__cta-icon img {
  max-width: 100%;
  max-height: 100%;

  animation: rotatePop 4s ease-in-out infinite;
}
/* ================= FREE CTA BUTTON ================= */
.free-btn {
  position: relative;
  color: #fff;
  text-decoration: none;

  padding: 10px 18px;
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);

  transition: all 0.3s ease;
  overflow: hidden;
}

/* text */
.free-btn-text {
  position: relative;
  z-index: 2;
}

/* icon */
.free-btn .icons {
  transition: transform 0.3s ease;
}

/* hover effect */
.free-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.15);
}

/* arrow move */
.free-btn:hover .icons {
  transform: translateX(6px);
}

/* shine effect */
.free-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;

  background: linear-gradient(120deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);

  transition: 0.5s;
}

.free-btn:hover::after {
  left: 100%;
}

/* 🔥 bounce + float combo */
@keyframes bounceFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-10px);
  }

  50% {
    transform: translateY(-20px);
  }

  75% {
    transform: translateY(-10px);
  }
}

/* 🔥 playful rotation */
@keyframes rotatePop {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(6deg) scale(1.05);
  }

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

/* 🔥 glowing pulse */
.free-courses-section__cta-icon::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
  filter: blur(25px);

  z-index: -1;

  animation: pulseFree 2s ease-in-out infinite;
}

@keyframes pulseFree {

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

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}