

  .hero-btn-p{
      display: flex;
      justify-content: center; /* Center horizontally */
      align-items: center;     /* Center vertically (optional) */
      padding: 20px;
      position: relative;
      z-index: 999 !important;
    }

    .hero-btn{
     padding: 12px 24px;
    background-color: #8315DB;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer; 
    }

    
    .top-buttons {
      display: flex; 
      gap: 10px;
      margin-bottom: 2rem;
    }

    .top-buttons a {
      background: #FAF8FF;
      color: #7C3AED;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      text-decoration: none;
      font-weight: bold;
      display: inline-block;
    }

  .responsive {
  max-width: 100%;
  height: auto;
  }
  .partners
 

  
  .flex-ul{
    list-style: disc inside;
  display: flex;
  /* flex-wrap: wrap; */
  gap: 2rem;
  padding: 0;
  margin: 2rem 0;
  border: 2px solid red !important;
  }
  .work-with-ul li{
   max-width: 300px;
  color: #ddd;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  }

  .mobile-show{
    display:none !important;
  }


.gbv-stats {
  padding: 3rem 1rem;
  color: #fff;
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.subtitle {
  color: #a5a4a4;
  font-size: 1rem;
  margin-bottom: .5rem;
}

.headline {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 2rem;
  color:#fff;
}

/* STATS */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  column-gap: 7rem;
  justify-items: center;
}

.stats-2{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 5fr));
  justify-items: center;
    column-gap: 7rem;
    margin-top:10px;


}

.stat-item {
  border: 1px solid rgb(27, 27, 59);
  padding: 0px 50px 0px 50px;
  border-radius: 8px;
  /* backdrop-filter: blur(6px); */
  background: rgba(255, 255, 255, 0.02);
}
/* Stat Box */
.stat-box {
  background: #0e0c23;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  color: #ccc;
  font-family: 'Helvetica Neue', sans-serif;
}

.stat-number-flags {
  display: flex;
  align-items: center;
  justify-content: center;
}

.number {
  margin-right: 0.5rem;
}

.flagss {
  display: flex;
  position: relative;
}

.flagss img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #fff;
  object-fit: cover;
  margin-left: -8px;
  background: white;
  z-index: 1;
}

.flagss img:first-child {
  margin-left: 0;
}
/* End Stat Box */
.stat-value {
  /* font-family: 'Clash Display'; */
  font-size: 5rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  justify-content: center;
  color:#858585;
}

.stat-value span{
  float:left
}

.flag {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  /* object-fit: cover; */
  margin-left: -15px;
  border: 2px solid #0a0a1a;
}

.stat-label {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  color: #ccc;
}




.flags img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
}


.map-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

.map-image {
  width: 100%;
  height: auto;
  display: block;
}

.float-box {
  position: absolute;
  width: 20%; /* Responsive size */
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  font-size: 0.9rem;
}

