/*carosel css home page*/
   
   

.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-box {
  width: 100%;
  /* No height! Let the content (images) define it */
}

/* Buttons */
.slider-button {
  font-size: 1rem;
  padding: 5px 1rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--unhover-background-color);
  border: 2px solid var(--unhover-border-color);
  color: var(--unhover-text-color);
  z-index: 10;
  cursor: pointer;
}

.slider-button-prev {
  left: 1rem;
}

.slider-button-next {
  right: 1rem;
}

.slider-button:hover,
.slider-button:focus {
  background-color: var(--hover-background-color);
  border: 2px solid var(--hover-border-color);
  color: var(--hover-text-color);
}

/* Slides container */
ul.slides {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: auto;
}

/* Each slide */
li.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

li.slide[data-active-slide] {
  position: relative;
  opacity: 1;
  z-index: 1;
}

/* Slide image */
.slide > img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Dots */
.slides-circles {
  display: flex;
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.slides-circles > div {
  height: 14px;
  width: 14px;
  margin: 6px;
  border: 2px solid white;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.slides-circles > div[data-active-slide] {
  background-color: white;
}

/* Mobile tweaks */
@media (max-width: 767px) {
  .slider-button-prev, .slider-button-next {
    top: auto;
    bottom: 1rem;
    transform: none;
    font-size: 0.9rem;
    padding: 4px 10px;
  }

  .slider-button-prev {
    left: 1rem;
  }

  .slider-button-next {
    right: 1rem;
  }

  .slides-circles {
    bottom: 3rem;
  }
}


/*carosel css home page*/
/*===========================*/
/*core value css*/

    .values-bg {
      background: linear-gradient(135deg, #F9FAFB, #E5E7EB);
      position: relative;
      overflow: hidden;
    }
    .values-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0; 
      width: 100%;
      height: 100%;
      background: url('image/about-bgs.webp') no-repeat center center/cover;
      opacity: 0.08;
      z-index: 1;
      filter: blur(8px);
    }
    .values-bg > * {
      position: relative;
      z-index: 2;
    }
    .title-section h2 {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 800;
      color: #1F2937;
      line-height: 1.3;
      background: linear-gradient(90deg, #FF6F61, #F4B400);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .title-section .before-title {
      font-size: clamp(1.2rem, 3vw, 1.5rem);
      font-weight: 700;
      color: #00C4B4;
      letter-spacing: 4px;
      text-transform: uppercase;
      background: rgba(0, 196, 180, 0.2);
      border-radius: 50px;
      box-shadow: 0 4px 10px rgba(0, 196, 180, 0.3);
    }
    .title-section p {
      color: #4B5563;
      font-size: clamp(0.9rem, 2vw, 1.2rem);
      line-height: 1.8;
      max-width: 700px;
      margin: 0 auto;
    }
    .value-card {
      position: relative;
      background: #ffffff;
      border-radius: 50%;
      width: clamp(120px, 15vw, 180px);
      height: clamp(120px, 15vw, 180px);
      transition: all 0.3s ease;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      border: 3px solid #00C4B4;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin: 0 auto;
      aspect-ratio: 1 / 1;
    }
    .value-card:hover {
      box-shadow: 0 12px 30px rgba(0, 196, 180, 0.4);
      transform: scale(1.05);
      background: linear-gradient(135deg, #ffffff, rgba(0, 196, 180, 0.1));
    }
    .value-card .icon-wrapper {
      width: clamp(35px, 5vw, 50px);
      height: clamp(35px, 5vw, 50px);
      background: linear-gradient(45deg, #FF6F61, #F4B400);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .value-card i {
      font-size: clamp(1.2rem, 2vw, 1.8rem);
      color: #ffffff;
    }
    .value-card h3 {
      font-size: clamp(0.8rem, 1.5vw, 1.1rem);
      font-weight: 700;
      color: #1F2937;
      line-height: 1.2;
      text-align: center;
    }
    /* Responsive */
    @media (min-width: 769px) {
      .col-custom-5 {
        flex: 0 0 20%;
        max-width: 20%;
      }
      .value-row {
        flex-wrap: nowrap !important; 
        /*overflow-x: auto;*/
      }
    }
    @media (max-width: 768px) {
      .value-card {
        width: clamp(160px, 25vw, 220px);
        height: clamp(160px, 25vw, 220px);
      }
    }
 /*===========================*/
 /*<!--vision & mission-->*/
 
 
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@200&display=swap");


.road-map-main {
  margin: 50px 0 51px;
}
.road-map-main .road-map-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 175px;
}
@media (max-width: 991px) {
  .road-map-main .road-map-wrapper {
    margin-bottom: 25px;
    height: auto;
    display: block;
  }
}
.road-map-main .road-map-wrapper::before {
  content: "";
  width: 100%;
  clear: both;
  display: block;
}
.road-map-main .road-map-wrapper::after {
  content: "";
  width: 100%;
  clear: both;
  display: block;
}
.road-map-main .road-map-wrapper .road-map-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 25px solid transparent;
  border-top-color: #202351;
  border-right-color:#202351;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(45deg);
}
@media (max-width: 992px) {
  .road-map-main .road-map-wrapper .road-map-circle {
    position: unset;
    border: 25px solid #cc9b5d;
  }
}
.road-map-main .road-map-wrapper .road-map-circle .road-map-circle-text {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: #FF841A;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  text-transform: capitalize;
  color: #fff;
  box-shadow: 0px 0px 10px 5px #00000021;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(-45deg);
}
.road-map-main .road-map-wrapper .road-map-card {
  width: 35%;
  background: #202351;
  padding: 20px 20px;
  z-index: 1;
  position: absolute;
  right: 0;
  border-radius: 5px;
}
.road-map-main .road-map-wrapper .road-map-card::before {
  content: "";
  width: 25%;
  height: 20px;
  background: #202351;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -23%;
  z-index: -1;
}
@media (max-width: 991px) {
  .road-map-main .road-map-wrapper .road-map-card {
    width: 100%;
    margin-top: 30px;
    position: unset;
  }
  .road-map-main .road-map-wrapper .road-map-card::before {
    content: "";
    width: 20px;
    height: 30%;
    top: 50%;
    transform: translateX(-50%);
    left: 50%;
  }
}
@media (max-width: 425px) {
  .road-map-main .road-map-wrapper .road-map-card {
    top: 45%;
  }
}
.road-map-main .road-map-wrapper .road-map-card .card-head {
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
  margin: 0 0 15px;
  color: #fff;
}
.road-map-main .road-map-wrapper .road-map-card .card-text {
  color: #fff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .road-map-main .road-map-wrapper .road-map-card .card-text {
    -webkit-line-clamp: 4;
  }
}
.road-map-main .road-map-wrapper:nth-of-type(even) .road-map-circle {
  border-bottom-color: #202351;
  border-left-color: #202351;
  border-top-color: transparent;
  border-right-color: transparent;
}
@media (max-width: 991px) {
  .road-map-main .road-map-wrapper:nth-of-type(even) .road-map-circle {
    border-color: #cc9b5d;
  }
}
.road-map-main .road-map-wrapper:nth-of-type(even) .road-map-card {
  left: 0;
}
.road-map-main .road-map-wrapper:nth-of-type(even) .road-map-card::before {
  right: -23%;
  left: unset;
}
@media (max-width: 991px) {
  .road-map-main .road-map-wrapper:nth-of-type(even) .road-map-card::before {
    content: "";
    width: 20px;
    height: 30%;
    top: 50%;
    transform: translateX(-50%);
    left: 50%;
  }
}
@media (max-width: 425px) {
  .road-map-main .road-map-wrapper:nth-of-type(even) .road-map-card::before {
    top: 45%;
  }
}