body {
      /* height: 250vh; */
      margin: 0;
      /* background: #111; */
      overflow-x: hidden;
      font-family: Arial, sans-serif;
      color: #000;
    }

    .sticky {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
   

    .main-wrapper {
      position: relative;
      width: 100vw;
      /*height: 100vh;*/
      pointer-events: auto;
    }

    .center-group {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      gap: 20px;
      z-index: 5;
      pointer-events: auto;
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
    }

    .circle-wrapper {
      position: relative;
      width: 200px;
      height: 200px;
      z-index: 1;
    }

    .main-circle {
      width: 200px;
      height: 200px;
      background: #00ffff;
      border-radius: 50%;
      position: relative;
      z-index: 1;
    }

    .main-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 170px;
      height: auto;
      z-index: 10;
      pointer-events: none;
    }

    .changing-word,
    .side-text {
      font-size: 28px;
      font-weight: bold;
      z-index: 10;
      opacity: 1;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }

    .main-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      text-align: center;
      opacity: 0;
      z-index: 3;
      pointer-events: auto;
      line-height: 34px;
      padding: 0px 120px;
    }

    .circle-group {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 2;
      pointer-events: none;
    }

    .dot {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
    }
@media (min-width: 768px){
    .sticky{
          position: sticky;
      top: 50%;
      transform: translateY(-50%);
      }
      .main-wrapper{
          height:100vh;
      }
}


    /* Responsive styles */
    @media (max-width: 768px) {
      .center-group {
        flex-direction: column;
        gap: 10px;
      }

      .circle-wrapper {
        width: 140px;
        height: 140px;
        margin-top: 10px;
      }

      .main-circle {
        width: 140px;
        height: 140px;
      }

      .main-logo {
        width: 90px;
      }

      .changing-word,
      .side-text {
        font-size: 20px;
        z-index: 10;
      }

      .main-text {
        font-size: 16px;
        line-height: 26px;
        padding: 0 30px;
      }

      .dot {
        width: 14px;
        height: 14px;
      }
      .sticky{
          position: relative;
          /* min-height: 120vh; */
      }
      .circle-group{
          /* margin-top:-340px; */
      }
      .main-wrapper {
    height: 100vh; /* critical change: let it collapse instead of fixing to full screen */
  }
    }

    @media (max-width: 480px) {
      .main-logo {
        width: 80px;
      }

      .changing-word,
      .side-text {
        font-size: 16px;
      }

      .main-text {
        font-size: 14px;
        line-height: 24px;
        padding: 0 10px;
      }
      .main-wrapper{
        margin-top: -150px;
      }
    }


.navbar ul{
   background-color: white;
    margin: auto;
    border-radius: 30px;
    padding: 10px;
}
.navbar-nav li a{
    margin: 0px 10px;
    color: #000;
}
.fixed-bottom-navbar .active{
  color: #f22828 !important;
}
.navbar-toggler{
  border: 0px !important;
  margin: auto;
  color: #000 !important;
  font-size: 16px !important;
  padding: 10px !important;
}
.navbar-toggler:focus{
  box-shadow: none !important;
  outline: none !important;
}
.navbar-toggler span{
  border: 2px solid #666;
  border-radius: 50%;
  padding: 4px 8px;
}
@media (max-width:500px) {
    .navbar{
        margin-top: -200px !important;
    }
}

.fixed-top,
.fixed-bottom-navbar {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}



/*-------------Mission Core Section------------- */

.mission_core_section{
  font-family: 'Poppins';
}
.mission_core_section h3{
  text-align: center;
  font-weight: bold;
}
.mission_div,.work_div{
  display: flex;
  justify-content: space-between;
  margin: 40px 0px;
}
.mission_div p,.work_div p{
  margin: auto 20px;
}
@media (min-width:767px) {
  .mission_core_section h3{
    font-size: 50px;
    margin-bottom: 60px;
  }
  .mission_core_section{
    padding: 100px 0px 0px 0px;
  }
  .mission_core_section img{
  width: 60px;
  height: 60px;
}
}
@media (max-width:767px) {
  .mission_core_section h3{
    font-size: 30px;
    margin-bottom: 30px;
  }
  .mission_core_section{
    padding: 30px 0px 0px 0px;
    margin-top: -200px;
  }
  .mission_div p,.work_div p{
    font-size: 14px;
  }
  .mission_core_section img{
  width: 50px;
  height: 50px;
}
.circle-group{
    height: 60vh !important;
}
}


/*-------------Supporter Section------------- */

