/* ==========================================================================
   TRAVEL TOURS STYLESHEET
   Consolidated and Organized CSS for Xplore Travel Tours
   Version: 2.0 | Date: 2024
   ========================================================================== */

   /* ==========================================================================
   CSS RESET FOR BODY - ADD AT VERY BEGINNING
   ========================================================================== */
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

html, body {
  width: 100% !important;
  position: relative !important;
}

/* ==========================================================================
   TRAVEL TOURS STYLESHEET
   Consolidated and Organized CSS for Xplore Travel Tours
   Version: 2.0 | Date: 2024
   ========================================================================== */

/* ==========================================================================
   1. BRAND COLORS & UTILITIES
   ========================================================================== */
.bg-primesquare { background-color: #00A7D0; }
.text-primesquare { color: #00A7D0; }
.border-primesquare { border-color: #00A7D0; }

/* ... and the rest of your existing CSS continues ... */

/* ==========================================================================
   1. BRAND COLORS & UTILITIES
   ========================================================================== */
.bg-primesquare { background-color: #00A7D0; }
.text-primesquare { color: #00A7D0; }
.border-primesquare { border-color: #00A7D0; }

/* ==========================================================================
   2. ANIMATIONS & TRANSITIONS
   ========================================================================== */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.6s ease-out; }

/* ==========================================================================
   3. NAVIGATION & LINKS
   ========================================================================== */
.nav-link {
  color: #fff !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  display: block;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #006d77 !important;
  font-weight: 600;
}

.nav-link.active {
  font-weight: 800;
}

/* ==========================================================================
   4. TOUR COMPONENTS
   ========================================================================== */
.tour-heading {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #000;
  text-align: center;
  margin: 2rem auto 1.5rem;
  padding: 0.5rem 1rem;
  background-color: #007B7F;
  border-radius: 0.5rem;
  max-width: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.tour-heading:hover {
  background-color: #009599;
  transform: scale(1.01);
}

.tour-description {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  color: #374151;
  text-align: center;
  line-height: 1.75;
  max-width: 48rem;
  margin: 0 auto 2rem auto;
}

.tour-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tour-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0,0,0,0.15);
}

.tour-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tour-card:hover img { 
  transform: scale(1.05); 
}

.tour-card .card-body { 
  padding: 1rem; 
  line-height: 1.4; 
}

.tour-card .card-title {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #222;
  text-align: center;
}

.tour-card .card-subtitle {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 1rem;
  text-align: center;
}

.tour-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 0.75rem;
  color: #333;
}

.tour-meta {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: #666;
  margin-top: 0.25rem;
  text-align: center;
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn-custom {
  background-color: #D21F3C;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  display: block;
  text-align: center;
  margin: 0.5rem 0;
  width: 100%;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-custom:hover {
  background-color: #a9162e;
  transform: scale(1.03);
}

.tour-card .btn {
  display: block;
  width: 100%;
  background-color: #007B7F;
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease;
}

.tour-card .btn:hover { 
  background-color: #009599; 
}

/* ==========================================================================
   6. LIST STYLES
   ========================================================================== */
.day-block ul,
.content-area ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.day-block ul li,
.content-area ul li {
  margin-bottom: 0.4rem;
  font-size: 15px;
  line-height: 1.6;
}

.day-block ul li span.font-semibold {
  display: block;
  margin-top: 1em;
}

.day-block ul ul {
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: #666;
}

ul {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
  list-style-type: disc;
}

ul li {
  margin-bottom: 0.4rem;
  font-size: 15px;
  line-height: 1.6;
}

/* ==========================================================================
   7. SLIDER/CAROUSEL CONTROLS
   ========================================================================== */
#slider-track { 
  position: relative; 
  z-index: 10; 
}

#prevBtn, #nextBtn { 
  position: absolute !important; 
  z-index: 50 !important; 
}

/* ==========================================================================
   8. DIVIDER
   ========================================================================== */
.divider-line {
  width: 95%;
  border-top: 1px solid #9CA3AF;
}

@media (min-width: 768px) {
  .divider-line { 
    width: 85%; 
  }
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
/* ==========================================================================
   9.1 FOOTER – XPLORE TOURS SPECIFIC DESIGN
   Enhanced layout, colors, and responsive behavior
   ========================================================================== */

/* ✅ Common Heading Box for all footer sections */
.footer-col h3,
.follow-us-heading {
  background-color: #ffffff !important;
  color: #008c91 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  text-align: left !important;
  border-radius: 0.5rem;
  padding: 0.25rem 0.8rem !important;
  margin-bottom: 1rem !important;
  display: inline-block;
  width: 100%;
  min-height: 2.2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ✅ Footer text + links */
.footer-col ul li a,
.footer-col p,
.footer-col ul li {
  font-size: 1rem !important;
  color: #ffffff !important;
  font-weight: 500;
  line-height: 1.8rem !important;
  text-align: left !important;
}

.footer-col ul li a:hover {
  color: #e5e5e5 !important;
  text-decoration: underline;
}

/* ✅ Follow Us icons */
.footer-col a i {
  font-size: 3rem !important;
  color: #008c91 !important;
  transition: all 0.3s ease-in-out;
}

.footer-col a:hover i {
  color: #005f63 !important;
  transform: scale(1.15);
}

/* ✅ Contact Info list spacing */
.footer-col ul li {
  margin-bottom: 0.35rem !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ✅ Tagline below logo */
.tagline {
  color: #008c91;
  text-align: center !important;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  margin: 0 auto !important;
  display: block;
  width: 100%;
}

/* ✅ Responsive adjustments */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 0.75rem !important;
  }

  .footer-col {
    margin-bottom: 1rem !important;
  }

  .footer-col h3,
  .follow-us-heading {
    font-size: 0.85rem !important;
    padding: 0.25rem 0.6rem !important;
    min-height: 2rem;
  }

  .footer-col ul li,
  .footer-col p {
    line-height: 1.6rem !important;
    margin-bottom: 0.3rem !important;
    font-size: 1rem !important;
  }
}






/* ✅ Responsive tagline & logo adjustments */

/* Large screens – smaller logo, larger tagline */
@media (min-width: 1024px) {
  .footer img {
    height: 15rem !important;
  }

  .tagline {
    font-size: 2rem !important;
  }
}

/* Small screens – smaller logo, slightly bigger tagline */
@media (max-width: 768px) {
  h1.tagline {
    font-size: 1.6rem !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
  }

  .footer img {
    height: 6rem !important;
  }
}


/* ==========================================================================
   10. SOCIAL LINKS (Unified & Clean Version)
   ========================================================================== */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
  margin-right: 10px;
  overflow: hidden;
}

/* Facebook - proper styling */
.social-link.facebook {
  background-color: #1877F2;
}

/* Instagram - proper styling */
.social-link.instagram {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* Target the Font Awesome icons specifically */
.social-link .fab {
  color: white !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Regular Facebook icon (fa-facebook) - fits perfectly in square */
.social-link.facebook .fa-facebook {
  font-size: 22px;
}

/* Facebook-f icon (fa-facebook-f) - minimal 'f' */
.social-link.facebook .fa-facebook-f {
  font-size: 18px;
  transform: scale(0.85);
}

/* Instagram icon */
.social-link.instagram .fa-instagram {
  font-size: 22px;
}

/* Hover effects */
.social-link:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.social-link:hover .fab {
  color: white !important;
}


/* ==========================================================================
   12. MOBILE MENU
   ========================================================================== */
#mobile-menu-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  display: inline-block;
  min-width: 180px;
  border-radius: 6px;
}

#mobile-menu-overlay ul {
  list-style: none;
  padding: 0.5rem 1rem;
  margin: 0;
  text-align: left;
}

#mobile-menu-overlay ul li { 
  margin: 0.25rem 0; 
}

#mobile-menu-overlay ul li a {
  display: block;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  text-align: left;
  transition: color 0.3s ease, background-color 0.3s ease;
}

#mobile-menu-overlay ul li a:hover {
  color: #E63946;
  background-color: rgba(255,255,255,0.1);
  font-weight: 600;
}

