.light-mode-color1 {
  background-color: #ff5733 !important;
}

.light-mode-color2 {
  background-color: #33ff57 !important;
}

.light-mode-color3 {
  background-color: #ff6bb3 !important;
}

.light-mode-color4 {
  background-color: #7fc134 !important;
}

.light-mode-color5 {
  background-color: #e7611e !important;
}

.section-header-image {
  max-width: 350px;
}

@media (max-width: 400px) {
  .section-header-image {
    width: 60%;
    height: auto; /* Maintain aspect ratio */
  }
}
.carousel-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align items to the top to prevent stretching */
  margin: 0 auto; /* Add some spacing around the carousel */
  width: 100%; /* Ensure it doesn't exceed the container width */
  max-width: 1700px; /* Optional: Limit the maximum width */
  box-sizing: border-box; /* Include border in width calculation */
}

.carousel {
  position: relative;
  width: 100%; /* Make it responsive */
  max-width: 1700px; /* Optional: Limit the carousel width */
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: auto; /* Ensure the height adjusts to the content */
  align-items: center; /* Center images vertically within the carousel */
}

.carousel-inner img {
  min-width: 100%; /* Ensures each slide takes up the full width of the carousel */
  height: auto;
  object-fit: contain; /* Ensure images fit within the container without distortion */
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  font-size: clamp(1rem, 4vw, 2.5rem);
  cursor: pointer;
  padding: 0; /* Remove extra padding to prevent stretching */
  z-index: 1000;
  border-radius: 50%;
  width: clamp(25px, 6vw, 54px); /* Fixed width */
  height: clamp(25px, 6vw, 54px); /* Fixed height */
  display: flex;
  justify-content: center;
  align-items: center; /* Center the button content */
  box-sizing: border-box; /* Ensure padding and border are included in size */
}

.carousel-control.prev {
  background: none; /* Remove background color */
  background-image: url("../image/carousel/prev.svg"); /* Add the prev button image */
  background-size: contain; /* Ensure the image fits within the button */
  background-repeat: no-repeat; /* Prevent tiling */
  background-position: center; /* Center the image */
  color: transparent; /* Hide text content */
  left: 10px;
}

.carousel-control.next {
  background: none; /* Remove background color */
  background-image: url("../image/carousel/next.svg"); /* Add the next button image */
  background-size: contain; /* Ensure the image fits within the button */
  background-repeat: no-repeat; /* Prevent tiling */
  background-position: center; /* Center the image */
  color: transparent; /* Hide text content */
  right: 10px;
}

.swiper-container {
  margin-top: 28px;
  position: relative;
  overflow: hidden;
}

.swiper-slide {
  max-width: 700px;
}
.swiper-slide img {
  max-width: 100%;
}

.emblem {
  width: 100%;
  height: auto;
}

.swiper-button-next,
.swiper-button-prev {
  background: rgba(208, 0, 19, 0.6);
  border-radius: 50%;
  color: #fff;
  width: clamp(25px, 6vw, 54px); /* Fixed width */
  height: clamp(25px, 6vw, 54px); /* Fixed height */
}

.swiper-button-next::after {
  content: "" !important;
}

.swiper-button-prev::after {
  content: "" !important;
}

.swiper-button-next {
  background: none; /* Remove background color */
  background-image: url("/assets/image/carousel/next.svg"); /* Add the next button image */
  background-size: contain; /* Ensure the image fits within the button */
  background-repeat: no-repeat; /* Prevent tiling */
  background-position: center; /* Center the image */
}

.swiper-button-prev {
  background: none; /* Remove background color */
  background-image: url("/assets/image/carousel/prev.svg"); /* Add the prev button image */
  background-size: contain; /* Ensure the image fits within the button */
  background-repeat: no-repeat; /* Prevent tiling */
  background-position: center; /* Center the image */
}

.emblem {
  border-radius: 50%;
  border: 2px solid #192844;
}

@media (max-width: 920px) {
  .swiper-slide {
    max-width: 70%;
  }
}/*# sourceMappingURL=carousel.css.map */