.discounted-courses-section {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--secondary);
  border-radius: 48px;
  padding: 48px;
  margin-top: 120px;
  margin-right: -48px;
  margin-left: -48px;
}
/* ================= SECTION BASE ================= */


/* ================= DEPTH OVERLAY ================= */
.discounted-courses-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0.35));

  pointer-events: none;
  z-index: 0;
}

/* ================= AMBIENT LIGHT ================= */
.discounted-courses-section::after {
  content: "";
  position: absolute;

  width: 500px;
  height: 500px;

  top: -120px;
  left: -120px;

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

  animation: ambientFloat 10s ease-in-out infinite;
}

@keyframes ambientFloat {

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

  50% {
    transform: translate(80px, 60px);
  }
}

/* ensure content above */
.discounted-courses-section>* {
  position: relative;
  z-index: 2;
}

/* ================= TEXT ENTRY ================= */
.discounted-courses-section h2,
.discounted-courses-section p {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUpDiscount 0.8s ease forwards;
}

.discounted-courses-section p {
  animation-delay: 0.2s;
}

@keyframes fadeUpDiscount {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= FLOATING ICON ================= */
.discounted-courses-section__floating-icon {
  position: absolute;
  z-index: 5;
  /* 🔥 FIX: always on top */
  pointer-events: none;

  width: 208px;
  height: 208px;
  top: -88px;
  right: 48px;

  animation: floatCoupon 6s ease-in-out infinite;
}

/* image styling */
.discounted-courses-section__floating-icon img {
  max-width: 100%;
  max-height: 100%;

  animation: rotateSlight 8s linear infinite;
  transform-origin: center;
}

/* floating motion */
@keyframes floatCoupon {

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

  25% {
    transform: translateY(-12px) rotate(1deg);
  }

  50% {
    transform: translateY(-18px) rotate(-1deg);
  }

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

/* subtle rotation */
@keyframes rotateSlight {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(2deg);
  }

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

/* glow behind icon */
.discounted-courses-section__floating-icon::before {
  content: "";
  position: absolute;
  inset: 0;

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

  z-index: -1;
  opacity: 0.6;

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

@keyframes pulseGlow {

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

  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

/* ================= CARD GRID ANIMATION ================= */
.discounted-courses-section .col-lg-3 {
  opacity: 0;
  transform: translateY(40px);
  animation: cardFadeUp 0.8s ease forwards;
}

/* stagger */
.discounted-courses-section .col-lg-3:nth-child(1) {
  animation-delay: 0.2s;
}

.discounted-courses-section .col-lg-3:nth-child(2) {
  animation-delay: 0.4s;
}

.discounted-courses-section .col-lg-3:nth-child(3) {
  animation-delay: 0.6s;
}

.discounted-courses-section .col-lg-3:nth-child(4) {
  animation-delay: 0.8s;
}

@keyframes cardFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= CARD HOVER ================= */
.discounted-courses-section .col-lg-3>* {
  transition: all 0.35s ease;
  position: relative;
}

.discounted-courses-section .col-lg-3>*:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* shine */
.discounted-courses-section .col-lg-3>*::after {
  content: "";
  position: absolute;
  inset: 0;

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

  opacity: 0;
  transition: 0.6s;
}

.discounted-courses-section .col-lg-3>*:hover::after {
  opacity: 1;
}

/* ================= CTA BUTTON ================= */
.btn-flip-effect {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-flip-effect:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
  .discounted-courses-section {
    height: auto;
    margin-right: -24px;
    margin-left: -24px;
    margin-top: 100px;
    padding: 48px 24px;
  }

  .discounted-courses-section__floating-icon {
    width: 104px;
    height: 104px;
    top: -60px;
  }
}

/* ================= SMOOTH ================= */
* {
  scroll-behavior: smooth;
}