/* ---- from legacy index.php, lines 95-1136 ---- */
/* ===== HERO BANNER OVERLAY =====
   Now sits BELOW the image slider (not the first thing visitors see), so
   it no longer needs to be a towering full "first impression" block —
   a compact search strip reads cleaner right under a big slider image. */
.image-cover.hero-banner {
  /* Admin-chosen photo/video (Home Page Banner, onlineadmin/hbanner.php) is
     the hero background. The image case sets two CSS custom properties
     inline via PHP below — --cp-hero-bg (desktop/laptop pick) and
     --cp-hero-bg-mobile (its own separate pool, falling back to the same
     image when nothing mobile-specific has been uploaded) — and this rule
     reads --cp-hero-bg by default; the ≤768px media query further down
     just swaps in --cp-hero-bg-mobile instead, so desktop/laptop can never
     be affected by a mobile-only upload. The video case instead renders a
     <video> element as this div's first child, absolutely positioned to
     fill it (see .cp-hero-video-wrap/.cp-hero-video below) — ignores both
     vars entirely. The bright teal-tinted gradient is layered on top via
     ::before rather than folded into this background shorthand, since an
     inline background-image would otherwise need !important to coexist
     with it here. */
  background-image: var(--cp-hero-bg);
  background-size: cover !important;
  background-position: center 35% !important;
  background-repeat: no-repeat !important;
  background-color: #F4F1EA;
  position: relative;
  width: 100% !important;
  padding: 40px 20px 30px !important;
  overflow: hidden;
}
@media (min-width: 769px) {
  .image-cover.hero-banner {
    min-height: 560px !important;
    padding: 60px 20px 40px !important;
    display: flex !important;
    align-items: center !important;
  }
}
.cp-hero-video-wrap { overflow: hidden; }
.cp-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.image-cover.hero-banner::before {
  /* Bright, airy white wash over the photo — top-to-bottom, barely-there
     at the top, brightening the lower half so the white search card reads
     as sitting on the image rather than fighting it. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.40) 100%);
  z-index: 0;
  pointer-events: none;
}
.image-cover.hero-banner > .container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 4px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 17px;
  min-height: 0 !important;
  height: auto !important;
  /* This flex column IS the shared "hero-left-wrapper" — the eyebrow,
     heading, sublinks and search card are all direct children of it, so a
     single margin-left here shifts the whole block together with no risk
     of any one of them drifting off the shared left edge. */
}
/* 1150px matches header.php's own hamburger/desktop-nav breakpoint — the
   hero's "desktop" treatment must switch at the same width the header does,
   otherwise a real laptop window between 1024-1149px shows a hamburger-menu
   header above a full desktop-styled hero: an inconsistent, half-and-half
   layout at exactly the widths that felt broken. */
@media (min-width: 1151px) {
  .image-cover.hero-banner > .container {
    margin-left: 80px !important;
  }
}
/* ===== Hero text block — plain, left-aligned, no card chrome; raw text
   directly on the hero photo (Image 2 reference). Relies on the admin's
   hero photo being bright enough at the top-left for dark-slate text to
   read clearly — see the Home Page Banner tool. ===== */
.cp-hero-textcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 680px;
}
.image-cover.hero-banner .big-header-capt {
  font-size: 48px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #1e293b !important;
  text-shadow: none !important;
  letter-spacing: -0.5px !important;
  line-height: 1.25 !important;
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
  margin-bottom: 2px !important;
}
/* Solid teal — same size/weight as the rest of the heading, just a color
   swap (no smaller font, no gradient). */
.cp-hero-accent {
  font-size: inherit !important;
  font-weight: inherit !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #197003 !important;
  color: #197003 !important;
}
.image-cover.hero-banner .cp-hero-eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase;
  letter-spacing: 2px !important;
  text-shadow: none !important;
  margin-bottom: 4px !important;
  /* All 3 hero lines sit at the exact same box-left (verified via
     getBoundingClientRect) — this small negative margin only corrects the
     letter-spacing + all-caps "Y" making the first glyph visually read as
     indented compared to the heading/sublinks below it. */
  margin-left: -2px !important;
}
.cp-hero-sublinks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}
.cp-hero-sub-divider {
  color: #94a3b8;
}
/* Handwritten script tagline — same 'Caveat' font as the pin-badge overlay
   elsewhere in this hero, just used inline in the text flow here instead
   of floating over the photo. The little curved underline beneath it is a
   plain CSS border (border-radius exaggerates the curve), not an image. */
.image-cover.hero-banner .cp-hero-script {
  position: relative;
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #197003 !important;
  -webkit-text-fill-color: #197003 !important;
  line-height: 1.15 !important;
  margin-top: 8px !important;
  text-shadow: none !important;
}
.image-cover.hero-banner .cp-hero-script::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 8%;
  bottom: -4px;
  height: 8px;
  border-bottom: 2px solid #197003;
  border-radius: 50%;
  opacity: 0.55;
}

