/* Background team image */
.bg-hero { 
  background-image: url('https://static.igem.wiki/teams/5253/header/human-practice.png');
  background-size: 70% auto;
  background-position: right bottom -90px;
  background-repeat: no-repeat;
  height: 300px;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
  .bg-hero {
      background-size: 70% auto; /* Make the image cover the full width */
      background-position: right center; /* Align to the bottom */
      height: 250px; /* Reduce height for smaller screens */
  }
}

@media (max-width: 480px) {
  .bg-hero {
      background-size: 40% auto; /* Ensure the image fully covers smaller devices */
      background-position: right center; /* Keep it centered and aligned at the bottom */
      height: 200px; /* Further reduce the height */
  }
} 

/* CSS for the title block */
.title-block h1 {
  color: #25336b; /* Replace with your desired color */
  font-size: 60px; /* Adjust as needed */
  font-weight: bold; /* Adjust as needed */

}


/* General layout */
.main-content {
  padding-right: 45px; /* Space for back to top button */
}

/* Styles for the timeline component */
h1 {
  text-align: left;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

h2 {
  text-align: left;
  justify-content: left;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* ------------------- Introduction ------------------ */
#overview {
  display: flexbox;
}

.centered {
  text-align: center; /* Centers only the text with this class */
}


/* ------------------- Timeline ------------------ */

/* Timeline styles */
ul.timeline {
  --col-gap: 2rem;
  --row-gap: 2rem;
  --line-w: 0.25rem;
  display: grid;
  grid-template-columns: var(--line-w) 1fr;
  grid-auto-columns: max-content;
  column-gap: var(--col-gap);
  list-style: none;
  width: min(60rem, 100%);
  margin-inline: auto;
}

/* Line styling */
ul.timeline::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 13;
  background: #25336b; /* Updated line color */
  border-radius: calc(var(--line-w) / 2);
}

/* Columns and row gaps */
ul.timeline li:not(:last-child) {
  margin-bottom: var(--row-gap);
}

/* Card styling */
ul.timeline li.timeline-item {
  grid-column: 2;
  --inlineP: 1.5rem;
  margin-inline: var(--inlineP);
  grid-row: span 2;
  display: grid;
  grid-template-rows: min-content min-content min-content;
  position: relative; /* Added for shadow positioning */
}

/* Date styling */
ul.timeline li.timeline-item .timeline-date {
  --dateH: 3rem;
  height: var(--dateH);
  margin-inline: calc(var(--inlineP) * -1);
  text-align: center;
  background-color: #25336b; /* Updated date background color */
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  display: grid;
  place-content: center;
  position: relative;
  border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}

/* Date flap */
ul.timeline li.timeline-item .timeline-date::before {
  content: "";
  width: var(--inlineP);
  aspect-ratio: 1;
  background: #25336b; /* Updated date flap color */
  background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
  position: absolute;
  top: 100%;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  right: 0;
}

/* Circle */
ul.timeline li.timeline-item .timeline-date::after {
  content: "";
  position: absolute;
  width: 2rem;
  aspect-ratio: 1;
  background: var(--bgColor);
  border: 0.3rem solid #25336b; /* Updated circle border color */
  border-radius: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}

/* Title and description */
ul.timeline li.timeline-item .timeline-title,
ul.timeline li.timeline-item .timeline-description {
  background: white; /* Set background color to white */
  position: relative;
  padding-inline: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Added shadow */
}

ul.timeline li.timeline-item .timeline-title {
  overflow: hidden;
  padding-block-start: 1.5rem;
  padding-block-end: 1rem;
  font-weight: 500;
}
ul.timeline li.timeline-item .timeline-description {
  padding-block-end: 1.5rem;
  font-weight: 300;
}

/* Shadows */
ul.timeline li.timeline-item .timeline-title::before,
ul.timeline li.timeline-item .timeline-description::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  left: 50%;
  border-radius: 50%;
  filter: blur(4px);
  transform: translate(-50%, 50%);
}
ul.timeline li.timeline-item .timeline-title::before {
  bottom: calc(100% + 0.125rem);
}

ul.timeline li.timeline-item .timeline-description::before {
  z-index: -1;
  bottom: 0.25rem;
}

