/* --- BODY RESET (Recommended for Full-Width Sliders) --- */
body {
  margin: 0;
  padding: 0;
}

/* --- SLIDER CONTAINER --- */
.slider-container {
  /* Full width display */
  width: 100%;
  padding: 0;
  margin: 0;

  /* Required for stacking slides */
  position: relative;
  overflow: hidden;

  /* Smooth transition for when JavaScript changes the container height */
  transition: height 0.5s ease-in-out;
}

/* --- INDIVIDUAL SLIDE --- */
.slide {
  /* Stacks all slides on top of each other */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  /* Initially hide the slide */
  opacity: 0;

  /* THIS CREATES THE FADE EFFECT: Smooth transition for opacity changes */
  transition: opacity 1.5s ease-in-out;
}

/* --- IMAGE STYLES --- */
.slide img {
  width: 100%;
  /* Keep height auto so the image scales naturally and JavaScript can measure it */
  height: auto;
  display: block;
}

/* --- ACTIVE SLIDE CLASS (Added by JavaScript) --- */
.slide-active {
  /* Make the current slide fully visible, triggering the fade-in transition */
  opacity: 1;
}

.fb {
  font-weight: bold;
}

/* 1. Reset Body Margins for true edge-to-edge content */
body {
  margin: 0;
  padding: 0;
}

/* 2. Map Container Styles */
.map-container {
  /* Ensure the container takes up all available horizontal space */
  width: 100%;
  /* Remove any margins that might push it inwards */
  overflow: hidden;
}

/* 3. iFrame Styles */
.map-container iframe {
  /* CRITICAL: Force the iframe to 100% width of its container */
  width: 100%;

  /* Set height here (since we removed the attribute in HTML) */
  height: 450px;

  border: none;
}

/* Media Query for Mobile Devices */
@media screen and (max-width: 600px) {
  /* Target the main slider container class */
  .slider-container {
    display: none !important;
  }
  /* You may also hide the body margin reset if it causes issues */
  body {
    margin: initial;
    padding: initial;
  }
}