/* ------------------------------------------------------------------
   Udaisagar Nature Retreat — revamp layer (2026-11-06)
   Styling only. No content, URL or head-tag changes.
   Palette taken from the site's own theme CSS, not invented:
     #2b534b brand green · #234346 deep · #478f95 teal
     #d6a615 gold · #161922 ink · #e5fffa mint
   ------------------------------------------------------------------ */
:root{
  --u-brand:#2b534b;
  --u-brand-deep:#234346;
  --u-brand-soft:#3f6d63;
  --u-teal:#478f95;
  --u-gold:#d6a615;
  --u-ink:#161922;
  --u-mint:#e5fffa;
  --u-sand:#f6f3ec;
  --u-line:rgba(43,83,75,.16);
  --u-s1:4px;  --u-s2:8px;  --u-s3:12px; --u-s4:16px;
  --u-s5:24px; --u-s6:32px; --u-s7:48px; --u-s8:64px; --u-s9:96px;
  --u-r-sm:8px; --u-r-md:14px; --u-r-lg:24px;
  --u-sh-1:0 1px 2px rgba(22,25,34,.06), 0 2px 8px rgba(22,25,34,.05);
  --u-sh-2:0 8px 24px rgba(22,25,34,.08), 0 2px 6px rgba(22,25,34,.05);
  --u-ease:cubic-bezier(.22,.61,.36,1);
  --u-dur:260ms;
}

/* ---------- 1. Type: readable on phones, real hierarchy ---------- */
body,
#Wrapper, #Content,
.column_attr, .desc, .list_item .desc,
p{ font-size:clamp(15.5px, 1.05rem, 17px); line-height:1.65; }
p{ text-wrap:pretty; }
#Content p, .column_attr p{ max-width:72ch; }

h1,h2,h3,h4,h5{ text-wrap:balance; }
h1,.ew-title{ font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); line-height:1.12; letter-spacing:-.01em; }
h2{ font-size:clamp(1.55rem, 1.05rem + 1.9vw, 2.45rem); line-height:1.18; }
h3{ font-size:clamp(1.3rem, 1rem + 1.1vw, 1.8rem);  line-height:1.25; }
h4{ font-size:clamp(1.08rem, .97rem + .45vw, 1.3rem); line-height:1.35; }
h5{ font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--u-teal); font-weight:600; }

@media (max-width:767px){
  body, p, .desc, .column_attr{ font-size:16px !important; line-height:1.62 !important; }
  .column_attr h5, h5{ font-size:.78rem !important; }
  #Content .section_wrapper{ padding-left:4vw; padding-right:4vw; }
}

