/* 3i revamp — shared component layer. Loaded last in <head>. */
:root{ --r-brand:#307f2f; --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; }
  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);
  }
}

/* /contact-us/ only: the three columns of its second row carry the designer's
   own translateX(+200px) / none / translateX(-200px), which overlap them into
   a deliberate arrangement at full width. Those are per-element decisions and
   they stay exactly as they are on desktop. At 390px each column is 371px wide
   and stacked, so the same ±200px pushes one column to left=210 and another to
   left=-190 and the whole PAGE scrolls sideways (scrollWidth 580). The control
   does the same, so this is the site's own bug rather than ours - but it is a
   mobile layout fault that costs nothing to put right. Scoped to this one
   page's body id and to widths below the Divi breakpoint. */
@media (max-width:767px){
  body.page-id-17 .et_pb_row_2 .et_pb_column{transform:none!important}
}

/* 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:35px!important;font-weight:500!important;line-height:45.5px!important;color:rgb(255, 255, 255)!important;margin:0px 0 0px!important;padding:0px 0 10px!important;letter-spacing:inherit!important;text-align:center!important}
h1.u-keep-2{font-size:35px!important;font-weight:500!important;line-height:45.5px!important;color:rgb(255, 255, 255)!important;margin:0px 0 0px!important;padding:0px 0 10px!important;letter-spacing:inherit!important;text-align:center!important}
h1.u-keep-3{font-size:28px!important;font-weight:700!important;line-height:36.4px!important;color:rgb(0, 0, 0)!important;margin:0px 0 0px!important;padding:0px 0 10px!important;letter-spacing:inherit!important;text-align:center!important}
h1.u-keep-4{font-size:28px!important;font-weight:600!important;line-height:36.4px!important;color:rgb(0, 0, 0)!important;margin:0px 0 0px!important;padding:0px 0 10px!important;letter-spacing:inherit!important;text-align:left!important}
h1.u-keep-5{font-size:35px!important;font-weight:500!important;line-height:45.5px!important;color:rgb(255, 255, 255)!important;margin:0px 0 0px!important;padding:0px 0 10px!important;letter-spacing:inherit!important;text-align:center!important}
h1.u-keep-6{font-size:35px!important;font-weight:500!important;line-height:45.5px!important;color:rgb(255, 255, 255)!important;margin:0px 0 0px!important;padding:0px 0 10px!important;letter-spacing:inherit!important;text-align:center!important}
h1.u-keep-7{font-size:35px!important;font-weight:500!important;line-height:45.5px!important;color:rgb(255, 255, 255)!important;margin:0px 0 0px!important;padding:0px 0 10px!important;letter-spacing:inherit!important;text-align:center!important}
h1.u-keep-8{font-size:24px!important;font-weight:500!important;line-height:31.2px!important;color:rgb(0, 0, 0)!important;margin:32px 0 10px!important;padding:0px 0 10px!important;letter-spacing:inherit!important;text-align:start!important}
h2.u-keepd-1{font-size:25px!important;font-weight:500!important;line-height:32.5px!important;color:rgb(0, 0, 0)!important;margin:0px 0 0px!important;padding:0px 0 10px!important;letter-spacing:inherit!important;text-align:start!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:390px){h1.u-keep-3{font-size:22px!important;font-weight:700!important;line-height:28.6px!important;color:rgb(0, 0, 0)!important;margin:0px 0 0px!important;padding:0px 0 10px!important;letter-spacing:inherit!important;text-align:center!important}}
@media (max-width:768px){h1.u-keep-8{font-size:19px!important;font-weight:500!important;line-height:24.7px!important;color:rgb(0, 0, 0)!important;margin:32px 0 10px!important;padding:0px 0 10px!important;letter-spacing:inherit!important;text-align:start!important}}