/* =========================================================
   Skeleton / placeholder styles
   Shows shimmer placeholders while images & content load.
   ========================================================= */

/* Shimmer block base */
.sk {
  position: relative;
  overflow: hidden;
  background-color: #e8ecf1;
  border-radius: 6px;
}
.sk::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: sk-shimmer 1.4s infinite;
}
@keyframes sk-shimmer {
  100% { transform: translateX(100%); }
}

/* Text placeholder lines */
.sk-line {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.sk-line.w-80 { width: 80%; }
.sk-line.w-60 { width: 60%; }
.sk-line.w-40 { width: 40%; }
.sk-line.w-30 { width: 30%; }

/* Image placeholder: grey shimmer + fade-in on load */
img.sk-img {
  opacity: 0;
  background-color: #e8ecf1;
  background-image: linear-gradient(90deg, #e8ecf1 0%, #f3f5f8 50%, #e8ecf1 100%);
  background-size: 200% 100%;
  animation: sk-img-shimmer 1.4s infinite;
  transition: opacity 0.35s ease;
}
img.sk-img.loaded {
  opacity: 1;
  background-image: none;
  animation: none;
}
@keyframes sk-img-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Card placeholders for dynamic sections */
.sk-card {
  padding: 0 15px;
  margin-bottom: 25px;
}
.sk-card .sk-img-block {
  height: 220px;
  margin-bottom: 15px;
}
.sk-card .sk-title {
  height: 20px;
  width: 70%;
  margin-bottom: 12px;
}
.sk-card .sk-line {
  margin-bottom: 8px;
}

/* Deal / service placeholder */
.sk-deal .sk-img-block {
  height: 180px;
  margin-bottom: 15px;
}

/* Gallery placeholder grid item */
.sk-gallery .sk-img-block {
  height: 250px;
  margin-bottom: 10px;
}

/* Testimonial placeholder */
.sk-quote {
  height: 16px;
  width: 90%;
  margin: 0 auto 10px;
  border-radius: 4px;
}
.sk-quote.w-70 { width: 70%; }
.sk-quote.w-50 { width: 50%; }
.sk-quote.w-30 { width: 30%; }

/* Sidebar placeholder */
.sk-sidebar {
  height: 60px;
  margin-bottom: 12px;
}

/* Detail page placeholder */
.sk-detail-img {
  height: 340px;
  margin-bottom: 20px;
}
.sk-detail-line {
  height: 16px;
  margin-bottom: 12px;
}

/* Placeholder for CSS-background sections (slider banner) */
.bg-placeholder {
  background-color: #dfe6ec;
  background-image: linear-gradient(90deg, #dfe6ec 0%, #eef2f5 50%, #dfe6ec 100%);
  background-size: 200% 100%;
  animation: sk-img-shimmer 1.4s infinite;
}

/* Reserve space for detail-page hero image to avoid layout shift */
.gallery.detail-box img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Avoid layout shift: reserve logo area while image loads */
.logo.sk-logo,
.about-logo.sk-logo {
  display: inline-block;
}

@media (max-width: 767px) {
  .sk-card .sk-img-block { height: 170px; }
  .sk-detail-img { height: 220px; }
}

/* =========================================================
   Mobile/responsive fixes for fixed floating elements
   ========================================================= */

/* "Let's Plan Your Tour" tab (index) */
.tab {
  bottom: 300px !important;
  left: -70px !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}
@media (max-width: 767px) {
  .tab {
    bottom: 340px !important;
    left: -72px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* Floating phone / whatsapp icons */
.icons {
  bottom: 105px !important;
  right: 20px !important;
}
@media (max-width: 767px) {
  .icons {
    bottom: 95px !important;
    right: 14px !important;
  }
  .icons .whats svg {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Header nav on mobile: keep sticky logo visible */
@media (max-width: 767px) {
  .navigation .logo img {
    width: 100px !important;
    height: 62px !important;
  }
  .navbar-nav-wrapper {
    float: right !important;
    padding-right: 20px !important;
  }
  .upper-head .contact-info p {
    font-size: 11px;
    margin: 0 6px 0 0;
  }
}

/* Prevent horizontal scroll on small screens */
html, body {
  overflow-x: hidden;
}