/* ---------- 2. Hero (plug-in-free, replaces Smart Slider) ---------- */
.ew-hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(380px, 62vh, 640px);
  background:var(--u-ink);
}
.ew-hero .ew-track{ list-style:none; margin:0; padding:0; position:absolute; inset:0; }
.ew-hero .ew-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 900ms var(--u-ease);
  will-change:opacity;
}
.ew-hero .ew-slide.is-active{ opacity:1; }
.ew-hero .ew-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; transform:scale(1.03);
}
.ew-hero .ew-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 52%, rgba(10,14,13,.62) 0%, rgba(10,14,13,.28) 58%, rgba(10,14,13,0) 100%),
    linear-gradient(180deg, rgba(16,22,20,.55) 0%, rgba(16,22,20,.22) 42%, rgba(16,22,20,.72) 100%);
}
.ew-hero .ew-copy{
  position:relative; z-index:2; max-width:820px; margin:0 auto;
  min-height:inherit; padding:clamp(72px,12vh,140px) clamp(20px,6vw,48px) clamp(64px,10vh,120px);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; color:#fff;
}
.ew-hero .ew-title{ color:#fff; margin:0 0 var(--u-s4); text-shadow:0 2px 18px rgba(0,0,0,.35); }
.ew-hero .ew-sub{
  color:rgba(255,255,255,.93); margin:0; max-width:62ch;
  font-size:clamp(15.5px, .95rem + .35vw, 1.15rem); line-height:1.6;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}

/* Arrows — Betheme's global button{padding:10px 35px} with content-box
   turns a 46px square into a 130x80 pill. Box model must be forced. */
.ew-hero .ew-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  box-sizing:border-box !important; padding:0 !important; margin:0 !important;
  min-width:0 !important; width:46px !important; height:46px !important;
  line-height:46px !important; font-size:20px !important;
  border-radius:50% !important; border:0 !important;
  background:rgba(0,0,0,.45) !important; color:#fff !important;
  letter-spacing:0 !important; cursor:pointer;
  transition:background var(--u-dur) var(--u-ease);
}
.ew-hero .ew-arrow:hover{ background:rgba(0,0,0,.68) !important; }
.ew-hero .ew-prev{ left:18px !important; }
.ew-hero .ew-next{ right:18px !important; }
.ew-hero .ew-dots{
  position:absolute; left:0; right:0; bottom:18px; z-index:3;
  display:flex; justify-content:center; gap:0;
}
.ew-hero .ew-dots button{
  box-sizing:border-box !important; padding:0 !important; min-width:0 !important;
  width:11px !important; height:11px !important; line-height:0 !important;
  margin:0 4px !important; border-radius:50% !important;
  border:1px solid rgba(255,255,255,.85) !important; background:transparent !important;
  cursor:pointer; transition:background var(--u-dur) var(--u-ease);
}
.ew-hero .ew-dots button.is-active{ background:#fff !important; }
@media (max-width:600px){
  .ew-hero .ew-arrow{ width:36px !important; height:36px !important; line-height:36px !important; font-size:16px !important; }
  .ew-hero .ew-prev{ left:10px !important; }
  .ew-hero .ew-next{ right:10px !important; }
}
@media (prefers-reduced-motion:reduce){
  .ew-hero .ew-slide{ transition:none; }
}

/* ---------- 3. Betheme structural safety nets ---------- */
/* equal-height columns pull up 50% when the theme's equalize JS never runs */
.equal-height-wrap .mcb-wrap .mcb-wrap-inner{ top:0 !important; transform:none !important; }
#Top_bar.loading{ opacity:1 !important; visibility:visible !important; }

/* ---------- 4. Icons: one green family on light, gold on dark ----------
   The source PNGs are gold (#d6a615, a colour the theme already uses).
   The theme's hue-rotate(127deg) turned them cyan, which sat beside the
   brand green as a second, slightly-off green. On light cards they now
   land in the brand-green family; on dark sections the gold stays. */
.list_item .list_left img,
.icon_box .icon_wrapper,
.list_item .list_left .icon_wrapper{
  filter:hue-rotate(118deg) saturate(.58) brightness(.78) !important;
}
.dark .list_item .list_left img,
.dark .icon_box .icon_wrapper,
.counter .icon_wrapper{
  filter:none !important;
}

/* ---------- 5. Cards, lists, counters ---------- */
.list_item{
  background:#fff;
  padding:clamp(20px,3.2vw,30px) clamp(18px,2.6vw,26px) !important;
  border-radius:var(--u-r-lg) !important;
  box-shadow:var(--u-sh-2) !important;
  outline:1px solid var(--u-line) !important;
  outline-offset:0 !important;
  transition:transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.list_item:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(22,25,34,.12) !important; }
.list_item .list_right h4{ margin-bottom:var(--u-s2); text-transform:capitalize; color:var(--u-brand); }
.counter{
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:var(--u-r-md) !important;
  padding:clamp(18px,2.6vw,26px) !important;
}
.counter .desc_wrapper .title{ font-size:1.05rem !important; line-height:1.4 !important; letter-spacing:.04em; }
.box{ transition:transform var(--u-dur) var(--u-ease) !important; }
.box:hover{ transform:translateY(-3px) !important; }

/* ---------- 6. Buttons ---------- */
a.button, .button, button, input[type="submit"]{
  border-radius:999px !important;
  transition:background var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
a.button:hover, .button:hover, input[type="submit"]:hover{ transform:translateY(-1px); box-shadow:var(--u-sh-1); }
a.button:active, .button:active, input[type="submit"]:active{ transform:translateY(0); }
.rm{ padding:.85em 2em !important; }

/* ---------- 7. Focus states (keyboard users) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--u-gold) !important;
  outline-offset:2px !important;
  border-radius:var(--u-r-sm);
}
.ew-hero .ew-arrow:focus-visible, .ew-hero .ew-dots button:focus-visible{
  outline:3px solid var(--u-gold) !important; outline-offset:3px !important;
}

/* ---------- 8. Gallery slider: predictable sizing ---------- */
.content_slider .slick-slide{ padding:0 var(--u-s3); }
.content_slider .slick-slide img{
  width:100%; height:auto; aspect-ratio:16/11; object-fit:cover;
  border-radius:var(--u-r-md); display:block;
}
.content_slider .slick-arrow{
  width:44px; height:44px; z-index:4;
}
@media (max-width:767px){
  .content_slider .slick-slide{ padding:0 var(--u-s2); }
  .content_slider .slick-slide img{ aspect-ratio:4/3; }
}

/* ---------- 9. Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"], textarea, select{
  border-radius:var(--u-r-md) !important;
  padding:14px 16px !important;
  font-size:16px !important;           /* stops iOS zoom-on-focus */
  border:1px solid var(--u-line) !important;
  transition:border-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
input:focus, textarea:focus{
  border-color:var(--u-brand) !important;
  box-shadow:0 0 0 3px rgba(43,83,75,.12) !important;
}
.wpcf7 label{ display:block; margin-bottom:var(--u-s2); font-weight:500; }

/* ---------- 10. Floating actions: WhatsApp + back-to-top, never overlapping ---------- */
#ht-ctc-chat.ht-ctc{
  bottom:20px !important; right:20px !important;
  z-index:9000 !important;              /* below any consent bar */
}
#ht-ctc-chat .ht_ctc_style img,
#ht-ctc-chat .ht_ctc_style svg{ width:56px !important; height:56px !important; }
#ht-ctc-chat{ filter:drop-shadow(0 6px 16px rgba(22,25,34,.28)); transition:transform var(--u-dur) var(--u-ease); }
#ht-ctc-chat:hover{ transform:translateY(-2px); }
#back_to_top{ bottom:92px !important; right:24px !important; z-index:8999 !important; }
@media (max-width:767px){
  #ht-ctc-chat.ht-ctc{ bottom:16px !important; right:16px !important; }
  #back_to_top{ bottom:84px !important; right:18px !important; }
}

/* ---------- 11. Mobile menu: phone row ---------- */
.u-menu-call{
  display:flex; align-items:center; justify-content:center; gap:9px;
  box-sizing:border-box; width:100%; max-width:100%;
  margin:var(--u-s4) 0 var(--u-s2);
  padding:0 14px; border-radius:999px;
  background:var(--u-brand); color:#fff !important;
  font-family:Inter,Helvetica,Arial,sans-serif;
  font-size:.95rem; font-weight:600; letter-spacing:.01em; line-height:1;
  white-space:nowrap; text-decoration:none; min-height:48px; height:48px;
  box-shadow:0 4px 14px rgba(22,25,34,.25);
}
/* The side panel ships transparent (#19191900 in the site's own CSS), so the
   menu text floats over whatever photo is behind it and is barely readable.
   A scrim behind the panel only — the page keeps its own overlay. */
#Side_slide{ background-color:var(--u-ink) !important; }   /* opaque: a translucent panel let the hamburger ghost through */
#Side_slide #menu > ul > li > a{ color:#fff !important; }
#Side_slide #menu > ul > li + li{ border-top:1px solid rgba(255,255,255,.10); }
.u-menu-call:hover,.u-menu-call:focus{ background:var(--u-brand-deep); color:#fff !important; }
.u-menu-call svg{ width:20px; height:20px; flex:none; fill:currentColor; }
@media (min-width:1240px){ .u-menu-call{ display:none; } }

/* ---------- 12. Section rhythm ----------
   The theme sets each section's padding inline, per section, and that IS the
   design. A blanket `#Content .section{padding:...}` only lands on sections
   the designer gave NO padding to — which is how ~346px of dead space turned
   up above the footer and 86-173px inside the gallery and contact pages.
   Only the container width is set here. */
.section_wrapper{ max-width:1240px; }

/* ---------- 13. Footer ---------- */
#Footer{ border-top:3px solid var(--u-brand-soft); }
/* footer widgets padding left to the theme (it ships 20px); my 64px
   clamp added ~90px of empty space above the first footer column. */
#Footer h4, #Footer .widgettitle{
  font-size:.86rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin-bottom:var(--u-s4); opacity:.95;
}
#Footer a{ transition:color var(--u-dur) var(--u-ease), opacity var(--u-dur) var(--u-ease); }
#Footer a:hover{ color:var(--u-gold) !important; }
#Footer .footer_copy{ border-top:1px solid rgba(255,255,255,.14); padding-top:var(--u-s5); }
#Footer .footer_copy .copyright{ font-size:.9rem; line-height:1.6; opacity:.86; }

/* ---------- 14. Images: no layout shift ----------
   NOTE: .scale-with-grid must stay inline-block. Making it display:block
   left-aligned every centred icon (contact cards, how-to-reach, amenities)
   because a block image ignores the parent's text-align:center. */
img{ max-width:100%; height:auto; vertical-align:middle; }

/* ---------- 15. Honeypots stay off-canvas, and out of the a11y tree ---------- */
form[action="/send.php"] label[aria-hidden="true"],
form[action="/send.php"] .cf-hp{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
  opacity:0 !important; pointer-events:none !important;
}

/* ==================================================================
   16. SECTION-LEVEL DESIGN PASS  (styling only — nothing moved)
   ================================================================== */

/* ---- 16.1 "How To Reach": drop the chevron clip-path ----
   .boxx used clip-path:polygon(75% 0,100% 50%,75% 100%,0 100%,16% 50%,0 0)
   which cut the icon on the left and clipped the last card on the right. */
.boxx{
  clip-path:none !important;
  background:#fff !important;
  border:1px solid var(--u-line);
  border-radius:var(--u-r-lg);
  padding:28px 22px 26px !important;
  box-shadow:var(--u-sh-1);
  height:100%;
  transition:transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.boxx:hover{ transform:translateY(-3px); box-shadow:var(--u-sh-2); }
.boxx img.bb{
  filter:hue-rotate(118deg) saturate(.58) brightness(.78) !important;
  width:64px !important; height:64px !important; margin:0 auto 14px !important;
}
.boxx h5{ margin:0 0 6px !important; color:var(--u-teal) !important; }
.boxx h4{ margin:0 !important; font-size:1.05rem !important; line-height:1.4 !important; color:var(--u-brand); }

/* ---- 16.2 Gallery band: stop the edge clipping, dim the side slides ---- */
.column_slider{ padding:0 56px; }
.content_slider{ position:relative; }
.content_slider .slick-list{ overflow:hidden !important; border-radius:var(--u-r-lg); }
.content_slider .slick-slide{
  opacity:.38; transform:scale(.94);
  transition:opacity 420ms var(--u-ease), transform 420ms var(--u-ease);
}
.content_slider .slick-slide.slick-center,
.content_slider .slick-slide.slick-active{ opacity:1; transform:scale(1); }
.content_slider .slick-slide img{
  aspect-ratio:3/2 !important; border-radius:var(--u-r-lg) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
#Content .content_slider button.slick-arrow,
#Content .content_slider .slick-arrow.the-icon{
  box-sizing:border-box !important; padding:0 !important; margin:0 !important;
  min-width:0 !important; width:46px !important; height:46px !important;
  line-height:46px !important; font-size:0 !important;
  border-radius:50% !important; border:0 !important;
  background:rgba(255,255,255,.94) !important; color:var(--u-brand) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.28) !important;
  z-index:6 !important; opacity:1 !important; overflow:hidden;
  transition:background var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease);
}
#Content .content_slider button.slick-arrow:before,
#Content .content_slider button.slick-arrow i{
  color:var(--u-brand) !important; opacity:1 !important; font-size:20px !important; line-height:46px !important;
}
#Content .content_slider button.slick-arrow:hover{ background:#fff !important; transform:scale(1.06); }
#Content .content_slider .slider_prev{ left:6px !important; }
#Content .content_slider .slider_next{ right:6px !important; }
.content_slider .slick-dots{ margin-top:22px !important; }
.content_slider .slick-dots li button:before{ color:#fff !important; opacity:.45 !important; font-size:9px !important; }
.content_slider .slick-dots li.slick-active button:before{ opacity:1 !important; }
@media (max-width:767px){
  .column_slider{ padding:0 14px; }
  .content_slider .slick-slide img{ aspect-ratio:4/3 !important; }
  .content_slider .slick-arrow{ width:38px !important; height:38px !important; line-height:38px !important; }
}

/* ---- 16.3 Accommodation cards: give them an edge ---- */
.section.sec .column_column .column_attr > img,
.section.sec .image_frame,
.section.sec .column_column.dark + .wrap img{ border-radius:var(--u-r-md); }
.section.sec .wrap .column_column:not(.dark){
  background:#fff; border-radius:var(--u-r-lg); overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  transition:transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.section.sec .wrap .column_column:not(.dark):hover{
  transform:translateY(-4px); box-shadow:0 22px 52px rgba(0,0,0,.36);
}
.section.sec .wrap .column_column:not(.dark) img{ border-radius:0 !important; }
.section.sec .list_item,
.section.sec .column_list .list_item{ box-shadow:none !important; outline:0 !important; }

/* ---- 16.4 Counters: lighter frame, clearer numbers ---- */
.counter{ background:rgba(255,255,255,.04) !important; }
.counter .number_wrapper{ margin-bottom:4px; }
.counter .icon_wrapper img{ width:48px !important; height:48px !important; }

/* ---- 16.5 Header: steadier, with a hairline instead of a hard edge ---- */
#Top_bar{ box-shadow:0 1px 0 var(--u-line), 0 6px 20px rgba(22,25,34,.04); }
#Top_bar #menu > ul > li > a{ transition:color var(--u-dur) var(--u-ease); }

/* ---- 16.6 (removed) dark-band rhythm — same risk as §12: it only lands on
   sections the designer left at 0. The theme's inline padding stands. ---- */

/* ---- 17. Empty trailing sections must not add space above the footer ----
   .the_content.no_content and .section-page-footer carry no content; the
   §12 section-rhythm rule was giving each of them 86px top + 86px bottom,
   i.e. ~346px of dead space above the footer on every page. */
#Content .section.no_content,
#Content .section.section-page-footer,
#Content .section.the_content.no_content{
  padding-top:0 !important; padding-bottom:0 !important;
  margin-top:0 !important; margin-bottom:0 !important;
}

