body {
  background-color: #f2f4f7;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
a:hover {
  text-decoration: none !important;
}

body.night-mode {
    background-color:#0d0d17;
    color: rgb(229, 235, 229);
}
.night-mode .dropdown-toggle {
  background-color: #222831;
  color:#01a8b0;
}
.night-mode button {
  border: none !important;
}
.night-mode .header {
    background-color: rgba(52, 206, 185, 0.14);
    border-bottom: rgba(52, 206, 185, 0.14);
}
.night-mode .post-item {
    background-color: #222831;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.night-mode .nav-links {
  background-color: #222831;
}
.night-mode .nav-links a {
    color:#01a8b0 !important;
}
.night-mode .submenu {
    background-color: #222831 !important;
}
.night-mode .submenu a {
    color:#01a8b0;
}
.night-mode .nav-links a:hover {
  color: #171f2c !important;
    background-color: #01a8b0;
}

.night-mode .rheader {
    background-color: #444;
}

.night-mode .box {
    background-color: #333;
}

.night-mode .close-btn {
    color:rgb(229, 235, 229);
    background-color: #555;
}

.night-mode .search-container input {
    background-color: #333;
    color:rgb(229, 235, 229);
    border: 1px solid #444;
}

.night-mode .navigation-tabs {
    background-color: #222831;
    color:rgb(229, 235, 229);
    border: 1px solid #444;
}.night-mode .post-description {
    color:rgb(229, 235, 229);
}
.night-mode .close-btn {
    background-color: #222831;
    color:rgb(229, 235, 229);
}
.night-mode .left-section, 
.night-mode .left-section .social-icons a {
    color:  #01a8b0;
}

.night-mode .header .social-icons a:hover {
    background-color: rgb(102, 211, 195);
  }


/* .night-mode .header .right-section a:hover {
    color:  rgb(56, 192, 172) !important;
} */
.night-mode .title {
    color:#01a8b0;
}


.night-mode .box.articleEyecatcher {
    background-color:#222831;
}
.night-mode .content {
    background-color:rgba(255, 255, 255, 0.03);
}
.night-mode .content p {
    color:#01a8b0;
}
.night-mode .content p:hover {
    color:#01a8b0;
}
.night-mode .feature-title, .night-mode .feature-icon {
    color:#01a8b0;
}

.night-mode .feature-horizontal:hover .feature-icon  {
      transform: scale(1.2);
      color:#01a8b0; /* Slightly lighter pink on hover */
    }
    .night-mode .feature-horizontal:hover h3  {
        transform: scale(1.0);
      color:#01a8b0; /* Slightly lighter pink on hover */
    }

.night-mode .left-div,
.night-mode .right-div {
    background-color: #222831;
}
.night-mode .feature-horizontal {
    background-color:rgba(255, 255, 255, 0.03);
}
.night-mode .feature-description {
    color:rgb(229, 235, 229);
}
/* Custom scrollbar styles for dark mode */
.night-mode .left-div::-webkit-scrollbar, .night-mode .right-div::-webkit-scrollbar {
    width: 10px;
}
.night-mode .left-div::-webkit-scrollbar-track, .night-mode .right-div::-webkit-scrollbar-track {
    background: #222831;
}

.night-mode .left-div::-webkit-scrollbar-thumb, .night-mode .right-div::-webkit-scrollbar-thumb {
    background:#293a4b;
    border-radius: 10px; /* Optional: Rounded scrollbar thumb */
}


/* Make scrollbar overlap content (no extra space) */
#edit-modal .modal-content {
  scrollbar-gutter: stable both-edges; /* Modern browsers fallback */
  overflow: overlay; /* The key: allows scrollbar to overlap content */
}
/* Hide scrollbar buttons (arrows) */
.night-mode .innerDiv::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

/* Scrollbar width */
.night-mode .innerDiv::-webkit-scrollbar {
  width: 8px;
}

/* Scrollbar thumb (draggable part) */
.night-mode .innerDiv::-webkit-scrollbar-thumb {
  background: rgba(100, 110, 120, 0.6);
  border-radius: 4px;
}

/* Thumb hover effect */
.night-mode .innerDiv::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 110, 120, 0.9);
}

/* Scrollbar track (background behind thumb) */
.night-mode .innerDiv::-webkit-scrollbar-track {
  background: transparent; /* transparent background */
}
.night-mode .innerDiv{
    background: #222831 !important;
}
.night-mode .modal-content{
    background: #222831;
}



