/* Container */
.adventures-section {
  padding: 50px 20px;
  max-width: 1600px;
  margin: 0 auto;
  font-family: sans-serif;
}

/* Header & Centering */
.adventures-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 40px;
  width: 100%;
}

.adventures-header-wrapper h2 {
  color: #6bb5b1;
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  text-transform:;
}

/* Seamless Double Waves - On the Right */
.adventures-waves {
  position: absolute;
  right: 0; 
  width: calc(48% - 160px);
  height: 50px; 
  opacity: 0.7;
  background-image: url('https://4167864.fs1.hubspotusercontent-na1.net/hubfs/4167864/Ola%20Cascada.png');
  background-repeat: repeat-x;
  background-position: right center; 
}

/* =========================================
   Slider Wrappers 
   ========================================= */
.adventures-slider-wrapper {
  position: relative;
  width: 100%;
}

.adventures-carousel {
  display: block;
  margin: 0 80px; /* Squeezes the images inward to create 80px of empty space on the sides */
  margin-bottom:50px;
}

/* Slide Spacing & Perfect Square */
.adventure-slide {
  padding: 0 10px; 
  box-sizing: border-box;
}
.adventure-card {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 100%; 
  overflow: hidden;
  text-decoration: none;
}

/* Background Images & Overlays */
.adventure-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.adventure-card:hover .adventure-bg {
  transform: scale(1.08); 
}

.adventure-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2); 
  transition: background 0.3s ease;
}
.adventure-card:hover .adventure-overlay {
  background: rgba(0, 0, 0, 0.4); 
}

/* Title Text */
.adventure-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  width: 90%;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* =========================================
   Arrows (Left & Right, Original White)
   ========================================= */
.adventures-carousel .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: transparent !important; 
  color: #fff !important; 
  border: none;
  cursor: pointer;
  width: 100px !important; 
  height: 100px; !important; 
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.9)); 
  transition: 0.3s;
}

.adventures-carousel .slick-arrow svg {
  width: 50px;
  height: 50px;
}

.adventures-carousel .slick-arrow:hover {
  color: #00a4b4 !important; 
}

/* Pushed completely outward into the 80px margin space */
.adventures-carousel .slick-prev { left: -80px !important; }
.adventures-carousel .slick-next { right: -80px !important; }

/* Nuke default ghost arrows */
.adventures-carousel .slick-arrow::before,
.adventures-carousel .slick-arrow::after {
  display: none !important;
}

/* =========================================
   Mobile Adjustments 
   ========================================= */
/* =========================================
   Mobile Adjustments 
   ========================================= */
@media (max-width: 768px) {
  /* Wave adjustments (matching the successful destination size) */
  .adventures-waves { 
    width: calc(50% - 70px); 
    height: 70px; 
    background-size: auto 20px;
  }
  
  .adventures-header-wrapper h2 { 
    font-size: 20px; 
  }
  
  /* Shrink the invisible clickable box and the visible SVG arrow */
  .adventures-carousel .slick-arrow {
    width: 40px !important;
    height: 40px !important;
  }
  .adventures-carousel .slick-arrow svg { 
    width: 30px; 
    height: 30px; 
  }
  
  /* Give images more room and push arrows flat against the screen edges */
  .adventures-carousel { margin: 0 20px; }
  .adventures-carousel .slick-prev { left: -30px !important; }
  .adventures-carousel .slick-next { right: -30px !important; }
}