/* Reset some basics */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Swiper container*/
.swiper-container {
  width: 100%;             /* Full width relative to parent */
  max-width: 600px;        /* Optional max width to limit size on large screens */
  height: auto;            /* Let height adjust automatically */
  margin: 20px auto;       /* Center horizontally and add vertical margin */
}
   

/* Swiper wrapper (usually automatic, but safe to include) */
.swiper-wrapper {
  display: flex;
  align-items: center;
}

/* Each slide */
.swiper-slide {
  width: auto;             /* Allow width to auto adjust */
  flex-shrink: 0;          /* Prevent shrinking below content width */
}

/* Responsive images inside slides */
.swiper-slide img {
  width: 100%;             /* Image fills slide width */
  height: 100%;            /* Maintain aspect ratio */
  display: block;          /* Remove inline gaps */
  border-radius: 8px;      /* Optional: rounded corners */
  object-fit: cover;       /* Crop images nicely if needed */
}


/* Title overlay*/
.slide-title {
  position: absolute;
  top: clamp(10px, 5vw, 30px);
  left: clamp(10px, 5vw, 30px);
  padding: clamp(10px, 4vw, 20px);
  text-align: left;
  line-height: 1.2;
  text-transform: uppercase;
  font-size: clamp(22px, 5vw, 50px);
  color: #ccc;
  background: rgba(85, 55, 0, 0.75); /* Semi-transparent background */
  font-family: 'Lato', sans-serif;
  z-index: 10;
  max-width: 90%; /* Prevent overflow on smaller screens */
}