.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  flex-wrap: wrap;
  background: #f8f8f8;
}

.header .left-section,
.header .right-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.header .left-section {
  flex: 1;
}

.header .left-section span {
  color: #217468;
  font-size: 14px;
}

.header .social-icons {
  display: flex;
  gap: 10px;
}

.header .social-icons a {
  color: #217468;
  text-decoration: none;
  font-size: 16px;
  border: 1px solid #217468;
  padding: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
}

.header .social-icons a:hover {
  background-color: #217468;
  color: #e3f1e4;
}

.header .right-section a {
  color: #217468;
  text-decoration: none;
  font-size: 14px;
}

.header .right-section a:hover {
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .header .left-section,
  .header .right-section {
    justify-content: center;
  }

  .header .social-icons {
    justify-content: center;
  }
}


.navigation-tabs {
    position: sticky;
    top: 0; /* Makes it stick to the top of the viewport */
    display: flex;
    justify-content: flex-end; /* Aligns to the right */
    gap: 10px; /* Adds spacing between items */
    background-color: #217468;
    padding: 10px 0; /* Slightly reduce padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adjusted box-shadow for better visibility */
    z-index: 1000; /* Ensures it stays above other elements */
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    align-items: center;
}

.nav-links.show {
    display: flex;
    flex-direction: column; /* Maintain the dropdown format */
}

.nav-links a {
    color: white !important;
    text-decoration: none;
    padding: 5px 15px; /* Reduce horizontal and vertical padding */
    font-weight: 500;
    border-radius: 8px;
    font-size: 12px; /* Set the desired font size */
    transition: color 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

.nav-links a:hover {
    background-color: #e3f1e4;
    color: rgb(16, 77, 51) !important;
    border-radius: 8px;
}

.submenu {
    display: none;
    position: absolute;
    background-color: #217468;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 4px;
    z-index: 1000;
}

.menu-item {
    position: relative;
    display: inline-block; /* keeps it aligned with other tabs */
}

.menu-item .submenu {
    display: none;
    position: absolute;
    top: 100%; /* directly below the parent link */
    left: 0;
    background-color: #217468;
    min-width: 200px; /* or whatever width you want */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* nice shadow */
    z-index: 1000;
}

.menu-item:hover .submenu {
    display: block;
}
.search-container input {
    width: 200px;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin: 0 10px;
}

.dropdown-container {
    display: flex;
    justify-content: flex-start; /* Aligns the .dropdown-toggle to the left */
   
}

.dropdown-toggle {
    display: none;
    background-color: #ffffff;
    color: #217468;
    border: none;
    margin-right: 10px;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-left: auto; /* Ensures no extra margin on the left side */
}

.dropdown-toggle i {
    margin-right: 5px;
}



.dcontainer {
  display: flex;
  margin: 0 auto;
  padding: 20px;
  max-width: 100%;
}

.left-div, .right-div {
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  position: sticky;
  top: 80px; /* Adjust to match top bar height */
  height: calc(100vh - 80px); /* Full height minus top bar */
  box-sizing: border-box;
  overflow-y: auto;    
}
#close-btn {
  display: none !important;
}

.left-div, .right-div {
left: 0;
width: 29%;
}

/* Custom scrollbar styles for dark mode */
.left-div::-webkit-scrollbar, .right-div::-webkit-scrollbar {
    width: 10px;
}

.left-div::-webkit-scrollbar-track, .right-div::-webkit-scrollbar {
    background: #f8f8f8;; /* Dark background for the scrollbar track */
}

.left-div::-webkit-scrollbar-thumb, .right-div::-webkit-scrollbar-thumb {
    background:rgb(202, 202, 202); /* Gray color for the scrollbar thumb */
    border-radius: 10px; /* Optional: Rounded scrollbar thumb */
}
html::-webkit-scrollbar {
  width: 15px;
}

/* Scrollbar track (background) */
html::-webkit-scrollbar-track {
  background: #f8f8f8; /* Light background */
}

/* Scrollbar thumb (draggable part) */
html::-webkit-scrollbar-thumb {
  background: rgb(202, 202, 202); /* Gray color */
  border-radius: 5px; /* Rounded edges */
}
.dcontent {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  width: 80%; 
  margin-left: 30px;
  margin-right: 30px;
}

.annualcontent {
  flex: 1;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  width: 80%; 
}

