/** * Innovation Infra — Global Responsive (Mobile / Tablet / Desktop) * Load LAST in — overrides property.css & custom-sections * * Breakpoints: * Desktop ≥992px * Tablet 768px–991px * Mobile ≤767px */ /* ── Base: no horizontal scroll ── */ html { -webkit-text-size-adjust: 100%; } html, body { overflow-x: hidden !important; max-width: 100vw; width: 100%; } *, *::before, *::after { box-sizing: border-box; } img, video, iframe, embed, svg { max-width: 100%; height: auto; } table { max-width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } main#main, main { width: 100%; max-width: 100vw; overflow-x: hidden; } /* ── Containers (preserve desktop max-width) ── */ .container, .container-lg, .container-fluid { width: 100%; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } @media (min-width: 992px) { .container { max-width: var(--container, 1280px); padding-left: 25px; padding-right: 25px; } .container-lg { max-width: 1200px; } } @media (max-width: 767px) { .container, .container-lg, .container-fluid { padding-left: 15px !important; padding-right: 15px !important; } } /* ── Typography scale ── */ @media (max-width: 991px) { h1 { font-size: clamp(2rem, 5vw, 3.25rem); } h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); } .heading h2, .heading h3 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); } } @media (max-width: 767px) { h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); } h2 { font-size: clamp(1.5rem, 5vw, 2rem); } h3 { font-size: clamp(1.35rem, 4.5vw, 1.75rem); } .heading.h-small h2, .heading.h-small h3 { font-size: 1.35rem; } } /* ── Header ── */ @media (max-width: 991px) { header .header-wrapper .colA a.logo img { max-height: calc(var(--headerheight) - 16px); width: auto; } } @media (max-width: 767px) { header .header-wrapper .colC ul li .btn.dtl-btn { display: none; } } /* ── Modals / popups ── */ @media (max-width: 767px) { .model, .ham-pop, .enquire-pop { max-width: 100% !important; width: 100% !important; } .ham-pop .model-body, .enquire-pop .model-body { padding-left: 20px; padding-right: 20px; } } @media (min-width: 768px) and (max-width: 991px) { .model, .ham-pop, .enquire-pop { max-width: min(92vw, 480px) !important; } } /* ── Home banner & hero search ── */ .home-banner { overflow: hidden; } .home-banner .search-filter-wrap { left: 50%; transform: translateX(-50%); width: calc(100% - 30px); max-width: 850px; padding: 0; } .home-banner .search-filter-wrap h1 { color: #fff; text-align: center; max-width: 100%; } /* Tablet + Mobile: image on top, search bar below image */ @media (max-width: 991px) { .home-banner { --hero-img-height: clamp(260px, 44vh, 420px); display: flex !important; flex-direction: column !important; align-items: stretch !important; height: auto !important; min-height: 0 !important; padding: 0 !important; background: #fff; } .home-banner::before { height: var(--hero-img-height) !important; bottom: auto !important; background: linear-gradient( 180deg, rgba(0, 20, 60, 0.15) 0%, rgba(0, 10, 35, 0.45) 100% ) !important; } .home-banner .homeSlide-wrap { order: 1; position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: var(--hero-img-height) !important; min-height: var(--hero-img-height) !important; max-height: var(--hero-img-height) !important; flex-shrink: 0; z-index: 1; } .home-banner .home-swiper-silder, .home-banner .home-swiper-silder .swiper-wrapper, .home-banner .home-swiper-silder .swiper-slide { height: 100% !important; } .home-banner .home-swiper-silder .swiper-slide img { height: 100% !important; min-height: 100% !important; object-fit: cover; object-position: center; } .home-banner .swiper-pagination { order: 2; position: absolute !important; top: calc(var(--hero-img-height) - 36px) !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 4; margin: 0; width: auto; } .home-banner > .container { order: 3; position: relative !important; width: 100% !important; max-width: 100% !important; z-index: 3; padding: 20px 15px 28px !important; margin: 0; background: #fff; } .home-banner .search-filter-wrap { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; margin: 0 auto; } .home-banner .search-filter-wrap h1 { display: block !important; position: relative !important; top: auto !important; left: auto !important; right: auto !important; padding: 0; margin-bottom: 16px; font-size: clamp(1.2rem, 3.5vw, 1.65rem); color: var(--ui-primary, #00257a) !important; text-shadow: none !important; text-align: center; font-weight: 700; } .home-banner .hero-search__bar { box-shadow: 0 4px 24px rgba(0, 37, 122, 0.12) !important; border: 1px solid #e8ecf4; } .home-banner .train-div, .home-banner .banner-circle { display: none !important; } } @media (max-width: 767px) { .home-banner { --hero-img-height: clamp(220px, 38vh, 320px); } .home-banner > .container { padding: 16px 15px 24px !important; } .home-banner .search-filter-wrap h1 { font-size: 1.25rem; margin-bottom: 14px; } } @media (min-width: 768px) and (max-width: 991px) { .home-banner > .container { padding: 24px 20px 32px !important; } .hero-search__form { width: 100%; max-width: 100%; } .hero-search__bar { flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; } .hero-search__field, .hero-search__field--search, .hero-search__field--property, .hero-search__field--location { width: 100% !important; } .hero-search__submit { width: 100%; border-radius: 10px; } } /* ── Home sections — reduce excessive mobile padding ── */ @media (max-width: 767px) { .home-secA, .home-secC, .home-secD, .home-secE, .home-secG, .home-secH { padding: 3rem 0 5rem !important; margin: 0 !important; } .home-secH { padding-top: 3rem !important; } .home-secB { padding: 40px 0; } .home-secF { padding: 3rem 0 14rem !important; } .home-secI .container { max-width: 100%; margin-right: auto; padding-right: 15px; } } @media (min-width: 768px) and (max-width: 991px) { .home-secA, .home-secC, .home-secD, .home-secE, .home-secG, .home-secH { padding: 3.5rem 0 6rem !important; } .home-secF { padding: 4rem 0 20rem !important; } } /* Slider section nav on tablet */ @media (min-width: 768px) and (max-width: 991px) { .slider-section .upper-sec .slider-nav { position: relative; right: auto; bottom: auto; margin-top: 16px; margin-left: auto; } } /* ── Property listing (projects page) ── */ .property-listing-banner { overflow: hidden; } .property-listing-banner .container { max-width: 100%; } .property-listing-banner .flex { flex-wrap: wrap; } @media (max-width: 991px) { .property-listing-banner:not(.contact-banner) .flex { flex-direction: column; align-items: stretch; gap: 1.5rem; } .property-listing-banner:not(.contact-banner) .flex .search-filter-wrap, .property-listing-banner:not(.contact-banner) .flex .banner-circle { flex: 0 1 100%; max-width: 100%; width: 100%; } .property-listing-banner:not(.contact-banner) .flex .banner-circle .img { width: 100% !important; max-width: 420px; height: auto !important; aspect-ratio: 4/3; margin: 0 auto; } .property-listing-banner:not(.contact-banner) .search-filter-wrap h1 { font-size: clamp(1.35rem, 4vw, 2rem); text-align: center; } } @media (max-width: 767px) { .property-listing-banner:not(.contact-banner) { padding: 70px 0 40px !important; } .property-listing-banner:not(.contact-banner) .flex .banner-circle { display: none; } .property-listing-secA { padding: 2rem 0; } .property-grid-wrap.common-grid-wrap { grid-template-columns: 1fr !important; gap: 16px !important; } } @media (min-width: 768px) and (max-width: 991px) { .property-grid-wrap.common-grid-wrap { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } } /* ── About / contact pages ── */ @media (max-width: 991px) { .about-banner .content h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); } .contact-secA .flex { flex-direction: column; } .contact-secA .flex .col-md { flex: 0 1 100%; width: 100%; } } @media (max-width: 767px) { .about-page .banner .bg { height: 280px !important; } .contact-secB .flex, .contact-secC .flex { flex-direction: column; } .contact-secB .flex .col-md, .contact-secC .flex .col-md { flex: 0 1 100%; max-width: 100%; } } /* ── Main layout (property detail pages) ── */ .main-wrapper-flex { max-width: 100% !important; width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; gap: 20px !important; } @media (max-width: 1024px) { .main-wrapper-flex { flex-direction: column !important; } .main-content-left { max-height: none !important; overflow-y: visible !important; padding-right: 0 !important; width: 100% !important; } .sticky-sidebar-right { width: 100% !important; max-width: 100% !important; position: relative !important; top: 0 !important; max-height: none !important; overflow: visible !important; overflow-x: hidden !important; overscroll-behavior: auto !important; touch-action: pan-y !important; } } /* ── Hero banner (property detail) ── */ .property-detail-banner { width: 100%; max-width: 100vw; overflow: hidden; } .property-detail-banner .bg, .hero-slider-container, .hero-swiper { width: 100% !important; max-width: 100% !important; } .property-detail-banner.hero-scroll-priority .bg { height: 100% !important; min-height: 100% !important; max-height: 100% !important; } .property-detail-banner .banner-wrapper { width: 100% !important; max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; left: 0 !important; right: 0 !important; } .property-detail-banner .banner-wrapper .container { max-width: 100% !important; padding: 0 !important; } .property-detail-banner .flex { flex-wrap: wrap; } @media (max-width: 540px) { .property-detail-banner .banner-wrapper .content h1, .property-detail-banner .banner-wrapper h1 { display: none !important; } } @media (min-width: 541px) { .nav-strip-wrap .on-mobile { display: none !important; } } /* ── Nav strip (blue bar) ── */ .nav-strip2 { width: 100% !important; max-width: 100vw !important; overflow: hidden; } .nav-strip2 .container { width: 100% !important; max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; } @media (max-width: 991px) { .nav-strip-wrap { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; padding: 16px 0 !important; text-align: left !important; justify-content: flex-start !important; } .config-dtl { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; flex-direction: unset !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 12px 16px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .config-dtl li { width: 100% !important; min-width: 0 !important; } .nav-strip-wrap .card { width: 100% !important; margin: 0 !important; } .nav-strip-wrap .btn-wrap { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 10px !important; width: 100% !important; } .nav-strip-wrap .btn, .nav-strip-wrap .btn-wrap .btn { width: 100% !important; max-width: 100% !important; justify-content: center !important; box-sizing: border-box !important; } } @media (max-width: 675px) { .config-dtl { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } } @media (max-width: 420px) { .config-dtl { grid-template-columns: 1fr !important; } } @media (max-width: 540px) { .nav-strip-wrap .on-mobile { display: block !important; width: 100%; } .nav-strip-wrap .on-mobile h1 { font-size: 1.1rem !important; line-height: 1.3 !important; } } /* ── Property content sections ── */ .prop-dtl-secB, .prop-dtl-secG, .prop-dtl-secz, .prop-dtl-secy, .prop-dtl-secI, section { max-width: 100%; overflow-x: hidden; } .prop-dtl-secB .prop-dtl-secB-bg { width: 100% !important; max-width: 100% !important; padding: 15px !important; box-sizing: border-box; } .prop-dtl-secB .content { max-width: 100% !important; word-wrap: break-word; overflow-wrap: break-word; } .prop-dtl-secG iframe { width: 100% !important; max-width: 100% !important; min-height: 250px; height: 50vw; max-height: 400px; } .prop-dtl-secz img { width: 100% !important; height: auto !important; } /* ── Floor plans ── */ @media (min-width: 992px) { .fpContainer .row.gap-row { flex-wrap: wrap !important; overflow-x: visible !important; justify-content: center; } .fpBox { flex: 0 0 calc(33.333% - 18px) !important; max-width: calc(33.333% - 18px) !important; } .fp-scroll-wrap { padding: 0 !important; } .fp-scroll-btn { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .fpContainer .row.gap-row { flex-wrap: wrap !important; overflow-x: visible !important; justify-content: center; } .fpBox { flex: 0 0 calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; } } @media (max-width: 767px) { .fpContainer .row.gap-row { padding-left: 8px; padding-right: 8px; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .fpBox { flex: 0 0 88% !important; max-width: 88% !important; scroll-snap-align: center; } .fp-scroll-btn { display: flex !important; } } /* ── Location & FAQs ── */ @media (max-width: 991px) { .location-grid-layout { grid-template-columns: 1fr !important; } .section-faqs .faq-layout { flex-direction: column !important; } .section-faqs .faq-intro-panel, .section-faqs .faq-accordion-panel { flex: none !important; width: 100% !important; } } /* ── About project / highlights ── */ @media (max-width: 767px) { .about-project-section { padding: 40px 0 !important; } .about-project-section .section-title, .section-floorplan h2, .section-location .heading h2, .section-faqs .faq-section-head h2 { font-size: 1.4rem !important; } .gradient-list { grid-template-columns: 1fr !important; } .project-flex-wrapper { flex-direction: column !important; } .left-content { padding: 24px 16px !important; } .left-content h2 { font-size: 1.5rem !important; } } /* ── Sidebar panels — tablet: partial width; mobile: full screen ── */ @media (min-width: 769px) and (max-width: 1024px) { .custom-sidebar-panel { width: min(92vw, 420px) !important; max-width: 420px !important; transform: translateX(105%) !important; } #project-details-sidebar:target, #walkthrough-sidebar-panel:target { transform: translateX(0) !important; } } @media (max-width: 768px) { .custom-sidebar-panel { left: 0 !important; right: 0 !important; top: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; transform: translateX(105%) !important; transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) !important; border-left: none !important; border-top: 4px solid #27ae60; box-shadow: none !important; box-sizing: border-box; } #project-details-sidebar:target, #walkthrough-sidebar-panel:target { inset: 0 !important; width: 100vw !important; max-width: 100vw !important; transform: translateX(0) !important; } body:has(#project-details-sidebar:target) .sidebar-backdrop, body:has(#walkthrough-sidebar-panel:target) .sidebar-backdrop, body:has(.enquire-pop.is-open) .sidebar-backdrop { background: transparent !important; opacity: 1 !important; pointer-events: auto !important; } .custom-sidebar-panel .sidebar-footer { padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important; } } /* ── Swiper ── */ .swiper, .swiper-wrapper { max-width: 100%; } /* ── Property cards ── */ @media (max-width: 767px) { .property-col { min-height: auto; } .property-col .figcaption .btm-wrp { flex-wrap: wrap; } .property-col .figcaption .btm-wrp .btn-wvg { width: 100%; justify-content: flex-end; } } /* ── Footer ── */ footer, .footer { max-width: 100vw; overflow-x: hidden; } @media (max-width: 767px) { footer .middle-footer { padding: 32px 0 48px; background: linear-gradient(90deg, #FFFFFF 0%, #F4F4F4 100%) !important; } footer .middle-footer .flex .col-md h6, footer .middle-footer .flex .from-banner h6, footer .middle-footer .flex form.from-banner h6 { color: #333333 !important; -webkit-text-fill-color: #333333; } footer .middle-footer .flex .col-md ul li a { color: #666666 !important; -webkit-text-fill-color: #666666; } footer .middle-footer .flex .col-md ul li a:hover { color: var(--primary) !important; -webkit-text-fill-color: var(--primary); } footer .middle-footer .flex .from-banner .form .form-group label, footer .middle-footer .flex form.from-banner .form .form-group label, footer .middle-footer .flex .col-md .form .form-group label { color: #666666 !important; -webkit-text-fill-color: #666666; } footer .middle-footer .flex .from-banner .form .form-group.active label, footer .middle-footer .flex .from-banner .form .form-group input:focus ~ label, footer .middle-footer .flex .from-banner .form .form-group input.valid ~ label, footer .middle-footer .flex .from-banner .form .form-group input:not(:placeholder-shown) ~ label, footer .middle-footer .flex form.from-banner .form .form-group.active label, footer .middle-footer .flex form.from-banner .form .form-group input:focus ~ label, footer .middle-footer .flex form.from-banner .form .form-group input.valid ~ label, footer .middle-footer .flex form.from-banner .form .form-group input:not(:placeholder-shown) ~ label, footer .middle-footer .flex .col-md .form .form-group.active label, footer .middle-footer .flex .col-md .form .form-group input:focus ~ label, footer .middle-footer .flex .col-md .form .form-group input.valid ~ label, footer .middle-footer .flex .col-md .form .form-group input:not(:placeholder-shown) ~ label { font-size: 12px !important; top: -6px !important; color: #666666 !important; -webkit-text-fill-color: #666666 !important; } footer .middle-footer .flex .from-banner .form input, footer .middle-footer .flex form.from-banner .form input, footer .middle-footer .flex .col-md .form input { color: #333333 !important; -webkit-text-fill-color: #333333; } } /* ── Buttons touch targets ── */ @media (max-width: 767px) { .button, .btn, button.btn { min-height: 44px; } } /* ── Blogs / careers / testimonials ── */ @media (max-width: 991px) { .blog-grid, .career-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } } @media (max-width: 767px) { .blog-grid, .career-grid, .testimonial-grid { grid-template-columns: 1fr !important; gap: 16px !important; } } /* ── Forms ── */ @media (max-width: 767px) { .form-grid { grid-template-columns: 1fr !important; --gaplr: 0; --gaptb: 20px; } } /* ── Utility: prevent any child from forcing overflow ── */ @media (max-width: 991px) { .flex, .inline-flex { max-width: 100%; } [class*="wrap"], [class*="grid"], [class*="slider"], [class*="swiper"] { max-width: 100%; } } @import url("ui-enhancements.css");