/* Position the image container (needed to position the left and right arrows) */
.slideshowContainer {
  position: relative;
  padding: 30px;
  background-color: #1a2379;
  border: 4px solid #b0d3f7;
  border-radius: 0px 0px 20px 20px;
  box-sizing: border-box;
  width: 100%;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

.mySlides img {
    max-width: 100%;  /* Ensures they never overflow the container */
    height: auto;     /* Maintains the 4:3 aspect ratio automatically */
    display: block;   /* Removes any extra whitespace below the image */
}

/* Add a pointer when hovering over the thumbnail images */
.slideshowCursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 30px; /* Aligns correctly within padded container */
  border-radius: 3px 0 0 3px;
}

.prev, .next {
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.prev:hover, .next:hover {
  background-color: var(--primary-blue);
  color: #fff;
  border-radius: 4px; /* Optional: softens the background highlight */
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.caption-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px; /* Adjust this to fit your longest caption */
  padding: 10px 20px;
  text-align: center;
  color: white;
}
/* 1. Set up the row to scroll horizontally and center items when there are few */
.slideshowRow {
  display: flex;
  /* 'safe' ensures that if the content overflows, it defaults to 'left' alignment */
  justify-content: safe center;   
  overflow-x: auto;          
  scrollbar-width: thin;     
  gap: 8px;                 
  padding: 20px 18px 0px 18px;       
  background-color: #d4e9fe; /* pastel blue */
  border: 4px solid #b0d3f7;
  border-radius: 20px 20px 0px 0px;
  scrollbar-color: #4856e3 #f0f0f0;
}

/* 2. Responsive Thumbnail Layout for Mobile */
.slideshowColumn {
  flex: 0 0 110px; /* Lock to fixed minimum width on mobile so they don't squish */
  background-color: black; /* pastel blue */
  display: flex;
  flex-direction: column; 
  align-items: center;
  min-width: 180px;
}

/* Lock the height of the label area so empty steps don't collapse the layout */
.stepLabelContainer {
  min-height: 68px;      
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;   
  background-color: #d4e9fe; /* pastel blue */
}

/* Keep text centered and clean */
.stepLabel {
  font-size: 12px;
  font-weight: bold;
  color: #202020;
  text-align: center;
  white-space: normal;
}

/* Add a transparency effect for thumnbail images */
.slideshowDemo {
  background-color: black;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  width: 100%;             /* Fills the container width */
    aspect-ratio: 256 / 192; /* Forces the browser to respect your 4:3 ratio */
    object-fit: contain;     /* Ensures the full image is visible without cropping */
    height: auto;            /* Standard practice to prevent distortion */
}

.thumbnailActive,
.slideshowDemo:hover {
  opacity: 1;
}

/* Add a smooth fade to the main slides when they change */
.mySlides {
  animation: fade 0.3s ease-in-out;
}

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

/* Match the main slideshow images to your site's rounded aesthetic */
.mySlides img {
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Desktop sizing corrections for the Slideshow layout */
@media (min-width: 768px) {
  .slideshowColumn {
    flex: 0 0 calc((100% - 50px) / 6); /* Revert back to 1/6th grid layout for larger screens */
  }
}

@media (max-width: 768px) {
  .slideshowContainer {
    padding: 15px; /* Reduce container padding on smaller screens */
  }
  .next {
    right: 15px; /* Pull arrow inward to match reduced padding */
  }
}


table {
  width: 100%;
  color: white;
  background: #1a2379;
  font-family: sans-serif;
  text-align: left;
  border-radius: 24px;
  border: 4px solid #ccc;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

th, td {
  padding: 12px;
  border: none;
  box-shadow: inset 0 -1px 0 #111, inset -1px 0 0 #111; /* fake grid lines */
}

th {
  box-shadow: inset 0 -2px 0 #ccc, inset -1px 0 0 #111;
}

tr:last-child td {
  box-shadow: inset -1px 0 0 #111; /* remove bottom line */
}


/* Remove the right fake border from column 2 and column 4 */
th:nth-child(2), td:nth-child(2),
th:nth-child(4), td:nth-child(4) {
  box-shadow: inset 0 -1px 0 #111; /* Kept the bottom line, removed the right line */
}

/* Specific override for the header cells in columns 2 and 4 to keep the thicker bottom line */
th:nth-child(2), th:nth-child(4) {
  box-shadow: inset 0 -2px 0 #ccc; 
}

/* Specific override for the very last row to ensure no bottom border remains */
tr:last-child td:nth-child(2), 
tr:last-child td:nth-child(4) {
  box-shadow: none;
}



/* Assign specific widths to the headers to control the table grid */
th:nth-child(1) {
  width: 30%;
}

th:nth-child(2) {
  width: 33%;
}

th:nth-child(3) {
  width: 5%;
}

th:nth-child(4) {
  width: 5%;
}

th:nth-child(5) {
  width: 27%;
}

/* Apply the 8% left spacing to both the header and data cells of Column 1 */
th:nth-child(1), td:nth-child(1) {
  padding-left: 4%;
}

/* Apply the 4% right spacing to both the header and data cells of Column 5 */
th:nth-child(5), td:nth-child(5) {
  padding-right: 4%;
}

/* Apply the light right border ONLY to data cells in column 1 */
th:nth-child(1) {
  box-shadow: inset 0 -2px 0 #ccc, inset -2px 0 0 #ccc;
}

/* Override the header cell in column 1: Keep light bottom, revert right edge back to dark */
td:nth-child(1) {
  box-shadow: inset 0 -1px 0 #111, inset -2px 0 0 #ccc;
}

/* Override the very last cell in column 1 so it doesn't have a dark bottom border */
tr:last-child td:nth-child(1) {
  box-shadow: inset -2px 0 0 #ccc;
}



td:nth-child(n+2) {
  background-color: #242d87;
}

/* Base styles for both icons */
.check-icon, .cross-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

/* Specific image paths */
.check-icon {
  background-image: url('images/green-tick.webp');
}

.cross-icon {
  background-image: url('images/red-cross.webp');
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Top Header Row - First Column: Light bottom line, light right divider */
thead th:nth-child(1) {
  box-shadow: inset 0 -2px 0 #ccc, inset -2px 0 0 #ccc;
}

/* Body Rows - First Column (handles both th and td tags): NO bottom line, light right divider */
tbody th:nth-child(1),
tbody td:nth-child(1) {
  box-shadow: inset 0 -1px 0 #111, inset -2px 0 0 #ccc;
}



.step-text {
	color: white; 
	padding: 70px;
	display: none;
}



.faq-section {
	width: 74%;
	margin-left: 13%;
}