/* index or homepage  */
:root {
      --green-dark: #165d29;
      --gold-light: #d4b91f;
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      margin: 0;
      padding: 0;
    }

    .navbar {
      position: sticky;
      top: 0;
      z-index: 999;
      background: linear-gradient(to right, var(--green-dark), var(--gold-light));
    }

    .hero {
      position: relative;
      height: 100vh;
      background: url('https://img.freepik.com/free-photo/portrait-man-with-soccer-ball_23-2150904335.jpg?t=st=1744892334~exp=1744895934~hmac=74c259ba5f89c5c1539d6efcc37652aa2b77254fff1b182ffa6d5105a58aac61&w=996') center center / cover no-repeat;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(to bottom, var(--gold-light), var(--green-dark));
      opacity: 0.85;
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: rgb(255, 255, 255);
      padding: 0 20px;
    }

    .btn-custom {
      background-color: white;
      color: var(--green-dark);
      border: 2px solid var(--green-dark);
      font-weight: bold;
    }

    .btn-custom:hover {
      background-color: var(--green-dark);
      color: white;
    }

    section {
      padding: 60px 20px;
    }

    .section-title {
      color: var(--green-dark);
      font-weight: bold;
      margin-bottom: 30px;
    }

    footer {
      background-color: var(--green-dark);
      color: white;
      padding: 20px 0;
    }

    footer a {
      color: var(--gold-light);
      text-decoration: none;
    }

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

    .desktop-only {
      display: none;
    }

    @media (min-width: 768px) {
      .mobile-only {
        display: none;
      }

      .desktop-only {
        display: block;
      }
    }











/* Contact */

#contact-container {
      background-color: #f8f9fa;
    }
    .section-container {
      max-width: 1000px;
      margin: 50px auto;
      background: white;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    @media (max-width: 767.98px) {
      .form-section {
        margin-top: 30px;
      }
    }




    /* about */

    .section-heading {
      color: #001488;
      font-weight: bold;
      text-align: center;
      margin-bottom: 2rem;
    }

    .icon {
      color: #ffffff;
      font-size: 2rem;
    }

    .problem-section {
      background: linear-gradient(to right, #d4b91f, #165d29);
      color: white;
      padding: 4rem 1rem;
    }

    .purpose-section,
    .how-section {
      padding: 4rem 1rem;
    }

    .mission-image {
      width: 100%;
      max-width: 400px;
      display: block;
      margin: 0 auto;
    }

    .about-text {
      text-align: justify;
      margin-top: 1rem;
    }