/* Reset some default styles */
    body, ul {
    margin: 0;
    padding: 0;
   }
   
   /* Global reset to prevent overflow issues */
   * {
     box-sizing: border-box;
     }
   
.navbar {
    background-color: #191970;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
 }

 .navbar .logo {
   color: white;
   font-size: 1.6rem;
 }

 .navbar-logo {
  padding-right: 5px; /* Try reducing this */
}

.navbar-buttons {
  padding-left: 3px; /* Likewise, reduce this */
}


 .nav-links {
   list-style: none;
   display: flex;
   gap: 1rem;
 }

 .nav-links li a {
   background-color: white;
   color: darkblue;
   padding: 0.5rem 0.5rem;
   text-decoration: none;
   border-radius: 4px;
   font-size: 1.0rem;
 }

 .nav-links a {
     text-decoration: none;     color: white;
     font-weight: 500;

     transition: color 0.3s ease;
  }

  .nav-links a:hover {
     color: #f39c12;
  }

  .nav-links .active {
     border-bottom: 2px solid #f39c12;
  }

   button {
    font-size: 1.2rem;        /* increases text size */
    color: white;             /* text color */
    background-color: #007BFF; /* button background */
    padding: 10px 20px;       /* space inside the button */
    border: none;             /* removes default border */
    border-radius: 5px;       /* optional: rounded corners */
    cursor: pointer;          /* changes cursor on hover */
   }

.split-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.split-section .text {
  flex: 1 1 45%;
  padding: 1rem;
}

.split-section .media {
  flex: 1 1 45%;
  padding: 1rem;
}

.split-section img,
.split-section video,
.split-section iframe {
  width: 100%;
  height: auto;
  border: 4px solid #ccc;
  border-radius: 8px;
}

   .section-divider {
     border: none;
     height: 3px;
     background: linear-gradient(to right, #c00, #f00, #c00);
     margin: 2rem 0;
     box-shadow: 0 1px 3px rgba(0,0,0,0.2);
     border-radius: 2px;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      background-color: #f9f9f9; /* Soft complementary tone */
      color: #333;
    }

    header {
     background-color: #679265;
     color: white;
     padding: 20px;
    }

    .project {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      align-items: flex-start;
    }

    .project-text, .project-media {
      flex: 1 1 45%;
      min-width: 300px;
    }

    .project-text h2 {
      color: #27ae60;
      font-size: 1.5rem;
    }

    .project-text p {
      line-height: 1.6;
      font-size: 1.2rem;
    }

    .full-text {
      background-color: #f0f0f0;
      /* border-left: 6px solid #2c3e50; */
      padding: 1rem 2rem;
      margin-bottom: 2rem;
      font-style: italic;
      font-size: 1.2rem;
    }

    .text-extend {
      /* background-color: #f0f0f0; */
      padding: 0rem 0rem;
      margin-bottom: 2rem;
      line-height: 1.6;
      font-size: 1.2rem;
    }

    .full-image img {
      width: 100%;
      height: auto;
      border: 4px solid #ccc;
      border-radius: 8px;
      margin-bottom: 2rem;
     }

.pdf-frame {
  width: 100%;
  height: 900px;
  border: none;
  display: block;
}
/* .text-wrap-section {
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
} */

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

 .image-wrap-left {
  float: left;
  margin: 0 1.5 1.0rem 0rem; /* Top, Right, Bottom, Left */
  margin-right: 1.5rem !important;
  max-width: 40%;
  /* min-width: 400px !important; */
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  /* border: 2px dashed red; */
}

 .image-wrap-right {
  float: right;
  margin: 0 0 1rem 1.5rem;
  max-width: 40%;
  min-width: 35% !important;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

.text-container-A {
  border: 4px solid #c00;
  border-radius: 12px;
  padding: 1.5rem;
  background-color: #fff8f8; 
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
}

.text-container-A h2{
   color: #27ae60; 
   font-size: 1.5rem;
 }

.text-B h2 {
  font-size: 1.8rem;
  text-align: center;
}

/* .media-text-section-new {
  display: flex;
  flex-wrap: nowrap; /* prevent wrapping */
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem;
}

/* .text-container {
  flex: 1 1 60%;
  min-width: 300px;
  margin: 0 0 1rem 0;
  padding: 0;
  line-height: 1.6;
  font-size: 1.0rem;
} */

.media-container {
  flex: 1 1 40%;
  max-width: 40%;
} */

.media-container img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 500px;
}

