/* === DESKTOP STYLES (Default for larger screens) === */
.feature-section {
  display: flex;
  flex-direction: row; 
  align-items: center;
  padding: 48px;
  border-radius: 0px 60px 60px 60px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px; 
}

.feature-section__number-wrapper {
  margin-right: 0px;
  margin-bottom: 0;
}

.feature-section__title {
  font-size: 25.92px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #000000;
}

.feature-section__content {
  max-width: 700px;
  margin-left: 40px;
}

/* === The Blue Number Circle === */
.feature-section__number {
  width: 60px;
  height: 60px;
  background-color: #0052ff;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  flex-shrink: 0;
}


/* === MOBILE STYLES (Only applies to screens 767px and smaller) === */
@media (max-width: 767px) {
  .feature-section {
    flex-direction: column;
    align-items: center;
    padding: 32px 40px 64px 40px;
  }

  .feature-section__number-wrapper {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .feature-section__content {
    /* CRITICAL: Ensure max-width is ignored on mobile */
    max-width: 100%; 
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; /* Resetting unnecessary margin-top */
  }  
}

/* === Custom Pagination Dot Styles === */

/* This styles the inactive dots */
.swiper-pagination-bullet {
  width: 12px; /* The default is 8px */
  height: 12px; /* The default is 8px */
  background-color: #cccccc; /* A light gray color for inactive dots */
  opacity: 1; /* Makes them fully visible */
}

/* This styles the active dot */
.swiper-pagination-bullet-active {
  background-color: #0052ff; /* A strong blue color for the active dot */
}