/* =============================================================
   style.css — Zenith Heights Infra Pvt Ltd
   Main stylesheet for the entire website.

   HOW THIS FILE IS ORGANISED
   ---------------------------
   1.  RESET & CSS VARIABLES   — Clears browser defaults; defines colour/font names
   2.  BASE / TYPOGRAPHY        — Body font, smooth scrolling
   3.  TOPBAR                   — Thin info bar at the very top (phone, email, hours)
   4.  NAVBAR (shared)          — Sticky navigation bar used on inner pages (about, contact, etc.)
   5.  PAGE HERO                — Dark banner with breadcrumb used on all inner pages
   6.  SECTION UTILITIES        — Shared headings, tags, buttons used everywhere
   7.  STATS BAND               — Row of big numbers (30+ projects, 10K+ families…)
   8.  TICKER                   — Scrolling news strip below the hero
   9.  FOOTER                   — Bottom of every page (links, social, copyright)
   10. RERA BAND                 — Legal compliance strip at the very bottom
   11. BACK-TO-TOP BUTTON        — Fixed ↑ button that appears after scrolling down
   12. SCROLL REVEAL             — Fade-in animation for elements as you scroll
   13. FORM ELEMENTS             — Input, select, textarea shared styles
   14. RESPONSIVE (shared)       — Mobile/tablet breakpoints for shared components

   --- STYLES EXTRACTED FROM HTML FILES ---
   15. ABOUT PAGE               — Two-column layout, values grid, team section
   16. CONTACT PAGE              — Two-column contact + map layout
   17. DISCLAIMER/TERMS/PRIVACY  — Legal document body text
   18. EVENTS PAGE               — Event cards grid layout
   19. INDEX (HOME) PAGE         — Hero slider, find-home section, projects, pillars, why-us, testimonials, gallery
   20. PROJECTS PAGE             — Project grid, upcoming grid
   21. RESPONSIVE (per-page)     — Mobile overrides for page-specific layouts

   --- INLINE STYLES (ix-*) ---
   22. INLINE EXTRACTED STYLES  — Styles originally written inside HTML style="" attributes,
                                   extracted here so all CSS lives in one file.
   =============================================================*/

/* ─────────────────────────────────────────────────
   1. RESET & CSS VARIABLES
   Remove default browser spacing from all elements.
   CSS variables (--violet, --dark, etc.) let us change
   one value and have it update everywhere on the site.
   ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --violet:#4a7c59;--violet-light:#6fcf8a;--violet-pale:#b8e4c4;
  --dark:#0c1f10;--dark2:#081409;--dark3:#081409;
  --text-muted:rgba(255,255,255,0.55);--text-dim:rgba(255,255,255,0.35);
  --serif:'Playfair Display',Georgia,serif;--sans:'Poppins',sans-serif;
}
/* ─────────────────────────────────────────────────
   2. BASE / TYPOGRAPHY
   Sets the default font (Poppins), dark background,
   white text, and enables smooth anchor scrolling.
   ───────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--dark);color:#fff;overflow-x:hidden}
/* ─────────────────────────────────────────────────
   3. TOPBAR
   The thin strip at the very top of every page showing
   phone number, email, and office hours.
   Hidden on mobile (display:none in responsive section).
   ───────────────────────────────────────────────── */
