/* Custom CSS for Day & Night Dev Projects */

/* Test to verify CSS is loading */
.test-css-loading {
  background-color: red !important;
  color: white !important;
  padding: 10px !important;
}

/* Add your custom styles below */

/* Carousel Styling - TailAdmin Theme */
/* Hide default Swiper arrow content */
.carouselFour .swiper-button-next:after,
.carouselFour .swiper-button-prev:after {
  display: none;
}

/* Navigation Buttons Styling */
.carouselFour .swiper-button-next,
.carouselFour .swiper-button-prev {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 50%;
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.9);
  color: #374151 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  margin-top: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carouselFour .swiper-button-prev {
  left: 0.75rem !important;
}

.carouselFour .swiper-button-next {
  right: 0.75rem !important;
}

@media (min-width: 640px) {
  .carouselFour .swiper-button-prev {
    left: 1rem !important;
  }
  
  .carouselFour .swiper-button-next {
    right: 1rem !important;
  }
}

/* Disabled Button State */
.carouselFour .swiper-button-next.swiper-button-disabled,
.carouselFour .swiper-button-prev.swiper-button-disabled {
  background-color: rgba(255, 255, 255, 0.6);
  opacity: 1 !important;
}

/* Pagination Container - Light Theme (Red) */
.carouselFour .swiper-pagination {
  bottom: 0.75rem !important;
  left: 50% !important;
  display: inline-flex !important;
  width: auto !important;
  transform: translateX(-50%);
  align-items: center;
  gap: 0.375rem;
  border-radius: 40px;
  border: 0.5px solid rgba(200, 16, 46, 0.2);
  background-color: rgba(200, 16, 46, 0.8);
  padding: 0.375rem 0.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Pagination Container - Dark Theme (White) */
.dark .carouselFour .swiper-pagination {
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 640px) {
  .carouselFour .swiper-pagination {
    bottom: 1.25rem !important;
  }
}

/* Pagination Bullets - Light Theme (White dots on red container) */
.carouselFour .swiper-pagination-bullet {
  margin: 0 !important;
  height: 0.625rem;
  width: 0.625rem;
  background-color: #ffffff; /* White dots on red container */
  opacity: 0.7;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.carouselFour .swiper-pagination-bullet-active {
  width: 1.5rem;
  border-radius: 0.75rem;
  opacity: 1;
}

/* Pagination Bullets - Dark Theme (White dots on white container) */
.dark .carouselFour .swiper-pagination-bullet {
  background-color: #ffffff;
  opacity: 1;
}

/* SVG Icon Sizing */
.carouselFour .swiper-button-prev svg,
.carouselFour .swiper-button-next svg {
  height: auto !important;
  width: auto !important;
}

/* White background for transparent images */
.carouselFour .swiper-slide img {
  background-color: #ffffff;
}
/* Enovis Logo Styling - Increased Specificity */
.logo-enovis .logo-mark.red {
  fill: #c8102e !important;
  transition: all 0.5s ease;
}

.logo-enovis .logo-mark.black {
  fill: #010101 !important;
  transition: all 0.5s ease;
}

.logo-enovis .logo-text {
  fill: #010101 !important;
  transition: all 0.5s ease;
}

.xlogo-enovis .logo-mark {
  fill: #fff !important;
  transition: all 0.5s ease;
}

/* Dark Mode Logo Styles */
.dark .logo-enovis .logo-mark.red {
  fill: #fff !important;
  transition: all 0.5s ease;
}

.dark .logo-enovis .logo-mark.black {
  fill: #fff !important;
  transition: all 0.5s ease;
}

.dark .logo-enovis .logo-text {
  fill: #fff !important;
  transition: all 0.5s ease;
}

/* Compact Logo Styling */
.logo-compact .logo-mark.red {
  fill: #c8102e !important;
  transition: all 0.5s ease;
}

.logo-compact .logo-mark.black {
  fill: #010101 !important;
  transition: all 0.5s ease;
}

/* Dark Mode Compact Logo Styles */
.dark .logo-compact .logo-mark.red {
  fill: #fff !important;
  transition: all 0.5s ease;
}

.dark .logo-compact .logo-mark.black {
  fill: #fff !important;
  transition: all 0.5s ease;
}