/* 🔧 Adjust positions using percentages */
.vanessa  { top: 20%; left: 10%; }
.marie    { top: 45%; left: 15%; }
.chisom   { top: 50%; left: 45%; }
.adole    { top: 25%; left: 70%; }
.anna     { top: 60%; left: 65%; }


  .hero-about{
       background-image: url(./assets/img/Lines.png);
    }
    .full-image {
      width: 100%;
      height: 100%;
      object-fit:contain;
      display: block;
    }

   .gradient-border {
    border: 2px solid transparent;
    border-radius: 12px;
    background: 
    linear-gradient(#0A0A1A, #0A0A1A) padding-box,
    linear-gradient(to right, #4313AF, #1C0849) border-box;    /* padding: 16px; */
    min-height:24vh !important;
    padding: none !important;
    /* width:50vh !important; */
    }

    .gradient-border-core {
    border: 2px solid transparent;
    border-radius: 12px;
    background: 
    linear-gradient(#0A0A1A, #0A0A1A) padding-box,
    linear-gradient(to right, #4313AF, #1C0849) border-box;    /* padding: 16px; */
    height:28vh !important;
    /* width:50vh !important; */
    }

    .hero-btn-p{
      display: flex;
      justify-content: center; /* Center horizontally */
      align-items: center;     /* Center vertically (optional) */
      padding: 20px;
    }



    .map-2{
      margin-bottom: -15rem;
    }
  
    
     .features-list{
      border: 1px solid #4313AF;
    }
   
.why-it-matters{
  background-image:url(../img/Gradient\ Lines.png);
  width:70vw;
  margin: auto;
  margin-top:2rem;
  padding:20px 20px 20px 70px;
  background-color:#0A0A1A; 
  border:2px solid transparent; 
  border-radius: 16px;
}
.why-it-matters-img{
  display: flex;
  justify-content: flex-end; 
  align-items: center;      
  height: auto;  
  margin-left:10em;          
  
}
.dsp{
  padding-left:30px;
  padding-right:30px;
}

.newsletter{
     background-image: url(../img/Gradient\ Lines.png);
     /* padding:10em; */
}


  .hero-text{
    font-size: 4rem;
   }
   .hero-tag{
    font-size: 1.3rem;
   } 

   
  /* DESKTOP ONLY  */
  @media only screen and (min-width:1000px){

    .hero-4{
      position: relative;
    }
    .hero-div{
      position: relative;
      margin-top:-7em;
      z-index: 2;
    }
    .hero-image{
      position: relative;
     background: linear-gradient(to top, #242348 80%, #0a0a1a 100%);
      margin-top:-10rem;
      z-index: 1 !important;
      /* padding-bottom:30rem; */

    }
     .herotext-about{
        margin-top:-17em;
        width: 50vw;
    }
       
    .list-row li{
    margin-right:50px;
    }

    .vision-card{
    width:40%; 
    min-height:40vh; 
    margin:auto;
   }
   .vision-card img{
    width:60%;
   }
  }


  /* MOBILE */
  body{
    overflow-x: hidden;
  }

  .menu-link{
    font-size:12px;
  }
  .menu-list {
    padding-left:20px !important;
  }
  .menu-list a{
    font-size: 12px;
  }

  @media only screen and (max-width: 767px) {
    
    .hero-text{
      font-size: 2.5rem;
    }
    .hero-tag{
      font-size: 1rem;
    }
    .mobile-show{
      display: block !important;
    }
    .desktop-show{
      display:none !important;
    }

    .mobile-logo{
      width: 150px;
    }
    .headline {
      font-size: 1rem;
      margin: 0 auto 2rem;
      color:#fff;
    }

   .float-box {
    width: 40%;
    font-size: 0.75rem;
    padding: 8px 10px;
    }

    .vanessa  { top: 22%; left: 5%; }
    .marie    { top: 48%; left: 8%; }
    .chisom   { top: 53%; left: 30%; }
    .adole    { top: 28%; left: 60%; }
    .anna     { top: 65%; left: 55%; }

   
   

    .px-5, .px-10, .px-15, .px-20{
      padding:.5em !important;
    }

      .stats-swiper {
        padding: 1rem;
        width: 90%;
        height: 50%;
        margin-top:20px;
      }

      .subtitle {
      color: #a5a4a4;
      font-size: 12px;
      margin-bottom: .2rem;
    }

    .headline {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto 2rem;
      color:#fff;
    }

    .stat-card {
      background: #0d0d25;
      border-radius: 12px;
      padding: 2rem;
      color: #eee;
      font-size: 1rem;
      text-align: center;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }

    .stat-card small {
      display: block;
      font-size: 0.8rem;
      margin-top: 0.3rem;
    }

    .top-buttons {
      display: flex; 
      gap: 0px;
      margin-bottom: 1rem;
    }

    .top-buttons a {
      background: #FAF8FF;
      color: #7C3AED;
      padding: 8px 16px;
      border-radius: 20px;
      /* font-size: .5rem; */
      font-size: 10px;
      text-decoration: none;
      font-weight: bold;
      display: inline-block;
    }


   .features-head{
      border-right:none !important;
      margin-bottom:.6em !important;
      font-size: 14px;
    }
    .features-tag{
      font-size: 14px;
    }
    .featured-lists{
      width: 90%;
      margin: auto;
    }
      
    .blog, .resources{
      padding-top:6rem;
    }
    .mission-section p, .mission-section ul li, .methodology, .methodology h6, .newsletter h3, .featured-lists p, .herotext-about p, .about-values p, .value-item h6, .fb-card p, .testimonials p, .blog p{
      font-size: 14px;
    }
    #mc_embed_signup{
      font-size: 15px;
      width:70%;
      margin:auto;
    }
    .featured-lists h6{
      font-size: 16px;
    }
    .mission-section h3, .herotext-about h3, .about-values h3, .fb-card h4, .testimonials h3 , .flex-grow-1 h6, .blog h4 {
      font-size: 20px;
    }
    .mission-section a, .methodology a, .newsletter a, .mission-wrapper a, .herotext-about a, .blog a{
      font-size:12px;
      /* margin-left: 2rem; */
    }
    .mobile-section-padding, .msp{
      padding: 0px 20px 0 20px;
    }
    .msp-pro{
      padding: 0px 50px 0px 50px;
    }
    .meth-img{
      width:80%;
      height: 80%;
      }
  
    .gradient-border-core {
      border: 2px solid transparent;
      border-radius: 12px;
      background: 
      linear-gradient(#0A0A1A, #0A0A1A) padding-box,
      linear-gradient(to right, #4313AF, #1C0849) border-box;   
      height:30vh !important;
      /* width:50vh !important; */
      }

      .why-it-matters{
        background-image:url(./assets/img/Gradient\ Lines.png);
        width:auto;
        margin: auto;
        background-color: #0A0A1A; 
        border:2px solid transparent; 
        border-radius: 16px;
        margin-top:1rem;
        padding-top:1.5rem;
      }
    .why-it-matters-img{
      margin-top:2em;
      display: flex;
      justify-content: flex-end; 
      align-items: center;      
      height: auto;  
      margin-left:0;          
    }

    .list-row li{
      /* width:18em; */
      margin:none !important;
    }

    .map-2{
      margin-bottom: -9em;
    }

    /* ABOUT PAGE */
    .hero-about{
      /* padding:0 !important; */
    }
    .value-item{
      width:80%;
      margin:auto;
      font-size:12px;
    }

    /* .vision-card{
    width:40%; 
    min-height:40vh; 
    margin:auto;
   } */
   .vision-card img{
    width:50%;
   }
  
}


  #mc_embed_signup{background:transparent;color:white;}
    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
  We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

  .form-btn{
    background-color: #8315DB !important;
  }
  

