/* site overrides — put slider / contact-form / tweak CSS here (keep it out of the pages) */

/* Betheme equal-height valign-middle pulls columns up via translateY(-50%),
   overlapping the previous section/hero when the theme's equalize JS is absent.
   Neutralize the transform at all widths (matches Betheme's own responsive reset). */
.equal-height-wrap .mcb-wrap .mcb-wrap-inner{top:0!important;transform:none!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important}

/* mfn-mobile-menu-fix (v4) — Betheme opens the mobile menu with its own
   jQuery. Sometimes that JS is missing in a frozen build (tap does nothing)
   and sometimes it is alive (tap runs BOTH handlers, the theme leaves an
   inline display on #menu, and the menu can never be closed again). The
   script below takes the tap in the capture phase and stops the theme's
   handler, so exactly one implementation owns the menu. Colours come from
   the theme through --mfn-mm-bg / --mfn-mm-fg, which the script measures —
   v1 hardcoded white, which was wrong on every dark header.
   Betheme ships TWO mobile menu shapes and they need opposite treatment.
   In the default one the panel is a block under the bar. In
   `mobile-side-slide` (body class) it is a ~250px off-canvas sheet that is
   already display:block and visible — it simply sits at left:100%, outside
   the viewport. Toggling `display` there does nothing at all, which is why
   a menu could look dead while the class was correctly applied. So the
   panel is anchored to #Top_bar and pulled on-screen explicitly, which
   works for both shapes. `top:0` on #Top_bar stays load-bearing: some
   headers carry a sticky offset that only bites once the bar is
   positioned, and it would push a white strip above the logo. */
#Header_wrapper.mfn-mobile-open #Top_bar{position:relative!important;top:0!important}
#Header_wrapper.mfn-mobile-open #menu{display:block!important;position:absolute!important;left:0!important;right:0!important;top:100%!important;bottom:auto!important;width:auto!important;max-width:none!important;min-width:0!important;margin:0!important;transform:none!important;visibility:visible!important;opacity:1!important;background:var(--mfn-mm-bg,#fff)!important;max-height:78vh;overflow:auto;z-index:100000!important;box-shadow:0 14px 30px rgba(0,0,0,.18)}
#Header_wrapper.mfn-mobile-open .menu_wrapper,#Header_wrapper.mfn-mobile-open .top_bar_left{overflow:visible!important}
#Header_wrapper.mfn-mobile-open #menu>ul.menu{display:block!important;width:100%}
#Header_wrapper.mfn-mobile-open #menu ul.menu>li{display:block!important;float:none!important;width:100%!important;margin:0!important;height:auto!important;min-height:0!important;border-bottom:1px solid rgba(127,127,127,.25)}
#Header_wrapper.mfn-mobile-open #menu ul.menu li a{display:block!important;padding:14px 22px!important;color:var(--mfn-mm-fg,#222)!important;line-height:1.3!important;height:auto!important;min-height:0!important}
#Header_wrapper.mfn-mobile-open #menu ul.menu li a span{line-height:1.3!important}
#Header_wrapper.mfn-mobile-open #menu ul.sub-menu{position:static!important;display:none;left:auto;top:auto;box-shadow:none;min-width:0;background:rgba(127,127,127,.12)}
#Header_wrapper.mfn-mobile-open #menu li.mfn-sub-open>ul.sub-menu{display:block!important}
#Header_wrapper.mfn-mobile-open #menu ul.sub-menu li a{padding-left:42px!important}
/* While the menu is open #Top_bar grows by the height of the panel. A
   Betheme hamburger is absolutely positioned at top:50% of that bar, so it
   slides down INTO the open menu: the second tap lands on a menu item, you
   navigate away, and the menu appears impossible to close. The script pins
   it to where it sat while closed. */
#Header_wrapper.mfn-mobile-open .responsive-menu-toggle{top:var(--mfn-mm-tgl,0)!important;margin-top:0!important;transform:none!important;z-index:100001!important}
.responsive-menu-toggle{cursor:pointer}

