/* General Body Reset (Optional, but good for consistent rendering) */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base Styles for Header (Desktop First) */
.es-header {
  background-color: #ffffff; /* White background */
  padding: 15px 0; /* Vertical padding */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  position: relative; /* Needed for z-index or absolute positioning if content below */
  z-index: 1000; /* Ensure header stays on top */
}

.es-header-container {
  max-width: 1200px; /* Max width of content */
  margin: 0 auto; /* Center the container */
  display: flex;
  justify-content: space-between; /* Space logo and nav apart */
  align-items: center; /* Vertically align items */
  padding: 0 25px; /* Horizontal padding for container */
}

.es-logo {
  display: flex; /* Helps align image and text if text were added */
  align-items: center;
  text-decoration: none; /* Remove underline from logo link */
}

.es-logo img {
  height: 50px; /* Logo height */
  display: block; /* Remove extra space below image */
  margin-right: 10px; /* Space between logo image and text if any */
}

/* Optional: Add text next to logo as seen in image */
.es-logo span {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}


.es-main-nav {
  display: flex; /* Horizontal nav links on desktop */
  gap: 30px; /* Space between nav items */
}

.es-main-nav a {
  text-decoration: none; /* Remove underline */
  color: #555; /* Darker text color */
  font-size: 16px;
  font-weight: 500; /* Medium weight */
  padding: 8px 0; /* Vertical padding */
  position: relative; /* For the underline effect */
  transition: color 0.3s ease;
}

.es-main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* Position at the bottom of the link */
  width: 0; /* Start with no width */
  height: 2px; /* Underline thickness */
  background-color: #007bff; /* Blue underline color */
  transition: width 0.3s ease-out; /* Smooth transition for width */
}

.es-main-nav a:hover,
.es-main-nav a:focus {
  color: #007bff; /* Blue hover color */
}

.es-main-nav a:hover::after,
.es-main-nav a:focus::after {
  width: 100%; /* Expand underline on hover/focus */
}

/* Active link styling (you'd add a class with JS or server-side) */
.es-main-nav a.active {
  color: #007bff;
  font-weight: 600;
}

.es-main-nav a.active::after {
  width: 100%;
}


/* Hamburger Button Styles */
.es-menu-toggle {
  display: none; /* Hidden by default on desktop */
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  color: #333; /* Icon color */
  font-size: 0; /* Hide any default button text */
  outline: none; /* Remove outline on focus */
}

.es-menu-toggle:focus-visible {
  outline: 2px solid #007bff; /* Focus ring for accessibility */
  outline-offset: 2px;
}

.es-menu-toggle svg {
  width: 28px;
  height: 28px;
  vertical-align: middle; /* Align icon nicely */
  transition: transform 0.3s ease;
}

/* Optional: 'X' icon for hamburger when open - requires a second SVG or CSS transform */
.es-menu-toggle.is-open .es-icon-hamb {
  /* Example: rotate to form an X if you only have one SVG */
  transform: rotate(90deg); /* Or swap SVG to an 'X' icon */
}

/* 
  Mobile Styles (max-width: 768px for tablet/mobile breakpoint)
*/
@media (max-width: 768px) {
  .es-header-container {
    padding: 0 20px; /* Adjust padding for smaller screens */
  }

  .es-logo img {
    height: 45px; /* Slightly smaller logo on mobile */
  }

  .es-menu-toggle {
    display: block; /* Show hamburger on mobile */
  }

  .es-main-nav {
    display: none; /* Hide nav by default on mobile */
    position: absolute; /* Position dropdown menu */
    top: 100%; /* Below the header */
    left: 0;
    width: 100%; /* Full width */
    background-color: #ffffff; /* White background for dropdown */
    flex-direction: column; /* Stack links vertically */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for dropdown */
    border-top: 1px solid #eee; /* Separator from header */
    padding: 10px 0; /* Vertical padding inside dropdown */
  }

  .es-main-nav.is-open {
    display: flex; /* Show nav when 'is-open' class is present */
  }

  .es-main-nav a {
    padding: 15px 25px; /* Larger touch targets, more padding */
    border-bottom: 1px solid #f0f0f0; /* Light separator between links */
    text-align: left; /* Align text to the left */
    width: 100%; /* Ensure full clickable width */
  }

  .es-main-nav a:last-child {
    border-bottom: none; /* No border for the last item */
  }

  /* Remove underline effect for mobile dropdown items */
  .es-main-nav a::after {
    display: none;
  }

  .es-main-nav a:hover,
  .es-main-nav a:focus {
    background-color: #f8f8f8; /* Light background on hover for mobile */
    color: #007bff;
  }
}

