/* Swiper Custom Styles */
.swiper-pagination-bullet {
  background: #9ca3af !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
}

.swiper-pagination-bullet-active {
  background: #1e40af !important;
  width: 24px !important;
  border-radius: 4px !important;
}

.swiper-button-next,
.swiper-button-prev {
  width: 40px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 2px solid #4b5563 !important;
  border-radius: 50% !important;
  margin-top: -20px !important;
  transition: all 0.3s ease !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(255, 255, 255, 1) !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 16px !important;
  font-weight: bold !important;
  color: #000 !important;
}

.swiper-button-next {
  right: 16px !important;
}

.swiper-button-prev {
  left: 16px !important;
}

/* Brand carousel navigation styling */
.brand-swiper .swiper-button-prev,
.brand-swiper .swiper-button-next {
  color: #1a4a8a;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 2px solid #1a4a8a;
  box-shadow: 0 2px 8px rgba(26, 74, 138, 0.2);
  transition: all 0.3s ease;
}

.brand-swiper .swiper-button-prev:hover,
.brand-swiper .swiper-button-next:hover {
  background: #1a4a8a;
  color: white;
  transform: scale(1.1);
}

.brand-swiper .swiper-button-prev::after,
.brand-swiper .swiper-button-next::after {
  font-size: 16px;
  font-weight: bold;
}

/* Video carousel navigation styling */
.video-swiper .swiper-button-prev,
.video-swiper .swiper-button-next {
  color: #1a4a8a;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  border: 2px solid #1a4a8a;
  box-shadow: 0 4px 12px rgba(26, 74, 138, 0.3);
  transition: all 0.3s ease;
}

.video-swiper .swiper-button-prev {
  left: -60px;
}

.video-swiper .swiper-button-next {
  right: -60px;
}

.video-swiper .swiper-button-prev:hover,
.video-swiper .swiper-button-next:hover {
  background: #1a4a8a;
  color: white;
  transform: scale(1.1);
}

.video-swiper .swiper-pagination {
  position: relative;
  margin-top: 2rem;
}

.video-swiper .swiper-pagination-bullet {
  background-color: #d1d5db;
  width: 10px;
  height: 10px;
  opacity: 1;
}

.video-swiper .swiper-pagination-bullet-active {
  background-color: #1a4a8a;
}

@media (max-width: 768px) {
  .video-swiper .swiper-button-prev {
    left: 10px;
  }
  .video-swiper .swiper-button-next {
    right: 10px;
  }
}