.post-item{
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 30px;      /* Set a fixed width */
    height: 30px;     /* Set a fixed height equal to the width for a perfect circle */
    font-size: 20px;   /* Set the font size for the "X" */
    color: #888;      /* Color of the "X" */
    text-align: center;
    line-height: 30px; /* Center the "X" vertically inside the circle */
    border-radius: 50%; /* Makes the button circular */
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.close-btn:hover {
    /* Change text color when hovering */
    background-color: rgba(170, 172, 171, 0.84); /* Red background on hover */
}
.post-item img {
  width: 100%;
  height: auto; /* Ensure proper scaling */
}

.post-description{
    font-size: .9rem;
    color: #666;
    line-height: 1.5;
    padding-left: 10px;
    padding-right: 10px;
}
.rheader {
background-color:rgba(28, 131, 114, 0.13);
  color: black;
  font-weight: bold;
  border-radius: 2px;
  padding: 10px;    
  text-align: center;
  font-size: 1.5rem;
  width: 100%; /* Ensures the header takes the full width */
}
.rcontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
  width: 100%; /* Ensures it takes the full width */
}

.rcontainer a {
  text-decoration: none; /* Removes the underline */
  color: #217468;       /* Changes the color */
}
.rcontainer a:hover {
  color:rgb(48, 168, 150);        /* Change color on hover */
}
.box {
  position: relative; /* Position for overlay */
  width: 90%;
  margin: 5px;
  padding: 0; /* Removed padding for clean edges */
  background-color: #f4f4f4;
  text-align: center;
  border-radius: 5px;
  overflow: hidden; /* Ensures overlay stays within bounds */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.box.eyecatcher {
    position: relative;
    width: 30%;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    background-color: #34495e; /* Background for the "See More" box */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.box.eyecatcher:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.box.eyecatcher img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box.eyecatcher:hover .overlay {
    background: rgba(24, 95, 80, 0.7);
}
.sidebar-divider {
    border: 1px solid #ddd;
    margin: 20px 0;
}
.box img {
  display: block;
  width: 100%;
  height: auto;
}
.box:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.box.articleEyecatcher {
  position: relative;
  width: 100%;
  height: 100px; /* Fixed height */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  background-color: #f8f9fa;
  display: flex;
  align-items: stretch;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box.articleEyecatcher:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.content {
  flex: 60%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  background-color: #f8f9fa;
  overflow: hidden;
}

.content p {
  margin: 0;
  overflow: hidden;
  /* REMOVE line-clamp to allow JavaScript truncation */
  display: block;
  white-space: normal;
}

.image {
  flex: 40%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image:hover img {
  transform: scale(1.1);
}

.card-subtitle {
  font-size: 16px;
  color: #34495e;
  margin: 0;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(25, 114, 99, 0.8); /* Overlay color */
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s ease, transform 0.3s ease;
    opacity: 0; /* Hidden initially */
    cursor: pointer;
}
.box.eyecatcher:hover .overlay {
    opacity: 1; /* Show overlay on hover */
}
.box:hover .overlay {
  opacity: 1;
}

.overlay i {
    margin-right: 8px; /* Add spacing between icon and text */
}
.overlay a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}
.overlay a:hover {
    text-decoration: underline;
}
.overlay span {
  font-size: .8rem;
  font-weight: bold;
  text-align: center;
}
#toggle-icon {
  transition: transform 0.3s ease;
}

@media (max-width: 992px) {
  .left-div, .right-div {
    display: none; /* Hide sidebars on medium screens */
  }

  .rcontainer {
    flex-direction: column; /* Stack sections vertically */
  }

  .dcontent {
    width: 100%;
  }
}

@media (max-width: 768px) {
    #nightModeToggle {
      top: 92.5vh !important;
    }
    #close-btn {
      display: block !important;
    }
    .nav-links a:hover + .submenu,
    .submenu:hover {
        display: block;
        margin-top: 3px; /* Adjust spacing between the parent link and the submenu */
    }
  .rheader {
    font-size: 1.2rem;
    padding: 10px;
  }
  .box {
    width: 100%;
  }
    .dcontent {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding: 10px; /* Adjust padding for smaller screens */
    }
   
  .logo-container,
  .search-container {
    justify-content: flex-start; /* Ensure both are aligned left on small screens */
  }
  .logo-container {
    order: 1; /* Ensure logo is first */
  }
  .search-container {
    order: 2; /* Ensure search is second */
  }
  .box {
    width: 100%; /* Stack boxes on smaller screens */
  }
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed; /* Sidebar style */
    top: 0; /* Adjust this depending on your header height */
    left: 0;
    width: 190px; /* Width of the sidebar */
    height: 100vh;
    background-color: #217468;
    padding: 20px 10px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 999;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }

  .nav-links.show {
    transform: translateX(0); /* Show sidebar */
  }

  .dropdown-toggle {
    display: block;
    position: absolute;
    left: 10px;
    top: 15px;
    background-color: #217468;
    color: white;
  }

  .menu-item {
    width: 100%;
  }

  .submenu {
    position: static;
    display: none;
    background-color: #1e5f58;
    box-shadow: none;
    padding: 10px;
    margin-left: 10px;
    margin-top: 5px;
    width: 100%;
  }

  .menu-item:hover .submenu,
  .menu-item.active .submenu {
    display: block;
  }
}

