/* for smooth scrolling when jumping to section in page */
html {
  scroll-behavior: smooth;
  overflow-y: scroll; /* <-- ADD THIS LINE */
}

/* general styles */
* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  font-family: "Geist", "Helvetica", sans-serif;
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  color: #404040; /* Base text color */
  font-size: 17px; /* base em */
  font-weight: 300;
  line-height: 1.4; /* Standardized line height for all paragraphs */
}

body.fade-in {
  opacity: 1;
}
/* General paragraph styling */
p {
  color: #404040; /* Standardized text color for all paragraphs */
}

/* More specific paragraph styling for content columns to ensure margin-bottom */
.main-content-column p {
  margin-bottom: 12px; /* Ensures this margin is applied within content columns */
}

/* Heading styles for main content */
.one-column-layout .main-content-column h1,
.two-column-layout .main-content-column h1 {
  font-size: 3.5em; /* Adjusted from 3.2em (3.2 * 20px = 64px, now 4 * 16px = 64px) */
  font-weight: 700;
  color: #6e6eff;
}

.one-column-layout .main-content-column h2,
.two-column-layout .main-content-column h2 {
  font-size: 2.5em; /* Adjusted from 2.4em (2.4 * 20px = 48px, now 3 * 16px = 48px) */
  font-weight: 600;
  color: #34495e;
  margin-bottom: 8px; /* Ensures this margin is applied within content columns */
}

.one-column-layout .main-content-column h3,
.two-column-layout .main-content-column h3 {
  font-size: 1.5em;
  font-weight: 500;
  color: #757575;
  line-height: 1.3;
  margin-bottom: 8px; /* Ensures this margin is applied within content columns */
}

.one-column-layout .main-content-column h4,
.two-column-layout .main-content-column h4 {
  font-size: 1.1em;
  font-weight: 600;
  color: #404040;
  line-height: 1.3;
  margin-bottom: 2px; /* Ensures this margin is applied within content columns */
}

/* Layout Styles */
.main-content {
  padding: 10px 150px 0 0; /* Removed top padding, added bottom padding */
  max-width: 1200px;
  margin: 40px auto 0; /* Added top margin to move content down, removed bottom margin*/
  display: flex;
  gap: 20px;
}

/* Added margin-bottom to sections for spacing */
.main-content-column section {
  margin-bottom: 40px; /* Adjust as needed for desired spacing */
}

.main-content-column .subsection {
  margin-bottom: 20px; /* Adjust as needed for desired spacing */
}

.main-content-column ul {
  list-style-type: disc; /* Use disc bullets for unordered lists */
  padding-left: 40px; /* Indent unordered lists */
  padding-right: 100px; /* Indent unordered lists */
  margin-bottom: 8px; /* Space below lists */
}

.main-content-column ol {
  list-style-type: decimal; /* Use decimal numbers for ordered lists */
  padding-left: 40px; /* Indent unordered lists */
  margin-bottom: 8px; /* Space below lists */
}

/* One column layout */
.one-column-layout .main-content-column {
  flex: 1;
}

/* Two column layout */
.two-column-layout {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* Changed from space-between to flex-start */
}

.two-column-layout .main-content-column {
  flex: 3; /* Takes up 4/5 of the available space */
  margin-left: 20px; /* Added margin-left to main content */
}

/* --- New Content Two Column Layout (Image/Animation & Text) --- */
.media-text-column {
  display: flex;
  flex-direction: row; /* Default to image on left, text on right */
  gap: 16px; /* Space between media and text */
  align-items: center; /* Vertically center items */
  margin-bottom: 20px; /* Space below this section */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.media-text-column.reversed {
  flex-direction: row-reverse; /* For text on left, image on right */
}

.media-column {
  flex: 1; /* Allow media column to take available space */
  min-width: 300px; /* Minimum width before wrapping */
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #757575;
  font-style: italic;
  text-align: center;
  overflow: hidden; /* Ensure content respects border-radius */
  box-sizing: border-box; /* Include padding/border in total width */
}

/* Ensure lottie-interactive elements also respect rounded corners */
.media-column lottie-interactive {
  border-radius: 10px; /* Apply the desired border-radius directly */
  overflow: hidden; /* Crucial for clipping the content within the rounded corners */
  display: block; /* Ensures it behaves like a block element for sizing */
  width: 250px; /* Take full width of its container */
  height: 250px; /* Take full height of its container */
  cursor: pointer;
}

.media-column img,
.media-column video,
.media-column canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Or 'cover' depending on desired crop */
  border-radius: inherit; /* Inherit rounded corners from parent */
}