#mobile-menu-overlay.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ==========================================================================
   13. ABOUT PAGE SPECIFIC STYLES
   ========================================================================== */
.about-justify {
  text-align: justify;
  hyphens: auto;
}

/* ==========================================================================
   14. LOGO SIZES & RESPONSIVE BEHAVIOR
   ========================================================================== */

/**
 * LOGO SIZE BREAKPOINT SYSTEM:
 * - Mobile (≤767px): 250px width (maintains aspect ratio)
 * - Tablet (768px-1024px): 80px height (inherits from desktop)
 * - Desktop (≥1025px): 80px height
 * 
 * Original image dimensions: 3930x892 (4.4:1 aspect ratio)
 */

/* ✅ Base Logo Styles (All Screens) */
header img[alt="Anitya Tours Logo"] {
  max-height: 64px;
  width: auto;
  transition: max-height 0.3s ease;
}

/* ==========================================================================
   15. SCROLLABLE IMAGE GALLERY
   ========================================================================== */
.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 3px;
}

.scroll-container::-webkit-scrollbar { 
  display: none; 
}

.scroll-container { 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

.image-card {
  flex: 0 0 calc((100% / 3) - 2px);
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Arrows for scrolling */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.95);
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 10;
}

.scroll-btn:hover { 
  background: #f8fafc; 
}