@media (max-width: 480px) {
  .rheader {
    font-size: 1rem;
    padding: 8px;
  }
  .box {
    width: 100%;
  }
  .nav-links a:hover + .submenu,
.submenu:hover {
    display: block;
    margin-top: 3px; /* Adjust spacing between the parent link and the submenu */
}

}
.left-container {
  display: flex;
  align-items: center;
}

.logo-container {
  display: flex;
  justify-content: flex-start; /* Align the logo to the left */
}

.logo {
    margin-left: 10px;
  height: 50px; /* Adjust size of the logo */
}
#nightModeToggle {
  position: fixed;
  bottom: 20px; /* Adjust distance from the bottom */
  left: 20px; /* Adjust distance from the left */
  z-index: 1000; /* Ensure it stays above other content */
}


.about-info h2 {
    font-size: 2em;
    color: #2c3e50;
    margin-bottom: 20px;
    text-align: center;
}
.about-info h3 {
    font-size: 1.5em;
    color: #34495e;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
}

.about-info a {
    font-size: 1.1em;
    color: #555;
    text-decoration: none;
    line-height: 1.6;
    margin-bottom: 15px;
}
.about-info p {
  font-size: .8em;
  color: #555;
  line-height: 1.6;

}

    .contact p,
    .mission p {
        margin-bottom: 10px;
    }
    .contact h3,
    .mission h3 {
        color: rgb(45, 148, 132);
    }
    .contact a {
        color: rgb(45, 148, 132);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .contact a:hover {
        color:rgb(51, 170, 152);
    }

    .map-container {
        margin-top: 30px;
    }

    iframe {
        border-radius: 8px;
    }
    .title {
        font-weight: bold;
    }
    .title:hover {
      color: #00cdd8;
  }
    .feature-horizontal {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background: #fff;
      padding: 20px;
      margin: 10px 0;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      width: 100%;
    }
    .feature-horizontal h3 {
        color: #217468;
    }
    .feature-icon {
      font-size: 2.5rem;
      color: #217468;
      margin-right: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.3s ease, color 0.3s ease;
    }

    .feature-horizontal:hover .feature-icon  {
      transform: scale(1.2);
      color:rgb(47, 161, 144); /* Slightly lighter pink on hover */
    }
    .feature-horizontal:hover h3  {
        transform: scale(1.0);
      color:#03cfda;; /* Slightly lighter pink on hover */
    }
    .feature-content {
      text-align: left;
    }

    .feature-title {
      font-size: 1.5rem;
      margin-bottom: 10px;
      color: #333;
    }

    .feature-description {
      font-size: .9rem;
      color: #666;
      line-height: 1.5;
    }

    /* Mobile responsiveness */
    @media (max-width: 768px) {
      .feature-horizontal {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
      }

      .feature-icon {
        margin: 0 0 15px 0;
      }
    }
    #close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      z-index: 1001;
    }
    
    .night-mode #nightModeToggle {
      color:rgb(255, 255, 255) !important;
  }
  #nightModeToggle {
      height: 35px;
      width: 35px;
      position: fixed; /* Changed from absolute to fixed */
      top: 94.5vh;
      left: 2vh;
      background-color:rgba(255, 255, 255, 0.23) !important;
      border-radius: 50%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease-in-out, color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
      z-index: 1000; /* Optional: ensure it appears above other elements */
  }

  #nightModeToggle:hover {
      transform: scale(1.6) !important;
      color: rgb(32, 170, 149) !important;
      text-shadow: 0 0 8px rgba(32, 170, 149, 0.8);
  }