.media-column .mri-image {
  width: 500px;
}

.text-column {
  flex: 2; /* Allow text column to take more space (e.g., 2/3 of available space) */
  min-width: 300px; /* Minimum width before wrapping */
  box-sizing: border-box; /* Include padding/border in total width */
}

.text-column h4 {
  margin-top: 0; /* Remove top margin if it's the first element */
  font-weight: 600;
}

/* Responsive adjustments for content two-column layout */
@media (max-width: 768px) {
  .media-text-column {
    flex-direction: column; /* Stack columns vertically on smaller screens */
    align-items: flex-start; /* Align stacked content to the left */
    gap: 20px; /* Reduce gap when stacked */
  }

  .media-text-column.reversed {
    flex-direction: column; /* Still stack columns vertically, reverse order doesn't apply as visually */
  }

  .media-column,
  .text-column {
    flex: none; /* Reset flex properties when stacked */
    width: 100%; /* Take full width when stacked */
    min-width: unset; /* Remove min-width restriction when stacked */
  }

  .media-column {
    height: 250px; /* Adjust height for smaller screens */
  }
}
/* --- End New Content Two Column Layout --- */

/* --- New Content Two Column Layout (Text same size) --- */
.two-column-flex-layout {
  display: flex; /* Makes the direct children flex items */
  gap: 30px; /* Space between the columns (flex items) */
  max-width: 900px; /* Example max-width for the entire block */
  margin: 0 auto; /* Center the block */
  padding: 20px;
  align-items: flex-start; /* Aligns items to the top of the container */
  /* flex-wrap: wrap; Optionally allows columns to wrap onto a new line if screen is too small */
}

.column-left,
.column-right {
  flex: 1; /* Each column takes equal available space */
  /* You can use specific widths too: flex: 0 0 45%; for fixed width */
  /* Or make one wider: .column-left { flex: 2; } .column-right { flex: 1; } */
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
  .two-column-flex-layout {
    flex-direction: column; /* Stack columns vertically on smaller screens */
    gap: 20px; /* Adjust gap when stacked */
  }

  .column-left,
  .column-right {
    width: 100%; /* Make them take full width when stacked */
    flex: none; /* Remove flex sizing when stacked */
  }
}

/* --- End Two Column Layout (Text same size) --- */

.hyperlink {
  color: #404040; /* Purple color for links */
  text-decoration: underline; /* Remove underline */
  transition: color 0.3s ease; /* Smooth color transition */
}
.hyperlink:hover {
  color: #6e6eff; /* Darker purple on hover */
}

/* navigation box */
header {
  color: #757575;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.5;
  display: flex;
  justify-content: center; /* Center the .header-inner container */
  align-items: center;
  padding: 0; /* No padding on header itself */
  flex-wrap: wrap; /* Allows header to wrap if content inside overflows */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* --- Make it Sticky --- */
  position: sticky; /* Changed from relative to sticky */
  top: 0; /* Stick to the very top */
  width: 100%; /* Ensure it spans full width when sticky */
  z-index: 100; /* Higher than TOC (z-index: 10) to be on top */
  background-color: #ffffff; /* Explicit background for when it scrolls over content */
  /* --- End Sticky --- */
  box-sizing: border-box; /* Good practice */
}

/* New container for centering the content */
.header-inner {
  display: flex; /* Keep flexbox for logo and nav-links */
  justify-content: space-between; /* Space them out */
  align-items: center;
  max-width: 1200px; /* **This centers your content** */
  width: 100%; /* Allows it to shrink on smaller screens */
  padding: 16px 20px; /* Add desired padding inside this container */
  box-sizing: border-box; /* Include padding in width */
}

