:root{
  /* Brand palette inspired by Smartworld (Blue) + Savills (Yellow) */
  --bg:#ffffff;
  --text:#111111;
  --muted:#5e5e5e;

  --brand-black:#0B0B0B;
  --brand-blue:#0A66B2;
  --brand-blue-2:#0C4E8A;
  --brand-yellow:#FFE44D;
  --brand-red:#E21B23; /* use only for small accents */

  --blue-grad: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-2) 100%);
  --yellow-grad: linear-gradient(135deg, #ffdc14 0%, var(--brand-yellow) 65%, #FFD21F 100%);

  --border: rgba(10,102,178,0.18);
  --shadow: 0 18px 48px rgba(0,0,0,0.14);
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.10);
}

@font-face {
  font-family: 'Optima';
  src: url('assets/fonts/OPTIMA.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
    

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Gotham', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

h1,h2,h3,h4,h5,h6,
.section-title,
.hero-title,
.navbar-brand,
.btn,
.btn-rg,
.badge-rg,
.kicker{
  font-family: 'Optima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .2px;
}

h1,h2,h3{
  letter-spacing: .3px;
}
.bg-img {
    margin: 10px 10px;
}
.container-max{max-width:1180px}

/* NAV */
.topbar{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.brand-mark{
  width:34px;
  height:34px;
  border-radius:10px;
  background: var(--blue-grad);
  box-shadow: 0 12px 26px rgba(10,102,178,0.28);
}

.nav-link{color:#1b1b1b}
.nav-link:hover{color:var(--brand-blue)}

/* HERO */
.hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.42) 45%,
    rgba(0,0,0,0.10) 85%
  );
  z-index:1;
}

.hero-bg{
  position:absolute;
  inset:0;
  background:url("assets/img/banner1.webp") center/cover;
}

.hero-inner{position:relative;z-index:2;padding:90px 0 60px}

.hero-panel{
  border-radius:22px;
  background: rgba(27, 27, 27, 0.5);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 26px 70px rgba(0,0,0,0.22);
}

.hero-left{
  padding:48px 44px;
  color:#fff;
}

.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  font-size:14px;
}

.hero-title{
  font-size:clamp(32px,4vw,52px);
  font-weight:850;
  margin:18px 0 12px;
  line-height:1.08;
}

.hero-sub{
  max-width:560px;
  color:rgba(255,255,255,0.86);
}

.pill-list{
  display:grid;
  gap:10px;
  margin-top:14px;
  max-width:520px;
}

.pill{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.92);
}

.pill i{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background: var(--blue-grad);
  color:#fff;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 15%;
    margin-bottom: 0;
    margin-left: 15%;
}

/* LEAD FORM */
.lead-card{
  background:#fff;
  border-radius:20px;
  padding:22px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);
}

.lead-head{
  background: var(--yellow-grad);
  border-radius:16px;
  padding:18px 16px;
  text-align:center;
  border: 1px solid rgba(0,0,0,0.10);
}

.lead-head h5{
  margin:0;
  font-weight:900;
  color:#0b0b0b;
}

.lead-head p{
  margin:6px 0 0;
  color: rgba(0,0,0,0.65);
  font-size:13px;
}

.form-control,.form-select{
  border-radius:14px;
  padding:12px;
  border: 1px solid rgba(0,0,0,0.12);
}

.form-control:focus,.form-select:focus{
  border-color: rgba(10,102,178,0.70);
  box-shadow: 0 0 0 .2rem rgba(10,102,178,0.18);
}

/* CTA BUTTON (Savills Yellow) */
.btn-rg{
  background: var(--blue-grad);
  color:#ffffff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn-rg:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
}

/* SECTIONS */
section{padding:76px 0}

.section-title{
  color: var(--brand-blue);
  font-size:30px;
  font-weight:900;
}

.section-sub{
  color:var(--muted);
  max-width:740px;
}

/* White cards with blue outline like the logo vibe */
.soft-wrap{
  background:#ffffff;
  border-radius:22px;
  padding:26px;
  border:1px solid rgba(10,102,178,0.16);
  box-shadow: var(--shadow-soft);
}

.badge-soft-rg{
  background: rgba(10,102,178,0.10);
  color: #0b0b0b;
  border: 1px solid rgba(10,102,178,0.18);
}

/* PROJECTS */
.proj-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  border:1px solid rgba(0,0,0,0.06);
  height:100%;
}

.proj-img{
  height:210px;
  background-size:cover;
  background-position:center;
  position:relative;
}

.proj-img::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%);
}

.badge-rg{
  position:absolute;
  z-index:2;
  top:14px;
  left:14px;
  background: var(--blue-grad);
  color:#fff;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 22px rgba(10,102,178,0.22);
}