/* ===== "Your Property Our Priority" pin badge + handwritten overlay —
   floats over the hero photo, upper-right, desktop only (no room for a
   purely decorative flourish once the hero compacts down for mobile). ===== */
.cp-hero-pin-wrap {
  display: none;
}
@media (min-width: 1151px) {
  .cp-hero-pin-wrap {
    display: block;
    position: absolute;
    top: 26%;
    right: 9%;
    z-index: 3;
  }
  .cp-hero-pin-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #197003;
    color: #fff;
    font-size: 26px;
    box-shadow:none;
    border: 4px solid #fff;
  }
  .cp-hero-handwritten {
    position: absolute;
    top: -58px;
    right: -18px;
    width: max-content;
    font-family: 'Caveat', cursive;
    font-size: 26px;
    font-weight: 700;
    color: #1a2c4e;
    line-height: 1.15;
    text-align: right;
    transform: rotate(-6deg);
    text-shadow: 0 2px 8px rgba(255,255,255,0.6);
  }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  /* A legacy rule in cp-responsive.css (.hero-banner{height:50vh!important})
     forces a fixed viewport-relative height on mobile from way before this
     hero was redesigned. Combined with this element's own overflow:hidden
     (needed to clip the cover-sized background image), any content taller
     than that 50vh — which the hero routinely is now, with the tagline +
     3-tab search card + 3 fields + button — gets silently cut off instead
     of pushing the box taller. .image-cover.hero-banner has higher
     specificity than the legacy .hero-banner selector, so overriding height/
     min-height back to auto here actually wins and lets the box grow to
     fit its real content. */
  .image-cover.hero-banner {
    /* Explicit (shorter) height instead of the old min-height:820px that
       grew to fit the search card too — the card now intentionally spills
       PAST this box's bottom edge (see overflow:visible + the search
       card's own negative margin-top below), half sitting on the photo and
       half on the plain page background beneath it, matching the
       reference. margin-bottom reserves enough room after this box that
       the overflowing card doesn't collide with whatever section comes
       next. */
    height: 460px !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin-bottom: 175px !important;
    padding: 20px 15px 0 15px !important;
    /* Separate mobile-only banner pool (onlineadmin/hbanner.php's "Mobile
       Hero Banner" section) — falls back to the same var as desktop when
       nothing mobile-specific has been uploaded, so this is a no-op until
       then. */
    background-image: var(--cp-hero-bg-mobile) !important;
    background-position: top center !important;
    background-size: cover !important;
  }
  .image-cover.hero-banner > .container {
    padding: 0 !important;
    height: auto !important;
    gap: 8px;
  }
  .image-cover.hero-banner .big-header-capt {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  .image-cover.hero-banner .cp-hero-eyebrow {
    font-size: 11px !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
  }
  .cp-hero-sublinks {
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
  }
  .image-cover.hero-banner .cp-hero-script {
    font-size: 22px !important;
    margin-top: 6px !important;
  }
  /* 3 tab pills (Buy/Rent/Lease) at their desktop padding+font-size don't
     fit one line on a phone-width search card — "Lease" was wrapping to
     its own second row. Shrinking both here is what keeps all 3 on one
     line down to narrow phones. */
  .tab {
    gap: 4px !important;
    padding: 0 0 20px !important;
  }
  .tab button {
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
  }
  /* Guarantee no horizontal overflow on narrow phones — the hero column,
     text card and search card must never exceed the viewport width, and
     their text must wrap instead of forcing the box wider. */
  .image-cover.hero-banner,
  .image-cover.hero-banner > .container,
  .hero-section-inner,
  .cp-hero-textcard,
  .full-search-2.eclip-search {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .cp-hero-textcard .big-header-capt,
  .cp-hero-textcard .cp-hero-eyebrow {
    max-width: 100%;
    white-space: normal !important;
    word-wrap: break-word;
  }
  .cp-hero-sublinks {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .image-cover.hero-banner .big-header-capt br {
    display: none;
  }
}

@media (max-width: 480px) {
  .image-cover.hero-banner {
    padding: 12px 12px 14px !important;
  }
  .image-cover.hero-banner .big-header-capt {
    font-size: 20px !important;
  }
  .image-cover.hero-banner .cp-hero-eyebrow {
    font-size: 10.5px !important;
  }
}

/* ===== SEARCH BOX WRAPPER — a normal-flow child inside the hero
   gradient's own container now, not a separately-positioned section
   pulled up over it, so it always renders fully inside the gradient
   with no floating/overlap on any screen size. ===== */
.full-search-2.eclip-search {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
  padding: 24px !important;
  border: none !important;
  width: 100% !important;
  max-width: 900px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  overflow: hidden;
}
/* 1150px — matches header.php's hamburger/desktop-nav breakpoint (see the
   .container margin-left rule above) so the search card's own widening
   turns on at the same width the rest of the "desktop" hero treatment does.
   margin-left stays 0 here (and in the base rule above) since the search
   card's left edge must match the text column's left edge exactly — both
   are direct children of the same flex column (align-items:flex-start) in
   .container.hero-section-inner. */
/* Laptop range (1151-1439px) — a narrower card than full desktop, so the
   villa photo behind it isn't mostly covered up at these in-between
   widths (the card is a fixed max-width, so at a narrower viewport it
   naturally eats a bigger share of the photo unless scaled down too). */
@media (min-width: 1151px) {
  .full-search-2.eclip-search {
    max-width: 720px !important;
    margin-top: 20px;
    margin-left: 0 !important;
  }
}
@media (min-width: 1440px) {
  .full-search-2.eclip-search {
    max-width: 900px !important;
  }
}
.hero-search-content {
  padding: 0 !important;
}

/* ===== TABS ===== */
.tab {
  overflow: visible !important;
  background: transparent !important;
  padding: 0 0 14px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  border-bottom: none;
}
.tab button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  background: #eef2f5 !important;
  color: #1a2c4e !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 24px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.25s ease;
  float: none !important;
  outline: none;
  letter-spacing: 0.3px;
}
.tab button:hover {
  background: #F4F1EA !important;
  color: #197003 !important;
}
.tab button.active {
  background: #197003 !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  box-shadow:none !important;
}

/* ===== TAB CONTENT ===== */
.tabcontent {
  display: none;
  padding: 0 !important;
  border: none !important;
}

/* ===== SEARCH FIELDS — two-line "title + current value" style (Image 2):
   icon on the left, a bold field title on top and the actual <select>
   (styled as plain muted text, no border of its own) directly below it.
   The select's native dropdown/options still work exactly as before —
   only the visible closed-state chrome changed. ===== */
.cp-field-icon-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F4F1EA;
  border: 1.5px solid #eaecf0;
  border-radius: 10px;
  padding: 9px 14px 9px 40px;
  min-height: 56px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cp-field-icon-row:focus-within {
  background: #fff;
  border-color: #197003;
  box-shadow:none;
}
.cp-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: #197003;
  flex-shrink: 0;
  line-height: 1;
}
.cp-field-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}
.cp-field-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a2c4e;
  line-height: 1.25;
}
.cp-field-value {
  font-size: 12.5px;
  font-weight: 500;
  color: #8a94a6;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The real <select> is stretched to cover the ENTIRE field card (icon +
   title + value), not just the text column it used to sit inside — so the
   browser's native dropdown popup, which anchors to the select's own
   bounding box, opens aligned under the whole visible card instead of
   appearing shifted right/narrow (it was anchoring to just the indented
   text column before). It's fully transparent; .cp-field-value above is
   what actually displays the current selection, kept in sync via the
   change/DOMContentLoaded listener further down. */
