/* Below-the-fold styles: contact form, footer, plotting plan, amenities, location map, pricing, why-bihta, about, testimonials, FAQs, modals. Loaded async (non-render-blocking) — see dwarika.html . */ /* ─── LEAD FORM ──────────────────────────────── */ .form-fields { display: flex; flex-direction: column; gap: 11px; margin-bottom: 12px; } .form-fields input, .form-fields select { width: 100%; padding: 13px 38px 13px 15px; background: #fff; border: 1px solid #000; border-radius: 8px; color: #000; font-family: 'Sora', sans-serif; font-size: 16px; outline: none; transition: border-color 0.2s, background 0.2s; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23173A22' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .form-fields input { background-image: none; padding: 13px 15px; } .form-fields input::placeholder { color: rgba(0,0,0,0.40); } .form-fields input:focus, .form-fields select:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(31,122,77,0.12); } .form-fields select option { background: #fff; color: #000; } .form-submit { width: 100%; padding: 14px; background: linear-gradient(135deg, #29A71A, #1E7A13); border: none; border-radius: 50px; color: #fff; font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(41,167,26,0.45), 0 4px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform 0.15s, box-shadow 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; overflow: hidden; } .form-submit::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 55%; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 45%, transparent 100%); pointer-events: none; border-radius: 50px 50px 0 0; } .form-submit > span:first-of-type { position: relative; z-index: 1; } .form-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(41,167,26,0.55), 0 6px 12px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.30); } .form-submit:active { transform: scale(0.97); } .form-note { text-align: center; font-size: 12px; color: #000; margin-top: 9px; } /* ─── VIDEO MODAL ────────────────────────────── */ .video-modal { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(7,16,10,0.93); align-items: center; justify-content: center; padding: 20px; } .video-modal.active { display: flex; } .video-modal-inner { position: relative; width: 100%; max-width: 600px; } .modal-close { position: absolute; top: -38px; right: 0; background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; } .video-iframe-wrap { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 12px; overflow: hidden; } .video-iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* ─── FORM SUCCESS ───────────────────────────── */ .form-success { display: none; text-align: center; padding: 18px 10px; } .success-icon { font-size: 38px; margin-bottom: 10px; } .success-title { font-size: 15px; font-weight: 700; color: #000; margin-bottom: 6px; } .success-msg { font-size: 13px; color: #000; line-height: 1.6; } /* ─── CONTACT SECTION BOX ───────────────────── */ /* Premium-frame styling matches the family used by the preceding Section 02/03/04 boxes (1px gold border, white-to-cream background, soft shadow) — visible at 768px+; stripped down to plain horizontal spacing below 768px where .contact-form-card is the only visible CTA box. See the override further down, right after `.section-block.contact-section`. No decorative pseudo-elements — kept clean like the other premium frames, which have none. */ .contact-section { background: linear-gradient(135deg, #FFFFFF, #FCF6E8); border: 1px solid rgba(176, 125, 20, 0.20); border-radius: 20px; padding: 28px 18px 24px; margin-top: 24px; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(23,58,34,0.10); width: 100%; box-sizing: border-box; } /* ─── CONTACT — ENQUIRY CTA REDESIGN ───────────── .contact-section (above) stays the outer premium frame — same family as Sections 02/03/04. .contact-premium-inner stacks .contact-copy (badge/title/subtitle/divider) above the compact .contact-form-card in a single centred column at 768px+ — see the TABLET+DESKTOP block further down. Below 768px, .contact-copy is hidden and .contact-form-card is the sole visible CTA box (unchanged). ── */ #contact .contact-premium-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; } #contact .section-header { text-align: left; margin-bottom: 16px; } #contact .section-title { font-size: clamp(24px, 6vw, 34px); margin-bottom: 10px; white-space: normal; } #contact .section-sub { font-size: clamp(13.5px, 3.4vw, 15.5px); font-weight: 500; color: rgba(23,58,34,0.82); background: none; border: none; padding: 0; display: block; white-space: normal; line-height: 1.55; } /* Benefit cards */ #contact .contact-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } #contact .contact-benefit-card { display: flex; align-items: center; gap: 10px; min-width: 0; background: linear-gradient(150deg, rgba(255,255,255,0.95), rgba(246,239,223,0.7)); border: 1px solid rgba(31,122,77,0.20); border-radius: 14px; padding: 10px 12px; box-sizing: border-box; } #contact .contact-benefit-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--green-deep, #14512F); background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #EAF3E4 100%); border: 1px solid rgba(31,122,77,0.18); } #contact .contact-benefit-icon svg { width: 17px; height: 17px; } #contact .contact-benefit-text { display: flex; flex-direction: column; min-width: 0; } #contact .contact-benefit-text strong { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: #000; line-height: 1.2; } #contact .contact-benefit-text span { font-size: 11.5px; color: rgba(23,58,34,0.65); font-weight: 500; } /* Divider */ #contact .contact-divider { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; } #contact .contact-divider::before, #contact .contact-divider::after { content: ''; flex: 1; max-width: 120px; height: 1px; background: linear-gradient(90deg, transparent, rgba(176,125,20,0.55)); } #contact .contact-divider::after { background: linear-gradient(90deg, rgba(176,125,20,0.55), transparent); } #contact .contact-divider span { width: 7px; height: 7px; flex-shrink: 0; background: var(--gold); border: 2px solid #FCF8EE; transform: rotate(45deg); } /* Trust row */ #contact .contact-trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-bottom: 20px; } #contact .contact-trust-item { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: rgba(23,58,34,0.85); } #contact .contact-trust-icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--green-deep, #14512F); background: #EEF4E7; } #contact .contact-trust-icon svg { width: 14px; height: 14px; } #contact .contact-watermark { display: block; width: 100%; max-width: 300px; margin: 0 auto; opacity: 0.10; pointer-events: none; user-select: none; } /* Form card */ #contact .contact-form-card { background: linear-gradient(150deg, #FFFFFF 0%, #FCF8EE 100%); border: 1px solid rgba(176,125,20,0.25); border-radius: 20px; box-shadow: 0 8px 24px rgba(23,58,34,0.08); padding: 22px 16px; box-sizing: border-box; } /* In-card mobile-only intro — mirrors .contact-copy's title + Hindi subtitle inside the form card so the CTA reads badge → card → form below 768px. Hidden entirely at 768px+ (see the TABLET+DESKTOP block further down), where the .contact-copy originals are the only visible copy. */ #contact .contact-form-intro { text-align: center; margin-bottom: 18px; } #contact .contact-form-intro .section-title { font-size: 23px; line-height: 1.1 !important; letter-spacing: -0.02em; margin-bottom: 8px; white-space: normal; } /* Force the exact two-line break "Find Your Preferred Plot &" / "Unlock the Current Offer" via two block-level line spans instead of relying on natural wrap (which broke after "Unlock" and produced a third line). Scoped to this specific heading only — white-space:nowrap must not leak onto any other section title. */ #contact .contact-form-intro .section-title .cta-title-line { display: block; white-space: nowrap; } #contact .contact-form-intro .section-title .cta-title-line + .cta-title-line { margin-top: 0.15em; } /* At <=480px the card's inner width (~222px at 320px) is too narrow for "Find Your Preferred Plot &" to stay on one nowrap line at the shared 22px .section-title size — it measures ~267px and would overflow the card. Fluidly step the size down to a 20px floor (never below, per spec) with a matching letter-spacing tightening (in px, not em, so it doesn't compound with the shrinking font-size) only at the narrowest widths, restoring the full 22px/-0.02em as soon as ~375px+ provides enough room. !important + this selector's specificity are required to beat the site-wide ".section-title{22px !important}" <=480px rule. */ @media (max-width: 480px) { #contact .contact-form-intro .section-title { font-size: clamp(20px, 8.36px + 3.64vw, 22px) !important; letter-spacing: clamp(-1.6px, -8.35px + 2.11vw, -0.44px) !important; } } #contact .contact-form-intro .section-sub { font-size: clamp(13px, 3.4vw, 14px); line-height: 1.55; margin: 0 auto; max-width: 30em; } #contact .contact-form-heading { text-align: center; margin-bottom: 16px; } #contact .contact-form-heading h3 { margin: 0; font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: #000; } #contact .contact-form-divider { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; } #contact .contact-form-divider::before, #contact .contact-form-divider::after { content: ''; flex: 1; max-width: 60px; height: 1px; background: rgba(176,125,20,0.4); } #contact .contact-form-divider span { width: 5px; height: 5px; flex-shrink: 0; background: var(--gold); border: 1.5px solid #fff; transform: rotate(45deg); } #contact .contact-field-label { display: block; font-size: 12px; font-weight: 700; color: var(--ink, #173A22); margin-bottom: 8px; letter-spacing: 0.01em; } /* Purchase-intent choice cards */ #contact .contact-choice-group { margin-bottom: 16px; } #contact .contact-choice-row { display: flex; gap: 10px; } #contact .contact-choice { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 12px; cursor: pointer; text-align: center; background: #fff; border: 1.5px solid rgba(31,122,77,0.22); color: rgba(23,58,34,0.75); font-size: 12.5px; font-weight: 600; transition: border-color 0.15s, background 0.15s, color 0.15s; } #contact .contact-choice input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } #contact .contact-choice-icon { color: var(--green, #1F7A4D); } #contact .contact-choice-icon svg { width: 20px; height: 20px; } #contact .contact-choice.is-selected, #contact .contact-choice:has(input:checked) { background: linear-gradient(135deg, #1F7A4D, #14512F); border-color: #14512F; color: #fff; } #contact .contact-choice.is-selected .contact-choice-icon, #contact .contact-choice:has(input:checked) .contact-choice-icon { color: #fff; } #contact .contact-choice input:focus-visible ~ * { outline: 2px solid #14512F; outline-offset: 2px; border-radius: 4px; } /* Plot-size chips */ #contact .contact-size-group { margin-bottom: 16px; } #contact .contact-size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 2vw, 10px); } #contact .contact-size-choice { position: relative; min-width: 0; width: 100%; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 10px clamp(2px, 1.5vw, 14px); border-radius: 999px; text-align: center; cursor: pointer; font-family: 'Sora', sans-serif; font-size: clamp(11px, 3.2vw, 13.5px); font-weight: 700; color: rgba(23,58,34,0.78); background: #fff; border: 1.5px solid rgba(31,122,77,0.22); transition: border-color 0.15s, background 0.15s, color 0.15s; white-space: nowrap; } #contact .contact-size-choice input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } #contact .contact-size-choice.is-selected, #contact .contact-size-choice:has(input:checked) { background: linear-gradient(135deg, var(--gold-light, #D4A017), var(--gold, #B07D14)); border-color: var(--gold, #B07D14); color: #fff; } #contact .contact-size-choice input:focus-visible ~ * { outline: 2px solid var(--gold, #B07D14); outline-offset: 2px; } #contact .contact-field-error { color: #B4231F; font-size: 12px; font-weight: 600; margin: 8px 0 0; } /* ─── INLINE VALIDATION — INVALID STATES ───────── Applied/removed by validateContactForm() in the script below. Outline (not border/padding) marks invalid option groups so no layout shift occurs when the state toggles. */ #contact .contact-field input.field-invalid { border-color: #B4231F !important; background: rgba(180,35,24,0.05) !important; } #contact .contact-field input.field-invalid:focus { border-color: #B4231F !important; box-shadow: 0 0 0 3px rgba(180,35,24,0.16); } #contact .contact-choice-row.group-invalid, #contact .contact-size-grid.group-invalid { outline: 1.5px solid #B4231F; outline-offset: 5px; border-radius: 14px; } #contact .contact-field-label.label-invalid { color: #B4231F; } /* Brief attention shake for the first invalid field/group on submit — restarted via JS (remove class, force reflow, re-add) so repeated invalid submits retrigger it reliably. */ @keyframes fieldShake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(4px); } 75% { transform: translateX(-2px); } 90% { transform: translateX(2px); } } #contact .field-shake { animation: fieldShake 400ms ease-in-out; } @media (prefers-reduced-motion: reduce) { #contact .field-shake { animation: none; } } /* Name / phone / email fields */ #contact .contact-field { position: relative; } #contact .contact-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(23,58,34,0.42); pointer-events: none; display: flex; } #contact .contact-field-icon svg { width: 17px; height: 17px; } #contact .contact-field input { padding-left: 42px !important; min-height: 46px; box-sizing: border-box; } #contact .contact-field--email input { padding-right: 78px !important; } #contact .contact-field-optional { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 9.5px; color: var(--gold, #B07D14); font-weight: 600; background: rgba(176,125,20,0.10); padding: 2px 7px; border-radius: 20px; pointer-events: none; } #contact .contact-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } #contact .form-submit { flex-direction: row; align-items: center; justify-content: center; gap: clamp(4px, 1.2vw, 9px); font-size: clamp(9px, 3.1vw, 17px) !important; padding-left: clamp(6px, 2vw, 14px); padding-right: clamp(6px, 2vw, 14px); } #contact .form-submit-icon { display: flex; align-items: center; flex-shrink: 0; position: relative; z-index: 1; } #contact .form-submit-label { position: relative; z-index: 1; white-space: nowrap; min-width: 0; } #contact .form-submit:focus-visible { outline: 3px solid rgba(31,122,77,0.55); outline-offset: 2px; } #contact .form-submit:disabled { opacity: 0.75; cursor: not-allowed; transform: none; } #contact .form-note { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: normal; line-height: 1.4; } /* Subtitle language swap defaults: - .contact-sub--mobile (Hindi, WhatsApp-first) is the base subtitle, shown below 768px only (in-card intro). - .contact-sub--desktop (Hindi, longer with line break) shown at 768px+ via the @media (min-width: 768px) block below. */ #contact .contact-sub--desktop { display: none; } /* Gate watermark is retired from this layout — stays hidden at every breakpoint (no override anywhere restores it). */ #contact .contact-gate-watermark { display: none; } /* ─── MOBILE CTA MOCKUP — up to 767px ──────────── .contact-copy is hidden entirely below 768px — its badge, title, and Hindi subtitle live inside .contact-form-intro in the card instead (see base rules above), so .contact-form-card is the only visible CTA box and the CTA reads badge → card → form. Nothing at 768px+ is touched — see the TABLET+DESKTOP block further down. */ @media (max-width: 767px) { #contact .contact-copy { display: none; } /* Form heading: flanking gold lines around the h3, diamond stays below */ #contact .contact-form-heading h3 { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 15px; } #contact .contact-form-heading h3::before, #contact .contact-form-heading h3::after { content: ''; flex: 1; max-width: 60px; height: 1px; background: linear-gradient(90deg, transparent, rgba(176,125,20,0.5)); } #contact .contact-form-heading h3::after { background: linear-gradient(90deg, rgba(176,125,20,0.5), transparent); } #contact .contact-form-heading .contact-form-divider::before, #contact .contact-form-heading .contact-form-divider::after { display: none; } } /* ─── TABLET + DESKTOP CTA — CENTRED PREMIUM LAYOUT — 768px+ ───── Replaces the old split-screen arrangement. .contact-copy (badge, title, Hindi subtitle, one divider) sits centred inside the outer premium frame, above a compact centred .contact-form-card, matching the approved reference. Shared structure/visibility rules live here; breakpoint-specific sizing (frame width/padding, heading size, card padding) lives in the TABLET and DESKTOP blocks below. Below 768px, .contact-copy stays hidden and .contact-form-card remains the sole visible CTA box (see the MOBILE block above, unchanged). */ @media (min-width: 768px) { #contact .contact-premium-inner { display: flex; flex-direction: column; gap: 28px; } /* In-card intro is mobile-only; .contact-copy is the single source of the badge/title/subtitle at 768px+. */ #contact .contact-form-intro { display: none; } /* .contact-copy shows only its header (badge/title/subtitle) and the one decorative divider — benefit cards, trust row, and both watermarks are hidden to match the reference's compact layout. */ #contact .contact-copy { text-align: center; } #contact .contact-copy .section-header { text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; } #contact .contact-benefit-grid, #contact .contact-trust-row, #contact .contact-watermark { display: none; } #contact .contact-copy .contact-divider { margin: 4px 0 0; } /* Language swap: hide the short mobile-form Hindi line, show the longer desktop-form Hindi subtitle */ #contact .contact-sub--mobile { display: none; } #contact .contact-sub--desktop { display: block; color: rgba(23,58,34,0.82); line-height: 1.6; margin-bottom: 0; } /* Compact centred form card — never stretches across the frame */ #contact .contact-form-card { width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; } /* "Tell us your requirement" — secondary heading, flanking gold lines */ #contact .contact-form-heading { margin-bottom: 18px; } #contact .contact-form-heading h3 { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 18px; } #contact .contact-form-heading h3::before, #contact .contact-form-heading h3::after { content: ''; flex: 1; max-width: 80px; height: 1px; background: linear-gradient(90deg, transparent, rgba(176,125,20,0.5)); } #contact .contact-form-heading h3::after { background: linear-gradient(90deg, rgba(176,125,20,0.5), transparent); } #contact .contact-form-heading .contact-form-divider::before, #contact .contact-form-heading .contact-form-divider::after { display: none; } /* Softer field borders to match the premium-frame visual language */ #contact .contact-field input { border-color: rgba(23,58,34,0.14); background: #FAFAF7; } #contact .contact-field input:focus { border-color: var(--green); background: #fff; } } /* ─── TABLET — 768px to 1023px ──────────────────── Outer frame matches the Section 02/03/04 tablet sizing exactly. */ @media (min-width: 768px) and (max-width: 1023px) { .section-block.contact-section { width: calc(100% - 40px); margin-left: auto; margin-right: auto; border-radius: 26px; padding: 32px 28px var(--section-pad-b-tablet); } #contact .contact-copy .section-title { font-size: clamp(34px, 4.5vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 12px; } #contact .contact-sub--desktop { font-size: 14.5px; } /* In-card badge sizing (only visible .section-tag at this breakpoint) */ #contact .contact-copy .section-tag { font-size: 12px; padding: 5px 18px; } #contact .contact-form-card { padding: 26px; } } /* ─── DESKTOP — 1024px and above ────────────────── Same available container width as the preceding premium frames — .contact-section already inherits `width: 100%; box-sizing: border-box` from the base rule above, and the shared 1440px+ block further down caps it at max-width: 1120px alongside the other premium frames. */ @media (min-width: 1024px) { .section-block.contact-section { padding: 40px 44px var(--section-pad-b-desktop); } #contact .contact-copy .section-title { font-size: clamp(36px, 2.6vw, 40px); font-weight: 700; font-family: 'Playfair Display', serif; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 14px; } #contact .contact-sub--desktop { font-size: 15.5px; } /* In-card badge sizing */ #contact .contact-copy .section-tag { font-size: 12px; padding: 6px 18px; } #contact .contact-form-card { padding: 30px; } } /* "Final Step" CTA badge — high-contrast red, overriding the shared gold .section-tag styling for both badge instances (in-card intro below 768px, contact-copy at 768px+). Placed outside any media query and after the tablet/desktop sizing overrides above so it wins at every breakpoint regardless of viewport width. */ #contact .contact-form-intro .section-tag, #contact .contact-copy .section-tag { background: linear-gradient(135deg, #C62828 0%, #9F1D17 100%); color: #FFFFFF; border-color: #861812; box-shadow: 0 4px 12px rgba(180, 35, 24, 0.28); } /* ─── FOOTER ─────────────────────────────────── */ .footer { background: linear-gradient(180deg, #15391F 0%, #0E2716 100%); border-top: 3px solid var(--gold); padding: 32px 18px 20px; margin-top: 20px; position: relative; overflow: hidden; color: #E9E0C8; } .footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; justify-content: center; } .footer-logo { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--gold-light); box-shadow: 0 0 14px rgba(212,160,23,0.3); } .footer-brand-text { display: flex; flex-direction: column; } .footer-brand-text strong { font-size: 20px; font-weight: 700; color: #FFFFFF; font-family: 'Cormorant Garamond', serif; display: flex; align-items: center; gap: 4px; } .footer-brand-text strong::after { content:''; display: inline-block; width: 20px; height: 28px; flex-shrink: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("/images/dwarika-feather-transparent.webp"); mix-blend-mode: normal; filter: brightness(1.12) saturate(1.15) drop-shadow(0 0 2px rgba(212,160,23,0.35)); } .footer-brand-text span { font-size: 11px; color: var(--gold-light); } .footer-divider { height: 1px; background: rgba(233,224,200,0.14); margin: 20px 0; } .footer-nav-title, .footer-social-title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 12px; text-align: center; } .footer-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 4px; } .footer-nav a { color: #D6E2CC; text-decoration: none; font-size: 13px; font-weight: 500; padding: 6px 8px; border-radius: 6px; text-align: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); transition: color 0.2s, background 0.2s; white-space: nowrap; } .footer-nav a:hover { color: var(--gold-light); background: rgba(212,160,23,0.12); } .footer-nav a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; } .footer-contact { display: flex; flex-direction: column; gap: 10px; } .footer-contact-item { display: flex; align-items: flex-start; gap: 12px; text-decoration: none; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px 14px; transition: border-color 0.2s; } .footer-contact-item:hover { border-color: var(--gold-light); } .footer-contact-icon { font-size: 18px; flex-shrink: 0; line-height: 1.3; } .footer-contact-item div { display: flex; flex-direction: column; gap: 2px; } .footer-contact-label { font-size: 13px; color: var(--gold-light); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .footer-contact-item strong { font-size: 13px; color: #F1EAD7; font-weight: 500; } .footer-social { display: flex; justify-content: center; gap: 14px; } .social-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; transition: transform 0.15s, box-shadow 0.2s; border: none; } .social-btn svg { width: 20px; height: 20px; } .social-btn:active { transform: scale(0.97); } .social-btn.facebook { background: #1877F2; } .social-btn.instagram { background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 75%, #515BD4 100%); } .social-btn.youtube { background: #FF0000; } .social-btn.linkedin { background: #0A66C2; } .social-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.3); } .footer-bottom { text-align: center; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; } .footer-copy { font-size: 13px; color: #C9D6BF; line-height: 1.5; } .footer-bottom-links { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: #C9D6BF; } .footer-bottom-links a { color: var(--gold-light); text-decoration: none; transition: color 0.2s; } .footer-bottom-links a:hover { color: #fff; } .footer-credit { font-size: 13px; font-weight: 500; color: #C9D6BF; margin-top: 4px; } .footer-credit a { color: var(--gold-light); text-decoration: none; font-weight: 700; border-bottom: 1px solid rgba(212,160,23,0.45); padding-bottom: 1px; transition: color 0.2s, border-color 0.2s; } .footer-credit a:hover { color: #fff; border-color: #fff; } .page-end-pad { height: 90px; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: var(--green); border-radius: 3px; } /* ─── NEW SECTIONS SHARED ───────────────────── */ .section-block { padding: 36px 0 8px; border-top: var(--section-divider); margin-top: 12px; } /* `.section-block`'s generic border-top (above) would otherwise override just the top edge of `.contact-section`'s uniform 1px gold border with the faint --section-divider colour, since both are single-class rules of equal specificity. Two-class selector guarantees the full border stays consistent on all four sides at 768px+ (stripped to `none` below 768px by the override further down). */ .section-block.contact-section { border-top: 1px solid rgba(176, 125, 20, 0.20); } /* Below 768px, .contact-form-card is the only visible CTA box — strip the outer premium-frame appearance (background/border/radius/shadow/ padding) entirely and keep only enough horizontal spacing so the card doesn't touch the viewport edges. Higher specificity (two classes) than the plain `.contact-section` and `.section-block` rules above guarantees this wins regardless of source order. 768px+ restores the frame — see the TABLET and DESKTOP blocks further up. */ @media (max-width: 767px) { .section-block.contact-section { background: none; border: none; border-radius: 0; box-shadow: none; width: 100%; margin-left: 0; margin-right: 0; padding: 0 14px; } } .section-header { text-align: center; margin-bottom: 24px; } .section-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); background: rgba(176,125,20,0.10); border: 1px solid rgba(176,125,20,0.30); padding: 4px 14px; border-radius: 100px; display: inline-block; margin-bottom: 12px; font-family: 'Cinzel', serif; } .section-title { font-family: 'Playfair Display', serif; font-size: 23px; font-weight: 900; line-height: 1.3; color: #000; margin-bottom: 8px; } .title-gold { color: var(--gold); } .section-sub { font-size: 15px; color: #000; line-height: 1.65; } .section-header::after { content:''; display: block; width: 160px; height: 50px; margin: 14px auto 0; background-repeat: no-repeat, no-repeat, no-repeat; background-position: center center, left center, right center; background-size: auto 100%, calc(50% - 26px) 1.5px, calc(50% - 26px) 1.5px; background-image: url("/images/dwarika-1-5ce1c05980.webp"), linear-gradient(90deg, transparent, rgba(176,125,20,0.55) 60%, rgba(176,125,20,0.7)), linear-gradient(90deg, rgba(176,125,20,0.7), rgba(176,125,20,0.55) 40%, transparent); } #contact .section-header::after { display: none; } #contact .section-header { margin-bottom: 14px; } #contact .section-title { font-size: 32px; color: var(--green-deep, #14512F); } #contact .section-sub { font-size: 17px; font-weight: 700; } /* ─── PLOTTING PLAN ZOOM ─────────────────────── */ .plot-hint { text-align: center; font-size: 11px; color: #000; margin-bottom: 10px; font-weight: 600; letter-spacing: 0.02em; } .plot-img-wrap { border-radius: 12px; overflow: hidden; border: 1px solid #000; box-shadow: 0 10px 30px rgba(23,58,34,0.16); position: relative; cursor: zoom-in; height: 220px; } .plot-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .plot-zoom-badge { position: absolute; bottom: 10px; right: 10px; background: rgba(20,55,35,0.85); backdrop-filter: blur(6px); border: 1px solid var(--green-bright); color: #EAF7EE; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 100px; pointer-events: none; animation: badgePulse 2.5s ease-in-out infinite; } @keyframes badgePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } } .plot-modal { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(7,16,10,0.97); flex-direction: column; } .plot-modal.active { display: flex; } .plot-modal-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(14,39,22,0.96); border-bottom: 1px solid rgba(212,160,23,0.25); flex-shrink: 0; } .plot-modal-title { font-size: 12px; font-weight: 600; color: #F1EAD7; } .plot-modal-close { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-size: 16px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } .plot-modal-hint { text-align: center; font-size: 10.5px; color: var(--gold-light); padding: 6px 16px; flex-shrink: 0; background: rgba(212,160,23,0.08); } .plot-modal-body { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; } .plot-modal-body img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; transition: transform 0.05s linear; user-select: none; pointer-events: none; } /* ─── AMENITIES ──────────────────────────────── */ .amenities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .amenity-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; transition: box-shadow 0.2s, transform 0.15s; } .amenity-media { position: relative; flex-shrink: 0; } .amenity-card img { width: 100%; height: 130px; object-fit: cover; flex-shrink: 0; display: block; } /* ─── PREMIUM SECTION FRAMES (Why Bihta / About-Testi-FAQ) ── */ .why-bihta-frame, .white-frame { position: relative; border-radius: 20px; border: 1px solid rgba(176, 125, 20, 0.20); box-shadow: 0 10px 30px rgba(23,58,34,0.10); width: 100%; box-sizing: border-box; } .why-bihta-inner, .white-frame-inner { border-radius: 18px; padding: 24px 16px var(--section-pad-b-desktop); position: relative; overflow: hidden; background: linear-gradient(160deg, #FFFFFF 0%, #FCF7EC 60%, #FBF4E4 100%); } .why-bihta-inner::before { content:''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(176,125,20,0.12) 0%, transparent 70%); pointer-events: none; } .why-bihta-inner::after { content:''; position: absolute; bottom: -40px; left: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(31,122,77,0.1) 0%, transparent 70%); pointer-events: none; } .reasons-list { display: flex; flex-direction: column; gap: 10px; } .reason-card { display: flex; gap: 14px; align-items: flex-start; background: rgba(176,125,20,0.06); border: 1px solid rgba(176,125,20,0.20); border-left: 3px solid var(--gold-light); border-radius: 10px; padding: 14px 14px 14px 16px; transition: border-color 0.2s, background 0.2s, transform 0.15s; position: relative; overflow: hidden; } .reason-card:hover { border-color: rgba(176,125,20,0.45); background: rgba(176,125,20,0.1); transform: translateX(3px); } .reason-num { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 900; color: rgba(176,125,20,0.5); line-height: 1; flex-shrink: 0; width: 36px; } .reason-body h3 { font-size: 16px; font-weight: 700; color: #000; margin-bottom: 5px; } .reason-body p { font-size: 15px; color: #000; line-height: 1.65; } .reason-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(176,125,20,0.25); } .reason-sources-label { font-size: 12px; font-weight: 700; color: #6b6b6b; letter-spacing: 0.02em; flex-shrink: 0; } .reason-source-link { font-size: 12px; font-weight: 600; color: var(--gold); text-decoration: none; border-bottom: 1px dotted rgba(176,125,20,0.5); } .reason-source-link:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); } .reason-source-dot { font-size: 10px; color: rgba(0,0,0,0.3); flex-shrink: 0; } .distance-note { display: flex; align-items: flex-start; gap: 8px; margin: 20px 0 4px; background: rgba(176,125,20,0.06); border: 1px solid rgba(176,125,20,0.25); border-radius: 10px; padding: 12px 14px; } .distance-note-icon { flex-shrink: 0; width: 15px; height: 15px; color: var(--gold); margin-top: 2px; } .distance-note-icon svg { width: 100%; height: 100%; display: block; } .distance-note-text { font-size: 12px; line-height: 1.65; color: #4a4a4a; text-align: left; margin: 0; } .distance-note-label { color: var(--green-deep); font-weight: 700; } /* ─── ABOUT ──────────────────────────────────── */ .about-card { background: var(--cream-2); border: 1px solid var(--border); border-radius: 16px; padding: 20px 18px; } .about-logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .about-logo { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--gold); } .about-logo-row div { display: flex; flex-direction: column; } .about-logo-row strong { font-size: 16px; font-weight: 700; color: #000; font-family: 'Cormorant Garamond', serif; } .about-logo-row span { font-size: 12px; color: #000; } .about-text { font-size: 15px; color: #000; line-height: 1.75; margin-bottom: 12px; } .about-highlight { display: flex; align-items: center; gap: 10px; background: rgba(31,122,77,0.08); border: 1px solid rgba(31,122,77,0.2); border-radius: 10px; padding: 12px 14px; margin: 16px 0 12px; font-size: 12.5px; font-weight: 600; color: #000; } .about-address { font-size: 12px; color: #000; text-align: center; margin-top: 8px; } /* Mobile typography (<=767px) — same Sora/Mukta readable scale used by Section 06 and the FAQ. Scoped to #about with !important so this reliably wins over the global max-480px .about-text override above (and .about-logo-row strong's inherited Cormorant Garamond). */ @media (max-width: 767px) { #about .about-logo-row strong { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 17px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1.5 !important; letter-spacing: normal !important; } #about .about-logo-row span { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.7 !important; letter-spacing: normal !important; } #about .about-text { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.7 !important; letter-spacing: normal !important; } #about .about-highlight strong { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 17px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1.5 !important; letter-spacing: normal !important; } #about .about-address { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.7 !important; letter-spacing: normal !important; } } .about-slider-wrap { position: relative; margin: 20px auto 8px; border-radius: 12px; overflow: hidden; background: var(--cream-3); box-shadow: 0 6px 24px rgba(23,58,34,0.12); text-align: center; } .about-slider-track { display: flex; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); will-change: transform; } .about-slide { min-width: 100%; display: block; flex-shrink: 0; } .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(20,60,35,0.62); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.25); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: background 0.2s; } .slider-btn:hover { background: rgba(31,122,77,0.78); } .slider-btn.prev { left: 8px; } .slider-btn.next { right: 8px; } .slider-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 4px; } .slider-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(31,122,77,0.25); cursor: pointer; transition: background 0.25s, transform 0.25s; } .slider-dot.active { background: var(--green); transform: scale(1.3); } /* ─── TESTIMONIALS ───────────────────────────── */ .testi-list { display: flex; flex-direction: column; gap: 16px; } .testi-card { background: var(--cream-2); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color 0.2s; } .testi-card:hover { border-color: var(--green); } .testi-video-wrap { position: relative; cursor: pointer; height: 180px; overflow: hidden; } .testi-thumb { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative; } .testi-play-btn { width: 60px; height: 42px; border-radius: 11px; background: #FF0000; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.30); display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background 0.2s; } .testi-video-wrap:hover .testi-play-btn { transform: scale(1.06); background: #CC0000; } .testi-play-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .testi-play-btn:active { transform: scale(0.97); } .testi-play-btn svg { margin-left: 2px; } .testi-video-badge { position: absolute; top: 10px; right: 10px; background: rgba(215,46,46,0.92); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 100px; letter-spacing: 0.05em; } .testi-body { padding: 14px 16px; } .testi-stars { color: var(--gold-light); font-size: 14px; letter-spacing: 2px; margin-bottom: 8px; } .testi-quote { font-size: 15px; color: #000; line-height: 1.75; margin-bottom: 14px; font-style: italic; font-weight: 500; } .testi-author { display: flex; align-items: center; gap: 10px; } .testi-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--green-deep)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; } .testi-author div { display: flex; flex-direction: column; gap: 2px; } .testi-author strong { font-size: 14px; font-weight: 700; color: #000; } .testi-author span { font-size: 14px; color: #000; } .testi-loc { color: #000 !important; } /* Mobile typography (<=767px) — same Sora/Mukta readable scale used by Section 06 and the FAQ. Scoped to #testimonials with !important so this reliably wins over the global max-480px overrides for .section-sub, .testi-quote, .testi-author strong and .testi-loc above (and .testi-quote's inherited italic font-style). */ @media (max-width: 767px) { #testimonials .section-sub { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.7 !important; letter-spacing: normal !important; } #testimonials .testi-quote { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.7 !important; letter-spacing: normal !important; } #testimonials .testi-author strong { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 17px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1.5 !important; letter-spacing: normal !important; } #testimonials .testi-author span, #testimonials .testi-loc { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.7 !important; letter-spacing: normal !important; } } /* ─── FAQ (#objections) — Mukta typography across the complete section ─── */ /* Blanket inheritance so every nested accordion, question, answer and dynamically-revealed panel picks up Mukta automatically. .section-tag and the .title-gold span inside the English "Frequently Asked Questions" heading are excluded — they keep their existing premium display fonts (Cinzel / Playfair Display). */ #objections, #objections button, #objections summary, #objections p, #objections h3, #objections h4, #objections div, #objections td, #objections th, #objections li, #objections a, #objections span:not(.section-tag):not(.title-gold) { font-family: 'Mukta', 'Noto Sans Devanagari', 'Nirmala UI', sans-serif; letter-spacing: 0; } /* ─── FAQ ────────────────────────────────────── */ .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--cream-2); border: 1px solid #000; border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.2s; } .faq-item.open { border-color: var(--green); } .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 16px; font-size: 18px; font-weight: 600; color: #000; line-height: 1.5; } .faq-arrow { font-size: 18px; color: #000; flex-shrink: 0; transition: transform 0.3s; line-height: 1; } .faq-item.open .faq-arrow { transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; font-size: 17px; font-weight: 400; color: #000; line-height: 1.7; padding: 0 16px; transition: max-height 0.35s ease, padding 0.3s; } .faq-item.open .faq-a { max-height: 1400px; padding: 0 16px 16px; } /* ─── Objection FAQ extras ──────────────────── */ .pri-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .pri-red { background: #D85A30; } .pri-amb { background: #EF9F27; } .faq-q .pri-dot { margin-right: 8px; } .faq-a-check { display: inline-block; margin-top: 10px; padding: 6px 10px; background: rgba(31,122,77,0.08); border-left: 3px solid var(--green); border-radius: 4px; font-weight: 600; color: var(--green); font-family: 'Mukta', sans-serif; font-size: 12px; } /* ─── Government Trust Section ──────────────── */ .gov-trust { margin-top: 36px; } .gov-highlight { background: #fff; border: 1.5px solid var(--green); border-radius: 12px; padding: 16px; margin: 18px 0; } .gov-highlight p { font-family: 'Mukta', sans-serif; font-size: 17px; font-weight: 400; color: var(--ink); line-height: 1.7; margin: 0 0 10px; } .gov-highlight .faq-a-check { margin-top: 4px; } /* ── Gov Steps Accordion ── */ .gov-steps-accordion { margin: 16px 0 18px; } .gov-single-toggle { border: 1px solid var(--border-gold); border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; } .gov-acc-header { display: flex; align-items: center; gap: 12px; padding: 11px 14px; user-select: none; transition: background 0.18s; } .gov-acc-header:hover { background: #fdf8ee; } .gov-acc-icon { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; } .gov-acc-meta { flex: 1; } .gov-acc-role { font-family: 'Mukta', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; text-transform: uppercase; color: var(--gold); margin-bottom: 1px; } #objections .gov-acc-role { letter-spacing: 1.1px; } .gov-acc-title { font-family: 'Mukta', 'Noto Sans Devanagari', 'Nirmala UI', sans-serif; font-size: 21px; color: var(--ink); font-weight: 600; line-height: 1.45; letter-spacing: 0; } .gov-acc-header .gov-acc-title { font-size: 18px; line-height: 1.5; } .gov-acc-arrow { font-size: 18px; color: #000000; line-height: 1; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; text-align: center; transition: transform 0.25s; } .gov-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .gov-acc-body.open { max-height: 900px; } .gov-steps-inner { border-top: 1px solid var(--border-gold); } .gov-step-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid rgba(176,125,20,0.1); } .gov-step-content { flex: 1; } .gov-acc-desc { font-family: 'Mukta', sans-serif; font-size: 17px; font-weight: 400; color: #444; line-height: 1.7; margin: 4px 0 0; } .gov-step-1 { background: #1F7A4D; } .gov-step-2 { background: #2E6FB5; } .gov-step-3 { background: #B07D14; } .gov-step-4 { background: #6B3FA0; } .gov-step-5 { background: #1F7A4D; } .director-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; } .director-card { background: #fff; border: 1px solid rgba(176,125,20,0.28); border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 12px; } .director-avatar { width: 44px; height: 44px; border-radius: 50%; background: #2E6FB5; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; flex-shrink: 0; } .director-name { font-family: 'Mukta', 'Noto Sans Devanagari', 'Nirmala UI', sans-serif; font-size: 14px; color: var(--ink); font-weight: 700; margin: 0; line-height: 1.2; } .director-role { font-family: 'Mukta', sans-serif; font-size: 11px; color: var(--muted); margin: 2px 0 0; } @media (max-width: 480px) { .director-cards { grid-template-columns: 1fr; } } .gov-table { width: 100%; border-collapse: collapse; margin: 10px 0; background: #fff; border: 1px solid rgba(176,125,20,0.28); border-radius: 8px; overflow: hidden; font-family: 'Mukta', sans-serif; font-size: 12px; } .gov-table th, .gov-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(31,122,77,0.1); color: var(--ink); } .gov-table th { background: rgba(31,122,77,0.06); font-weight: 700; width: 40%; } .gov-table tr:last-child td, .gov-table tr:last-child th { border-bottom: none; } /* ─── PRICING SECTION ────────────────────────── */ .pricing-toggle-instruction { width: 100%; text-align: center; margin-bottom: 10px; } .pricing-toggle-instruction strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); } .pricing-toggle-instruction span { display: block; font-size: 12px; color: rgba(23,58,34,0.65); margin-top: 2px; } .pricing-toggle-wrap { display: flex; gap: 10px; margin-bottom: 16px; } .pricing-toggle { flex: 1; box-sizing: border-box; min-height: 68px; padding: 12px 10px; border-radius: 14px; border: 2px solid rgba(23,58,34,0.30); background: var(--cream-2); color: var(--ink); font-family: 'Sora', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s, border-color 0.25s, color 0.25s; display: flex; align-items: center; justify-content: center; gap: 4px; flex-direction: column; box-shadow: 0 3px 10px rgba(23,58,34,0.10); position: relative; } .pricing-toggle .pt-top { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; } .pricing-toggle .road-tag { font-size: 10.5px; font-weight: 400; background: rgba(31,122,77,0.08); padding: 2px 8px; border-radius: 20px; color: var(--ink); } .pricing-toggle .pt-status { font-size: 10.5px; font-weight: 600; color: rgba(23,58,34,0.60); margin-top: 1px; } .pricing-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(23,58,34,0.18); } .pricing-toggle:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(23,58,34,0.14); } .pricing-toggle:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; } .pricing-toggle.active { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #fff; border-color: var(--gold-light); box-shadow: 0 6px 22px rgba(176,125,20,0.45); } .pricing-toggle.active:hover { box-shadow: 0 8px 26px rgba(176,125,20,0.5); } .pricing-toggle.active .road-tag { background: rgba(255,255,255,0.25); color: #fff; } .pricing-toggle.active .pt-status { color: #fff; } @media (prefers-reduced-motion: reduce) { .pricing-toggle { transition: background 0.25s, border-color 0.25s, color 0.25s; } .pricing-toggle:hover, .pricing-toggle:active { transform: none; } } @media (max-width: 360px) { .pricing-toggle-wrap { gap: 7px; } .pricing-toggle { padding: 10px 6px; gap: 3px; } .pricing-toggle .pt-top { font-size: 11.5px; gap: 4px; } .pricing-toggle .road-tag { font-size: 9.5px; padding: 2px 6px; } .pricing-toggle .pt-status { font-size: 9.5px; } } .pricing-rate-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(176,125,20,0.14), rgba(212,160,23,0.06)); border: 1px solid var(--border-gold); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; } .prate-amount { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 700; color: var(--gold); line-height: 1; } .prate-amount span { font-size: 13px; font-weight: 400; color: #000; font-family: 'Sora', sans-serif; } .prate-label { font-size: 13px; color: #000; font-weight: 500; } .pricing-grid-label { text-align: center; margin-bottom: 10px; } .pricing-grid-label .pgl-main { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); } .pricing-grid-label .pgl-sub { display: block; font-size: 11px; color: rgba(23,58,34,0.6); margin-top: 2px; } .pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 22px; } .plot-price-card { background: var(--cream-2); padding: 14px 12px 12px; cursor: default; } .popular-badge { font-size: 10px; font-weight: 700; color: var(--gold); letter-spacing: 0.04em; margin-bottom: 5px; text-transform: uppercase; } .plot-size-badge { font-size: 15px; font-weight: 700; color: #000; margin-bottom: 5px; } .plot-total { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; color: #000; margin-bottom: 6px; line-height: 1.1; transition: color 0.25s; } .plot-emi { font-size: 13px; color: #000; margin-bottom: 3px; } .plot-emi strong { color: #000; } .plot-token { font-size: 13px; color: #000; } .plot-token strong { color: var(--gold); } /* Monetary values ("₹9.87 Lakhs", "₹55 Thousand/month") must never split amount from unit — this is the single authoritative narrow-mobile pricing-typography rule; do not repeat/override .plot-total/.plot-emi/ .plot-token sizing elsewhere. */ #pricing .plot-total, #pricing .plot-emi strong, #pricing .plot-token strong { white-space: nowrap; overflow-wrap: normal; word-break: normal; } #pricing .plot-emi, #pricing .plot-token { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; overflow-wrap: normal; word-break: normal; } @media (max-width: 480px) { #pricing .plot-price-card { padding: 12px 8px 11px; } #pricing .plot-total { font-size: clamp(17px, 5.3vw, 20px) !important; line-height: 1.15; } /* Cards are only ~110-165px wide in this range — even at the smallest allowed font, "EMI: " + "₹55 Thousand/month" don't both fit on one row without the value overflowing the card. Stacking the label above the value keeps the full amount+unit on its own single, unsplit line (the non-negotiable requirement) instead of squeezing both onto one row. */ #pricing .plot-emi, #pricing .plot-token { flex-direction: column; align-items: flex-start; gap: 0; font-size: clamp(10.5px, 3.1vw, 12px) !important; line-height: 1.3; letter-spacing: -0.01em; } } @media (max-width: 350px) { #pricing .plot-price-card { padding-left: 6px; padding-right: 6px; } #pricing .plot-emi, #pricing .plot-token { font-size: 10px !important; letter-spacing: -0.04em; } } /* ─── PAYMENT PLAN BOX ──────────────────────── */ /* margin-bottom: 0 — this is the section's last element; the standardized #pricing .white-frame-inner bottom padding now owns the trailing gap, so a separate margin here would double up on top of it. */ .payment-plan-box { background: var(--cream-2); border: 1px solid #000; border-radius: 14px; padding: 18px 16px; margin-bottom: 0; } .ppb-title { font-size: 13.5px; font-weight: 700; color: #000; margin-bottom: 18px; } .pay-steps { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; } .pay-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; } .pay-circle { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; font-family: 'Sora', sans-serif; margin-bottom: 8px; box-shadow: 0 4px 16px rgba(23,58,34,0.18); position: relative; z-index: 1; } .step-token { background: linear-gradient(135deg, #1F7A4D, #2E9D63); color: #fff; } .step-booking { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #fff; } .step-registry{ background: linear-gradient(135deg, #D72E2E, #ff5e5e); color: #fff; } .pay-connector { position: absolute; top: 26px; left: calc(50% + 26px); right: calc(-50% + 26px); height: 2px; background: var(--border); z-index: 0; } .pay-connector.last { display: none; } .pay-step-label { font-size: 11px; font-weight: 600; color: #000; text-align: center; line-height: 1.5; } .pay-step-label span { font-size: 10.5px; font-weight: 400; color: #000; display: block; } .emi-tag { background: rgba(31,122,77,0.1); border: 1px solid rgba(31,122,77,0.25); border-radius: 9px; padding: 11px 14px; font-size: 12.5px; color: #000; line-height: 1.5; } .emi-tag strong { color: #000; } /* ─── SECTION 07 (ABOUT) DESKTOP ALIGNMENT ───── */ @media (min-width: 1024px) { #about .section-header, #about .about-card { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; } } /* ─── SECTION 07 (ABOUT) SLIDER — MOBILE/TABLET FIX ── */ @media (max-width: 1023.98px) { #about .about-slider-wrap { width: 100%; max-width: 620px; aspect-ratio: 4 / 3; height: auto; margin-left: auto; margin-right: auto; border-radius: 16px; overflow: hidden; background: #F3EEDF; } #about .about-slider-track { width: 100%; height: 100%; display: flex; align-items: center; } #about .about-slide { width: 100%; min-width: 100%; height: 100% !important; flex: 0 0 100%; display: block; object-fit: contain; object-position: center center; background: #F3EEDF; } } /* ─── SECTION 07 (ABOUT) SLIDER — DESKTOP FIX ── */ @media (min-width: 1024px) { #about .about-slider-wrap { width: 100%; max-width: 560px; aspect-ratio: 4 / 3; height: auto; margin-left: auto; margin-right: auto; border-radius: 16px; overflow: hidden; background: #F3EEDF; } #about .about-slider-track { width: 100%; height: 100%; align-items: center; } #about .about-slide { width: 100%; min-width: 100%; height: 100% !important; aspect-ratio: auto; flex: 0 0 100%; display: block; object-fit: contain; object-position: center center; background: #F3EEDF; } } /* ─── SECTION 05 (WHY BIHTA) DESKTOP ALIGNMENT ── */ @media (min-width: 1024px) { #why-bihta .section-header, #why-bihta .reasons-list { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; } } /* ─── PRICING SECTION DESKTOP ALIGNMENT ──────── */ @media (min-width: 1024px) { #pricing .section-header, #pricing .pricing-toggle-wrap, #pricing .pricing-rate-banner, #pricing .pricing-grid, #pricing .payment-plan-box { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; } } /* ─── SHARED PREMIUM-FRAME RESPONSIVE SCALING ───── .white-frame/.why-bihta-frame is shared by #pricing, #why-bihta, #about, #testimonials and #objections (unconditional base rule above, already visible at every breakpoint — no display:contents bug here). It was flat (same radius/padding/no outer margin at every size); this shared block scales all five to the same Section 02/03/04 premium-frame family in one place instead of repeating the rule per section. ── */ #why-bihta .why-bihta-inner { box-sizing: border-box; padding: 48px 16px var(--section-pad-b-desktop); } #pricing .white-frame-inner, #about .white-frame-inner, #testimonials .white-frame-inner, #objections .white-frame-inner { box-sizing: border-box; } /* Mobile — up to 640px */ @media (max-width: 640px) { #why-bihta .why-bihta-frame, #pricing .white-frame, #about .white-frame, #testimonials .white-frame, #objections .white-frame { width: calc(100% - 24px); margin: 0 auto; border-radius: 22px; } #why-bihta .why-bihta-inner, #pricing .white-frame-inner, #about .white-frame-inner, #testimonials .white-frame-inner, #objections .white-frame-inner { border-radius: 20px; padding: 24px 14px var(--section-pad-b-mobile); } } /* Tablet — 641px to 1023px */ @media (min-width: 641px) and (max-width: 1023px) { #why-bihta .why-bihta-frame, #pricing .white-frame, #about .white-frame, #testimonials .white-frame, #objections .white-frame { width: calc(100% - 40px); margin: 0 auto; border-radius: 26px; } #why-bihta .why-bihta-inner, #pricing .white-frame-inner, #about .white-frame-inner, #testimonials .white-frame-inner, #objections .white-frame-inner { border-radius: 24px; padding: 28px 28px var(--section-pad-b-tablet); } } /* Large desktop — 1440px and above: align frame edges with the hero-zero-shell's existing 1120px cap instead of stretching edge to edge on ultra-wide screens. Additive only — 1024–1439px (where Sections 02/03/04 were already verified) is untouched. */ @media (min-width: 1440px) { #plotting-plan .plotting-premium-frame, #amenities .amenities-premium-frame, #location-map .location-premium-frame, #why-bihta .why-bihta-frame, #why-us .dc-why, #pricing .white-frame, #about .white-frame, #testimonials .white-frame, #objections .white-frame, #contact.contact-section { max-width: 1120px; margin-left: auto; margin-right: auto; } } /* ─── FAQ SECTION (OBJECTIONS) DESKTOP ALIGNMENT ── */ @media (min-width: 1024px) { #objections .white-frame-inner > .section-header, #objections .white-frame-inner > .gov-trust, #objections .white-frame-inner > .faq-list { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; } } /* ─── SECTION 03 (AMENITIES) PREMIUM FRAME ──────── */ /* Shared visual identity — applies at every breakpoint so the box is never invisible; only sizing/spacing changes per breakpoint below. (Same responsive frame logic as #plotting-plan in Section 02.) */ #amenities .amenities-premium-frame { width: 100%; box-sizing: border-box; position: relative; border-radius: 20px; border: 1px solid rgba(176, 125, 20, 0.20); box-shadow: 0 10px 30px rgba(23,58,34,0.10); } #amenities .amenities-premium-inner { position: relative; overflow: hidden; box-sizing: border-box; border-radius: 18px; padding: 24px 16px 20px; background: linear-gradient( 160deg, #FFFFFF 0%, #FCF7EC 60%, #FBF4E4 100% ); } #amenities .amenities-premium-inner > .section-header, #amenities .amenities-premium-inner > .amenities-grid { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; } /* .amenities-grid has its own unscoped 40px padding (dwarika.html, from 769px up). Below desktop, .amenities-premium-inner now owns the outer inset instead, so neutralize the grid's own padding here to avoid stacking both — desktop (>=1024px) is untouched and keeps the 40px. */ @media (max-width: 1023px) { #amenities .amenities-grid { padding: 0; } } /* Mobile — up to 640px */ @media (max-width: 640px) { #amenities .amenities-premium-frame { width: calc(100% - 24px); margin: 0 auto; border-radius: 22px; } #amenities .amenities-premium-inner { border-radius: 20px; padding: 22px 12px 16px; } } /* Tablet — 641px to 1023px */ @media (min-width: 641px) and (max-width: 1023px) { #amenities .amenities-premium-frame { width: calc(100% - 40px); margin: 0 auto; border-radius: 26px; } #amenities .amenities-premium-inner { border-radius: 24px; padding: 28px 24px; } } /* ─── SECTION 03 (AMENITIES) CARD DESIGN SYSTEM ── */ #amenities { --amenity-green: #173A22; --amenity-green-2: #246B43; --amenity-gold: #B07D14; --amenity-cream: #FCF8EE; --amenity-sage: #EEF4E7; --amenity-border: rgba(31, 122, 77, 0.16); --amenity-gold-border: rgba(176, 125, 20, 0.20); --amenity-shadow: 0 10px 28px rgba(23, 58, 34, 0.09); } #amenities .amenity-card { position: relative; min-width: 0; border: 1px solid var(--amenity-border); background: linear-gradient(150deg, rgba(255,255,255,0.98) 0%, rgba(252,248,238,0.95) 62%, rgba(240,246,232,0.88) 100%); box-shadow: 0 8px 22px rgba(23,58,34,0.075), inset 0 1px 0 rgba(255,255,255,0.96); } #amenities .amenity-icon { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--amenity-green-2); background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #F4F7EA 55%, #E8EFE0 100%); border: 2px solid rgba(255, 255, 255, 0.96); box-shadow: 0 0 0 1px rgba(31,122,77,0.11), 0 5px 14px rgba(23,58,34,0.09); } #amenities .amenity-title { color: #000000; font-weight: 700; line-height: 1.2; text-align: center; margin: 0 0 3px; } #amenities .amenity-desc { color: #000000; font-weight: 400; line-height: 1.45; text-align: center; margin: 0; } @media (hover: hover) and (pointer: fine) { #amenities .amenity-card:hover { box-shadow: 0 12px 28px rgba(23,58,34,0.11), inset 0 1px 0 rgba(255,255,255,0.96); transform: translateY(-3px); } } /* Mobile — up to 768px (matches existing 2-col grid boundary) */ @media (max-width: 768px) { #amenities .amenity-info { padding: 25px 14px 8px; } #amenities .amenity-icon { width: 38px; height: 38px; } #amenities .amenity-icon svg { width: 20px; height: 20px; } #amenities .amenity-title { font-size: 14px; } #amenities .amenity-desc { font-size: 12px; } } /* Mobile typography (<=767px) — same Sora/Mukta readable scale used by Section 06, the FAQ, and About/Testimonials. Scoped to #amenities with !important so this reliably wins over the 768px block above and the global max-480px .section-sub override elsewhere on the page, without touching the 768px/tablet/desktop rules. */ @media (max-width: 767px) { #amenities .section-sub { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.7 !important; letter-spacing: normal !important; } /* At the larger 17px/600 weight, single long words like "Surveillance" are wider than the 2-col card and were being clipped by .amenity-card's overflow:hidden instead of wrapping — allow the title to break onto an extra line rather than shrinking the font. */ #amenities .amenity-title { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 17px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1.5 !important; letter-spacing: normal !important; overflow-wrap: break-word !important; word-break: break-word !important; } #amenities .amenity-desc { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.7 !important; overflow-wrap: break-word !important; word-break: break-word !important; letter-spacing: normal !important; } } /* Tablet — 769px to 1023px (matches existing 3-col, pre-frame boundary) */ @media (min-width: 769px) and (max-width: 1023px) { #amenities .amenity-info { padding: 27px 14px 8px; } #amenities .amenity-icon { width: 42px; height: 42px; } #amenities .amenity-icon svg { width: 22px; height: 22px; } #amenities .amenity-title { font-size: 15px; } #amenities .amenity-desc { font-size: 12.5px; } } /* Desktop — 1024px and above (matches existing premium-frame boundary) */ @media (min-width: 1024px) { #amenities .amenity-info { padding: 28px 14px 9px; } #amenities .amenity-icon { width: 44px; height: 44px; } #amenities .amenity-icon svg { width: 23px; height: 23px; } #amenities .amenity-title { font-size: 15px; } #amenities .amenity-desc { font-size: 12.5px; } } /* ─── FOOTER DESKTOP ALIGNMENT ────────────────── */ @media (min-width: 1024px) { .footer > .footer-brand, .footer > .footer-divider, .footer > .footer-nav-title, .footer > .footer-nav, .footer > .footer-contact, .footer > .footer-social-title, .footer > .footer-social, .footer > .footer-bottom { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; } /* Equal-size Quick Links boxes — .footer-nav a previously shrank to its text width under justify-items:center (set at 769px+ in dwarika.html, which still centers these fixed-size boxes within their grid column here; unchanged so tablet keeps its current shrink-to-content look). */ .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; column-gap: 24px; row-gap: 12px; } .footer-nav a { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 150px; max-width: 100%; min-height: 40px; padding: 8px 12px; line-height: 1.2; text-align: center; white-space: nowrap; } } /* ─── SECTION 02 (PLOTTING PLAN) PREMIUM FRAME ──── */ /* Shared visual identity — applies at every breakpoint so the box is never invisible; only sizing/spacing changes per breakpoint below. */ #plotting-plan .plotting-premium-frame { width: 100%; box-sizing: border-box; position: relative; border-radius: 20px; border: 1px solid rgba(176, 125, 20, 0.20); box-shadow: 0 10px 30px rgba(23,58,34,0.10); } #plotting-plan .plotting-premium-inner { position: relative; overflow: hidden; box-sizing: border-box; border-radius: 18px; padding: 24px 40px var(--section-pad-b-desktop); background: linear-gradient( 160deg, #FFFFFF 0%, #FCF7EC 60%, #FBF4E4 100% ); } /* Mobile — up to 640px */ @media (max-width: 640px) { #plotting-plan .plotting-premium-frame { width: calc(100% - 16px); margin: 0 auto; border-radius: 22px; } #plotting-plan .plotting-premium-inner { border-radius: 20px; padding: 24px 10px var(--section-pad-b-mobile); } } /* Tablet — 641px to 1023px */ @media (min-width: 641px) and (max-width: 1023px) { #plotting-plan .plotting-premium-frame { width: calc(100% - 40px); margin: 0 auto; border-radius: 26px; } #plotting-plan .plotting-premium-inner { border-radius: 24px; padding: 28px 28px var(--section-pad-b-tablet); } } /* ─── SECTION 02 (PLOTTING PLAN) CARD DESIGN SYSTEM ── */ #plotting-plan .plot-hint { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 6px; margin: 0 auto 10px; width: fit-content; max-width: calc(100% - 24px); box-sizing: border-box; text-align: center; color: rgba(23,58,34,0.62); background: none; border: none; border-radius: 0; box-shadow: none; font-weight: 500; font-style: italic; letter-spacing: normal; } #plotting-plan .plot-hint-icon { display: flex; align-items: center; justify-content: center; color: rgba(23,58,34,0.55); flex-shrink: 0; } #plotting-plan .plot-hint-text { min-width: 0; text-align: center; line-height: 1.25; white-space: nowrap; } /* .plotting-premium-inner is the single visible card at every breakpoint — the img-wrap itself stays neutral (no border/shadow/background of its own) so it never nests a second card. aspect-ratio + height:auto keep the plotting plan uncropped instead of the old fixed-height mobile box. */ #plotting-plan .plot-img-wrap { display: block; margin-left: auto; margin-right: auto; box-sizing: border-box; aspect-ratio: 3 / 2; height: auto; padding: 0; border: none; background: transparent; box-shadow: none; } /* Mobile — up to 640px: show the full 3200x1708 image at true ratio, no cropping, no wrapper padding stealing width. */ @media (max-width: 640px) { #plotting-plan .plot-img-wrap { padding: 0; aspect-ratio: auto; } #plotting-plan .plot-img-wrap > img { width: 100%; height: auto; aspect-ratio: 3200 / 1708; object-fit: contain; } } /* Tablet — 641px to 1023px */ @media (min-width: 641px) and (max-width: 1023px) { #plotting-plan .plot-img-wrap { padding: 18px; } } #plotting-plan .plot-img-wrap > img { display: block; margin-left: auto; margin-right: auto; } #plotting-plan .plot-zoom-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(20,55,35,0.80); backdrop-filter: blur(6px); border: 1px solid rgba(176,125,20,0.45); color: #FCF8EE; border-radius: 999px; } #plotting-plan .plot-zoom-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Mobile/tablet (no wrapper padding) — up to 768px */ @media (max-width: 768px) { #plotting-plan .plot-hint { min-height: 0; width: 100%; max-width: 100%; box-sizing: border-box; padding: 4px 8px; gap: 5px; font-size: clamp(9px, 3vw, 12px); letter-spacing: normal; } #plotting-plan .plot-hint-icon svg { width: clamp(13px, 3.4vw, 15px); height: clamp(13px, 3.4vw, 15px); } #plotting-plan .plot-zoom-badge { right: 9px; bottom: 9px; padding: 6px 10px; gap: 5px; font-size: 10.5px; } #plotting-plan .plot-zoom-icon svg { width: 14px; height: 14px; } } /* Image corners round only at the existing 1024px+ boundary (matches original) */ @media (min-width: 1024px) { #plotting-plan .plot-img-wrap > img { border-radius: 18px; } } /* Tablet/Desktop (40px wrapper padding begins) — 769px and above */ @media (min-width: 769px) { #plotting-plan .plot-hint { min-height: 0; padding: 4px 0; gap: 8px; font-size: 13px; } #plotting-plan .plot-hint-icon svg { width: 16px; height: 16px; } #plotting-plan .plot-zoom-badge { right: 52px; bottom: 52px; padding: 7px 12px; gap: 6px; font-size: 11px; } #plotting-plan .plot-zoom-icon svg { width: 15px; height: 15px; } } /* Desktop: img-wrap padding is now 0 (moved into .plotting-premium-inner), so the badge gap is recalculated relative to the visible image edge. */ @media (min-width: 1024px) { #plotting-plan .plot-zoom-badge { right: 12px; bottom: 12px; } } /* ─── SECTION 04 (LOCATION MAP) PREMIUM FRAME ───── Duplicated (not grouped) from the approved #plotting-plan values above, to guarantee zero risk of altering Section 02. Keep values in sync manually if Section 02's design system changes. Shared visual identity — applies at every breakpoint so the box is never invisible; only sizing/spacing changes per breakpoint below. ── */ #location-map .location-premium-frame { width: 100%; box-sizing: border-box; position: relative; border-radius: 20px; border: 1px solid rgba(176, 125, 20, 0.20); box-shadow: 0 10px 30px rgba(23,58,34,0.10); } #location-map .location-premium-inner { position: relative; overflow: hidden; box-sizing: border-box; border-radius: 18px; padding: 24px 40px var(--section-pad-b-desktop); background: linear-gradient( 160deg, #FFFFFF 0%, #FCF7EC 60%, #FBF4E4 100% ); } /* Mobile — up to 640px */ @media (max-width: 640px) { #location-map .location-premium-frame { width: calc(100% - 24px); margin: 0 auto; border-radius: 22px; } #location-map .location-premium-inner { border-radius: 20px; padding: 24px 14px var(--section-pad-b-mobile); } } /* Tablet — 641px to 1023px */ @media (min-width: 641px) and (max-width: 1023px) { #location-map .location-premium-frame { width: calc(100% - 40px); margin: 0 auto; border-radius: 26px; } #location-map .location-premium-inner { border-radius: 24px; padding: 28px 28px var(--section-pad-b-tablet); } } /* ─── SECTION 04 (LOCATION MAP) CARD DESIGN SYSTEM ── */ #location-map .map-hint { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 6px; margin: 0 auto 10px; width: fit-content; max-width: calc(100% - 24px); box-sizing: border-box; text-align: center; color: rgba(23,58,34,0.62); background: none; border: none; border-radius: 0; box-shadow: none; font-weight: 500; font-style: italic; letter-spacing: normal; } #location-map .map-hint-icon { display: flex; align-items: center; justify-content: center; color: rgba(23,58,34,0.55); flex-shrink: 0; } #location-map .map-hint-text { min-width: 0; text-align: center; line-height: 1.25; white-space: nowrap; } /* .location-premium-inner is the single visible card at every breakpoint — the img-wrap itself stays neutral (no border/shadow/background of its own) so it never nests a second card. aspect-ratio + height:auto keep the map uncropped instead of the old fixed-height mobile box. */ #location-map .plot-img-wrap { display: block; margin-left: auto; margin-right: auto; box-sizing: border-box; aspect-ratio: 3 / 2; height: auto; padding: 0; border: none; background: transparent; box-shadow: none; } /* Mobile — up to 640px: show the full 3125x2278 map at its true ratio, no cropping, no wrapper padding stealing width. */ @media (max-width: 640px) { #location-map .plot-img-wrap { padding: 0; width: 100%; height: auto; aspect-ratio: auto; } #location-map .plot-img-wrap > img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; } } /* Tablet — 641px to 1023px */ @media (min-width: 641px) and (max-width: 1023px) { #location-map .plot-img-wrap { padding: 18px; } } #location-map .plot-img-wrap > img { display: block; margin-left: auto; margin-right: auto; } @media (min-width: 1024px) { #location-map .plot-img-wrap > img { border-radius: 18px; } } #location-map .plot-zoom-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(20,55,35,0.80); backdrop-filter: blur(6px); border: 1px solid rgba(176,125,20,0.45); color: #FCF8EE; border-radius: 999px; } #location-map .plot-zoom-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Mobile/tablet (no wrapper padding) — up to 768px */ @media (max-width: 768px) { #location-map .map-hint { min-height: 0; width: 100%; max-width: 100%; box-sizing: border-box; padding: 4px 8px; gap: 5px; font-size: clamp(9px, 3vw, 12px); letter-spacing: normal; } #location-map .map-hint-icon svg { width: clamp(13px, 3.4vw, 15px); height: clamp(13px, 3.4vw, 15px); } #location-map .plot-zoom-badge { right: 9px; bottom: 9px; padding: 6px 10px; gap: 5px; font-size: 10.5px; } #location-map .plot-zoom-icon svg { width: 14px; height: 14px; } } /* Tablet/Desktop (40px wrapper padding begins) — 769px and above */ @media (min-width: 769px) { #location-map .map-hint { min-height: 0; padding: 4px 0; gap: 8px; font-size: 13px; } #location-map .map-hint-icon svg { width: 16px; height: 16px; } #location-map .plot-zoom-badge { right: 52px; bottom: 52px; padding: 7px 12px; gap: 6px; font-size: 11px; } #location-map .plot-zoom-icon svg { width: 15px; height: 15px; } } /* Desktop: img-wrap padding is now 0 (moved into .location-premium-inner), so the badge gap is recalculated relative to the visible image edge. */ @media (min-width: 1024px) { #location-map .plot-zoom-badge { right: 12px; bottom: 12px; } } /* ─── WHY INVEST — NEARBY PLACES (#why-us) ───── */ .dc-why { background:#FAF8F3; padding:48px 16px var(--section-pad-b-desktop); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:#1f1f1f; width:100%; box-sizing:border-box; border-radius:20px; border:1px solid rgba(176,125,20,0.20); box-shadow:0 10px 30px rgba(23,58,34,0.10); overflow:hidden; } .dc-why-inner { max-width:880px; margin:0 auto; } /* Same premium-frame outer-margin/radius scaling as Sections 02/03/04/Pricing — background, font and content are intentionally left untouched. */ @media (max-width: 640px) { #why-us .dc-why { width:calc(100% - 24px); margin:0 auto; border-radius:22px; padding:24px 14px var(--section-pad-b-mobile); } } @media (min-width: 641px) and (max-width: 1023px) { #why-us .dc-why { width:calc(100% - 40px); margin:0 auto; border-radius:26px; padding:28px 24px var(--section-pad-b-tablet); } } /* Sizing/line-height/weight now come from the shared .section-title class (same as Section 05 and FAQ) — only centring, spacing and the Mukta font-family are overridden here for this heading. */ .dc-h { text-align:center; margin:0 0 18px; font-family:'Mukta','Noto Sans Devanagari','Nirmala UI',sans-serif; } .dc-h .gold { color:#B8860B; } .dc-divider { display:flex; align-items:center; justify-content:center; gap:10px; margin:18px 0 22px; color:#B8860B; } .dc-divider:before,.dc-divider:after { content:""; flex:1; max-width:120px; height:1px; background:#B8860B; opacity:.5; } .dc-intro { background:#FDF8EE; border-left:3px solid #B8860B; padding:14px 16px; border-radius:6px; font-size:14px; line-height:1.6; color:#3a3a3a; margin-bottom:24px; } .dc-tabs { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:8px; margin-bottom:20px; } .dc-tab { padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; border:1.5px solid rgba(31,92,58,0.30); background:#F5F3EE; color:#2C4A36; transition:all .15s; white-space:nowrap; } .dc-tab.active { background:#fff; border-color:#B8860B; color:#B8860B; font-weight:700; } .dc-cat-header { font-size:15px; font-weight:700; color:#1f1f1f; margin:20px 0 10px; padding-bottom:6px; border-bottom:1px solid #E8E4DC; } .dc-cat-group { transition:opacity .15s; } .dc-card { display:flex; align-items:center; gap:12px; background:#fff; border:.5px solid #E8E4DC; border-left:3px solid transparent; border-radius:12px; padding:12px 14px; margin-bottom:8px; transition:border-color .15s; } .dc-card:hover { border-left-color:#B8860B; } .dc-icon { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; } .dc-mid { flex:1; min-width:0; } .dc-name { font-size:14px; font-weight:500; color:#1f1f1f; line-height:1.3; } .dc-sub { font-size:12px; color:#888; margin-top:2px; line-height:1.4; } .dc-badge { display:inline-block; background:#EAF3DE; color:#3B6D11; font-size:10px; font-weight:600; padding:2px 6px; border-radius:4px; margin-left:6px; vertical-align:middle; } .dc-sep { width:1px; align-self:stretch; background:#E8E4DC; margin:0 4px; } .dc-dist { text-align:center; min-width:54px; flex-shrink:0; } .dc-dist .n { font-size:18px; font-weight:600; color:#1f1f1f; line-height:1; } .dc-dist.gold .n { color:#B8860B; } .dc-dist .u { font-size:10px; text-transform:uppercase; color:#999; margin-top:2px; letter-spacing:.5px; } .dc-summary { margin-top:32px; background:#FDF8EE; border-top:1px solid #E8E4DC; border-radius:8px; padding:20px 16px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .dc-stat { text-align:center; } .dc-stat .v { font-size:22px; font-weight:600; color:#B8860B; line-height:1.2; } .dc-stat .l { font-size:12px; color:#888; margin-top:4px; } @media (min-width:640px){ .dc-summary{grid-template-columns:repeat(4,1fr);} } /* Mobile typography (<=767px) — match the mobile FAQ question/answer type scale instead of .dc-why's inherited system-font stack. Scoped to #why-us with !important so this reliably wins over both the base .dc-name/.dc-sub rules above and the narrower global max-480px overrides (.dc-name/.dc-sub) elsewhere on the page. */ @media (max-width: 767px) { #why-us .dc-name { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 17px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1.5 !important; letter-spacing: normal !important; } #why-us .dc-sub { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.7 !important; letter-spacing: normal !important; } /* Intro paragraph + category tabs were too small on mobile — bump them up to the same Sora/Mukta scale, scoped to #why-us so the base .dc-intro (14px) / .dc-tab (13px) rules above are reliably overridden without touching tablet/desktop. */ #why-us .dc-intro { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.7 !important; letter-spacing: normal !important; } #why-us .dc-tab { font-family: 'Sora', 'Mukta', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1.4 !important; letter-spacing: normal !important; } #why-us .dc-tab.active { font-size: 15px !important; font-weight: 700 !important; } } /* ─── PREFER TO TALK — DIRECT CALL CARD ───────── Mobile-only (<768px). Always horizontal 3-column grid: [phone circle] [heading + Hindi] [call button + availability] Scales via clamp() from 320px→767px without ever stacking. Completely hidden at 768px+ (no height, no margin). */ .call-card { display: block; background: linear-gradient(135deg, #FFFFFF, #FCF6E8); border: 1px solid rgba(31,92,58,0.28); border-radius: clamp(14px, 4vw, 20px); padding: clamp(16px, 5vw, 26px) clamp(8px, 3vw, 18px); margin-top: 18px; box-shadow: 0 10px 30px rgba(23,58,34,0.10); width: 100%; box-sizing: border-box; } .call-card-inner { display: grid; grid-template-columns: clamp(34px, 11vw, 58px) minmax(0, 1fr) clamp(112px, 34vw, 190px); align-items: center; gap: clamp(5px, 2vw, 14px); } .call-card-inner > * { min-width: 0; } .call-card-visual { position: relative; width: clamp(34px, 11vw, 58px); height: clamp(34px, 11vw, 58px); display: flex; align-items: center; justify-content: center; } .call-card-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(232,181,58,0.75); } .call-card-phone { width: 78%; height: 78%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #EAF3E4 100%); color: var(--green-deep, #14512F); box-shadow: 0 4px 10px rgba(23,58,34,0.12); } .call-card-phone svg { width: 55%; height: 55%; } .call-card-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; } .call-card-heading { font-family: 'Playfair Display', 'Sora', serif; font-size: clamp(13px, 4.2vw, 21px); font-weight: 700; color: var(--ink, #173A22); margin: 0; line-height: 1.15; white-space: nowrap; letter-spacing: -0.01em; } .call-card-sub { font-family: 'Sora', 'Mukta', sans-serif; font-size: clamp(9.5px, 2.9vw, 13px); line-height: 1.4; color: #000; margin: 0; } .call-card-action { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .call-card-btn { display: inline-flex; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 8px); width: 100%; min-height: 44px; padding: clamp(8px, 2.5vw, 12px) clamp(6px, 2vw, 16px); border: 2px solid var(--green-deep, #14512F); border-radius: 999px; background: #FFFFFF; color: var(--green-deep, #14512F); font-family: 'Sora', sans-serif; font-size: clamp(11px, 3.4vw, 16px); font-weight: 700; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; box-sizing: border-box; box-shadow: 0 4px 12px rgba(20,81,47,0.10); transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease; } .call-card-btn-icon { display: inline-flex; flex-shrink: 0; } .call-card-btn-icon svg { width: clamp(12px, 3.6vw, 18px); height: clamp(12px, 3.6vw, 18px); } .call-card-btn-label { display: inline-block; white-space: nowrap; flex-shrink: 0; overflow: visible; } .call-card-btn:hover { background: var(--green-deep, #14512F); color: #fff; box-shadow: 0 8px 20px rgba(20,81,47,0.22); transform: translateY(-1px); } .call-card-btn:active { transform: scale(0.98); } .call-card-btn:focus-visible { outline: 3px solid rgba(31,122,77,0.45); outline-offset: 3px; } .call-card-availability { display: inline-flex; align-items: center; gap: 4px; font-size: clamp(8.5px, 2.5vw, 12px); font-weight: 600; color: rgba(23,58,34,0.75); margin: 0; line-height: 1.2; text-align: center; white-space: nowrap; } .call-card-avail-icon { display: inline-flex; color: rgba(23,58,34,0.75); flex-shrink: 0; } .call-card-avail-icon svg { width: clamp(10px, 2.8vw, 14px); height: clamp(10px, 2.8vw, 14px); } /* Tablet + desktop: hide entirely — no height, no margin. */ @media (min-width: 768px) { .call-card { display: none !important; } } @media (prefers-reduced-motion: reduce) { .call-card-btn { transition: none; } .call-card-btn:hover, .call-card-btn:active { transform: none; } }