/* main carousel container — elegant rounded glassmorphic card */
    .travel-carousel {
      max-width: 900px;
      width: 90%;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(2px);
      border-radius: 2rem;
      padding: 1rem;
      box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
    }

    /* carousel inner wrapper */
    .carousel-container {
      position: relative;
      border-radius: 1.5rem;
      overflow: hidden;
      background-color: #1e2a32;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    }

    /* slide track — flex layout for slide transition (horizontal sliding) */
    .carousel-track {
      display: flex;
      transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }

    /* each slide */
    .carousel-slide {
      flex: 0 0 100%;
      position: relative;
      aspect-ratio: 16 / 9;                /* consistent height across devices */
      background: #2c3e33;
    }

    /* images: responsive + object-fit cover + lazy loading ready */
    .carousel-slide img {
      	width: 100%;
		height: 100%;
		object-fit: contain;         
		border-radius: 1rem;
      	transition: transform 0.4s ease, filter 0.3s ease;
      	filter: brightness(0.98) contrast(1.02);
    }

    /* subtle hover zoom on image (non-intrusive) */
    .carousel-slide:hover img {
      transform: scale(1.03);
      filter: brightness(1.02) contrast(1.05);
    }

    /* caption overlay — modern, smooth, semi-transparent */
    .slide-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2) 80%, transparent);
      color: white;
      padding: 1.5rem 1.8rem 1rem 1.8rem;
      font-weight: 500;
      font-size: 1.3rem;
      backdrop-filter: blur(3px);
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      letter-spacing: -0.2px;
      border-bottom-left-radius: 1.5rem;
      border-bottom-right-radius: 1.5rem;
      transition: all 0.3s;
    }

    .slide-caption span {
      display: block;
      font-size: 0.85rem;
      font-weight: 400;
      opacity: 0.85;
      margin-top: 0.3rem;
      letter-spacing: normal;
    }

    /* navigation arrows — modern circular buttons */
    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(20, 25, 35, 0.75);
      backdrop-filter: blur(6px);
      border: none;
      width: 48px;
      height: 48px;
      border-radius: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.25s ease;
      color: white;
      font-size: 1.8rem;
      font-weight: 500;
      z-index: 20;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      line-height: 1;
    }

    .nav-btn:hover {
      background: #2c3e66e6;
      transform: translateY(-50%) scale(1.07);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

    .nav-btn:active {
      transform: translateY(-50%) scale(0.98);
    }

    .btn-prev {
      left: 20px;
    }

    .btn-next {
      right: 20px;
    }

    /* pagination dots container */
    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 0.7rem;
      padding: 1.2rem 0.5rem 0.8rem;
      flex-wrap: wrap;
    }

    .dot {
      width: 12px;
      height: 12px;
      background-color: rgba(50, 60, 75, 0.5);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .dot.active {
      background-color: #2c5f8a;
      transform: scale(1.3);
      box-shadow: 0 0 0 2px rgba(255,255,240,0.6), 0 2px 6px rgba(0,0,0,0.2);
    }

    .dot:hover {
      background-color: #3b7ba0;
      transform: scale(1.2);
    }

    /* pause on hover indicator optional (extra ambient) */
    .carousel-container:hover .nav-btn {
      background: rgba(0, 0, 0, 0.8);
    }

    /* fade-in effect on slide images (soft animation on transition end is mixed) */
    @keyframes subtleFade {
      0% { opacity: 0.92; }
      100% { opacity: 1; }
    }

    .carousel-slide img {
      animation: subtleFade 0.5s ease-out;
    }

    /* responsive breakpoints: touch-friendly, resize captions */
    @media (max-width: 768px) {
        /* Main wrapper */
  .travel-carousel {
    width: 95%;
    max-width: 100%;
    padding: 0.6rem;
    border-radius: 1.2rem;
  }

  /* Container should not overflow */
  .carousel-container {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
  }

  /* Track controls height */
  .carousel-track {
    display: flex;
    height: 50vh; /* 🔥 responsive height */
  }

  /* Each slide fills full width */
  .carousel-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
  }

  /* 🔥 THIS IS THE IMPORTANT PART */
  .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;         
    object-position: 50% 20%;  
    border-radius: 1rem;
  }

	   .nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
      }
      .slide-caption {
        font-size: 1rem;
        padding: 1rem 1.2rem 0.7rem 1.2rem;
      }
      .slide-caption span {
        font-size: 0.7rem;
      }
      .btn-prev { left: 12px; }
      .btn-next { right: 12px; }
    }

    @media (max-width: 480px) {
		.travel-carousel {
	    width: 100%;
	    padding: 0.5rem;
	    border-radius: 1rem;
	  }
	
	  .carousel-container {
	    overflow: hidden;
	    border-radius: 0.8rem;
	  }
	
	  .carousel-track {
	    height: 35vh; /* 🔥 smaller & responsive */
	  }
	
	  .carousel-slide {
	    min-width: 100%;
	    height: 100%;
	  }
	
	  .carousel-slide img {
	    width: 100%;
	    height: 100%;
	    object-fit: contain;
	    object-position: 50% 20%; /* adjust if needed */
	    border-radius: 0.8rem;
	  }
      .nav-btn {
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
      }
      .slide-caption {
        font-size: 0.85rem;
        padding: 0.8rem 1rem 0.5rem 1rem;
      }
      .carousel-dots {
        gap: 0.5rem;
      }
      .dot {
        width: 10px;
        height: 10px;
      }
    }

    /* lazy loading blur-free placeholder */
    img[lazy="loading"] {
      filter: blur(2px);
      transition: filter 0.2s;
    }