/* About Section Gap Fix
 * Fixes the spacing issues between left and right content in the About section
 */

/* Fix the container and layout */
.about-section .showcase-container {
  gap: 0 !important; /* Remove any gap between columns */
  align-items: stretch !important; /* Ensure both columns stretch to full height */
  margin: 0 auto !important; /* Ensure proper centering */
  padding: 0 15px !important; /* Add some padding to the container */
  max-width: 1320px !important; /* Match Bootstrap container max-width */
}

/* Adjust the grid and slider widths to ensure no gap */
.about-section .courses-grid,
.about-section .about-slider {
  width: 50% !important; /* Ensure each takes exactly half of the container */
  margin: 0 !important; /* Remove any margins that might cause gaps */
  border-radius: 16px !important; /* Keep consistent border radius */
}

/* Ensure the left content has proper padding */
.about-section .courses-grid {
  padding-right: 20px !important; /* Add padding on the right side */
}

/* Ensure the right slider has proper styling */
.about-section .about-slider {
  margin-left: 0 !important; /* Reset any left margin */
  padding-left: 0 !important; /* Reset any left padding */
  height: 100% !important; /* Ensure full height */
  display: flex !important; /* Use flexbox layout */
  flex-direction: column !important; /* Stack content vertically */
}

/* Ensure single image is properly sized and styled */
.about-carousel.single-image {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

.about-carousel.single-image .about-carousel-item {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

.about-carousel.single-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  transition: transform 15s ease-out !important;
}

/* Add an attractive zoom effect on hover */
.about-carousel.single-image:hover img {
  transform: scale(1.05) !important;
}

/* Make sure caption is visible but elegant */
.about-carousel.single-image .about-carousel-caption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 25px !important;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%) !important;
  color: white !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  z-index: 10 !important;
}

/* Mobile responsive fix */
@media (max-width: 991px) {
  .about-section .showcase-container {
    flex-direction: column !important;
  }
  
  .about-section .courses-grid,
  .about-section .about-slider {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
  }
}