a#logo h1 {
    color: #fcfafa;
  }
  
  #header {
    background: #42a436;
  }
  .searchbox {
    margin-top: 0.5rem;
    position: relative;
    border: 1px solid #547d59;
    background: #3e8a22;
    border-radius: 4px;
  }

  .footer {
    text-align: center;
    font-size: 0.9em;
    color: #999;
    margin-top: 1em;
    border-top: 1px solid #e0e0e0;
  }
  

  /* Hides the sub-menu item if parent not active */
/* .dd-item .dd-item ul li {
    display: none;
}

.dd-item .dd-item.active ul li,
.dd-item.parent > ul > li {
    display: block;
}

.dd-item.parent > ul > li.dd-item.active > ul > li > ul > li {
    display: none;
}

.dd-item.parent > ul > li.dd-item.active > ul > li {
    display: block;
} */

#sidebar h5{
  margin: 0.5rem 0 0;
  line-height: 1.7;
}

/* Q & A */
.qa-block { margin: 1rem 0; font-family: sans-serif; }

/* Question always visible */
.qa-question { font-weight: 600; margin-bottom: 0.25rem; }

/* Hide checkbox completely */
.qa-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Answer toggle line */
.qa-toggle { 
  cursor: pointer; 
  color: #8b8b8b; 
  font-weight: normal;
  font-style: italic; 
  user-select: none; 
  display: inline-flex; 
  align-items: center; 
  margin-bottom: 0.25rem;
  transition: color 0.3s ease;
}

/* Triangle rotation */
.qa-toggle::before { 
  content: "▶"; 
  display: inline-block; 
  font-style: normal;
  margin-right: 0.3rem; 
  transition: transform 0.8s ease; 
}

/* Answer content initially hidden */
.qa-answer { 
  overflow: hidden; 
  max-height: 0; 
  opacity: 0; 
  transform: translateY(-5px); 
  transition: max-height 0.8s ease, opacity 0.8s ease, transform 0.8s ease; 
}

/* When checkbox is checked, show the answer */
.qa-checkbox:checked + .qa-toggle + .qa-answer { 
  max-height: 1000px; 
  opacity: 1; 
  transform: translateY(0); 
}

/* Rotate triangle when open */
.qa-checkbox:checked + .qa-toggle::before { 
  transform: rotate(90deg); 
}


.gray-box {
  background-color: #f5f5f5;   /* light gray background */
  padding: 15px 20px;          /* generous padding */
  border: 1px solid #ccc;      /* very thin visible border */
  border-radius: 5px;          /* optional rounded corners */
  display: block;              /* full width */
  max-width: 100%;             /* prevent overflow */
  margin: 20px 0;              /* spacing above and below */
}

.gray-box img {
  display: block;
  max-width: 100%;             /* scale image to container width */
  height: auto;
  margin: 0 auto;              /* center image */
}

.gray-box figcaption {
  font-size: 0.95rem;
  color: #555;
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}



.orange-box {
  background-color: #ffdbc9;   /* light orange background */
  padding: 15px 20px;          /* generous padding */
  border: 1px solid #f0a1a1;      /* very thin visible border */
  border-radius: 5px;          /* optional rounded corners */
  display: block;              /* full width */
  max-width: 100%;             /* prevent overflow */
  margin: 20px 0;              /* spacing above and below */
}

.blue-box {
  background-color: #dff2f8;   /* light blue background */
  padding: 15px 20px;          /* generous padding */
  border: 1px solid #5bc0de;      /* very thin visible border */
  border-radius: 5px;          /* optional rounded corners */
  display: block;              /* full width */
  max-width: 100%;             /* prevent overflow */
  margin: 20px 0;              /* spacing above and below */
}


.image-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.image-row img {
  height: 150px;
  object-fit: contain;
}


:root {
  --thumb-height: 150px;   /* change this to adjust image height */
  --thumb-max-width: 220px;/* max width for each item to avoid huge items */
  --gap: 12px;
}

.image-row2 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center; /* center the whole row */
  align-items: flex-start; /* top-align items so names don't affect row alignment */
}

/* Each item is a column: image on top, name underneath */
.image-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* prevent flex items from growing/shrinking unexpectedly */
  flex: 0 0 auto;

  /* limit how wide a single item can become (prevents one huge image from breaking layout) */
  max-width: var(--thumb-max-width);

  /* optional: ensure items shrink on small screens */
  width: min(var(--thumb-max-width), 100%);
  box-sizing: border-box;
}

/* Image rules: force uniform displayed height, preserve aspect ratio, never stretch */
.image-item img {
  display: block;
  height: var(--thumb-height); /* all images display at the same height */
  width: auto;                 /* keep intrinsic width-to-height ratio */
  max-width: 100%;             /* don't overflow the container */
  object-fit: contain;         /* show full image without cropping */
}

/* Name styling */
.image-name {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.2;
  word-break: break-word;
  max-width: 100%;
}



.two-col {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.col-left {
  flex: 2; /* 66% */
}

.col-right {
  flex: 1; /* 33% */
  display: flex;
  justify-content: flex-end; /* keep video on the right */
}

.col-right video {
  width: 100%;
  height: auto;
  max-width: 300px; /* <-- LIMIT THE VIDEO SIZE HERE */
  border-radius: 8px;
}



@media (max-width: 768px) {
  .two-col {
      flex-direction: column;
  }
  .col-right {
      justify-content: center;
  }
  .col-right video {
      max-width: 90vw;
  }
}