/* ================================
   FULL-BLEED HOMEPAGE SLIDER (PS 8 / Classic)
   Images are 1175x448 (ratio locked, no crop, no letterbox)
   ================================ */

/* Make the slider section full viewport width (break out of .container) */
#index #carousel {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Make sure inner wrappers don’t limit width */
#index #carousel .carousel-inner,
#index #carousel .carousel-item {
  width: 100vw;
  max-width: 100vw;
}

/* Lock slider height to your banner ratio (1175 / 448) */
#index #carousel .carousel-inner {
  aspect-ratio: 1175 / 448;  /* ~2.6228:1 */
  height: auto;              /* let aspect-ratio drive height */
  overflow: hidden;
}

/* Ensure each slide fills the ratio box (do NOT change display rules) */
#index #carousel .carousel-item {
  height: 100%;
}

/* Desktop/tablet: Force the image to span edge-to-edge */
#index #carousel .carousel-item img {
  display: block;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
}

/* ----------------
   MOBILE FIX
   On small screens, don't force 100vw + 100% height on the <img>
   (it makes the visible slide look tiny/misaligned in Bootstrap carousel)
   Keep full-bleed container, but let the image size naturally.
   ---------------- */
@media (max-width: 768px) {
  #index #carousel {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    
  }
  #index #carousel .carousel-item img {
    width: 100% !important;      /* fill the carousel width */
    max-width: 100% !important;
    height: auto !important;     /* preserve banner ratio */
    object-fit: contain;         /* still show whole image */
    margin: 0;                   /* avoid centering weirdness */
  }

  /* Optional: make controls easier to tap */
  #index #carousel .carousel-control-prev,
  #index #carousel .carousel-control-next {
    width: 18%;
  }
}

#wrapper {
  padding-top: 0px;
}

.carousel .carousel-item .caption {
  display: none;
}

.header-top{
  background: #25c322;
  background: linear-gradient(0deg, #90c322 0%, #90c32280 60%, #c3222200 100%);
}

#header .header-top a[data-depth="0"] {
  color: rgb(10, 165, 57);
}

/* Prevent a horizontal scrollbar caused by 100vw on some browsers */
body {
  overflow-x: clip; /* or hidden if clip isn't supported */
}