/* --- Tabbed Slideshow Section Styles --- */
.tab-section {
  background-color: #ffffff; /* Or a light background to differentiate */
  border-radius: 15px;
  border: 1.5px solid #e0e0e0; /* Thin gray border */
  padding: 8px;
  margin-top: 20px; /* Space from previous section */
}

.tabs-container {
  display: flex;
  justify-content: center; /* Center the tab buttons */
  flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
  margin-bottom: 20px;
  border-bottom: 2px solid #e0e0e0; /* Subtle line below tabs */
}

.tab-button {
  background-color: transparent;
  border: none;
  padding: 8px 12px; /* Adjusted padding for smaller buttons */
  font-size: 0.9em; /* Adjusted font size for smaller buttons */
  font-weight: 500;
  color: #757575;
  cursor: pointer;
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
  border-bottom: 2px solid transparent; /* Placeholder for active border */
  margin: 0 3px; /* Adjusted space between buttons */
  white-space: nowrap; /* Prevent tab text from wrapping */
}

.tab-button:hover,
.tab-button:focus {
  color: #000000;
}

.tab-button.active {
  color: #6e6eff; /* Purple for active tab */
  border-bottom-color: #6e6eff; /* Highlight active tab with a purple line */
  font-weight: 600; /* Make active tab bolder */
}

.tab-content-container {
  position: relative; /* Keep for stacking content and smooth transitions */
  /* Removed min-height from here to allow container to shrink to active content height */
}

.tab-content {
  /* Initial state: Hidden and collapsed */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(10px);
  padding: 10px; /* Inner padding for content */
  box-sizing: border-box; /* Ensure padding is included in max-height */

  /* IMPORTANT: Delay display: none when hiding, but apply display: block immediately when showing */
  /* This ensures the element is still in the flow during the fade/slide out,
     then removed after the transition. When showing, it becomes display: block
     immediately to allow the fade/slide in. */
  transition: transform 0.3s ease, max-height 0.3s ease;
  /* Add a delay for 'display' property when transitioning *out* */
  display: block; /* Default to block, will be hidden by opacity/max-height for inactive */
}

.tab-content:not(.active) {
  /* When not active, hide it completely after the transition */
  transition-delay: 0s, 0s, 0s, 0.5s; /* Delay for 'display' property */
  display: none;
}

.tab-content.active {
  /* Active state: Visible and expanded */
  opacity: 1;
  max-height: 1000px; /* Sufficiently large value to show all content */
  transform: translateY(0);
  display: block; /* Make sure it's block when active */
  transition-delay: 0s; /* No delay when becoming active */
}

.tab-content h3 {
  color: #34495e;
  margin-bottom: 15px;
}
/* --- End Tabbed Slideshow Section Styles --- */

/* --- Nested Media-Text Column Styles for Tab Content --- */
.tab-inner-media-text-column {
  display: flex;
  align-items: flex-start; /* Align items to the top */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  /* Removed margin-top: 15px; from here */
}

.tab-inner-media-text-column .tab-text {
  padding: 20px;
}

.tab-inner-media-text-column .media-column {
  flex: 1;
  min-width: 100px; /* Even smaller min-width */
  max-width: 200px; /* Max width to keep image reasonable size */
  height: 150px; /* Adjusted height for nested media column */
  background-color: #dde0f4;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #757575;
  font-style: italic;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
}

.tab-inner-media-text-column img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

/* text class for two column split */
.tab-inner-media-text-column .text-column {
  flex: 2;
  min-width: 200px; /* Ensure text column doesn't get too small */
}

/* Consistent margins for direct children within the text-column of tabbed sections */
.tab-inner-media-text-column .text-column > * {
  margin-top: 0; /* Remove default top margins */
  margin-bottom: 10px; /* Set a consistent bottom margin for all direct children */
}

/* Remove bottom margin for the very last child in the text-column */
.tab-inner-media-text-column .text-column > *:last-child {
  margin-bottom: 0;
}

/* Specific styling for ul within tab-inner-media-text-column to ensure consistent spacing */
.tab-inner-media-text-column .text-column ul {
  list-style-type: disc;
  padding-left: 20px; /* Adjust padding for nested lists within tabs */
  margin-top: 8px; /* Consistent margin above UL */
  margin-bottom: 8px; /* Consistent margin below UL */
}

/* Responsive adjustments for nested media-text-column */
@media (max-width: 600px) {
  /* Adjust breakpoint if needed */
  .tab-inner-media-text-column {
    flex-direction: column;
    align-items: center; /* Center when stacked */
  }
  .tab-inner-media-text-column .media-column,
  .tab-inner-media-text-column .text-column {
    flex: none;
    width: 100%;
    max-width: none; /* Remove max-width when stacked */
    min-width: unset;
  }
  .tab-inner-media-text-column .media-column {
    height: 120px; /* Further adjust height when stacked */
  }
}
/* --- End Nested Media-Text Column Styles --- */

.slideshow-container {
  max-width: 1200px;
  position: relative;
  margin: auto;
  background-color: #fff; /* White background for the slide container */
  overflow: hidden; /* Ensures image corners are rounded with container */
}

.mySlides {
  display: none;
}

.mySlides img {
  border-radius: 8px; /* Optional: if you want the image itself to have rounded corners */
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #a797ff; /* Changed to white for better contrast on purple arrows */
  font-weight: bold;
  font-size: 30px; /* Increased size for prominence */
  transition: 0.3s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: none; /* Light purple, similar to the image */
  opacity: 0.8; /* Slightly transparent */
  text-decoration: none; /* Remove underline for links */
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background with a little more opacity */
.prev:hover,
.next:hover {
  color: #6e6eff; /* Changed to white for better contrast on purple arrows */
  opacity: 1;
}

/* The dots/bullets/indicators */
.dot-container {
  display: flex; /* ADD THIS! */
  justify-content: center;
  margin: 10px auto; /* Added some vertical margin as well, for spacing */
  padding: 0; /* Remove default padding if any */
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px; /* Ensure sufficient space between dots */
  background-color: #e0e0e0;
  border-radius: 50%;
  display: inline-block; /* Keep this for individual dot properties */
  transition: background-color 0.6s ease;
}

.dot.active {
  background-color: #6e6eff; /* THIS IS THE CRITICAL COLOR */
}
.dot:hover {
  background-color: #9c9cff;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}