/* responsive.css — real mobile layout for Bogar Vali Neeku Nilayam
   -----------------------------------------------------------------
   Below 900px this switches from the proportionally-shrunk fixed
   1440px canvas to a real, fluid, stacked mobile layout. Desktop
   (900px and above) is completely untouched.
   ----------------------------------------------------------------- */

@media (max-width: 900px) {

  /* ---------- 1. Turn off the fixed-canvas zoom trick ---------- */
  .home, .about-us, .services, .media-gallery, .testimonials, .contact-us {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: auto !important;
    zoom: 1 !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }

  /* ---------- 2. Flatten absolute positioning to natural flow ----------
     Anima positions almost every element with position:absolute and
     exact pixel coordinates/margins sized for a 1440px canvas. On
     mobile that layout doesn't apply, so every element becomes a
     normal stacked block with no leftover desktop offsets. */
  .home *, .about-us *, .services *, .media-gallery *,
  .testimonials *, .contact-us * {
    position: static !important;
    max-width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* <img>/<video> keep their originally declared width — for a div,
     width:auto means "shrink to fit," but for an image it means
     "render at the source file's native pixel size," which balloons
     small icons up to their full source resolution. Only non-image
     elements get width forced to auto. */
  .home *:not(img):not(video), .about-us *:not(img):not(video),
  .services *:not(img):not(video), .media-gallery *:not(img):not(video),
  .testimonials *:not(img):not(video), .contact-us *:not(img):not(video) {
    width: auto !important;
  }

  /* re-establish comfortable stacking + side padding on top-level content */
  .home > div, .about-us > div, .services > div,
  .media-gallery > div, .testimonials > div, .contact-us > div {
    display: block;
    margin: 0 auto !important;
    padding: 0 20px;
  }

  /* images and videos always fit the screen width, natural stacking gap */
  .home img, .about-us img, .services img, .media-gallery img,
  .testimonials img, .contact-us img,
  .home video, .about-us video, .services video, .media-gallery video,
  .testimonials video, .contact-us video {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 0 12px !important;
  }

  /* purely decorative background shapes — hide, they only clutter mobile */
  [class^="ellipse"], [class*=" ellipse"] {
    display: none !important;
  }

  /* ---------- 3. Header / navigation -> hamburger menu ---------- */
  [class^="centered-menu"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    padding: 16px 20px !important;
    background: #1e341d;
    position: relative !important;
    z-index: 90;
  }
  [class^="logo"] {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }
  [class^="logo"] img { width: 34px !important; height: auto !important; margin: 0 !important; }
  [class^="bogar-valineeku"] { color: #fff; font-size: 13px !important; }
  [class^="siddha-varma-therapy"] { color: #e7b45a; font-size: 9px !important; }

  [class^="nav-menu"] {
    display: none;
    flex-direction: column !important;
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    background: #1e341d;
    padding: 10px 20px 20px !important;
    z-index: 80;
    gap: 4px;
  }
  [class^="nav-menu"] a > div {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    color: #fff !important;
  }
  [class^="centered-menu"].fx-nav-open [class^="nav-menu"] {
    display: flex !important;
  }

  .fx-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 26px;
    cursor: pointer;
    order: 5;
    margin: 0 !important;
  }

  [class^="centered-menu"] > button:not(.fx-nav-toggle),
  [class^="centered-menu"] a:has(button):not(.fx-nav-toggle) {
    order: 4;
    margin-left: auto !important;
  }

  /* ---------- 4. Headings & body text: readable sizes ---------- */
  [class*="text-wrapper"], p, .p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 0 12px !important;
  }
  .text-wrapper, .text-wrapper-7, .text-wrapper-121, .text-wrapper-139 {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  /* ---------- 5. CTA buttons: full width, stacked ---------- */
  button, .button, [class^="button-"] {
    width: 100% !important;
    justify-content: center !important;
    margin: 8px 0 !important;
    padding: 14px 20px !important;
  }

  /* ---------- 6. Card grids: always single column on mobile ---------- */
  .services .group-61, .services .group-60, .services .group-62,
  .services .group-63, .services .group-64, .services .group-65,
  .services .group-66, .services .group-67, .services .group-68,
  .home .group-7, .home .group-8, .home .group-9,
  .home .group-10, .home .group-11, .home .group-12 {
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .media-gallery .frame-27,
  .testimonials .frame-38 > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }

  .enquiry-form .ef-row {
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* ---------- 7. Footer: stack columns, center text ---------- */
  [class*="about-us-services"] {
    text-align: center;
    margin-top: 16px !important;
  }

  /* ---------- 8. Live map on contact page ---------- */
  .contact-us .group-32 { height: 320px !important; }
  .contact-us .live-map { position: static !important; width: 100% !important; height: 100% !important; }
  .contact-us .open-in-maps { position: absolute !important; }

  /* ---------- 9. Testimonial carousel: stack, don't crowd ---------- */
  [class^="container"] { flex-direction: column; gap: 12px; }
}

@media (min-width: 901px) {
  .fx-nav-toggle { display: none !important; }
}

@media (max-width: 480px) {
  [class*="text-wrapper"], p, .p { font-size: 14px !important; }
  .text-wrapper, .text-wrapper-7, .text-wrapper-121, .text-wrapper-139 {
    font-size: 24px !important;
  }
}