/* mobile.css — Mobile redesign for Apex Realty Centers (<= 991px) */
@media (max-width: 991px) {
    :root {
      --m-bg: #f7f9fc;
      --m-card: #ffffff;
      --m-ink: #0f172a;
      --m-muted: #6b7280;
      --m-blue: #0b5ed7;
      --m-sky: #00bfff;
      --m-glow: rgba(11, 94, 215, 0.18);
    }
  
    body {
      background: var(--m-bg) !important;
      background-attachment: scroll !important;
      -webkit-overflow-scrolling: touch !important;
      padding-top: 82px !important;
      color: var(--m-ink);
    }
  /* ────────────────────────────────────────────────
   NAVBAR — Slim & compact version for mobile
───────────────────────────────────────────────── */
@media (max-width: 991px) {

  .navbar {
    background: #ffffff !important;
    padding: 0.4rem 0.6rem !important;           /* was 0.2rem 0.3rem → slightly more breathing room but still very slim */
    min-height: 56px;                             /* explicit slim height — prevents it from feeling too tall */
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.09) !important;
  }

  /* Brand / Logo — make it smaller so navbar stays low-profile */
  .navbar-brand,
  .navbar-brand .brand-main {
    font-size: 1.35rem !important;               /* was 0.3rem — way too small → now readable but compact */
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 0.25rem 0 !important;
  }

  /* Toggler button — make it slimmer too */
  .navbar-toggler {
    padding: 0.35rem 0.5rem !important;
    font-size: 1.1rem;                            /* slightly smaller hamburger */
    border: none;
  }

  /* Collapsed menu */
  .navbar-collapse {
    background: #ffffff !important;
    margin: 0.4rem 0.3rem !important;
    padding: 0.6rem 1rem !important;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(15,23,42,0.10);
  }

  /* Nav links — tighter, less vertical space */
  .nav-link {
    padding: 0.45rem 0 !important;               /* was 0.6rem — much tighter vertically */
    font-size: 1.05rem !important;               /* slightly smaller than desktop for compactness */
    font-weight: 600;
    border-radius: 0.5rem;
    transition: background-color 0.18s ease;
  }

  .nav-link:hover,
  .nav-link:focus {
    background-color: rgba(11, 94, 215, 0.08);
  }

  /* Extra slim when items are stacked */
  .navbar-nav {
    gap: 0.25rem;                                 /* tighter spacing between links */
  }

  /* Dark mode variant (if you use it) */
  body.dark-mode .navbar,
  body.dark-mode .navbar-collapse {
    background: #0f172a !important;
  }
  body.dark-mode .nav-link {
    color: #e2e8f0 !important;
  }
}
  
    /* HERO */
    #home.parallax.hero {
      background-attachment: scroll !important;
      min-height: 70vh !important;
    }
  
    #home .container {
      padding: 2.5rem 1rem;
    }
  
    #home h1 {
      font-size: 2.2rem !important;
      line-height: 1.15;
      text-shadow: 0 10px 30px rgba(0,0,0,0.25);
    }
  
    #home .lead {
      font-size: 1rem !important;
      margin-top: 0.5rem;
      margin-bottom: 1.2rem;
    }
  
    #home .btn {
      padding: 0.85rem 1.4rem;
      border-radius: 999px;
      font-weight: 700;
      box-shadow: 0 8px 20px var(--m-glow);
    }
  
    /* SECTION GENERAL */
    section.py-5 {
      padding: 2.5rem 0 !important;
    }
  
    h1, h2, .gradient-text {
      font-size: 1.85rem !important;
    }
  
    p {
      font-size: 1rem;
      line-height: 1.6;
    }
  
    /* ABOUT */
    #about {
      background: #0f172a !important;
      background-image: url("images/mobilefall.jpg") !important;
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      background-attachment: scroll !important;
      position: relative !important;
    }
  
    #about .overlay {
      background: rgba(4, 18, 40, 0.65) !important;
    }
  
    #about .logo-crisp {
      width: min(72vw, 300px);
      max-width: 300px;
      margin-bottom: 1rem;
    }
  
    #about .lead {
      font-size: 1.05rem !important;
    }
  
    #about .stats {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 1rem;
      padding: 1rem 0.75rem;
      backdrop-filter: blur(6px);
    }
  
    #about .counter {
      font-size: 1.6rem !important;
    }
  
    #about .text-white-75 {
      font-size: 0.85rem;
    }
  
    /* SERVICES */
    #services .card {
      border-radius: 1rem;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    }
  
    #services .card h4 {
      font-size: 1.1rem;
    }
  
    #services .btn {
      border-radius: 999px;
      padding: 0.6rem 1.2rem;
    }
  
    /* TESTIMONIALS */
    #testimonials .carousel-item img {
      height: 45vh !important;
      object-fit: cover;
    }
  
    .carousel-caption {
      bottom: 1rem !important;
      padding: 0.75rem 1rem !important;
      border-radius: 0.75rem !important;
    }
  
    .carousel-caption h5 {
      font-size: 1.1rem;
    }
  
    /* CTA */
    #cta .ratio {
      border-radius: 1rem;
      box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);
    }
  
    #cta .btn {
      border-radius: 999px;
      padding: 0.8rem 1.4rem;
      font-weight: 700;
    }
  
    /* CONTACT */
    #contact .team-section {
      background: #fff;
      border-radius: 1rem;
      padding: 1rem;
      box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
      margin-bottom: 1.25rem;
    }
  
    #contact .form-control {
      border-radius: 0.9rem;
      padding: 0.85rem 1rem;
    }
  
    #contact .btn {
      border-radius: 999px;
      padding: 0.8rem 1.2rem;
      font-weight: 700;
    }
  
    /* MAP */
    .map iframe {
      height: 300px !important;
      border-radius: 1rem;
      margin: 0 1rem;
      width: calc(100% - 2rem) !important;
    }
  
    /* FOOTER */
    footer {
      text-align: center;
      font-size: 0.9rem;
    }
  
    /* STOP PARALLAX ARTIFACTS */
    .parallax,
  .parallax .parallax-inner {
      background-attachment: scroll !important;
      transform: none !important;
      will-change: auto !important;
    }
  }

/* Mobile logo sizing overrides */
@media (max-width: 991px) {
  .navbar .logo-img {
    height: 42px !important;
    width: auto !important;
    margin-bottom: 0 !important;
  }
}