.scroll-btn.left { 
  left: -25px; 
}

.scroll-btn.right { 
  right: -25px; 
}

/* ==========================================================================
   16. TOP GALLERY SPECIFIC STYLES
   ========================================================================== */
.header-scroll .scroll-container {
  gap: 0.5rem;
}

.header-scroll .image-card {
  flex: 0 0 auto !important;
  width: calc(25% - 3px) !important;
  height: 10rem !important;
}

.header-scroll .scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 10;
  transition: background-color 0.2s ease;
}

.header-scroll .scroll-btn:hover {
  background: #f8fafc;
}

.header-scroll .scroll-btn.left {
  left: -25px !important;
}

.header-scroll .scroll-btn.right {
  right: -25px !important;
}

.header-scroll .scroll-container {
  gap: 4px;
}

/* ==========================================================================
   17. WATERMARK DISPLAY OVER IMAGES
   ========================================================================== */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.image-card {
  position: relative;
}

.image-card img {
  display: block;
}

.image-card span {
  pointer-events: none;
}

/* ==========================================================================
   18. FIXED HEADER STYLES
   ========================================================================== */
header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Add padding to body to account for fixed header */
body {
  padding-top: 120px;
}


/* ==========================================================================
   19. GO TO TOP & GO BACK BUTTONS - CENTERED & AUTO-HIDE
   ========================================================================== */

#goToTopBtn,
#goBackBtn {
  position: fixed;
  z-index: 9999;
  background-color: #02A0A9;
  color: white;
  border: none;
  border-radius: 50%;
  display: none; /* Hidden by default - JavaScript will control */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  margin: 0;
  padding: 0;
  width: 50px;
  height: 50px;
}

/* DESKTOP - Right side, horizontal 
@media (min-width: 768px) {
  #goToTopBtn {
    bottom: .5rem;
    right: 2rem;
  }
  
  #goBackBtn {
    bottom: .5rem;
    right: 6rem; 
  }
}
*/

/* MOBILE - Center bottom, horizontal line */
@media (max-width: 767px) {
  #goToTopBtn,
  #goBackBtn {
    bottom: 1.5rem; /* DECREASED from 4rem to 1.5rem (moves DOWN) */
    width: 45px;
    height: 45px;
    transform: translateX(-50%);
  }
  
  #goToTopBtn {
    left: 45%; /* Position left button */
  }
  
  #goBackBtn {
    left: 55%; /* Position right button */
  }
}

/* Button hover effects */
#goToTopBtn:hover,
#goBackBtn:hover {
  background-color: #007B7F;
  transform: scale(1.1);
}

/* Mobile hover fix */
@media (max-width: 767px) {
  #goToTopBtn:hover,
  #goBackBtn:hover {
    transform: translateX(-50%) scale(1.1);
  }
}