/* Responsive design for wider screens */
@media (min-width: 40rem) {
  ul.timeline {
    grid-template-columns: 1fr var(--line-w) 1fr;
  }
  ul.timeline::before {
    grid-column: 2;
  }
  ul.timeline li.timeline-item:nth-child(odd) {
    grid-column: 1;
  }
  ul.timeline li.timeline-item:nth-child(even) {
    grid-column: 3;
  }

  /* Start second card */
  ul.timeline li.timeline-item:nth-child(2) {
    grid-row: 2/4;
  }

  ul.timeline li.timeline-item:nth-child(odd) .timeline-date::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    left: 0;
  }

  ul.timeline li.timeline-item:nth-child(odd) .timeline-date::after {
    transform: translate(-50%, -50%);
    left: calc(100% + var(--col-gap) + var(--line-w) / 2);
  }
  ul.timeline li.timeline-item:nth-child(odd) .timeline-date {
    border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
  }
}


/* -------- Endometriose fællesskabet ------------- */
.post-1-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 30px;
}

.post-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px; /* Ensure the container's width matches the image */
  background-color: #FFDE5A;
  border-radius: 10px; /* Round corners */
}

.post-1 img {
  max-width: 100%; /* Ensure the image takes up the full width of the container */
  border-radius: 10px; /* Round corners */
  border: 5px solid #FFDE5A; /* Border around image */
  cursor: pointer;
}

.figure-text {
  text-align: center;
  font-size: 15px;
  padding: 10px;
  color: #25336b;
  background-color: #fff;
  border-radius: 10px; /* Rounded corners on all sides */
  width: 100%; /* Make figure text as wide as the image */
  height: 100%;
  border-left: 5px solid #FFDE5A; /* Border around image */
  border-right: 5px solid #FFDE5A; /* Border around image */
  border-bottom: 5px solid #FFDE5A; /* Border around image */
  margin: 0 auto; /* Horizontally center it */
  align-items: center;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}


/* --- Enlarged image styling --- */

/* Overlay styles */
.overlay {
  position: fixed; /* Positioned relative to the viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Make sure it covers other content */
}

/* Enlarged container styles */
.enlarged-container {
  display: flex; /* Use flexbox for layout */
  align-items: flex-start; /* Align items to the start */
  padding: 20px;
  background-color: #fff; /* Background for the enlarged view */
  border: 5px solid #FFDE5A; /* Border around the enlarged view */
  border-radius: 10px;
  max-width: 600px; /* Set a larger max width for the container */
  width: 100%; /* Use a percentage width for responsiveness */
}

/* Close button styles */
.close {
  position: absolute; /* Position absolute to place it anywhere within the overlay */
  top: 10px; /* Adjust as needed */
  right: 15%; /* Adjust as needed */
  font-size: 30px;
  color: #25336b;
  cursor: pointer;
  z-index: 101; /* Ensure the close button is on top of other elements */
}

/* Enlarged image styles */
.enlarged-image {
  max-width: 60%; /* Limit the width of the image */
  height: auto; /* Maintain aspect ratio */
  border-right: 5px solid #FFDE5A; /* Add right border to the image */
  background-color: #FFDE5A;
}

/* Enlarged figure text styles */
.enlarged-figure-text {
  margin-left: 20px; /* Space between the image and text */
  text-align: center; /* Align text to the left */
  font-size: 14px; /* Same size as the original figure text */
  color: #25336b; /* Same text color */
  max-width: 40%; /* Set a max width for the text box */
  flex-shrink: 0; /* Prevent text box from shrinking */
  overflow-wrap: break-word; /* Allow long words to break to the next line */
  margin: 0 auto;
  padding: 5px;
}

/* --- End of Enlarged image styling --- */

.post-1-description {
  border: #25336b 5px solid;
  border-radius: 10px;
  padding: 20px;
}

.post-2-translation {
  border: #25336b 5px solid;
  border-radius: 10px;
  padding: 20px;
}

/* -------------------- Dropdown ---------------- */
 /* Specifically target the dropdown with ID "dropdown-1" */
 #dropdown-1 {
  margin-top: 20px; /* Add space above this specific dropdown */
  margin-bottom: 20px; /* Add space below this specific dropdown */
  position: relative;
  display: inline-block;
  width: 100%; /* Full width */
  max-width: 1100px; /* Set a max width */
}

