:root {
  --swiper-theme-color: #fff;
  --swiper-navigation-color: var(--swiper-theme-color);
  --swiper-pagination-progressbar-bg-color: hsla(9, 100%, 31%, 0.5);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 0;
  --swiper-pagination-bullet-width: 30px;
  --swiper-pagination-bullet-height: 4px;
  --swiper-pagination-bullet-inactive-color: hsla(9, 100%, 22%, 0.5);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  top: inherit;
  bottom: 0;
}

#hero {
  padding: 0;
  margin-top: 90px;
  margin-top: 0;
  height: 60vh;
}

/* Ensure the parent container takes full viewport height */
.swiper-container {
  width: 100%;
  height: 100%;
  display: flex;
}

/* Make Swiper take full height of its parent */
.swiper {
  width: 100%;
  height: 100%;
}

/* Ensure each slide fully occupies the container */
.swiper-slide {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}

/* Ensure images fill the slide properly */
.swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Adjust to contain if needed */
}

.swiper-pagination-bullet {
  border-radius: 0;
  /*width: 30px;
  height: 3px;
  background-color: red;*/
  transition: background-color 0.3s ease;
}

.swiper-pagination-bullet-active {
  background-color: #fff;
}

.swiper-button-next,
.swiper-button-prev {
  width: 50px;
  /* Smaller width */
  height: 50px;
  /* Smaller height */
  font-size: 24px;
  /* Reduce arrow size */
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 24px;
  /* Default Swiper arrow size */
}