.full-search-2 select.cp-field-select {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0;
  height: 100% !important;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  box-shadow: none !important;
  z-index: 2;
}
.full-search-2 select.cp-field-select:focus {
  outline: none !important;
  box-shadow: none !important;
}
.full-search-2 select.cp-field-select option {
  font-weight: 600;
  color: #1a2c4e;
}
/* Keyword field — a real visible <input> (not the transparent-overlay
   <select> trick above), styled to match the same title-on-top /
   value-below look as every other field in this row. */
.cp-keyword-wrap { position: relative; }
.cp-keyword-input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: #1a2c4e;
  line-height: 1.3;
}
.cp-keyword-input::placeholder { color: #8a94a6; font-weight: 500; }
.cp-keyword-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15,23,42,0.14);
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
}
.cp-keyword-suggestion-item {
  padding: 10px 16px;
  font-size: 13.5px;
  color: #1a2c4e;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #f1f5f9;
}
.cp-keyword-suggestion-item:last-child { border-bottom: none; }
.cp-keyword-suggestion-item:hover { background: #F4F1EA; }
.cp-keyword-suggestion-item i { color: #197003; font-size: 12px; flex-shrink: 0; }
.cp-keyword-suggestion-item small { color: #94a3b8; font-weight: 500; margin-left: auto; }

/* ===== SEARCH BUTTON — own full-width row below the 3 fields (Image 2),
   not squeezed in as a 4th inline column. ===== */
.cp-search-btn-col {
  margin-top: 14px;
}
.full-search-2 .btn.search-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #197003 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  height: 50px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  box-shadow:none !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  padding: 0 14px !important;
}
.full-search-2 .btn.search-btn:hover {
  background: #135402 !important;
  box-shadow:none !important;
  transform: translateY(-2px) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  /* position:relative + the negative top margin is what actually pulls
     the card up so it starts while still over the (now shorter, see
     .image-cover.hero-banner above) hero photo and ends past its bottom
     edge, on the plain page background — the "half in, half out" overlap
     from the reference. z-index keeps it above the hero's own ::before
     tint layer. This is the ONE rule that controls this card's position on
     mobile — an earlier, unrelated round already claimed this exact
     selector+breakpoint for its width/padding/radius, so the overlap
     margin lives here too rather than in a second same-breakpoint block
     that would just lose the cascade tie to this later one.
     flex-shrink:0 (both here and on .cp-hero-textcard below) stops these
     from being squashed shorter than their real content now that their
     flex parent (.container, height:auto) sits inside a hero box that
     itself has an explicit (shorter) height instead of auto — without it
     the card was rendering ~60px shorter than its own content needed,
     silently clipping the Search Properties button via this card's own
     overflow:hidden. */
  .full-search-2.eclip-search {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    width: 92% !important;
    max-width: 92% !important;
    margin: 12px auto 0 auto !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }
  .cp-hero-textcard {
    flex-shrink: 0;
  }

  /* Search box grid — stack District/Buy/Property Type/Search input/
     button vertically, full width, with breathing room on the sides so
     nothing runs edge-to-edge or overflows horizontally. */
  .full-search-2 .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .full-search-2 .row > [class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* Bootstrap's default .form-group{margin-bottom:15px} adds up fast once
     District/Buy/Property Type/Search/button are stacked into 5 full-
     width rows instead of one row — tighten it so the stacked card isn't
     taller than it needs to be. */
  .full-search-2 .form-group {
    margin-bottom: 8px !important;
  }
}

/* ===== ACHIEVEMENT STATS — always a single row =====
   header.php has ".row:has(.achievement-wrap){justify-content:center}" but
   never sets display:flex, so justify-content had nothing to act on and
   the 4 stat columns just stacked as plain blocks on every breakpoint.
   Force a real flex row here, at every width, so it's always one line. */
#achievement-stats-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 6px;
}
#achievement-stats-row > [class*="col-"] {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 4px !important;
}
@media (max-width: 576px) {
  #achievement-stats-row .achievement-wrap {
    padding: 1rem 0 0 !important;
  }
  #achievement-stats-row .achievement-content h4 {
    font-size: 18px !important;
    margin-bottom: 2px !important;
  }
  #achievement-stats-row .achievement-content p {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}