/* Styles for the button within this specific dropdown */
#dropdown-1 .dropbtn {
  background-color: #25336b;
  border-radius: 10px; /* Rounded corners */
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FAD8d8;
  box-sizing: border-box; /* Ensure padding is included in the width */
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Dropdown content styles */
#dropdown-1 .dropdown-content {
  display: none;
  margin-left: 0;  /* Center it by removing excessive left margin */
  background-color: white;
  width: 100%;
  border: 5px solid #FFDE5A; /* Yellow border */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 10px;
  box-sizing: border-box; /* Ensure padding is included in the width */
}

/* Show the dropdown content when the button is clicked */
#dropdown-1.active .dropdown-content {
  display: block;
}

/* Rotate the arrow to point up when the dropdown is open */
#dropdown-1.active .fas.fa-chevron-down {
  transform: rotate(180deg);
}

/*------------------- Survey ------------------------*/

.survey-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.images-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  grid-gap: 30px; /* Space between grid items */
  width: 100%; /* Ensure the wrapper takes full width */
  max-width: 1200px; /* Optional: Limit max width to prevent stretching on large screens */
  margin: 0 auto; /* Center the grid horizontally */
  margin-top: 20px;
}

.survey-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #FFDE5A;
  border-radius: 10px;
  margin-bottom: 10px;
}

.survey-1 img {
  max-width: 100%;
  border-radius: 10px;
  border: 5px solid #FFDE5A;
  cursor: pointer;
}


/* ---------- Patient 1 - Endowarrior -------- */
.interview-wrap-1 {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  width: 100%; /* Ensure the content takes up the full width */
  box-sizing: border-box; /* Include padding in the width calculation */
  align-items: center; /* Center items horizontally */
}

.interview-container-1 {
  display: flex;
  flex-direction: column; /* Keep patient info and image side by side */
  justify-content: space-between;
  align-items: flex-start;
  background-color: #25336b;
  color: white;
  border-radius: 10px;
  padding: 10px;
  width: 100%; /* Full width for the container */
  margin-bottom: 20px; /* Add space below the container */
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.patient-info-1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-right: 20px;
}

.patient-header-1 h2 {
  margin: 0; /* Remove default margin */
}

.interview-1-text {
  margin-top: 10px; /* Space between header and text */
  flex: 1; /* Allow text to take up remaining space */
}

/* ------------- Video Slideshow -------------- */
.video-slideshow-container, .video-slideshow-container-2 {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 15px;
}

.video-slide, .video-slide-2 {
  display: none;
  cursor: pointer;
}

.slide-video, .slide-video-2 {
  width: 100%;
  height: auto;
  border: 5px solid #FFDE5A;
  border-radius: 10px;
  width: 500px;
}

/* Video wrapper to maintain aspect ratio */
.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio (9/16 * 100) */
  height: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* Iframe is positioned to fill the wrapper */
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

.video-slide:first-child {
  display: block; /* The first video should be visible by default */
}

/* Arrows */
.prev, .next {
  cursor: pointer;
  position: absolute;
  background-color: transparent;
  top: 50%;
  padding: 16px;
  color: #FFDE5A;
  font-size: 18px;
  transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  z-index: 10; /* Ensure it's above other content */
}

.next {
  right: -15px;
}

.prev {
  left: -15px;
}

.prev:hover, .next:hover {
  transform: translateY(-50%) scale(1.2); /* Scale up by 20% */
  color: #FFDE5A;
}

/* Quote 1 */
.citation-mark-up {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 200px 200px;
  display: flex;
  align-items: center;
  padding-top: 35px; /* Adjust padding to maintain space for image */
  padding-bottom: 25px; /* Adjust if needed */
}

.citation-mark-up img {
  width: 100px;
  opacity: 60%;
}

.quote-1 {
  position: absolute;
  width: 100%;
  text-align: center;
  align-items: center;
  opacity: 0; /* Initially hidden */
  transition: opacity 1s ease-in-out;
}

#person {
  text-align: center;
  align-items: center;
  font-size: 20px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.citation-mark-down {
  position: relative; /* Allows positioning of the child element */
  min-height: 220px; /* Adjust this to the height of your container */
  padding-bottom: 35px;
  margin-top: -100px; /* Move the image up by 20px (adjust as needed) */
}

