:root {
  --primary-green: #2e7d32;   /* keep dark jungle green */
  --light-green: #4caf50;     /* lighter accent green, not too pale */
  --bg-green: #1b3a20;        /* dark jungle background, matches hero video */
}

    body {
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--bg-green); /* changed to dark green */
  color: #fff; /* optional, ensures text is readable */
  scroll-behavior: smooth;
}


    /* Hero */
    .hero {
      background: none;
      color: #fff;
      text-align: center;
      padding: 120px 20px 80px;
      border-bottom-left-radius: 50% 10%;
      border-bottom-right-radius: 50% 10%;
    }
    .hero img {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border-radius: 50%;
      border: 5px solid #fff;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .hero h1 {
      font-size: 2.5rem;
      font-weight: 700;
    }
    .hero p {
      font-size: 1.1rem;
    }

    /* Section Titles */
    .section-title {
      color: white;
      font-weight: 700;
      margin-bottom: 30px;
      text-align: center;
    }

   /* General card styling */
.card {
  background: #ffffff; /* White background */
  color: #000000; /* Black text */
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Icons */
.icon {
  color: #2a5298; /* Primary theme color */
}

/* Card titles */
.card h5 {
  color: #f09808; /* Secondary theme color */
  font-weight: 600;
}

/* Descriptions inside cards */
.card p, 
.card ul, 
.card li {
  color: #000000; /* Keep descriptions black */
}

    /* Icons */
    .icon {
      color: var(--primary-green);
      margin-right: 10px;
    }

    /* Contact Links */
    .contact a {
      text-decoration: none;
      color: white;
      transition: color 0.2s;
    }
    .contact a:hover {
      color: var(--light-green);
    }

    footer {
      background: var(--primary-green);
      color: #fff;
      text-align: center;
      padding: 20px 0;
    }