/* ---- 18. Accommodation amenity strip ----
   NOTE: this strip is a single flat image (amenities-2.webp, 660x114), not
   five icons, so only its scale can be tuned here. Replacing it with real
   icons needs the five amenity names from the client. */
.rm > img[src*="amenities"]{
  display:block; margin:18px auto 20px !important;
  max-width:300px !important; width:100% !important; height:auto !important;
  opacity:.68;
}
@media (max-width:767px){ .rm > img[src*="amenities"]{ max-width:240px !important; } }

/* ---- 19. Room Amenities list: tick icons, even grid ---- */
.column_attr > ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
.column_attr > ul > li{
  position:relative; list-style:none !important;
  padding:7px 0 7px 28px !important; margin:0 !important;
  line-height:1.5; border-bottom:1px solid var(--u-line);
}
.column_attr > ul > li:last-child{ border-bottom:0; }
.column_attr > ul > li::marker{ content:''; }
.column_attr > ul > li::before{
  content:''; position:absolute; left:0; top:50%; width:18px; height:18px;
  transform:translateY(-50%);
  background:var(--u-brand);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.6 16.2 4.8 11.4l1.4-1.4 3.4 3.4 8-8L19 6.8z'/></svg>") no-repeat center/contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.6 16.2 4.8 11.4l1.4-1.4 3.4 3.4 8-8L19 6.8z'/></svg>") no-repeat center/contain;
}