.citation-mark-down img {
  position: absolute; /* Absolute positioning to place it within the container */
  width: 100px; /* Set the image width */
  bottom: 0; /* Align the image to the bottom */
  right: 0; /* Align the image to the right */
  opacity: 0.6; /* Set the opacity to 60% */
  padding-bottom: 35px;
  margin-top: -100px; /* Move the image up by 20px (adjust as needed) */
}

/* Patient 2 - Endohero */
.interview-wrap-2 {
  display: flex;
  width: 100%; /* Ensure the content takes up the full width */
}

.interview-container-2 {
  display: flex;
  flex: 1; /* Allow the container to take up remaining space */
  justify-content: space-between;
  align-items: flex-start;
  background-color: #25336b;
  color: white;
  border-radius: 10px;
  padding: 10px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.patient-info-2 {
  display: flex;
  flex-direction: column; /* Stack header and text vertically */
  flex: 1; /* Allow this section to take up remaining space next to the image container */
  margin-right: 20px; /* Space between text and image container */
}

.patient-header-2 h2 {
  margin: 0; /* Remove default margin */
}

.interview-2-text {
  margin-top: 10px; /* Space between header and text */
  flex: 1; /* Allow text to take up remaining space */
}

.interview-box-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px; /* Ensure the container's width matches the image */
  background-color: #FFDE5A;
  border-radius: 10px; /* Round corners */
}

.interview-box-2 img {
  max-width: 100%; /* Ensure the image takes up the full width of the container */
  border-radius: 10px; /* Round corners */
  border: 5px solid #FFDE5A; /* Border around image */
  cursor: pointer;
}

/* Quote 2 */
.citation-mark-up-2 {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 200px 200px; /* Setting the size to 200x200 pixels */
  display: flex;
  align-items: center;
  padding-top: 35px;
}

.citation-mark-up-2 img {
  width: 100px;
  left: 0%;
  opacity: 60%;
}

.quote-2 {
  position: absolute;
  width: 100%;
  text-align: center;
  align-items: center;
  opacity: 0; /* Initially hidden */
  transition: opacity 2s ease-in-out;
}

/* Patient 3 - Endohero */
.interview-wrap-3 {
  display: flex;
  width: 100%; /* Ensure the content takes up the full width */
}

.interview-container-3 {
  display: flex;
  flex: 1; /* Allow the container to take up remaining space */
  justify-content: space-between;
  align-items: flex-start;
  background-color: #25336b;
  color: white;
  border-radius: 10px;
  padding: 10px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.patient-info-3 {
  display: flex;
  flex-direction: column; /* Stack header and text vertically */
  flex: 1; /* Allow this section to take up remaining space next to the image container */
  margin-right: 20px; /* Space between text and image container */
}

.patient-header-3 h2 {
  margin: 0; /* Remove default margin */
}

.interview-3-text {
  margin-top: 10px; /* Space between header and text */
  flex: 1; /* Allow text to take up remaining space */
}

.interview-box-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px; /* Ensure the container's width matches the image */
  background-color: #FFDE5A;
  border-radius: 10px; /* Round corners */
}

.interview-box-3 img {
  max-width: 100%; /* Ensure the image takes up the full width of the container */
  border-radius: 10px; /* Round corners */
  border: 5px solid #FFDE5A; /* Border around image */
  cursor: pointer;
}

/* Quote 2 */
.citation-mark-up-3 {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 200px 200px; /* Setting the size to 200x200 pixels */
  display: flex;
  align-items: center;
  padding-top: 35px;
}

.citation-mark-up-3 img {
  width: 100px;
  left: 0%;
  opacity: 60%;
}

.quote-3 {
  position: absolute;
  width: 100%;
  text-align: center;
  align-items: center;
  opacity: 0; /* Initially hidden */
  transition: opacity 2s ease-in-out;
}

/* Patient 4 - Endohero */
.interview-wrap-4 {
  display: flex;
  width: 100%; /* Ensure the content takes up the full width */
}