/* ==========================================================================
   20. PRINT STYLES
   ========================================================================== */
@media print {
  .btn-custom,
  #mobile-menu-overlay,
  #goToTopBtn,
  #goBackBtn {
    display: none !important;
  }
}

/* ==========================================================================
   21. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ==========================================================================
   21.1 MOBILE RESPONSIVE FIXES (≤767px)
   ========================================================================== */
@media (max-width: 767px) {
  /* Header & Logo Mobile Styles */
  header {
    min-height: auto !important;
    padding: 0.25rem 0 !important;
  }
  
  .max-w-6xl.mx-auto.px-4 {
    position: relative;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  
  header img[alt="Anitya Tours Logo"] {
    max-height: none !important;
    max-width: 250px !important;
    height: auto !important;
    width: 250px !important;
    margin-bottom: 0.1rem !important;
  }
  
  .flex.flex-col.md\:flex-row.justify-between.items-center {
    align-items: flex-start !important;
    text-align: left !important;
    gap: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .text-xl.md\:text-2xl {
    text-align: left !important;
    margin: 0.1rem 0 0.25rem 0 !important;
    width: 100%;
    font-size: 1rem !important;
    line-height: 1.1 !important;
    padding: 0 !important;
  }
  
  #menu-toggle {
    position: absolute !important;
    top: auto !important;
    bottom: 0.5rem !important;
    right: 0.5rem !important;
    margin: 0 !important;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    padding: 0.4rem;
    border: 1px solid rgba(255,255,255,0.3);
  }
  
  #mobile-menu-overlay {
    position: absolute !important;
    top: 100% !important;
    right: 0.5rem !important;
    left: auto !important;
    width: 200px !important;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    margin-top: 5px !important;
  }
  
  #mobile-menu-overlay.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  body {
    padding-top: 80px;
  }
  
  /* About page text mobile styles */
  .text-2xl.md\:text-3xl {
    font-size: 1.5rem !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
  }
  
  .text-base.md\:text-lg {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  
  .about-justify {
    text-align: left;
    hyphens: none;
  }
  
  /* Tour components mobile styles */
  .tour-heading {
    font-size: 1.5rem !important;
    margin: 1.5rem auto 1rem !important;
    padding: 0.75rem 1rem !important;
  }
  
  .tour-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    padding: 0 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .card-title {
    font-size: 1.25rem !important;
    padding-top: 0.5rem !important;
  }
  
  .card-title {
  font-family: inherit;
  font-weight: 600;
  color: #000;
}

  .tour-meta {
    font-size: 1rem !important;
    margin-top: 0.5rem !important;
  }
  
  .btn-custom {
    font-size: 1.1rem !important;
    padding: 1rem 1.5rem !important;
    margin-top: 1rem !important;
  }
  
  /* Layout adjustments */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .tour-card {
    margin-bottom: 1rem;
    max-width: 100% !important;
  }
  
  #vehicle-rentals .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  #vehicleEnquiryForm {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  
  #vehicleEnquiryForm label {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }
  
  #vehicleEnquiryForm input {
    font-size: 1rem !important;
    padding: 0.75rem !important;
  }
  
  /* Banner and spacing adjustments */
  .relative.w-full.h-\[400px\] {
    height: 250px !important;
  }
  
  section.bg-gray-100 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .tour-card .h-48 {
    height: 200px !important;
  }
  
  .min-h-\[60vh\] {
    min-height: 50vh !important;
  }
  
  .max-w-6xl.mx-auto.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .py-8 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  .my-8 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .gap-6 {
    gap: 1.5rem !important;
  }
  
  .p-4 {
    padding: 1rem !important;
  }
  
  .h-16 {
    height: 2rem !important;
  }
  
  .mb-8 {
    margin-bottom: 1.5rem !important;
  }
  
  /* Viewport scaling */
  body {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Gallery mobile styles */
  .scroll-btn.left { 
    left: 0; 
  }
  
  .scroll-btn.right { 
    right: 0; 
  }
  
  .header-scroll .image-card {
    /* width: calc(50% - 0.25rem) !important;*/
    width: calc(33.333% - 2px) !important; /* NEW - 3 images */
  }
  
  .flex.flex-col.md\:flex-row > div {
    width: 100% !important;
  }
  
  .flex.flex-col.md\:flex-row > div:first-child {
    margin-bottom: 1.5rem;
  }



}

