/* ===== MOBILE ULTIMATE OVERRIDE - EXTRA SMALL HERO v14 ===== */

/* ===== Mobile proximity & compact services ===== */
@media (max-width: 768px) {
  /* Hero: much smaller on mobile */
  #hero,
  .hero,
  .hero-section,
  .hero-slide,
  .hero-slider-container {
    height: 30vh !important;
    min-height: 250px !important;
    max-height: 320px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important; /* spacing between hero and services */
  }

  /* Make all hero content smaller */
  .hero-title,
  .hero h1,
  .hero-slide h1,
  .hero-content h1,
  .hero-slider h1,
  h1 {
    font-size: 1.1rem !important;
    line-height: 1.0 !important;
    margin-bottom: 0.2rem !important;
    font-weight: 600 !important;
    max-width: 25ch !important;
  }

  .hero-subtitle,
  .hero-description,
  .hero p,
  .hero-content p {
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.5rem !important;
    max-width: 30ch !important;
  }

  .hero-location,
  .hero-slide .hero-location {
    font-size: 0.7rem !important;
    margin-bottom: 0.3rem !important;
  }

  /* OVERRIDE ALL BUTTON STYLES - MOST SPECIFIC */
  .hero-cta,
  .hero .btn,
  .hero-slide .btn,
  .hero-buttons .btn,
  .btn,
  a.btn,
  button.btn {
    font-size: 0.7rem !important;
    padding: 6px 12px !important;
    margin-top: 0.4rem !important;
    min-height: 28px !important;
    max-width: 120px !important;
    border-radius: 16px !important;
    width: auto !important;
    height: auto !important;
  }
  
  /* SPECIFICALLY TARGET THE PROBLEMATIC SELECTORS */
  .hero-buttons .btn,
  .hero-cta,
  a.hero-cta {
    padding: 4px 8px !important;
    font-size: 9px !important;
    min-height: 24px !important;
    max-width: 90px !important;
    height: auto !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
  }

  /* Make preview cards smaller */
  .hero-previews {
    gap: 8px !important;
    margin-top: 1rem !important;
  }

  .preview-card {
    width: 80px !important;
    height: 80px !important;
    border-radius: 18px !important;
  }

  .preview-title {
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
  }

  /* Kill any slider default bottom gap (Swiper, Owl, etc.) */
  .swiper,
  .swiper-container,
  .carousel,
  .slick-slider {
    margin-bottom: 0 !important;
  }

  /* Services wrapper: no top gap */
  #services,
  .services,
  .services-section,
  .widget-services-section,
  .home-services,
  .icons,
  .icons-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 14px !important;
    border-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Grid: tight and responsive */
  .services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 per row on phones */
    gap: 4px !important;  /* super tight space between cards */
    align-items: start;
  }

  /* Card compactness */
  .service-card {
    padding: 4px !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.06); /* keep the nice feel but lighter */
    aspect-ratio: 1/1 !important;
    width: 100px !important;
    height: 100px !important;
  }

  /* Add spacing for services section with high priority */
  .services-section, .widget-services-section, .container > .services-section, .container > .widget-services-section,
  .services-grid, .widget-services-grid, div[class*="service"] {
    margin-top: 30px !important;
    padding-top: 20px !important;
  }
  
  /* Neutralize other generic section spacing utilities */
  .section, .section-padding, .container-spacing, .mt-section, .pt-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Container overrides */
  .container, .wrapper {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* COMPACT FOOTER FOR MOBILE */
  .footer,
  .modern-footer,
  footer {
    padding: 15px 0 10px 0 !important;
  }
  
  .footer-content {
    padding: 15px 0 10px 0 !important;
    gap: 10px !important;
  }
  
  .footer-section {
    margin-bottom: 10px !important;
  }
  
  .footer-section h3 {
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
  }
  
  .footer-section p {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  
  .footer-section li {
    margin-bottom: 4px !important;
    font-size: 0.7rem !important;
  }
  
  .footer-bottom {
    padding: 8px 0 !important;
    font-size: 0.6rem !important;
  }
  
  .footer-brand p {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }
  
  .social-links {
    gap: 8px !important;
    margin-top: 8px !important;
  }

/* FORCE ALL ICON TILES TO BE 160px ON MOBILE */
  /* COMPACT HERO SIZE FOR MOBILE */
  .flights-hero, .hero {
    height: 45vh !important;
    min-height: 300px !important;
    max-height: 400px !important;
    padding: 2rem 0 1rem 0 !important;
  }
}

@media (max-width: 640px) {
  
  /* FORCE SPACING BETWEEN HERO AND SERVICES ON MOBILE */
  .widget-services-section,
  .services-section,
  .services,
  section.widget-services-section,
  section.services-section,
  section.services {
    margin-top: 50px !important;
    padding-top: 30px !important;
    border-top: 20px solid transparent !important;
  }
  
  /* ORIGINAL ICON SIZES RESTORED */
  .icon-card,
  .service-card, 
  .app-card,
  .service-widget,
  div.icon-card,
  div.service-card,
  div.app-card,
  div.service-widget {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    aspect-ratio: 1/1 !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* ORIGINAL ICON SIZING RESTORED */
  .icon-card .glyph,
  .service-card .glyph,
  .app-card .glyph,
  .service-widget .glyph,
  .icon-card > svg,
  .service-card > svg,
  .app-card > svg,
  .service-widget > svg,
  .icon-card > img,
  .service-card > img,
  .app-card > img,
  .service-widget > img,
  .icon-card > i,
  .service-card > i,
  .app-card > i,
  .service-widget > i {
    width: 55px !important;
    height: 55px !important;
    min-width: 55px !important;
    min-height: 55px !important;
    max-width: 55px !important;
    max-height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 2px !important;
    object-fit: contain !important;
    font-size: 28px !important;
    color: white !important;
    border-radius: 10px !important;
    aspect-ratio: 1/1 !important;
  }

  /* LABELS - COMPACT ONE LINE */
  .icon-card .label,
  .service-card .label,
  .app-card .label,
  .service-widget .label,
  .service-widget .widget-label {
    font-size: 9px !important;
    margin-top: 1px !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100px !important;
  }

  /* GRID LAYOUT - ULTIMATE OVERRIDE FOR CLOSE SPACING */
  .icons-grid,
  .services-grid,
  .apps-grid,
  .widget-services-grid,
  div.icons-grid,
  div.services-grid,
  div.apps-grid,
  div.widget-services-grid,
  section .icons-grid,
  section .services-grid,
  section .apps-grid,
  section .widget-services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 100px) !important;
    gap: 1px !important;
    grid-gap: 1px !important;
    column-gap: 1px !important;
    row-gap: 1px !important;
    justify-content: center !important;
    align-items: start !important;
    padding: 0 1px !important;
    margin: 0 !important;
    margin-top: 5px !important;
    padding-top: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* WIDGET SERVICES SECTION - WITH SPACING FROM HERO */
  .widget-services-section,
  section.widget-services-section {
    margin-top: 5px !important;
    padding-top: 5px !important;
    margin-bottom: 0px !important;
    background: white !important;
  }

  /* FORCE ZERO SPACING ON ALL POSSIBLE SELECTORS */
  .hero-slider-container + .widget-services-section,
  .hero-slider-container + section,
  div.hero-slider-container + section.widget-services-section,
  .hero + .widget-services-section,
  .hero-section + .widget-services-section {
    margin-top: 5px !important;
    padding-top: 5px !important;
    border-top: none !important;
  }

  /* CONTAINER PADDING OVERRIDE - REMOVED */

  /* NUCLEAR OVERRIDE - DEVICE RESPONSIVE CSS OVERRIDE */
  .hero-section {
    padding: 0 !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
  }

  /* CONTAINER OVERRIDES - DEVICE RESPONSIVE - REMOVED */

  /* SERVICES SECTION COMPLETE OVERRIDE */
  section {
    margin-top: 5px !important;
    padding-top: 5px !important;
  }

  /* WIDGET SERVICES - NUCLEAR OPTION */
  .widget-services-section,
  section.widget-services-section,
  div.widget-services-section {
    margin-top: 5px !important;
    padding-top: 5px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    border-top: 0px !important;
    top: 0px !important;
    position: relative !important;
  }

  /* HERO HEIGHT - VERY SMALL OVERRIDE */
  .hero,
  .hero-section,
  .homepage-hero,
  .hero-slider,
  .hero .slide,
  .swiper,
  .swiper-wrapper,
  .swiper-slide,
  section.hero,
  div.hero,
  .hero-background,
  .hero-content {
    height: 25vh !important;
    min-height: 180px !important;
    max-height: 250px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
  }

  /* HERO SLIDER CONTAINER - NO SPACING */
  .hero-slider-container {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
  }

  /* FLIGHTS HERO EXCEPTION - MATCH HOMEPAGE SIZE */
  .flights-hero {
    height: 200px !important;
    min-height: 180px !important;
    max-height: 220px !important;
    padding: 2rem 0 1rem 0 !important;
  }

  /* HERO HEADLINES - MOBILE OPTIMIZED SIZE */
  .hero-title,
  .hero h1,
  .hero-content h1,
  h1.hero-title,
  .section-title,
  .main-title,
  .display-1 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.4rem !important;
    font-weight: 700 !important;
  }
  
  /* HERO SUBTITLES - MOBILE OPTIMIZED */
  .hero-subtitle,
  .hero h2,
  .hero-content h2,
  h2.hero-subtitle,
  .display-2 {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.4rem !important;
    font-weight: 600 !important;
  }
  
  /* SMALLER DISPLAYS - MOBILE FRIENDLY */
  .display-3,
  .display-4 {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.3rem !important;
    font-weight: 500 !important;
  }

  /* HERO PARAGRAPHS AND LEAD TEXT - MOBILE OPTIMIZED */
  .hero p,
  .hero-content p,
  .tagline,
  .lead {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.4rem !important;
  }
}


/* ===== FINAL LOGO SIZE OVERRIDE - LOADS LAST ===== */
/* This must be at the END since this file loads after all other CSS files */

.logo img,
.navbar .logo img,
nav .logo img,
header .logo img,
.nav-content .logo img,
.company-logo,
a.logo img,
div.logo img {
    height: 50px !important;
    width: auto !important;
    max-height: 50px !important;
    min-height: 50px !important;
    max-width: none !important;
    min-width: auto !important;
}

/* ===== LOGO VISIBILITY FIX - ENSURE IT'S NOT HIDDEN ===== */
.logo,
.navbar .logo,
nav .logo,
header .logo,
.nav-content .logo {
    z-index: 1001 !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== NAVBAR Z-INDEX FIX ===== */
.navbar,
nav,
header {
    z-index: 1000 !important;
    position: relative !important;
}