/* ---- 20. WhatsApp: left side, prominent, our own icon ---- */
#ht-ctc-chat.ht-ctc{
  left:22px !important; right:auto !important;
  bottom:22px !important; z-index:9000 !important;
}
#ht-ctc-chat .ht_ctc_style{ display:block; }
#ht-ctc-chat .ht_ctc_style img,
#ht-ctc-chat .ht_ctc_style svg{ display:none !important; }
#ht-ctc-chat .ht_ctc_style::before{
  content:''; display:block; width:62px; height:62px; border-radius:50%;
  background:#25D366 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fff'><path d='M16.04 4C9.97 4 5.05 8.92 5.05 14.99c0 2.12.6 4.1 1.64 5.78L5 28l7.42-1.64a10.9 10.9 0 0 0 3.62.62h.01c6.07 0 10.99-4.92 10.99-10.99C27.04 8.92 22.11 4 16.04 4zm0 19.78h-.01c-1.1 0-2.18-.3-3.12-.86l-.22-.13-4.4.97.94-4.29-.15-.23a8.78 8.78 0 0 1-1.35-4.69c0-4.85 3.95-8.8 8.81-8.8 2.35 0 4.56.92 6.22 2.58a8.74 8.74 0 0 1 2.58 6.23c0 4.85-3.95 8.79-8.8 8.79zm4.83-6.59c-.26-.13-1.57-.78-1.81-.86-.24-.09-.42-.13-.6.13-.18.26-.69.86-.84 1.04-.16.18-.31.2-.57.07-.26-.13-1.12-.41-2.13-1.31-.79-.7-1.32-1.57-1.47-1.83-.16-.26-.02-.4.11-.53.12-.12.26-.31.4-.46.13-.16.18-.27.26-.45.09-.18.04-.33-.02-.46-.07-.13-.6-1.44-.82-1.97-.21-.52-.43-.45-.6-.46h-.51c-.18 0-.46.07-.7.33-.24.26-.92.9-.92 2.19s.94 2.54 1.07 2.72c.13.18 1.85 2.83 4.48 3.97.63.27 1.12.43 1.5.55.63.2 1.2.17 1.66.1.51-.08 1.57-.64 1.79-1.26.22-.62.22-1.15.16-1.26-.07-.11-.24-.18-.5-.31z'/></svg>") no-repeat center/34px 34px;
  box-shadow:0 8px 22px rgba(37,211,102,.38), 0 2px 6px rgba(22,25,34,.25);
  transition:transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
