:root{ --ink:#0B131F; --ink2:#2C3045; --muted:#5D627C; --brand:#101F9D; }
body{ font-family: 'Poppins', sans-serif; color:var(--ink); }
.brand-logo{ object-fit: contain; border-radius: 8px; }
.brand-name{ font-weight:800; letter-spacing:.5px; }
.main-nav .nav-link{ font-weight:600; }
.hero{ background: radial-gradient(1200px 600px at 80% -50%, #EBF3FF 0%, rgba(255,255,255,0) 70%) #fff; }
.hero-logo{ max-width: 380px; }
.inner-hero{ background:#F8FAFF; }
.step{ background:#fff; border:1px solid #E6ECFA; border-radius:12px; padding:20px; height:100%; }
.step span{ display:inline-flex; width:32px; height:32px; border-radius:50%; align-items:center; justify-content:center; background:#EEF2FF; margin-bottom:6px; font-weight:700; color:var(--brand); }
.result-tile{ background:#fff; border:1px solid #E6ECFA; border-radius:12px; padding:14px; }
.result-tile .label{ font-size:.85rem; color:var(--muted); }
.result-tile .value{ font-size:1.4rem; font-weight:700; }
.pricing-card .display-6{ font-weight:800; }
footer a{ color:var(--ink2); }
footer a:hover{ text-decoration: underline; }
/* WhatsApp floating button */
.wa-float{ position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; z-index: 1000; box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
/* Consultation split */
.consult-split { background: radial-gradient(900px 450px at -10% 10%, #0e35ff14 0%, transparent 60%), linear-gradient(120deg, #0B1E7A 0%, #0A2F7F 50%, #051B4F 100%); }
.consult-copy { color: #fff; }
.consult-copy .highlight { color: #25D0FF; font-weight: 800; }
.consult-card { border-radius: 16px; border: 1px solid #E6ECFA; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { border: 1px solid #DDE3F7; background: #fff; border-radius: 10px; padding: .45rem .75rem; font-weight: 600; font-size: .95rem; }
.chip.active { background: #E9F5FF; border-color: #9ED8FF; color: #0B5ED7; }
.btn-cta { background: #10BDF2; border: none; border-radius: 10px; color: #fff; font-weight: 800; padding: .8rem 1rem; }
.btn-cta:hover { filter: brightness(.95); }
/* ===== Commercial Extended additions (hero, slider, calculator) ===== */
.utc-cm-hero{ position:relative; padding:5rem 0 6rem; color:#fff; background: radial-gradient(1200px 600px at 80% -50%, #0a3cff20 0%, rgba(0,0,0,0) 70%), linear-gradient(97.83deg, #101F9D 6.22%, #11111C 87.68%); }
.utc-cm-hero .text-cyan { color: #25D0FF; }
.section-triangle{ width:0; height:0; margin:16px auto 0; border-left:26px solid transparent; border-right:26px solid transparent; border-top:26px solid #101F9D; opacity:.7; }
.cm-section-7 .card{ border-radius:12px; border:1px solid #E6ECFA; }
.cm-section-7 .card img{ object-fit:cover; }
/* Slider */
.slider-wrap{ position:relative; overflow:hidden; }
.slider-track{ display:flex; transition:transform .6s ease; }
.slide{ min-width:100%; }
.slider-dots{ display:flex; gap:.4rem; justify-content:center; margin-top:.75rem; }
.slider-dot{ width:8px; height:8px; border-radius:50%; background:#DDE3F7; }
.slider-dot.active{ background:#101F9D; }
/* Calculator */
.calc-card{ border:1px solid #E6ECFA; border-radius:12px; }
.calc-hint{ font-size:.85rem; color:#5D627C; }
.result-box{ background:#F8FBFF; border:1px dashed #CFE1FF; border-radius:12px; padding:1rem; }
.result-box .big{ font-size:1.4rem; font-weight:800; }

/* Hero slider */
.hero-slide{
  min-height:560px;            /* adjust height if you like */
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex; align-items:center;
  color:#fff;
}
.hero-slide::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
}
.hero-slide .content{ position:relative; z-index:1; }
.hero-logo{ max-width:260px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.carousel-indicators [data-bs-target]{ width:10px; height:10px; border-radius:50%; }



/* ==== On Grid Solar page styles ==== */
.on-grid-hero{background:linear-gradient(97.83deg,#101F9D 6.22%,#11111C 87.68%); color:#fff; padding:4rem 0 5rem;}
.on-grid-card{border:1px solid #E6ECFA; border-radius:12px; background:#fff;}
.on-grid-step{background:#F7FAFF; border-radius:12px; padding:1rem; border:1px dashed #CFE1FF;}
.on-grid-icon{width:56px;height:56px;object-fit:contain;}
.table-on-grid td,.table-on-grid th{border:1px solid #000; font-size:.95rem; padding:.5rem .75rem; vertical-align:middle;}
.badge-cap{background:#EAF2FF;color:#0B5ED7;font-weight:700}


.sidebar-sticky { position: sticky; top: 90px; }
.consult-card .btn { height: 46px; }


/* === UTC blue heading theme (global) === */
:root { --utc-primary: #0d6efd; }

/* Headings inside our standard content blocks/cards */
.on-grid-card h1, .on-grid-card h2, .on-grid-card h3, .on-grid-card h4, .on-grid-card h5,
.on-grid-card.alt h1, .on-grid-card.alt h2, .on-grid-card.alt h3, .on-grid-card.alt h4, .on-grid-card.alt h5,
.card.consult-card .card-title {
  color: var(--utc-primary);
}

/* Optional: section titles if you use a wrapper like <div class="section-title"> */
.section-title, .section-title > h1, .section-title > h2, .section-title > h3,
.section-title > h4, .section-title > h5 {
  color: var(--utc-primary);
}

/* Utility class — add to any single heading if it isn't in a standard block */
.utc-blue { color: var(--utc-primary) !important; }



/* ==== Solar switch timeline (dark navy) ==== */
:root{ --utc-primary:#0d6efd; }

.timeline-section{
  background: radial-gradient(1200px 800px at 20% 10%, #142368 0%, #0c1647 60%, #0b1342 100%);
  color:#fff;
}
.timeline-section .lead{color:#bfc9e8}

.timeline-title{color:#fff}
.timeline-grid{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:36px;
}
.timeline-grid::before{
  content:"";
  position:absolute; inset:0 auto 0 50%;
  transform:translateX(-50%);
  width:4px; border-radius:2px;
  background:linear-gradient(180deg,#cfe1ff 0,#76a7ff 40%,#3d74ff 100%);
  opacity:.9;
}

.tl-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  position:relative;
}
.tl-dot{
  position:absolute; left:50%; transform:translate(-50%,0);
  top:32px; width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 6px rgba(61,116,255,.2);
  border:3px solid #2f66ff;
}

.tl-card{
  max-width:560px;
  margin-left:auto; margin-right:0;
}
.tl-card.right{ margin-left:0; margin-right:auto; }

.tl-card h5{ color:#fff; font-weight:700; }
.tl-card p{ color:#c8d3ff; margin-bottom:0; }
.tl-icon{
  width:56px; height:56px; object-fit:contain; margin-bottom:.5rem;
  filter: drop-shadow(0 2px 6px rgba(13,110,253,.25));
}
.tl-cta.btn{
  background:#22c4ff; border:none; color:#0b1342; font-weight:700;
  padding:.55rem 1rem; border-radius:.6rem;
}
.tl-cta.btn:hover{ filter:brightness(1.05); }

/* Mobile */
@media (max-width: 991.98px){
  .tl-row{ grid-template-columns:1fr; }
  .timeline-grid::before{ left:24px; transform:none; }
  .tl-dot{ left:24px; }
  .tl-card, .tl-card.right{ margin:0 0 0 48px; }
}

.tl-icon { width:56px; height:56px; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx){
  .tl-icon[src$=".png"]{
    content: url("assets/process/consultant@2x.png"); /* set per icon where needed */
  }
}


:root{
  --utc-navy:#0b1745;        /* dark blue background */
  --utc-navy-2:#0f1e58;      /* gradient helper (optional) */
  --panel-border:rgba(255,255,255,.10);
  --panel-bg:rgba(255,255,255,.04);
}

/* whole section background */
.benefits-split{
  background: var(--utc-navy);
  color:#e8eeff;
}

/* the two panels */
.benefits-split .benefit-panel{
  background: var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:14px;
  padding:24px 28px;
}

/* headings & text scale */
.benefits-split .section-heading{
  color:#ffffff;             /* readable on dark blue */
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:.2px;
  margin-bottom:.75rem;
}
@media (min-width: 992px){
  .benefits-split .section-heading{ font-size:1.75rem; }
}

.benefits-split .big-list{ font-size:1.08rem; line-height:1.75; }
.benefits-split .lead-tight{ font-size:1.05rem; line-height:1.65; }

.benefits-split strong{ color:#fff; }

/* compact table look on dark */
.benefit-table{ color:#e8eeff; }
.benefit-table thead th{ color:#afc6ff; font-weight:600; }
.benefit-table td, .benefit-table th{ border-color:var(--panel-border)!important; }


/* Card wrapper for the table on dark sections */
.table-card{
  background:#ffffff;
  border:1px solid rgba(11,23,69,.08);
  border-radius:14px;
  box-shadow:0 6px 22px rgba(0,0,0,.18);
  overflow:hidden;               /* keeps rounded corners on thead */
}

/* Modern table look */
.table-modern thead th{
  background:linear-gradient(180deg,#f6f8ff,#edf2ff);
  color:#1d4fff;                 /* UTC blue */
  font-weight:700;
  letter-spacing:.2px;
  border-bottom:1px solid rgba(11,23,69,.12);
}

.table-modern td,
.table-modern th{
  padding:14px 18px;
  vertical-align:middle;
  color:#122044;                 /* dark text on white */
  border-color:rgba(11,23,69,.08) !important;
}

/* Zebra + hover */
.table-modern tbody tr:nth-child(even){ background:#fafbff; }
.table-modern tbody tr:hover{ background:#f2f6ff; }

/* Nice alignment */
.table-modern th:nth-child(2),
.table-modern td:nth-child(2){ text-align:center; }
.table-modern th:last-child,
.table-modern td:last-child{ text-align:right; }


/* ============ Commercial additions ============ */
:root{
  --utc-deep:#0b1e6d;           /* theme deep blue */
  --utc-deeper:#0a1444;
  --utc-ink:#0a0f2e;
  --utc-cta:#1fd4a8;            /* teal-green CTA */
}

/* Brand blue headings everywhere */
.brand-blue{ color:#1e5fff; }

/* Hero */
.com-hero{
  position:relative;
  min-height:62vh;
  background:linear-gradient(180deg,rgba(10,15,46,.55),rgba(10,15,46,.85)),
             var(--hero) center/cover no-repeat;
  display:flex;
  align-items:center;
  padding:4rem 0;
}
.btn-quote{
  background:var(--utc-cta);
  border:none; color:#001a2d;
  font-weight:700;
  box-shadow:0 8px 20px rgba(31,212,168,.35);
}
.btn-quote:hover{ filter:brightness(.95); }

/* Reviews banner */
.reviews-banner{ background:#f7f9ff; }
.quote-card{
  background:linear-gradient(135deg,var(--utc-deep),var(--utc-ink));
  border:0;
}

/* Feature image tiles */
.section-gap{ padding:64px 0; }
.image-tile{
  position:relative; border-radius:20px; overflow:hidden; min-height:380px;
  background:var(--img) center/cover no-repeat;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
}
.image-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.0) 25%, rgba(0,0,0,.65) 100%);
}
.image-tile .tile-copy{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  color:#fff; padding:24px 22px;
}
.image-tile .tile-copy h5{ font-weight:700; margin-bottom:.25rem; }
.image-tile .tile-copy p{ opacity:.92; margin:0; }

/* Moving stats strip */
.stats-strip{
  background:#00c3ea;
  padding:22px 0; overflow:hidden;
}
.ticker{ position:relative; white-space:nowrap; }
.ticker-track{
  display:inline-flex; gap:48px;
  animation:utcScroll 28s linear infinite;
}
.tick{
  font-weight:700; color:#001a2d; font-size:1.15rem;
  padding:6px 0;
}
@keyframes utcScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}




/* Housing Society hero */
.soc-hero { background: #0f1a52; padding-top: 1.8rem; padding-bottom: 1.8rem; }
.soc-hero-carousel { border-radius: 1rem; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.soc-hero-item {
  min-height: 520px;
  background: radial-gradient(transparent,rgba(0,0,0,.35)), var(--bg) no-repeat center/cover;
  position: relative;
}
.soc-hero-item::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(15,26,82,.65) 0%, rgba(15,26,82,.15) 60%, rgba(15,26,82,0) 100%);
}
.soc-hero-cap{
  position:absolute; left:24px; bottom:24px; right:24px; color:#fff; z-index:2;
}
.soc-hero-stats{list-style:none; padding:0; margin:0; display:flex; gap:18px; flex-wrap:wrap}
.soc-hero-stats li{background:rgba(255,255,255,.1); padding:8px 12px; border-radius:12px; font-weight:500}
.soc-hero-stats .stat{font-weight:800; color:#4cc2ff; margin-right:6px}
.soc-hero-logos{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.soc-hero-logos img{height:28px; filter:brightness(2) saturate(0) contrast(140%); opacity:.9}

.soc-form-card{border-radius: 1rem;}
@media (min-width:992px){
  .soc-form-card{ position: sticky; top: 90px; }
}


/* ===== Full-width benefits banner ===== */
:root{
  --bb-navy: #0b1430;
  --bb-navy-2: #112154;
  --bb-text: #e9f1ff;
  --bb-muted: #a9b7df;
  --bb-border: rgba(255,255,255,.12);
}

.benefits-banner{
  background: radial-gradient(1200px 600px at 8% -10%, var(--bb-navy-2) 0%, var(--bb-navy) 60%);
  color: var(--bb-text);
}

.bb-card{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--bb-border);
  border-radius: 16px;
  padding: 28px 28px 24px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.bb-title{
  font-weight: 800;
  color: #ffffff;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.bb-list{
  padding-left: 1.2rem;
  margin: 0;
  font-size: 1.05rem;
}
.bb-list li{ margin: .5rem 0; }

.bb-lead{ color: var(--bb-muted); }

/* table on dark */
.bb-table{
  color: #fff;
  border-collapse: separate;
  border-spacing: 0;
}
.bb-table th,
.bb-table td{
  padding: .85rem 1rem;
  background: transparent !important;         /* kill bootstrap white cells */
  border: 0;
}
.bb-table thead th{
  color: #cfe0ff;
  font-weight: 700;
  border-bottom: 1px solid var(--bb-border);
}
.bb-table tbody tr + tr td{
  border-top: 1px solid var(--bb-border);
}


/* Keep your current muted/heading colors, but fix the black parts */
.benefits-banner .bb-card .bb-lead strong,
.benefits-banner .bb-card b,
.benefits-banner .bb-card strong { 
  color: #fff !important;
}

/* Ensure table text is white too */
.benefits-banner .bb-card .bb-table th,
.benefits-banner .bb-card .bb-table td {
  color: #fff !important;
}


/* ===== UTC Global Footer ===== */
.footer-utc {
  background: linear-gradient(90deg, #0b1b64 0%, #0d1230 100%);
  color: #fff;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.footer-utc .brand-block img {
  width: 64px; height: 64px; object-fit: contain;
}
.footer-utc .brand-title {
  font-weight: 700; font-size: 1.35rem; line-height: 1;
}
.footer-utc .link-light-80 { color: rgba(255,255,255,.8); }      /* matches Quick Links color */
.footer-utc a { color: rgba(255,255,255,.9); text-decoration: none; }
.footer-utc a:hover { color: #fff; }

.footer-utc .footer-heading {
  font-weight: 700; letter-spacing:.2px; margin-bottom:.75rem;
}
.footer-utc .list-unstyled li + li { margin-top: .35rem; }

.footer-utc .contact a { color: #fff; }
.footer-utc .contact a:hover { opacity:.9; }

.footer-utc .social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.1);
  margin-right:.4rem;
}
.footer-utc .social a:hover { background: rgba(255,255,255,.18); }

.footer-utc .bar {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 1.25rem;
  padding-top: .9rem;
  color: rgba(255,255,255,.7);
  font-size: .9rem;
}

/* make sure footer spacing looks good on small screens */
@media (max-width: 991.98px) {
  .footer-utc .brand-row { row-gap: 1rem; }
}




/* ===== Housing Society — hero + form polish ===== */

/* Center the carousel in its column */
.soc-left {
  min-height: 72vh;                 /* gives room to center */
  display: flex;
  align-items: center;               /* vertical center */
  justify-content: center;           /* horizontal center */
}

/* Keep carousel nicely sized */
.soc-carousel {                      /* attach to the carousel element */
  width: 100%;
  max-width: 780px;                  /* adjust if you want larger/smaller */
  margin: 0 auto;
}
.soc-carousel .carousel-inner,
.soc-carousel .carousel-item {
  border-radius: 16px;               /* rounded but not too round */
  overflow: hidden;
}
.soc-carousel .carousel-item img {
  width: 100%;
  height: 420px;                     /* consistent height */
  object-fit: cover;                 /* crop neatly */
}

/* Card/form: slimmer border and softer radius */
.card.soc-form {
  border: 1px solid rgba(0,0,0,.08); /* SMALL border */
  border-radius: 8px;               /* smaller corners */
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Inputs/selects: light 1px borders & compact height */
.soc-form .form-control,
.soc-form .form-select {
  border: 1px solid #e3e7ef;
  border-radius: 8px;
  height: 44px;                      /* slimmer */
  padding: .55rem .75rem;
}
.soc-form textarea.form-control {
  min-height: 96px;
  height: auto;
}

/* Focus style */
.soc-form .form-control:focus,
.soc-form .form-select:focus {
  border-color: #3b82f6;             /* theme blue */
  box-shadow: 0 0 0 .15rem rgba(59,130,246,.15);
}

/* Buttons same height as inputs */
.soc-form .btn {
  height: 44px;
  border-radius: 10px;
}

/* ===== Commercial hero (full-width image banner) ===== */
.com-hero{
  /* will use the URL passed via the inline CSS variable above */
  position: relative;
  min-height: 56vh;
  padding: 84px 0 96px;
  display: flex;
  align-items: flex-end;
  color: #fff;

  /* background = gradient overlay + your image */
  background-image:
    linear-gradient(180deg, rgba(10,20,40,.55), rgba(10,20,40,.78)),
    var(--hero);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

@media (min-width: 992px){
  .com-hero{ min-height: 64vh; }
}

/* CTA button (optional) */
.btn-quote{
  --bs-btn-bg:#1cc28a;
  --bs-btn-border-color:#1cc28a;
  --bs-btn-hover-bg:#15a973;
  --bs-btn-hover-border-color:#15a973;
  --bs-btn-color:#0b2239;
  font-weight:700;
  border-radius:12px;
  box-shadow:0 14px 30px rgba(28,194,138,.25);
}
:root{
  --utc-blue:#0e1d57;
  --utc-blue-2:#13266f;
  --utc-accent:#2f6bff;
}




/* --- FIX: hero buttons not clickable --- */

/* keep hero sized and content above background */
.hero-slider .carousel,
.hero-slider .carousel-inner,
.hero-slider .carousel-item { min-height: 520px; }
.hero-slider .hero-slide {
  position: relative;
  min-height: 520px;
  background-size: cover;
  background-position: center;
}
.hero-slider .content {
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
}

/* if any overlay/mask exists, make it transparent to clicks */
.hero-slider .overlay,
.hero-slider .mask,
.hero-slider .hero-slide::before,
.hero-slider .carousel-item::before {
  pointer-events: none !important;
}

/* 🔑 most common culprit: 100%-width controls blocking the center */
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {
  width: 12%;                 /* NOT 100% */
  pointer-events: none;       /* don’t eat clicks on the middle content */
  z-index: 6;
}
/* keep just the arrow itself clickable */
.hero-slider .carousel-control-prev .carousel-control-prev-icon,
.hero-slider .carousel-control-next .carousel-control-next-icon {
  pointer-events: auto;
}

/* indicators stay clickable and above */
.hero-slider .carousel-indicators { z-index: 6; }


/* Keep the hero H1 on a single line, scale down a bit on smaller screens */
.hero-slider .content h1.text-nowrap{
  white-space: nowrap;
  line-height: 1.1;
  font-size: clamp(1.4rem, 3.2vw + 1rem, 3rem);
}


/* Navbar sizing & alignment */
.main-nav { min-height: 72px; }

.main-nav .navbar-brand {
  padding: .25rem 0;
}

.main-nav .brand-logo {
  height: 48px;            /* scale the logo consistently */
  width: auto;
  display: block;
}

.main-nav .brand-name {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}

.main-nav .navbar-nav .nav-link {
  padding: .75rem .85rem;
  white-space: nowrap;     /* avoid wrapping on desktop */
}

.main-nav .nav-cta {
  padding: .5rem .9rem;
  line-height: 1;
  white-space: nowrap;     /* keep CTAs single-line */
  border-radius: .5rem;
}

/* Optional: tighter gaps on very wide screens */
@media (min-width: 1200px) {
  .main-nav .navbar-nav { gap: .35rem; }
}

/* On small screens let links wrap normally inside collapse */
@media (max-width: 991.98px) {
  .main-nav .navbar-nav .nav-link { white-space: normal; }
  .main-nav .nav-cta { width: 100%; text-align: center; margin-top: .25rem; }
}


/* Ensure navbar and dropdown appear above hero/headers */
.main-nav { z-index: 1100; }            /* sticky-top is 1020 by default; raise it a bit */
.navbar .dropdown-menu { z-index: 1200; }

/* If any parent container clips the menu, disable it */
header, .ty-hero, .ty-wrap { overflow: visible; }


/* WhatsApp floating button */
.wa-float{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  z-index: 2147483000; /* above carousels/headers */
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px rgba(0,0,0,.22); }
.wa-float svg{ display:block; }
@media (max-width: 575.98px){
  .wa-float{ right: 12px; bottom: 12px; width: 52px; height: 52px; }
  .wa-float svg{ width: 24px; height: 24px; }
}


/* Make big headings fluid & wrap safely inside carousels/heroes */
.hero-resi h1,
.com-hero h1,
.carousel .display-1,
.carousel .display-2,
.carousel .display-3,
.carousel .display-4,
.carousel .display-5,
.carousel .display-6 {
  font-size: clamp(22px, 6vw, 48px);
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin-bottom: .5rem;
}

/* Make sure hero containers don’t cause horizontal scroll */
.on-grid-hero,
.com-hero,
.soc-hero,
.carousel,
.carousel-item {
  overflow: hidden;
}

/* Add safe padding on mobile so text doesn’t hug edges */
@media (max-width: 575.98px){
  .hero-resi .container,
  .com-hero .container,
  .soc-hero .container,
  .carousel .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.carousel-caption{
  left: auto; right: auto; width: 100%;
  padding-left: 16px; padding-right: 16px;
  text-align: left;
}

/* Keep navbar WhatsApp button visible */
.navbar .btn#whatsappCTA{
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
}


/* Force nav CTA buttons (Signup + WhatsApp) to same alignment */
.navbar .nav-item .btn {
  padding: 0.45rem 1rem;   /* uniform height */
  font-weight: 600;        /* consistent bold text */
  border-radius: 0.375rem; /* consistent rounding */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* Ensure equal vertical alignment in navbar */
.navbar .nav-link.btn {
  margin-top: 0;
  margin-bottom: 0;
}

/* Navbar CTA buttons (Signup + WhatsApp) uniform alignment */
.navbar .nav-item .btn {
  padding: 0.45rem 1rem;   /* same vertical height */
  font-weight: 600;
  border-radius: 0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  height: 42px;            /* force same height */
}

/* Keep spacing consistent */
.navbar .nav-link.btn {
  margin-top: 0;
  margin-bottom: 0;
}


/* ===== Mobile navbar polish (≤ lg) ===== */
@media (max-width: 991.98px){

  /* Make menu items stack nicely */
  .navbar .navbar-collapse {
    padding: .5rem 0;
    overflow: visible;          /* prevents clipping */
  }

  /* Full-width, same height CTAs (yellow + green) */
  .navbar .nav-item .btn{
    display: flex;
    width: 100%;
    height: 48px;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: .5rem;
    margin: 6px 0;              /* spacing between the two buttons */
    padding: 0 1rem;            /* consistent touch targets */
  }

  /* Make dropdown menus behave like inline lists on mobile */
  .navbar .dropdown-menu{
    position: static;
    float: none;
    width: 100%;
    margin-top: .25rem;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: none;
  }
  .navbar .dropdown-item{ padding: .6rem 1rem; }
}