.proj-body{padding:16px}
.proj-title{font-weight:900;margin:0 0 6px}
.proj-meta{color:var(--muted);margin:0 0 12px}
.proj-points{padding-left:18px;margin:0;color:#2e2e2e}

/* AMENITIES */
.amenities-card{
  border-radius:22px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(0,0,0,0.06);
  background:#fff;
}

.amenity-slide{
  height:420px;
  background-size:cover;
  background-position:center;
}

.amenity-caption{
  background: var(--yellow-grad);
  text-align:center;
  padding:14px;
  font-weight:900;
  color:#0b0b0b;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* FOOTER */
footer{
  background: #0b0b0b;
  color:#fff;
  padding:46px 0;
  border-top: 4px solid var(--brand-blue);
}

.fineprint{
  font-size:12.5px;
  color: rgba(255,255,255,0.72);
  line-height:1.55;
}

/* MODAL */
.modal-round{
  border-radius:18px;
  overflow:hidden;
}

.modal-head{
  background: var(--yellow-grad);
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

@media(max-width:991px){
  .hero-left{padding:32px 22px}
  .amenity-slide{height:320px}
}

/* =========================
   RESPONSIVE SYSTEM
   Works for: 320px to 4K
   Paste this at the END of your style.css
========================= */

/* Global spacing + font scaling */
html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; }

section{ padding: clamp(44px, 6vw, 86px) 0; }
.section-title{ font-size: clamp(22px, 2.4vw, 34px); }
.section-sub{ font-size: clamp(14px, 1.15vw, 16px); }

/* Better container behavior on small screens */
.container-max{
  width: 100%;
  padding-left: clamp(14px, 3vw, 20px);
  padding-right: clamp(14px, 3vw, 20px);
}

/* Navbar tap targets */
.navbar .nav-link{
  padding: 10px 12px;
}

/* HERO: ensure no overflow and good stacking */
.hero-inner{ padding-top: 84px; padding-bottom: 48px; }
.hero-panel{ overflow:hidden; }
.hero-left{ padding: clamp(20px, 4vw, 48px) !important; }

.hero-title{
  font-size: clamp(26px, 4.4vw, 54px);
  line-height: 1.10;
}
.hero-sub{
  font-size: clamp(14px, 1.3vw, 16px);
}

/* Pills: keep neat grid */
.pill-list{
  grid-template-columns: 1fr;
}
@media (min-width: 576px){
  .pill-list{
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 992px){
  .pill-list{
    grid-template-columns: 1fr;
  }
}

/* Form sizing and comfortable touch UI */
.lead-card{
  width: 100%;
  max-width: 520px;
}
.form-control, .form-select{
  font-size: 16px; /* prevents iOS zoom */
  min-height: 48px;
}
.btn-rg{
  min-height: 48px;
  font-size: 16px;
}

/* Project cards: consistent heights and better flow */
.proj-img{ height: clamp(180px, 22vw, 240px); }
.proj-body{ padding: 16px; }
.proj-points{ font-size: 14px; }
@media (min-width: 992px){
  .proj-body{ padding: 18px; }
}

/* Amenities: responsive height */
.amenity-slide{
  height: clamp(240px, 38vw, 520px);
}
.amenity-caption{
  font-size: clamp(14px, 1.25vw, 16px);
}

/* Footer: spacing */
footer{
  padding: clamp(34px, 5vw, 54px) 0;
}

/* Modal: full width on phones */
.modal-dialog{
  margin: 12px;
}
@media (min-width: 576px){
  .modal-dialog{
    margin: 1.75rem auto;
  }
}

/* =========================
   BREAKPOINT TUNING
========================= */

/* XS phones (<= 380px) */
@media (max-width: 380px){
  .navbar-brand span.fw-bold{ font-size: 14px; }
  .kicker{ font-size: 12px; padding: 8px 10px; }
  .pill{ padding: 10px 12px; }
  .badge-rg{ font-size: 11px; padding: 5px 10px; }
}

/* Phones (<= 575px) */
@media (max-width: 575.98px){
  .hero-inner{ padding-top: 140px; }
  .hero-left{ text-align: left; }
  .rose-line{ margin-top: 12px; }
  .lead-card{ margin: 12px auto 0; }
}

/* Tablets (576px - 991px) */
@media (min-width: 576px) and (max-width: 991.98px){
  .hero-inner{ padding-top: 84px; }
  .lead-card{ max-width: 560px; }
  .proj-img{ height: 220px; }
}

/* Desktop (>= 992px) */
@media (min-width: 992px){
  .hero-inner{ padding-top: 92px; }
  .lead-card{ max-width: 420px; }
}

/* Large desktop (>= 1200px) */
@media (min-width: 1200px){
  .lead-card{ max-width: 440px; }
  .proj-img{ height: 240px; }
}

/* 2K and above (>= 1600px) */
@media (min-width: 1600px){
  .container-max{ max-width: 1320px; }
  .hero-inner{ padding-top: 150px; padding-bottom: 70px; display: flex; align-items: center; justify-content: center; }
  .proj-img{ height: 260px; }
  .amenity-slide{ height: 560px; }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}


/* =========================
   UPDATE: Savills Red text on Yellow backgrounds
   Paste this at the END of your style.css (overrides only)
========================= */

/* Yellow surfaces should use Savills red text */
.lead-head,
.amenity-caption,
.modal-head{
  color: var(--brand-red) !important;
}

/* Make sure headings and paragraphs inside also turn red */
.lead-head h5,
.lead-head p,
.amenity-caption,
.modal-head .modal-title,
.modal-head .text-secondary,
#modalProjectLine{
  color: var(--brand-red) !important;
}

/* If any small muted text appears inside yellow blocks */
.lead-head .small,
.modal-head .small{
  color: var(--brand-red) !important;
  opacity: 0.95;
}

/* Keep icons (if any) readable inside yellow blocks */
.lead-head i,
.modal-head i{
  color: var(--brand-red) !important;
}

/* Optional: if you ever use yellow badge elsewhere */
.badge-yellow,
.bg-yellow{
  color: var(--brand-red) !important;
}