#ht-ctc-chat:hover .ht_ctc_style::before{ transform:translateY(-3px) scale(1.04); box-shadow:0 12px 28px rgba(37,211,102,.5); }
#ht-ctc-chat{ filter:none !important; }
#back_to_top{ right:24px !important; bottom:24px !important; z-index:8999 !important; }
@media (max-width:767px){
  #ht-ctc-chat.ht-ctc{ left:16px !important; bottom:16px !important; }
  #ht-ctc-chat .ht_ctc_style::before{ width:56px; height:56px; background-size:31px 31px; }
  #back_to_top{ right:16px !important; bottom:18px !important; }
}

/* ---- 21. Contact page: enquiry form and map side by side ----
   Layout change, requested explicitly. Done with grid placement on the
   existing sections, so the markup and section ORDER are untouched. */
@media (min-width:1025px){
  .page-id-16 .entry-content{
    display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  }
  .page-id-16 .entry-content > .section{ grid-column:1 / -1; }
  .page-id-16 .entry-content > .mcb-section-lcsu4aykd{ grid-column:1 / 2; }
  .page-id-16 .entry-content > .mcb-section-n2qppnu3l{ grid-column:2 / 3; }
  .page-id-16 .mcb-section-n2qppnu3l,
  .page-id-16 .mcb-section-n2qppnu3l .section_wrapper,
  .page-id-16 .mcb-section-n2qppnu3l .mcb-wrap,
  .page-id-16 .mcb-section-n2qppnu3l .mcb-wrap-inner,
  .page-id-16 .mcb-section-n2qppnu3l .column,
  .page-id-16 .mcb-section-n2qppnu3l .column_attr,
  .page-id-16 .mcb-section-n2qppnu3l .google-map{ height:100% !important; }
  .page-id-16 .mcb-section-n2qppnu3l iframe{
    width:100% !important; height:100% !important; min-height:620px; display:block; border:0;
  }
  .page-id-16 .mcb-section-lcsu4aykd .section_wrapper{ max-width:none; padding-left:6%; padding-right:6%; }
}