/* 3i revamp — shared component layer. Loaded last in <head>. */
:root{ --r-brand:#ea2c54; --r-on-brand:#fff; --r-ease:cubic-bezier(.2,.7,.2,1); }

/* WhatsApp button — house default, bottom LEFT (right collides with
   back-to-top and most chat widgets). Number read from the page's own tel:
   link, never typed in. */
.u-wa{
  position:fixed !important; left:16px !important; right:auto !important; bottom:16px !important;
  width:62px; height:62px; border-radius:50%; background:#25D366;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.45); z-index:9000; display:block; text-decoration:none;
  transition:transform .2s var(--r-ease), box-shadow .2s ease;
}
.u-wa::after{
  content:""; position:absolute; inset:0; margin:auto; width:34px; height:34px; background:#fff;
  -webkit-mask:var(--wa) center/contain no-repeat; mask:var(--wa) center/contain no-repeat;
}
.u-wa{ --wa:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2A9.9 9.9 0 0 0 2.1 11.9a9.8 9.8 0 0 0 1.35 4.96L2 22l5.3-1.38a9.9 9.9 0 0 0 4.74 1.21h.01A9.9 9.9 0 0 0 22 11.93 9.9 9.9 0 0 0 12.04 2zm5.8 14.06c-.24.68-1.4 1.3-1.94 1.35-.5.05-.96.23-3.23-.67-2.72-1.07-4.45-3.84-4.58-4.02-.13-.18-1.1-1.46-1.1-2.79s.7-1.98.95-2.25c.25-.27.54-.34.72-.34h.52c.17 0 .4-.06.62.47.24.57.8 1.97.87 2.11.07.14.12.3.02.48-.1.18-.15.3-.3.46l-.44.5c-.14.14-.3.3-.13.6.17.3.75 1.23 1.6 2 1.1.98 2.02 1.28 2.32 1.43.3.15.47.13.64-.08.18-.2.74-.86.94-1.16.2-.3.4-.25.66-.15.27.1 1.67.79 1.96.93.29.14.48.21.55.33.07.12.07.7-.17 1.38z'/></svg>"); }
.u-wa:hover{ transform:translateY(-3px); box-shadow:0 10px 26px -8px rgba(0,0,0,.5); }
.u-wa:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
@media (max-width:767px){ .u-wa{ width:56px; height:56px; left:14px !important; bottom:14px !important; } }
@media (prefers-reduced-motion:reduce){ .u-wa{ transition:none; } .u-wa:hover{ transform:none; } }

/* Phone row in the mobile menu. The theme's own menu is left alone wherever it
   works; this is the one thing it lacks. Full menu width, 48px target. */
.u-menu-call{
  display:none; box-sizing:border-box; width:100%; align-items:center; gap:10px;
  min-height:48px; padding:12px 20px; background:var(--r-brand); color:var(--r-on-brand) !important;
  font-weight:600; text-decoration:none; white-space:nowrap;
}
.u-menu-call svg{ width:18px; height:18px; fill:currentColor; flex:0 0 auto; }
@media (max-width:980px){ .u-menu-call{ display:flex; } }
.u-menu-call-item{ list-style:none; }
.u-menu-call-item{ margin:0 !important; padding:0 !important; border:0 !important; }

/* Mobile type floor. These themes drop body copy to 13-14px on phones.
   Body text only; heading sizes stay the designer's, desktop is untouched. */
@media (max-width:767px){
  body{ font-size:16px; }
  p, li, td, .et_pb_text, .et_pb_text_inner{ font-size:16px; line-height:1.65; }
  /* Betheme's own .big is 16px on desktop and 13px on phones - the one
     paragraph class whose rule outranks the line above. Named here so the
     floor actually holds: mtr-construction.com had exactly one line of
     13px text left after the sweep, and it was this. */
  p.big, .big{ font-size:16px; line-height:1.65; }
  footer p, footer li, footer a, #main-footer p, #main-footer li, #main-footer a{ font-size:15px; line-height:1.6; }
  small, .small{ font-size:14px; }
}

/* The enquiry form's reply box: success and failure printed in the same grey
   on every site seen so far. The live handler tags the FORM, so the states are
   styled from those classes. */
.wpcf7 form .wpcf7-response-output, form[data-3i] .wpcf7-response-output{
  margin:16px 0 0; padding:12px 16px; border:1px solid transparent; border-radius:10px;
  font-size:15px; line-height:1.5;
}
.wpcf7 form.sent .wpcf7-response-output, form[data-3i].sent .wpcf7-response-output{
  border-color:rgba(26,156,91,.40) !important; background:#effaf4 !important; color:#12623a !important;
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output,
form[data-3i].failed .wpcf7-response-output{
  border-color:rgba(190,120,20,.45) !important; background:#fff8ec !important; color:#8a5a06 !important;
}



/* A number that was plain text must not start looking like a link - and must
   not start OCCUPYING a different box either. On welicronlifesciences.com the
   theme's own `.icon_box a{display:block}` (meant for an icon box that is
   wholly a link) caught our injected anchor, so a number that had been inline
   text inside `<div class="desc">` became a full-width block and added exactly
   one 28px line box: /contact-us/ grew 28px with not one computed style
   different, which is how a cascade FAIL with no style diff looks when the
   cause is a box-model change rather than a restyle. Plain text is inline, so
   pin inline. (The mobile menu's phone row is .u-menu-call, not this class, so
   it keeps its own flex box.) */
a.u-tel{font:inherit!important;color:inherit!important;line-height:inherit!important;
  letter-spacing:inherit!important;text-decoration:inherit!important;font-weight:inherit!important;
  display:inline!important;width:auto!important;padding:0!important;margin:0!important}

/* Divi mobile menu — THE PANEL THAT HAD A HANDLER AND NO CSS.
   The flat-PHP conversion ships a small <script id="et-mm"> that toggles
   `body.et-mobile-open`, sets --et-mm-top/-bg/-fg from the live header, and
   marks an open submenu `li.et-mm-sub-open`. Nothing ever styled those, so on
   sompuratemples.com the hamburger added a class to <body> and the panel stayed
   `display:none, height 0` on every page - the menu was dead on phones, in the
   control build as much as ours, and only a real tap revealed it: the markup is
   present, the toggle is present, the console is clean, and 24 links are right
   there in the DOM. "The menu exists" is the easier question.
   This is the missing half. Divi's breakpoint is 980px; the panel is a <ul>
   positioned absolute inside a 40x40 static .mobile_nav, so it is pinned to the
   viewport under the header instead, full width and opaque - a translucent
   panel over a photo is the complaint that follows otherwise. */
@media (max-width:980px){
  body.et-mobile-open ul.et_mobile_menu{
    display:block!important; visibility:visible!important; opacity:1!important;
    position:fixed!important; top:var(--et-mm-top,64px)!important;
    left:0!important; right:0!important; width:100%!important;
    max-height:calc(100vh - var(--et-mm-top,64px))!important; overflow-y:auto!important;
    margin:0!important; padding:0!important; list-style:none!important;
    background:var(--et-mm-bg,#fff)!important; z-index:99999!important;
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 14px 30px -14px rgba(0,0,0,.45);
  }
  body.et-mobile-open ul.et_mobile_menu li{
    list-style:none!important; margin:0!important; padding:0!important; width:100%!important;
    float:none!important; position:relative!important;
  }
  /* :not(.mobile-toggle-icon) matters. Divi ships a SECOND, empty <a> inside
     every parent item - its own submenu arrow, which its CSS pins to the right
     as a small control. Styled by a blanket `li a` rule it became a full-width
     48px blank row with a chevron, sitting between "Gallery" and "Contact Us"
     and looking exactly like a menu item whose label had gone missing. */
  body.et-mobile-open ul.et_mobile_menu li>a:not(.mobile-toggle-icon){
    display:block!important; box-sizing:border-box!important;
    padding:14px 56px 14px 20px!important; min-height:48px!important;   /* 48px tap target */
    color:var(--et-mm-fg,#111)!important; text-decoration:none!important;
    font-size:16px!important; line-height:1.4!important;
    border-bottom:1px solid rgba(0,0,0,.07)!important; width:auto!important;
  }
  /* The toggle icon goes back to being a control: 48x48 at the right of its own
     row, carrying the chevron. It expands the submenu and the label beside it
     still NAVIGATES - which matters here, because /temple-construction-india/
     (the Gallery page itself) is not repeated inside its own submenu, so a
     parent link that only expands makes that page unreachable on a phone. */
  body.et-mobile-open ul.et_mobile_menu li>a.mobile-toggle-icon{
    position:absolute!important; top:0!important; right:0!important;
    width:48px!important; height:48px!important; min-height:0!important;
    padding:0!important; margin:0!important; border:0!important;
    display:flex!important; align-items:center; justify-content:center;
    color:var(--et-mm-fg,#111)!important; opacity:.55; z-index:2;
  }
  body.et-mobile-open ul.et_mobile_menu li>a.mobile-toggle-icon::before{
    content:"\203A"; display:block; font-size:22px; line-height:1;
    transform:rotate(90deg); transition:transform .18s ease;
  }
  body.et-mobile-open ul.et_mobile_menu li.et-mm-sub-open>a.mobile-toggle-icon::before{
    transform:rotate(-90deg);
  }
  /* Sub-menus stay closed until the handler marks the parent, so a long nav
     does not open as a wall of links. */
  body.et-mobile-open ul.et_mobile_menu .sub-menu{display:none!important; margin:0!important; padding:0!important}
  body.et-mobile-open ul.et_mobile_menu li.et-mm-sub-open>.sub-menu{display:block!important}
  body.et-mobile-open ul.et_mobile_menu .sub-menu a{padding-left:36px!important; font-size:15px!important}
  /* Only for a theme that gives us NO toggle icon of its own. Written as
     :not(:has(...)) on purpose: where :has() is unsupported the rule is dropped
     and such an item simply has no chevron, which is better than the two
     chevrons the other way round would produce. */
  body.et-mobile-open ul.et_mobile_menu li.menu-item-has-children:not(:has(>a.mobile-toggle-icon))>a::after{
    content:"\203A"; float:right; transform:rotate(90deg); opacity:.55;
  }
  body.et-mobile-open ul.et_mobile_menu li.et-mm-sub-open:not(:has(>a.mobile-toggle-icon))>a::after{
    transform:rotate(-90deg);
  }
}

/* ---------------------------------------------------------------------------
   u-lb — rescue lightbox for a gallery whose plugin lightbox is dead.

   mtr-construction.com runs Photo Gallery by WD (BWG). Every thumbnail is an
   <a class="bwg_lightbox" href="<full image>">, and the plugin answers the
   click by XHRing wp-admin/admin-ajax.php — which on a WordPress-free build is
   410 Gone. What a visitor got was a black overlay and a spinner that never
   stopped, on 98 thumbnails across 19 pages. The anchors already carry the full
   image, so the rescue is to take the click ourselves.

   Arrow sizing is written the long way on purpose: a theme's global
   button{padding:10px 35px} with content-box turns a 46px square into a
   130x80 pill (§3.3's arrow trap). Force the box model, don't just set w/h.
--------------------------------------------------------------------------- */
.u-lb{position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center;
  justify-content:center; background:rgba(9,11,16,.93); opacity:0; transition:opacity .18s ease-out}
.u-lb.is-open{opacity:1}
.u-lb-fig{margin:0; max-width:94vw; max-height:92vh; display:flex; flex-direction:column;
  align-items:center; gap:10px}
.u-lb-img{max-width:94vw; max-height:80vh; width:auto; height:auto; object-fit:contain;
  border-radius:4px; background:#111; box-shadow:0 18px 50px rgba(0,0,0,.5)}
.u-lb-cap{color:#f2f4f8; font-size:15px; line-height:1.5; text-align:center; max-width:70ch;
  padding:0 12px; text-wrap:pretty}
.u-lb-count{color:#aeb6c4; font-size:13px; letter-spacing:.04em}
.u-lb button{box-sizing:border-box!important; padding:0!important; margin:0!important;
  min-width:0!important; border:0!important; letter-spacing:0!important; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; border-radius:50%!important;
  width:46px!important; height:46px!important; line-height:46px!important; font-size:22px!important;
  transition:background .15s ease-out, transform .15s ease-out}
.u-lb button:hover{background:rgba(255,255,255,.28)}
.u-lb button:focus-visible{outline:3px solid #fff; outline-offset:3px}
.u-lb-prev{position:absolute; left:18px; top:50%; transform:translateY(-50%)}
.u-lb-next{position:absolute; right:18px; top:50%; transform:translateY(-50%)}
.u-lb-close{position:absolute; top:16px; right:18px; font-size:26px!important}
.u-lb-spin{position:absolute; width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:#fff; animation:u-lb-spin .8s linear infinite}
@keyframes u-lb-spin{to{transform:rotate(360deg)}}
body.u-lb-lock{overflow:hidden}
@media(max-width:600px){
  .u-lb button{width:40px!important; height:40px!important; line-height:40px!important; font-size:19px!important}
  .u-lb-prev{left:8px} .u-lb-next{right:8px} .u-lb-close{top:10px; right:10px}
  .u-lb-img{max-height:72vh}
  .u-lb-cap{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .u-lb{transition:none} .u-lb button{transition:none} .u-lb-spin{animation-duration:2s}
}

/* telwrap.py: a phone number or e-mail that the page printed as plain text,
   wrapped in a link so a tap dials or opens the mail app. It must look exactly
   the same as the text around it - the point is that nothing visible changed. */
a.u-telwrap{color:inherit !important; text-decoration:none !important;
  border:0 !important; background:none !important}
a.u-telwrap:hover{text-decoration:underline !important}
a.u-telwrap:focus-visible{outline:2px solid currentColor; outline-offset:2px}

/* === krishnasewasansthan site block =========================================
   Very little belongs here. This site's design is in good shape: the slider
   works, the cards are consistent, the mobile menu opens, the body type is
   readable. The two things below are measured defects, not taste.
   --------------------------------------------------------------------------- */

/* 1. The home slider's captions - FOUND, MEASURED, AND LEFT ALONE.
      Smart Slider places each caption with a fixed left offset and centres it
      there, so the width of the words decides the right edge. Measured on the
      settled slide at 1440 (not on a screenshot taken mid-transition, 3.12),
      four of the seven run off the screen:

        Food Distribution In Blind School   ends at 1471   (31px cut off)
        Rakhi Celebration                   ends at 1453   (13px)
        Cloth Distribution                  ends at 1450   (10px)
        Food Distribution                   ends at 1445   (5px)

      The obvious repair - anchor the caption to the stage's right edge
      instead of a left offset - was tried and measured, and it threw every
      caption to x=2200: the layer's containing block is the slide TRACK, not
      the visible stage, so `right` resolves against a box far wider than the
      screen. That is 3.3's rule in one line - never style a container the
      slider's own JS has already measured - so it is reverted and reported
      instead. The fix belongs in Smart Slider's own layer settings, or in
      shorter caption text, and both are the client's call. */

/* 2. A phone number or e-mail that the page printed as plain text is now a
      link (tools/telwrap.py). It must read exactly as it did - the shared
      layer styles a.u-telwrap to inherit colour and drop the underline, and
      this site needs nothing on top of that. Listed here so the next person
      knows where to look. */

/* === end krishnasewasansthan site block === */



/* Promoted headings pinned to the look they had in the untouched build.
   Measured, not guessed: a wrong line-height shifts everything below it. */
h1.u-keep-1{font-size:40px!important;font-weight:700!important;line-height:50px!important;color:rgb(236, 44, 85)!important;margin:0px 0 15px!important;padding:0px 0 0px!important;letter-spacing:inherit!important;text-align:left!important}
h1.u-keep-2{font-size:40px!important;font-weight:700!important;line-height:50px!important;color:rgb(236, 44, 85)!important;margin:0px 0 15px!important;padding:0px 0 0px!important;letter-spacing:inherit!important;text-align:center!important}

/* Mobile sizes for the promoted headings, measured on the untouched
   build at 768 and 390. The pins above were measured at 1440 only and
   are !important, so without these the heading kept its desktop size on
   a phone. Only the widths where the control actually differs appear. */
@media (max-width:768px){h1.u-keep-1{font-size:34px!important;font-weight:700!important;line-height:43px!important;color:rgb(236, 44, 85)!important;margin:0px 0 15px!important;padding:0px 0 0px!important;letter-spacing:inherit!important;text-align:left!important}}
@media (max-width:390px){h1.u-keep-1{font-size:24px!important;font-weight:700!important;line-height:30px!important;color:rgb(236, 44, 85)!important;margin:0px 0 15px!important;padding:0px 0 0px!important;letter-spacing:inherit!important;text-align:left!important}}
@media (max-width:768px){h1.u-keep-2{font-size:34px!important;font-weight:700!important;line-height:43px!important;color:rgb(236, 44, 85)!important;margin:0px 0 15px!important;padding:0px 0 0px!important;letter-spacing:inherit!important;text-align:center!important}}
@media (max-width:390px){h1.u-keep-2{font-size:24px!important;font-weight:700!important;line-height:30px!important;color:rgb(236, 44, 85)!important;margin:0px 0 15px!important;padding:0px 0 0px!important;letter-spacing:inherit!important;text-align:center!important}}