/* live session captcha, styled to match the form's existing fields */
.cf-cap-q{display:inline-block;font-size:17px;font-weight:700;letter-spacing:2px;
  background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.15);border-radius:4px;
  padding:8px 14px;white-space:nowrap;user-select:none;margin:0 10px 6px 0;vertical-align:middle}
.cf-cap-a{max-width:160px;display:inline-block;vertical-align:middle}

.site-credit{display:inline-block;margin-top:6px;font-size:inherit;opacity:.9}
.site-credit a{color:inherit;text-decoration:underline}


/* ---- dpdp-v1 ---------------------------------------------------------- */
/* The consent line always takes a row of its own, above the captcha, so the
   captcha and the send button can sit together underneath. Themes lay the
   bottom of a form out with floats (Divi's .et_contact_bottom_container) or
   flex, so the width and clearing have to be forced or the line gets squeezed
   into the narrow captcha column. */
.dpdp-consent { display: block !important; float: none !important; clear: both !important;
  width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  box-sizing: border-box; margin: 4px 0 16px !important; padding: 0 !important;
  text-align: left !important; }
/* No `order` here, ever. The block is placed in document order, just before
   the captcha row; Divi's newer contact module makes the FORM a flex
   container, so an `order:-1` left over from an earlier attempt threw the
   consent line to the very top of the form, above the Name field. */
.dpdp-consent label { display: flex !important; align-items: flex-start; gap: 10px;
  width: 100%; font-size: 14px; line-height: 1.55; cursor: pointer;
  font-weight: 400 !important; text-align: left !important; margin: 0 !important;
  padding: 0 !important; text-transform: none !important; letter-spacing: normal !important;
  color: inherit; }
/* themes (Divi's mobile sheet especially) strip a checkbox down to
   appearance:none with no background or border — it is then present but
   completely invisible.  Force a real, visible control. */
