/* ========================================================================== PRIME BUILD PROJECTS — CONTINUOUS MOBILE HOME PAGE STYLESHEET Strictly active ONLY on screen widths <= 767px for index.html. Combines all section-specific mobile designs into one seamless scroll: Home Hero -> About Us -> Luxury Homes -> Govt Tenders -> Projects -> Capabilities -> Gallery -> Contact Us -> Footer. Desktop, Laptop, and Tablet layouts remain 100% UNTOUCHED and PRESERVED. ========================================================================== */ @media screen and (max-width: 767px) { /* ------------------------------------------------------------------------- FLOATING ACTION BUTTONS (Phone & WhatsApp) - ALWAYS VISIBLE ON MOBILE HOME ------------------------------------------------------------------------- */ .floating-action-btn { display: flex !important; position: fixed !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; align-items: center !important; justify-content: center !important; z-index: 99999 !important; text-decoration: none !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45) !important; } .floating-action-btn.floating-call { left: 16px !important; right: auto !important; bottom: 84px !important; background: linear-gradient(135deg, #ff3b30 0%, #e53935 60%, #c62828 100%) !important; color: #ffffff !important; } .floating-action-btn.floating-whatsapp { left: 16px !important; right: auto !important; bottom: 20px !important; background: linear-gradient(135deg, #2fe675 0%, #25D366 60%, #1da851 100%) !important; color: #ffffff !important; } .floating-action-btn i { font-size: 24px !important; color: #ffffff !important; line-height: 1 !important; } /* Section containers clean layout */ .about-page-wrapper, .luxury-page-main, .govt-page-main, .projects-page, .capabilities-page-wrapper, .contact-page-wrapper { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* === SECTION 1: ABOUT US === */ /* Page container constraint */ /* ------------------------------------------------------------------------- 1. COMPACT MOBILE HEADER: [ LOGO ] [ GET IN TOUCH ] [ ☰ ] ------------------------------------------------------------------------- */ /* Compact "GET IN TOUCH →" header button toward the right */ /* Hamburger toggle at extreme right */ /* ------------------------------------------------------------------------- 2. ABOUT INTRO — EDITORIAL SPLIT COMPOSITION (Text Left, Image Right) ------------------------------------------------------------------------- */ #about .page-hero.about-hero-split { position: relative !important; height: auto !important; min-height: 380px !important; max-height: none !important; padding-top: 24px !important; /* Clears 58px fixed header + 10px spacing */ padding-bottom: 22px !important; padding-left: 0 !important; padding-right: 0 !important; display: flex !important; align-items: center !important; background-color: #f6f4ee !important; overflow: hidden !important; box-sizing: border-box !important; margin: 0 !important; } /* Full-height right-side building image */ #about .page-hero.about-hero-split .page-hero-bg { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 57% !important; height: 100% !important; z-index: 1 !important; pointer-events: none !important; overflow: hidden !important; } #about .page-hero.about-hero-split .page-hero-bg img { position: absolute !important; top: 0 !important; right: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; object-fit: cover !important; object-position: 68% center !important; display: block !important; } /* Soft horizontal gradient dissolving the left edge of the photo into the text background */ #about .page-hero.about-hero-split .page-hero-gradient { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 2 !important; pointer-events: none !important; background: linear-gradient( to right, #f6f4ee 0%, #f6f4ee 45%, rgba(246, 244, 238, 0.95) 48%, rgba(246, 244, 238, 0.35) 54%, transparent 60% ) !important; } #about .page-hero.about-hero-split .container { position: relative !important; z-index: 3 !important; padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } /* Left-side text column taking ~45% of mobile viewport width */ #about .page-hero.about-hero-split .page-hero-content { width: 45% !important; max-width: 45% !important; min-width: 45% !important; padding: 0 4px 0 14px !important; margin: 0 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } #about .page-hero.about-hero-split .section-tag { display: inline-block !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 0.60rem !important; font-weight: 700 !important; letter-spacing: 0.16em !important; color: #8c6218 !important; text-transform: uppercase !important; margin: 0 0 2px 0 !important; } #about .page-hero.about-hero-split .section-tag::after { content: "" !important; display: block !important; width: 24px !important; height: 1.5px !important; background: #8c6218 !important; margin-top: 3px !important; margin-bottom: 7px !important; } #about .page-hero.about-hero-split .page-hero-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(0.82rem, 3.4vw, 0.98rem) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.02em !important; color: #0c0e13 !important; margin: 0 0 7px 0 !important; text-shadow: none !important; width: 100% !important; max-width: 100% !important; } #about .page-hero.about-hero-split .page-hero-title::after { display: none !important; } #about .page-hero.about-hero-split .page-hero-title .gold-text { color: #8c6218 !important; background: none !important; -webkit-text-fill-color: initial !important; display: inline !important; } #about .page-hero.about-hero-split .page-hero-lead { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(0.55rem, 2.2vw, 0.64rem) !important; line-height: 1.38 !important; color: #1a1e26 !important; font-weight: 500 !important; margin: 0 0 5px 0 !important; max-width: 100% !important; text-shadow: none !important; } /* ------------------------------------------------------------------------- 3. LUXURY HOMES & RESORTS (Horizontal 2-Column Mobile Composition) ------------------------------------------------------------------------- */ #about .about-split-section { height: auto !important; min-height: auto !important; max-height: none !important; background: #f6f4ee !important; border: none !important; padding: 0 !important; margin: 0 !important; } #about .about-split-grid { height: auto !important; min-height: auto !important; max-height: none !important; display: flex !important; flex-direction: column !important; width: 100% !important; gap: 0 !important; } #about .about-showcase-half { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; height: auto !important; min-height: 230px !important; max-height: none !important; background-color: #f6f4ee !important; border: none !important; border-bottom: 1px solid rgba(222, 216, 204, 0.6) !important; padding: 16px 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* Text left: ~44% width */ #about .about-showcase-inner { position: relative !important; z-index: 3 !important; width: 44% !important; max-width: 44% !important; min-width: 44% !important; padding: 0 4px 0 14px !important; margin: 0 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } #about .about-showcase-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(0.82rem, 3.4vw, 0.98rem) !important; font-weight: 700 !important; line-height: 1.18 !important; letter-spacing: 0.02em !important; color: #0c0e13 !important; margin: 0 !important; text-transform: uppercase !important; } #about .about-gold-line { width: 24px !important; height: 1.5px !important; background: #8c6218 !important; margin: 4px 0 6px 0 !important; } #about .about-showcase-p { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(0.55rem, 2.2vw, 0.64rem) !important; line-height: 1.38 !important; color: #1a1e26 !important; font-weight: 500 !important; margin: 0 0 6px 0 !important; max-width: 100% !important; } #about .about-explore-link { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 0.62rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #8c6218 !important; text-decoration: none !important; margin-top: 2px !important; -webkit-tap-highlight-color: transparent !important; } #about .about-explore-link i { font-size: 0.68rem !important; line-height: 1 !important; } /* Image right: ~58% width filling entire right-side area */ #about .about-showcase-bg { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 58% !important; height: 100% !important; z-index: 1 !important; pointer-events: none !important; overflow: hidden !important; } #about .about-showcase-bg img { position: absolute !important; top: 0 !important; right: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; object-fit: cover !important; object-position: right center !important; display: block !important; } /* Horizontal gradient feather on left edge of right-side image */ #about .about-showcase-overlay { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 2 !important; pointer-events: none !important; background: linear-gradient( to right, #f6f4ee 0%, #f6f4ee 44%, rgba(246, 244, 238, 0.95) 47%, rgba(246, 244, 238, 0.35) 53%, transparent 59% ) !important; } /* ------------------------------------------------------------------------- 4. VALUES SECTION — EXACT 4-COLUMN HORIZONTAL STRIP ------------------------------------------------------------------------- */ #about .about-values-strip { height: auto !important; min-height: auto !important; max-height: none !important; background-color: #07080a !important; border-top: 1px solid rgba(218, 165, 82, 0.3) !important; border-bottom: none !important; padding: 18px 6px 14px 6px !important; position: relative !important; box-sizing: border-box !important; } #about .about-values-strip::before { display: none !important; } /* Four equal columns in ONE ROW */ #about .about-pillars-container { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 auto !important; align-items: start !important; gap: 0 !important; } #about .about-pillar-item { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 0 3px !important; border: none !important; border-bottom: none !important; position: relative !important; box-sizing: border-box !important; } /* Vertical separators between columns */ #about .about-pillar-item:not(:last-child)::after { content: '' !important; display: block !important; position: absolute !important; right: 0 !important; top: 8% !important; bottom: 8% !important; width: 1px !important; background: rgba(218, 165, 82, 0.28) !important; } /* Circular gold icon */ #about .about-pillar-icon { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; border-radius: 50% !important; border: 1px solid #c59b4e !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #c59b4e !important; background: transparent !important; margin: 0 auto 5px auto !important; box-sizing: border-box !important; } #about .about-pillar-icon svg { width: 16px !important; height: 16px !important; color: #c59b4e !important; stroke: #c59b4e !important; } #about .about-pillar-text { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 100% !important; } #about .about-pillar-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(0.48rem, 1.8vw, 0.54rem) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; color: #ffffff !important; margin-bottom: 3px !important; text-transform: uppercase !important; } #about .about-pillar-desc { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(0.42rem, 1.6vw, 0.48rem) !important; line-height: 1.3 !important; color: #8a919e !important; margin: 0 !important; max-width: 100% !important; } /* ------------------------------------------------------------------------- 5. BOTTOM FULL-WIDTH "GET IN TOUCH →" BUTTON ------------------------------------------------------------------------- */ #about .about-mobile-bottom-cta { display: block !important; width: 100% !important; background-color: #07080a !important; padding: 6px 14px 22px 14px !important; box-sizing: border-box !important; } #about .about-mobile-cta-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; min-height: 42px !important; padding: 0.7rem 1.2rem !important; background: #0c0e12 !important; border: 1px solid rgba(218, 165, 82, 0.65) !important; border-radius: 8px !important; color: #daa552 !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important; -webkit-tap-highlight-color: transparent !important; transition: all 0.25s ease !important; } #about .about-mobile-cta-btn:hover, #about .about-mobile-cta-btn:active { background: rgba(218, 165, 82, 0.12) !important; border-color: #daa552 !important; color: #fce09b !important; } #about .about-mobile-cta-btn i { font-size: 0.84rem !important; line-height: 1 !important; } /* Hide floating action buttons on About Us mobile so they don't block text */ /* === SECTION 2: LUXURY HOMES & RESORTS === */ /* Page container constraint */ #luxury .luxury-page-main { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; padding-top: 56px !important; } /* Hide floating action buttons on Luxury Homes & Resorts mobile so cards remain unobscured */ /* ------------------------------------------------------------------------- 1. COMPACT MOBILE HEADER: [ LOGO ] [ GET IN TOUCH → ] [ ☰ ] ------------------------------------------------------------------------- */ /* Compact "GET IN TOUCH →" header button toward the right */ /* Hamburger toggle at extreme right */ /* Mobile menu drawer: hidden by default, shown when hamburger checked */ /* ------------------------------------------------------------------------- 2. HERO — COMPACT FULL-WIDTH IMAGE BACKGROUND + TEXT OVERLAY (Left-aligned) Matches Image 3 proportions, framing, and typography. ------------------------------------------------------------------------- */ #luxury .page-hero.luxury-hero-section { position: relative !important; width: 100% !important; min-height: 305px !important; height: clamp(305px, 78vw, 335px) !important; max-height: 345px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; padding: 16px 14px !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background-color: #080a0d !important; } /* Villa hero image fills section background */ #luxury .luxury-hero-section .page-hero-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important; pointer-events: none !important; overflow: hidden !important; } /* Framing: shows tree on left, illuminated villa center-right, pool and waterfall bottom-right */ #luxury .luxury-hero-section .page-hero-bg img, #luxury .luxury-hero-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 48% 28% !important; display: block !important; transform: none !important; animation: none !important; } /* Smooth dark gradient: slightly darker behind text and subtle ambient tone matching Image 2 */ #luxury .luxury-hero-gradient { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 2 !important; pointer-events: none !important; background: linear-gradient( to right, rgba(5, 7, 10, 0.96) 0%, rgba(5, 7, 10, 0.88) 36%, rgba(5, 7, 10, 0.58) 52%, rgba(5, 7, 10, 0.22) 70%, rgba(5, 7, 10, 0.08) 85%, transparent 100% ), linear-gradient( to bottom, rgba(5, 7, 10, 0.40) 0%, rgba(5, 7, 10, 0.12) 42%, rgba(5, 7, 10, 0.22) 100% ) !important; } /* Hero Content container */ #luxury .luxury-hero-container { position: relative !important; z-index: 3 !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } #luxury .luxury-hero-content { max-width: 48% !important; text-align: left !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* Eyebrow: LUXURY HOMES & RESORTS */ #luxury .luxury-eyebrow { display: block !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 8.5px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; color: #daa552 !important; text-transform: uppercase !important; margin-bottom: 5px !important; } /* Title: Thoughtfully / designed. / Beautifully built. (Georgia serif matching Image 3) */ #luxury .luxury-hero-title { font-family: Georgia, 'Times New Roman', serif !important; font-size: clamp(19px, 5.2vw, 22px) !important; font-weight: 400 !important; letter-spacing: 0.01em !important; line-height: 1.15 !important; margin: 0 0 6px 0 !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important; } #luxury .luxury-mobile-break { display: inline !important; } #luxury .luxury-desktop-break { display: none !important; } #luxury .luxury-title-white { color: #ffffff !important; display: inline !important; } #luxury .luxury-title-gold { color: #daa552 !important; display: block !important; } /* Gold accent line below heading */ #luxury .luxury-hero-gold-line { width: 28px !important; height: 1.5px !important; background-color: #daa552 !important; margin: 0 0 7px 0 !important; display: block !important; } /* Supporting paragraph with comfortable mobile readability and compact footprint */ #luxury .luxury-hero-desc { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(8.8px, 2.4vw, 9.6px) !important; font-weight: 400 !important; line-height: 1.34 !important; color: #d6d9df !important; margin: 0 0 10px 0 !important; max-width: clamp(160px, 42vw, 188px) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85) !important; } /* Hero Button: EXPLORE OUR WORK → */ #luxury .luxury-hero-cta { display: flex !important; margin-top: 1px !important; } #luxury .luxury-hero-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 5px 12px !important; background: rgba(10, 12, 16, 0.6) !important; border: 1px solid #daa552 !important; border-radius: 2px !important; color: #daa552 !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 8.5px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important; transition: all 0.2s ease !important; -webkit-tap-highlight-color: transparent !important; } #luxury .luxury-hero-btn:hover, #luxury .luxury-hero-btn:active { background: rgba(218, 165, 82, 0.2) !important; color: #fce09b !important; } #luxury .luxury-hero-btn i { font-size: 8.5px !important; } /* ------------------------------------------------------------------------- 3. "OUR EXPERTISE" SECTION HEADER (Light Cream Background) ------------------------------------------------------------------------- */ #luxury .luxury-expertise-section { background-color: #f6f4ee !important; padding: 14px 10px 14px 10px !important; margin: 0 !important; width: 100% !important; position: relative !important; } #luxury .luxury-expertise-header { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin-bottom: 12px !important; padding: 0 !important; } #luxury .luxury-section-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; color: #16181e !important; margin: 0 !important; text-transform: uppercase !important; } #luxury .luxury-gold-dash { display: inline-block !important; width: 32px !important; height: 1px !important; background-color: #cbb48b !important; opacity: 0.75 !important; } /* ------------------------------------------------------------------------- 4. EXPERTISE GRID — STRICTLY 3 COLUMNS × 2 ROWS (6 CARDS) Matches Image 3 with left-aligned readable typography. ------------------------------------------------------------------------- */ #luxury .luxury-expertise-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px 8px !important; padding: 0 2px !important; max-width: 100% !important; margin: 0 auto !important; box-sizing: border-box !important; } #luxury .luxury-expertise-col { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Rectangular image */ #luxury .luxury-item-img-wrap { width: 100% !important; aspect-ratio: 1.25 / 1 !important; height: auto !important; overflow: hidden !important; border-radius: 2px !important; background-color: #e5e2dc !important; margin-bottom: 5px !important; } #luxury .luxury-item-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Card content body — Left-aligned, readable */ #luxury .luxury-item-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; width: 100% !important; padding: 0 !important; box-sizing: border-box !important; } /* Title — Clearly readable Cinzel bold */ #luxury .luxury-item-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(8.5px, 2.4vw, 9.5px) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #16181e !important; line-height: 1.2 !important; margin: 0 0 3px 0 !important; text-align: left !important; word-break: normal !important; } /* Small gold divider below title */ #luxury .luxury-item-divider { width: 16px !important; height: 1px !important; background-color: #cbb48b !important; margin: 0 0 4px 0 !important; display: block !important; } /* Description — Clearly readable Montserrat */ #luxury .luxury-item-desc { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(7.5px, 2.1vw, 8.5px) !important; font-weight: 400 !important; line-height: 1.36 !important; color: #555e6c !important; margin: 0 !important; text-align: left !important; max-width: 100% !important; } /* ------------------------------------------------------------------------- 5. PHILOSOPHY / STATEMENT SECTION + BOTTOM "EXPLORE OUR WORK →" BUTTON ------------------------------------------------------------------------- */ #luxury .luxury-statement-section { background-color: #f6f4ee !important; padding: 0 !important; margin: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; border-top: 1px solid rgba(222, 216, 204, 0.6) !important; } #luxury .luxury-statement-container { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 0 !important; margin: 0 !important; } /* Leaf icon + vertical divider + 2-line quote side-by-side */ #luxury .luxury-statement-left { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 12px 16px 14px 16px !important; width: 100% !important; box-sizing: border-box !important; } #luxury .luxury-statement-icon-wrap { flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important; } #luxury .luxury-statement-leaf { width: 22px !important; height: auto !important; display: block !important; opacity: 0.75 !important; } #luxury .luxury-statement-divider-vert { display: block !important; width: 1px !important; height: 30px !important; background-color: #d8d4cb !important; flex: 0 0 1px !important; margin: 0 !important; } #luxury .luxury-statement-text-wrap { text-align: left !important; } #luxury .luxury-statement-text { font-family: Georgia, 'Times New Roman', serif !important; font-size: 10.5px !important; line-height: 1.35 !important; letter-spacing: 0.01em !important; margin: 0 !important; } #luxury .luxury-statement-dark { color: #1a1e26 !important; font-weight: 400 !important; } #luxury .luxury-statement-gold { color: #9e7529 !important; font-weight: 600 !important; } /* Bottom dark bar with full-width button */ #luxury .luxury-statement-right { width: 100% !important; background-color: #07080a !important; padding: 10px 14px 12px 14px !important; box-sizing: border-box !important; display: flex !important; justify-content: center !important; align-items: center !important; border-top: 1px solid rgba(218, 165, 82, 0.25) !important; } #luxury .luxury-explore-work-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; min-height: 36px !important; padding: 0.50rem 1rem !important; background: transparent !important; border: 1px solid #daa552 !important; border-radius: 2px !important; color: #daa552 !important; font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 0.70rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: none !important; transition: all 0.2s ease !important; -webkit-tap-highlight-color: transparent !important; } #luxury .luxury-explore-work-btn:hover, #luxury .luxury-explore-work-btn:active { background: rgba(218, 165, 82, 0.15) !important; color: #fce09b !important; } #luxury .luxury-explore-arrow { font-size: 0.74rem !important; line-height: 1 !important; } /* === SECTION 3: GOVERNMENT TENDERS === */ /* Page container constraint */ #government-tenders .govt-page-main { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; padding-top: 56px !important; } /* Hide floating action buttons on Government Tenders mobile so cards and text remain unobstructed */ /* ------------------------------------------------------------------------- 1. COMPACT MOBILE HEADER: [ LOGO ] [ GET IN TOUCH → ] [ ☰ ] ------------------------------------------------------------------------- */ /* Compact "GET IN TOUCH →" header button toward the right */ /* Hamburger toggle at extreme right */ /* Mobile menu drawer: hidden by default, expands when checked */ /* ------------------------------------------------------------------------- 2. HERO — COMPACT FULL-WIDTH IMAGE BACKGROUND + TEXT OVERLAY (Left-aligned) Matches Image 3: Left dark gradient behind text; right road/viaduct bright & clear. ------------------------------------------------------------------------- */ #government-tenders .page-hero.govt-hero-section { position: relative !important; width: 100% !important; min-height: 320px !important; height: clamp(320px, 82vw, 355px) !important; max-height: 365px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; padding: 16px 14px 18px 14px !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background-color: #080a0d !important; } /* Hero image fills section background */ #government-tenders .govt-hero-section .page-hero-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important; pointer-events: none !important; overflow: hidden !important; } /* On mobile: use natural photograph hero.webp showing road, yellow barricades, and elevated metro */ #government-tenders .govt-hero-section .page-hero-bg img, #government-tenders .govt-hero-img { content: url('../images/govt-projects/hero.webp') !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 65% center !important; display: block !important; transform: none !important; animation: none !important; } /* Smooth dark gradient strictly on left behind text; right road/bridge remains bright & clear */ #government-tenders .govt-hero-gradient { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 2 !important; pointer-events: none !important; background: linear-gradient( to right, rgba(4, 6, 9, 0.95) 0%, rgba(4, 6, 9, 0.88) 36%, rgba(4, 6, 9, 0.55) 52%, rgba(4, 6, 9, 0.16) 68%, rgba(4, 6, 9, 0.03) 82%, transparent 100% ) !important; } /* Hero Content container */ #government-tenders .govt-hero-container { position: relative !important; z-index: 3 !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Constrain content to left ~48% leaving road and bridge open on right */ #government-tenders .govt-hero-content { max-width: 48% !important; text-align: left !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* Eyebrow: GOVERNMENT TENDERS */ #government-tenders .govt-eyebrow { display: block !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(8.5px, 2.3vw, 9.5px) !important; font-weight: 600 !important; letter-spacing: 0.14em !important; color: #daa552 !important; text-transform: uppercase !important; margin-bottom: 5px !important; } /* Title: INFRASTRUCTURE / THAT BUILDS / STRONGER FUTURES. (3 Lines) */ #government-tenders .govt-hero-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(19px, 5.2vw, 22px) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; line-height: 1.08 !important; margin: 0 0 7px 0 !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important; } #government-tenders .govt-title-white { color: #ffffff !important; display: inline !important; } #government-tenders .govt-title-gold { color: #daa552 !important; display: block !important; } #government-tenders .govt-hero-gold-line { display: none !important; } /* Paragraphs with comfortable mobile readability and compact footprint */ #government-tenders .govt-hero-desc { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(8.8px, 2.4vw, 9.6px) !important; font-weight: 400 !important; line-height: 1.34 !important; color: #d6d9df !important; margin: 0 0 5px 0 !important; max-width: 100% !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85) !important; } #government-tenders .govt-hero-desc-2 { margin-bottom: 10px !important; } /* Hero Button: VIEW OUR CAPABILITIES → */ #government-tenders .govt-hero-cta { display: flex !important; margin-top: 1px !important; } #government-tenders .govt-view-capabilities-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 5px 11px !important; background: rgba(10, 12, 16, 0.6) !important; border: 1px solid #daa552 !important; border-radius: 2px !important; color: #daa552 !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 8.5px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important; transition: all 0.2s ease !important; -webkit-tap-highlight-color: transparent !important; } #government-tenders .govt-view-capabilities-btn:hover, #government-tenders .govt-view-capabilities-btn:active { background: rgba(218, 165, 82, 0.2) !important; color: #fce09b !important; } #government-tenders .govt-view-capabilities-btn i { font-size: 8.5px !important; } /* ------------------------------------------------------------------------- 3. SECTION HEADER: OUR GOVERNMENT INFRASTRUCTURE SOLUTIONS ------------------------------------------------------------------------- */ #government-tenders .govt-solutions-section { background-color: #f7f5ef !important; padding: 14px 10px 14px 10px !important; width: 100% !important; position: relative !important; } #government-tenders .govt-solutions-header { text-align: center !important; margin-bottom: 12px !important; padding: 0 !important; } #government-tenders .govt-header-desktop { display: none !important; } #government-tenders .govt-header-mobile { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } #government-tenders .govt-mobile-eyebrow-wrap { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; margin-bottom: 3px !important; width: 100% !important; } #government-tenders .govt-mobile-line { flex: 0 0 32px !important; height: 1px !important; background-color: #cbb48b !important; opacity: 0.75 !important; } #government-tenders .govt-mobile-eyebrow { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.16em !important; color: #72624c !important; text-transform: uppercase !important; white-space: nowrap !important; } #government-tenders .govt-mobile-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; color: #16181e !important; text-transform: uppercase !important; margin: 0 !important; line-height: 1.25 !important; } /* ------------------------------------------------------------------------- 4. SOLUTIONS GRID — STRICTLY 3 COLUMNS × 2 ROWS (6 ITEMS) Matches Image 3 with Card 6 using Ashoka Lion Roundabout image & icon. ------------------------------------------------------------------------- */ #government-tenders .govt-solutions-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px 8px !important; padding: 0 2px !important; max-width: 100% !important; margin: 0 auto !important; box-sizing: border-box !important; } /* Hide Item 7 (Roundabouts) on mobile to preserve strict 3×2 grid */ #government-tenders .govt-solutions-grid > article:nth-child(n+7), #government-tenders .govt-solution-col:nth-child(7) { display: none !important; } /* Card Container */ #government-tenders .govt-solution-col { display: flex !important; flex-direction: column !important; background: #ffffff !important; border: 1px solid rgba(220, 215, 205, 0.7) !important; border-radius: 2px !important; overflow: hidden !important; position: relative !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important; min-width: 0 !important; } /* Remove desktop right border separators */ #government-tenders .govt-solution-col:not(:last-child)::after { display: none !important; } /* Image wrapper */ #government-tenders .govt-item-img-wrap { width: 100% !important; height: auto !important; aspect-ratio: 1.25 / 1 !important; overflow: hidden !important; background-color: #e5e2dc !important; position: relative !important; flex: 0 0 auto !important; } #government-tenders .govt-item-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Item 6 on mobile uses the Ashoka Lion Roundabout Fountain image and icon matching Image 3 */ #government-tenders .govt-solution-col:nth-child(6) .govt-item-img { content: url('../images/govt-projects/card-7-roundabouts.webp') !important; } #government-tenders .govt-solution-col:nth-child(6) .govt-item-icon { content: url('../images/govt-projects/icon-7-roundabouts.webp') !important; } /* Card content body */ #government-tenders .govt-item-content { padding: 0 4px 8px 4px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; flex: 1 1 auto !important; position: relative !important; background: #ffffff !important; box-sizing: border-box !important; } /* Circular Badge: Overlaps bottom of image */ #government-tenders .govt-item-icon-wrap { margin-top: -14px !important; margin-bottom: 4px !important; position: relative !important; z-index: 3 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #government-tenders .govt-item-icon { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #ffffff !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important; display: block !important; object-fit: contain !important; } /* Card Title — Clear, Readable Typography */ #government-tenders .govt-item-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(8.5px, 2.4vw, 9.5px) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #16181e !important; line-height: 1.2 !important; margin: 0 0 3px 0 !important; min-height: 2.3em !important; display: flex !important; align-items: center !important; justify-content: center !important; word-break: normal !important; text-align: center !important; } /* Card Description — Clean & Readable */ #government-tenders .govt-item-desc { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(7.5px, 2.1vw, 8.5px) !important; font-weight: 400 !important; line-height: 1.35 !important; color: #5a5f6b !important; margin: 0 !important; text-align: center !important; max-width: 100% !important; } /* ------------------------------------------------------------------------- 5. COMMITMENT SECTION & 3 VALUE ITEMS ------------------------------------------------------------------------- */ #government-tenders .govt-commitment-section { background-color: #f7f5ef !important; border-top: 1px solid rgba(220, 215, 205, 0.8) !important; padding: 12px 10px 10px 10px !important; width: 100% !important; } #government-tenders .govt-commitment-container { padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 9px !important; width: 100% !important; max-width: 100% !important; } /* Top half: Bridge watermark sketch on left + Headline and subtext */ #government-tenders .govt-commitment-left { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 0 4px !important; } #government-tenders .govt-commitment-watermark-wrap { display: block !important; flex: 0 0 68px !important; width: 68px !important; overflow: hidden !important; } #government-tenders .govt-commitment-watermark { width: 100% !important; height: auto !important; display: block !important; opacity: 0.75 !important; } #government-tenders .govt-commitment-divider-vert, #government-tenders .govt-commitment-icon-wrap { display: none !important; } #government-tenders .govt-commitment-text-wrap { flex: 1 1 auto !important; text-align: left !important; } #government-tenders .govt-commitment-headline { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; color: #16181e !important; line-height: 1.25 !important; margin: 0 0 3px 0 !important; } #government-tenders .govt-commitment-headline .gold-text { color: #b58d45 !important; } #government-tenders .govt-commitment-subtext { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 8.5px !important; font-weight: 400 !important; line-height: 1.35 !important; color: #5a5f6b !important; margin: 0 !important; } /* Bottom half: 3 VALUE ITEMS IN ONE HORIZONTAL ROW */ #government-tenders .govt-commitment-right { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; width: 100% !important; gap: 0 !important; border-top: 1px solid rgba(220, 215, 205, 0.6) !important; padding-top: 8px !important; } #government-tenders .govt-trust-badge { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 2px 4px !important; min-width: 0 !important; position: relative !important; } /* Thin vertical dividers between the 3 badges */ #government-tenders .govt-trust-badge:not(:last-child)::after { content: "" !important; position: absolute !important; right: 0 !important; top: 15% !important; height: 70% !important; width: 1px !important; background-color: rgba(210, 205, 195, 0.7) !important; } #government-tenders .govt-badge-icon { width: 22px !important; height: 22px !important; flex: 0 0 22px !important; object-fit: contain !important; display: block !important; } #government-tenders .govt-badge-text { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 8px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; line-height: 1.2 !important; color: #16181e !important; text-transform: uppercase !important; text-align: left !important; white-space: nowrap !important; } /* ------------------------------------------------------------------------- 6. FINAL BOTTOM BUTTON: VIEW OUR CAPABILITIES → ------------------------------------------------------------------------- */ #government-tenders .govt-mobile-bottom-bar { width: 100% !important; background-color: #07080a !important; padding: 10px 14px 12px 14px !important; box-sizing: border-box !important; display: flex !important; justify-content: center !important; align-items: center !important; border-top: 1px solid rgba(218, 165, 82, 0.25) !important; } #government-tenders .govt-bottom-capabilities-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; min-height: 36px !important; padding: 0.50rem 1rem !important; background: transparent !important; border: 1px solid #daa552 !important; border-radius: 2px !important; color: #daa552 !important; font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 0.70rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-decoration: none !important; transition: all 0.2s ease !important; -webkit-tap-highlight-color: transparent !important; } #government-tenders .govt-bottom-capabilities-btn:hover, #government-tenders .govt-bottom-capabilities-btn:active { background: rgba(218, 165, 82, 0.15) !important; color: #fce09b !important; } #government-tenders .govt-bottom-capabilities-btn i { font-size: 0.74rem !important; line-height: 1 !important; } /* === SECTION 4: PROJECTS === */ /* Page container constraint */ /* Hide floating action buttons on Projects mobile so cards and text remain unobstructed */ /* ------------------------------------------------------------------------- 1. COMPACT MOBILE HEADER: [ LOGO ] [ GET IN TOUCH → ] [ ☰ ] ------------------------------------------------------------------------- */ /* Compact "GET IN TOUCH →" header button toward the right */ /* Hamburger toggle at extreme right */ /* Mobile menu drawer: hidden by default */ /* ------------------------------------------------------------------------- 2. HERO — COMPACT FULL-WIDTH IMAGE BACKGROUND + TEXT OVERLAY (Left-aligned) Matches Image 4: Left dark gradient behind text; right villa & pool bright & clear. ------------------------------------------------------------------------- */ #projects .page-hero.projects-hero-section { position: relative !important; width: 100% !important; min-height: 340px !important; height: clamp(340px, 86vw, 380px) !important; max-height: 390px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; padding: 16px 14px 18px 14px !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background-color: #080a0d !important; } /* Full-width modern luxury villa hero image */ #projects .projects-hero-section .page-hero-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important; pointer-events: none !important; overflow: hidden !important; } #projects .projects-hero-section .page-hero-bg img, #projects .projects-hero-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 74% center !important; display: block !important; transform: none !important; animation: none !important; } /* Smooth dark gradient strictly on left behind text; right villa, loungers & pool remain bright & clear */ #projects .projects-hero-gradient { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 2 !important; pointer-events: none !important; background: linear-gradient( to right, rgba(5, 7, 10, 0.96) 0%, rgba(5, 7, 10, 0.88) 36%, rgba(5, 7, 10, 0.52) 52%, rgba(5, 7, 10, 0.14) 70%, rgba(5, 7, 10, 0.02) 84%, transparent 100% ) !important; } /* Hero Content container */ #projects .projects-hero-container { position: relative !important; z-index: 3 !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Constrain content to left ~52% leaving villa, palm tree, and pool open on right */ #projects .projects-hero-content { max-width: 52% !important; text-align: left !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* Eyebrow: OUR PROJECTS ──── */ #projects .projects-hero-tag-wrap { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 6px !important; } #projects .projects-hero-tag { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(8.5px, 2.3vw, 9.5px) !important; font-weight: 600 !important; letter-spacing: 0.14em !important; color: #daa552 !important; text-transform: uppercase !important; } #projects .projects-hero-tag-line { flex: 0 0 28px !important; height: 1px !important; background-color: #daa552 !important; opacity: 0.85 !important; display: inline-block !important; } /* Title: BUILDING / SPACES THAT / INSPIRE. (3 Lines) */ #projects .projects-hero-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(20px, 5.4vw, 23px) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; line-height: 1.10 !important; margin: 0 0 8px 0 !important; text-transform: uppercase !important; color: #ffffff !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important; } #projects .projects-hero-title .gold-accent { color: #daa552 !important; } #projects .projects-hero-divider { display: none !important; } /* Paragraph with comfortable mobile readability */ #projects .projects-hero-p { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(9px, 2.5vw, 10.2px) !important; font-weight: 400 !important; line-height: 1.38 !important; color: #d6d9df !important; margin: 0 0 10px 0 !important; max-width: 100% !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85) !important; } #projects .projects-hero-p br { display: none !important; } /* Hero Button: EXPLORE OUR PROJECTS → */ #projects .projects-hero-cta { display: flex !important; margin-top: 2px !important; } #projects .projects-hero-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 5px 11px !important; background: rgba(10, 12, 16, 0.6) !important; border: 1px solid #daa552 !important; border-radius: 2px !important; color: #daa552 !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 8.5px !important; font-weight: 700 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important; transition: all 0.2s ease !important; -webkit-tap-highlight-color: transparent !important; } #projects .projects-hero-btn:hover, #projects .projects-hero-btn:active { background: rgba(218, 165, 82, 0.2) !important; color: #fce09b !important; } #projects .projects-hero-btn i { font-size: 8.5px !important; } /* ------------------------------------------------------------------------- 3. FEATURED PROJECTS SECTION INTRO Matches Image 4: Left-aligned with thin gold accent lines ------------------------------------------------------------------------- */ #projects .projects-featured-section { background-color: #fcfbf8 !important; padding: 14px 10px 14px 10px !important; width: 100% !important; position: relative !important; } #projects .projects-featured-section .container-fluid { padding: 0 2px !important; } #projects .projects-featured-layout { display: flex !important; flex-direction: column !important; gap: 8px !important; } #projects .projects-featured-left { padding: 0 2px !important; max-width: 100% !important; width: 100% !important; } /* Tag: ─── FEATURED PROJECTS ─── */ #projects .projects-featured-left .section-tag { display: inline-flex !important; align-items: center !important; gap: 7px !important; color: #b58d45 !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; margin-bottom: 3px !important; } #projects .projects-featured-left .section-tag::before, #projects .projects-featured-left .section-tag::after { content: "" !important; display: inline-block !important; width: 24px !important; height: 1px !important; background-color: #b58d45 !important; opacity: 0.8 !important; } /* Heading: DIVERSE SPACES. ONE VISION. */ #projects .projects-featured-left h2 { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(15px, 4.3vw, 17.5px) !important; font-weight: 700 !important; letter-spacing: 0.04em !important; color: #16181e !important; line-height: 1.2 !important; margin: 0 0 5px 0 !important; text-transform: uppercase !important; } #projects .projects-featured-left h2 .gold-text { color: #b58d45 !important; font-weight: 700 !important; } /* Intro paragraph */ #projects .projects-featured-left p { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(9px, 2.5vw, 10px) !important; font-weight: 400 !important; line-height: 1.4 !important; color: #585d68 !important; margin-bottom: 10px !important; } /* Hide desktop intro button on mobile */ #projects .projects-featured-left .btn-gold-outline { display: none !important; } /* ------------------------------------------------------------------------- 4. VERTICAL PROJECT LIST — 5 COMPACT HORIZONTAL CARDS (IMAGE LEFT, TEXT RIGHT) Matches Image 4: Proportions ~46% image, clear readable titles & descriptions, arrow right. ------------------------------------------------------------------------- */ #projects .projects-featured-cards { display: flex !important; flex-direction: column !important; gap: 7px !important; width: 100% !important; padding: 0 !important; } /* Horizontal card row */ #projects .project-card-clean { display: flex !important; flex-direction: row !important; align-items: center !important; background: #ffffff !important; border: 1px solid rgba(220, 215, 205, 0.85) !important; border-radius: 4px !important; padding: 4px 10px 4px 4px !important; gap: 10px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important; overflow: hidden !important; text-decoration: none !important; min-height: 64px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } /* Image on LEFT (~46% width) */ #projects .project-card-img { flex: 0 0 46% !important; width: 46% !important; height: auto !important; aspect-ratio: 1.55 / 1 !important; border-radius: 3px !important; overflow: hidden !important; background-color: #0e1117 !important; } #projects .project-card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Content on RIGHT */ #projects .project-card-body { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex: 1 1 auto !important; min-width: 0 !important; padding: 2px 0 2px 2px !important; min-height: auto !important; gap: 6px !important; } #projects .project-card-body > div { flex: 1 1 auto !important; min-width: 0 !important; } /* Project Title — Clean & Readable */ #projects .project-card-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(10px, 2.75vw, 11.5px) !important; font-weight: 700 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: #16181e !important; margin: 0 0 2px 0 !important; min-height: auto !important; line-height: 1.2 !important; display: block !important; } /* Project Description — Clean & Readable */ #projects .project-card-desc { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(8.5px, 2.35vw, 9.5px) !important; font-weight: 400 !important; line-height: 1.35 !important; color: #585d68 !important; margin: 0 !important; min-height: auto !important; } /* Arrow on far right */ #projects .card-link-arrow { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; color: #cbb48b !important; font-size: 14px !important; text-decoration: none !important; padding-right: 2px !important; margin-left: 4px !important; } #projects .card-link-arrow i { color: #cbb48b !important; font-size: 14px !important; } /* ------------------------------------------------------------------------- 5. COMMITMENT SECTION & 4 VALUE ITEMS (ONE HORIZONTAL ROW) Matches Image 4: Dark background, 4 equal columns (25% each) with gold circular icon badges. ------------------------------------------------------------------------- */ #projects .values-strip { background-color: #07080a !important; padding: 14px 10px 14px 10px !important; border-top: 1px solid rgba(218, 165, 82, 0.2) !important; width: 100% !important; } #projects .values-strip .container-fluid { padding: 0 2px !important; } /* Outer row constraint */ #projects .values-strip > .container-fluid > .row { margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } #projects .commitment-intro-col { border-right: none !important; padding: 0 4px !important; margin-bottom: 2px !important; text-align: left !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* Tag: ─── OUR COMMITMENT */ #projects .commitment-intro-col .section-tag { display: inline-flex !important; align-items: center !important; gap: 7px !important; color: #daa552 !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; margin-bottom: 2px !important; } #projects .commitment-intro-col .section-tag::before { content: "" !important; display: inline-block !important; width: 24px !important; height: 1px !important; background-color: #daa552 !important; opacity: 0.8 !important; } /* Title: DELIVERS VALUE */ #projects .commitment-main-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; color: #daa552 !important; margin: 0 0 4px 0 !important; text-transform: uppercase !important; } #projects .commitment-gold-divider { display: block !important; width: 28px !important; height: 1px !important; background-color: #daa552 !important; opacity: 0.8 !important; margin-top: 4px !important; } /* 4 VALUES IN ONE HORIZONTAL ROW (Strictly 25% each) */ #projects .values-strip .col-lg-9 { padding: 0 !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } #projects .values-strip .col-lg-9 > .row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; gap: 0 !important; margin: 0 !important; padding-top: 10px !important; border-top: 1px solid rgba(218, 165, 82, 0.18) !important; } #projects .values-strip .col-lg-9 > .row > div, #projects .values-strip .col-6 { flex: 0 0 25% !important; width: 25% !important; max-width: 25% !important; min-width: 0 !important; padding: 0 2px !important; box-sizing: border-box !important; position: relative !important; } /* Thin vertical dividers between 4 items */ #projects .values-strip .col-lg-9 > .row > div:not(:last-child)::after { content: "" !important; position: absolute !important; right: 0 !important; top: 15% !important; height: 70% !important; width: 1px !important; background-color: rgba(218, 165, 82, 0.22) !important; } /* Value card styling */ #projects .commitment-value-card { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 0 1px !important; gap: 3px !important; background: transparent !important; border: none !important; box-shadow: none !important; width: 100% !important; box-sizing: border-box !important; } /* Circular Badge Outline matching Image 4 */ #projects .commitment-icon-box { width: 28px !important; height: 28px !important; border: 1px solid #b58d45 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 3px auto !important; background: transparent !important; } #projects .commitment-icon-box i { color: #daa552 !important; font-size: 20px !important; line-height: 1 !important; } #projects .commitment-text-box { text-align: center !important; width: 100% !important; } /* Value item title */ #projects .commitment-item-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(6.2px, 1.75vw, 7.5px) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #ffffff !important; line-height: 1.18 !important; margin: 0 0 2px 0 !important; min-height: 2.3em !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; word-break: normal !important; } /* Value item description */ #projects .commitment-item-desc { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(5.4px, 1.5vw, 6.4px) !important; font-weight: 400 !important; line-height: 1.25 !important; color: #9aa0a6 !important; margin: 0 !important; text-align: center !important; word-break: normal !important; } /* ------------------------------------------------------------------------- 6. FINAL BOTTOM BUTTON: VIEW ALL PROJECTS → ------------------------------------------------------------------------- */ #projects .projects-mobile-bottom-bar { width: 100% !important; background-color: #07080a !important; padding: 10px 14px 14px 14px !important; box-sizing: border-box !important; display: flex !important; justify-content: center !important; align-items: center !important; border-top: 1px solid rgba(218, 165, 82, 0.25) !important; } #projects .projects-bottom-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; min-height: 36px !important; padding: 0.50rem 1rem !important; background: transparent !important; border: 1px solid #daa552 !important; border-radius: 2px !important; color: #daa552 !important; font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 0.70rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-decoration: none !important; transition: all 0.2s ease !important; -webkit-tap-highlight-color: transparent !important; } #projects .projects-bottom-btn:hover, #projects .projects-bottom-btn:active { background: rgba(218, 165, 82, 0.15) !important; color: #fce09b !important; } #projects .projects-bottom-btn i { font-size: 0.74rem !important; line-height: 1 !important; } /* === SECTION 5: CAPABILITIES === */ /* Page container constraint */ /* Hide floating action buttons on Capabilities mobile so cards and text remain unobstructed */ /* ------------------------------------------------------------------------- 1. COMPACT MOBILE HEADER: [ LOGO ] [ GET IN TOUCH → ] [ ☰ ] ------------------------------------------------------------------------- */ /* Compact "GET IN TOUCH →" header button toward the right */ /* Hamburger toggle at extreme right */ /* Mobile menu drawer: hidden by default */ /* ------------------------------------------------------------------------- 2. HERO — COMPACT FULL-WIDTH IMAGE BACKGROUND + TEXT OVERLAY (Left-aligned) Matches Reference: Left dark gradient behind text; right steel framing bright & clear. ------------------------------------------------------------------------- */ #capabilities .page-hero.capabilities-hero-section { position: relative !important; width: 100% !important; min-height: 340px !important; height: clamp(340px, 86vw, 380px) !important; max-height: 390px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; padding: 16px 14px 18px 14px !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background-color: #080a0d !important; } /* Full-width infrastructure hero image */ #capabilities .capabilities-hero-section .page-hero-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important; pointer-events: none !important; overflow: hidden !important; } #capabilities .capabilities-hero-section .page-hero-bg img, #capabilities .capabilities-hero-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 74% center !important; display: block !important; transform: none !important; animation: none !important; } /* Smooth dark gradient strictly on left behind text; right steel framing & sky remain bright & clear */ #capabilities .capabilities-hero-gradient { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 2 !important; pointer-events: none !important; background: linear-gradient( to right, rgba(5, 7, 10, 0.96) 0%, rgba(5, 7, 10, 0.88) 36%, rgba(5, 7, 10, 0.52) 52%, rgba(5, 7, 10, 0.14) 70%, rgba(5, 7, 10, 0.02) 84%, transparent 100% ) !important; } /* Hero Content container */ #capabilities .capabilities-hero-container { position: relative !important; z-index: 3 !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Constrain content to left ~52% leaving steel framing and sunset open on right */ #capabilities .capabilities-hero-content { max-width: 60% !important; text-align: left !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* Eyebrow: OUR CAPABILITIES */ #capabilities .capabilities-hero-tag { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(8.5px, 2.3vw, 9.5px) !important; font-weight: 600 !important; letter-spacing: 0.14em !important; color: #daa552 !important; text-transform: uppercase !important; margin-bottom: 6px !important; display: block !important; } #capabilities .capabilities-hero-tag-rule { display: none !important; } /* Title: COMPREHENSIVE / CAPABILITIES. / COMPLETE / SOLUTIONS. (4 Lines) */ #capabilities .capabilities-hero-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(19.5px, 5.3vw, 22.5px) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; line-height: 1.10 !important; margin: 0 0 8px 0 !important; text-transform: uppercase !important; color: #ffffff !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important; } #capabilities .capabilities-hero-title .gold-accent { color: #daa552 !important; } #capabilities .capabilities-hero-divider { display: none !important; } /* Paragraph with comfortable mobile readability */ #capabilities .capabilities-hero-p { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(8.8px, 2.45vw, 10px) !important; font-weight: 400 !important; line-height: 1.38 !important; color: #d6d9df !important; margin: 0 0 10px 0 !important; max-width: 100% !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85) !important; } #capabilities .capabilities-hero-p br { display: none !important; } /* Hero Button: EXPLORE OUR CAPABILITIES → */ #capabilities .capabilities-hero-cta { display: flex !important; margin-top: 2px !important; } #capabilities .capabilities-hero-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 5px 11px !important; background: rgba(10, 12, 16, 0.6) !important; border: 1px solid #daa552 !important; border-radius: 2px !important; color: #daa552 !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 8.5px !important; font-weight: 700 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important; transition: all 0.2s ease !important; -webkit-tap-highlight-color: transparent !important; } #capabilities .capabilities-hero-btn:hover, #capabilities .capabilities-hero-btn:active { background: rgba(218, 165, 82, 0.2) !important; color: #fce09b !important; } #capabilities .capabilities-hero-btn i { font-size: 8.5px !important; } /* ------------------------------------------------------------------------- 3. WHAT WE DO SECTION HEADER Matches Reference: Centered with thin gold accent lines ------------------------------------------------------------------------- */ #capabilities .capabilities-section { background-color: #fcfbf8 !important; padding: 14px 10px 14px 10px !important; width: 100% !important; position: relative !important; } #capabilities .capabilities-container { padding: 0 2px !important; max-width: 100% !important; width: 100% !important; margin: 0 auto !important; } #capabilities .capabilities-header { text-align: center !important; margin-bottom: 10px !important; padding: 0 !important; } /* Tag: ─── WHAT WE DO ─── */ #capabilities .capabilities-tag { display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin-bottom: 4px !important; } #capabilities .cap-tag-line { display: inline-block !important; width: 26px !important; height: 1px !important; background-color: #b58d45 !important; opacity: 0.8 !important; } #capabilities .cap-tag-text { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; color: #b58d45 !important; text-transform: uppercase !important; } /* Heading: End-to-End Expertise. Built Around Your Needs. */ #capabilities .capabilities-main-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(14px, 4vw, 16.5px) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; color: #16181e !important; line-height: 1.25 !important; text-align: center !important; margin: 0 auto 6px auto !important; } /* Subtitle paragraph */ #capabilities .capabilities-main-desc { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(8.8px, 2.4vw, 9.8px) !important; font-weight: 400 !important; line-height: 1.4 !important; color: #585d68 !important; text-align: center !important; margin: 0 auto 12px auto !important; max-width: 92% !important; } /* ------------------------------------------------------------------------- 4. CAPABILITIES GRID — STRICTLY 2 COLUMNS × 4 ROWS (8 CARDS) Matches Reference: Clean 2-column layout, image top, dark circle badge, readable text. ------------------------------------------------------------------------- */ #capabilities .capabilities-8-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 8px !important; width: 100% !important; padding: 0 !important; margin-bottom: 14px !important; box-sizing: border-box !important; } /* Card */ #capabilities .cap-card { background: #ffffff !important; border: 1px solid rgba(220, 215, 205, 0.85) !important; border-radius: 3px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important; position: relative !important; min-width: 0 !important; } /* Card image */ #capabilities .cap-card-img { width: 100% !important; height: auto !important; aspect-ratio: 1.45 / 1 !important; overflow: hidden !important; background-color: #0e1117 !important; position: relative !important; } #capabilities .cap-card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Dark Circular Badge: Overlaps bottom-left of image */ #capabilities .cap-card-badge { width: 30px !important; height: 30px !important; background: #0b0d11 !important; border: 1.5px solid #daa552 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: -15px 0 3px 8px !important; position: relative !important; z-index: 5 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important; color: #daa552 !important; flex-shrink: 0 !important; } #capabilities .cap-card-badge svg { width: 14px !important; height: 14px !important; stroke: #daa552 !important; stroke-width: 1.7 !important; } /* Card body */ #capabilities .cap-card-body { padding: 2px 8px 8px 8px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; flex: 1 1 auto !important; width: 100% !important; box-sizing: border-box !important; } /* Card title row with gold arrow on far right */ #capabilities .cap-card-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(8.8px, 2.4vw, 10.2px) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; color: #16181e !important; text-transform: uppercase !important; margin: 2px 0 5px 0 !important; line-height: 1.2 !important; width: 100% !important; position: relative !important; padding-right: 14px !important; min-height: 2.2em !important; box-sizing: border-box !important; } #capabilities .cap-card-title br { display: none !important; } #capabilities .cap-amp { margin: 0 2px !important; } #capabilities .cap-card-title::after { content: "\2192" !important; position: absolute !important; right: 0 !important; top: 0 !important; color: #cbb48b !important; font-size: 13px !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-weight: 400 !important; line-height: 1.2 !important; } /* Bullet list */ #capabilities .cap-card-list { list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; gap: 3.5px !important; } #capabilities .cap-card-list li { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(7.5px, 2.05vw, 8.5px) !important; color: #555e6d !important; line-height: 1.3 !important; position: relative !important; padding-left: 8px !important; } #capabilities .cap-card-list li::before { content: none !important; position: absolute !important; left: 0 !important; top: 0 !important; color: #a0a6b2 !important; font-size: 9px !important; } /* ------------------------------------------------------------------------- 5. BOTTOM 6 PILLARS BOX (STRICTLY 6 EQUAL COLUMNS IN ONE ROW) Matches Reference: All 6 items side by side in one row with vertical dividers. ------------------------------------------------------------------------- */ #capabilities .capabilities-pillars-box { background: #ffffff !important; border: 1px solid rgba(220, 215, 205, 0.8) !important; border-radius: 3px !important; padding: 10px 2px !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 0 !important; width: 100% !important; box-sizing: border-box !important; margin-bottom: 12px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important; } #capabilities .cap-pillar-col { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 0 1.5px !important; gap: 2px !important; min-width: 0 !important; width: 100% !important; position: relative !important; box-sizing: border-box !important; } /* Thin vertical dividers between columns */ #capabilities .cap-pillar-col:not(:last-child)::after { content: "" !important; position: absolute !important; right: 0 !important; top: 15% !important; height: 70% !important; width: 1px !important; background-color: rgba(220, 215, 205, 0.65) !important; } /* Pillar Icon */ #capabilities .pillar-svg-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; margin-bottom: 2px !important; } #capabilities .pillar-svg-icon svg { width: 18px !important; height: 18px !important; stroke: #daa552 !important; stroke-width: 1.6 !important; fill: none !important; } /* Pillar text */ #capabilities .pillar-info { text-align: center !important; width: 100% !important; } #capabilities .pillar-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(5.5px, 1.5vw, 6.5px) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #16181e !important; line-height: 1.15 !important; margin: 0 0 2px 0 !important; min-height: 2.3em !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; word-break: normal !important; } #capabilities .pillar-desc { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(4.5px, 1.25vw, 5.2px) !important; font-weight: 400 !important; line-height: 1.2 !important; color: #6b7280 !important; margin: 0 !important; text-align: center !important; word-break: normal !important; } /* ------------------------------------------------------------------------- 6. FINAL BOTTOM BUTTON: EXPLORE OUR CAPABILITIES → ------------------------------------------------------------------------- */ #capabilities .capabilities-mobile-bottom-bar { width: 100% !important; background-color: #07080a !important; padding: 10px 14px 14px 14px !important; box-sizing: border-box !important; display: flex !important; justify-content: center !important; align-items: center !important; border-top: 1px solid rgba(218, 165, 82, 0.25) !important; } #capabilities .capabilities-bottom-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; min-height: 36px !important; padding: 0.50rem 1rem !important; background: transparent !important; border: 1px solid #daa552 !important; border-radius: 2px !important; color: #daa552 !important; font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 0.70rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-decoration: none !important; transition: all 0.2s ease !important; -webkit-tap-highlight-color: transparent !important; } #capabilities .capabilities-bottom-btn:hover, #capabilities .capabilities-bottom-btn:active { background: rgba(218, 165, 82, 0.15) !important; color: #fce09b !important; } #capabilities .capabilities-bottom-btn i { font-size: 0.74rem !important; line-height: 1 !important; } /* === SECTION 6: CONTACT US === */ /* Page container constraint */ /* Hide floating action buttons on Contact mobile to avoid obstructing form & content */ /* ------------------------------------------------------------------------- 1. COMPACT MOBILE HEADER: [ LOGO ] [ GET IN TOUCH → ] [ ☰ ] ------------------------------------------------------------------------- */ /* Compact "GET IN TOUCH →" header button toward the right */ /* Hamburger toggle at extreme right */ /* Mobile menu drawer: hidden by default */ /* ------------------------------------------------------------------------- 2. HERO — COMPACT FULL-WIDTH IMAGE BACKGROUND + TEXT OVERLAY (Left-aligned) Matches Reference: Left dark gradient behind text; right villa, water fountains & steps visible. ------------------------------------------------------------------------- */ #contact .contact-page-hero { position: relative !important; width: 100% !important; min-height: 350px !important; height: auto !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background-color: #080a0d !important; } #contact .contact-page-hero-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important; pointer-events: none !important; overflow: hidden !important; } #contact .contact-page-hero-bg img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 55% 65% !important; display: block !important; transform: none !important; } /* Smooth dark gradient strictly on left behind text; right villa, fountains & sky remain bright & clear */ #contact .contact-page-hero-gradient { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 2 !important; pointer-events: none !important; background: linear-gradient( to right, rgba(5, 7, 10, 0.97) 0%, rgba(5, 7, 10, 0.88) 36%, rgba(5, 7, 10, 0.50) 54%, rgba(5, 7, 10, 0.12) 74%, rgba(5, 7, 10, 0.02) 88%, transparent 100% ) !important; } /* Hero Content container */ #contact .contact-page-hero-container { position: relative !important; z-index: 3 !important; width: 100% !important; max-width: 100% !important; padding: 14px 14px 0 14px !important; margin: 0 !important; box-sizing: border-box !important; } #contact .contact-page-hero-content { max-width: 100% !important; width: 100% !important; } /* Tag / Eyebrow: CONTACT US ──── */ #contact .contact-page-hero-tag { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(8.5px, 2.3vw, 9.5px) !important; font-weight: 700 !important; letter-spacing: 0.12em !important; color: #c59b3f !important; text-transform: uppercase !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 2px !important; } #contact .contact-page-hero-tag::after { content: "" !important; display: inline-block !important; width: 28px !important; height: 1px !important; background-color: #c59b3f !important; opacity: 0.8 !important; } #contact .contact-page-hero-tag-rule { display: none !important; } /* Main Heading: 3 lines (LET'S BUILD / SOMETHING / LASTING.) */ #contact .contact-page-hero-title { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(19.5px, 5.4vw, 22.5px) !important; font-weight: 700 !important; line-height: 1.10 !important; letter-spacing: 0.02em !important; color: #ffffff !important; text-transform: uppercase !important; margin: 0 0 6px 0 !important; max-width: 60% !important; } #contact .contact-page-hero-title .gold-accent { color: #daa552 !important; font-weight: 700 !important; } #contact .contact-page-hero-divider { display: none !important; } /* Description paragraph constrained to left text area */ #contact .contact-page-hero-p { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(8.8px, 2.45vw, 10px) !important; font-weight: 400 !important; line-height: 1.38 !important; color: #c8cbd2 !important; margin: 0 0 11px 0 !important; max-width: 52% !important; letter-spacing: 0.01em !important; } /* Button: [ GET IN TOUCH → ] */ #contact .contact-page-hero-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5.5px 13px !important; border: 1px solid rgba(218, 165, 82, 0.85) !important; border-radius: 2px !important; background: rgba(10, 12, 16, 0.55) !important; color: #daa552 !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 8.8px !important; font-weight: 700 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; text-decoration: none !important; transition: all 0.25s ease !important; margin-bottom: 12px !important; } #contact .contact-page-hero-btn:hover { background: #daa552 !important; color: #0b0d10 !important; } #contact .contact-page-hero-btn i { font-size: 9.5px !important; } /* ------------------------------------------------------------------------- 3. HERO QUICKBAR: [ LET'S TALK ] | [ EMAIL US ] | [ OUR HOURS ] Matches Reference: 3 items in ONE horizontal row at the bottom of the hero. ------------------------------------------------------------------------- */ #contact .contact-page-hero-quickbar { position: relative !important; z-index: 4 !important; display: grid !important; grid-template-columns: 1fr 1.15fr 1fr !important; gap: 0 !important; width: 100% !important; max-width: 100% !important; background: rgba(7, 9, 12, 0.95) !important; border-top: 1px solid rgba(218, 165, 82, 0.3) !important; padding: 7px 4px !important; margin: 0 !important; box-sizing: border-box !important; } #contact .contact-hero-qitem { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important; padding: 0 4px !important; min-width: 0 !important; position: relative !important; box-sizing: border-box !important; } #contact .contact-hero-qitem:not(:last-child)::after { content: "" !important; position: absolute !important; right: 0 !important; top: 15% !important; height: 70% !important; width: 1px !important; background-color: rgba(218, 165, 82, 0.28) !important; } #contact .contact-hero-qicon { width: 22px !important; height: 22px !important; min-width: 22px !important; border: 1px solid #daa552 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #daa552 !important; font-size: 10px !important; flex-shrink: 0 !important; } #contact .contact-hero-qtext { display: flex !important; flex-direction: column !important; min-width: 0 !important; } #contact .contact-hero-qlbl { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 7.5px !important; color: #9aa0a6 !important; line-height: 1.15 !important; white-space: nowrap !important; } #contact .contact-hero-qval, #contact .contact-hero-qval a { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 8px !important; font-weight: 600 !important; color: #ffffff !important; text-decoration: none !important; line-height: 1.25 !important; white-space: normal !important; word-break: break-word !important; } /* ------------------------------------------------------------------------- 4. MAIN CONTACT SECTION — MOBILE LAYOUT Warm Off-White Background (#f7f5f2) ------------------------------------------------------------------------- */ #contact .contact-master-wrap { background-color: #f7f5f2 !important; padding: 16px 12px 20px 12px !important; width: 100% !important; box-sizing: border-box !important; } #contact .contact-mobile-layout { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 12px !important; box-sizing: border-box !important; } /* Section Intro */ #contact .contact-mobile-intro { text-align: left !important; margin-bottom: 0 !important; } #contact .contact-eyebrow-text { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; color: #b58d45 !important; text-transform: uppercase !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 3px !important; } #contact .contact-eyebrow-text::after { content: "" !important; display: inline-block !important; width: 28px !important; height: 1px !important; background-color: #b58d45 !important; opacity: 0.8 !important; } #contact .contact-main-heading { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: clamp(16.5px, 4.8vw, 19.5px) !important; font-weight: 700 !important; line-height: 1.2 !important; color: #12141a !important; margin: 0 0 5px 0 !important; letter-spacing: 0.01em !important; } #contact .contact-gold-rule-sm { display: none !important; } #contact .contact-main-p { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: clamp(8.8px, 2.4vw, 9.8px) !important; line-height: 1.42 !important; color: #555a64 !important; margin: 0 !important; max-width: 100% !important; } /* ------------------------------------------------------------------------- 5. CONTACT FORM (Matches 2-column screenshot) Row 1: Full Name | Email Address Row 2: Phone Number | Company / Organization Row 3: Project Type / Service Required Row 4: Your Message Row 5: SEND MESSAGE → (Full width) ------------------------------------------------------------------------- */ #contact .contact-mobile-form-wrap { width: 100% !important; box-sizing: border-box !important; margin-bottom: 6px !important; } #contact .contact-clean-form-element { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; } #contact .contact-clean-row-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; } #contact .contact-clean-field { width: 100% !important; box-sizing: border-box !important; } #contact .contact-clean-input { width: 100% !important; background: #ffffff !important; border: 1px solid rgba(215, 208, 196, 0.85) !important; padding: 8px 10px !important; font-size: 9.5px !important; color: #111317 !important; border-radius: 2px !important; outline: none !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; box-sizing: border-box !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } #contact .contact-clean-input:focus { background: #ffffff !important; border-color: #daa552 !important; box-shadow: 0 0 0 2px rgba(218, 165, 82, 0.18) !important; } #contact .contact-clean-input::placeholder { color: #7b818c !important; font-size: 9.2px !important; } #contact .contact-select-wrap { position: relative !important; width: 100% !important; } #contact .contact-select-field { appearance: none !important; -webkit-appearance: none !important; cursor: pointer !important; padding-right: 28px !important; } #contact .contact-select-chevron { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; color: #555a64 !important; font-size: 11px !important; } #contact .contact-clean-textarea { resize: vertical !important; min-height: 68px !important; height: 68px !important; box-sizing: border-box !important; } /* SEND MESSAGE → Button (Full width, dark/black, gold text) */ #contact .contact-clean-submit-btn { width: 100% !important; background: #0b0d11 !important; color: #daa552 !important; border: 1px solid #0b0d11 !important; padding: 9px 16px !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; border-radius: 2px !important; cursor: pointer !important; transition: all 0.25s ease !important; box-sizing: border-box !important; } #contact .contact-clean-submit-btn:hover, #contact .contact-clean-submit-btn:active { background: #181b22 !important; color: #fce09b !important; } #contact .contact-clean-submit-btn i { font-size: 10px !important; } /* ------------------------------------------------------------------------- 6. OFFICE & LOCATION SECTION — 2-COLUMN GRID (Matches Reference) Col 1 (Left): Reception Photo + Pan India Presence Card Col 2 (Right): India Presence Map + Contact Information (Office, Phone, Email) ------------------------------------------------------------------------- */ #contact .contact-mobile-office-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; align-items: start !important; box-sizing: border-box !important; margin-top: 4px !important; } /* Left Column */ #contact .contact-mobile-office-left { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; } #contact .contact-reception-box { width: 100% !important; height: auto !important; aspect-ratio: 1.45 / 1 !important; overflow: hidden !important; border-radius: 2px !important; background-color: #0b0d11 !important; } #contact .contact-reception-box img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } #contact .contact-pan-india-card { background: #f4efe8 !important; border: 1px solid rgba(218, 165, 82, 0.25) !important; padding: 10px 8px !important; display: flex !important; align-items: center !important; gap: 8px !important; border-radius: 2px !important; box-sizing: border-box !important; } #contact .contact-pan-india-pin { width: 24px !important; height: 24px !important; border: 1px solid rgba(218, 165, 82, 0.5) !important; border-radius: 50% !important; background: #ffffff !important; font-size: 11px !important; color: #daa552 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } #contact .contact-pan-india-info h4 { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 8.8px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; color: #111317 !important; margin: 0 0 2px 0 !important; text-transform: uppercase !important; line-height: 1.2 !important; } #contact .contact-pan-india-info p { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 7.6px !important; line-height: 1.35 !important; color: #555048 !important; margin: 0 !important; } /* Right Column */ #contact .contact-mobile-office-right { display: flex !important; flex-direction: column !important; gap: 6px !important; width: 100% !important; } #contact .contact-mid-map-box{ display: inline-block !important; width: 49% !important; vertical-align: top; } #contact .contact-mid-map-box img { width: 100% !important; max-height: 105px !important; object-fit: contain !important; display: block !important; } #contact .contact-blocks-wrapper { display: flex !important; flex-direction: column !important; gap: 6px !important; width: 100% !important; } #contact .contact-block-item { display: flex !important; align-items: flex-start !important; gap: 6px !important; margin-bottom: 10px !important; width: 100% !important; } #contact .contact-circle-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; border: 1px solid rgba(218, 165, 82, 0.6) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #daa552 !important; font-size: 10px !important; background: #faf6f0 !important; flex-shrink: 0 !important; margin-top: 1px !important; } #contact .contact-block-body { flex: 1 1 auto !important; min-width: 0 !important; } #contact .contact-block-body h3 { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 8.5px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; color: #111317 !important; margin: 0 0 1px 0 !important; text-transform: uppercase !important; line-height: 1.2 !important; } #contact .contact-block-body p { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 7.8px !important; line-height: 1.35 !important; color: #4f535d !important; margin: 0 !important; } #contact .contact-block-body a { color: #4f535d !important; text-decoration: none !important; } /* ------------------------------------------------------------------------- 7. UNIFIED FOOTER — MOBILE VIEW (Matches Reference) Row 1: [ Logo + Socials ] (left) | [ QUICK LINKS ] | [ OUR SERVICES ] Row 2: Copyright | Privacy Policy & Terms ------------------------------------------------------------------------- */ #contact .prime-footer { background: #08090c !important; border-top: 1px solid rgba(218, 165, 82, 0.26) !important; color: #a4acb9 !important; padding: 16px 12px 14px 12px !important; width: 100% !important; box-sizing: border-box !important; } #contact .prime-footer .container { padding: 0 !important; max-width: 100% !important; } #contact .prime-footer .row.g-4 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; margin: 0 0 10px 0 !important; width: 100% !important; } /* Col 1: Logo & Socials */ #contact .prime-footer .col-lg-4.col-md-6 { width: 34% !important; flex: 0 0 34% !important; max-width: 34% !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } #contact .footer-logo-img { height: 32px !important; max-height: 34px !important; width: auto !important; margin-bottom: 8px !important; } #contact .footer-desc { display: none !important; /* Hidden on mobile like reference */ } #contact .footer-social-links { display: flex !important; gap: 6px !important; margin: 0 !important; } #contact .footer-social-btn { width: 24px !important; height: 24px !important; font-size: 11px !important; border-radius: 50% !important; border: 1px solid rgba(218, 165, 82, 0.4) !important; color: #daa552 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; } /* Col 2: Quick Links */ #contact .prime-footer .col-lg-2.col-md-6.col-6 { width: 33% !important; flex: 0 0 33% !important; max-width: 33% !important; padding: 0 !important; } /* Col 3: Our Services */ #contact .prime-footer .col-lg-3.col-md-6.col-6 { width: 33% !important; flex: 0 0 33% !important; max-width: 33% !important; padding: 0 !important; } /* Col 4: Duplicate Get In Touch in footer -> Hidden on mobile */ #contact .prime-footer .col-lg-3.col-md-6:last-child { display: none !important; } #contact .footer-heading { font-family: var(--font-heading, 'Cinzel', serif) !important; font-size: 8.8px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; color: #e5e7eb !important; margin: 0 0 6px 0 !important; text-transform: uppercase !important; } #contact .footer-links-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; } #contact .footer-links-list li { padding: 0 !important; margin: 0 !important; line-height: 1.25 !important; } #contact .footer-links-list li a { font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 7.6px !important; color: #88909e !important; text-decoration: none !important; transition: color 0.2s ease !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; } #contact .footer-links-list li a:hover { color: #daa552 !important; } /* Bottom Bar */ #contact .footer-bottom-bar { margin-top: 10px !important; padding-top: 8px !important; border-top: 1px solid rgba(218, 165, 82, 0.18) !important; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; font-family: var(--font-body, 'Montserrat', sans-serif) !important; font-size: 7.2px !important; color: #717885 !important; } #contact .footer-bottom-bar a { color: #717885 !important; text-decoration: none !important; } #projects .commitment-icon-box { border: 0 !important; } .commitment-icon-box { flex: 0 0 25px; } } /* ========================================================================== MOBILE TYPOGRAPHY OVERRIDE (max-width: 767px) Strictly typography only: increases text readability on mobile devices. Zero layout, box-model, spacing, or visual design changes. ========================================================================== */ @media screen and (max-width: 767px) { /* 1. Main page headings */ h1, .hero-title, .home-hero-title, .home-main-title, .page-hero-title, .capabilities-hero-title, .contact-page-hero-title, .govt-hero-title, .luxury-hero-title, .projects-hero-title { font-size: clamp(24px, 6.5vw, 28px) !important; line-height: 1.25 !important; } /* 2. Section headings */ h2, .section-title, .home-section-title, .capabilities-main-title, .govt-section-title, .luxury-section-title, .contact-main-heading, .commitment-main-title, .section-title-dark, .footer-heading { font-size: clamp(20px, 5.5vw, 24px) !important; line-height: 1.3 !important; } /* 3. Card titles */ .expertise-card-title, .project-card-title, .govt-item-title, .luxury-item-title, .home-card-title, .about-pillar-title, .commitment-item-title, .card-title { font-size: clamp(13px, 3.5vw, 15px) !important; line-height: 1.3 !important; } /* Specific: Capabilities card titles */ .cap-card-title, #capabilities .cap-card-title, body.capabilities-page .cap-card-title { font-size: clamp(11.5px, 3.2vw, 13px) !important; line-height: 1.25 !important; } /* Specific: 6-column Pillars titles & descriptions */ .pillar-title, body.capabilities-page .pillar-title, #capabilities .pillar-title { font-size: clamp(7.5px, 2vw, 8.5px) !important; line-height: 1.2 !important; } .pillar-desc, body.capabilities-page .pillar-desc, #capabilities .pillar-desc { font-size: clamp(6.5px, 1.7vw, 7.5px) !important; line-height: 1.25 !important; } /* 4. Card descriptions */ .expertise-card-desc, .project-card-desc, .govt-item-desc, .luxury-item-desc, .home-card-text, .about-pillar-desc, .commitment-item-desc, .card-desc { font-size: clamp(11.5px, 3vw, 13px) !important; line-height: 1.45 !important; } /* 5. Card list items */ .cap-card-list, #capabilities .cap-card-list, body.capabilities-page .cap-card-list { font-size: clamp(10.5px, 2.8vw, 11.5px) !important; line-height: 1.4 !important; } .cap-card-list li, #capabilities .cap-card-list li, body.capabilities-page .cap-card-list li { font-size: clamp(10.5px, 2.8vw, 11.5px) !important; line-height: 1.4 !important; } /* 6. Paragraph / body text */ p, .capabilities-main-desc, .hero-desc, .section-desc, .statement-text, .about-desc, .home-main-subtitle, .govt-hero-desc, .govt-hero-desc-2, .luxury-hero-desc, .footer-desc, .luxury-statement-text, .govt-commitment-subtext, .contact-hero-qtext, .quote-text { font-size: clamp(13px, 3.5vw, 14.5px) !important; line-height: 1.5 !important; } /* 7. Small labels / tags */ .capabilities-hero-tag, .contact-page-hero-tag, .projects-hero-tag, .capabilities-tag, .cap-tag-text, .section-tag, .contact-eyebrow-text, .govt-badge-text, .stat-label, .eyebrow { font-size: clamp(10px, 2.6vw, 11.5px) !important; line-height: 1.3 !important; } /* 8. Navigation / menu text */ .nav-links-list li a, .nav-link-item { font-size: clamp(14px, 3.8vw, 16px) !important; line-height: 1.4 !important; } /* 9. Buttons / CTA text */ .nav-cta-btn, .mobile-header-cta, .mobile-header-cta span, .home-mobile-cta-btn, .about-mobile-cta-btn, .capabilities-hero-btn, .capabilities-bottom-btn, .projects-hero-btn, .projects-bottom-btn, .govt-view-capabilities-btn, .govt-bottom-capabilities-btn, .luxury-hero-btn, .luxury-explore-work-btn, .contact-page-hero-btn, .contact-clean-submit-btn, .btn-gold, .btn-gold-outline, .gallery-filter-btn { font-size: clamp(12px, 3.2vw, 13.5px) !important; line-height: 1.3 !important; } /* Footer links & bottom bar text */ .footer-links-list li a { font-size: clamp(11.5px, 3vw, 13px) !important; line-height: 1.4 !important; } .footer-bottom-bar, .footer-bottom-bar a { font-size: clamp(10px, 2.6vw, 11px) !important; line-height: 1.3 !important; } .home-headline-area { margin-top: -100px !important; } }