/* ===== EVENT TYPES SECTION ===== */
      .event-scope-section {
        padding: 5rem 0;
        background: #fff;
      }

.event-scope-section .eyebrow {
        color: #8A3B88;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin-bottom: 1rem;
      }

.event-scope-section h2 {
        font-size: clamp(2rem, 3vw, 2.8rem);
        color: #1F1F1F;
        margin-bottom: 3rem;
        font-weight: 700;
      }

      .event-type-card {
        background: #fff;
        padding: 2.5rem 2rem;
        border-radius: 8px;
        border: 1px solid #e8e0f0;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        overflow: hidden;
      }

      .event-type-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #8A3B88 0%, #E0B6DF 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .event-type-card:hover {
        border-color: #8A3B88;
        box-shadow: 0 15px 40px rgba(75,13,74,0.1);
        transform: translateY(-8px);
      }

      .event-type-card:hover::before {
        opacity: 1;
      }

      .event-type-card h3 {
        font-size: 1.3rem;
        color: #4B0D4A;
        margin-bottom: 1rem;
        font-weight: 700;
      }

      .event-type-card p {
        color: #666;
        line-height: 1.7;
        margin: 0;
      }

/* ===== APPROACH SECTION ===== */
      .approach-section {
        padding: 5rem 0;
        background: linear-gradient(135deg, #f9f7fb 0%, #fff 100%);
      }

      .approach-section .eyebrow {
        color: #8A3B88;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin-bottom: 1rem;
      }

      .approach-section h2 {
        font-size: clamp(2rem, 3vw, 2.8rem);
        color: #1F1F1F;
        margin-bottom: 3rem;
        font-weight: 700;
      }

      .approach-step-card {
        background: #fff;
        padding: 2rem;
        border-radius: 8px;
        border: 1px solid #e8e0f0;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        height: 100%;
      }

      .approach-step-card:hover {
        border-color: #8A3B88;
        box-shadow: 0 20px 50px rgba(75,13,74,0.12);
        transform: translateY(-10px);
      }

      .approach-step-card .step-number {
        font-size: 2.5rem;
        font-weight: 700;
        color: #8A3B88;
        margin-bottom: 0.5rem;
        transition: transform 0.3s ease;
      }

      .approach-step-card:hover .step-number {
        transform: scale(1.1);
      }

      .approach-step-card h3 {
        font-size: 1.15rem;
        color: #4B0D4A;
        margin-bottom: 1rem;
        font-weight: 700;
      }

      .approach-step-card p {
        color: #666;
        line-height: 1.7;
        font-size: 0.95rem;
        margin: 0;
      }
      

.africa-banner-section {
  width: 100%;
  overflow: hidden;
  background: #FAFAFA;
}

.banner-container {
  position: relative;
  font-size: 1vw;

}

.banner-img {
  width: 100%;
  height: auto;
  display: block;
}

.country-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

/* Badge container */
.country-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  padding: 6px 12px;
  border-radius: 40px;
  border: 2px solid #4B0D4A;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  
}

/* Flag */
.country-badge img {
  width: clamp(20px, 1.5vw, 32px);
  height: clamp(20px, 1.5vw, 32px);
  border-radius: 50%;
  object-fit: cover;
}

/* Name */
.country-badge span {
  font-size: clamp(12px, 0.9vw, 16px);
  font-weight: 500;
  color: #1F1F1F;
  white-space: nowrap;
}

/* Hover effect */
.country-marker:hover .country-badge {
  background: #4B0D4A;
  transform: scale(1.08);
}

.country-marker:hover .country-badge span {
  color: #FFFFFF;
}

.country-marker:hover .country-badge img {
  border: 2px solid #FFFFFF;
}



/* Hide mobile grid on desktop */
.mobile-grid {
  display: none;
}

/* MOBILE VIEW */
@media (max-width: 768px) {

  /* Hide desktop positioned markers */
  .country-marker {
    display: none;
  }

  .mobile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 20px;
    position: absolute;
    inset: 0;
    align-content: center;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
  }

  /* .mobile-grid .country-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 2px solid #4B0D4A;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  } */

  /* .mobile-grid .country-badge img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-bottom: 4px;
  } */

  /* .mobile-grid .country-badge span {
    font-size: 12px;
    color: #1F1F1F;
    text-align: center;
  } */

}