/* ===== TOP PROJECTS CARDS ===== */
.fp-section-wrap {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
/* ===== TOP PROJECTS — single-line carousel (same pattern as Our Builders) ===== */
.cp-projects-carousel {
  position: relative;
  padding: 0 46px;
}
.property-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 24px;
  margin: 0 !important;
  width: 100% !important;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.property-row::-webkit-scrollbar { display: none; }
.property-item {
  flex: 0 0 calc(33.33% - 16px) !important;
  max-width: calc(33.33% - 16px) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.cp-projects-arrow {
  position: absolute;
  top: calc(50% - 12px);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #197003;
  font-size: 15px;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s ease;
}
.cp-projects-arrow:hover {
  background: #197003;
  color: #fff;
  box-shadow:none;
}
.cp-projects-prev { left: 0; }
.cp-projects-next { right: 0; }
@media (max-width: 992px) {
  .property-item { flex: 0 0 calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; }
}
@media (max-width: 768px) {
  .cp-projects-carousel { padding: 0 38px; }
  .property-item { flex: 0 0 86% !important; max-width: 86% !important; }
  .cp-projects-arrow { width: 34px; height: 34px; font-size: 13px; }
}
.property-card {
  width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: 0.3s ease !important;
  background: #fff !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.10) !important;
}
.property-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 25px rgba(0,0,0,0.15) !important;
}
.property-card img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
}
.location-property-wrap {
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.10) !important;
  background: #fff !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  position: relative !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  margin-bottom: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
}
.location-property-wrap::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 18px !important;
  padding: 2px !important;
  background: linear-gradient(135deg, #197003, #ff4f6a) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.50 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease !important;
  z-index: 1 !important;
}
.location-property-wrap:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 22px 50px rgba(0,0,0,0.20) !important;
}
.location-property-wrap:hover::before {
  opacity: 1 !important;
}
.location-property-thumb {
  overflow: hidden !important;
  border-radius: 18px 18px 0 0 !important;
  position: relative !important;
}
.location-property-thumb img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}
.location-property-wrap:hover .location-property-thumb img {
  transform: scale(1.08) !important;
}
.location-property-content {
  padding: 16px 18px 14px !important;
  background: #fff !important;
}
.lp-content-flex {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.lp-content-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a2c4e !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.lp-content-flex span {
  color: #197003 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.lp-content-right .lp-property-view {
  background: #197003 !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.25s ease, transform 0.25s ease !important;
  text-decoration: none !important;
}
.lp-content-right .lp-property-view:hover {
  background: #135402 !important;
  transform: scale(1.15) !important;
}
.location-property-content .lp-content-flex {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
}
@media (max-width: 767px) {
  .location-property-thumb img { height: 220px !important; }
}

/* ===== BUILDERS LOGO CARDS — single-line carousel =====
   Was a Bootstrap col-lg-3/col-md-3 grid that wrapped to a second row
   once there were more than 4 builders. Converted to a horizontally
   scrolling flex track (flex-wrap:nowrap) with prev/next arrow buttons
   driving scrollBy(), so it always stays one line regardless of count. */
.cp-builders-carousel {
  position: relative;
  padding: 0 46px;
}
.cp-builders-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cp-builders-track::-webkit-scrollbar { display: none; }
.cp-builder-col {
  display: flex !important;
  flex: 0 0 calc(25% - 15px);
  max-width: calc(25% - 15px);
  margin-bottom: 24px !important;
}
.cp-builders-arrow {
  position: absolute;
  top: calc(50% - 12px);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #197003;
  font-size: 15px;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s ease;
}
.cp-builders-arrow:hover {
  background: #197003;
  color: #fff;
  box-shadow:none;
}
.cp-builders-prev { left: 0; }
.cp-builders-next { right: 0; }
@media (max-width: 767px) {
  .cp-builders-carousel { padding: 0 38px; }
  /* One builder per line — swipe horizontally to the next, like Recently
     Viewed Properties — instead of squeezing two logos side by side into
     half-width cards. 82% leaves a small peek of the next card as a
     "swipe me" affordance, same idea Recently Viewed uses. */
  .cp-builder-col { flex: 0 0 82%; max-width: 82%; }
  .cp-builders-arrow { width: 34px; height: 34px; font-size: 13px; }
}
.middle-icon-features-item.remove {
  background: #F4F1EA !important;
  border-radius: 16px !important;
  padding: 28px 18px 20px !important;
  box-shadow:none !important;
  border: 2.5px solid transparent !important;
  background-clip: padding-box !important;
  outline: 2px solid transparent !important;
  position: relative !important;
  text-align: center !important;
  width: 100% !important;
  height: 190px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.32s ease, box-shadow 0.32s ease !important;
  overflow: hidden !important;
}
/* Always-visible gradient border */
.middle-icon-features-item.remove::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 16px !important;
  padding: 2.5px !important;
  background: linear-gradient(135deg, #C89A3C 0%, #197003 50%, #ff4f6a 100%) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  opacity: 1 !important;
}
.middle-icon-features-item.remove:hover::before {
  opacity: 1 !important;
}
.middle-icon-features-item.remove:hover {
  background: #ffffff !important;
  transform: translateY(-8px) !important;
  box-shadow:none !important;
}
.middle-icon-features-item.remove .icon-features-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100px !important;
  width: 100% !important;
}
.middle-icon-features-item.remove .icon-features-wrap img {
  filter: none !important;
  opacity: 1 !important;
  transition: transform 0.35s ease !important;
  object-fit: contain !important;
  max-width: 140px !important;
  max-height: 85px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 4px !important;
}
.middle-icon-features-item.remove:hover .icon-features-wrap img {
  transform: scale(1.08) !important;
}
.middle-icon-features-item.remove .middle-icon-features-content {
  padding-bottom: 0 !important;
}
.middle-icon-features-item.remove .middle-icon-features-content strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1a2c4e !important;
  display: block !important;
  margin-top: 10px !important;
  line-height: 1.4 !important;
}
.cp-builder-col hr {
  display: none !important;
}
@media (max-width: 767px) {
  .middle-icon-features-item.remove { height: auto !important; min-height: 160px !important; }
}