header::after {
  /* This remains untouched, tied to the full-width header */
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #edf0ff;
}

header .logo {
  margin-right: auto;
  margin-left: 0; /* Remove fixed left margin */
}
header .nav-links {
  margin-left: auto;
  margin-right: 0; /* Remove fixed right margin */
}

/* No change needed for this part, as it relates to internal dropdown styles */
.dropdown-main-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}

/* Responsive adjustments for the inner header content */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: column; /* Stack columns vertically on smaller screens */
    align-items: flex-start; /* Align stacked content to the left */
    padding: 16px 20px; /* Ensure padding on mobile */
  }
  header .nav-links {
    margin-left: 0;
    margin-right: 0;
    width: 100%; /* Ensure nav-links take full width on mobile */
  }

  header {
    position: relative; /* Overrides the sticky position on mobile */
    box-shadow: none; /* Optional: Remove the shadow to make it feel less "stuck" */
  }
}

.logo img {
  height: 48px;
  width: auto; /* Maintain aspect ratio */
  display: block;
}

.dropdown-main-menu > li {
  position: relative; /* Crucial for positioning the submenu */
}

.dropdown-main-menu > li > a {
  display: block;
  color: #757575;
  text-align: center;
  padding: 16px 36px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.dropdown-main-menu > li > a:hover,
.dropdown-main-menu > li > a:focus {
  /* Added :focus for accessibility */
  color: #000000;
}

/* Show the submenu when hovering over the parent li */
.dropdown-main-menu > li:hover > .submenu,
.dropdown-main-menu > li:focus-within > .submenu {
  /* added focus-within */
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.dropdown-main-menu > li.active > a {
  color: #6e6eff; /* Highlight color for active page -  purple */
}

/* Specific rule to override active state on hover */
.dropdown-main-menu > li.active > a:hover,
.dropdown-main-menu > li.active > a:focus {
  color: #000000; /* Change to black on hover, even when active */
}

.submenu {
  font-size: 0.9em;
  font-weight: 400; /* Regular weight */
  list-style-type: none;
  padding: 8px 24px;
  margin: 0;
  visibility: hidden; /* Hide submenu by default */
  position: absolute; /* Position it relative to the parent li */
  top: 100%; /* Position it right below the parent link */
  left: 15%;
  background-color: #ffffff; /* Example background for submenu */
  min-width: 200px; /* Example minimum width */
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
  z-index: 1; /* Ensure it's above other content */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* Added visibility */
  border-radius: 10px; /* Added rounded corners */
  overflow: hidden; /* Ensures content respects border-radius */
}

.submenu li a {
  color: #757575;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  white-space: nowrap; /* Prevent text wrapping in submenu */
  transition: color 0.3s ease;
}

.submenu li a:hover,
.submenu li a:focus {
  /* Added :focus */
  color: #000000;
}

@media (max-width: 768px) {
  .dropdown-main-menu {
    flex-direction: column;
    align-items: flex-start; /* This is the key line to left-align the list items */
    width: 100%; /* Ensures the list takes up the full width of its container */
    margin-top: 16px;
  }

  .dropdown-main-menu > li > a {
    padding: 16px 8px;
  }
}

/* Footer Styles */
/* Footer Styles */
footer {
  background-color: #edf0ff; /* This background will now span full width */
  /* Remove flex properties and padding from here */
  padding: 0; /* No padding on the footer itself */
  display: flex; /* Make footer a flex container */
  justify-content: center; /* Center the .footer-inner child */
  align-items: center; /* Vertically align the .footer-inner */
  flex-wrap: wrap; /* Allows footer to wrap if content inside overflows */
  margin-top: 60px;
  border-top: 0px solid #c5c5c5;
  width: 100%; /* Ensure it spans full width */
  box-sizing: border-box; /* Good practice */
}

/* NEW CONTAINER for centering the content within the full-width footer */
.footer-inner {
  display: flex; /* Pushes left and right sections to edges */
  justify-content: space-between;
  align-items: center; /* Vertically aligns items in the center */
  padding: 40px 20px; /* Adjust padding here for the inner content */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  max-width: 1200px; /* Match your .header-inner and .main-content max-width */
  width: 100%; /* Allows it to shrink on smaller screens */
  box-sizing: border-box; /* Include padding in width */
}

/* Existing .footer-left and .footer-right styles (no changes needed for these blocks) */
.footer-left {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.footer-logo {
  height: 144px;
  width: auto;
}

.footer-text h3 {
  font-size: 1.5em;
  font-weight: 600;
  color: #757575;
  margin-bottom: 8px;
}

/* Style for the About NerveUs link within the footer-text h3 */
.footer-text h3 a {
  color: #757575;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-text h3 a:hover {
  color: #6e6eff;
}

.footer-text p {
  font-size: 1em;
  font-weight: 300;
  color: #757575;
  margin-bottom: 4px;
}

.footer-text p:last-child {
  margin-bottom: 0;
}

.footer-text a {
  color: #6e6eff;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.footer-text a:hover {
  color: #000000;
}

.footer-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer-right li {
  margin-bottom: 8px;
}

.footer-right li:last-child {
  margin-bottom: 0;
}

.footer-right a {
  font-size: 1.1em;
  font-weight: 600;
  color: #757575;
  text-decoration: none;
  padding: 5px 0;
  transition: color 0.2s ease;
}

.footer-right a:hover {
  color: #000000;
}

/* Responsive adjustments for footer */
@media (max-width: 768px) {
  .footer-inner {
    /* Target the inner container for stacking */
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 20px; /* Use smaller padding for mobile */
  }

  .footer-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 30px;
    text-align: left;
  }

  .footer-text {
    width: 100%;
  }

  .footer-right {
    width: 100%;
  }

  .footer-right ul {
    align-items: flex-start;
  }

  .footer-right li a {
    text-align: left;
  }
}

/* Hero Section Specific Styles */
.hero-section {
  background-color: #edf0ff;
  text-align: left; /* Changed to left-aligned */
  border-radius: 20px; /* Rounded corners */
  display: flex;
  flex-direction: row; /* Changed to row for side-by-side content */
  align-items: center; /* Vertically center items */
  justify-content: space-between; /* Space content to left and right */
  position: relative;
  overflow: hidden; /* For the background elements */
  max-width: 900px;
  margin: 0 auto 60px auto;
  padding: 40px;
  gap: 40px; /* Space between text and image area */
}

.hero-content {
  flex: 1; /* Allows content to take available space */
  max-width: 60%; /* Limit width of text content */
}

.hero-image-placeholder {
  flex: 1; /* Allows image area to take available space */
  min-height: 200px; /* Minimum height for the placeholder */
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #757575;
  font-style: italic;
  text-align: center;
}

.hero-section .hero-logo {
  height: auto; /* Larger logo */
  max-width: 100%;
  margin-bottom: 20px;
  display: block; /* Ensure logo is a block element for margin */
}

.hero-section .hero-title {
  font-size: 5em; /* Very large title */
  font-weight: 700;
  color: #6e6eff; /* Purple color */
  margin-bottom: 20px;
  line-height: 1.1; /* Tighter line height */
}

.hero-section .hero-description {
  font-size: 1.2em; /* Larger description text */
  font-weight: 400;
  color: #404040;
  margin-bottom: 20px; /* Bottom margin for spacing */
}

/* Sections below hero */
.content-section {
  max-width: 900px;
  margin: 0 auto 0px auto;
  padding: 0 20px;
}

.modules-section {
  text-align: left; /* Aligns text within this section to the left */
  max-width: 900px; /* Added max-width for alignment with content-section */
  margin: 0 auto 60px auto; /* Added margin for centering and bottom space */
  padding: 0 20px; /* Added padding to align with content-section */
}

.modules-section h2 {
  font-size: 2.5em;
  color: #34495e;
  margin-bottom: 40px;
  /* text-align is now handled by the parent .modules-section */
}

.modules-section p {
  /* This p will now inherit from the general p rule */
  margin-bottom: 0px; /* Ensure consistency with general p margin */
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  justify-content: center; /* This will center the grid items within the available space */
  max-width: 1000px; /* Limit overall grid width */
  margin: 0 auto; /* Centered within the modules-section */
}

.module-card {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  padding: 0 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

.module-card-image {
  width: calc(
    100% + 60px
  ); /* This should make it 100% of parent's content + both paddings */
  margin-top: 20px;
  height: 180px; /* Fixed height */
  object-fit: cover; /* Essential for maintaining aspect ratio and cropping */
  border-radius: 15px;
  overflow: hidden; /* Good for clipping any overflow from object-fit and radius */
  display: block; /* Good practice for images */
  margin-bottom: 20px; /* Ensure this margin is correct for spacing below the image */
}

.module-card-title {
  font-size: 1.5em;
  font-weight: 600;
  color: #6e6eff;
  margin-bottom: 10px;
}

.module-card-description {
  /* Inherits from general p rule */
  margin-bottom: 0; /* Override to ensure no extra space at the bottom of the card */
  flex-grow: 1;
}

/* Responsive adjustments for hero section */
@media (max-width: 768px) {
  .hero-section {
    padding: 60px 20px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .hero-content {
    max-width: 100%;
    margin-bottom: 30px;
  }

  .hero-section .hero-title {
    font-size: 3.5em;
  }

  .hero-section .hero-description {
    font-size: 1.2em;
  }

  .explore-modules-button {
    width: 100%;
    text-align: center;
  }

  .hero-image-placeholder {
    width: 100%;
    min-height: 150px;
  }

  .modules-section {
    padding: 0 20px; /* Add padding for small screens */
  }

  .modules-section h2,
  .modules-section p {
    text-align: left; /* Ensure text alignment on small screens */
  }
}

@media (max-width: 480px) {
  .hero-section .hero-title {
    font-size: 2.5em;
  }
  .explore-modules-button {
    padding: 15px 30px;
    font-size: 1em;
  }
}

.next-chapter-section {
  display: flex;
  justify-content: left;
  align-items: stretch;
  gap: 20px;
  flex-wrap: wrap;
}

.next-chapter-box {
  background-color: #edf0ff;
  border: 1px solid #6e6eff;
  border-radius: 15px;
  padding: 30px;
  display: flex;
  flex-direction: column; /* This is already here, good! */
  align-items: center;
  justify-content: space-between; /* Changed to space-between to push the button to the bottom if content varies */
  text-align: left;
  flex: 1;
  min-width: 280px;
  max-width: 45%;
  box-sizing: border-box;
}

/* Styles for the new heading within the next chapter box */
.next-chapter-box .next-chapter-heading {
  font-weight: 600;
  color: #404040;
  margin-bottom: 10px;
}

/* Styles for the new paragraph/body text within the next chapter box */
.next-chapter-box .next-chapter-body {
  font-size: 1em;
  font-weight: 300;
  color: #757575;
  margin-bottom: 20px;
  line-height: 1.4;
  flex-grow: 1; /* Allows the body text to grow and take up available space, pushing the button down */
}

.next-chapter-inner-button {
  /* Existing button styles */
  /* Add min-height if you want a guaranteed minimum height regardless of content */
  /* min-height: 45px; */ /* Example */
  display: flex; /* Make the button a flex container */
  align-items: center; /* Vertically center text within the button */
  justify-content: center; /* Horizontally center text within the button */
  padding: 10px 20px; /* Adjust padding as needed */
  text-align: center; /* Ensure text is centered for older browsers */
}

/* You might need to adjust the br tags in your HTML.
   It's generally better to control spacing with CSS margins/padding. */

/* Primary Button Styles (Base) */
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600; /* Default font-weight for most buttons */
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 1.2em;
}

/* Explore Modules Button */
.explore-modules-button {
  padding: 15px 40px;
  background-color: #ffffff;
  border: 1px solid #6e6eff;
  border-radius: 30px;
  color: #6e6eff;

  /* Inherits: font-weight, text-decoration, cursor, transition, display, align-items, justify-content, white-space */
}

.explore-modules-button:hover {
  background-color: #6e6eff;
  color: #ffffff;
  border-color: #6e6eff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.next-chapter-inner-button {
  display: inline-block; /* Allows padding and width */
  padding: 15px 40px;
  background-color: #6e6eff; /* Purple background on hover */
  color: #ffffff; /* White text on hover */
  border-radius: 30px; /* More rounded corners for button */
  border-color: #6e6eff;
  border: 1px solid #6e6eff; /* Purple border */
  font-size: 1.2em;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
  white-space: nowrap; /* Prevent button text from wrapping */
}

.next-chapter-inner-button:hover {
  background-color: #ffffff; /* White background */
  border: 1px solid #6e6eff; /* Purple border */
  color: #6e6eff; /* Purple text */
  border-color: #6e6eff;
}

/* Optional: Media query for responsiveness */
@media (max-width: 768px) {
  /* Adjust breakpoint as needed */
  .next-chapter-section {
    flex-direction: column; /* Stacks the boxes vertically on smaller screens */
    align-items: center; /* Centers them horizontally when stacked */
  }
  .next-chapter-box {
    max-width: 90%; /* Allows boxes to take up more width when stacked */
    margin-bottom: 20px; /* Add some space between stacked boxes */
  }
}

.tutorial-box {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Pushes text to left, button to right */
  margin: 20px 0px; /* Space above this section */
  padding: 16px 20px;
  border: 1.5px solid #e0e0e0; /* Light grey border */
  border-radius: 10px; /* Rounded corners */
  background-color: #f9f9f9; /* Slightly off-white background */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 8px; /* Gap between text and button on wrap */
}

.tutorial-box-icon {
  flex: 1;
}

.tutorial-box-text {
  flex: 15;
}

.tutorial-box-text p {
  font-size: 0.9em; /* Adjust as needed */
  color: #404040;
  margin-bottom: 0; /* Remove default paragraph margin */
}

.tutorial-box .tutorial-bot-text p {
  margin-bottom: 0; /* Remove default paragraph margin */
}

.callout-boxes-container {
  display: flex; /* Makes the container a flex container */
  flex-wrap: wrap; /* Allows items to wrap to the next line if space is limited */
  justify-content: center; /* Centers the boxes horizontally if there's extra space */
  align-items: flex-start; /* Aligns items to the start of the cross axis (top) */
  gap: 20px; /* NEW: Adds space directly between flex items (modern way) */
  padding: 0px 10px; /* Optional: padding around the whole group of boxes */
  margin: -20px 0 0 0;
}

.callout-box {
  flex: 1;
  display: flex;
  align-items: flex;
  justify-content: flex-start; /* Pushes text to left, button to right */
  margin: 20px 0px; /* Space above this section */
  padding: 16px 20px;
  border: 1.5px solid #e0e0e0; /* Light grey border */
  border-radius: 10px; /* Rounded corners */
  background-color: #fffdec; /* Slightly off-white background */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 8px; /* Gap between text and button on wrap */
}

@media (max-width: 768px) {
  .callout-boxes-container {
    flex-direction: column; /* Stacks boxes vertically on smaller screens */
    align-items: center; /* Centers boxes horizontally when stacked */
    margin: 0 0 16px 0;
    gap: 0px;
  }
  .callout-box {
    margin: 12px 0;
  }
}

.callout-box-icon {
  flex: 1;
  width: 30px;
  height: 30px;
}

.callout-box-text {
  flex: 12;
}
.callout-box-text p {
  margin: 0;
}

.column-left,
.column-right {
  flex: 1; /* Each column takes equal available space */
  /* You can use specific widths too: flex: 0 0 45%; for fixed width */
  /* Or make one wider: .column-left { flex: 2; } .column-right { flex: 1; } */
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
  .two-column-flex-layout {
    flex-direction: column; /* Stack columns vertically on smaller screens */
    gap: 20px; /* Adjust gap when stacked */
  }

  .column-left,
  .column-right {
    width: 100%; /* Make them take full width when stacked */
    flex: none; /* Remove flex sizing when stacked */
  }
}

/* Common styles for the icon list */
.main-content-column ul.icon-list {
  list-style: none; /* Remove default bullets */
  padding-left: 20px; /* Indent unordered lists */
  margin-bottom: 8px; /* Keep existing margin-bottom */
}

.main-content-column ul.icon-list li {
  display: flex; /* Make the LI a flex container */
  align-items: flex-start; /* Align icon and text column to the top */
  margin-bottom: 20px; /* Space between list items */
  padding-left: 0; /* Reset padding-left here, we'll control it with the icon's margin */
}

.main-content-column ul.icon-list li:last-child {
  margin-bottom: 0; /* No margin after the last list item */
}

/* Base style for all list item icons */
.main-content-column ul.icon-list li::before {
  content: "";
  display: inline-block; /* Or block, both work here */
  width: 35px; /* Adjust icon size as needed */
  height: 35px; /* Adjust icon size as needed */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 25px; /* Space between icon and the text container */
  flex-shrink: 0; /* Prevent the icon from shrinking */
  /* Remove position:absolute and left:0; if you had them from previous attempts,
     as flexbox handles positioning here. */
}

/* Specific icons for each list item (assuming you're using classes like .icon-bullet-severity) */
.main-content-column ul.icon-list li.icon-bullet-severity::before {
  background-image: url("../images/spontaneousRecoveryIcons/increase-up-icon.png");
}
.main-content-column ul.icon-list li.icon-bullet-location::before {
  background-image: url("../images/spontaneousRecoveryIcons/road-route-destination-icon.png");
}
.main-content-column ul.icon-list li.icon-bullet-scar-tissue::before {
  background-image: url("../images/spontaneousRecoveryIcons/lock-icon.png");
}
.main-content-column ul.icon-list li.icon-bullet-aging::before {
  background-image: url("../images/spontaneousRecoveryIcons/clock-line-icon.png");
}

/* ---- NEW/MODIFIED SECTION FOR TEXT CONTENT ---- */
/* This is the key part: Wrap your two <p> tags inside a single <div>
   that is a direct child of the <li>. Then apply flex: 1 to this div. */
.main-content-column ul.icon-list li > div {
  /* Targets the direct div child of the li */
  flex: 1; /* Allows this content div to take up remaining space */
}

/* Ensure paragraph margins are correct within this content div */
.main-content-column ul.icon-list li p {
  margin-bottom: 0; /* Reset default paragraph margin inside this content div */
}

/* If you want a specific margin *between* the title and description paragraphs,
   you can target the title paragraph more specifically: */
.main-content-column ul.icon-list li p.icon-list-title {
  margin-bottom: 0px; /* Adjust this value as needed for space after the title */
  /* Keep the negative margin if it's crucial for vertical alignment: */
  /* margin-top: -2px; */ /* if you want to push it up relative to the icon */
}

/* This targets the original negative margin on the first P if you didn't add .icon-list-title */
/* .main-content-column ul.icon-list li p:first-child {
    margin-bottom: -2px;
} */

.our-team {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; /* Pushes text to left, button to right */
  margin-bottom: 20px;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 40px; /* Gap between text and button on wrap */
}

.headshot-image {
  height: auto;
  width: 200px;
  border-radius: 15px;
}

.headshot-image img {
  width: 200px;
  height: 200px; /* Maintain aspect ratio */
  object-fit: cover;
  border-radius: inherit; /* Ensure the image respects the border-radius */
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .one-column-layout .main-content-column h1,
  .two-column-layout .main-content-column h1 {
    line-height: 1.1; /* Adjust this value as needed */
    font-size: 3em;
    margin-bottom: 16px;
  }
  .one-column-layout .main-content-column h2,
  .two-column-layout .main-content-column h2 {
    line-height: 1.1; /* Adjust this value as needed */
    margin-bottom: 16px;
    font-size: 2em;
  }
  .main-content-column ul {
    padding-right: 0px;
  }
}

.video-container {
  position: relative; /* Essential for positioning the overlay button relative to the video */
  width: 250px; /* Match video width */
  height: 250px; /* Match video height */
  display: flex; /* Helps center the video itself if it doesn't perfectly fill the container */
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Ensures nothing spills out of the container */
}

/* Ensure the video itself respects its container */
.video-container video {
  display: block; /* Remove any extra space below the video */
  width: 100%; /* Make video fill its container */
  height: 100%; /* Make video fill its container */
  object-fit: cover; /* Ensures the video covers the area without distortion */
  border-radius: 10px;
}

.custom-video-controls-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Allows clicks to pass through initially, then re-enabled for button */
  transition: opacity 0.3s ease-in-out; /* Smooth transition for hiding/showing */
}

.custom-video-controls-overlay button {
  pointer-events: auto; /* Re-enable pointer events for the button */
  background: #f7f8ffac; /* Semi-transparent black background */
  border: none;
  border-radius: 50%; /* Makes it circular */
  color: #6e6eff; /* Icon color */
  cursor: pointer;
  width: 60px; /* Size of the circular button */
  height: 60px; /* Size of the circular button */
  display: flex; /* Use flexbox for icon centering within the button */
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease; /* Smooth hover effect */
}

.custom-video-controls-overlay button:hover {
  background: #f7f8ff; /* Darker on hover */
}

/* Icon styling */
.custom-video-controls-overlay button svg {
  fill: currentColor; /* Inherit color from parent (button) */
  width: 32px; /* Set specific width for the SVG */
  height: 32px; /* Set specific height for the SVG */
}

/* Utility class to hide icons */
.hidden {
  display: none;
}

/* Add this new CSS rule */
.custom-video-controls-overlay.hide-controls-on-play {
  opacity: 0;
  pointer-events: none; /* Make the whole overlay unclickable when hidden */
}

/* Ensure the button itself can still be interacted with when shown */
.custom-video-controls-overlay.hide-controls-on-play button {
  pointer-events: none; /* Make the button itself unclickable when hidden */
}

/* When not hidden, make sure button is clickable again */
.custom-video-controls-overlay:not(.hide-controls-on-play) button {
  pointer-events: auto;
}

/* Style for your original image */
.gallery-image {
  cursor: pointer; /* Indicates it's clickable */
  max-width: 100%;
  height: auto;
  border: 1px solid #e0e0e0;
  border-radius: 10px; /* Rounded corners for the image */
  transition: 0.3s ease; /* Smooth transition for hover effects */
}

.gallery-image:hover {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* The Overlay (background) */
.overlay {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 50px; /* Location of the box - top padding to leave space for close button */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
  text-align: center; /* Center the image within the overlay */
}

.overlay-content {
  margin: auto;
  display: block;
  max-width: 100%; /* Allow image to exceed 90% for zoom */
  max-height: 100vh; /* Allow image to exceed 85vh for zoom */
  animation-name: zoom;
  animation-duration: 0.6s;
  object-fit: contain; /* Ensures the image fits without cropping when not zoomed/panned */

  /* Add transition for smooth zoom and pan */
  transition: transform 0.2s ease-out;

  /* Initially set transform origin to top-left for easier calculations */
  /* This will be dynamically updated by JS based on click */
  transform-origin: 0% 0%;

  cursor: zoom-in; /* Indicates it's zoomable */
}

/* When zoomed in, change cursor to grab */
.overlay-content[style*="scale"]:not([style*="scale(1)"]) {
  cursor: grab;
}

/* Caption of the overlay image */
#caption {
  margin-top: 10px;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
}

/* The Close Button */
.close-button {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 1001; /* Make sure it's above the overlay */
}

.close-button:hover,
.close-button:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Add Animation (Zoom In Effect) */
@keyframes zoom {
  from {
    transform: scale(0.1);
  }
  to {
    transform: scale(1);
  }
}