.dpdp-consent input[type="checkbox"] { appearance: auto !important;
  -webkit-appearance: checkbox !important; -moz-appearance: checkbox !important;
  width: 17px !important; height: 17px !important; min-width: 17px !important;
  max-width: 17px !important; min-height: 17px !important;
  margin: 3px 0 0 !important; padding: 0 !important; flex: 0 0 auto;
  position: static !important; opacity: 1 !important; visibility: visible !important;
  border: 1px solid #8a8f98 !important; border-radius: 3px !important;
  background: #fff !important; background-image: none !important;
  box-shadow: none !important; outline: none !important; float: none !important;
  display: inline-block !important; accent-color: #1f7a3d; cursor: pointer; }
.dpdp-consent span { flex: 1 1 auto; }
/* Some themes leave the captcha answer box transparent, which on a dark
   section makes it invisible even though the rest of the fields are light. */
form[action="/send.php"] input[name="captcha"] {
  background: #fff !important; color: #14181c !important;
  border: 1px solid #8a8f98 !important; border-radius: 4px !important;
  -webkit-text-fill-color: #14181c !important; opacity: 1 !important; }
.dpdp-consent a { text-decoration: underline; }
/* Divi: the bottom row is a flex/float container — give the consent its own line */
.et_contact_bottom_container { flex-wrap: wrap; }
.et_contact_bottom_container .dpdp-consent { margin-bottom: 12px !important; }
/* Divi's bottom row is float:right with a negative top margin that would ride
   up over the consent line now sitting above it. */
.dpdp-consent + .et_contact_bottom_container { margin-top: 0 !important; }
.et_pb_contact .dpdp-consent { clear: both !important; }
/* CF7: the captcha <p> follows the consent, so it must start a fresh row. */
.dpdp-consent + p { clear: both; }

.dpdp-footer-line { display: block; margin-top: 8px; font-size: 13px; opacity: .92; }
.dpdp-footer-line a { text-decoration: underline; }

.dpdp-standalone { max-width: 62rem; margin: 0 auto; padding: 28px 20px 56px; }
.dpdp-back { margin: 0 0 18px; font-size: 14px; }
.dpdp-back a { text-decoration: underline; }
.dpdp-doc { max-width: 60rem; margin: 0 auto; padding: 8px 20px 40px; }
.dpdp-doc h2 { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; margin: 32px 0 10px; }
.dpdp-doc p, .dpdp-doc li { font-size: 16px; line-height: 1.75; }
.dpdp-doc ul { margin: 0 0 16px 22px; list-style: disc !important; }
.dpdp-doc ul li { list-style: disc !important; }
.dpdp-doc li { margin: 4px 0; }
.dpdp-meta { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; }

.dpdp-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 99999;
  max-width: 640px; margin: 0 auto; background: #14181c; color: #fff;
  border-radius: 12px; padding: 18px 20px; box-shadow: 0 16px 44px rgba(0,0,0,.34);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.dpdp-banner[hidden] { display: none; }
.dpdp-banner p { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.6; color: #fff; }
.dpdp-banner a { color: #8fd0ff; text-decoration: underline; }
.dpdp-banner__btns { display: flex; gap: 10px; flex: 0 0 auto; }
/* themes set a global button{} with their own padding, colour and box model —
   beat it, or the two buttons come out as tan pills the wrong size */
.dpdp-banner .dpdp-btn {
  appearance: none !important; -webkit-appearance: none !important;
  box-sizing: border-box !important; border: 0 !important; border-radius: 8px !important;
  padding: 11px 20px !important; margin: 0 !important; min-width: 0 !important;
  width: auto !important; height: auto !important; line-height: 1.2 !important;
  font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important;
  text-transform: none !important; cursor: pointer;
  background: #fff !important; color: #14181c !important; box-shadow: none !important; }
.dpdp-banner .dpdp-btn:hover { background: #e9edf2 !important; color: #14181c !important; }
.dpdp-banner .dpdp-btn--ghost,
.dpdp-banner .dpdp-btn--ghost:hover {
  background: transparent !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.5) !important; }
.dpdp-consent { -webkit-tap-highlight-color: transparent; }
@media (max-width: 767px) {
  .dpdp-consent { margin: 6px 0 14px !important; }
  .dpdp-consent label { font-size: 13.5px; line-height: 1.5; }
}
@media (max-width: 560px) {
  .dpdp-banner { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  .dpdp-banner__btns { width: 100%; }
  .dpdp-banner .dpdp-btn { flex: 1 1 0; }
}

/* mobile-type-v1 — see _buildtools/mobiletype.py.
   Phone-only. Measured at 412px: body was 13px with 52 elements inheriting it,
   and the mobile logo rendered 219px wide from a 1768px source. Everything
   below is inside the phone media query, so the desktop is untouched. */
@media (max-width: 767px){
  body{ font-size: 15px !important; }
  /* a floor for anything the theme sized very small */
  body .column_attr, body .column_attr p, body .column_attr li,
  body #Footer, body #Footer p, body #Footer li, body .the_content_wrapper p{
    font-size: 15px !important; line-height: 1.6 !important;
  }
  body small, body .small, body figcaption{ font-size: 12px !important; }

  /* The real reason the page reads as "everything is tiny": the theme sizes
     <h4> at 13px on a phone — SMALLER than the body text it heads. Measured on
     udaipurambulanceservice: "Quick Ambulance Booking", "24*7 Service", and
     every footer column heading were all 13px. A heading below body size is
     not a style choice, it is a broken scale. */
  body h4, body #Footer h4{ font-size: 17px !important; line-height: 1.35 !important; }
  body h3{ font-size: 20px !important; line-height: 1.3 !important; }

  /* the call-to-action and the menu are things people tap, not read */
  body .action_button, body a.action_button{ font-size: 16px !important; padding: 12px 18px !important; }
  #Side_slide .menu li > a, #Top_bar #menu li > a, .mfn-mobile-open #menu li > a{
    font-size: 16px !important;
  }
  body #Footer a, body .dpdp-footer-line, body .dpdp-footer-line a{ font-size: 14px !important; }

  /* the logo: release Betheme's height cap on BOTH the box and the image */
  #Top_bar .logo{ height: auto !important; padding-right: 62px !important; }
  #Top_bar #logo{
    height: auto !important; max-height: none !important;
    padding: 10px 0 !important; margin: 0 !important; line-height: 1 !important;
  }
  #Top_bar #logo img, #Top_bar .logo img{
    max-height: none !important; height: auto !important;
    width: min(300px, 100%) !important;
  }
}
/* end mobile-type-v1 */

/* slider-one-up-v1 — see _buildtools/slider1up.py.
   MetaSlider shows two slides side by side, so on a 412px phone each photo got
   206px and the whole strip was 137px tall. One slide per view gives the photo
   the full width and its own ratio decides the height (412/1.5 = 275px).
   Phone only — the desktop stays two-up. */
@media (max-width: 767px){
  .metaslider, .metaslider .flexslider, .metaslider .slides{ height: auto !important; }
  .metaslider .flexslider .slides > li{ width: 100vw !important; max-width: 100vw !important; }
  .metaslider .flexslider .slides > li img{ width: 100% !important; height: auto !important; }
}
/* end slider-one-up-v1 */

/* mfn-menu-button-v1 — see _buildtools/menubtn.py.
   Betheme pins .responsive-menu-toggle.is-sticky fixed at the TOP-LEFT of the
   viewport, over the utility bar, as a thin white line-icon: measured 34x34 at
   (10,30) at 1.9:1 against the orange bar, i.e. invisible. Put it back in the
   header at the right-hand end of the logo, as a solid chip with CSS-drawn
   bars so it never depends on the icon font. */
@media (max-width: 1240px){
  #Top_bar .container{ position: relative; }
  /* Betheme's own rule is `.header-stack #Top_bar a.responsive-menu-toggle
     .is-sticky{position:fixed!important}` — specificity (1,3,1), so an
     `!important` alone loses to it. The class is repeated to outweigh that
     honestly rather than by piling on ancestors the next site may not have. */
  a.responsive-menu-toggle,
  #Top_bar a.responsive-menu-toggle,
  html body #Top_bar a.responsive-menu-toggle.responsive-menu-toggle.responsive-menu-toggle,
  html body #Top_bar a.responsive-menu-toggle.is-sticky.is-sticky.is-sticky{
    position: absolute !important;
    left: auto !important;
    right: 14px !important;
    top: 60px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 11px !important;
    background: #1f2328 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
    z-index: 9999 !important;
    line-height: 0 !important;
    text-align: center !important;
  }
  /* Keep the logo out from under the button. A left-aligned logo does not move
     at all; a centred one shifts left by half of this, which is what stops the
     chip landing on the last letters of a wide wordmark. */
  #Top_bar .logo, #Top_bar #logo{
    padding-right: 62px !important;
    box-sizing: border-box !important;
  }
  a.responsive-menu-toggle:hover,
  a.responsive-menu-toggle:focus-visible{ background: #000 !important; }
  a.responsive-menu-toggle:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }

  /* the three bars, drawn here rather than taken from mfn-icons */
  a.responsive-menu-toggle i,
  a.responsive-menu-toggle i:before,
  a.responsive-menu-toggle i:after{
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
  }
  a.responsive-menu-toggle i{
    position: relative !important;
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #ffffff !important;
  }
  a.responsive-menu-toggle i:before,
  a.responsive-menu-toggle i:after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    transition: transform .22s cubic-bezier(.2,.7,.3,1), top .22s cubic-bezier(.2,.7,.3,1);
  }
  a.responsive-menu-toggle i:before{ top: -6px !important; }
  a.responsive-menu-toggle i:after{ top: 6px !important; }

  /* NO floating button. An earlier version pinned it to the top-right once the
     header scrolled away, so it rode over the content down the whole page —
     Vikram, 28 Sep: "menu pure page par sticky". The button belongs in the
     header; the theme's own sticky header brings it back when it wants to. */
}
@media (prefers-reduced-motion: reduce){
  a.responsive-menu-toggle i:before,
  a.responsive-menu-toggle i:after{ transition: none !important; }
}
/* end mfn-menu-button-v1 */