/* 
  Even smaller screens (e.g., specific phone sizes) 
  Further adjustments can be made here if needed.
*/
@media (max-width: 480px) {
  .es-header-container {
    padding: 0 15px;
  }
  .es-logo img {
    height: 40px;
  }
}



    /* Hero Banner */
    .hero-banner {
      position: relative;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background-size: cover;
      background-position: center;
      animation: fadeIn 1.5s ease forwards;
    }

    .hero-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(25, 118, 210, 0.5), rgba(0, 0, 0, 0.7)); /* Adjusted blue-900/50 to #1976d2/50 */
      animation: slowPulse 6s infinite ease-in-out;
    }

    .hero-banner h2 {
      position: relative;
      font-size: 2.5rem;
      font-weight: bold;
      color: white;
      z-index: 10;
      animation: slideUp 2s ease forwards;
    }

    /* Who We Are */
    .who-we-are {
      max-width: 960px;
      margin: 0 auto;
      padding: 4rem 1.5rem;
      text-align: center;
      animation: fadeInUp 1.5s ease forwards;
    }

    .who-we-are h3 {
      font-size: 2rem;
      font-weight: bold;
      color: #1976d2; /* Changed to #1976d2 */
      margin-bottom: 1rem;
      animation: bounceIn 1.5s ease;
    }

    .who-we-are p {
      color: #4a4a4a;
      line-height: 1.75;
      background: linear-gradient(to right, #f8f8f8, white, #f8f8f8);
      padding: 1.5rem;
      border-radius: 0.75rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.5s ease;
    }

    .who-we-are p:hover {
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
      transform: scale(1.02);
    }

    .who-we-are strong {
      color: #1976d2; /* Changed to #1976d2 */
    }

    /* Vision & Mission */
    .vision-mission {
      background-color: #f0f0f0;
      padding: 4rem 0;
    }

    .vision-mission .container {
      display: grid;
      gap: 2.5rem;
    }

    @media (min-width: 768px) {
      .vision-mission .container {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .vision-mission .card {
      background-color: white;
      padding: 2rem;
      border-radius: 0.75rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      text-align: center;
      transition: all 0.5s ease;
    }

    .vision-mission .card:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    }

    .vision-mission .card i {
      font-size: 3.125rem;
      margin-bottom: 1rem;
    }

    .vision-mission .card h4 {
      font-size: 1.5rem;
      font-weight: bold;
      color: #1976d2; /* Changed to #1976d2 */
      margin-bottom: 0.75rem;
    }

    .vision-mission .card p {
      color: #525252;
    }

    .vision-mission .card:first-child {
      animation: fadeInLeft 1.5s ease forwards;
    }

    .vision-mission .card:last-child {
      animation: fadeInRight 1.5s ease forwards;
    }

    /* Core Values */
    .core-values {
      max-width: 960px;
      margin: 0 auto;
      padding: 4rem 1.5rem;
    }

    .core-values h3 {
      font-size: 2rem;
      font-weight: bold;
      color: #1976d2; /* Changed to #1976d2 */
      text-align: center;
      margin-bottom: 2.5rem;
      animation: bounceIn 1.5s ease;
    }

    .core-values .grid {
      display: grid;
      gap: 2rem;
      text-align: center;
    }

    @media (min-width: 768px) {
      .core-values .grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .core-values .value-card {
      background-color: white;
      padding: 1.5rem;
      border-radius: 0.75rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .core-values .value-card:hover {
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
      transform: scale(1.05);
    }

    .core-values .value-card i {
      font-size: 2.5rem;
      margin-bottom: 0.75rem;
    }

    .core-values .value-card h4 {
      font-weight: 600;
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }

    .core-values .value-card p {
      color: #525252;
    }

    .core-values .value-card:nth-child(1) { animation: fadeInUp 1.5s ease forwards; }
    .core-values .value-card:nth-child(2) { animation: fadeInUp 1.5s ease forwards 0.2s; }
    .core-values .value-card:nth-child(3) { animation: fadeInUp 1.5s ease forwards 0.4s; }

    /* Executive Team */
    .executive-team {
      background-color: #f0f0f0;
      padding: 4rem 0;
    }

    .executive-team .container {
      max-width: 960px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .executive-team h3 {
      font-size: 2rem;
      font-weight: bold;
      color: #1976d2; /* Changed to #1976d2 */
      text-align: center;
      margin-bottom: 2.5rem;
      animation: bounceIn 1.5s ease;
    }

    .executive-team .grid {
      display: grid;
      gap: 2.5rem;
      text-align: center;
    }

    @media (min-width: 640px) {
      .executive-team .grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 768px) {
      .executive-team .grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .executive-team .executive-card {
      background-color: white;
      padding: 1.5rem;
      border-radius: 0.75rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .executive-team .executive-card:hover {
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
      transform: scale(1.05);
    }

    .executive-team .executive-card img {
      width: 128px;
      height: 128px;
      margin: 0 auto 1rem auto;
      border-radius: 9999px;
      object-fit: cover;
      border: 4px solid;
      animation: pulse 1.5s infinite ease-in-out;
    }

    .executive-team .executive-card:nth-child(1) img { border-color: #1976d2; /* blue-800 */ }
    .executive-team .executive-card:nth-child(2) img { border-color: #ffdd57; /* yellow-500 */ }
    .executive-team .executive-card:nth-child(3) img { border-color: #2e7d32; /* green-600 */ }

    .executive-team .executive-card h4 {
      font-weight: bold;
      font-size: 1.125rem;
    }

    .executive-team .executive-card p {
      color: #717171;
    }

    .executive-team .executive-card:nth-child(1) { animation: fadeInUp 1.5s ease forwards; }
    .executive-team .executive-card:nth-child(2) { animation: fadeInUp 1.5s ease forwards 0.2s; }
    .executive-team .executive-card:nth-child(3) { animation: fadeInUp 1.5s ease forwards 0.4s; }

    /* Promo Section */
    .promo-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 960px;
      margin: 4rem auto;
      gap: 2.5rem;
      padding: 0 1.5rem;
      animation: fadeInUp 1.5s ease forwards;
    }

    @media (min-width: 768px) {
      .promo-section {
        flex-direction: row;
      }
    }

    .promo-section img {
      border-radius: 0.75rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      width: 100%;
      transition: all 0.5s ease;
      animation: float 3s infinite ease-in-out;
    }

    @media (min-width: 768px) {
      .promo-section img {
        width: 50%;
      }
    }

    .promo-section img:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    }

    .promo-section .content {
      text-align: center;
    }

    @media (min-width: 768px) {
      .promo-section .content {
        width: 50%;
        text-align: left;
      }
    }

    .promo-section .content h3 {
      font-size: 1.5rem;
      font-weight: bold;
      color: #d32f2f; /* red-700 */
      margin-bottom: 0.75rem;
      animation: slideUp 1.5s ease forwards;
    }

    .promo-section .content p {
      color: #525252;
      margin-bottom: 1.25rem;
    }

    .promo-section .content .button {
      display: inline-block;
      background-color: #1976d2; /* blue-800 */
      color: white;
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      text-decoration: none;
      transition: all 0.5s ease;
    }

    .promo-section .content .button:hover {
      background-color: #ffdd57; /* yellow-400 */
      color: black;
      transform: scale(1.1);
    }

    /* Footer */
    footer {
      background-color: #1a202c;
      color: #cccccc;
      padding: 2rem 0;
    }

    footer .container {
      display: grid;
      gap: 1.5rem;
    }

    @media (min-width: 768px) {
      footer .container {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    footer h4 {
      color: white;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    footer p,
    footer li {
      font-size: 0.875rem;
      line-height: 1.5;
    }

    footer ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    footer ul li a {
      color: #cccccc;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    footer ul li a:hover {
      text-decoration: underline;
    }

    footer .copyright {
      text-align: center;
      font-size: 0.875rem;
      margin-top: 1.5rem;
    }

    /* Custom Animations */
    @keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
    @keyframes fadeInUp { from {opacity:0; transform:translateY(40px);} to {opacity:1; transform:translateY(0);} }
    @keyframes fadeInLeft { from {opacity:0; transform:translateX(-40px);} to {opacity:1; transform:translateX(0);} }
    @keyframes fadeInRight { from {opacity:0; transform:translateX(40px);} to {opacity:1; transform:translateX(0);} }
    @keyframes slideUp { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
    @keyframes wiggle { 0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);} }
    @keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
    @keyframes slowPulse { 0%,100%{opacity:0.7;} 50%{opacity:1;} }
    @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.7); } 50% { box-shadow: 0 0 0 10px rgba(25, 118, 210, 0); } } /* Adjusted for the blue color */

    .animate-fadeIn { animation: fadeIn 1.5s ease forwards; }
    .animate-fadeInUp { animation: fadeInUp 1.5s ease forwards; }
    .animate-fadeInLeft { animation: fadeInLeft 1.5s ease forwards; }
    .animate-fadeInRight { animation: fadeInRight 1.5s ease forwards; }
    .animate-slideUp { animation: slideUp 2s ease forwards; }
    .animate-wiggle { animation: wiggle 2s infinite ease-in-out; }
    .animate-float { animation: float 3s infinite ease-in-out; }
    .animate-slowPulse { animation: slowPulse 6s infinite ease-in-out; }
    .animate-bounceIn { animation: fadeInUp 1.5s ease, wiggle 2s infinite ease-in-out; }
    .animate-spin-slow { animation: spin 4s linear infinite; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
    @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }





  /* Basic Reset/Common Styles (if not already present) */
  .section-padding {
    padding: 80px 0;
  }
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }
  .btn-primary {
    background-color: #00008B; /* Dark Blue */
    color: #FFD700; /* Gold */
    border: 2px solid #00008B;
  }
  .btn-primary:hover {
    background-color: #FFD700;
    color: #00008B;
    border: 2px solid #00008B;
  }

  /* About Section Specific Styles */
  .about-section {
    background-color: #f8f8f8; /* Light gray background */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiMwMDAwODkiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djEySDI0VjM0aDEyem0wLTEyVjEwSDI0djEyaDEyek00MiA4VjBoLTEyVjhIMzJ2MmgyVjhoOHptLTE2IDBWMEgwdjhoMTZ6bS02IDI2VjI0SDh2MTJoMTV6bTggMTBWNDJWMzJoMTJWNDRoLTJ6bTAgNlY0Mmgydi02aDJoLTJ2LTJoLTJ2NmgyeiIvPjwvZz48L2c+PC9zdmc+'); /* Subtle pattern */
  }

  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Image on left, content on right */
    gap: 60px; /* Space between columns */
    align-items: center;
  }

  .about-image-wrapper {
    position: relative;
    padding: 15px; /* Creates a border effect */
    background-color: #00008B; /* Dark blue border */
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  .about-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
  }

  .about-content-wrapper {
    text-align: left;
  }

  .section-title {
    font-family: 'Playfair Display', serif; /* A more elegant serif font */
    font-size: 3em;
    color: #00008B; /* Dark Blue */
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
  }

  .section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 4px;
    background-color: #FFD700; /* Gold accent line */
    border-radius: 2px;
  }

  .about-description {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.15em;
    line-height: 1.8;
    color: #333;
    margin-bottom: 35px;
  }

  .about-btn {
    margin-top: 20px;
  }

  /* Responsive Adjustments */
  @media (max-width: 992px) {
    .about-grid {
      grid-template-columns: 1fr; /* Stack columns on smaller screens */
      gap: 40px;
      text-align: center;
    }
    .about-image-wrapper {
      max-width: 500px; /* Constrain image width on small screens */
      margin: 0 auto;
    }
    .section-title::after {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  @media (max-width: 768px) {
    .section-padding {
      padding: 60px 0;
    }
    .section-title {
      font-size: 2.5em;
    }
    .about-description {
      font-size: 1em;
    }
  }


  /* General / Common Styles (if not already defined in your global CSS) */
  .section-padding {
    padding: 80px 0;
  }
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Vision & Mission Section Styles */
  .vision-mission-section {
    background-color: #f0f4f8; /* A very light blue/gray to contrast */
    text-align: center;
  }

  .vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns for Vision and Mission */
    gap: 40px; /* Space between the cards */
    align-items: start; /* Align cards to the top if content height differs */
  }

  .vm-card {
    background-color: #ffffff; /* White background for cards */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 5px solid #00008B; /* Dark Blue top border for distinction */
    height: 100%; /* Ensure cards are same height if possible */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .vm-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); /* Enhanced shadow on hover */
  }

  .vision-card {
    border-color: #00008B; /* Dark Blue for Vision */
  }

  .mission-card {
    border-color: #FFD700; /* Gold for Mission */
  }

  .vm-icon {
    color: #FFD700; /* Gold for icons */
    font-size: 48px; /* Size of the SVG icons */
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background-color: #00008B; /* Dark Blue background for icons */
    border-radius: 50%; /* Circular background */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .mission-card .vm-icon {
    color: #00008B; /* Dark Blue icon in Mission card */
    background-color: #FFD700; /* Gold background for Mission icon */
  }

  .vm-icon svg {
    stroke: currentColor; /* Use currentColor for SVG stroke */
    width: 48px;
    height: 48px;
  }

  .vm-title {
    font-family: 'Playfair Display', serif; /* Elegant serif font */
    font-size: 2.5em;
    color: #00008B; /* Dark Blue */
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
  }

  .vm-title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: #FFD700; /* Gold accent line */
    border-radius: 2px;
  }

  .mission-card .vm-title::after {
    background-color: #00008B; /* Dark Blue accent line for Mission */
  }

  .vm-description {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1em;
    line-height: 1.7;
    color: #555;
    margin-bottom: 0;
  }

  /* Responsive Adjustments */
  @media (max-width: 992px) {
    .vm-grid {
      grid-template-columns: 1fr; /* Stack columns on smaller screens */
      gap: 30px;
    }
    .vm-card {
      padding: 30px;
    }
    .vm-title {
      font-size: 2em;
    }
  }

  @media (max-width: 768px) {
    .section-padding {
      padding: 60px 0;
    }
    .vm-title {
      font-size: 1.8em;
    }
    .vm-description {
      font-size: 1em;
    }
    .vm-icon {
      width: 70px;
      height: 70px;
    }
    .vm-icon svg {
      width: 40px;
      height: 40px;
    }
  }


    /* General section styling - assuming these are within a larger layout */
    .section-container {
        max-width: 960px; /* max-w-6xl */
        margin: 0 auto; /* mx-auto */
        padding: 4rem 1.5rem; /* py-16 px-6 */
    }

    .section-heading {
        font-size: 2rem; /* text-3xl */
        font-weight: bold; /* font-bold */
        color: #1976d2; /* text-blue-800 (converted to #1976d2) */
        text-align: center; /* text-center */
        margin-bottom: 2.5rem; /* mb-10 */
    }

    /* Core Values */
    .core-values .grid {
        display: grid; /* grid */
        gap: 2rem; /* gap-8 */
        text-align: center; /* text-center */
    }

    @media (min-width: 768px) { /* md:grid-cols-3 */
        .core-values .grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .core-values .value-card {
        background-color: white; /* bg-white */
        padding: 1.5rem; /* p-6 */
        border-radius: 0.75rem; /* rounded-xl */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
        transition: all 0.3s ease; /* transition */
    }

    .core-values .value-card:hover {
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* hover:shadow-2xl */
        transform: scale(1.05); /* hover:scale-105 */
    }

    .core-values .value-card i {
        font-size: 2.5rem; /* text-4xl */
        margin-bottom: 0.75rem; /* mb-3 */
    }
    .core-values .value-card .fa-handshake { color: #2e7d32; } /* text-green-600 */
    .core-values .value-card .fa-users { color: #1976d2; } /* text-blue-600 (converted to #1976d2) */
    .core-values .value-card .fa-award { color: #b78c00; } /* text-yellow-600 */

    .core-values .value-card h4 {
        font-weight: 600; /* font-semibold */
        font-size: 1.25rem; /* text-xl */
        margin-bottom: 0.5rem; /* mb-2 */
    }

    .core-values .value-card p {
        color: #525252; /* text-gray-600 */
    }

    /* Executive Team */
    .executive-team {
        background-color: #f0f0f0; /* bg-gray-100 */
        padding: 4rem 0; /* py-16 */
    }

    .executive-team .container {
        max-width: 960px; /* max-w-6xl */
        margin: 0 auto; /* mx-auto */
        padding: 0 1.5rem; /* px-6 */
    }

    .executive-team .grid {
        display: grid; /* grid */
        gap: 2.5rem; /* gap-10 */
        text-align: center; /* text-center */
    }

    @media (min-width: 640px) { /* sm:grid-cols-2 */
        .executive-team .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 768px) { /* md:grid-cols-3 */
        .executive-team .grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .executive-team .executive-card {
        background-color: white; /* bg-white */
        padding: 1.5rem; /* p-6 */
        border-radius: 0.75rem; /* rounded-xl */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
        transition: all 0.3s ease; /* transition transform */
    }

    .executive-team .executive-card:hover {
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* hover:shadow-2xl */
        transform: scale(1.05); /* hover:scale-105 */
    }

    .executive-team .executive-card img {
        width: 128px; /* w-32 */
        height: 128px; /* h-32 */
        margin: 0 auto 1rem auto; /* mx-auto mb-4 */
        border-radius: 9999px; /* rounded-full */
        object-fit: cover; /* object-cover */
        border: 4px solid; /* border-4 */
    }

    .executive-team .executive-card:nth-child(1) img { border-color: #1976d2; } /* border-blue-800 (converted) */
    .executive-team .executive-card:nth-child(2) img { border-color: #ffdd57; } /* border-yellow-500 */
    .executive-team .executive-card:nth-child(3) img { border-color: #2e7d32; } /* border-green-600 */

    .executive-team .executive-card h4 {
        font-weight: bold; /* font-bold */
        font-size: 1.125rem; /* text-lg */
    }

    .executive-team .executive-card p {
        color: #717171; /* text-gray-500 */
    }

    /* Promo Section */
    .promo-section {
        display: flex; /* flex */
        flex-direction: column; /* flex-col */
        align-items: center; /* items-center */
        max-width: 960px; /* max-w-6xl */
        margin: 4rem auto; /* my-16 mx-auto */
        gap: 2.5rem; /* gap-10 */
        padding: 0 1.5rem; /* px-6 */
    }

    @media (min-width: 768px) { /* md:flex-row */
        .promo-section {
            flex-direction: row;
        }
    }

    .promo-section img {
        border-radius: 0.75rem; /* rounded-xl */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
        width: 100%; /* w-full */
        transition: all 0.5s ease; /* transition duration-500 */
    }

    @media (min-width: 768px) { /* md:w-1/2 */
        .promo-section img {
            width: 50%;
        }
    }

    .promo-section img:hover {
        transform: scale(1.05); /* hover:scale-105 */
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* hover:shadow-2xl */
    }

    .promo-section .content {
        text-align: center; /* text-center */
    }

    @media (min-width: 768px) { /* md:text-left */
        .promo-section .content {
            width: 50%; /* md:w-1/2 */
            text-align: left;
        }
    }

    .promo-section .content h3 {
        font-size: 1.5rem; /* text-2xl */
        font-weight: bold; /* font-bold */
        color: #d32f2f; /* text-red-700 */
        margin-bottom: 0.75rem; /* mb-3 */
    }

    .promo-section .content p {
        color: #525252; /* text-gray-600 */
        margin-bottom: 1.25rem; /* mb-5 */
    }

    .promo-section .content .button {
        display: inline-block; /* inline-block */
        background-color: #1976d2; /* bg-blue-800 (converted to #1976d2) */
        color: white; /* text-white */
        padding: 0.75rem 1.5rem; /* px-6 py-3 */
        border-radius: 0.5rem; /* rounded-lg */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
        text-decoration: none;
        transition: all 0.5s ease; /* transition duration-500 */
    }

    .promo-section .content .button:hover {
        background-color: #ffdd57; /* hover:bg-yellow-400 */
        color: black; /* hover:text-black */
        transform: scale(1.1); /* hover:scale-110 */
    }

    /* Footer */
    footer {
        background-color: #1a202c; /* bg-gray-900 */
        color: #cccccc; /* text-gray-300 */
        padding: 2rem 0; /* py-8 */
    }

    footer .container {
        display: grid; /* grid */
        gap: 1.5rem; /* gap-6 */
    }

    @media (min-width: 768px) { /* md:grid-cols-4 */
        footer .container {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    footer h4 {
        color: white; /* text-white */
        font-weight: bold; /* font-bold */
        margin-bottom: 0.5rem; /* mb-2 */
    }

    footer p,
    footer ul li {
        font-size: 0.875rem; /* text-sm */
        line-height: 1.5; /* Not explicitly in Tailwind, but good practice */
    }

    footer ul {
        list-style: none; /* Removed default list style */
        padding: 0;
        margin: 0;
        display: flex; /* space-y-2 */
        flex-direction: column;
        gap: 0.5rem;
    }

    footer ul li a {
        color: #cccccc; /* text-gray-300 */
        text-decoration: none;
        transition: all 0.3s ease;
    }

    footer ul li a:hover {
        text-decoration: underline; /* hover:underline */
    }

    footer .copyright {
        text-align: center; /* text-center */
        font-size: 0.875rem; /* text-sm */
        margin-top: 1.5rem; /* mt-6 */
    }

    /* Custom Animations (already present, just ensuring they are here) */
    @keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
    @keyframes fadeInUp { from {opacity:0; transform:translateY(40px);} to {opacity:1; transform:translateY(0);} }
    @keyframes fadeInLeft { from {opacity:0; transform:translateX(-40px);} to {opacity:1; transform:translateX(0);} }
    @keyframes fadeInRight { from {opacity:0; transform:translateX(40px);} to {opacity:1; transform:translateX(0);} }
    @keyframes slideUp { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
    @keyframes wiggle { 0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);} }
    @keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
    @keyframes slowPulse { 0%,100%{opacity:0.7;} 50%{opacity:1;} }
    @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.7); } 50% { box-shadow: 0 0 0 10px rgba(25, 118, 210, 0); } } /* Adjusted for the blue color */

    .animate-fadeIn { animation: fadeIn 1.5s ease forwards; }
    .animate-fadeInUp { animation: fadeInUp 1.5s ease forwards; }
    .animate-fadeInLeft { animation: fadeInLeft 1.5s ease forwards; }
    .animate-fadeInRight { animation: fadeInRight 1.5s ease forwards; }
    .animate-slideUp { animation: slideUp 2s ease forwards; }
    .animate-wiggle { animation: wiggle 2s infinite ease-in-out; }
    .animate-float { animation: float 3s infinite ease-in-out; }
    .animate-slowPulse { animation: slowPulse 6s infinite ease-in-out; }
    .animate-bounceIn { animation: fadeInUp 1.5s ease, wiggle 2s infinite ease-in-out; }
    .animate-spin-slow { animation: spin 4s linear infinite; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
    @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }