/* ///////////////////////////////////////////////////////////////////////////////////////////// */
/* ============ VARIABLES ============ */
:root {
  --primary-color: #228b22;
  --text-color: #fff;
  --other-green: #00fa9a;
  --overlay-color: rgba(0, 0, 0, 0.6);
  --font-family: "Poppins", sans-serif;
}

/* Extra small devices (phones, less than 576px) */
@media (min-width: 300px) and (max-width: 575.98px) {
  .navbar {
    display: none;
  }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--primary-color);
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .mobile-nav .mb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8em 7%;
    background: var(--primary-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
  }

  .mobile-nav button {
    font-size: 24px;
    outline: none;
    background: var(--primary-color);
    border: none;
    color: var(--text-color);
  }

  .activities {
    padding: 60px 7%;
  }
 
.mission .mission-content .mission-text {
    padding: 0 1em; /* 0 pour top/bottom, 1em pour left/right */
}

  .albums {
    margin: auto;
    padding: 60px 7%;
    background: #f0f0f0;
    color: #000;
  }

  .articles {
    padding: 60px 7%;
    background: #fff;
    color: #000;
  }
  /* Card Style */
  .activity-card {
    background: #fff;
    padding: 35px 20px;
    border-radius: 18px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    max-width: 320px;
  }

  .album-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .album-gallery img {
    width: 45%;
    height: 200px;
    border-radius: 10px;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .contact {
    background: #f8f9fa;
    padding: 80px 7%;
  }

  .hero-text {
    text-align: center;
    opacity: 0;
    /* color: var(--primary-color); */
    color: var(--text-color);
    padding: 0 15px;
    font-size: 1.1rem;
    font-weight: 700;
  }

  .hero-text2 h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: 1px;
    color: var(--text-color);
  }
}

/* ///////////////////////////////////////////////////////////////////////////////////////////// */

/* Small devices (portrait phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
}

/* ///////////////////////////////////////////////////////////////////////////////////////////// */

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
}

/* ///////////////////////////////////////////////////////////////////////////////////////////// */

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
}

/* ///////////////////////////////////////////////////////////////////////////////////////////// */

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* Your styles for larger desktops */
}

/* ///////////////////////////////////////////////////////////////////////////////////////////// */

/* Extra-extra large devices (very large screens, 1400px and up) */
@media (min-width: 1400px) {
}

/* ///////////////////////////////////////////////////////////////////////////////////////////// */

/* Portrait mode */
@media (orientation: portrait) {
  /* Styles for vertical view */
}

/* ///////////////////////////////////////////////////////////////////////////////////////////// */

/* Landscape mode */
@media (orientation: landscape) {
  /* Styles for horizontal view */
}

/* ///////////////////////////////////////////////////////////////////////////////////////////// */