.interview-container-4 {
  display: flex;
  flex: 1; /* Allow the container to take up remaining space */
  justify-content: space-between;
  align-items: flex-start;
  background-color: #25336b;
  color: white;
  border-radius: 10px;
  padding: 10px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.patient-info-4 {
  display: flex;
  flex-direction: column; /* Stack header and text vertically */
  flex: 1; /* Allow this section to take up remaining space next to the image container */
  margin-right: 20px; /* Space between text and image container */
}

.patient-header-4 h2 {
  margin: 0; /* Remove default margin */
}

.interview-4-text {
  margin-top: 10px; /* Space between header and text */
  flex: 1; /* Allow text to take up remaining space */
}

.interview-box-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px; /* Ensure the container's width matches the image */
  background-color: #FFDE5A;
  border-radius: 10px; /* Round corners */
}

.interview-box-4 img {
  max-width: 100%; /* Ensure the image takes up the full width of the container */
  border-radius: 10px; /* Round corners */
  border: 5px solid #FFDE5A; /* Border around image */
  cursor: pointer;
}

/* Quote 2 */
.citation-mark-up-4 {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 200px 200px; /* Setting the size to 200x200 pixels */
  display: flex;
  align-items: center;
  padding-top: 35px;
}

.citation-mark-up-4 img {
  width: 100px;
  left: 0%;
  opacity: 60%;
}

.quote-4 {
  position: absolute;
  width: 100%;
  text-align: center;
  align-items: center;
  opacity: 0; /* Initially hidden */
  transition: opacity 2s ease-in-out;
}

/* Patient 5 - Endohero */
.interview-wrap-5 {
  display: flex;
  width: 100%; /* Ensure the content takes up the full width */
}

.interview-container-5 {
  display: flex;
  flex: 1; /* Allow the container to take up remaining space */
  justify-content: space-between;
  align-items: flex-start;
  background-color: #25336b;
  color: white;
  border-radius: 10px;
  padding: 10px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.patient-info-5 {
  display: flex;
  flex-direction: column; /* Stack header and text vertically */
  flex: 1; /* Allow this section to take up remaining space next to the image container */
  margin-right: 20px; /* Space between text and image container */
}

.patient-header-5 h2 {
  margin: 0; /* Remove default margin */
}

.interview-5-text {
  margin-top: 10px; /* Space between header and text */
  flex: 1; /* Allow text to take up remaining space */
}

.interview-box-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px; /* Ensure the container's width matches the image */
  background-color: #FFDE5A;
  border-radius: 10px; /* Round corners */
}

.interview-box-5 img {
  max-width: 100%; /* Ensure the image takes up the full width of the container */
  border-radius: 10px; /* Round corners */
  border: 5px solid #FFDE5A; /* Border around image */
  cursor: pointer;
}

/* Quote 2 */
.citation-mark-up-5 {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 200px 200px; /* Setting the size to 200x200 pixels */
  display: flex;
  align-items: center;
  padding-top: 35px;
}

.citation-mark-up-5 img {
  width: 100px;
  left: 0%;
  opacity: 60%;
}

.quote-5 {
  position: absolute;
  width: 100%;
  text-align: center;
  align-items: center;
  opacity: 0; /* Initially hidden */
  transition: opacity 2s ease-in-out;
}

/* Patient 6 - Endohero */
.interview-wrap-6 {
  display: flex;
  width: 100%; /* Ensure the content takes up the full width */
}

.interview-container-6 {
  display: flex;
  flex: 1; /* Allow the container to take up remaining space */
  justify-content: space-between;
  align-items: flex-start;
  background-color: #25336b;
  color: white;
  border-radius: 10px;
  padding: 10px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.patient-info-6 {
  display: flex;
  flex-direction: column; /* Stack header and text vertically */
  flex: 1; /* Allow this section to take up remaining space next to the image container */
  margin-right: 20px; /* Space between text and image container */
}

.patient-header-6 h2 {
  margin: 0; /* Remove default margin */
}

.interview-6-text {
  margin-top: 10px; /* Space between header and text */
  flex: 1; /* Allow text to take up remaining space */
}

.interview-box-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px; /* Ensure the container's width matches the image */
  background-color: #FFDE5A;
  border-radius: 10px; /* Round corners */
}