.supporter_section{
  font-family: 'Poppins';
}
.supporter_section h2{
  text-align: center;
  font-weight: bold;
}
.supporter_slider_wrapper {
    overflow: hidden;
    position: relative;
}
.supporter_slider {
    overflow: hidden;
    width: 100%;
}
.supporter_track {
    display: flex;
    transition: transform 0.5s ease;
    width: max-content;
}
.supporter_slide {
    width: 220px;
    box-sizing: border-box;
    padding: 10px;
    flex-shrink: 0;
}
.support_div {
    border: 1px solid #ddd;
    text-align: center;
    border-radius: 10px;
    background-color: #fff;
}
.support_div img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    margin-bottom: 10px;
}
.supporter_nav {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background-color: #00000088;
    color: white;
    padding: 10px;
    cursor: pointer;
    z-index: 2;
}
.supporter_nav.left {
    left: 0;
}
.supporter_nav.right {
    right: 0;
}
.support_div p{
  margin-bottom: 0px;
}
@media (min-width:767px) {
  .supporter_section{
  padding: 100px 0px;
}
.supporter_section h2{
  font-size: 50px;
  margin-bottom: 60px;
}
.support_div{
  padding: 25px 15px;
}
}
@media (max-width:767px) {
  .supporter_section{
  padding: 30px 0px;
}
.supporter_section h2{
  font-size: 30px;
  margin-bottom: 30px;
}
.support_div{
  padding: 15px;
}
.support_div p{
  font-size: 14px;
}
}
@media (max-width: 991px) {
    .supporter_slide {
        width: 200px;
    }
}
@media (max-width: 600px) {
    .supporter_slide {
        width: 200px;
    }
}
@media (max-width: 400px) {
    .supporter_slide {
        width: 300px;
    }
}


/*-------------Footer----------- */


.footer-main .col-12,.footer-main .col-md-12{
  margin-bottom: 20px;
}
.footer-main img{
  height: 70px;
  margin-bottom: 10px;
}
.footer-main li{
  list-style-type: none;
  margin: 8px 0px;
}
.footer-main a{
  color: #000;
  text-decoration: none;
}
.footer-main li:hover a{
  color: #f22828;
}
.footer-main h4{
  font-weight: bold;
  margin-bottom: 10px;
}
.footer-main .contact-links p{
  margin-bottom: 5px !important;
}
.footer-disclaimer{
  background-color: #b0b0b0;
  color: #000;
  font-family: 'Poppins', sans-serif;
  padding: 20px 40px;
}
.footer-disclaimer p{
  margin-bottom: 0px;
}
.footer-second{
  background-color: #000;
  color: #b0b0b0;
  display: flex;
  justify-content: space-between;
  padding: 20px 40px;
  font-family: 'Poppins', sans-serif;
}
.footer-second p{
  margin-bottom: 0px;
}
.footer-second a{
  color: #fff;
  text-decoration: none;
}
@media (max-width:768px) {
  .footer-second p,.footer-disclaimer p,.footer-main p,.footer-main a{
    font-size: 14px;
  }
  .footer-main p{
    margin-bottom: 0px;
  }
  .footer-main,.footer-disclaimer,.footer-second{
    padding: 20px 20px;
  }
  footer h4{
    font-size: 20px;
  }
}
@media (max-width:600px) {
  .footer-second{
    flex-direction: column;
    text-align: center;
  }
  .footer-second p{
    margin-bottom: 10px;
  }
}




 .highlighted-text {
      font-size: 16px;
        line-height: 24px;
        padding: 0 10px;
        text-align: center;
        font-family: 'Poppins';
    }

    #highlightedText {
      font-size: 16px;
      text-align: center;
      margin-top: 40px;
      padding: 0 20px;
      opacity: 0;
      z-index: 2;
    }

    /* Highlight Styles with Different Colors */
    .highlight-1 {
      background-color: yellow;
      color: #000;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: bold;
      font-style: italic;
    }

    .highlight-2 {
      background-color: cyan;
      color: #000;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: bold;
      font-style: italic;
    }

    .highlight-3 {
      background-color: lime;
      color: #000;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: bold;
      font-style: italic;
    }
    .dot {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      opacity: 0;
    }

    /* Visibility rules */
    .dot-animation-desktop {
      display: block;
    }

    .highlight-mobile {
      display: none;
    }

    @media (max-width: 768px) {
      .dot-animation-desktop {
        display: none !important;
      }

      .highlight-mobile {
        display: block;
      }
    }


    @media (max-width: 768px) {
  .sticky {
    min-height: 20vh !important;
    max-height: 700px !important;
  }

}