/* --- Main Carousel Container --- */
.carousel {
  width: 80%;                            /* carousel takes 80% of the page width */
  margin-left: 10%;                       /* centered horizontally */
  overflow: hidden;                       /* hides content outside the viewport */
  height: 70vh;                           /* height based on screen height */
  position: relative;                     /* required for absolute arrows */
  margin-top: 20px;
  z-index: 20;                            /* above most elements */
  box-shadow: 8px 8px 10px rgba(0,0,0,0.582); /* visible boxed shadow */
  display: none;                          /* hidden by default (shown on mobile only) */
}

/* --- Track that contains all slides --- */
.track {
  display: flex;                          /* aligns all slides horizontally */
  width: 100%;
  transition: transform 0.4s ease;        /* smooth slide transition */
  height: 100%;
}

/* --- A slide/card inside the carousel --- */
.card {
  flex: 0 0 100%;                         /* each slide takes 100% of carousel width */
  max-width: 100%;
  padding: 5px;
  height: 100%;
  background-color: #e9e2d6;
}

/* --- Arrow buttons --- */
.arrow_carou {
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 999;                           /* ensures arrows stay above slides */
  position: absolute;                     /* allows placement on left/right */
  font-size: 50px;                        /* arrow icon size */
  color: #8c9e5d;                         /* arrow color */
  top: 40%;                               /* vertically centered */
  -webkit-tap-highlight-color: transparent !important; /* removes click flash on mobile */
  -webkit-touch-callout: none;
  user-select: none;                      /* prevents selection on click */
}

/* Left arrow positioning */
.left {
  left: 3%;
}

/* Right arrow positioning */
.right {
  right: 3%;
  text-align: right;
}

/* --- Mobile optimizations for carousel --- */
@media (max-width: 800px) {
  .carousel {
    display: block;                       /* carousel only visible on mobile */
  }

  .carou_in {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;       /* ensures image doesn't crop */
  }

  .item_carou_pic {
    height: 60% !important;
  }
}

/* --- Additional refinement for very small devices --- */
@media (max-width: 508px) {
  .top_carou {
    display: block !important;
  }

  .item_carou_pic {
    margin-top: 0 !important;             /* fixes spacing issue on tiny screens */
  }
}