/* Optional modifiers for image shape */
.image-tall {
  width: 80%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}

/* Optional modifiers for image shape */
.image-wide {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


   .text-container {
      margin: 0;
      padding: 0;
      line-height: 1.6;
      font-size: 1.0rem;
      margin: 0 0 1rem 0; /* Top: 0, Right: 0, Bottom: 1rem, Left: 0 */
      /* flex: 1; */
    } 

    .text-container p{
      margin: 0;
      padding: 0;
      line-height: 1.6;
      font-size: 1.1rem;
      margin: 0 0 1rem 0; /* Top: 0, Right: 0, Bottom: 1rem, Left: 0 */
    }

    .text-container h2{
      color: #27ae60; 
      font-size: 1.5rem;
    }

.video-container {
  position: relative;
  cursor: pointer;
}

.video-container iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  align-items: center;
  border: 4px solid #ccc;
  border-radius: 8px;
}

.video-thumb {
  transition: opacity 0.3s ease;
}

/*    .video-wrapper {
      position: relative;
      cursor: pointer;
    } */

    .video-wrapper-4by3 {
      width: 100%;
      max-width: 640px;
      margin: 40px auto;
      aspect-ratio: 4 / 3;
      position: relative;
      background-color: #000;
      overflow: hidden;
    }

    .video-thumbnail {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }

    .player-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
    }

    .player-container iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

   .video-wrapper-16by9 {
      width: 100%;
      max-width: 640px;
      margin: 40px auto;
      aspect-ratio: 16 / 9;
      position: relative;
      background-color: #000;
      overflow: hidden;
    }

    .video-thumbnail {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
      /* border: 2px dashed red; */ /* for debug */
    } 
 
    .video-thumbnail {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100% !important;
      object-fit: cover;
      cursor: pointer;
      z-index: 1;
      /*border: 2px dashed red;*/ /* for debug */
    } 


    .player-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
    } 

    .player-container iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    } 

.image-gallery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 512px;
  margin: 40px auto;
  width: 90%;
}

.gallery-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.gallery-border {
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f9f9f9;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 4px;
  flex: 1;
  max-width: 95%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-frame {
  flex: 1;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.gallery-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

.gallery-item.active {
  opacity: 1;
  z-index: 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
  padding: 10px;
  text-align: center;
}

.label-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  text-align: center;
}

.controls-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  gap: 10px;
}

.controls-right button {
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
}

/* Responsive layout for small screens */
@media (max-width: 600px) {
  .gallery-layout {
    flex-direction: column;
    align-items: center;
  }

  .label-left,
  .controls-right {
    text-align: center;
    padding: 5px;
  }

  .label-left h2 {
    font-size: 1.2em;
    margin: 0;
  }

  .controls-right button {
    font-size: 1em;
    margin: 5px;
  }

  .gallery-border {
    width: 100%;
    padding: 0;
  }

  .gallery-frame img {
    width: 100%;
    height: auto;
  }
}

.spacer {
  height: 1rem;
}

#get-involved {
  font-size: 1.2rem;
  line-height: 1.6;
}

#get-involved ul {
  padding-left: 3rem; /* or try 1.5rem for a subtler indent */
}

@media (max-width: 600px) {
  .image-wrap-left,
  .image-wrap-right {
    float: none;
    display: block;
    margin: 0 auto 1rem auto;
    max-width: 100%;
    height: auto;
  }

  .text-container {
    padding: 1rem;
    border-radius: 0;
    font-size: 1rem;
    line-height: 1.5;
  }

  .text-wrap-section {
    padding: 1rem;
  }
}

@media (max-width: 600px) {
  .pdf-frame {
    height: 800px;
  }
}

@media (max-width: 1100px) {
  .navbar {
    flex-direction: column;
    align-items: center;
  }

  .nav-links {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
  }

  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-links li a {
    display: inline-block;
    width: 80%;
    margin-bottom: 0.5rem;
  }
}