/* Enhanced floating animations for icons only */

@keyframes floatHorizontal {

  0%,
  100% {
    transform: translateX(-8px) rotate(0deg);
  }

  25% {
    transform: translateX(8px) rotate(2deg);
  }

  50% {
    transform: translateX(24px) rotate(0deg);
  }

  75% {
    transform: translateX(8px) rotate(-2deg);
  }
}

@keyframes floatVertical {

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

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

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

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

@keyframes floatDiagonal {

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

  25% {
    transform: translate(10px, -10px) rotate(5deg);
  }

  50% {
    transform: translate(20px, -20px) rotate(0deg);
  }

  75% {
    transform: translate(10px, -10px) rotate(-5deg);
  }
}

@keyframes floatRotate {

  0%,
  100% {
    transform: translateX(-8px) rotate(-5deg);
  }

  50% {
    transform: translateX(24px) rotate(5deg);
  }
}

@keyframes floatBounce {

  0%,
  100% {
    transform: translateX(-8px) scale(1);
  }

  25% {
    transform: translateX(8px) scale(1.1);
  }

  50% {
    transform: translateX(24px) scale(1);
  }

  75% {
    transform: translateX(8px) scale(0.95);
  }
}

/* Main section - no changes */
.course-bundles-section {
  width: 100%;
  height: 840px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 160px 0 174px;
}

/* Statistics line - no changes */
.course-bundles-section__statistics-title .line {
  width: 2px;
  height: 20px;
  background-color: var(--primary);
}

/* Floating icon 1 - Enhanced with vertical float */
.course-bundles-section__floating-icon-1 {
  position: absolute;
  top: -72px;
  left: -88px;
  width: 72px;
  height: 88px;
  animation: floatVertical 4s ease-in-out infinite;
}

.course-bundles-section__floating-icon-1 img {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.3s ease;
}

/* Hover effect for icon 1 */
.course-bundles-section__floating-icon-1:hover img {
  transform: scale(1.15) rotate(5deg);
}

/* RTL support for icon 1 */
.rtl .course-bundles-section__floating-icon-1 {
  left: auto;
  right: 0;
  transform: translate(100%, -100%);
  animation: floatVertical 4s ease-in-out infinite reverse;
}

/* Floating icon 2 - Multiple animation options (choose one) */

/* Option 1: Horizontal with rotation (current enhanced) */
.course-bundles-section__floating-icon-2 {
  position: absolute;
  bottom: -104px;
  left: 40%;
  width: 208px;
  height: 208px;
  animation: floatRotate 3s ease-in-out infinite;
}

/* Option 2: Diagonal float - uncomment to use instead
.course-bundles-section__floating-icon-2 {
    position: absolute;
    bottom: -104px;
    left: 10%;
    width: 208px;
    height: 208px;
    animation: floatDiagonal 4s ease-in-out infinite;
}
*/

/* Option 3: Bounce effect - uncomment to use instead
.course-bundles-section__floating-icon-2 {
    position: absolute;
    bottom: -104px;
    left: 20%;
    width: 208px;
    height: 208px;
    animation: floatBounce 3.5s ease-in-out infinite;
}
*/

.course-bundles-section__floating-icon-2 img {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover effect for icon 2 */
.course-bundles-section__floating-icon-2:hover img {
  transform: scale(1.2) rotate(-8deg);
}

/* RTL support for icon 2 */
.rtl .course-bundles-section__floating-icon-2 {
  left: auto;
  right: 20%;
  animation: floatRotate 3s ease-in-out infinite reverse;
}

/* Responsive styles - only icon animations adjusted */
@media (max-width: 991px) {
  .course-bundles-section {
    height: auto;
    padding: 48px 0;
  }

  /* Mobile adjustments for icon 1 */
  .course-bundles-section__floating-icon-1 {
    top: -72px;
    left: 24px;
    animation: floatVertical 3.5s ease-in-out infinite;
  }

  .rtl .course-bundles-section__floating-icon-1 {
    left: auto;
    right: 24px;
  }

  /* Mobile adjustments for icon 2 */
  .course-bundles-section__floating-icon-2 {
    bottom: 0;
    left: auto;
    right: 16px;
    width: 104px;
    height: 104px;
    animation: floatRotate 2.5s ease-in-out infinite;
  }

  .rtl .course-bundles-section__floating-icon-2 {
    left: 16px;
    right: auto;
  }

  /* Faster animations on mobile */
  .course-bundles-section__floating-icon-1:hover img,
  .course-bundles-section__floating-icon-2:hover img {
    transform: scale(1.1) rotate(5deg);
  }
}





/* ==========================================================================
   FIX: PREVENT OVERFLOW & OVERLAPPING WITH OTHER SECTIONS
   ========================================================================== */

/* 1. Override the fixed 840px height so the section can grow */
.course-bundles-section {
  height: auto !important;
  min-height: 840px;
  padding-bottom: 80px !important;
  /* Adds breathing room before the next section */
  overflow: hidden;
  /* Prevents background elements from breaking out */
}

/* 2. Override the Bootstrap h-100 classes that trap the layout */
.course-bundles-section .container.h-100,
.course-bundles-section .row.h-100 {
  height: auto !important;
}

/* 3. Ensure the left-side text container doesn't force weird heights */
.course-bundles-section .col-lg-4.h-100 {
  height: auto !important;
  margin-bottom: 40px;
  /* Adds space between text and cards on mobile */
}/* Fix the overflow and overlap issue shown in {01C7A852-1EF8-459B-94B7-0FE755EC9833}.png */
.course-bundles-section {
  height: auto !important;
  min-height: auto !important;
  padding-bottom: 80px !important;
  /* Adds space before the orange bar */
}

/* Force Bootstrap h-100 classes to surrender their fixed height */
.course-bundles-section .h-100 {
  height: auto !important;
}

@media (max-width: 991px) {
  .course-bundles-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* Adds space between the top text ("Explore Bundles") and the cards on mobile */
  .course-bundles-section .col-lg-4 {
    margin-bottom: 32px !important;
  }
}