.text-title-orange {
  color: #F38221;
  font-size: 40px;
}

/* ---------------------
   Circle Counters
---------------------- */
.circle-counter {
  width: 180px;
  height: 180px;
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-counter svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circle-counter circle {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}

.circle-counter .bg {
  stroke: #e6e6e6;
}

.circle-counter .progress {
  stroke: #F38221;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
}

.circle-counter .number {
  position: absolute;
  font-weight: 700;
  font-size: 1.4rem;
  color: #F38221;
}

/* ---------------------
   Why Esthetic Carousel
---------------------- */
.whyesthetic {
  padding-bottom: 50px;
}

.whyesthetic img {
  max-width: 180px;
  display: block;
  margin: auto;
}

.whyesthetic-card {
  text-align: center;
}

/* ✅ Left Positioned Pagination */
.whyesthetic .swiper-pagination2 {
  text-align: left;
  padding-left: 15px;
  bottom: -2px !important;
  width: 100%;
}

.whyesthetic .swiper-pagination2 .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #d6d6d6;
  opacity: 1;
  margin: 0 3px;
}

.whyesthetic .swiper-pagination2 .swiper-pagination-bullet-active {
  background: #F38221 !important;
}

/* ✅ Mobile Adjustments */
@media (max-width: 576px) {
  .text-title-orange {
    font-size: 28px;
  }

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

  .circle-counter .number {
    font-size: 1.1rem;
  }
}