/* ==========================================================================
   21.2 EXTRA SMALL MOBILE OPTIMIZATIONS (≤480px)
   ========================================================================== */
@media (max-width: 480px) {
  header img[alt="Anitya Tours Logo"] {
    max-width: 220px !important;
    width: 220px !important;
  }
  
  .text-xl.md\:text-2xl {
    font-size: 0.9rem !important;
    margin: 0.05rem 0 0.15rem 0 !important;
  }
  
  #menu-toggle {
    top: 0.4rem !important;
    right: 0.4rem !important;
    padding: 0.3rem;
  }
  
  .flex.flex-col.md\:flex-row.justify-between.items-center {
    gap: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  header img[alt="Anitya Tours Logo"] {
    margin-bottom: 0.1rem !important;
  }
  
  .text-xl.md\:text-2xl {
    font-size: 1rem !important;
    margin-top: 0.1rem !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.1 !important;
  }
  
  #menu-toggle {
    top: 0.75rem !important;
    right: 0.75rem !important;
    padding: 0.4rem;
  }
  
  .max-w-6xl.mx-auto.px-4 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  
  header {
    padding: 0.25rem 0 !important;
  }
  
  .tour-heading {
    font-size: 1.4rem !important;
    margin: 1rem auto 0.5rem !important;
  }
  
  .card-title {
    font-size: 1.2rem !important;
  }
  
  
  .tour-meta {
    font-size: 0.95rem !important;
  }
  
  .btn-custom {
    font-size: 1.05rem !important;
    padding: 0.9rem 1.25rem !important;
  }
  
  .tour-card {
    margin: 0 0.25rem 1rem 0.25rem;
  }
  
  .grid {
    gap: 1rem !important;
  }
  
  .relative.w-full.h-\[400px\] {
    height: 200px !important;
  }
  
  .text-2xl.md\:text-3xl {
    font-size: 1.4rem !important;
  }
  
  .text-base.md\:text-lg {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
  
  .flex.flex-col.md\:flex-row > div:first-child {
    margin-bottom: 1rem;
  }
  
  .p-4 {
    padding: 0.75rem !important;
  }
  
  .gap-6 {
    gap: 1rem !important;
  }
  

}

/* ==========================================================================
   21.3 VERY SMALL SCREENS (≤360px)
   ========================================================================== */
@media (max-width: 360px) {
  /* ==========================================================================
     GO TO TOP & GO BACK BUTTONS VERY SMALL MOBILE
     ========================================================================== */

}

/* ==========================================================================
   21.4 TABLET ADJUSTMENTS (768px-1024px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  header img[alt="Anitya Tours Logo"] {
    max-height: 80px;
  }
  
  .tour-heading {
    font-size: 1.6rem;
  }
  
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .tour-card .h-48 {
    height: 220px !important;
  }
  
  body {
    padding-top: 120px;
  }
}

/* ==========================================================================
   21.5 DESKTOP STYLES (≥768px)
   ========================================================================== */
@media (min-width: 768px) {
  header img[alt="Anitya Tours Logo"] {
    max-height: 80px;
  }
  
  .flex.flex-col.md\:flex-row.justify-between.items-center {
    align-items: center;
  }
  
  body {
    padding-top: 120px;
  }
  
  /* Hide mobile menu on desktop */
  #mobile-menu-overlay {
    display: none !important;
  }
}


/* ==========================================================================
   GO TO TOP & GO BACK BUTTONS - CENTERED, RESPONSIVE & AUTO-HIDE
   ========================================================================== */

#goToTopBtn,
#goBackBtn {
  position: fixed;
  z-index: 9999;
  background-color: #009599; /* main teal */
  color: white;
  border: none;
  border-radius: 50%;
  display: none; /* Hidden by default - controlled by JS */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  margin: 0;
  padding: 0;
  width: 50px;
  height: 50px;
}