/* ===== FEATURED PROPERTY 3-COLUMN IMAGE SIZE ===== */
.listing-img-wrapper img {
  width: 100% !important;
  height: 185px !important;
  object-fit: cover !important;
  display: block !important;
}
.property-listing.property-1 {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.09) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  background: #fff !important;
  height: 100% !important;
}
.property-listing.property-1:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.14) !important;
}
@media (max-width: 767px) {
  .listing-img-wrapper img { height: 200px !important; }
}

/* ===== BROWSE MORE PROPERTIES BUTTON ===== */
.btn.btn-theme-light {
  background: linear-gradient(135deg, rgba(25, 112, 3,0.10) 0%, rgba(255,79,106,0.07) 100%) !important;
  border: 2px solid #197003 !important;
  color: #197003 !important;
  padding: 14px 52px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  letter-spacing: 0.4px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn.btn-theme-light:hover, .btn.btn-theme-light:focus {
  background: #197003 !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
  box-shadow:none !important;
}


/* ---- from legacy index.php, lines 1316-1350 ---- */
        .cp-trust-strip{
          background:linear-gradient(135deg,#197003,#135402);
          padding:22px 0;
          border-radius:0 0 48px 48px;
        }
        /* space-between spreads the 3 items edge-to-edge across the full
           bar — left item flush left, right item flush right, middle item
           centered — matching the reference instead of clustering all 3 in
           the middle of the bar. */
        .cp-trust-strip-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;}
        .cp-trust-item{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none!important;padding:0 28px;}
        .cp-trust-item i{font-size:19px;color:#fff;flex-shrink:0;}
        .cp-trust-item span{font-size:14.5px;font-weight:500;color:#fff;white-space:nowrap;}
        .cp-trust-item strong{font-size:19px;font-weight:800;color:#fff;margin-left:6px;}
        /* Vertical pipe divider on the item's own left border — sits correctly
           regardless of how space-between distributes the variable gaps. */
        .cp-trust-item:not(:first-child){border-left:1px solid rgba(255,255,255,0.3);}
        .cp-trust-item:first-child{padding-left:0;}
        .cp-trust-item:last-child{padding-right:0;}
        @media (max-width:768px){
          .cp-trust-strip{padding:16px 0;border-radius:0 0 28px 28px;}
          .cp-trust-strip-inner{flex-wrap:nowrap;}
          .cp-trust-item{padding:0 10px;gap:6px;}
          .cp-trust-item span{font-size:11px;}
          .cp-trust-item strong{font-size:13px;}
          .cp-trust-item i{font-size:16px;}
        }
        @media (max-width:480px){
          .cp-trust-item{padding:0 6px;gap:5px;}
          .cp-trust-item span{font-size:10px;}
          .cp-trust-item strong{font-size:12px;}
          .cp-trust-item i{font-size:14px;}
        }

/* ---- from legacy index.php, lines 1468-1545 ---- */
        .cp-elite{position:relative;padding:36px 0 44px;background:#fff;}
        .cp-elite-head{text-align:center;margin-bottom:28px;}
        .cp-elite-head h2{font-weight:800;font-size:28px;color:#1a2c4e;margin:0 0 6px;}
        .cp-elite-head p{font-style:italic;color:#475569;font-size:16px;margin:0;}
        .cp-elite-stage{position:relative;max-width:1300px;margin:0 auto;padding:0 60px;}
        .cp-elite-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border:none;border-radius:8px;background:#f1f5f9;color:#334155;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
        .cp-elite-nav:hover{background:#197003;color:#fff;}
        .cp-elite-prev{left:0;}
        .cp-elite-next{right:0;}
        .cp-elite-slides{position:relative;min-height:420px;}
        .cp-elite-slide{display:none;text-decoration:none!important;color:inherit;align-items:center;gap:40px;}
        .cp-elite-slide.cp-elite-active{display:flex;animation:cpEliteFade .4s ease;}
        @keyframes cpEliteFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
        .cp-elite-img{flex:0 0 48%;max-width:48%;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(15,23,42,.12);}
        .cp-elite-img img{width:100%!important;height:420px!important;object-fit:cover!important;max-width:none!important;max-height:none!important;display:block!important;border-radius:0!important;filter:none!important;opacity:1!important;}
        .cp-elite-info{flex:1;min-width:0;}
        .cp-elite-info h3{font-weight:300;font-size:34px;color:#334155;margin:0 0 12px;}
        .cp-elite-loc{color:#64748b;font-size:15px;margin-bottom:16px;}
        .cp-elite-loc i{color:#197003;margin-right:4px;}
        .cp-elite-info p{color:#475569;font-size:15px;line-height:1.7;margin:0 0 20px;}
        .cp-elite-stats{display:flex;align-items:center;gap:36px;flex-wrap:wrap;}
        .cp-elite-stats span{color:#334155;font-size:15px;font-weight:600;}
        .cp-elite-stats i{color:#197003;margin-right:6px;}
        .cp-elite-price{color:#197003!important;}
        /* Laptop range (901-1440px): the same fixed 420px image height used
           on wide desktop monitors left noticeably less headroom for the
           text column at these narrower widths, making the whole slide
           look top-heavy/cramped. Shorter image here, same 48%/52% split. */
        @media(min-width:901px) and (max-width:1440px){
          .cp-elite-img img{height:340px!important;}
          .cp-elite-slides{min-height:340px;}
        }
        /* Desktop (anything past the 1440px laptop range above): 1300px
           max-width left a lot of empty side margin unused on a wider
           screen — widen the stage so the section actually takes
           advantage of the available room. Laptop keeps its own 1300px
           (and shorter image) from the block above, untouched. */
        @media(min-width:1441px){
          .cp-elite-stage{max-width:1680px;}
        }
        @media(max-width:900px){
          .cp-elite-stage{padding:0 46px;}
          .cp-elite-slide{flex-direction:column;gap:20px;}
          .cp-elite-img{flex-basis:auto;max-width:100%;width:100%;}
          .cp-elite-img img{height:260px!important;}
          .cp-elite-info h3{font-size:26px;}
          .cp-elite-slides{min-height:auto;}
        }
        /* Phones specifically (not the 769-900px tablet range above, which
           keeps its own 260px image) — shrinks the whole section noticeably
           since a 260px-tall image plus full-length description text took
           up a lot of scroll on a narrow screen. Desktop/laptop (both
           @media blocks above this) are untouched. */
        @media(max-width:768px){
          .cp-elite{padding:22px 0 26px;}
          .cp-elite-head{margin-bottom:16px;}
          .cp-elite-head h2{font-size:21px;}
          .cp-elite-head p{font-size:13px;}
          /* height:auto (not a fixed px height + object-fit:cover like
             desktop) so the image displays at its own natural ratio, full
             width — the whole image is always visible with nothing cropped
             off the top/bottom, instead of a fixed box cutting into
             whatever content sits near its edges (the phone number/website
             line was getting cut off before). */
          .cp-elite-img img{height:auto!important;object-fit:contain!important;}
          .cp-elite-img{background:#f8fafc;}
          .cp-elite-info h3{font-size:18px;margin-bottom:6px;}
          .cp-elite-loc{font-size:12.5px;margin-bottom:8px;}
          .cp-elite-info p{font-size:12.5px;line-height:1.5;margin-bottom:10px;}
          .cp-elite-stats{gap:18px;}
          .cp-elite-stats span{font-size:13px;}
        }
        @media(max-width:520px){
          .cp-elite-stage{padding:0 40px;}
          .cp-elite-nav{width:36px;height:36px;font-size:14px;}
        }

/* ---- from legacy index.php, lines 1578-1679 ---- */
			.cp-type-grid {
			  display: grid;
			  grid-template-columns: repeat(4, 1fr);
			  gap: 20px;
			  margin-top: 30px;
			}
			.cp-type-card {
			  position: relative;
			  background: #fff;
			  border-radius: 16px;
			  padding: 22px 20px;
			  display: flex;
			  align-items: center;
			  gap: 16px;
			  text-decoration: none !important;
			  box-shadow: 0 2px 10px rgba(15,23,42,0.06);
			  border: 1px solid #eef1f5;
			  overflow: hidden;
			  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
			}
			/* Faint category-tinted wash that fades in on hover, behind the content */
			.cp-type-card::before {
			  content: '';
			  position: absolute; inset: 0;
			  background: var(--cp-type-color, #197003);
			  opacity: 0;
			  transition: opacity 0.25s ease;
			}
			.cp-type-card:hover::before { opacity: 0.05; }
			.cp-type-card:hover {
			  transform: translateY(-6px);
			  box-shadow: 0 16px 34px rgba(15,23,42,0.14);
			  border-color: var(--cp-type-color, #19700333);
			  text-decoration: none !important;
			}
			.cp-type-icon {
			  position: relative; z-index: 1;
			  flex: 0 0 58px;
			  width: 58px;
			  height: 58px;
			  border-radius: 16px;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  font-size: 23px;
			  color: #fff;
			  box-shadow:none;
			  transition: transform 0.3s cubic-bezier(.22,1,.36,1);
			}
			.cp-type-card:hover .cp-type-icon { transform: scale(1.1) rotate(-4deg); }
			.cp-type-body { position: relative; z-index: 1; flex: 1; min-width: 0; }
			.cp-type-name {
			  font-size: 16px;
			  font-weight: 800;
			  color: #1a2c4e;
			  margin-bottom: 6px;
			}
			.cp-type-count {
			  display: inline-flex;
			  flex-wrap: wrap;
			  align-items: center;
			  max-width: 100%;
			  gap: 5px;
			  font-size: 12px;
			  font-weight: 700;
			  color: var(--cp-type-color, #197003);
			  background: var(--cp-type-tint, rgba(25, 112, 3,0.1));
			  padding: 3px 10px;
			  border-radius: 999px;
			}
			.cp-type-arrow {
			  position: relative; z-index: 1;
			  flex: 0 0 32px;
			  width: 32px;
			  height: 32px;
			  border-radius: 50%;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  background: #f8fafc;
			  color: #94a3b8;
			  font-size: 12px;
			  transition: all 0.25s ease;
			}
			.cp-type-card:hover .cp-type-arrow {
			  background: var(--cp-type-color, #197003);
			  color: #fff;
			  transform: translateX(3px);
			}
			@media (max-width: 992px) {
			  .cp-type-grid { grid-template-columns: repeat(2, 1fr); }
			}
			@media (max-width: 576px) {
			  .cp-type-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
			  .cp-type-card { padding: 14px 12px; gap: 10px; border-radius: 14px; }
			  .cp-type-icon { flex-basis: 40px; width: 40px; height: 40px; font-size: 16px; border-radius: 12px; }
			  .cp-type-name { font-size: 12.5px; }
			  .cp-type-count { font-size: 10.5px; padding: 3px 8px; white-space: normal; max-width: 100%; }
			  .cp-type-arrow { display: none; }
			}

/* ---- from legacy index.php, lines 1951-1971 ---- */
			.cp-tools-widget{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:28px;margin:0 0 40px;}
			.cp-tw-title{text-align:center;font-family:'Outfit','Poppins',sans-serif;font-weight:800;font-size:19px;color:#1a2c4e;margin:0 0 22px;}
			.cp-tw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;}
			.cp-tw-item{
			    display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
			    padding:20px 12px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;
			    text-decoration:none !important;transition:all .22s ease;
			}
			.cp-tw-item:hover{background:#F4F1EA;border-color:#E8D5A8;transform:translateY(-3px);box-shadow:none;}
			.cp-tw-icon{
			    width:46px;height:46px;border-radius:12px;
			    background:#197003;color:#fff;
			    display:flex;align-items:center;justify-content:center;font-size:19px;
			}
			.cp-tw-item span{font-size:13px;font-weight:700;color:#1a2c4e;line-height:1.4;}
			@media(max-width:768px){
			    .cp-tw-grid{grid-template-columns:repeat(2,1fr);}
			    .cp-tools-widget{padding:22px;}
			}

/* ---- from legacy index.php, lines 2288-2353 ---- */
			.cp-how-grid {
			  display: flex;
			  justify-content: center;
			  align-items: flex-start;
			  gap: 0;
			  margin-top: 34px;
			  position: relative;
			}
			.cp-how-step {
			  flex: 1 1 0;
			  max-width: 220px;
			  text-align: center;
			  position: relative;
			  padding: 0 12px;
			}
			.cp-how-step::after {
			  content: '';
			  position: absolute;
			  top: 34px;
			  left: 50%;
			  width: 100%;
			  height: 2px;
			  background: #e2e8f0;
			  z-index: 0;
			}
			.cp-how-step:last-child::after { display: none; }
			.cp-how-icon {
			  width: 68px;
			  height: 68px;
			  border-radius: 18px;
			  margin: 0 auto 16px;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  font-size: 26px;
			  color: #fff;
			  position: relative;
			  z-index: 1;
			  box-shadow: 0 8px 20px rgba(15,23,42,0.15);
			}
			.cp-how-num {
			  position: absolute;
			  top: -6px;
			  right: -6px;
			  width: 24px;
			  height: 24px;
			  border-radius: 50%;
			  background: #fff;
			  color: #1a2c4e;
			  font-size: 12px;
			  font-weight: 800;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  box-shadow: 0 2px 8px rgba(15,23,42,0.25);
			  z-index: 2;
			}
			.cp-how-title { font-size: 17px; font-weight: 700; color: #1a2c4e; margin-bottom: 6px; }
			.cp-how-desc { font-size: 13px; color: #64748b; }
			@media (max-width: 768px) {
			  .cp-how-grid { flex-wrap: wrap; row-gap: 30px; }
			  .cp-how-step { flex: 0 0 50%; max-width: 50%; }
			  .cp-how-step::after { display: none; }
			}

/* ---- from legacy index.php, lines 2401-2425 ---- */
			.cp-tag-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
			.cp-tag-pill {
			  display: inline-block;
			  padding: 10px 20px;
			  border-radius: 999px;
			  border: 1.5px solid #e2e8f0;
			  background: #fff;
			  color: #1a2c4e;
			  font-size: 13px;
			  font-weight: 600;
			  text-decoration: none !important;
			  transition: all 0.2s ease;
			}
			.cp-tag-pill:hover {
			  background: #197003;
			  border-color: #197003;
			  color: #fff !important;
			  text-decoration: none !important;
			}
			@media (max-width: 576px) {
			  .cp-tag-cloud { gap: 8px; }
			  .cp-tag-pill { padding: 8px 14px; font-size: 12px; }
			}

/* ---- from legacy index.php, lines 2492-2503 ---- */
			.cp-stats-strip{ padding:36px 0 48px; background:none; }
			.cp-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
			.cp-stat-item{ text-align:center; }
			.cp-stat-icon{ width:44px; height:44px; margin:0 auto 8px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; box-shadow:0 6px 14px rgba(15,23,42,0.15); }
			.cp-stat-number{ font-size:22px; font-weight:800; font-family:'Outfit','Poppins',sans-serif; line-height:1.1; margin-bottom:2px; color:#1a2c4e; }
			.cp-stat-label{ font-size:11px; font-weight:600; color:#64748b; letter-spacing:.02em; }
			@media (max-width:768px){
				.cp-stats-grid{ grid-template-columns:repeat(2,1fr); gap:14px 12px; }
				.cp-stat-number{ font-size:19px; }
			}

/* ---- from legacy index.php, lines 2521-2549 ---- */
.cp-govt-banner{
    display:flex;align-items:center;gap:22px;flex-wrap:wrap;
    background:#F4F1EA;border:1.5px solid #F0E4C4;border-radius:16px;
    padding:26px 30px;margin:0 0 40px;
}
.cp-govt-banner-icon{
    width:54px;height:54px;flex-shrink:0;border-radius:14px;
    background:linear-gradient(135deg,#197003,#C89A3C);
    display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;
}
.cp-govt-banner-text{flex:1;min-width:240px;}
.cp-govt-banner-text h3{
    font-family:'Outfit','Poppins',sans-serif;font-weight:700;font-size:17px;color:#1a2c4e;margin:0 0 4px;
}
.cp-govt-banner-text p{font-size:13.5px;color:#475569;line-height:1.6;margin:0;}
.cp-govt-banner-btn{
    display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
    background:#197003;color:#fff !important;text-decoration:none !important;
    font-weight:700;font-size:14px;padding:13px 22px;border-radius:10px;
    transition:all .25s ease;white-space:nowrap;
}
.cp-govt-banner-btn:hover{background:#135402;transform:translateY(-2px);box-shadow:none;color:#fff !important;text-decoration:none !important;}
@media(max-width:700px){
    .cp-govt-banner{padding:22px;text-align:center;justify-content:center;}
    .cp-govt-banner-text{flex-basis:100%;}
    .cp-govt-banner-btn{flex-basis:100%;justify-content:center;}
}