/* Grain Background */
  .grain {
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e5e7eb' fill-opacity='0.03' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  }

  /* NAVIGATION */
  .nav-link {
    position: relative;
    transition: color 0.3s ease;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2px;
    background: #15803D;
    transition: width 0.3s ease;
  }
  .nav-link:hover::after,
  .nav-link.active::after {
    width: 100%;
  }

  /* Mobile Menu */
  .mobile-menu {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1);
  }
  .mobile-menu.open {
    transform: translateX(0);
  }

  /* Dropdown */
  .dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .dropdown-menu {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /* Buttons */
  a.bg-green, button.bg-green {
    transition: all 0.3s ease;
  }
  a.bg-green:hover, button.bg-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(21, 128, 61, 0.25);
  }
  a.border-green:hover {
    background-color: rgba(21, 128, 61, 0.05);
    transform: translateY(-2px);
  }

  /* Cards (Core Capabilities, Projects, Partnerships, Org Chart) */
  .bg-white.border.rounded-lg {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .bg-white.border.rounded-lg:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  }

  /* Strategic Partnership Cards */
  .bg-white.p-6.rounded-xl {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  }
  .bg-white.p-6.rounded-xl:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.08);
    background-color: #f9fafb;
  }

  /* Hero Animations */
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
  }
  .animate-slide-up {
    animation: slideUp 0.8s ease-out forwards;
  }
  .animation-delay-300 { animation-delay: 0.3s; }
  .animation-delay-600 { animation-delay: 0.6s; }

  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes slideUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* Project Boxes */
  #projects .bg-white.border.rounded-lg {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  #projects .bg-white.border.rounded-lg:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
  }

  /* Sustainability Cards */
  #sustainability .text-center > div {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  #sustainability .text-center > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }

  /* Footer Links */
  footer a:hover {
    color: #10B981; /* Tailwind green-500 */
  }

  /* Hover Smoothness */
  a, button {
    transition: all 0.3s ease;
  }

  /* Mobile Dropdown Chevron */
  [x-data] i {
    transition: transform 0.3s ease;
  }

  /* =======================
     Odd/Even Section Backgrounds
     ======================= */
  section:nth-of-type(odd) {
    background-color: #ffffff; /* White */
  }
  section:nth-of-type(even) {
    background-color: #064E3B; /* Light gray */
    color: #ffffff!important;
  }

  /* Optional: smooth section transition on scroll */
  section {
    transition: background-color 0.5s ease, transform 0.3s ease;
  }

  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.9s ease-out;
  }
  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }


    .gallery-thumb {
    width: 100%;
    aspect-ratio: 1/1; /* square like Instagram */
    object-fit: cover;
    transition: transform 0.3s;
  }
  .gallery-thumb:hover {
    transform: scale(1.05);
  }

  /* Modal styles */
  #modal {
    display: none;
    background: rgba(0,0,0,0.8);
    position: fixed;
    inset: 0;
    z-index: 50;
    justify-content: center;
    align-items: center;
  }
  #modal img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
  }
  #modal-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: white;
    font-size: 2rem;
    cursor: pointer;
  }