.interview-box-6 img {
  max-width: 100%; /* Ensure the image takes up the full width of the container */
  border-radius: 10px; /* Round corners */
  border: 5px solid #FFDE5A; /* Border around image */
  cursor: pointer;
}

/* Quote 2 */
.citation-mark-up-6 {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 200px 200px; /* Setting the size to 200x200 pixels */
  display: flex;
  align-items: center;
  padding-top: 35px;
}

.citation-mark-up-6 img {
  width: 100px;
  left: 0%;
  opacity: 60%;
}

.quote-6 {
  position: absolute;
  width: 100%;
  text-align: center;
  align-items: center;
  opacity: 0; /* Initially hidden */
  transition: opacity 2s ease-in-out;
}

/* Patient 7 - Endohero */
.interview-wrap-7 {
  display: flex;
  width: 100%; /* Ensure the content takes up the full width */
}

.interview-container-7 {
  display: flex;
  flex: 1; /* Allow the container to take up remaining space */
  justify-content: space-between;
  align-items: flex-start;
  background-color: #25336b;
  color: white;
  border-radius: 10px;
  padding: 10px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.patient-info-7 {
  display: flex;
  flex-direction: column; /* Stack header and text vertically */
  flex: 1; /* Allow this section to take up remaining space next to the image container */
  margin-right: 20px; /* Space between text and image container */
}

.patient-header-7 h2 {
  margin: 0; /* Remove default margin */
}

.interview-7-text {
  margin-top: 10px; /* Space between header and text */
  flex: 1; /* Allow text to take up remaining space */
}

.interview-box-7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px; /* Ensure the container's width matches the image */
  background-color: #FFDE5A;
  border-radius: 10px; /* Round corners */
}

.interview-box-7 img {
  max-width: 100%; /* Ensure the image takes up the full width of the container */
  border-radius: 10px; /* Round corners */
  border: 5px solid #FFDE5A; /* Border around image */
  cursor: pointer;
}

/* Quote 2 */
.citation-mark-up-7 {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 200px 200px; /* Setting the size to 200x200 pixels */
  display: flex;
  align-items: center;
  padding-top: 35px;
}

.citation-mark-up-7 img {
  width: 100px;
  left: 0%;
  opacity: 60%;
}

.quote-7 {
  position: absolute;
  width: 100%;
  text-align: center;
  align-items: center;
  opacity: 0; /* Initially hidden */
  transition: opacity 2s ease-in-out;
}

/* Patient 8 - Endohero */
.interview-wrap-8 {
  display: flex;
  width: 100%; /* Ensure the content takes up the full width */
}

.interview-container-8 {
  display: flex;
  flex: 1; /* Allow the container to take up remaining space */
  justify-content: space-between;
  align-items: flex-start;
  background-color: #25336b;
  color: white;
  border-radius: 10px;
  padding: 10px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.patient-info-8 {
  display: flex;
  flex-direction: column; /* Stack header and text vertically */
  flex: 1; /* Allow this section to take up remaining space next to the image container */
  margin-right: 20px; /* Space between text and image container */
}

.patient-header-8 h2 {
  margin: 0; /* Remove default margin */
}

.interview-8-text {
  margin-top: 10px; /* Space between header and text */
  flex: 1; /* Allow text to take up remaining space */
}

.interview-box-8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px; /* Ensure the container's width matches the image */
  background-color: #FFDE5A;
  border-radius: 10px; /* Round corners */
}

.interview-box-8 img {
  max-width: 100%; /* Ensure the image takes up the full width of the container */
  border-radius: 10px; /* Round corners */
  border: 5px solid #FFDE5A; /* Border around image */
  cursor: pointer;
}

/* Quote 2 */
.citation-mark-up-8 {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 200px 200px; /* Setting the size to 200x200 pixels */
  display: flex;
  align-items: center;
  padding-top: 35px;
}

.citation-mark-up-8 img {
  width: 100px;
  left: 0%;
  opacity: 60%;
}

.quote-8 {
  position: absolute;
  width: 100%;
  text-align: center;
  align-items: center;
  opacity: 0; /* Initially hidden */
  transition: opacity 2s ease-in-out;
}

/* -------------------- Expert interviews ---------------- */

#expert-interviews {
  padding-top: 30px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

/* ------------ Expert 1 (9) ----------- */
.interview-wrap-9 {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  width: 100%; /* Ensure the content takes up the full width */
  box-sizing: border-box; /* Include padding in the width calculation */
  align-items: center; /* Center items horizontally */
  padding-bottom: 40px;
}

.interview-container-9 {
  display: flex;
  flex-direction: column; /* Stack expert info above the image */
  justify-content: flex-start; /* Align items at the start */
  align-items: flex-start; /* Align items to the left */
  background-color: #25336b;
  color: white;
  border-radius: 10px;
  padding: 10px;
  width: 100%; /* Full width for the container */
  margin-bottom: 20px; /* Add space below the container */
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.expert-9 {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.interview-box-9 {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically */
  width: 100%; /* Full width or set a specific width */
  max-width: 400px; /* Set max width if needed */
  background-color: #FFDE5A;
  border-radius: 10px;
  margin-top: 20px; /* Add space above the interview box */
  margin: 0 auto;
}

.interview-box-9 img {
  max-width: 100%; /* Ensure the image takes up the full width of the container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px; /* Round corners */
  border: 5px solid #FFDE5A; /* Border around image */
  cursor: pointer;
}


/* ------------ Expert 2 (10) ----------- */
.interview-wrap-10 {
  display: flex;
  width: 100%; /* Ensure the content takes up the full width */
  box-sizing: border-box; /* Include padding in the width calculation */
  padding-top: 35px;
  }
  
  .interview-container-10 {
  display: flex;
  flex: 1; /* Allow the container to take up remaining space */
  justify-content: space-between;
  align-items: flex-start;
  background-color: #25336b;
  color: white;
  border-radius: 10px;
  padding: 10px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
  }
  
  .expert-10 {
  display: flex;
  flex-direction: column; /* Stack header and text vertically */
  flex: 1; /* Allow this section to take up remaining space next to the image */
  margin-right: 20px; /* Space between text and image container */
  }
  
  .expert-header-10 h2 {
  margin: 0; /* Remove default margin */
  }
  
  .expert-10-text {
  margin-top: 10px; /* Space between header and text */
  flex: 1; /* Allow text to take up remaining space */
  }
  
  .interview-box-10 {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    width: 100%; /* Full width or set a specific width */
    max-width: 260px; /* Set max width if needed */
    background-color: #FFDE5A;
    border-radius: 10px;
    margin-top: 20px; /* Add space above the interview box */
    margin: 0 auto;
  }
  
  .interview-box-10 img {
    max-width: 100%; /* Ensure the image takes up the full width of the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Round corners */
    border: 5px solid #FFDE5A; /* Border around image */
    cursor: pointer;
  }

  /* ------------ Expert 3 (11) ----------- */
.interview-wrap-11 {
  display: flex;
  width: 100%; /* Ensure the content takes up the full width */
  box-sizing: border-box; /* Include padding in the width calculation */
  padding-top: 35px;
  }
  
  .interview-container-11 {
  display: flex;
  flex: 1; /* Allow the container to take up remaining space */
  justify-content: space-between;
  align-items: flex-start;
  background-color: #25336b;
  color: white;
  border-radius: 10px;
  padding: 10px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
  }
  
  .expert-11 {
  display: flex;
  flex-direction: column; /* Stack header and text vertically */
  flex: 1; /* Allow this section to take up remaining space next to the image */
  margin-right: 20px; /* Space between text and image container */
  }
  
  .expert-header-11 h2 {
  margin: 0; /* Remove default margin */
  }
  
  .expert-11-text {
  margin-top: 10px; /* Space between header and text */
  flex: 1; /* Allow text to take up remaining space */
  }
  
  .interview-box-11 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px; /* Ensure the container's width matches the image */
  background-color: #FFDE5A;
  border-radius: 10px; /* Round corners */
  }
  
  .interview-box-11 img {
  max-width: 100%; /* Ensure the image takes up the full width of the container */
  border-radius: 10px; /* Round corners */
  border: 5px solid #FFDE5A; /* Border around image */
  cursor: pointer;
  }

    /* ------------ Expert 4 (12) ----------- */
.interview-wrap-12 {
  display: flex;
  width: 100%; /* Ensure the content takes up the full width */
  box-sizing: border-box; /* Include padding in the width calculation */
  padding-top: 35px;
  padding-bottom: 35px;
  }
  
  .interview-container-12 {
  display: flex;
  flex: 1; /* Allow the container to take up remaining space */
  justify-content: space-between;
  align-items: flex-start;
  background-color: #25336b;
  color: white;
  border-radius: 10px;
  padding: 10px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
  }
  
  .expert-12 {
  display: flex;
  flex-direction: column; /* Stack header and text vertically */
  flex: 1; /* Allow this section to take up remaining space next to the image */
  margin-right: 20px; /* Space between text and image container */
  }
  
  .expert-header-12 h2 {
  margin: 0; /* Remove default margin */
  }
  
  .expert-12-text {
  margin-top: 10px; /* Space between header and text */
  flex: 1; /* Allow text to take up remaining space */
  }
  
  .interview-box-12 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px; /* Ensure the container's width matches the image */
  background-color: #FFDE5A;
  border-radius: 10px; /* Round corners */
  }
  
  .interview-box-12 img {
  max-width: 100%; /* Ensure the image takes up the full width of the container */
  border-radius: 10px; /* Round corners */
  border: 5px solid #FFDE5A; /* Border around image */
  cursor: pointer;
  }

