@font-face {
  font-family: 'FiraSans';
  src: url("./fonts/FiraSansCondensed-Regular.ttf");
  }
  
  @font-face {
  font-family: 'FiraSans_Semi';
  src: url("./fonts/FiraSansCondensed-SemiBold.ttf");
  }

@font-face {
  font-family: 'FiraSans_L';
  src: url("./fonts/FiraSansCondensed-Light.ttf");
  }

@font-face {
  font-family: 'FiraSans_B';
  src: url("./fonts/FiraSansCondensed-Bold.ttf");
  }

@font-face {
  font-family: 'FiraSans_M';
  src: url("./fonts/FiraSansCondensed-Medium.ttf");
  }





body { font-family: Firasans; margin:0; }

    .slider {
      position: relative;
      width: 100%;
      max-width: 100%;               /* match your image width */
      margin: 0 auto;
      aspect-ratio: 2000 / 640;       /* preserve image ratio */
      overflow: hidden;
      background: #000;
    }

    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: scale(1.1);
      transition: opacity 1s ease, transform 1s ease;
    }

    .slide.active {
      opacity: 1;
      transform: scale(1);
      z-index: 1;
    }

    .slide img, .slide video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Text overlay for 4th video */
    .overlay-text {
      position: absolute;
      top: 50%;
      left: 70%;
      transform: translate(-50%, -50%);
      color: white;
	  font-family: FiraSans;
      font-size: 28px;
      font-weight: bold;
      text-align: left;
      background: rgba(0,0,0,0.5);
      padding: 20px;
      line-height: 1.4;
    }
	
/* small line ONLY for balloons */
.overlay-text span {
  display: block;
  font-size: 16px;   /* 👈 smaller as you wanted */
  font-weight: 500;
  margin-top: 6px;
}

    /* Pagination dots on left middle */
    .pagination {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 2;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ccc;
      cursor: pointer;
      transition: background 0.3s;
    }

    .dot.active {
      background: green;
    }
	/* ✅ ONLY MOBILE CHANGE (no layout disturbance) */
@media (max-width: 768px) {

  /* hide pagination ONLY */
  .pagination {
    display: none;
  }

  /* keep banner height natural but adjust text */
  .overlay-text {
    left: 50%;
    text-align: center;
    font-size: 18px;
    padding: 12px;
  }

  .overlay-text span {
    font-size: 12px;
  }
}
/* --- Dedicated Gallery Page Banner Styles --- */

/* Keeps the exact aspect ratio of your original slider design */
.gallery-banner {
  position: relative;
  width: 100%;
  max-width: 100%;               
  margin: 0 auto;
  aspect-ratio: 2000 / 640;       
  overflow: hidden;
  background: #000;
}

/* Forces the inner slide to fill the container without animations or absolute layout breaks */
.gallery-banner .slide {
  width: 100%;
  height: 100%;
}

.gallery-banner .slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Static text overlay alignment for the video */
.gallery-banner .overlay-text {
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 28px;
  font-weight: bold;
  text-align: left;
  background: rgba(0,0,0,0.5);
  padding: 20px;
  line-height: 1.4;
  z-index: 2;
}

.gallery-banner .overlay-text span {
  display: block;
  font-size: 16px;   
  font-weight: 500;
  margin-top: 6px;
}

/* Responsive configurations for mobile devices */
@media (max-width: 768px) {
  .gallery-banner .overlay-text {
    left: 50%;
    text-align: center;
    font-size: 18px;
    padding: 12px;
    width: 80%;
  }

  .gallery-banner .overlay-text span {
    font-size: 12px;
  }
}