.hero-carousel {
  max-width: 100vw;;
  position: relative;
  overflow: hidden;
  
}

/* maintains image size */
.hero-carousel img {
  width: 100vw;
  max-width: 100vw;
  height: auto;
  display: block;
  margin: 0 auto;
}
.hero-carousel .slick-dots {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  z-index: 2;
  text-align: center;
}

/* indicators */
.hero-carousel .slick-dots li button:before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  color: transparent !important;
  opacity: 1 !important;
  margin: 0 auto;
}

.hero-carousel .slick-dots li.slick-active button:before {
  background: rgba(255,255,255,1);
}

/* remove default square indicator styles */
.hero-carousel .slick-dots li button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 16px;   /* Match or slightly exceed your dot size */
  height: 16px;
  padding: 0;
}

 /* arrows */
.hero-carousel .slick-prev,
.hero-carousel .slick-next {
   position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 48px;   /* to match SVG size */
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-carousel .slick-prev:hover svg path,
.hero-carousel .slick-next:hover svg path {
  stroke: rgba(255,255,255,0.5);
  transition: stroke 0.2s;
}

/* positions arrow x axis */
.hero-carousel .slick-prev {
  left: 30px;
}
.hero-carousel .slick-next {
  right: 30px;
}







/* media queries */
@media (max-width: 1024px) {
  .hero-carousel img {
    width: 100vw;
    height: auto;
  }
  .hero-carousel {
    margin-top: 64px; /* header height for tablets */
  }
  .hero-carousel .slick-prev,
  .hero-carousel .slick-next {
    width: 40px;
    height: 40px;
  }
  .hero-carousel .slick-prev svg,
  .hero-carousel .slick-next svg {
    width: 40px;
    height: 40px;
  }
  .hero-carousel .slick-dots {
    bottom: 16px;
  }
  .hero-carousel .slick-dots li button {
    width: 14px;
    height: 14px;
  }
  .hero-carousel .slick-dots li button:before {
    width: 10px;
    height: 10px;
  }
   .hero-carousel .slick-dots li {
    margin: 0 4px;
  }
}

@media (max-width: 768px) {
  .hero-carousel img {
    width: 100vw;
    height: auto;
  }
   .hero-carousel {
    margin-top: 0px;
  }
  .hero-carousel .slick-prev,
  .hero-carousel .slick-next {
    width: 32px;
    height: 32px;
  }
  .hero-carousel .slick-prev svg,
  .hero-carousel .slick-next svg {
    width: 32px;
    height: 32px;
  }
  .hero-carousel .slick-prev { left: 20px; }
  .hero-carousel .slick-next { right: 20px; }
  .hero-carousel .slick-dots {
    bottom: 10px;
  }


  .hero-carousel .slick-dots li button {
    width: 12px;
    height: 12px;
  }
  .hero-carousel .slick-dots li button:before {
    width: 8px;
    height: 8px;
  }
  .hero-carousel .slick-dots li {
    margin: 0 2px;
  }
}

@media (max-width: 480px) {
  .hero-carousel img {
    width: 100vw;
    height: auto;
    min-height: 120px;
    max-height: 50vh;
    object-fit: cover;
    display: block;
  }
  .hero-carousel .slick-prev,
  .hero-carousel .slick-next {
    width: 24px;
    height: 24px;
  }

  .hero-carousel .slick-prev svg,
  .hero-carousel .slick-next svg {
    width: 24px;
    height: 24px;
  }

  .hero-carousel .slick-prev { left: 8px; }
  .hero-carousel .slick-next { right: 8px; }
  .hero-carousel .slick-dots {
    bottom: 4px;
  }
  .hero-carousel .slick-dots li button {
    width: 8px;
    height: 8px;
  }
  .hero-carousel .slick-dots li button:before {
    width: 6px;
    height: 6px;
  }
   .hero-carousel .slick-dots li {
    margin: 0 1px;
  }
}