/* -------------------- Makes images clickable ---------------- */

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}

.modal-content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.modal-content-container {
  position: relative;
  max-width: 120%;
  max-height: 120%;
  top: 30px;
}

.modal-content {
  width: auto; /* Width of 70% of viewport width */
  max-width: 600px; /* Max width of 550px */
  max-height: 70vh; /* Max height of 70% of viewport height */
  height: auto; /* Maintain aspect ratio */
  border-radius: 5px 5px 0 0; /* Rounded corners */
  overflow: hidden; /* Hide overflow */
  border: 10px solid #FFDE5A;
}

.modal-figure-text {
  color: #fff;
  text-align: center;
  margin-top: 10px;
  font-size: 18px;
  color: #25336b;
  background-color: white; /* Background color for contrast */
  border-radius: 0 0 5px 5px; /* Rounded corners for bottom */
  border-left: 10px solid #FFDE5A;
  border-right: 10px solid #FFDE5A;
  border-bottom: 10px solid #FFDE5A;
  margin-top: 0%;
  padding: 10px;
}

.close {
  position: absolute;
  top: 100px;
  right: 25px;
  color: #FFDE5A;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #25336b;
}

/* General Image Styling */
.interview-box-1 img,
.interview-box-2 img,
.interview-box-3 img,
.interview-box-4 img,
.interview-box-5 img,
.interview-box-6 img,
.interview-box-7 img,
.interview-box-8 img,
.interview-box-9 img,
.interview-box-10 img,
.interview-box-11 img,
.interview-box-12 img, 
.post-1 img,
.survey-1 img {
  transition: transform 0.3s ease; /* Smooth transition for scaling */
}

/* Hover Effect */
.interview-box-1 img:hover,
.interview-box-2 img:hover,
.interview-box-3 img:hover,
.interview-box-4 img:hover,
.interview-box-5 img:hover,
.interview-box-6 img:hover,
.interview-box-7 img:hover,
.interview-box-8 img:hover,
.interview-box-9 img:hover,
.interview-box-10 img:hover,
.interview-box-11 img:hover,
.interview-box-12 img:hover,
.post-1 img:hover,
.survey-1 img:hover {
  transform: scale(1.05); /* Slightly enlarge the image on hover */
  cursor: pointer; /* Change cursor to indicate clickable */
}


/* ------------- Video Modal -------------- */
.video-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.video-modal-content-wrapper {
  margin: auto;
  width: 80%;
  max-width: 700px;
  padding-top: 150px;
}

.modal-video-content {
  width: 100%;
  height: auto;
  border: 10px solid #FFDE5A;
  border-radius: 10px;
}

.close-video {
  position: absolute;
  top: 100px;
  right: 35px;
  color: #FFDE5A;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close-video:hover,
.close-video:focus {
  color: #25336b;
  text-decoration: none;
  cursor: pointer;
}

.video-modal-figure-text {
  text-align: center;
  color: #25336b;
  padding: 10px 0;
  font-size: 16px;
}