@media (max-width: 768px) {
  body {
    padding-top: 70px; /* space for fixed header */
  }
  .tropic-header {
    padding: 10px 0;
  }
  .logo h1 {
    font-size: 1.4rem;
  }
}

@media (max-width: 900px) {
  .tour-main-layout {
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    gap: 30px;
  }

  .right-side {
    width: 100%;
    position: static;
  }

  .booking-box {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .gallery-side {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

@media (max-width: 768px) {
  .highlights-grid {
    width: 95%;
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .itinerary {
    padding-left: 0px;
  }
  .day-header {
    font-size: 1rem;
  }
  .day-content {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .package-card {
    width: 100%;
  }
  .package-details h3 {
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  .info-card {
    padding: 14px 16px;
  }
  .info-card h4 {
    font-size: 0.9rem;
  }
  .info-card p {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .whatsapp-float {
    bottom: 15px;
    left: 15px;
    width: 55px;
    height: 55px;
  }
}

/* MOBILE GALLERY FIX */
@media (max-width: 768px) {
  .photo-gallery .gallery-container {
    display: grid;
    grid-template-columns: 2fr 1fr;  /* Big image + small images */
    grid-template-rows: auto auto;   /* 2 rows */
    gap: 10px;
  }

  /* Big main image takes full height on mobile */
  .gallery-main {
    grid-column: 1 / 2;
    grid-row: 1 / 3; /* Spans tall area */
  }

  .gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }

  /* Small images arranged vertically */
  .gallery-side {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .gallery-side img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
  }
}

/* Make all cards smaller on mobile */
@media (max-width: 768px) {

  /* Reduce card width */
  .info-card,
  .highlights-grid .highlight-item,
  .itinerary .day-box,
  .package-card,
  .booking-box {
    padding: 12px 14px !important;
    border-radius: 10px;
  }

  /* Reduce text size */
  .info-card h4,
  .highlight-item h4,
  .day-header,
  .package-details h3 {
    font-size: 0.95rem !important;
  }

  .info-card p,
  .highlight-item p,
  .day-content,
  .package-details p {
    font-size: 0.85rem !important;
  }

  /* Reduce spacing between cards */
  .info-card,
  .highlight-item,
  .day-box,
  .package-card,
  .booking-box {
    margin-bottom: 14px !important;
  }
}

.package-card,
.package-card * {
  white-space: normal !important;
  overflow-wrap: break-word;
}

.tour-container {
  grid-auto-columns: 80%;  /* smaller cards on mobile */
  padding: 0 15px;         /* space on both sides */
}

@media (max-width: 480px) {
  .package-card {
    padding: 15px;
  }
}


/* Mobile adjustments */
@media (max-width: 768px) {
  /* Stack the main layout vertically */
  .tour-main-layout {
    display: flex;
    flex-direction: column;
  }

  /* Move right-side (booking + tour info) above left content */
  .tour-main-layout .right-side {
    order: -1; /* appear first */
    margin-bottom: 20px;
  }

  /* Optional: adjust card width/padding for mobile */
  .left-content, .right-side {
    width: 100%;
    padding: 0 10px;
  }

  /* Reduce spacing for overview text */
  .left-content p {
    line-height: 1.5;
    font-size: 14px;
  }

  /* Adjust highlights grid */
  .highlights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }


  /* Tour info cards */
  .info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.tour-tabs {
  position: sticky;       /* sticks when scrolling */
  top: 80px;              /* adjust based on your fixed header height */
  background: #fff;       /* background so text is readable */
  z-index: 999;           /* on top of other content */
  padding: 10px 0;
  display: flex;
  gap: 10px;
  border-bottom: 1px solid #ddd; /* optional visual separation */
}

/* Optional: make it scrollable horizontally on mobile */
@media (max-width: 768px) {
  .tour-tabs {
    overflow-x: auto;
    white-space: nowrap;
  }
  .tour-tabs a {
    flex: 0 0 auto; /* prevent wrapping */
    padding: 8px 12px;
  }
}