/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Testimonial Carousel Styles */
.testimonial-swiper {
  padding: 0 60px; /* Space for navigation arrows */
  overflow: hidden;
}

.testimonial-swiper .swiper-slide {
  height: auto !important;
}

.testimonial-swiper .swiper-wrapper {
  align-items: stretch;
  flex-wrap: nowrap !important;
}

/* Position navigation arrows properly */
.testimonial-prev,
.testimonial-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}

.testimonial-prev {
  left: 0 !important;
}

.testimonial-next {
  right: 0 !important;
}

@media (max-width: 768px) {
  .testimonial-swiper {
    padding: 0; /* Remove padding on mobile */
  }
  
  /* Hide navigation arrows on mobile */
  .testimonial-prev,
  .testimonial-next {
    display: none !important;
  }
}

/* Hero carousel specific styles */
.heroSwiper {
  position: relative;
}

.heroSwiper .swiper-pagination {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  text-align: center !important;
  z-index: 40 !important;
}

@media (min-width: 768px) {
  .heroSwiper .swiper-pagination {
    bottom: 40px !important;
  }
}

/* Swiper pagination styles */
.swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.6) !important;
  opacity: 1 !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 6px !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.swiper-pagination-bullet-active {
  background: #DC2626 !important;
  width: 14px !important;
  height: 14px !important;
  border-color: #DC2626 !important;
}

/* Testimonial specific pagination */
.testimonial-pagination .swiper-pagination-bullet {
  background: #6B7280 !important;
}

.testimonial-pagination .swiper-pagination-bullet-active {
  background: #DC2626 !important;
}