.topbar{background:#0c1f10;border-bottom:1px solid rgba(74,124,89,0.3);padding:.45rem 3.5rem;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-muted)}
.topbar a{color:var(--text-muted);text-decoration:none}.topbar a:hover{color:var(--violet)}
.topbar-right{display:flex;gap:1.5rem}
/* ─────────────────────────────────────────────────
   4. NAVBAR (shared — inner pages)
   The sticky navigation bar that stays visible at the
   top as you scroll. Contains logo, page links, social
   icons, and the hamburger button for mobile.
   ───────────────────────────────────────────────── */
nav.main-nav{background:#1e3a25;position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 3.5rem;height:80px;box-shadow:0 2px 20px rgba(0,0,0,.15)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-icon{width:52px;height:52px;flex-shrink:0}.logo-icon svg{width:100%;height:100%}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-name{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--violet);letter-spacing:.02em}
.logo-sub{font-size:8.5px;letter-spacing:.14em;color:#888;text-transform:uppercase;font-weight:400}
.nav-center{display:flex;align-items:center}
.nav-center a,.nav-dropdown>span{display:flex;align-items:center;gap:4px;color:#c2dfc9;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:0 1.1rem;height:80px;border-bottom:3px solid transparent;transition:color .2s,border-color .2s;cursor:pointer;white-space:nowrap}
.nav-center a:hover,.nav-dropdown:hover>span,.nav-center a.active{color:var(--violet);border-bottom-color:var(--violet)}
.nav-dropdown{position:relative}
.nav-dropdown .drop-icon{font-size:10px;transition:transform .2s}
.nav-dropdown:hover .drop-icon{transform:rotate(180deg)}
.dropdown-menu{display:none;position:absolute;top:100%;left:0;background:#1e3a25;min-width:220px;box-shadow:0 8px 30px rgba(0,0,0,.12);border-top:3px solid var(--violet);z-index:200}
.nav-dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:.8rem 1.3rem;font-size:13px;color:#b8e4c4;text-decoration:none;font-weight:400;border-left:3px solid transparent;transition:color .2s,background .2s,border-color .2s;border-bottom:none;text-transform:none;height:auto}
.dropdown-menu a:hover{color:var(--violet-light);background:rgba(74,124,89,0.15);border-left-color:var(--violet)}
.nav-social{display:flex;align-items:center;gap:8px}
.social-icon{width:34px;height:34px;border:1.5px solid var(--violet);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--violet);text-decoration:none;transition:background .2s,color .2s}
.social-icon:hover{background:var(--violet);color:#fff}
.social-icon svg{width:15px;height:15px}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.hamburger span{width:24px;height:2px;background:#c2dfc9;display:block}
.mobile-menu{display:none;position:fixed;top:80px;left:0;right:0;background:#1e3a25;z-index:999;padding:1rem 0;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:.9rem 2rem;font-size:14px;color:#c2dfc9;text-decoration:none;border-bottom:1px solid #f0f0f0;font-weight:500}
.mobile-menu a:hover{color:var(--violet-light);background:rgba(74,124,89,0.2)}
/* ─────────────────────────────────────────────────
   5. PAGE HERO
   Dark decorative banner used at the top of all inner
   pages (About, Contact, Projects, etc.).
   Contains the page title, eyebrow label & breadcrumb.
   ───────────────────────────────────────────────── */
.page-hero{padding:120px 5rem 80px;background:linear-gradient(135deg,#0c1f10 0%,#1e3a25 60%,#0c1f10 100%);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-50%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(74,124,89,0.15) 0%,transparent 70%);pointer-events:none}
.page-hero-eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--violet);display:flex;align-items:center;gap:10px;margin-bottom:.8rem}
.page-hero-eyebrow::before{content:'';display:block;width:28px;height:2px;background:var(--violet)}
.page-hero h1{font-family:var(--serif);font-size:clamp(40px,5vw,72px);font-weight:700;line-height:1.1;color:#fff;margin-bottom:1rem}
.page-hero h1 span{color:var(--violet)}
.page-hero p{font-size:15px;color:var(--text-muted);max-width:580px;line-height:1.8;font-weight:300}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);margin-bottom:1.5rem}
.breadcrumb a{color:var(--violet);text-decoration:none}
/* ─────────────────────────────────────────────────
   6. SECTION UTILITIES
   Shared spacing, heading styles, section-tag labels
   (the small uppercase text with a pink line before it),
   and the two reusable button styles (filled & outline).
   ───────────────────────────────────────────────── */
section{padding:90px 5rem}
.section-tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--violet);margin-bottom:.8rem}
.section-tag::before{content:'';display:block;width:28px;height:2px;background:var(--violet)}
.section-title{font-family:var(--serif);font-size:clamp(32px,3.5vw,52px);font-weight:700;line-height:1.1;color:#fff;margin-bottom:.5rem}
.section-title span{color:var(--violet)}
.section-desc{font-size:15px;color:var(--text-muted);line-height:1.8;font-weight:300;max-width:600px}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--violet);color:#fff;text-decoration:none;padding:.9rem 2rem;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:background .25s,transform .2s;border:none;cursor:pointer;font-family:var(--sans)}
.btn-primary:hover{background:var(--violet-light);transform:translateY(-2px)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1.5px solid var(--violet);color:var(--violet);text-decoration:none;padding:.85rem 2rem;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:background .25s,color .25s;cursor:pointer;font-family:var(--sans)}
.btn-outline:hover{background:var(--violet);color:#fff}
/* ─────────────────────────────────────────────────
   7. STATS BAND (shared)
   The row of large bold numbers (30+ projects, 10K+
   families, etc.) used on About and other pages.
   ───────────────────────────────────────────────── */
.stats-band{background:linear-gradient(135deg,#0c1f10 0%,#1e3a25 50%,#0c1f10 100%);padding:60px 5rem;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(74,124,89,0.3);border-bottom:1px solid rgba(74,124,89,0.3)}
.stat-item{text-align:center;padding:1.5rem;border-right:1px solid rgba(255,255,255,.06)}
.stat-item:last-child{border-right:none}
.stat-num{font-family:var(--serif);font-size:56px;font-weight:900;color:var(--violet);line-height:1;display:flex;align-items:flex-start;justify-content:center}
.stat-num sup{font-size:20px;margin-top:10px}
.stat-num .plus{font-size:36px;margin-top:6px}
.stat-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-top:6px}
.stat-sub{font-size:11px;color:rgba(111,207,138,0.5);margin-top:3px}
/* ─────────────────────────────────────────────────
   8. TICKER
   The auto-scrolling marquee strip that shows project
   names and status (e.g. "Grandeur — Now Selling").
   Uses a CSS animation called "tick" to scroll infinitely.
   ───────────────────────────────────────────────── */
.ticker{background:#0c1f10;border-top:1px solid rgba(74,124,89,0.35);border-bottom:1px solid rgba(74,124,89,0.35);padding:.7rem 0;overflow:hidden}
.ticker-track{display:flex;gap:4rem;white-space:nowrap;animation:tick 30s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick-item{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);flex-shrink:0}
.tick-dot{width:5px;height:5px;border-radius:50%;background:var(--violet);flex-shrink:0}
.tick-item strong{color:var(--violet-pale)}
/* ─────────────────────────────────────────────────
   9. FOOTER
   The dark bottom section on every page with logo,
   quick links, project list, contact details, and
   copyright. Social icons appear here too.
   ───────────────────────────────────────────────── */
footer{background:#081409;border-top:1px solid rgba(74,124,89,0.2);padding:60px 5rem 28px}
.footer-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand p{font-size:13px;color:rgba(255,255,255,.3);line-height:1.75;margin-top:1rem;font-weight:300;max-width:250px}
.footer-social{display:flex;gap:8px;margin-top:1.4rem}
.footer-social .social-icon{border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.4)}
.footer-social .social-icon:hover{border-color:var(--violet);background:var(--violet);color:#fff}
.footer-col h5{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:1.2rem}
.footer-col a{display:block;font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;margin-bottom:.65rem;font-weight:300;transition:color .2s,padding-left .2s}
.footer-col a:hover{color:var(--violet);padding-left:4px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.05);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p{font-size:12px;color:rgba(255,255,255,.2)}
.footer-bottom span{color:var(--violet)}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{font-size:12px;color:rgba(255,255,255,.2);text-decoration:none}
.footer-legal a:hover{color:rgba(255,255,255,.5)}
/* ─────────────────────────────────────────────────
   10. RERA BAND
   The tiny legal disclaimer strip at the very bottom
   of every page with RERA registration information.
   ───────────────────────────────────────────────── */
.rera-band{background:#081409;border-top:1px solid rgba(255,255,255,.04);padding:.75rem 5rem;display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;font-size:11px;color:rgba(255,255,255,.2);text-align:center}
.rera-band strong{color:rgba(255,255,255,.35)}
/* ─────────────────────────────────────────────────
   11. BACK-TO-TOP BUTTON
   Fixed pink ↑ button in the bottom-right corner.
   Invisible by default; appears after scrolling 400px
   (controlled by JavaScript in main.js).
   ───────────────────────────────────────────────── */
#btt{position:fixed;bottom:2rem;right:2rem;z-index:900;width:44px;height:44px;background:var(--violet);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s;font-size:18px;color:#fff;border:none}
#btt.visible{opacity:1;transform:translateY(0)}
#btt:hover{background:var(--violet-light)}
/* ─────────────────────────────────────────────────
   12. SCROLL REVEAL ANIMATION
   Any element with class "sr" starts invisible and
   slides up when it enters the viewport.
   JavaScript (main.js) adds the "in" class to trigger it.
   sr-d1/d2/d3/d4 add increasing delays for staggered effect.
   ───────────────────────────────────────────────── */
.sr{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}
.sr.in{opacity:1;transform:translateY(0)}
.sr-d1{transition-delay:.1s}.sr-d2{transition-delay:.2s}.sr-d3{transition-delay:.3s}.sr-d4{transition-delay:.4s}
/* ─────────────────────────────────────────────────
   13. FORM ELEMENTS
   Shared styling for all form inputs, dropdowns,
   text areas, labels, and two-column form rows.
   Used in the enquiry form (index) and contact form.
   ───────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:7px;margin-bottom:1rem}
.form-group label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.form-group input,.form-group select,.form-group textarea{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff;padding:.85rem 1rem;font-size:14px;font-family:var(--sans);outline:none;transition:border-color .2s;resize:none;font-weight:300}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:rgba(111,207,138,0.6)}
.form-group select option{background:#0c1f10;color:#fff}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
/* ─────────────────────────────────────────────────
   14. RESPONSIVE — SHARED COMPONENTS
   Adjusts the shared components (topbar, navbar, footer,
   stats band) for tablet (<1100px) and mobile (<768px).
   On mobile: topbar hides, hamburger button appears.
   ───────────────────────────────────────────────── */
@media(max-width:1100px){section{padding:70px 2.5rem}nav.main-nav{padding:0 2.5rem}.topbar,.rera-band,.page-hero,.stats-band{padding-left:2.5rem;padding-right:2.5rem}footer{padding:50px 2.5rem 24px}.stats-band{grid-template-columns:1fr 1fr}.stat-item:nth-child(2){border-right:none}.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.topbar{display:none}.nav-center,.nav-social{display:none}.hamburger{display:flex}section{padding:60px 1.5rem}nav.main-nav{padding:0 1.5rem}.page-hero{padding:100px 1.5rem 60px}.stats-band{grid-template-columns:1fr 1fr;padding:40px 1.5rem}.form-row{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr}footer{padding:40px 1.5rem 20px}.rera-band{padding:.75rem 1.5rem}.footer-bottom{flex-direction:column;text-align:center}}


/* ═══════════════════════════════════════════════
   STYLES EXTRACTED FROM HTML <style> BLOCKS
   ═══════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   15. ABOUT PAGE — about.html
   Two-column layout for the "Who We Are" section,
   values card grid, and leadership team section.
   ───────────────────────────────────────────────── */
/* ── From about.html ── */
.about-split{padding:90px 5rem}@media(max-width:900px){.about-split{grid-template-columns:1fr!important}}


/* ── From about.html ── */
@media(max-width:768px){.values-grid{grid-template-columns:1fr!important}}


/* ── From about.html ── */
.team-split{padding:90px 5rem}@media(max-width:900px){.team-split{grid-template-columns:1fr!important}}


/* ─────────────────────────────────────────────────
   16. CONTACT PAGE — contact.html
   Two-column layout: contact details on the left,
   enquiry form on the right. Also includes map section.
   ───────────────────────────────────────────────── */
/* ── From contact.html ── */
.contact-split{padding:90px 5rem} @media(max-width:900px){.contact-split{grid-template-columns:1fr!important}}


/* ─────────────────────────────────────────────────
   17. LEGAL PAGES — disclaimer.html / terms.html / privacy.html
   Styles the body text, headings, bullet lists, and
   links inside the Privacy Policy, Terms, and Disclaimer pages.
   ───────────────────────────────────────────────── */
/* ── From disclaimer.html ── */
.legal-body{max-width:860px;margin:0 auto}.legal-body h2{font-family:var(--serif);font-size:24px;color:var(--violet);margin:2rem 0 .8rem;font-weight:700}.legal-body h3{font-size:16px;color:#fff;margin:1.5rem 0 .5rem;font-weight:600}.legal-body p,.legal-body li{font-size:14px;color:var(--text-muted);line-height:1.85;font-weight:300;margin-bottom:.6rem}.legal-body ul{padding-left:1.5rem;margin-bottom:1rem}.legal-body ul li{list-style:disc}


/* ─────────────────────────────────────────────────
   18. EVENTS PAGE — events.html
   Responsive grid that shows event cards in 2-3 columns
   on desktop and stacks to 1 column on mobile.
   ───────────────────────────────────────────────── */
/* ── From events.html ── */
@media(max-width:900px){.ev-grid{grid-template-columns:1fr 1fr!important}} @media(max-width:600px){.ev-grid{grid-template-columns:1fr!important}}


/* ─────────────────────────────────────────────────
   19. HOME PAGE — index.html
   The most complex page. Contains:
   • Full-screen hero slider (3 slides with auto-play)
   • Ticker strip
   • "Find Your Home" intro section with enquiry form
   • Stats band (5 numbers)
   • Residential project cards with filter tabs
   • 3 USP pillars (design, environment, support)
   • About section split
   • "Why Choose Us" section
   • Events preview
   • Gallery strip
   • Testimonials
   ───────────────────────────────────────────────── */
/* ── From index.html ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --violet:#4a7c59;
  --violet-light:#6fcf8a;
  --violet-pale:#b8e4c4;
  --dark:#0c1f10;
  --dark2:#081409;
  --dark3:#050f06;
  --brown:#1a3d20;
  --text-muted:rgba(255,255,255,0.55);
  --text-dim:rgba(255,255,255,0.35);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Poppins',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--dark3);color:#fff;overflow-x:hidden}

/* ═══ TOPBAR ═══ */
.topbar{
  background:#0c1f10;border-bottom:1px solid rgba(74,124,89,0.3);
  padding:0.45rem 3.5rem;display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--text-muted);
}
.topbar a{color:var(--text-muted);text-decoration:none;transition:color .2s}
.topbar a:hover{color:var(--violet)}
.topbar-right{display:flex;gap:1.5rem}

/* ═══ NAVBAR ═══ */
nav{
  background:#1e3a25;position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3.5rem;height:80px;
  box-shadow:0 2px 20px rgba(0,0,0,0.15);
  transition:box-shadow 0.3s;
}
nav.scrolled{box-shadow:0 4px 30px rgba(0,0,0,0.2)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-icon{width:52px;height:52px;position:relative;flex-shrink:0}
.logo-icon svg{width:100%;height:100%}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-name{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--violet);letter-spacing:0.02em}
.logo-sub{font-size:8.5px;letter-spacing:0.14em;color:#888;text-transform:uppercase;font-weight:400}

.nav-center{display:flex;align-items:center;gap:0}
.nav-center a,.nav-dropdown>span{
  display:flex;align-items:center;gap:4px;
  color:#c2dfc9;text-decoration:none;font-size:13px;font-weight:500;
  letter-spacing:0.06em;text-transform:uppercase;padding:0 1.1rem;height:80px;
  border-bottom:3px solid transparent;transition:color 0.2s,border-color 0.2s;
  cursor:pointer;white-space:nowrap;
}
.nav-center a:hover,.nav-dropdown:hover>span{color:var(--violet);border-bottom-color:var(--violet)}
.nav-center a.active{color:var(--violet);border-bottom-color:var(--violet)}

.nav-dropdown{position:relative}
.nav-dropdown .drop-icon{font-size:10px;transition:transform 0.2s}
.nav-dropdown:hover .drop-icon{transform:rotate(180deg)}
.dropdown-menu{
  display:none;position:absolute;top:100%;left:0;
  background:#1e3a25;min-width:220px;
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
  border-top:3px solid var(--violet);z-index:200;
}
.nav-dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{
  display:block;padding:0.8rem 1.3rem;font-size:13px;
  color:#b8e4c4;text-decoration:none;font-weight:400;
  border-left:3px solid transparent;
  transition:color 0.2s,background 0.2s,border-color 0.2s;
  border-bottom:none;text-transform:none;height:auto;letter-spacing:0;
}
.dropdown-menu a:hover{color:var(--violet);background:rgba(74,124,89,0.15);border-left-color:var(--violet)}

.nav-social{display:flex;align-items:center;gap:8px}
.social-icon{
  width:34px;height:34px;border:1.5px solid var(--violet);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--violet);text-decoration:none;font-size:13px;
  transition:background 0.2s,color 0.2s;
}
.social-icon:hover{background:var(--violet);color:#fff}
.social-icon svg{width:15px;height:15px}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.hamburger span{width:24px;height:2px;background:#333;transition:0.3s;display:block}
.mobile-menu{
  display:none;position:fixed;top:80px;left:0;right:0;
  background:#1e3a25;z-index:999;padding:1rem 0;
  box-shadow:0 8px 30px rgba(0,0,0,0.2);
}
.mobile-menu.open{display:block}
.mobile-menu a{
  display:block;padding:0.9rem 2rem;font-size:14px;color:#333;
  text-decoration:none;border-bottom:1px solid #f0f0f0;font-weight:500;
}
.mobile-menu a:hover{color:var(--violet);background:rgba(74,124,89,0.15)}

/* ═══ HERO SLIDER ═══ */
.hero{position:relative;width:100%;height:calc(100vh - 80px);min-height:600px;overflow:hidden}
.slides-wrapper{display:flex;width:100%;height:100%;transition:transform 0.8s cubic-bezier(0.77,0,0.175,1)}
.slide{
  min-width:100%;height:100%;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
}
.slide-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.08);transition:transform 8s ease-out;
}
.slide.active .slide-bg{transform:scale(1)}
.slide-overlay{position:absolute;inset:0}

.slide-1 .slide-bg{background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1800&q=80')}
.slide-1 .slide-overlay{background:linear-gradient(135deg,rgba(15,14,36,0.92) 0%,rgba(26,24,64,0.75) 40%,rgba(67,56,202,0.45) 80%,rgba(129,140,248,0.3) 100%)}
.slide-2 .slide-bg{background-image:url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1800&q=80')}
.slide-2 .slide-overlay{background:linear-gradient(135deg,rgba(15,14,36,0.9) 0%,rgba(26,24,64,0.7) 50%,rgba(67,56,202,0.4) 100%)}
.slide-3 .slide-bg{background-image:url('https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=1800&q=80')}
.slide-3 .slide-overlay{background:linear-gradient(135deg,rgba(15,14,36,0.92) 0%,rgba(26,24,64,0.72) 50%,rgba(74,124,89,0.35) 100%)}

.slide-content{
  position:relative;z-index:2;
  width:100%;max-width:1300px;padding:0 5rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

/* Slide 1 — Anniversary */
.slide-logo-row{display:flex;align-items:center;justify-content:center;gap:4rem;margin-bottom:2rem}
.slide-logo-box{display:flex;flex-direction:column;align-items:center;gap:8px}
.slide-logo-img{display:flex;align-items:center;gap:14px}
.slide-logo-icon{width:68px;height:68px}
.slide-logo-name{font-family:var(--serif);font-size:42px;font-weight:700;color:var(--violet);letter-spacing:0.04em;text-shadow:0 2px 20px rgba(0,0,0,0.5)}
.slide-logo-tagline{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.6);display:flex;align-items:center;gap:10px}
.slide-logo-tagline::before,.slide-logo-tagline::after{content:'';display:block;width:40px;height:1px;background:rgba(255,255,255,0.35)}
.slide-divider{width:1px;height:140px;background:rgba(255,255,255,0.3);flex-shrink:0}
.slide-years-box{text-align:center}
.slide-years-num{font-family:var(--serif);font-size:100px;font-weight:900;color:var(--violet);line-height:0.9;text-shadow:0 4px 30px rgba(67,56,202,0.4)}
.slide-years-of{font-family:var(--serif);font-size:26px;font-style:italic;font-weight:400;color:var(--violet-pale);letter-spacing:0.06em}
.slide-years-label{font-size:20px;font-weight:700;letter-spacing:0.18em;color:#fff;text-transform:uppercase;line-height:1.2;margin-top:4px}
.slide-headline{font-size:clamp(16px,2.5vw,28px);font-weight:600;color:rgba(255,255,255,0.8);letter-spacing:0.14em;text-transform:uppercase;margin-top:1rem}

/* Slide 2 & 3 */
.slide-alt-content{max-width:700px;opacity:0;transform:translateY(30px);transition:opacity 0.8s 0.4s,transform 0.8s 0.4s}
.slide.active .slide-alt-content{opacity:1;transform:translateY(0)}
.slide-alt-eyebrow{font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--violet);margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:12px}
.slide-alt-eyebrow::before,.slide-alt-eyebrow::after{content:'';display:block;width:30px;height:1px;background:var(--violet)}
.slide-alt-title{font-family:var(--serif);font-size:clamp(36px,5vw,72px);font-weight:900;color:#fff;line-height:1.05;margin-bottom:1rem}
.slide-alt-title span{color:var(--violet-pale);font-style:italic}
.slide-alt-sub{font-size:15px;color:rgba(255,255,255,0.65);line-height:1.75;margin-bottom:2rem;font-weight:300}
.slide-btn{display:inline-flex;align-items:center;gap:10px;background:var(--violet);color:#fff;text-decoration:none;padding:0.9rem 2.2rem;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;transition:background 0.25s,transform 0.2s}
.slide-btn:hover{background:var(--violet-light);transform:translateY(-2px)}
.slide-btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,0.4);color:#fff;margin-left:1rem}
.slide-btn-ghost:hover{background:rgba(255,255,255,0.1);border-color:#fff}

.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:52px;height:52px;border:2px solid rgba(255,255,255,0.35);background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;transition:border-color 0.2s,background 0.2s}
.slider-arrow:hover{border-color:var(--violet);background:var(--violet)}
.slider-prev{left:2rem}
.slider-next{right:2rem}
.slider-dots{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:background 0.3s,transform 0.3s}
.dot.active{background:var(--violet);transform:scale(1.3)}
.slide-counter{position:absolute;bottom:2rem;right:3rem;z-index:10;font-size:13px;color:rgba(255,255,255,0.4);letter-spacing:0.1em}
.slide-counter span{color:var(--violet);font-weight:600}

/* ═══ TICKER ═══ */
.ticker{background:#0c1f10;border-top:1px solid rgba(74,124,89,0.35);border-bottom:1px solid rgba(74,124,89,0.35);padding:0.7rem 0;overflow:hidden}
.ticker-track{display:flex;gap:4rem;white-space:nowrap;animation:tick 35s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick-item{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.5);flex-shrink:0}
.tick-dot{width:5px;height:5px;border-radius:50%;background:var(--violet);flex-shrink:0}
.tick-item strong{color:var(--violet-pale)}

/* ═══ FIND YOUR HOME SECTION (like ORO's hero text) ═══ */
#find-home{
  background:radial-gradient(ellipse at 80% 50%,rgba(74,124,89,0.15) 0%,transparent 65%),
             linear-gradient(135deg,#0c1f10 0%,#1e3a25 100%);
  padding:80px 5rem;
  display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;
}
.find-home-text .section-tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--violet);margin-bottom:0.8rem}
.find-home-text .section-tag::before{content:'';display:block;width:28px;height:2px;background:var(--violet)}
.find-home-text h2{font-family:var(--serif);font-size:clamp(32px,3.5vw,52px);font-weight:700;line-height:1.1;color:#fff;margin-bottom:1.2rem}
.find-home-text h2 span{color:var(--violet)}
.find-home-text p{font-size:14.5px;color:var(--text-muted);line-height:1.85;margin-bottom:1.5rem;font-weight:300;max-width:520px}
.find-home-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.fh-stat{padding:1.2rem 1.5rem;background:rgba(67,56,202,0.1);border:1px solid rgba(67,56,202,0.25);border-left:4px solid var(--violet)}
.fh-stat-num{font-family:var(--serif);font-size:36px;font-weight:900;color:var(--violet);line-height:1}
.fh-stat-label{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-top:4px}

/* Enquiry form card */
.enquiry-card{
  background:rgba(255,255,255,0.03);border:1px solid rgba(74,124,89,0.3);
  padding:2.5rem;
}
.enquiry-card-title{font-family:var(--serif);font-size:24px;font-weight:700;color:#fff;margin-bottom:0.4rem}
.enquiry-card-sub{font-size:13px;color:var(--text-dim);margin-bottom:1.8rem;font-weight:300}
.eq-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.eq-group{display:flex;flex-direction:column;gap:6px;margin-bottom:1rem}
.eq-group label{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.35)}
.eq-group input,.eq-group select,.eq-group textarea{
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  color:#fff;padding:0.8rem 1rem;font-size:13.5px;font-family:var(--sans);
  outline:none;transition:border-color 0.2s;font-weight:300;
}
.eq-group input::placeholder{color:rgba(255,255,255,0.25)}
.eq-group input:focus,.eq-group select:focus,.eq-group textarea:focus{border-color:rgba(129,140,248,0.6)}
.eq-group select option{background:#0c1f10;color:#c2dfc9}
.eq-submit{
  width:100%;background:var(--violet);color:#fff;border:none;
  padding:1rem;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  font-weight:600;cursor:pointer;font-family:var(--sans);
  transition:background 0.25s,transform 0.2s;
}
.eq-submit:hover{background:var(--violet-light);transform:translateY(-2px)}
.eq-success{display:none;text-align:center;padding:1.5rem;color:var(--violet);font-family:var(--serif);font-size:18px}

/* ═══ STATS BAND ═══ */
#stats{
  background:linear-gradient(135deg,#0c1f10 0%,#1e3a25 60%,#0c1f10 100%);
  padding:60px 5rem;
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(74,124,89,0.3);
  border-bottom:1px solid rgba(74,124,89,0.3);
}
.stat-item{text-align:center;padding:1.5rem;border-right:1px solid rgba(255,255,255,0.06)}
.stat-item:last-child{border-right:none}
.stat-num{font-family:var(--serif);font-size:52px;font-weight:900;color:var(--violet);line-height:1;display:flex;align-items:flex-start;justify-content:center}
.stat-num sup{font-size:18px;margin-top:10px}
.stat-num .plus{font-size:32px;margin-top:6px;color:var(--violet-light)}
.stat-label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);margin-top:6px}
.stat-sub{font-size:11px;color:rgba(200,121,65,0.5);margin-top:3px}

/* ═══ PROJECTS ═══ */
#projects{background:var(--dark2);padding:90px 5rem}
.section-tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--violet);margin-bottom:0.8rem}
.section-tag::before{content:'';display:block;width:28px;height:2px;background:var(--violet)}
.section-title{font-family:var(--serif);font-size:clamp(32px,3.5vw,52px);font-weight:700;line-height:1.1;color:#fff;margin-bottom:0.5rem}
.section-title span{color:var(--violet)}
.section-desc{font-size:15px;color:var(--text-muted);line-height:1.8;font-weight:300;max-width:600px}

.projects-tabs{display:flex;gap:0;margin-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,0.07)}
.tab-btn{padding:0.7rem 1.6rem;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;cursor:pointer;background:none;border:none;color:var(--text-dim);border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color 0.2s,border-color 0.2s;font-family:var(--sans)}
.tab-btn:hover{color:#fff}
.tab-btn.active{color:var(--violet);border-bottom-color:var(--violet)}

/* ORO-style project cards — horizontal slider */
.projects-slider-wrap{position:relative;overflow:hidden}
.projects-slider{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px}
.project-card{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:3/4;background:var(--dark3)}
.project-card.featured{grid-column:span 2;aspect-ratio:auto;min-height:500px}
.project-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 0.7s ease}
.project-card:hover .project-bg{transform:scale(1.07)}
.project-mask{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,5,0,0.95) 0%,rgba(10,5,0,0.3) 50%,transparent 100%);transition:background 0.4s}
.project-card:hover .project-mask{background:linear-gradient(to top,rgba(15,14,36,0.98) 0%,rgba(15,14,36,0.5) 60%,rgba(15,14,36,0.15) 100%)}
.project-info{position:absolute;bottom:0;left:0;right:0;padding:1.8rem}
.project-tag{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--violet);margin-bottom:0.5rem;display:flex;align-items:center;gap:6px}
.project-tag::before{content:'';display:block;width:16px;height:1px;background:var(--violet)}
.project-name{font-family:var(--serif);font-size:22px;font-weight:700;color:#fff;margin-bottom:0.3rem}
.project-card.featured .project-name{font-size:32px}
.project-loc{font-size:12px;color:rgba(255,255,255,0.45);display:flex;align-items:center;gap:5px}
.project-loc::before{content:'◉';font-size:8px;color:var(--violet)}
.project-rera{font-size:10px;color:rgba(255,255,255,0.3);margin-top:4px}
.project-badge{position:absolute;top:1rem;right:1rem;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;padding:5px 12px;font-weight:600}
.badge-new{background:var(--violet);color:#fff}
.badge-sold{background:rgba(74,124,89,0.2);border:1px solid rgba(67,56,202,0.4);color:var(--violet)}
.badge-ready{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff}
.project-hover-actions{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.8);opacity:0;transition:opacity 0.3s,transform 0.3s;display:flex;flex-direction:column;align-items:center;gap:0.8rem}
.project-card:hover .project-hover-actions{opacity:1;transform:translate(-50%,-50%) scale(1)}
.project-hover-btn{display:inline-block;padding:0.6rem 1.5rem;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;text-decoration:none;background:var(--violet);color:#fff;white-space:nowrap}
.projects-view-all{text-align:center;margin-top:2.5rem}
.btn-outline{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--violet);color:var(--violet);padding:0.8rem 2rem;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;text-decoration:none;transition:background 0.25s,color 0.25s}
.btn-outline:hover{background:var(--violet);color:#fff}

/* ═══ USP 3-PILLARS (like ORO's 3 green feature blocks) ═══ */
#pillars{
  background:#0c1f10;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(74,124,89,0.2);
  border-bottom:1px solid rgba(74,124,89,0.2);
}
.pillar{
  padding:3.5rem 2.5rem;
  border-right:1px solid rgba(255,255,255,0.05);
  text-align:center;position:relative;overflow:hidden;
  transition:background 0.3s;
}
.pillar:last-child{border-right:none}
.pillar:hover{background:rgba(67,56,202,0.07)}
.pillar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform 0.4s}
.pillar:hover::after{transform:scaleX(1)}
.pillar-icon{font-size:36px;margin-bottom:1.2rem;display:block}
.pillar-title{font-family:var(--serif);font-size:20px;font-weight:700;color:#fff;margin-bottom:0.8rem}
.pillar-desc{font-size:13.5px;color:var(--text-dim);line-height:1.75;font-weight:300}

/* ═══ ABOUT ═══ */
#about{
  background:radial-gradient(ellipse at 80% 50%,rgba(67,56,202,0.1) 0%,transparent 60%),var(--dark2);
  display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;align-items:center;
  padding:90px 5rem;
}
.about-images{position:relative;height:520px}
.about-img-main{position:absolute;top:0;left:0;right:60px;bottom:60px;background:url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=800&q=80') center/cover;border:3px solid rgba(74,124,89,0.3)}
.about-img-sub{position:absolute;bottom:0;right:0;width:58%;height:45%;background:url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=600&q=80') center/cover;border:3px solid var(--violet)}
.about-years-badge{position:absolute;top:20px;left:-20px;background:var(--violet);width:90px;height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
.about-years-badge .num{font-family:var(--serif);font-size:38px;font-weight:900;color:#fff;line-height:1}
.about-years-badge .lbl{font-size:8px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.8)}
.about-content .section-title{margin-bottom:1.2rem}
.about-content p{font-size:14.5px;color:var(--text-muted);line-height:1.85;margin-bottom:1rem;font-weight:300}
.about-points{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:2rem 0}
.about-point{display:flex;gap:10px;align-items:flex-start}
.about-point-icon{width:32px;height:32px;background:rgba(74,124,89,0.2);border:1px solid rgba(74,124,89,0.35);display:flex;align-items:center;justify-content:center;color:var(--violet);font-size:14px;flex-shrink:0}
.about-point h5{font-size:13px;font-weight:600;color:#fff;margin-bottom:3px}
.about-point p{font-size:12px;color:var(--text-dim);line-height:1.5;margin:0}
.about-btn{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--violet);color:var(--violet);padding:0.75rem 1.8rem;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;text-decoration:none;transition:background 0.25s,color 0.25s;margin-top:0.5rem}
.about-btn:hover{background:var(--violet);color:#fff}

/* ═══ WHY CHOOSE US ═══ */
#why{background:#0c1f10;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0}
.why-img{background:url('https://images.unsplash.com/photo-1572120360610-d971b9d7767c?w=900&q=80') center/cover;position:relative;min-height:600px}
.why-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent 60%,#0c1f10 100%)}
.why-content{padding:80px 4rem;background:#0c1f10}
.why-content .section-title{margin-bottom:2rem}
.why-list{display:flex;flex-direction:column;gap:1.5rem}
.why-item{display:flex;gap:1.2rem;padding:1.5rem;border-left:3px solid transparent;background:rgba(255,255,255,0.02);transition:border-color 0.3s,background 0.3s}
.why-item:hover{border-left-color:var(--violet);background:rgba(67,56,202,0.07)}
.why-icon{width:44px;height:44px;background:rgba(200,121,65,0.12);border:1px solid rgba(74,124,89,0.35);display:flex;align-items:center;justify-content:center;color:var(--violet);font-size:18px;flex-shrink:0}
.why-item h4{font-size:15px;font-weight:600;color:#fff;margin-bottom:4px}
.why-item p{font-size:13px;color:var(--text-dim);line-height:1.65;font-weight:300}

/* ═══ EVENTS ═══ */
#events{background:var(--dark2);padding:90px 5rem}
.events-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;margin-top:3rem}
.event-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);overflow:hidden;transition:border-color 0.3s}
.event-card:hover{border-color:rgba(74,124,89,0.35)}
.event-img{height:200px;background-size:cover;background-position:center;position:relative}
.event-date{position:absolute;top:1rem;left:1rem;background:var(--violet);padding:0.5rem 0.8rem;text-align:center}
.event-date .day{font-family:var(--serif);font-size:28px;font-weight:900;color:#fff;line-height:1}
.event-date .mon{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.85)}
.event-body{padding:1.5rem}
.event-tag{font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--violet);margin-bottom:0.5rem}
.event-title{font-family:var(--serif);font-size:18px;font-weight:700;color:#fff;margin-bottom:0.5rem;line-height:1.3}
.event-meta{font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:6px}
.event-meta::before{content:'◎';font-size:10px;color:var(--violet)}

/* ═══ TESTIMONIALS ═══ */
#testimonials{background:linear-gradient(135deg,#100800 0%,#0c1f10 50%,#100800 100%);padding:90px 5rem}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.testi-card{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-top:3px solid var(--violet);padding:2rem;transition:background 0.3s}
.testi-card:hover{background:rgba(67,56,202,0.07)}
.testi-stars{color:var(--violet);font-size:14px;letter-spacing:3px;margin-bottom:1rem}
.testi-quote{font-family:var(--serif);font-size:16px;font-style:italic;font-weight:400;color:rgba(255,255,255,0.8);line-height:1.7;margin-bottom:1.5rem;position:relative;padding-top:1rem}
.testi-quote::before{content:'\201C';font-size:50px;color:var(--violet);line-height:0;position:absolute;top:0;left:-5px;opacity:0.6}
.testi-author{display:flex;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,0.06);padding-top:1.2rem}
.author-av{width:46px;height:46px;border-radius:50%;background:var(--violet);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px;font-weight:700;color:#fff;flex-shrink:0}
.author-name{font-size:14px;font-weight:600;color:#fff}
.author-info{font-size:12px;color:var(--text-dim);margin-top:2px}

/* ═══ GALLERY BAND ═══ */
#gallery{padding:0;overflow:hidden}
.gallery-strip{display:flex;height:280px}
.gallery-item{flex:1;background-size:cover;background-position:center;transition:flex 0.5s ease}
.gallery-item:hover{flex:2.5}
.gallery-item:nth-child(1){background-image:url('https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=600&q=80')}
.gallery-item:nth-child(2){background-image:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=600&q=80')}
.gallery-item:nth-child(3){background-image:url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80')}
.gallery-item:nth-child(4){background-image:url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&q=80')}
.gallery-item:nth-child(5){background-image:url('https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?w=600&q=80')}

/* ═══ FOOTER ═══ */
footer{background:#081409;border-top:1px solid rgba(74,124,89,0.2);padding:60px 5rem 28px}
.footer-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand .logo-name{font-size:22px}
.footer-brand>p{font-size:13px;color:rgba(255,255,255,0.3);line-height:1.75;margin-top:1rem;font-weight:300;max-width:250px}
.footer-social{display:flex;gap:8px;margin-top:1.4rem}
.footer-social .social-icon{border-color:rgba(255,255,255,0.15);color:rgba(255,255,255,0.4)}
.footer-social .social-icon:hover{border-color:var(--violet);background:var(--violet);color:#fff}
.footer-col h5{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:1.2rem}
.footer-col a{display:block;font-size:13px;color:rgba(255,255,255,0.45);text-decoration:none;margin-bottom:0.65rem;font-weight:300;transition:color 0.2s,padding-left 0.2s}
.footer-col a:hover{color:var(--violet);padding-left:4px}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.05);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p{font-size:12px;color:rgba(255,255,255,0.2)}
.footer-bottom span{color:var(--violet)}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{font-size:12px;color:rgba(255,255,255,0.2);text-decoration:none}
.footer-legal a:hover{color:rgba(255,255,255,0.5)}

/* ═══ RERA BAND ═══ */
.rera-band{background:#080400;border-top:1px solid rgba(255,255,255,0.04);padding:0.75rem 5rem;display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;font-size:11px;color:rgba(255,255,255,0.2);text-align:center}
.rera-band strong{color:rgba(255,255,255,0.35)}

/* ═══ BACK TO TOP ═══ */
#btt{position:fixed;bottom:2rem;right:2rem;z-index:900;width:44px;height:44px;background:var(--violet);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(20px);transition:opacity 0.3s,transform 0.3s;font-size:18px;color:#fff;border:none}
#btt.visible{opacity:1;transform:translateY(0)}
#btt:hover{background:var(--violet-light)}

/* ═══ SCROLL REVEAL ═══ */
.sr{opacity:0;transform:translateY(28px);transition:opacity 0.7s,transform 0.7s}
.sr.in{opacity:1;transform:translateY(0)}
.sr-d1{transition-delay:0.1s}.sr-d2{transition-delay:0.2s}.sr-d3{transition-delay:0.3s}.sr-d4{transition-delay:0.4s}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1100px){
  nav{padding:0 2rem}
  .topbar,.rera-band{padding-left:2rem;padding-right:2rem}
  footer{padding:50px 2rem 24px}
  #find-home,#about{grid-template-columns:1fr;gap:3rem;padding:70px 2.5rem}
  .about-images{height:400px}
  #why{grid-template-columns:1fr}
  .why-img{min-height:350px}
  .projects-slider{grid-template-columns:1fr 1fr}
  .project-card.featured{grid-column:span 2;min-height:380px}
  .testimonials-grid{grid-template-columns:1fr 1fr}
  .events-grid{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  #stats{grid-template-columns:1fr 1fr 1fr;padding:50px 2rem}
  .stat-item:nth-child(3){border-right:none}
  #pillars{grid-template-columns:1fr}
  #projects,#events,#testimonials{padding:70px 2.5rem}
}
@media(max-width:768px){
  .topbar{display:none}
  .nav-center,.nav-social{display:none}
  .hamburger{display:flex}
  .slide-logo-row{flex-direction:column;gap:1.5rem}
  .slide-divider{width:80px;height:1px}
  .slide-years-num{font-size:72px}
  .projects-slider{grid-template-columns:1fr}
  .project-card.featured{grid-column:span 1}
  .testimonials-grid{grid-template-columns:1fr}
  .events-grid{grid-template-columns:1fr}
  .gallery-strip{height:180px}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .eq-row{grid-template-columns:1fr}
  .why-content{padding:50px 1.5rem}
  .rera-band{padding:0.75rem 1.5rem}
  footer{padding:40px 1.5rem 20px}
  #stats{grid-template-columns:1fr 1fr;padding:40px 1.5rem}
  #find-home,#about,#projects,#events,#testimonials{padding:60px 1.5rem}
}


/* ── From privacy.html ── */
.legal-body{max-width:860px;margin:0 auto}.legal-body h2{font-family:var(--serif);font-size:24px;color:var(--violet);margin:2rem 0 .8rem;font-weight:700}.legal-body h3{font-size:16px;color:#fff;margin:1.5rem 0 .5rem;font-weight:600}.legal-body p,.legal-body li{font-size:14px;color:var(--text-muted);line-height:1.85;font-weight:300;margin-bottom:.6rem}.legal-body ul{padding-left:1.5rem;margin-bottom:1rem}.legal-body ul li{list-style:disc}


/* ─────────────────────────────────────────────────
   20. PROJECTS PAGE — projects.html
   Grids for Ongoing, Upcoming, Completed, and Commercial
   project listings. Stack to fewer columns on smaller screens.
   ───────────────────────────────────────────────── */
/* ── From projects.html ── */
@media(max-width:900px){.proj-grid{grid-template-columns:1fr 1fr!important}} @media(max-width:600px){.proj-grid{grid-template-columns:1fr!important}}


/* ── From projects.html ── */
@media(max-width:768px){.up-grid{grid-template-columns:1fr!important}}


/* ── From terms.html ── */
.legal-body{max-width:860px;margin:0 auto}.legal-body h2{font-family:var(--serif);font-size:24px;color:var(--violet);margin:2rem 0 .8rem;font-weight:700}.legal-body h3{font-size:16px;color:#fff;margin:1.5rem 0 .5rem;font-weight:600}.legal-body p,.legal-body li{font-size:14px;color:var(--text-muted);line-height:1.85;font-weight:300;margin-bottom:.6rem}.legal-body ul{padding-left:1.5rem;margin-bottom:1rem}.legal-body ul li{list-style:disc}



/* ─────────────────────────────────────────────────
   22. INLINE EXTRACTED STYLES (ix-* classes)
   These styles were originally written as inline style=""
   attributes on individual HTML elements. They have been
   extracted here so all CSS is centralised.
   The "ix-" prefix + random ID acts like a unique label
   for each element's visual styling.
   You can search for any "ix-XXXXXX" code in the HTML
   files to see exactly which element it applies to.
   ───────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════
   STYLES EXTRACTED FROM INLINE style="" ATTRIBUTES
   ═══════════════════════════════════════════════ */

.ix-7531643 { background:var(--dark2);display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center }

.ix-4e47688 { position:relative;height:480px }

.ix-3af107a { position:absolute;top:0;left:0;right:60px;bottom:60px;background:url(https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=800&q=80) center/cover;border:3px solid rgba(74,124,89,0.3) }

.ix-b2ad60e { position:absolute;bottom:0;right:0;width:55%;height:44%;background:url(https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=600&q=80) center/cover;border:3px solid var(--violet) }

.ix-2c29318 { position:absolute;top:20px;left:-20px;background:var(--violet);width:90px;height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2 }

.ix-fdcf33b { font-family:var(--serif);font-size:38px;font-weight:900;color:#fff;line-height:1 }

.ix-8ddd576 { font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85) }

.ix-508da09 { font-size:15px;color:var(--text-muted);line-height:1.85;margin:1rem 0;font-weight:300 }

.ix-c6a80ad { font-size:15px;color:var(--text-muted);line-height:1.85;margin-bottom:1.5rem;font-weight:300 }

.ix-6b32fa5 { display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.5rem }

.ix-b4d98d6 { border-left:2px solid var(--violet);padding-left:1rem }

.ix-aae2f8f { font-family:var(--serif);font-size:17px;color:#fff;margin-bottom:4px }

.ix-71bb74f { font-size:12px;color:var(--text-dim);font-weight:300 }

.ix-429854a { background:var(--dark3) }

.ix-7bbad5f { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem }

.ix-51cb594 { background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-top:3px solid var(--violet);padding:2rem }

.ix-5a794f7 { font-size:32px;margin-bottom:1rem }

.ix-5b42c7c { font-family:var(--serif);font-size:22px;color:#fff;margin-bottom:.7rem }

.ix-7f18be1 { font-size:13.5px;color:var(--text-dim);line-height:1.75;font-weight:300 }

.ix-f5adc13 { background:#0c1f10;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center }

.ix-8e70260 { font-size:14.5px;color:var(--text-muted);line-height:1.8;margin-bottom:2rem;font-weight:300 }

.ix-a705152 { display:flex;flex-direction:column;gap:1.2rem }

.ix-8a7443f { display:flex;align-items:center;gap:1rem;padding:1.2rem;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06) }

.ix-43a8a3d { width:56px;height:56px;border-radius:50%;background:var(--violet);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;font-weight:700;color:#fff;flex-shrink:0 }

.ix-431de42 { font-size:15px;font-weight:600;color:#fff }

.ix-2f5096c { font-size:12px;color:var(--text-dim);margin-top:2px }

.ix-0ca82da { width:56px;height:56px;border-radius:50%;background:rgba(200,121,65,.3);border:1.5px solid var(--violet);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;font-weight:700;color:var(--violet);flex-shrink:0 }

.ix-698f539 { background:url(https://images.unsplash.com/photo-1560179707-f14e90ef3623?w=800&q=80) center/cover;height:500px;border:3px solid rgba(74,124,89,0.3) }

.ix-aee0f2c { width:44px;height:44px }

.ix-29ee208 { color:#555 }

.ix-a4d1745 { background:var(--dark2);display:grid;grid-template-columns:1fr 1fr;gap:4rem }

.ix-d8a53c1 { font-size:clamp(28px,3vw,40px) }

.ix-5e1488f { display:flex;flex-direction:column;gap:1.4rem }

.ix-4e87a07 { display:flex;gap:14px;align-items:flex-start }

.ix-e1f48fa { width:44px;height:44px;background:rgba(200,121,65,.1);border:1px solid rgba(200,121,65,.3);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0 }

.ix-7b2a58e { font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:3px }

.ix-cb5bb23 { font-size:14px;color:rgba(255,255,255,.75);font-weight:300;line-height:1.6 }

.ix-fe53fe7 { font-size:14px;color:rgba(255,255,255,.75);font-weight:300 }

.ix-67e505c { color:rgba(255,255,255,.75);text-decoration:none }

.ix-17a7336 { color:var(--violet);text-decoration:none }

.ix-a286b42 { margin-top:2rem;padding:1.5rem;background:rgba(200,121,65,.06);border:1px solid rgba(74,124,89,0.3) }

.ix-f8a7eb2 { font-family:var(--serif);font-size:18px;color:#fff;margin-bottom:.5rem }

.ix-9ed0e7a { font-size:13px;color:var(--text-dim);line-height:1.7;font-weight:300 }

.ix-6ef3e7c { background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);padding:2.5rem }

.ix-fb8002e { font-family:var(--serif);font-size:26px;font-weight:700;color:#fff;margin-bottom:.4rem }

.ix-91f8c94 { font-size:13px;color:var(--text-dim);margin-bottom:2rem;font-weight:300 }

.ix-d6167dc { width:100%;justify-content:center }

.ix-e8d43ce { display:none;text-align:center;padding:2rem;color:var(--violet);font-family:var(--serif);font-size:20px }

.ix-7a0bfb9 { background:var(--dark3);padding:0 }

.ix-ae6035d { width:100%;height:420px;background:url(https://images.unsplash.com/photo-1524661135-423995f22d0b?w=1400&q=80) center/cover;position:relative;display:flex;align-items:center;justify-content:center }

.ix-bd10e62 { position:absolute;inset:0;background:rgba(10,5,0,.55) }

.ix-59a9d30 { position:relative;z-index:2;text-align:center }

.ix-72a3b04 { font-size:14px;color:var(--violet);letter-spacing:.2em;text-transform:uppercase;margin-bottom:.8rem }

.ix-905fe73 { font-family:var(--serif);font-size:32px;color:#fff;font-weight:700;margin-bottom:.5rem }

.ix-6a70ad9 { font-size:14px;color:rgba(255,255,255,.6) }

.ix-a21829e { margin-top:1.5rem;display:inline-flex }

.ix-4194e26 { background:var(--dark2) }

.ix-50514c5 { color:var(--violet) }

.ix-0206175 { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem }

.ix-6ea9366 { background:var(--dark3);border:1px solid rgba(255,255,255,.06);overflow:hidden;transition:border-color .3s }

.ix-de0ced9 { height:210px;background:url(https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=700&q=80) center/cover;position:relative }

.ix-4cdea63 { position:absolute;top:1rem;left:1rem;background:var(--violet);padding:.5rem .8rem;text-align:center }

.ix-500f1af { font-family:var(--serif);font-size:28px;font-weight:900;color:#fff;line-height:1 }

.ix-ff1dcf9 { font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85) }

.ix-81d2615 { position:absolute;top:1rem;right:1rem;background:var(--violet);color:#fff;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px }

.ix-48e8b93 { padding:1.5rem }

.ix-c06e7da { font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:.4rem }

.ix-1a4baa3 { font-family:var(--serif);font-size:20px;font-weight:700;color:#fff;margin-bottom:.5rem }

.ix-9eebdb3 { font-size:13px;color:var(--text-dim);line-height:1.65;font-weight:300;margin-bottom:1rem }

.ix-3283085 { display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem }

.ix-338b4f8 { font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:6px }

.ix-a73f4da { background:var(--dark3);border:1px solid rgba(255,255,255,.06);overflow:hidden }

.ix-0d0206f { height:210px;background:url(https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=700&q=80) center/cover;position:relative }

.ix-acac8ae { font-size:12px;color:var(--text-dim) }

.ix-23000ba { height:210px;background:url(https://images.unsplash.com/photo-1486325212027-8081e485255e?w=700&q=80) center/cover;position:relative }

.ix-266f525 { background:var(--dark2);border:1px solid rgba(255,255,255,.06);overflow:hidden }

.ix-8447c37 { height:180px;background:url(https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=600&q=80) center/cover;position:relative }

.ix-b63720f { position:absolute;inset:0;background:rgba(10,5,0,.4) }

.ix-9d9cfe5 { position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px }

.ix-c05beb8 { padding:1.2rem }

.ix-31b58e1 { font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:.3rem }

.ix-8cc48cd { font-family:var(--serif);font-size:18px;font-weight:700;color:#fff;margin-bottom:.4rem }

.ix-fc74926 { font-size:12.5px;color:var(--text-dim);line-height:1.6;font-weight:300 }

.ix-aef6f2d { height:180px;background:url(https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=600&q=80) center/cover;position:relative }

.ix-f10a4db { height:180px;background:url(https://images.unsplash.com/photo-1505373877841-8d25f7d46678?w=600&q=80) center/cover;position:relative }

.ix-a5d13d7 { background:var(--dark2);text-align:center }

.ix-9b54a37 { justify-content:center }

.ix-13076d9 { text-align:center }

.ix-c3c7762 { margin:0 auto 2rem;text-align:center }

.ix-5a745d7 { max-width:500px;margin:0 auto }

.ix-53896af { margin-top:0 }

.ix-df2a69f { margin-bottom:2rem }

.ix-1ad93a2 { background-image:url('https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=1200&q=80') }

.ix-45624d0 { background-image:url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=600&q=80') }

.ix-76c175d { background-image:url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80') }

.ix-588ce44 { background-image:url('https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?w=600&q=80') }

.ix-46860c3 { background-image:url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&q=80') }

.ix-57ce1f1 { padding:0 }

.ix-3c9249e { background-image:url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=600&q=80') }

.ix-9a9c395 { background-image:url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600&q=80') }

.ix-a3b5556 { background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=600&q=80') }

.ix-ad6f159 { margin-bottom:2.5rem }

.ix-bd5a7bc { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem }

.ix-86424c8 { height:260px;background:url(https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=700&q=80) center/cover;position:relative }

.ix-1165251 { position:absolute;top:1rem;right:1rem;background:var(--violet);color:#fff;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;font-weight:600 }

.ix-d33fe92 { font-family:var(--serif);font-size:22px;font-weight:700;color:#fff;margin-bottom:.4rem }

.ix-f7597b2 { font-size:13px;color:var(--text-dim);line-height:1.65;font-weight:300;margin-bottom:1.2rem }

.ix-1b174b6 { display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.06) }

.ix-c7e51e5 { font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em }

.ix-ff95873 { font-family:var(--serif);font-size:20px;color:var(--violet);font-weight:700 }

.ix-f6e3d7f { text-align:right }

.ix-b072b94 { font-size:14px;color:#fff;font-weight:500 }

.ix-a466833 { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.2rem }

.ix-e37a28a { font-size:11px;color:var(--text-dim);background:rgba(255,255,255,.04);padding:4px 10px;border:1px solid rgba(255,255,255,.08) }

.ix-7a6021a { height:260px;background:url(https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=700&q=80) center/cover;position:relative }

.ix-2c732a9 { position:absolute;top:1rem;right:1rem;background:rgba(200,121,65,.15);border:1px solid rgba(200,121,65,.4);color:var(--violet);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;font-weight:600 }

.ix-411bb46 { height:260px;background:url(https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=700&q=80) center/cover;position:relative }

.ix-c82a1a0 { display:grid;grid-template-columns:1fr 1fr;gap:2rem }

.ix-f3861a2 { background:var(--dark2);border:1px solid rgba(255,255,255,.06);overflow:hidden;display:flex;gap:0 }

.ix-0e07aac { width:200px;flex-shrink:0;background:url(https://images.unsplash.com/photo-1486325212027-8081e485255e?w=400&q=80) center/cover }

.ix-b07b50d { font-family:var(--serif);font-size:20px;font-weight:700;color:#fff;margin-bottom:.4rem }

.ix-cbb80f2 { font-size:12px;color:rgba(200,121,65,.7);margin-bottom:1rem }

.ix-141f13c { font-size:11px;padding:.6rem 1.4rem }

.ix-b37ec4c { width:200px;flex-shrink:0;background:url(https://images.unsplash.com/photo-1560179707-f14e90ef3623?w=400&q=80) center/cover }

.ix-b545a53 { height:200px;background:url(https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=600&q=80) center/cover;position:relative }

.ix-3e9161f { font-family:var(--serif);font-size:19px;font-weight:700;color:#fff;margin-bottom:.4rem }

.ix-2252531 { height:200px;background:url(https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?w=600&q=80) center/cover;position:relative }

.ix-374bd33 { height:200px;background:url(https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=600&q=80) center/cover;position:relative }

.ix-be4b2e5 { text-align:center;margin-top:2.5rem }

.ix-2045d62 { height:250px;background:url(https://images.unsplash.com/photo-1497366216548-37526070297c?w=700&q=80) center/cover }

.ix-7d37ff2 { height:250px;background:url(https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=700&q=80) center/cover }