/* Main Container - Assuming a dark background is on a parent element or body */
.visual-tabs-container {
  display: flex;
  background-color: none; /* Dark purple background - #3a2c5f - Adjust as needed */
  color: #FFF; /* Light text color */
  font-family: 'Arial', sans-serif; /* Or your preferred sans-serif font */
  padding: 40px; /* Example padding */
  border-radius: 10px; /* Optional rounded corners for the whole component */
  gap: 40px; /* Space between left navigation and right content area */
  max-width: 1200px; /* Adjust as needed */
  margin: 20px auto;
}

/* Left Navigation Column */
.visual-tabs-navigation {
  flex: 0 0 40%; /* Navigation takes about 40% of the width, adjust as needed */
  display: flex;
  flex-direction: column;
}

.visual-tab-item {
  cursor: pointer;
}

.visual-tab-header {
  display: flex;
  align-items: center;
  padding: 20px 0; /* Vertical padding for each header */
  transition: color 0.3s ease;
}

.visual-tab-item.active .visual-tab-header {
  color: #ffffff; /* Brighter white for active tab title */
}

.tab-number {
  font-size: 1em; /* Adjust size as needed */
  color: hsla(0, 0%, 100%, 0.25); /* Lighter purple for number */
  margin-right: 15px;
  font-weight: bold;
}

.visual-tab-item.active .tab-number, .visual-tab-item:hover .tab-number {
  color: #3caff2; /* Slightly brighter for active */
}

.tab-title {
  font-size: 1.25em; /* Adjust size as needed */
  font-weight: bold;
  flex-grow: 1; /* Allows title to take available space */
  margin: 0; /* Reset default h3 margin */
  color: hsla(0, 0%, 100%, 0.25);
}

.active .tab-title, .visual-tab-item:hover .tab-title {
  color: #fff;
}

.tab-chevron {
  margin-left: 15px;
  color: #a094c0; /* Chevron color */
  line-height: 1; /* Helps align SVGs better */
}

.visual-tab-item.active .tab-chevron .chevron-down {
  display: none;
}
.visual-tab-item.active .tab-chevron .chevron-up {
  display: inline-block !important; /* Override initial display:none */
}
.visual-tab-item:not(.active) .tab-chevron .chevron-up {
  display: none;
}
.visual-tab-item:not(.active) .tab-chevron .chevron-down {
  display: inline-block;
}


.visual-tab-details {
  display: none; /* Hidden by default */
  padding-left: calc(1em + 30px); /* Align with title (number width + margin) */
  padding-bottom: 20px;
  animation: fadeInDetails 0.4s ease-in-out;
}

.visual-tab-item.active .visual-tab-details {
  display: block;
}

.visual-tab-details p {
  font-size: 0.95em;
  line-height: 1.6;
  color: #fff; /* Slightly dimmer than active title */
  margin-bottom: 15px;
}

.learn-more-link {
  color: #bfa8ff; /* A brighter link color - Adjust to match image */
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9em;
  transition: color 0.3s ease;
}

.learn-more-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.tab-separator {
  border: none;
  height: 1px;
  background-color: #fff; /* Separator line color - Adjust */
  margin: 0;
}

/* Right Content (Image) Column */
.visual-tabs-content {
  flex: 1; /* Takes remaining space */
  display: flex; /* To center image or if multiple elements were here */
  align-items: center; /* Vertically center image if container has fixed height */
  justify-content: center; /* Horizontally center image */
  position: relative; /* For absolute positioning of panes if needed, but not strictly necessary here */
}

.visual-tab-pane {
  display: none;
  width: 100%;
  animation: fadeInContent 0.5s ease-in-out;
}

.visual-tab-pane.active {
  display: block;
}

.visual-tab-pane img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* Slight rounding as seen in the example image's content */
  /* box-shadow: 0 10px 25px rgba(0,0,0,0.3); Optional: if images have a shadow */
}

/* Animations */
@keyframes fadeInDetails {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInContent {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* Responsive Adjustments (Example) */
@media (max-width: 800px) {
  .visual-tabs-container {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }
  .visual-tabs-navigation {
    flex: 0 0 auto; /* Reset flex basis */
    width: 100%;
  }
  .visual-tabs-content {
    margin-top: 20px; /* Add some space when stacked */
  }
  .tab-title {
    font-size: 1.1em;
  }