/* Center SVG icon perfectly */
#goToTopBtn svg,
#goBackBtn svg {
  width: 22px;
  height: 22px;
  display: block;
}

<style>
/* ==========================================================================  
   GO TO TOP & GO BACK BUTTONS - CENTERED BELOW TAGLINE  
   ========================================================================== */

<style>
/* ==========================================================================  
   GO TO TOP & GO BACK BUTTONS - FIXED BELOW TAGLINE (RESPONSIVE)  
   ========================================================================== */

#goToTopBtn,
#goBackBtn {
  position: fixed;
  z-index: 9999;
  background-color: #02A0A9;
  color: white;
  border: none;
  border-radius: 50%;
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  margin: 0;
  padding: 0;
  width: 50px;
  height: 50px;
}

/* Center SVG icon properly */
#goToTopBtn svg,
#goBackBtn svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ===========================================================
   DESKTOP - place just below footer tagline (not over it)
   =========================================================== */
@media (min-width: 768px) {
  #goToTopBtn,
  #goBackBtn {
    bottom: 5rem; /* moves BELOW tagline */
    transform: translateX(-50%);
  }

  #goToTopBtn {
    left: calc(50% - 45px); /* left shift */
  }

  #goBackBtn {
    left: calc(50% + 45px); /* right shift */
  }
}

/* ===========================================================
   MOBILE - slightly higher but still below tagline
   =========================================================== */
@media (max-width: 767px) {
  #goToTopBtn,
  #goBackBtn {
    bottom: 4rem; /* extra bottom gap from tagline */
    width: 45px;
    height: 45px;
    transform: translateX(-50%);
  }

  #goToTopBtn {
    left: 44%;
  }

  #goBackBtn {
    left: 56%;
  }
}

/* Hover Effects */
#goToTopBtn:hover,
#goBackBtn:hover {
  background-color: #007B7F;
  transform: scale(1.1);
}

@media (max-width: 767px) {
  #goToTopBtn:hover,
  #goBackBtn:hover {
    transform: translateX(-50%) scale(1.1);
  }
}
</style>






<style>
  /* Apply globally or just to this section */
  .vehicle-font {
    font-family: 'Inter', sans-serif;
  }
</style>

    <style>
        /* Mobile menu animation */
        #mobile-menu-overlay {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
    </style>


/* ==========================================================================
   FOOTER MOBILE SPACING FIXES
   ========================================================================== */
@media (max-width: 767px) {
  /* Add proper padding to footer sections */
  .footer-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Add margin to the logo section */
  .footer .py-6.border-t.border-b {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Ensure the footer container has proper spacing */
  .footer .max-w-6xl.mx-auto.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Add top margin to footer on mobile */
  .footer {
    padding-top: 1rem !important;
  }
}

/* --- FINAL OVERRIDE: Center arrows below tagline on big screens --- */
@media (min-width: 768px) {
  #goToTopBtn,
  #goBackBtn {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 2rem !important; /* ✅ smaller number = lower on screen */
  }

  #goToTopBtn {
    margin-right: 40px !important;
  }

  #goBackBtn {
    margin-left: 40px !important;
  }
}

/* --- Ensure lower placement when near footer --- */
@media (min-width: 768px) {
  body.scrolled-to-footer #goToTopBtn,
 body.scrolled-to-footer #goBackBtn {
    bottom: 2rem !important; /* ✅ push even lower near footer */
  }
}

@media (max-width: 767px) {
  body.scrolled-to-footer #goToTopBtn,
  body.scrolled-to-footer #goBackBtn {
    bottom: 0.1rem !important;
  }
}

/* --- FINAL OVERRIDE for arrows on big screens --- */
@media (min-width: 768px) {
  #goToTopBtn,
  #goBackBtn {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 1.5rem !important; /* smaller number = lower on screen */
  }

  #goToTopBtn { margin-right: 80px !important; }
  #goBackBtn { margin-left: 80px !important; }
}
/* --- EOF FINAL OVERRIDE: Center arrows below tagline on big screens --- */