/* Components and reusable UI for Topnogoogle */
.section-header{max-width:760px;margin:0 auto 28px;text-align:center}
.section-header h2{font-family:Poppins,Inter,sans-serif;font-size:36px;line-height:1.2;margin:0 0 8px;color:#E8EEFA}
.section-header p{margin:0;color:#A8B3C6}
.section-header.left{margin:0;text-align:left}

.nav .btn{margin-left:4px}

/* Responsive helpers may also live here if component-specific */

/* Swiper Carousel Styles */
.reviews-slider {
  padding: 10px 0 40px; /* Add padding for shadow and space for pagination */
  margin: 0 -10px;
}

.swiper-slide {
  height: auto; /* Ensure slides have natural height */
  padding: 10px;
}

.review-card {
  height: 100%; /* Make cards within slides fill the height */
}

/* Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
  color: var(--primary);
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease, color 0.2s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--neutrals-100);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px;
  font-weight: 800;
}

/* Pagination Bullets */
.swiper-pagination {
  bottom: 0;
}

.swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.3);
  width: 10px;
  height: 10px;
  opacity: 0.8;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.swiper-pagination-bullet-active {
  background-color: var(--primary);
  opacity: 1;
}