/* Mobile layout improvements and readability fixes */
/* Generated: 2025-09-17 */

/* General: avoid horizontal scrollbars and side gaps */
html, body {
  overflow-x: hidden;
}

/* Ensure media scales properly */
img, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* Base typography for small screens */
@media (max-width: 768px) {
  html { font-size: 17px; }
  body { font-size: 1rem; line-height: 1.7; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* Headings scale for readability */
  h1 { font-size: 1.75rem; line-height: 1.25; }
  h2 { font-size: 1.5rem; line-height: 1.3; }
  h3 { font-size: 1.25rem; line-height: 1.3; }
  p, li { font-size: 1rem; }

  /* Slider headings and description */
  .slider__inner h1,
  .slider__inner h2 { font-size: 2rem; line-height: 1.2; letter-spacing: 0; }
  .slider__inner .slider-description { font-size: 1rem; line-height: 1.6; margin-top: 0.75rem; padding: 0 8px; }
  .slide__align--center { padding-top: 80px; padding-bottom: 60px; }

  /* Containers: full width, gentle padding */
  .container, .container-fluid, .site-container, .wrapper, .page-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Rows/columns: reduce gutters slightly */
  .row { margin-left: -8px; margin-right: -8px; }
  [class*="col-"] { padding-left: 8px; padding-right: 8px; }

  /* Hero/slider sections: remove internal margins and ensure full-bleed media */
  .hero, .hero-slider, .slider, .carousel, .owl-carousel, .slick-slider {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero img, .hero-slider img, .slider img, .carousel img, .owl-carousel img, .slick-slider img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    display: block;
  }
  .hero .container, .hero-slider .container { padding-left: 0; padding-right: 0; }

  /* Slider dots: bottom centered horizontal */
  .control__style--left .owl-dots,
  .control__style--right .owl-dots {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 16px !important;
    transform: translateX(-50%) !important;
  }
  .control__style--left .owl-dots .owl-dot,
  .control__style--right .owl-dots .owl-dot { display: inline-block; margin: 0 6px; padding: 0; }
  .control__style--left .owl-dots .owl-dot span,
  .control__style--right .owl-dots .owl-dot span { width: 18px; height: 4px; }

  /* Sections: consistent internal spacing */
  section, .section, .content-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Buttons/tap targets */
  a, button { min-height: 44px; }

  /* Fun-fact section: layout and sizes */
  .funfact__wrap { display: flex; flex-wrap: wrap; gap: 16px 0; }
  .single__fact__flex { width: 50%; display: flex; flex-direction: column; align-items: center; }
  .fact__icon .icon { font-size: 32px; }
  .fact__count span.count { font-size: 24px; margin-top: 8px; }
  .fact__title p { font-size: 14px; margin-top: 2px; }

  /* Keep package details lifted slightly on mobile unless overridden elsewhere */
  .package__details { top: -26px; }
}

/* Ultra-small devices */
@media (max-width: 360px) {
  html { font-size: 16px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.35rem; }
  .slider__inner h1,
  .slider__inner h2 { font-size: 1.5rem; }
  .slider__inner .slider-description { font-size: 0.95rem; }
  .single__fact__flex { width: 100%; }
  .fact__icon .icon { font-size: 28px; }
  .fact__count span.count { font-size: 22px; }
}