/* Phone + tablet layout for drpraveenorthospine.com (static copy). Desktop (>1024px) is untouched.
   The main block applies up to 1024px; tablet-only adjustments (768-1024px) are in the block at the end.
   Loaded last on every page by a <link> before </head>; companion script /_static/mobile.js. */
@media (max-width: 1024px) {   /* phones AND tablets; tablet-only tweaks are in the block at the end */
  :root {
    --apx-navy: #1f3967; --apx-navy2: #244976; --apx-orange: #f37021; --apx-ink: #0d1b3e;
    --apx-soft: #eef4fb; --apx-line: #e3eaf3; --apx-shadow: 0 6px 22px rgba(13, 27, 62, .08);
  }
  html, body { overflow-x: hidden; }
  body { padding-bottom: 68px; }                                /* room for the sticky action bar */

  /* ---------- header ---------- */
  header .elementor-element-53aac6b { padding: 8px 16px !important; box-shadow: 0 2px 12px rgba(13, 27, 62, .06); background: #fff; }
  header .elementor-element-53aac6b img { max-height: 46px; width: auto; }
  /* the header "Book A Appointment" button wrapped onto two lines; the sticky bottom bar already offers booking */
  header .elementor-element-53aac6b .elementor-widget-button { display: none !important; }
  header .elementor-element-1e93d35 > .e-con-inner { display: flex !important; justify-content: space-between !important; align-items: center !important; }
  header .elementor-element-1e93d35 .elementor-widget { width: auto !important; margin: 0 !important; }

  /* gallery: neat 2-column photo grid */
  .elementor-image-gallery .gallery { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
  .elementor-image-gallery .gallery br { display: none; }
  .elementor-image-gallery .gallery-item { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  .elementor-image-gallery .gallery-item img { width: 100% !important; height: 128px !important; object-fit: cover; border: 0 !important; border-radius: 14px; box-shadow: var(--apx-shadow); }
  /* phone strip under the header: one tidy row, no stray bullet */
  .elementor-element-691042d { padding: 7px 16px !important; min-height: 0 !important; background: var(--apx-soft) !important; }
  .elementor-element-691042d > .e-con-inner { display: flex !important; align-items: center; justify-content: center; gap: 18px; padding: 0 !important; min-height: 0 !important; }
  .elementor-element-691042d .elementor-widget { width: auto !important; margin: 0 !important; }
  .elementor-element-691042d ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
  .elementor-element-691042d li { list-style: none !important; padding: 0 !important; margin: 0 !important; }
  .elementor-element-691042d li::before, .elementor-element-691042d li::marker { content: none !important; display: none !important; }
  .elementor-element-691042d .elementor-icon-list-text { font-size: 16px !important; font-weight: 700 !important; letter-spacing: .2px; }
  .elementor-element-691042d .elementor-icon-list-icon i, .elementor-element-691042d .elementor-icon-list-icon svg { font-size: 17px !important; width: 17px; }
  .elementor-element-691042d .elementor-icon { font-size: 19px !important; }

  /* ---------- menu panel ---------- */
  .elementskit-menu-offcanvas-elements.elementskit-menu-container { background: #fff !important; width: 84vw !important; max-width: 330px !important; box-shadow: 8px 0 30px rgba(13, 27, 62, .18); }
  .elementskit-menu-offcanvas-elements .elementskit-nav-identity-panel { padding: 18px 20px 10px !important; border-bottom: 1px solid var(--apx-line); }
  .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a { font-size: 17px !important; font-weight: 600 !important; color: var(--apx-ink) !important; padding: 15px 22px !important; border-bottom: 1px solid var(--apx-line); }
  .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li.current-menu-item > a { color: var(--apx-orange) !important; }
  .apx-menu-cta { padding: 20px 22px; display: grid; gap: 10px; }
  .apx-menu-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; }
  .apx-menu-cta .call { background: var(--apx-navy); color: #fff; }
  .apx-menu-cta .book { background: var(--apx-orange); color: #fff; }

  /* ---------- general type & spacing ---------- */
  .sec-title { font-size: 27px !important; line-height: 1.22 !important; }
  .elementor-element-6a0e6c6 .sec-title { font-size: 32px !important; line-height: 1.16 !important; }   /* home hero */
  .sub-title { font-size: 13px !important; }
  .title-area { margin-bottom: 22px !important; }
  /* some section titles carry a negative bottom margin that glued the heading to the paragraph under it */
  .elementor-widget-mediaxsectiontitle > .elementor-widget-container { margin-bottom: 0 !important; }
  .elementor-widget-mediaxsectiontitle .title-area .sec-title { margin-bottom: 0 !important; }
  .elementor-widget-mediaxsectiontitle + .elementor-widget-text-editor { margin-top: 0 !important; }
  .apx-left, .apx-left p { text-align: left !important; }             /* long centred/justified paragraphs (set by mobile.js) */
  html { scroll-behavior: smooth; }
  form.static-contact-form, #apx-booking { scroll-margin-top: 90px; }
  .e-con-boxed > .e-con-inner { padding-left: 4px; padding-right: 4px; }

  /* inner-page title banner */
  .breadcumb-wrapper { padding-top: 48px !important; padding-bottom: 48px !important; }
  .breadcumb-title { font-size: 34px !important; }

  /* ---------- home: Care Hospital / DIA Clinics cards side by side ---------- */
  .elementor-element-44755c2 { padding: 22px 16px 8px !important; }
  .elementor-element-44755c2 > .e-con-inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
  .elementor-element-44755c2 > .e-con-inner > .e-con { width: auto !important; max-width: none !important; min-width: 0 !important; padding: 18px 12px 16px !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--apx-shadow); border: 1px solid var(--apx-line);
    display: flex !important; flex-direction: column !important; align-items: center !important; overflow: hidden; margin: 0 !important; align-self: stretch !important; }
  .elementor-element-44755c2 > .e-con-inner { align-items: stretch !important; }
  .elementor-element-44755c2 > .e-con-inner > .e-con > .elementor-element { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .elementor-element-44755c2 .elementor-widget-mediaxbutton { margin-top: auto !important; padding-top: 12px; }
  .elementor-element-44755c2 .elementor-icon-box-title { font-size: 16px !important; margin-bottom: 4px !important; }
  .elementor-element-44755c2 .elementor-icon-box-description { font-size: 13px !important; line-height: 1.45 !important; }
  .elementor-element-44755c2 .elementor-icon { font-size: 20px !important; padding: 12px !important; }
  .elementor-element-44755c2 .elementor-widget-mediaxbutton, .elementor-element-44755c2 .btn-wrapper { width: 100% !important; }
  .elementor-element-44755c2 .btn-wrapper { display: flex !important; justify-content: center !important; margin: 0 !important; }
  .elementor-element-44755c2 .th-btn { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important;
    padding: 11px 6px !important; font-size: clamp(9px, 2.65vw, 11px) !important; letter-spacing: 0 !important; line-height: 1.2 !important; white-space: nowrap !important; text-align: center; overflow: hidden; }
  .elementor-element-44755c2 .th-btn::before, .elementor-element-44755c2 .th-btn::after { max-width: 100%; }

  /* ---------- home: about image + 12+ badge ---------- */
  .img-box10 .img2 { display: none !important; }
  .img-box10 .img1 img { border-radius: 20px; }
  /* 12+ badge: shrink from its top edge so the layout box below it is predictable; it overlaps the photo by ~60px
     and leaves a clear gap before "About Dr. Praveen Goparaju" (user 31 Oct: they were overlapping) */
  .img-box10 .project-counter { transform: scale(.72); transform-origin: 50% 0; margin-top: -62px !important; margin-bottom: -40px !important; }
  .img-box10 { margin-bottom: 0 !important; }

  /* ---------- treatment cards: 2-column grid ---------- */
  .row:has(> [class*="col-"] > .service-card) { --bs-gutter-x: 12px; --bs-gutter-y: 12px; margin-left: -6px; margin-right: -6px; }
  [class*="col-"]:has(> .service-card) { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding-left: 6px !important; padding-right: 6px !important; }
  .service-card { padding: 18px 10px 16px !important; border-radius: 18px !important; height: 100%; display: flex; flex-direction: column; align-items: center; }
  .service-card .box-shape { display: none !important; }
  .service-card .box-icon { width: 88px !important; height: 88px !important; line-height: 88px !important; margin: 0 auto 12px !important;
    display: flex !important; align-items: center; justify-content: center; }
  .service-card .box-icon img { width: 60px !important; max-width: 60px !important; height: 60px !important; object-fit: contain; }
  .service-card .box-title { font-size: 15px !important; line-height: 1.28 !important; margin-bottom: 6px !important; }
  .service-card .box-text { font-size: 12.5px !important; line-height: 1.45 !important; margin-bottom: 12px !important; }   /* full sentences now, no cut-off */
  .service-card .th-btn { margin-top: auto; padding: 9px 16px !important; font-size: 11px !important; }
  .round-text { font-size: 13px !important; padding: 10px 14px !important; }

  /* ---------- clinic section ---------- */
  .row:has(> [class*="col-"] > .feature-card2) { --bs-gutter-x: 8px; --bs-gutter-y: 8px; }
  [class*="col-"]:has(> .feature-card2) { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
  .feature-card2 { padding: 9px 14px !important; justify-content: flex-start; }
  .feature-card2 .box-title { font-size: 13.5px !important; line-height: 1.3 !important; text-transform: capitalize; }
  /* clinic timings: give the table more width, then a strict two-column grid so every day and every time lines up */
  .why-tab-content { padding: 16px 12px !important; }
  .why-tab-content .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; }
  .tab-schedule { padding: 22px 16px !important; border-radius: 20px !important; }
  .tab-schedule .widget_title { font-size: 19px !important; }
  .tab-schedule .box-text { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
    font-size: clamp(11.5px, 3.5vw, 13.5px) !important; line-height: 1.3 !important; padding: 11px 0 !important; margin: 0 !important; white-space: nowrap; }
  .tab-schedule .box-text span { justify-self: end; text-align: right; white-space: nowrap; margin: 0 !important; font-weight: 600;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

  /* ---------- patient videos: swipeable row ---------- */
  .elementor-element-421b9d2 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory; gap: 12px !important; padding: 4px 16px 18px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .elementor-element-421b9d2::-webkit-scrollbar { display: none; }
  .elementor-element-421b9d2 > .e-con { flex: 0 0 74% !important; width: 74% !important; max-width: 74% !important; scroll-snap-align: center; padding: 0 !important; margin: 0 !important; }
  .elementor-element-421b9d2 > .e-con > .e-con-inner { padding: 0 !important; }
  .elementor-element-421b9d2 video { border-radius: 18px; background: #000; }
  .apx-swipe-hint { text-align: center; font-size: 13px; color: #6b7690; margin: -6px 0 10px; }

  /* ---------- FAQ ---------- */
  .accordion-card .accordion-button { font-size: 15px !important; line-height: 1.4 !important; padding: 16px 44px 16px 18px !important; }
  .accordion-card .accordion-body { padding: 0 18px 16px !important; font-size: 14.5px; }

  /* ---------- contact form ---------- */
  .static-contact-form .wpcf7-response-output[aria-hidden="true"], .wpcf7-response-output:empty { display: none !important; }

  /* ---------- footer: logo/about full width, the two link lists side by side ---------- */
  .elementor-element-c496dd0 > .e-con-inner { display: grid !important; grid-template-columns: 1fr 1.3fr; column-gap: 16px; row-gap: 26px; }
  .elementor-element-c496dd0 > .e-con-inner > .elementor-element { width: auto !important; max-width: none !important; margin: 0 !important; }
  .elementor-element-db79edb, .elementor-element-678b92c { grid-column: 1 / -1; }
  .elementor-element-db79edb img { max-width: 190px !important; height: auto; }
  .elementor-element-a96a356 a, .elementor-element-7bbf7a1 a { font-size: 13.5px !important; line-height: 1.35 !important; }
  .elementor-element-a96a356 li, .elementor-element-7bbf7a1 li { margin-bottom: 9px !important; }
  footer .widget_title { font-size: 18px !important; margin-bottom: 16px !important; }

  /* ---------- floating widget -> sticky action bar ---------- */
  #chaty-widget-0, .chaty, .chaty-widget { display: none !important; }
  .apx-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); box-shadow: 0 -6px 24px rgba(13, 27, 62, .12);
    backdrop-filter: blur(6px); }
  .apx-actionbar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; }
  .apx-actionbar .call { background: var(--apx-navy); color: #fff; }
  .apx-actionbar .book { background: var(--apx-orange); color: #fff; }
  .apx-actionbar svg { width: 18px; height: 18px; fill: currentColor; }
  /* keep the theme's own 50px go-to-top button (its arrow layer is fixed at 50px), just lift it above the action bar */
  .scroll-top { bottom: 80px !important; right: 14px !important; }
  .scroll-top svg { display: block; }
}


/* ================= tablets (768-1024px): the theme showed the desktop header without a menu, hid both
   versions of the clinic cards and squeezed the hero into two narrow columns. Use the phone header/cards
   and a stacked hero, with roomier grids. ================= */
@media (min-width: 768px) and (max-width: 1024px) {
  /* header: phone header (logo + menu button) and the phone strip instead of the menu-less desktop header */
  header .elementor-element-2b7027e4 { display: none !important; }
  header .elementor-element-53aac6b.elementor-hidden-tablet { display: flex !important; }
  .elementor-element-691042d.elementor-hidden-tablet { display: grid !important; }
  header .elementor-element-53aac6b { padding: 10px 28px !important; }
  header .elementor-element-53aac6b img { max-height: 54px; }
  .elementor-element-1e93d35 { max-width: none !important; width: 100% !important; }

  /* hero: stacked — text first (left-aligned, roomy), then the photo in its circle, centred */
  .elementor-element-6a0e6c6 > .e-con-inner { flex-direction: column !important; align-items: stretch !important; }
  .elementor-element-3c84d20, .elementor-element-724847c { width: 100% !important; max-width: 100% !important; }
  .elementor-element-3c84d20 { padding: 46px 48px 10px !important; }
  .elementor-element-3c84d20 .title-area, .elementor-element-3c84d20 .sec-title, .elementor-element-3c84d20 p { text-align: left !important; }
  .elementor-element-3c84d20 .title-area { margin-left: 0 !important; }
  .elementor-element-6a0e6c6 .sec-title { font-size: 46px !important; line-height: 1.12 !important; max-width: 640px; }
  .elementor-element-3c84d20 p { font-size: 17px !important; max-width: 600px; }
  .elementor-element-3c84d20 .feature-contact-wrap { justify-content: flex-start !important; }
  .elementor-element-724847c { justify-content: center !important; align-items: center !important; padding-top: 10px !important; }
  .elementor-element-2916b32 { --r: 250px; --cy: 54%; width: 100% !important; max-width: 560px !important; margin: 0 auto !important; }
  .elementor-element-2916b32 img { width: auto !important; height: 560px !important; max-width: none !important; margin: 0 auto !important; display: block; }

  /* clinic cards: the phone version, wider */
  .elementor-element-44755c2.elementor-hidden-tablet { display: flex !important; }
  .elementor-element-44755c2 { padding: 28px 48px 10px !important; }
  .elementor-element-44755c2 > .e-con-inner { gap: 18px !important; max-width: 760px; margin: 0 auto; }
  .elementor-element-44755c2 .elementor-icon-box-title { font-size: 19px !important; }
  .elementor-element-44755c2 .elementor-icon-box-description { font-size: 15px !important; }
  .elementor-element-44755c2 .th-btn { font-size: 13px !important; padding: 13px 8px !important; }

  /* side gutters */
  .e-con-boxed > .e-con-inner { padding-left: 20px; padding-right: 20px; }

  /* treatments: 3 per row */
  [class*="col-"]:has(> .service-card) { flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important; }

  /* about image: hide the theme's decorative image that fails to load */
  .elementor-element-81db7e6 .img2 { display: none !important; }
  .img-box10 { max-width: 560px; margin: 0 auto; }

  /* clinic timings / tabs: keep the card a sensible width */
  .why-tab-content { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
  [class*="col-"]:has(> .feature-card2) { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; }

  /* patient videos: show two and a half */
  .elementor-element-421b9d2 > .e-con { flex: 0 0 40% !important; width: 40% !important; max-width: 40% !important; }

  /* gallery: 3 per row */
  .elementor-image-gallery .gallery { grid-template-columns: 1fr 1fr 1fr; }
  .elementor-image-gallery .gallery-item img { height: 170px !important; }

  /* footer: four columns become two balanced rows */
  .elementor-element-c496dd0 > .e-con-inner { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .elementor-element-db79edb, .elementor-element-678b92c { grid-column: auto; }

  /* sticky action bar: centred, not edge to edge */
  .apx-actionbar { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, 100%); border-radius: 22px 22px 0 0; }
}

/* landscape tablets (900-1024px): smaller video cards; stack the clinic tab (details above timings) so neither column is squeezed */
@media (min-width: 900px) and (max-width: 1024px) {
  .elementor-element-421b9d2 > .e-con { flex: 0 0 30% !important; width: 30% !important; max-width: 30% !important; }
  .why-tab-content .e-con.e-flex > .e-con-inner, .why-tab-content .e-con.e-flex.e-con-full { flex-direction: column !important; }
  .why-tab-content .e-con.e-flex > .e-con-inner > .e-con, .why-tab-content .e-con.e-flex.e-con-full > .e-con { width: 100% !important; max-width: 100% !important; }
  .why-tab-content .th-btn { white-space: nowrap !important; }
}
@media (min-width: 768px) and (max-width: 1024px) { .why-tab-content .th-btn { white-space: nowrap !important; padding-left: 22px !important; padding-right: 22px !important; } }

/* comfortable tap targets on phones/tablets (aim: 40px+ high), user 31 Oct: "simple to use on our phone" */
@media (max-width: 1024px) {
  .elementor-element-691042d a { min-height: 44px; display: inline-flex !important; align-items: center; }
  .elementor-element-691042d .elementor-icon { padding: 12px; margin: -12px; }
  .elementor-element-476a3f8 .box-title a { display: inline-flex; align-items: center; min-height: 40px; }
  .elementor-element-44755c2 .th-btn { min-height: 44px; display: flex !important; align-items: center; justify-content: center; }
  .service-card .box-title a { display: inline-block; padding: 6px 0; }
  .service-card .th-btn, .th-btn.btn-sm { min-height: 42px; display: inline-flex !important; align-items: center; justify-content: center; }
  .slide-arrow { width: 44px !important; height: 44px !important; }
  .elementor-element-8042c96 a { display: inline-block; padding: 9px 0; }
  footer .elementor-element-a96a356 a, footer .elementor-element-7bbf7a1 a { display: inline-block; padding: 7px 0 7px 16px !important; }
  footer .elementor-element-a96a356 li, footer .elementor-element-7bbf7a1 li { margin-bottom: 0 !important; }
  /* keep the little arrow in front of each footer link vertically centred now that the links are taller */
  footer .elementor-element-a96a356 a::before, footer .elementor-element-7bbf7a1 a::before { top: calc(50% - 6px) !important; }
  footer .info-box_link, .copyright-wrap a { display: inline-block; padding: 9px 0; }
}

/* readable sizes on phones (layout audit 31 Oct 2026) */
@media (max-width: 767px) {
  .elementor-element-6a0e6c6 .apx-creds { font-size: 12px !important; line-height: 1.5 !important; }
  .elementor-element-ee7a32a .th-btn, .elementor-element-950b1c4 .th-btn { font-size: 12.5px !important; }
}