/* ========================================== RESPONSIVE FIXES FOR DISCLAIMER POPUP ========================================== */ /* Tablet (max-width: 1024px) */ /* Tablet (min-width: 769px) and (max-width: 1024px) */ /* Mobile (max-width: 768px) */ /* INDEX – NAVBAR – Laptop */ /* SMALL LAPTOP + TABLET MENU */ /* LARGER LAPTOP – slightly wider */ /* LAPTOP HERO (max-width: 1280px) */ /* TABLET HERO (max-width: 992px) */ /* NAVBAR – Laptop */ /* INDEX – NAVBAR – Tablet */ /* INDEX – NAVBAR – Mobile */ /* INDEX – HERO – Laptop */ /* INDEX – HERO – Tablet */ /* INDEX – HERO – Mobile */ /* LAPTOP: smaller text card, more over image */ /* TABLET: smaller card + image, still side by side */ /* SMALL MOBILE: keep stacked */ /* Mobile: 300px – 767px */ /* SMALL MOBILE: Stacked layout with full-width map */ /* Mobile: max-width 480px */ /* INDEX – MAP – Laptop */ /* INDEX – MAP – Tablet */ /* INDEX – MAP – Mobile Tablet */ /* INDEX – MAP – Mobile */ /* INDEX – MAP – Small Mobile */ /* WHO WE ARE – Laptop */ /* WHO WE ARE – Tablet */ /* WHO WE ARE – Mobile */ /*Brand / vertical blocks responsiveness*/ /*General fixes for horizontal overflow prevention*/ /* ENVIRONMENTAL CARE — Laptop */ /* ENVIRONMENTAL CARE — Tablet */ /* LAPTOP: shrink image, text, logo */ /* TABLET: even smaller but still full section visible */ /* ========================= Tablet Responsive (768px) Same layout as desktop but smaller ========================= */ /* MOBILE: keep your existing stacking behaviour below 600px */ /* ENVIRONMENTAL CARE — Mobile */ /* Featured Projects */ /* LAPTOP: 1025–1280px */ /* TABLET: 768–1024px */ /* TABLET 768–1024px – FINAL FIX */ /* TABLET 768–1024px */ /* Featured Projects card */ /* TABLET 768–1024px: 2 cards top, 1 centered bottom */ /* FEATURED PROJECTS — Mobile */ /* project count */ /* ========= LAPTOP (≤1280px) ========== */ /* ========= TABLET (≤992px) ========== */ /* ----------- MOBILE RESPONSIVE FIX (≤768px) ----------- */ /*project*/ /* INDEX - OUR SERVICES — Laptop refined */ /*INDEXT- OUR SERVICES — Tablet */ /*INDEX - OUR SERVICES — Mobile */ @media (max-width: 480px) { /* Section heading - scoped to service section context */ .service-section+.underline, .service-section h2 { font-size: 1.3rem !important; margin-top: -8px !important; margin-bottom: 6px !important; } .service-section .underline { width: 90px !important; height: 2px !important; margin-bottom: 10px !important; } /* Cards layout */ } /* OUR SERVICES PAGE — Laptop refined */ /* OUR SERVICES PAGE — Tablet */ /* OUR SERVICES PAGE — Mobile */ /* INDEX - VALUE ADDED SERVICES — Laptop 1025–1536px */ /* INDEX - VALUE ADDED SERVICES — Tablet 1024px */ /* INDEX - VALUE ADDED SERVICES — Tablet 768px */ /* INDEX - VALUE SERVICES — Mobile */ /* VALUE ADDED SERVICES PAGE — Laptop 992–1335px */ /* VALUE ADDED SERVICES PAGE — tablet 768–991px */ @media (min-width: 768px) and (max-width: 1024px) { .vas-row { display: flex !important; align-items: center !important; } .vas-row.reverse { flex-direction: row-reverse !important; } .vas-text { text-align: center !important; } @media (max-width: 1023.98px) { .vas-text { flex: 0 0 48% !important; } } .vas-text p { max-width: 520px !important; margin: 0 auto 30px auto !important; } @media (max-width: 1023.98px) { .vas-img { flex: 0 0 48% !important; } } .vas-img img { max-height: 300px !important; object-fit: cover !important; border-radius: 16px !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important; } @media (max-width: 1023.98px) { .vas-img img { width: 100% !important; } } } /* VALUE ADDED SERVICES PAGE — mobile 300–767px */ /* ================================ VALUE ADDED SERVICES – MOBILE FIX For screens 300px to 767px ================================ */ @media (max-width:767px) { .value-services-page { text-align: center !important; } /* Change order: Image → Logo → Text */ .vas-row, .vas-row.reverse { display: flex; flex-direction: column !important; } .vas-img { order: 1 !important; width: 100%; } .vas-text { order: 3 !important; } /* Main container width */ /* Stack items vertically */ .vas-row, .vas-row.reverse { flex-direction: column !important; text-align: center !important; } /* Fix IMAGE size (same like second image) */ .vas-img img { height: 250px !important; border-radius: 8px; object-fit: cover !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); margin: 0 auto -10px auto !important; width: 100% !important; } /* Fix LOGO size */ .vas-logo img { display: block; } /* Text block */ .vas-text { text-align: center !important; padding: 0 10px; max-width: 100% !important; } .vas-text p { margin-top: -20px !important; } /* Section underline spacing fix */ .underline { margin-bottom: 80px !important; } } /* FOOTER — Laptop 1025–1280px */ /* FOOTER — Tablet 768–1024px, still one row but tighter */ /* FOOTER — Mobile 300–767px */ /* ================================ RESPONSIVE — HERO BANNER For project.html lux-hero section ==================================*/ /* Laptops ≤1280px */ /* Tablets ≤992px */ /* Mobile ≤600px */ /* ================================ RESPONSIVE — FILTER WRAPPER (Project Filters) ==================================*/ /* Tablet: 768px – 991px */ /* Laptop: 992px – 1365px */ /* Small screens: reduce filter size Mobile*/ /* ========================================================== RESPONSIVE — ONGOING PROJECTS (cinema-grid section) (This applies to both Ongoing & Completed sections) ==========================================================*/ /* Laptops ≤1280px */ @media (max-width:1536px) { .ongoingwrap.cinema-grid { max-width: 1400px !important; margin: 40px auto !important; padding: 0 40px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 80px !important; /* row gap, column gap */ } .ongoingwrap.cinema-card { height: 350px !important; border-radius: 22px !important; background-size: cover !important; background-position: center !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16) !important; } /* 3rd card: centered on second row */ .ongoingwrap.cinema-card:nth-child(3) { grid-column: 1 / -1 !important; /* span both columns */ max-width: 520px !important; justify-self: center !important; /* center within grid */ } .ongoingwrap.cinema-glass { padding: 12px 18px !important; } .ongoingwrap.cinema-glass .project-heading { font-size: 15px !important; gap: 6px !important; } .ongoingwrap.cinema-glass .project-logo { height: 30px !important; width: 82px !important; } } /* Tablets ≤992px */ /* ============================ Mobile Styles (≤ 767px) =============================== */ /* ========================================================== RESPONSIVE — COMPLETED PROJECTS SECTION (completedwrap, projects-list, project-card) ==========================================================*/ /* Laptop size tuning only – keep same layout, just smaller */ @media (min-width: 1024px) and (max-width: 1536px) { .completed-cards-container { gap: 26px !important; } /* Card slightly smaller */ .project-card.large { border-radius: 18px !important; } /* Image height smaller but same look */ /* Logo + title row a bit smaller */ /* Body text slightly reduced */ /* Sold out badge slightly smaller */ .completed-pagination { margin-top: 25px; justify-content: center; } } /*tablet Laptop size tuning only – keep same layout, just smaller */ @media (min-width: 768px) and (max-width: 992px) { .completed-cards-container { gap: 26px !important; } /* Card slightly smaller */ .project-card.large { border-radius: 18px !important; } /* Image height smaller but same look */ /* Logo + title row a bit smaller */ /* Body text slightly reduced */ /* Sold out badge slightly smaller */ .completed-pagination { margin-top: 25px; justify-content: center; } } /* Mobile ≤600px */ /* ============================ Completed Projects – Mobile =============================== */ /* responsive for pagination section */ /* 3 ongoing project page*/ /* Hero Section */ /* HERO SECTION — Mobile */ /* HERO SECTION — Tablet */ /* HERO SECTION — Tablet (768px to 1024px) */ /* FORM SECTION — Tablet (768px to 1024px) */ /* FORM SECTION — Mobile (300px to 767px) */ /* MAIN SECTION — Mobile (300px to 767px) */ /* MAIN SECTION — Mobile (300px to 767px) */ /* Gallery SECTION — Mobile (300px to 767px) */ /* Gallery SECTION — Tablet (768px to 1024px) */ /* ========================== ABOUT US RESPONSIVE ========================== */ /* About-us Section Responsive Fixes for Tablet (768px-1024px) & Laptop (1024px+) */ /* Tablet: Compact layout, proper margins, aligned text/logo */ /* Laptop: Refined spacing, professional alignment */ /* About fisrt mobile*/ /* ========================================================== Second About RESPONSIVE BREAKPOINTS ========================================================== */ /* Tablet: 768px - 991px */ /* Laptop: 992px - 1335px */ /* ============ Second About MOBILE ============ */ /* ================================ CONTACT ================================ */ /* LAPTOP */ /* LAPTOP ONLY: 992px – 1365px */ /* TABLET: 768px – 991px */ /* --------------------------------------------- 📱 MOBILE (max-width: 768px) --------------------------------------------- */ /* ------------------------------------------------------------------ PERFECT RESPONSIVE FIXES FOR ABT PAGE -------------------------------------------------------------------*/ /* ===== Tablet (max-width: 992px) ===== */ /* ===== Mobile (max-width: 768px) ===== */ /* ===== Small Mobile (max-width: 480px) ===== */ /* ================================ PUBLIC ADVISORY & TERMS AND CONDITIONS ================================ */ /* Public Advisory & Terms and conditions */ /* Laptop: 1335px to 992px */ /* Tablet: 991px to 768px */ /* Mobile: 300px to 767px */ /* CAREER PAGE RESPONSIVE */ /* TABLET CAREER PAGE RESPONSIVE */ @media (min-width:768px) and (max-width:1024px) { /* ------- HEADING -------- */ /* ------- JOB TABLE -------- */ /* -------- CONTACT AREA -------- */ .career-section .contact-area .underline { width: 150px !important; height: 3px !important; background: #0071bb !important; margin-bottom: 20px !important; border-radius: 10px !important; } .career-section input:not(.form-input, [type="checkbox"]) { width: 100% !important; padding: 10px !important; border: 1px solid #c9c9c9 !important; border-radius: 5px !important; } } /* MOBILE CAREER PAGE RESPONSIVE */ @media (max-width:767px) { /* 1. Outer section margin / padding */ /* 2. Heading text size */ .career-section .underline { width: 0 !important; transition: width 0.6s ease !important; transform-origin: left !important; margin: 0 0 20px 0 !important; } .career-section .underline.show { width: 120px !important; transition-delay: 0.4s !important; transform-origin: left !important; } /* 3. Job table – horizontal scroll */ /* 4. Contact area – stack form & address */ /* 4a. Form inputs full-width & compact */ } /* ===== Added: NRI Corner outer container — Mobile <= 480px ===== */ /* ===== Added: NRI NAV LIST (.nri-tabs) — Mobile <= 480px ===== */ /* ===== Added: NRI CONTENT outer body — Mobile <= 480px ===== */ /* ===== Added: LEGAL INFO (content-box#legal-info) — Mobile <= 480px ===== */ /* Responsive adjustments for loan accordion mobile , tablet , laptop - preserves existing animations */ /* Responsive adjustments for NRI FAQs accordion mobile , tablet , laptop - preserves existing animations */ /* nri faq last doc section */ /* ===== Enquire section - Mobile (max-width: 480px) ===== */ /* Mobile-only: ensure NRI Home Fest banner fits small screens (max-width:480px) */ /* Mobile: Home Fest Registration form tweaks (max-width:480px) */ /* Fix horizontal clipping/overflow on very small screens */ /* Mobile adjustments why attend for small screens (max-width: 480px) */ /* Mobile adjustments project map for small screens (max-width: 480px) */ /* Laptop adjustments for enquiry form (max-width: 1024px) */ /* ================= Laptop (max-width: 1024px) ================= */ /* ================= Tablet (max-width: 768px) ================= */ /* ===== Legal section – Tablet (max-width: 768px) ===== */ /* ===== loan section – Tablet (max-width: 768px) ===== */ /* ===== FAQ section – Tablet (max-width: 768px) ===== */ /* ===== ENQ section – Tablet (max-width: 768px) ===== */ /* ========================================== RESPONSIVE FIXES FOR DISCLAIMER POPUP ========================================== */ /* Tablet (max-width: 1024px) */ /* Tablet (min-width: 769px) and (max-width: 1024px) */ @media (min-width: 769px) and (max-width: 1024px) { .disclaimer-content { width: 85% !important; max-height: 85vh !important; padding: 0 30px !important; /* spacing controlled by header & button */ overflow-y: auto !important; overscroll-behavior: contain; /* 🔥 stops body scroll */ -webkit-overflow-scrolling: touch; /* 🔥 smooth iOS scroll */ } .disclaimer-content h2 { font-size: 22px !important; padding: 18px 0 22px !important; } .disclaimer-content p { margin-bottom: 12px !important; } /* Sticky bottom button INSIDE same box */ .diclam-btn { position: sticky !important; bottom: 0 !important; background: #fff !important; padding: 14px 0 18px !important; border-top: 1px solid #eee !important; display: flex !important; justify-content: flex-end !important; /* RIGHT SIDE */ } #agreeBtn { width: auto !important; font-size: 15px !important; padding: 10px 22px !important; border-radius: 20px !important; } } /* Mobile (max-width: 768px) */ @media (max-width: 768px) { .disclaimer-content { width: 90% !important; max-height: 60vh !important; padding: 0 20px !important; /* header + button manage spacing */ overflow-y: auto !important; } .disclaimer-content h2 { font-size: 22px !important; padding: 16px 0 20px !important; } .disclaimer-content p { margin-bottom: 10px !important; } /* Sticky button container */ .diclam-btn { position: sticky !important; bottom: 0 !important; background: #fff !important; padding: 12px 0 16px !important; border-top: 1px solid #eee !important; display: flex !important; justify-content: flex-end !important; /* RIGHT SIDE */ } /* Button */ #agreeBtn { width: auto !important; max-width: none !important; margin: 0 !important; font-size: 13px !important; padding: 10px 20px !important; border-radius: 20px !important; } } /* INDEX – NAVBAR – Laptop */ /* SMALL LAPTOP + TABLET MENU */ @media (min-width: 768px) and (max-width: 1280px) { .mobile-menu { width: 270px !important; padding: 14px 16px !important; transform: none !important; border-radius: 10px !important; } .mobile-menu ul li a { display: block; padding: 8px 14px !important; font-size: 15px !important; } .mobile-menu ul li { margin-bottom: 6px !important; } } /* LARGER LAPTOP – slightly wider */ @media (min-width: 1281px) and (max-width: 1536px) { /* CLOSED STATE (default) */ .mobile-menu { width: 0 !important; padding: 0 !important; overflow: hidden; border: none !important; } /* OPEN STATE */ .mobile-menu.open { width: 270px !important; padding: 16px 18px !important; border-radius: 10px !important; } .mobile-menu.open ul li a { padding: 8px 14px !important; font-size: 15px !important; } .mobile-menu.open ul li { margin-bottom: 6px !important; } } /* LAPTOP HERO (max-width: 1280px) */ /* TABLET HERO (max-width: 992px) */ /* NAVBAR – Laptop */ /* INDEX – NAVBAR – Tablet */ /* INDEX – NAVBAR – Mobile */ /* INDEX – HERO – Laptop */ /* INDEX – HERO – Tablet */ /* INDEX – HERO – Mobile */ @media (max-width: 767px) { .hero { background: url("../images/backgrounds/hero-bg-mobile.jpg") center/cover no-repeat; } } /* LAPTOP: smaller text card, more over image */ @media (max-width: 1536px) { .section { grid-template-columns: 60% 40%; align-items: center; } @media (max-width: 1023.98px) { .section { width: 100%; max-width: 1400px; } } .image-side img { height: 60vh; transform: scale(1.03); width: 100%; display: block; object-fit: cover; } .text-side { max-width: 520px; padding-right: 26px; padding-left: 26px; margin-left: -80px; border-radius: 14px; background: #ffffff; box-shadow: 0 20px 40px rgba(21, 24, 31, 0.08); z-index: 2; align-self: center; } .about-aklogo { gap: 6px !important; } } /* TABLET: smaller card + image, still side by side */ @media (max-width: 1024px) { .section { display: grid !important; grid-template-columns: 50% 50% !important; box-sizing: border-box !important; } @media (max-width: 1023.98px) { .section { width: 100% !important; max-width: none !important; } } .image-side { height: 50vh !important; width: 100% !important; display: block !important; object-fit: cover !important; max-width: 800px !important; margin: 0 !important; padding: 0 !important; } .image-side img { height: 50vh !important; transform: scale(1.01) !important; } .text-side { width: 100% !important; max-width: 720px !important; padding-right: 18px !important; padding-left: 18px !important; margin-left: -32px !important; border-radius: 10px !important; } .text-side p { margin-bottom: 10px; } .about-aklogo { gap: 5px !important; } } /* SMALL MOBILE: keep stacked */ /* Mobile: 300px – 767px */ @media (max-width: 768px) { /* Force the grid container to have ZERO gap, but use 50/50 columns so the text card can sit over the image like on desktop */ .section { display: grid !important; grid-template-columns: 50% 50% !important; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; box-sizing: border-box !important; border-radius: 0 !important; overflow: hidden !important; width: 100% !important; max-width: 100% !important; } /* Make the text card overlap the image similar to desktop/tablet */ .text-side { width: 100% !important; max-width: 520px !important; padding-right: 18px !important; padding-left: 18px !important; margin-left: -32px !important; border-radius: 10px !important; background: inherit !important; position: relative !important; z-index: 2 !important; } .image-side { margin: 0 !important; padding: 0 !important; height: 40vh !important; overflow: hidden !important; } /* Image side - absolutely no space below */ .image-side { height: 400px !important; margin: 0 !important; padding: 0 !important; border-radius: 10px !important; overflow: hidden !important; display: block !important; } .image-side img { width: 120% !important; height: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; padding: 0 !important; transform: translateX(-10%) !important; } /* Text side - absolutely no space above */ .text-side { padding-right: 60px !important; padding-left: 60px !important; border-radius: 0 0 10px 10px !important; box-shadow: none !important; display: block !important; } /* Remove any default margins on first/last children inside text-side */ .text-side>*:last-child { margin-bottom: 0 !important; } .text-side div { margin-top: 0 !important; margin-bottom: 8px !important; } .text-side p { margin-top: 0 !important; margin-bottom: 8px !important; } /* Rest of your styles */ .about-aklogo { gap: 6px !important; } } /* SMALL MOBILE: Stacked layout with full-width map */ /* Mobile: max-width 480px */ @media (max-width: 480px) { /* Stack layout: image on top, text below */ .section { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; height: auto !important; box-sizing: border-box !important; border-radius: 0 !important; overflow: hidden !important; width: 100% !important; max-width: 100% !important; } /* Image on top - full width */ .image-side { margin: 0 !important; padding: 0 !important; height: 300px !important; overflow: hidden !important; display: block !important; border-radius: 10px !important; } .image-side img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* Text side below image - no overlap */ .text-side { width: 100% !important; max-width: 100% !important; padding-right: 12px !important; padding-left: 12px !important; margin-left: 0 !important; border-radius: 0 !important; background: inherit !important; position: relative !important; z-index: 1 !important; box-shadow: none !important; display: block !important; } .text-side>*:last-child { margin-bottom: 0 !important; } .text-side div { margin-top: 0 !important; margin-bottom: 6px !important; } .text-side p { margin-top: 0 !important; margin-bottom: 6px !important; } .about-aklogo { gap: 6px !important; } } /* INDEX – MAP – Laptop */ @media (max-width: 1536px) { .location-map .map-box { width: 100vw !important; height: 600px !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; position: relative !important; max-width: 100vw !important; border-radius: 0 !important; } } /* INDEX – MAP – Tablet */ @media (max-width: 1024px) { .location-map { padding-right: 0 !important; padding-left: 0 !important; } .location-map .map-box { width: 100vw !important; height: 600px !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; position: relative !important; max-width: 100vw !important; border-radius: 0 !important; } } /* INDEX – MAP – Mobile Tablet */ @media (min-width: 768px) and (max-width: 991px) { .location-map .map-box { width: 100vw !important; height: 550px !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; } } /* INDEX – MAP – Mobile */ @media (max-width: 767px) { .location-map { text-align: center !important; padding-right: 0 !important; padding-left: 0 !important; } .location-map .section-subtitle { text-align: center !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } .location-map .section-title { text-align: center !important; } .location-map .map-box { width: 100vw !important; height: 400px !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; position: relative !important; max-width: 100vw !important; border-radius: 0 !important; } } /* INDEX – MAP – Small Mobile */ @media (max-width: 480px) { .location-map { padding-right: 0 !important; padding-left: 0 !important; } .location-map .map-box { width: 100vw !important; height: 300px !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; } } /* WHO WE ARE – Laptop */ @media (max-width: 1536px) { .who-we-are { box-sizing: border-box !important; } @media (max-width: 1023.98px) { .who-we-are { gap: 100px !important; width: 100% !important; } .who-stats { gap: 20px !important; } } .who-content h1 { font-size: 1.6rem !important; } .who-content h6 { font-size: 1rem !important; margin-left: 5px !important; } .logo-inline img { height: 50px !important; } /* Stats row compact */ @media (max-width: 1023.98px) { .who-stats { justify-content: center !important; padding-left: 60px !important; gap: 20px !important; margin-top: 20px !important; padding-right: 0 !important; } } .who-stats .stat-box h2 { font-size: 4.3rem !important; margin-top: 20px !important; } .who-stats .stat-box .plus { font-size: 3rem !important; top: -20px !important; left: 1px !important; } .who-stats .stat-box p { margin-top: 10px !important; left: 1px !important; } } /* WHO WE ARE – Tablet */ @media (max-width: 1024px) { .who-we-are { box-sizing: border-box !important; } @media (max-width: 1023.98px) { .who-we-are { gap: 60px !important; width: 100% !important; } } .who-content h1 { font-size: 1.0rem !important; } .who-content h6 { font-size: 0.9rem !important; margin-left: 10px !important; } .logo-inline img { height: 45px !important; } /* Stats row compact */ @media (max-width: 1023.98px) { .who-stats { justify-content: center !important; gap: 20px !important; margin-top: 20px !important; } } .who-stats .stat-box h2 { font-size: 3.3rem !important; margin-top: 20px !important; } .who-stats .stat-box .plus { font-size: 2rem !important; top: -10px !important; left: 1px !important; } .who-stats .stat-box p { margin-top: 10px !important; left: 3px !important; } } @media (max-width: 768px) { .who-we-are { display: flex !important; align-items: center !important; flex-direction: row !important; justify-content: space-between; flex-wrap: nowrap !important; width: 100% !important; } .who-content { max-width: 60% !important; flex: 0 0 60% !important; } .who-stats { max-width: 40% !important; display: flex !important; flex: 0 0 40% !important; justify-content: flex-start !important; gap: 15px !important; padding-right: 30px !important; } .who-content h1 { font-size: 1rem !important; } .section-subtitle:where(:not(.tagline)) { margin-bottom: 0 !important; } .who-content h6 { font-size: 0.9rem !important; margin-left: 10px !important; } .logo-inline img { width: 100px !important; height: auto !important; } .who-stats .stat-box h2 { font-size: 2.5rem !important; margin-top: 10px !important; } .who-stats .stat-box .plus { font-size: 1.5rem !important; top: -6px !important; left: 1px !important; } .who-stats .stat-box p { margin-top: 8px !important; left: 3px !important; } } /* WHO WE ARE – Mobile */ @media (max-width: 700px) { .who-we-are { box-sizing: border-box !important; align-items: center !important; text-align: center !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; } .who-content { padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 0 !important; padding-left: 0 !important; } /* Subtitle + underline */ .section-subtitle:where(:not(.tagline)) { margin-bottom: 6px !important; padding-top: 15px !important; } .who-content .underline { width: 80px !important; height: 2px !important; margin: -2px auto 0 !important; } /* Heading + inline logo smaller */ .who-content h1 { font-size: 1rem !important; line-height: 1.3 !important; margin-top: 12px !important; } .logo-inline img { width: 100px !important; height: auto !important; margin: 0 4px 3px !important; } /* Stats row compact */ .who-stats { padding-top: 0 !important; padding-bottom: 0 !important; justify-content: center !important; gap: 16px !important; margin-top: 0 !important; padding-right: 10px !important; padding-left: 10px !important; } .who-stats .stat-box h2 { font-size: 3rem !important; margin-top: 12px !important; } .who-stats .stat-box .plus { font-size: 1.8rem !important; top: -8px !important; left: 1px !important; } .who-stats .stat-box p { margin-top: 6px !important; left: 3px !important; } } /*Brand / vertical blocks responsiveness*/ /*General fixes for horizontal overflow prevention*/ * { box-sizing: border-box !important; } @media (max-width: 768px) { html, body { overflow-x: hidden !important; overflow-x: clip !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .container { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; } .container:where(:not(.full-width)) { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } section:where(:not(.filter-wrapper, .stats-section)) { box-sizing: border-box !important; } section:where(:not(.career-section, .completedwrap, .detail-overview, .filter-wrapper, .hero, .lux-hero, .ongoingwrap, .projects-list, .public, .stats-section)) { width: 100% !important; max-width: 100% !important; } section:where(:not(.career-section, .completedwrap, .detail-overview, .filter-wrapper, .full-width, .hero, .lux-hero, .ongoingwrap, .projects-list, .public, .stats-section, .wrapper)) { margin-left: 0 !important; margin-right: 0 !important; } section:where(:not(.career-section, .completedwrap, .detail-overview, .filter-wrapper, .full-width, .hero, .lux-hero, .ongoingwrap, .projects-list, .public, .redevelopment-section, .stats-section, .wrapper)) { padding-left: 0 !important; padding-right: 0 !important; } } /* ENVIRONMENTAL CARE — Laptop */ @media (max-width: 1536px) { .split-right { padding-left: 40px !important; } @media (max-width: 1023.98px) { .split-right { padding-right: 40px !important; } } .inner { max-width: 520px !important; } } /* ENVIRONMENTAL CARE — Tablet */ /* LAPTOP: shrink image, text, logo */ @media (max-width: 1024px) { .page-wrap { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; padding-right: 20px; padding-left: 20px; max-width: 1200px; } .split-hero { grid-template-columns: 1.2fr 1fr; } @media (max-width: 1023.98px) { .split-hero { width: 100% !important; } } .split-left { margin-top: 35px; max-height: 700px; } .hero-image { width: 100% !important; height: 90% !important; } .split-right { padding-left: 32px; } @media (max-width: 1023.98px) { .split-right { padding-right: 32px; } } .inner { max-width: 200px; } .split-right h1 { font-size: 20px !important; letter-spacing: 1.2px; margin-bottom: 14px; } .logo-below-text { margin-top: 5px; display: flex; justify-content: center; align-items: center; } .logo-below-text img { border: 2px solid #ddd; border-radius: 8px; } } /* TABLET: even smaller but still full section visible */ /* ========================= Tablet Responsive (768px) Same layout as desktop but smaller ========================= */ @media (max-width: 768px) { .page-wrap { width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; padding-right: 0 !important; padding-left: 0 !important; box-sizing: border-box !important; padding-right: 0 !important; padding-left: 0 !important; max-width: 1000px !important; } .split-hero { display: grid !important; grid-template-columns: 1.2fr 1fr !important; align-items: stretch !important; overflow: visible !important; } .split-left { max-height: 100% !important; padding-left: 30px !important; } .hero-image { width: 100% !important; height: 85% !important; object-fit: cover !important; display: block !important; } .split-right { padding-left: 25px !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; padding-right: 25px !important; } .inner { max-width: 380px !important; } .split-right h1 { font-size: 22px !important; letter-spacing: 1.3px !important; margin: 0 0 10px !important; text-align: center !important; text-transform: uppercase !important; font-weight: 700 !important; } .lead { color: rgb(255, 255, 255) !important; margin: 0 0 8px !important; } .logo-below-text { margin-top: 6px !important; display: flex !important; justify-content: center !important; align-items: center !important; } .logo-below-text img { border: 2px solid #ddd !important; border-radius: 8px !important; padding: 8px !important; } } /* MOBILE: keep your existing stacking behaviour below 600px */ /* ENVIRONMENTAL CARE — Mobile */ @media (max-width: 480px) { .page-wrap { width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; padding-right: 10px !important; padding-left: 10px !important; box-sizing: border-box !important; overflow: hidden !important; background-position: center !important; } .split-hero { grid-template-columns: 1fr !important; width: 100% !important; } .split-left { position: relative; background-size: cover; background-position: center; display: flex; align-items: flex-start; justify-content: flex-start; padding: 0 !important; margin: 0 !important; width: 100% !important; } .hero-image { width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover; display: block; } .split-right { padding-left: 0 !important; margin-right: 0 !important; margin-left: 0 !important; display: flex; align-items: center; justify-content: flex-end; width: 95vw !important; padding-right: 0 !important; } .inner { max-width: none !important; margin: 0 auto; padding: 0 16px !important; text-align: right; } h1:where(:not(.hero-content *, .lux-hero *, .page-header *)) { text-align: center !important; } h1:where(:not(.hero-content *, .lux-hero *, .page-header *, .section-heading)) { letter-spacing: 0.8px !important; } .logo-below-text { margin-top: 20px !important; } .logo-below-text img { padding: 6px !important; } .below { padding: 10px !important; } .left-note li { font-size: 12px !important; line-height: 1.3 !important; } } /* Featured Projects */ /* LAPTOP: 1025–1280px */ @media (min-width: 1025px) and (max-width: 1536px) { .projects-top-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; } @media (max-width: 1023.98px) { .projects-top-bar { max-width: 1200px !important; } } .projects-top-bar .left-text { max-width: 80% !important; } .projects-top-bar .sub-heading { text-align: left !important; } .projects-top-bar .main-heading { text-align: left !important; } .projects-top-bar .view-btn { white-space: nowrap !important; } } /* TABLET: 768–1024px */ /* TABLET 768–1024px – FINAL FIX */ /* TABLET 768–1024px */ @media (max-width: 1024px) { .projects-top-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; text-align: left !important; } @media (max-width: 1023.98px) { .projects-top-bar { width: 100% !important; max-width: 1200px !important; } } .projects-top-bar .left-text { flex: 1 1 auto !important; } .projects-top-bar .sub-heading { display: block !important; text-align: left !important; } .projects-top-bar .main-heading { text-align: left; } .projects-top-bar .view-btn { flex: 0 0 auto !important; align-self: center !important; margin-right: 0 !important; white-space: nowrap !important; } } @media (max-width: 768px) { .projects-top-bar { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; text-align: left !important; width: 100% !important; max-width: none !important; } .projects-top-bar .left-text { width: 100% !important; } .projects-top-bar .sub-heading { display: block !important; text-align: left !important; } .projects-top-bar .main-heading { text-align: left; } .projects-top-bar .view-btn { align-self: center !important; white-space: nowrap !important; } } /* Featured Projects card */ @media (min-width: 1025px) and (max-width: 1536px) { .lux-section .cinema-card { border-radius: 20px !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14) !important; } } /* TABLET 768–1024px: 2 cards top, 1 centered bottom */ @media (min-width: 768px) and (max-width: 1024px) { .lux-section .cinema-card { border-radius: 20px !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14) !important; } /* 3rd card: centered on second row */ .lux-section .cinema-card:nth-child(3) { justify-self: center !important; } } /* FEATURED PROJECTS — Mobile */ @media (max-width: 767px) { /* Top bar */ .projects-top-bar { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; width: 100% !important; } .projects-top-bar .left-text { width: 100% !important; } .projects-top-bar .left-text .underline { width: 90px !important; height: 2px !important; margin: 3px 0 0 0 !important; } .projects-top-bar .view-btn { align-self: center !important; } /* Cinema cards grid */ .lux-section { display: flex !important; justify-content: center !important; } .cinema-card { border-radius: 8px !important; } /* Glass content inside card */ .gall-launch-tag:where(:not(.cinema-card .gall-launch-tag)) { font-size: 9px !important; padding: 2px 5px !important; } } /* project count */ /* ========= LAPTOP (≤1280px) ========== */ @media (max-width: 1536px) { .stats-section .stat-box { width: 100% !important; padding: 30px 24px !important; max-width: 300px !important; border-radius: 7px !important; } .stats-section .stat-box h2 { font-size: 3.2rem !important; } .stats-section .stat-box p { font-size: 0.9rem !important; } } /* ========= TABLET (≤992px) ========== */ @media (min-width: 768px) and (max-width: 1024px) { .stats-section .stat-box { width: 100% !important; max-width: 170px !important; padding: 20px 8px !important; border-radius: 9px !important; } .stats-section .stat-box h2 { font-size: 2.5rem !important; } .stats-section .stat-box p { font-size: 0.8rem !important; } } /* ----------- MOBILE RESPONSIVE FIX (≤768px) ----------- */ @media (max-width: 760px) { .stats-section .stat-box { padding: 8px 4px !important; border-radius: 6px !important; } .stats-section .stat-box h2 { font-size: 1.4rem !important; /* smaller number */ margin: 0 0 4px 0 !important; } .stats-section .stat-box p { font-size: 0.75rem !important; line-height: 1.2 !important; padding: 0 2px !important; word-break: break-word !important; } } /*project*/ @media (max-width: 767px) { .cinema-card { position: relative !important; overflow: hidden !important; border-radius: 18px !important; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09); } } /* INDEX - OUR SERVICES — Laptop refined */ @media (max-width: 1536px) { .s-card { padding-bottom: 18px !important; } .s-card img { border-radius: 14px !important; } .s-card h3 { margin: 14px 0 8px 0 !important; } } /*INDEXT- OUR SERVICES — Tablet */ @media (max-width: 1024px) and (min-width: 768px) { h2:where(:not(.about-intro, .filter-wrapper *, .footer *, .map-fest-content h2, .popup-title, .section-heading)) { font-size: 1.8rem !important; } h2:where(:not(.about-card > h2, .about-intro, .filter-wrapper *, .footer *, .popup-title, .section-heading)) { margin-top: -40px !important; } .s-card p { width: 90% !important; } } /*INDEX - OUR SERVICES — Mobile */ @media (max-width: 480px) { /* Section heading - scoped to service section context */ h2:where(:not(.about-intro, .filter-wrapper *, .footer *, .map-fest-content h2, .popup-title, .section-heading)) { font-size: 1.45rem !important; } h2:where(:not(.about-card > h2, .about-intro, .filter-wrapper *, .footer *, .popup-title, .section-heading)) { margin-top: -8px !important; margin-bottom: 6px !important; } .underline { width: 90px !important; height: 2px !important; margin-bottom: 10px !important; } /* Cards layout */ .service-section .s-card { padding-bottom: 12px !important; } .service-section .s-card img { border-radius: 10px !important; } .service-section .s-card h3 { margin-top: 12px !important; } .service-section .s-card p { width: 95% !important; margin: 8px auto 6px auto !important; } .service-section .read-more { border-radius: 20px !important; } } /* OUR SERVICES PAGE — Laptop refined */ /* OUR SERVICES PAGE — Tablet */ /* OUR SERVICES PAGE — Mobile */ /* INDEX - VALUE ADDED SERVICES — Laptop 1025–1536px */ @media (min-width: 1025px) and (max-width: 1536px) { .value-services { padding-right: 20px !important; padding-left: 20px !important; } /* logo + text fix */ .logo-container { justify-items: center !important; } .value-services .btn { padding: 7px 18px !important; font-size: 0.5rem !important; border-radius: 15px !important; } } /* INDEX - VALUE ADDED SERVICES — Tablet 1024px */ @media (max-width: 1024px) { .value-services { padding-right: 20px !important; padding-left: 20px !important; } /* logo + text fix */ .logo-container { justify-items: center !important; } .value-services .btn { padding: 7px 18px !important; font-size: 0.5rem !important; border-radius: 15px !important; } } /* INDEX - VALUE ADDED SERVICES — Tablet 768px */ @media (max-width: 768px) { .value-services { padding-right: 16px !important; padding-left: 16px !important; margin-right: 0 !important; margin-left: 0 !important; overflow: hidden !important; } /* scope slider rules to value-services to beat generic 768px rules later */ /* Blue underline */ .value-services .underline { width: 130px !important; height: 2px !important; margin-bottom: 20px !important; } /* logo + text fix */ .value-services .logo-container { justify-items: center !important; } .value-services .btn { padding: 6px 16px !important; font-size: 0.4rem !important; border-radius: 12px !important; } } /* INDEX - VALUE SERVICES — Mobile */ @media (max-width: 480px) { .value-services { padding-right: 10px !important; padding-left: 10px !important; margin-right: 0 !important; margin-left: 0 !important; text-align: center !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; } .value-services .underline { width: 150px !important; height: 2px !important; margin: 4px auto 25px auto !important; } .value-services .btn { margin-top: 20px !important; padding: 6px 12px !important; font-size: 11px !important; border-radius: 20px !important; } } /* VALUE ADDED SERVICES PAGE — Laptop 992–1335px */ @media (min-width: 1025px) and (max-width: 1536px) { .vas-row { display: flex !important; align-items: center !important; } .vas-row.reverse { flex-direction: row-reverse !important; } .vas-text { text-align: center !important; } @media (max-width: 1023.98px) { .vas-text { flex: 0 0 48% !important; } } .vas-text p { max-width: 520px !important; margin: 0 auto 30px auto !important; } @media (max-width: 1023.98px) { .vas-img { flex: 0 0 48% !important; } } .vas-img img { max-height: 300px !important; object-fit: cover !important; border-radius: 16px !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important; } @media (max-width: 1023.98px) { .vas-img img { width: 100% !important; } } } /* VALUE ADDED SERVICES PAGE — tablet 768–991px */ @media (min-width: 992px) and (max-width: 1024px) { .value-services-page .vas-row { display: flex !important; align-items: center !important; } .value-services-page .vas-row.reverse { flex-direction: row-reverse !important; } .value-services-page .vas-text { text-align: center !important; } @media (max-width: 1023.98px) { .value-services-page .vas-text { flex: 0 0 48% !important; } } .value-services-page .vas-text p { max-width: 520px !important; margin: 0 auto 30px auto !important; } @media (max-width: 1023.98px) { .value-services-page .vas-img { flex: 0 0 48% !important; } } .value-services-page .vas-img img { max-height: 300px !important; object-fit: cover !important; border-radius: 16px !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important; } @media (max-width: 1023.98px) { .value-services-page .vas-img img { width: 100% !important; } } } /* VALUE ADDED SERVICES PAGE — tablet 768px */ @media (max-width: 768px) { .value-services-page { max-width: 760px !important; width: 100% !important; } .value-services-page .vas-row { display: flex !important; flex-direction: column !important; align-items: center !important; } /* was row-reverse: on phones it pushed the text off the left edge (bug D1) */ .value-services-page .vas-row.reverse { flex-direction: column !important; } .value-services-page .vas-text { text-align: center !important; flex: 0 0 48% !important; } .value-services-page .vas-text p { max-width: 520px !important; margin: 0 auto 30px auto !important; } .value-services-page .vas-img { margin: 0 auto !important; padding: 0 15px !important; box-sizing: border-box !important; flex: 0 0 48% !important; width: 100% !important; max-width: 500px !important; } .value-services-page .vas-img img { max-height: 300px !important; object-fit: cover !important; border-radius: 16px !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important; margin: 0 auto !important; display: block !important; width: 100% !important; } } /* VALUE ADDED SERVICES PAGE — mobile 300–767px */ /* ================================ VALUE ADDED SERVICES – MOBILE FIX For screens 300px to 767px ================================ */ @media (max-width:750px) { .value-services-page { text-align: center !important; } /* Change order: Image → Logo → Text */ .vas-row, .vas-row.reverse { display: flex; flex-direction: column !important; } .vas-img { order: 1 !important; width: 100%; } .vas-text { order: 3 !important; } /* Main container width */ /* Stack items vertically */ .vas-row, .vas-row.reverse { flex-direction: column !important; text-align: center !important; } /* Fix IMAGE size (same like second image) */ .vas-img img { height: 250px !important; border-radius: 8px; object-fit: cover !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); margin: 0 auto -10px auto !important; width: 100% !important; } /* Fix LOGO size */ .vas-logo img { display: block; } /* Text block */ .vas-text { text-align: center !important; padding: 0 10px; max-width: 100% !important; } .vas-text p { margin-top: -20px !important; } /* Section underline spacing fix */ .underline { margin-bottom: 80px !important; } } /* FOOTER — Laptop 1025–1280px */ /* FOOTER — Tablet 768–1024px, still one row but tighter */ /* FOOTER — Mobile 300–767px */ /* ================================ RESPONSIVE — HERO BANNER For project.html lux-hero section ==================================*/ /* Laptops ≤1280px */ @media (max-width:1536px) { .hero-stats .stat h2 { font-size: 32px; } } /* Tablets ≤992px */ @media (max-width:992px) { .hero-stats .stat h2 { font-size: 28px; } } /* Mobile ≤600px */ @media (max-width:600px) { .lux-hero { background-position: center; } .hero-stats .stat h2 { font-size: 24px; } .lux-hero { background-position: center !important; } .hero-stats .stat h2 { font-size: 22px !important; } } /* ================================ RESPONSIVE — FILTER WRAPPER (Project Filters) ==================================*/ /* Tablet: 768px – 991px */ /* Laptop: 992px – 1365px */ /* Small screens: reduce filter size Mobile*/ /* ========================================================== RESPONSIVE — ONGOING PROJECTS (cinema-grid section) (This applies to both Ongoing & Completed sections) ==========================================================*/ /* Laptops ≤1280px */ @media (max-width:1536px) { .ongoingwrap .cinema-card { border-radius: 22px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16) !important; } .ongoingwrap .gall-launch-tag { font-weight: 600 !important; } } @media (max-width: 1024px) { .ongoingwrap .cinema-card { border-radius: 22px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16) !important; } /* 3rd card: centered on second row */ .ongoingwrap .cinema-card:nth-child(3) { justify-self: center !important; } .ongoingwrap .gall-launch-tag { font-weight: 600 !important; } } /* Tablets ≤992px */ @media (max-width:768px) { .ongoingwrap .cinema-card { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16) !important; } /* 3rd card: centered on second row */ .ongoingwrap .cinema-card:nth-child(3) { justify-self: center !important; } .ongoingwrap .gall-launch-tag { font-weight: 600 !important; } } /* ============================ Mobile Styles (≤ 767px) =============================== */ @media (max-width: 767px) { /* Cinema Grid Layout */ /* Cinema Card */ .ongoingwrap .cinema-card { border-radius: 20px !important; } /* Glass Section */ /* Project Heading inside card (override desktop styles) */ /* Logo inside cards (override inline desktop values) */ /* Remove big spacing on mobile */ .lux-heading { text-align: center !important; } .underline { width: 120px !important; margin: 5px auto 25px !important; } } /* ========================================================== RESPONSIVE — COMPLETED PROJECTS SECTION (completedwrap, projects-list, project-card) ==========================================================*/ /* Laptop size tuning only – keep same layout, just smaller */ @media (min-width: 1240px) and (max-width: 1536px) { /* 3 cards layout */ .project-card { border-radius: 18px; position: relative !important; } /* smaller card variant */ .project-card .large { width: 100% !important; max-width: 360px !important; border-radius: 16px !important; } /* reduce image height */ .project-card .large>img { height: 200px !important; object-fit: cover !important; } /* heading size smaller */ /* description smaller */ } @media (max-width: 1024px) { /* 3 cards layout */ .project-card { border-radius: 18px; position: relative !important; } /* smaller card variant */ .project-card .large { width: 100% !important; max-width: 300px !important; border-radius: 16px !important; } /* reduce image height */ .project-card .large>img { height: 200px !important; object-fit: cover !important; } /* heading size smaller */ /* description smaller */ } /*tablet Laptop size tuning only – keep same layout, just smaller */ @media (max-width: 768px) { /* 3 cards layout */ .project-card { border-radius: 18px; position: relative !important; } /* smaller card variant */ .project-card .large { width: 100% !important; max-width: 320px !important; border-radius: 16px !important; } /* reduce image height */ .project-card .large>img { height: 180px !important; object-fit: cover !important; } /* heading size smaller */ /* description smaller */ } /* Mobile ≤600px */ /* ============================ Completed Projects – Mobile =============================== */ @media (max-width: 767px) { /* Completed section wrapper */ /* Grid: Single column */ /* Main card */ .project-card.large { border-radius: 10px !important; overflow: hidden !important; } /* Card image */ .project-card.large img { border-radius: 8px 8px 0 0 !important; } /* Sold Out tag */ .project-card .Sold-tag { border-radius: 20px !important; } /* Info container */ /* Project heading */ /* FORCE override inline size */ /* Project description text */ } /* responsive for pagination section */ @media (max-width: 767px) { /* Pagination wrapper */ .completed-pagination { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; margin: 20px auto 30px !important; padding: 10px 0 !important; } /* Arrow buttons */ .completed-pagination .page-arrow { border-radius: 6px !important; } /* Page numbers container */ .completed-pagination .page-numbers { display: flex !important; gap: 6px !important; align-items: center !important; } /* Each page number button */ .completed-pagination .page-numbers button { border-radius: 6px !important; } /* Active page highlight */ .completed-pagination .page-numbers button.active { background: #0071bb !important; } } /* 3 ongoing project page*/ /* Hero Section */ /* HERO SECTION — Mobile */ @media (max-width:767px) { /* Outer hero section */ .detail-hero { height: 70vh !important; padding: 10px 10px !important; background-position: center !important; background-size: cover !important; } /* Glass box */ .hero-glass { width: 100% !important; height: auto !important; margin: 0 auto !important; padding: 20px 18px !important; border-radius: 12px !important; backdrop-filter: blur(6px) !important; } /* Logos row */ .hero-logos { gap: 6px !important; } .sep:where(:not(.hero-logos .sep)) { font-size: 16px !important; } /* Title */ .project-title { line-height: 1.35 !important; text-align: center !important; margin-bottom: 8px !important; } /* Subtitle */ .project-sub { text-align: center !important; margin-bottom: 2px !important; } /* Buttons */ .hero-actions { display: flex !important; flex-direction: column !important; gap: 3px !important; width: 100% !important; } } /* HERO SECTION — Tablet */ /* HERO SECTION — Tablet (768px to 1024px) */ @media (min-width:768px) and (max-width:1117px) { /* Outer hero section */ .detail-hero { height: 70vh !important; padding: 20px 20px !important; background-position: center !important; background-size: cover !important; } /* Glass box */ .hero-glass { position: relative !important; z-index: 3 !important; margin: 0 auto 40px !important; width: 90% !important; padding: 20px 25px !important; border-radius: 20px !important; backdrop-filter: blur(10px) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; /* << CENTER VERTICAL like screenshot */ gap: 20px !important; flex-wrap: wrap !important; } .hero-logos { align-items: center !important; gap: 10px !important; } .small-logo { object-fit: contain !important; } .small-logo:where(:not(.hero-logos .small-logo)) { width: 100px !important; height: auto !important; } .project-title { margin: 0 0 6px !important; font-weight: 800 !important; font-family: "Montserrat", sans-serif !important; letter-spacing: 0.2px !important; } .project-sub { margin: 0 !important; } .hero-actions { display: flex !important; gap: 12px !important; align-items: center !important; } /* Buttons */ } /* FORM SECTION — Tablet (768px to 1024px) */ @media (min-width:768px) and (max-width:1024px) { /* Popup Box */ /* Close Button */ .popup-close { cursor: pointer !important; } /* Form Label */ /* Inputs + Select */ .popup-form input:not(.form-input, [type="checkbox"]) { width: 100% !important; padding: 12px 10px !important; margin-bottom: 18px !important; border-radius: 6px !important; font-size: 12px !important; } /* Submit Button */ } /* FORM SECTION — Mobile (300px to 767px) */ @media (max-width:767px) { /* Popup overlay stays centered */ /* Smaller Popup Box */ /* Close Button */ /* Labels */ /* Inputs */ .popup-form input:not(.form-input, [type="checkbox"]) { width: 100% !important; padding: 8px 6px !important; margin-bottom: 10px !important; border-radius: 5px !important; font-size: 10px !important; } /* Submit Button */ } /* MAIN SECTION — Mobile (300px to 767px) */ @media (max-width:767px) { /* --- OVERVIEW SECTION --- */ /* LOGOS - small + aligned left */ .detail-overview .hero-logos { margin-left: 0 !important; display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 10px !important; } .detail-overview .hero-logos .small-logo { margin-top: 20px !important; width: 110px !important; height: auto !important; } .detail-overview .sep { margin-top: 20px !important; font-size: 16px !important; } /* GRID becomes vertical */ /* TEXT Resize */ .overview-text h2 { text-align: center !important; } /* IGBC LOGO - small + right aligned */ /* Adjust project-meta spacing so logo fits beside it */ } /* MAIN SECTION — Mobile (300px to 767px) */ @media (min-width:768px) and (max-width:1024px) { /* MAIN layout */ .detail-main { padding-bottom: 80px !important; padding: 0 !important; margin: 0 !important; } .detail-main .detail-overview .hero-logos { margin-left: 60px !important; display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 10px !important; } .detail-main .detail-overview .hero-logos .small-logo { margin-top: 20px !important; width: 120px !important; height: auto !important; } .detail-main .detail-overview .sep { margin-top: 20px !important; font-size: 16px !important; } /* Overview grid */ .overview-text p { color: black !important; } /* magnetic aside */ } /* Gallery SECTION — Mobile (300px to 767px) */ @media (max-width:767px) { /* Container spacing */ .container { padding-top: 0 !important; padding-bottom: 0 !important; } .container:where(:not(.full-width)) { padding-right: 10px !important; padding-left: 10px !important; } /* Gallery Heading */ .container h2 { text-align: center !important; } /* GALLERY GRID */ #gallery.grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; /* 2 columns */ gap: 8px !important; width: 100% !important; } /* GALLERY CARDS */ #gallery .card { width: 100% !important; height: auto !important; border-radius: 8px !important; overflow: hidden !important; } #gallery .card img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 8px !important; } /* LIGHTBOX (Mobile Friendly) */ .lightbox .panel { width: 90% !important; height: auto !important; padding: 0 !important; border-radius: 8px !important; } .lightbox img { width: 100% !important; height: auto !important; border-radius: 6px !important; } /* Lightbox Buttons */ .close-btn { font-size: 22px !important; right: 8px !important; top: 8px !important; } .nav-btn { font-size: 28px !important; padding: 4px !important; } .gall-launch-tag:where(:not(.cinema-card .gall-launch-tag)) { display: block !important; margin: 0 auto !important; text-align: center !important; font-size: 8px !important; } } /* Gallery SECTION — Tablet (768px to 1024px) */ @media (min-width:768px) and (max-width:1024px) { /* Container spacing */ .container { padding-top: 0 !important; padding-bottom: 0 !important; } @media (max-width: 1023.98px) { .container:where(:not(.full-width)) { padding-right: 12px !important; padding-left: 12px !important; } } .container:where(:not(.full-width)) { padding-right: 12px !important; padding-left: 12px !important; } /* Gallery Heading */ .container h2 { text-align: center !important; } /* GALLERY GRID */ #gallery.grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; /* 2 columns */ gap: 10px !important; width: 100% !important; } /* GALLERY CARDS */ #gallery .card { width: 100% !important; height: auto !important; border-radius: 20px !important; overflow: hidden !important; } #gallery .card img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 20px !important; } /* LIGHTBOX (Mobile Friendly) */ .lightbox .panel { width: 90% !important; height: auto !important; padding: 0 !important; border-radius: 10px !important; } .lightbox img { width: 100% !important; height: auto !important; border-radius: 8px !important; } /* Lightbox Buttons */ .close-btn { font-size: 24px !important; right: 10px !important; top: 10px !important; } .nav-btn { font-size: 30px !important; padding: 5px !important; } .gall-launch-tag:where(:not(.cinema-card .gall-launch-tag)) { text-align: center !important; font-size: 8px !important; } } /* ========================== ABOUT US RESPONSIVE ========================== */ /* About-us Section Responsive Fixes for Tablet (768px-1024px) & Laptop (1024px+) */ /* Tablet: Compact layout, proper margins, aligned text/logo */ @media (min-width: 768px) and (max-width: 991px) { .about-us { text-align: center; width: 90%; max-width: 900px; } .about-us .section-title { font-size: 1.8rem !important; margin-bottom: 1.5rem !important; line-height: 1.3; } .about-us p:where(:not(.about-logo-big, .about-stat p)) { margin-bottom: 1rem; } /* Logo sizing & alignment */ .about-us .logo, .about-us img[alt*="logo"] { max-width: 180px !important; max-height: 80px !important; width: auto; height: auto; margin: 1rem auto 1.5rem auto; display: block; } /* Stats/Highlights alignment */ .about-us [class*="stats"] { gap: 1.5rem !important; margin: 2rem 0 !important; } } /* Laptop: Refined spacing, professional alignment */ @media (min-width: 992px) and (max-width: 1335px) { @media (max-width: 1023.98px) { .about-us { width: 85%; max-width: 1100px; } } .about-us .section-title { font-size: 2.2rem !important; margin-bottom: 2rem !important; } .about-us p:where(:not(.about-left *)) { max-width: 800px; } .about-us p:where(:not(.about-logo-big, .about-stat p)) { margin: 0 auto 1.5rem auto; } /* Logo professional sizing */ .about-us .logo, .about-us img[alt*="logo"] { max-width: 180px !important; max-height: 110px !important; margin: 0 auto 2rem auto; } /* 3-column stats on laptop */ } /* About fisrt mobile*/ @media (max-width: 768px) { /* Prevent horizontal scroll */ html, body { max-width: 100% !important; overflow-x: hidden !important; overflow-x: clip !important; } /* RIGHT: TEXT FIRST IN MARKUP, BUT VISUALLY LAST */ .about-right { order: 3 !important; } .about-right p { margin-bottom: 12px !important; } /* LEFT: ABOUT HEADING + LOGO + NUMBER */ .about-left { order: 1 !important; } /* MAIN ABOUT IMAGE UNDER HEADING */ /* LOGO + NUMBER BLOCK: two columns */ /* Logo on the left */ /* Vertical line between logo and number (optional) */ /* Right side: number + text stacked */ /* Number */ /* Plus */ /* Text under number */ /* CONTACT BUTTON BELOW TEXT */ } @media (max-width: 767px) { /* Prevent horizontal scroll */ html, body { max-width: 100% !important; overflow-x: hidden !important; overflow-x: clip !important; } /* RIGHT: TEXT FIRST IN MARKUP, BUT VISUALLY LAST */ .about-right { order: 3 !important; } .about-right p { margin-bottom: 12px !important; } /* LEFT: ABOUT HEADING + LOGO + NUMBER */ .about-left { order: 1 !important; } /* MAIN ABOUT IMAGE UNDER HEADING */ /* LOGO + NUMBER BLOCK: two columns */ /* Logo on the left */ /* Vertical line between logo and number (optional) */ /* Right side: number + text stacked */ /* Number */ /* Plus */ /* Text under number */ /* CONTACT BUTTON BELOW TEXT */ } /* ========================================================== Second About RESPONSIVE BREAKPOINTS ========================================================== */ /* Tablet: 768px - 991px */ @media (min-width: 768px) and (max-width: 991px) { .about-bg { margin-right: 0 !important; margin-left: 0 !important; width: 100% !important; height: auto !important; } .about-bg .about-card { text-align: center !important; } .about-bg h2 { font-size: 1.6rem !important; } .about-bg .about-logo { max-width: 140px !important; max-height: 60px !important; width: auto !important; height: auto !important; margin: 0 auto 0.05rem auto !important; } .about-bg p { margin-bottom: 1rem !important; } /* Founders - Small signatures & text */ .about-bg .founders-section { gap: 0 !important; display: flex !important; } .about-bg .founder-box { padding: 1rem !important; margin: 0 0.5rem !important; margin-top: 0 !important; } .about-bg .founder-img { max-width: 200px !important; max-height: auto !important; margin-bottom: 0.5rem !important; } .about-bg .founder-box h3 { font-size: 1rem !important; margin: 0.5rem 0 !important; } } /* Laptop: 992px - 1335px */ @media (min-width: 992px) and (max-width: 1335px) { .about-bg .about-card { text-align: center !important; } .about-bg h2 { font-size: 2rem !important; } .about-bg .about-logo { max-width: 180px !important; max-height: 75px !important; margin: 0 auto 1.5rem auto !important; } .about-bg p { padding-bottom: 5px !important; max-width: 800px; margin: 0 auto 0.1rem auto !important; } /* Founders section */ .about-bg .founders-section { display: flex !important; justify-content: center !important; gap: 2rem !important; } .about-bg .founder-box { flex: 1 !important; max-width: 300px !important; padding: 1.5rem !important; } .about-bg .founder-img { max-width: 180px !important; max-height: 80px !important; margin-bottom: 1rem !important; } .about-bg .founder-box h3 { font-size: 1.2rem !important; margin: 0.8rem 0 !important; } } /* ============ Second About MOBILE ============ */ @media (max-width: 767px) { /* Outer background section smaller */ .about-bg { width: 100% !important; padding-right: 12px !important; padding-left: 12px !important; height: auto !important; } /* Inner white card */ .about-card { border-radius: 10px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; } /* Logo at top */ .about-card h2 { text-align: center !important; } .about-card .about-logo { max-width: 160px !important; width: 60vw !important; height: auto !important; margin-bottom: 0 !important; } /* Paragraph text smaller and tighter */ .about-card p { margin-bottom: 8px !important; } .about-card p:where(:not(.about-card > p)) { text-align: justify !important; } .about-card p strong { font-weight: 600 !important; } /* Founders row as stacked cards */ .founders-section { display: flex !important; flex-direction: column !important; gap: 8px !important; } .founder-box { width: 100% !important; text-align: center !important; } /* Signature image smaller */ .founder-img { width: 150px !important; height: auto !important; margin-bottom: 6px !important; } /* Director name */ .founder-box h3 { font-size: 14px !important; margin-bottom: 3px !important; } /* Designation text */ .founder-box p { padding: 0 8px !important; text-align: center !important; } } /* ================================ CONTACT ================================ */ /* LAPTOP */ /* LAPTOP ONLY: 992px – 1365px */ @media (min-width: 992px) and (max-width: 1365px) { .contact-section { padding-top: 40px !important; padding-bottom: 40px !important; } .contact-section h1 { font-size: 28px !important; margin-bottom: 22px !important; } /* Whole section in one line */ /* Left: form (smaller) */ .contact-form input:not(.form-input, [type="checkbox"]) { font-size: 15px !important; padding: 7px 9px !important; } .contact-form .btn { padding: 8px 22px !important; font-size: 13px !important; } /* Right: one framed block (logo + address + map) */ .contact-info { background: #ffffff; border-radius: 16px; } .info-left p, .info-left a { line-height: 1.4 !important; } /* Map fills bottom of the same frame */ .contact-section .map-container { border-radius: 10px; overflow: hidden; } .contact-section .map-container iframe { border: 0; } } /* TABLET: 768px – 991px */ @media (min-width: 768px) and (max-width: 991px) { .contact-section { padding-top: 30px !important; padding-bottom: 30px !important; } .contact-section h1 { font-size: 24px !important; margin-bottom: 18px !important; } /* Form + right block in one line, smaller */ /* Left: form (narrower, reduced fonts) */ .contact-form input:not(.form-input, [type="checkbox"]) { font-size: 12px !important; padding: 6px 8px !important; } .contact-form .btn { padding: 7px 18px !important; font-size: 12px !important; } /* Right: one framed block (logo + address + map) */ .contact-info { background: #ffffff; border-radius: 14px; } .info-left p, .info-left a { line-height: 1.35 !important; } /* Map fills bottom of same frame */ .contact-section .map-container { border-radius: 10px; overflow: hidden; } .contact-section .map-container iframe { border: 0; } } /* --------------------------------------------- 📱 MOBILE (max-width: 768px) --------------------------------------------- */ @media (max-width:767px) { /* Section spacing */ .contact-section { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; text-align: left !important; } .contact-section h1 { font-size: 1.4rem !important; text-align: center !important; margin-bottom: 10px !important; } /* Main container */ /* Form full-width, smaller text */ .contact-form input:not(.form-input, [type="checkbox"]) { width: 100% !important; font-size: 0.85rem !important; } .contact-form .btn { width: 50% !important; font-size: 0.9rem !important; padding: 8px !important; display: block !important; margin: 0 auto !important; } /* Right side: address + map stacked */ .contact-info { box-sizing: border-box !important; } .add-logo { text-align: center !important; } /* Map responsive */ } /* ------------------------------------------------------------------ PERFECT RESPONSIVE FIXES FOR ABT PAGE -------------------------------------------------------------------*/ /* ===== Tablet (max-width: 992px) ===== */ @media (max-width: 992px) { /* HERO */ .detail-hero { height: 65vh; padding: 20px; background-position: center top; } .hero-glass { flex-direction: column; text-align: center; padding: 18px; } .hero-logos { justify-content: center; } /* Overview Section */ } /* ===== Mobile (max-width: 768px) ===== */ @media (max-width: 768px) { /* HERO TITLE */ .project-title { text-align: center; } .project-sub { text-align: center; } /* ACTION BUTTONS */ .hero-actions { flex-direction: column; width: 100%; gap: 10px; } /* Overview */ /* Gallery */ .grid { gap: 12px; } .card img { width: 100%; height: auto; border-radius: 14px; } /* Lightbox buttons */ .nav-btn { font-size: 30px; padding: 8px 14px; } .close-btn { font-size: 22px; } } /* ===== Small Mobile (max-width: 480px) ===== */ @media (max-width: 480px) { .detail-hero { height: 55vh; } .small-logo:where(:not(.hero-logos .small-logo)) { height: 34px; } .card img { border-radius: 12px; } } /* ================================ PUBLIC ADVISORY & TERMS AND CONDITIONS ================================ */ /* Public Advisory & Terms and conditions */ /* Laptop: 1335px to 992px */ @media screen and (max-width: 1536px) and (min-width: 1025px) { .public .heading h2 { font-size: 28px !important; margin-bottom: 8px !important; line-height: 1.3; } .public .heading .underline { width: 150px !important; height: 3px !important; margin-bottom: 22px !important; } } /* Tablet: 991px to 768px */ @media screen and (max-width: 1024px) and (min-width: 768px) { .public .heading h2 { font-size: 25px !important; margin-bottom: 8px !important; } .public .heading p { margin-bottom: 16px !important; } .public .heading .underline { width: 130px !important; margin-bottom: 20px !important; } } /* Mobile: 300px to 767px */ @media (max-width:767px) { /* Public Advisory Section */ /* Heading Box */ .public .heading { text-align: left !important; } /* Main Title */ .public .heading h2 { font-size: 1.3rem !important; margin-bottom: 6px !important; text-align: center !important; } /* Underline */ .public .heading .underline { width: 55px !important; height: 3px !important; background: #0071bb !important; margin-bottom: 10px !important; } /* Paragraphs */ .public .heading p { margin-bottom: 30px !important; } /* Website link paragraph (last p) */ .public .heading p:last-child { margin-bottom: 4px !important; } } /* CAREER PAGE RESPONSIVE */ /* TABLET CAREER PAGE RESPONSIVE */ @media (min-width:768px) and (max-width:1024px) { /* ------- HEADING -------- */ .heading:where(:not(.career-section > .heading, .public > .heading)) { margin-right: auto !important; margin-left: auto !important; padding-right: 0 !important; padding-left: 0 !important; } .heading p { color: black !important; } /* ------- JOB TABLE -------- */ /* -------- CONTACT AREA -------- */ .contact-area .underline { width: 150px !important; height: 3px !important; background: #0071bb !important; margin-bottom: 20px !important; border-radius: 10px !important; } .career-section .form-box { font-size: 15px !important; } .career-section .info-box { font-size: 15px !important; } .career-section input:not(.form-input, [type="checkbox"]) { width: 100% !important; padding: 10px !important; border-radius: 5px !important; } } /* MOBILE CAREER PAGE RESPONSIVE */ @media (max-width:767px) { /* 1. Outer section margin / padding */ /* 2. Heading text size */ .career-section .heading h2 { text-align: left !important; } .career-section .underline { margin-left: 2px !important; margin-bottom: 10px !important; } /* 3. Job table – horizontal scroll */ /* 4. Contact area – stack form & address */ .career-section .form-box, .career-section .info-box { box-sizing: border-box !important; } /* 4a. Form inputs full-width & compact */ .career-section .form-box input:not(.form-input, [type="checkbox"]) { width: 100% !important; font-size: 0.85rem !important; } } /* ===== Added: NRI Corner outer container — Mobile <= 480px ===== */ @media (max-width: 480px) { .nri-corner { box-sizing: border-box; font-size: 14px; line-height: 1.4; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; width: 100%; max-width: 100%; } /* Make media inside the outer container responsive */ .nri-corner img, .nri-corner video, .nri-corner iframe { max-width: 100%; height: auto; display: block; } /* Reset any large side gutters inside the outer wrapper */ .nri-corner>* { margin-left: 0; margin-right: 0; } } /* ===== Added: NRI NAV LIST (.nri-tabs) — Mobile <= 480px ===== */ @media (max-width: 480px) { .nri-tabs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-right: 6px; padding-left: 6px; margin-right: 0; margin-left: 0; align-items: center; scrollbar-width: thin; } .nri-tabs::-webkit-scrollbar { height: 8px; } .nri-tabs::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 8px; } .nri-tabs .tab { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; line-height: 1; white-space: nowrap; border-radius: 6px; border: 1px solid #e6e6e6; background: #f8f8f8; color: #222; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } .nri-tabs .tab.active { background: #0071bb; color: #fff; border-color: #0071bb; } .nri-tabs .tab:focus { outline: 2px solid rgba(0, 113, 187, 0.2); outline-offset: 2px; } /* If tabs are stacked elsewhere, ensure full-width fallback */ .nri-tabs.stack .tab { flex: 1 1 auto; width: auto; } } /* ===== Added: NRI CONTENT outer body — Mobile <= 480px ===== */ @media (max-width: 480px) { .nri-content { display: block; width: 100%; max-width: 100%; padding: 0 10px; box-sizing: border-box; gap: 12px; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; } /* Ensure each content section stacks and fills width */ .nri-content .content-box { width: 100%; max-width: 100%; margin-right: 0; margin-left: 0; box-sizing: border-box; } /* Convert two-column wrappers into a vertical flow */ .nri-content .home-fest-first, .nri-content .home-fest-register, .nri-content .why-attend-wrapper, .nri-content .map-fest-wrapper { display: block; gap: 10px; } .nri-content .legal-wrapper, .nri-content .loan-wrapper, .nri-content .faq-wrapper, .nri-content .enq-wrapper { display: block; gap: 10px; } /* Make images and media full-width inside content */ .nri-content img, .nri-content video, .nri-content iframe { max-width: 100%; height: auto; display: block; margin: 8px 0; } /* Text areas should take full width */ .nri-content .legal-text, .nri-content .loan-text, .nri-content .faq-text, .nri-content .enq-text { width: 100%; } /* Headings scaled for mobile */ .nri-content h1, .nri-content .faq-heading h1 { font-size: 18px; margin-bottom: 8px; } .nri-content h2:not(.section-heading) { margin-bottom: 8px; } .nri-content .faq-heading { padding: 0 8px !important; } /* Documents / lists flow vertically */ .nri-content .doc-container .doc-content { display: block; } /* Forms: full width fields */ /* Reduce large paddings inside content for small screens */ .nri-content .legal-intro-box, .nri-content .loan-intro-box, .nri-content .faq-intro-box, .nri-content .enq-intro-box { padding: 6px 0; font-size: 14px; } } /* ===== Added: LEGAL INFO (content-box#legal-info) — Mobile <= 480px ===== */ @media (max-width: 480px) { .content-box#legal-info { box-sizing: border-box; } .content-box#legal-info .legal-wrapper { display: block; gap: 10px; align-items: stretch; } .content-box#legal-info .legal-text { width: 100%; margin-bottom: 8pxm; } .content-box#legal-info .legal-intro-box p { margin: 0 0 8px 0; } .content-box#legal-info .legal-image { width: 100%; margin: 6px 0 12px 0; text-align: center; } .content-box#legal-info .legal-image img { max-width: 100%; height: auto; border-radius: 6px; display: inline-block; } /* List of points: vertical stack with clear bullets */ .content-box#legal-info .legal-points { display: block; gap: 10px; } .content-box#legal-info .legal-point { display: flex !important; gap: 10px !important; align-items: flex-start !important } .content-box#legal-info .legal-dash { width: 8px !important; height: 5px !important; background: #0071bb; border-radius: 2px; margin-top: 6px; flex: 0 0 auto; } .content-box#legal-info .legal-point p { margin: 0; } /* Tighten spacing for very small screens */ } /* Responsive adjustments for loan accordion mobile , tablet , laptop - preserves existing animations */ @media (max-width: 1024px) { .loan-accordion { max-width: 920px; margin: 30px auto; padding: 0 18px; } .loan-header { padding: 16px 0; text-align: left; } .loan-header span:first-child { font-size: 18px; } .loan-icon { font-size: 26px; } .loan-body p { padding: 16px 0 20px; } } @media (max-width: 768px) { .loan-accordion { max-width: 680px; margin: 22px auto; padding: 0 14px; border-left: none; border-right: none; } .loan-header span:first-child { font-size: 16px; letter-spacing: 0.02em; } .loan-icon { font-size: 22px; } .loan-body p { padding: 14px 0 18px; } .loan-header { padding: 14px 0; } } @media (max-width: 480px) { .loan-accordion { max-width: 100%; margin: 16px auto; padding: 0 12px; } .loan-header span:first-child { font-size: 15px; font-weight: 500; text-align: left; } .loan-icon { font-size: 20px; } .loan-body p { padding: 12px 0 16px; } /* slightly reduce top/bottom margin to fit small screens */ .loan-accordion { margin-top: 12px; margin-bottom: 20px; } } /* Responsive adjustments for NRI FAQs accordion mobile , tablet , laptop - preserves existing animations */ @media (max-width: 1024px) { .faq-accordion { max-width: 920px; padding: 0 18px; } .faq-header { padding: 16px 0; } .faq-header span:first-child { font-size: 18px; } .faq-icon { font-size: 26px; } .faq-body p { padding: 16px 0 20px; } } @media (max-width: 768px) { .faq-heading h1 { font-size: 18px !important; letter-spacing: 0.02em; text-align: left; } .faq-heading p { font-size: 14px !important; letter-spacing: 0.02em; text-align: left; } .faq-accordion { max-width: 680px; padding: 0 14px; border-left: none; border-right: none; } .faq-header span:first-child { font-size: 16px; letter-spacing: 0.02em; } .faq-icon { font-size: 22px; } .faq-body p { padding: 14px 0 18px; } .faq-header { padding: 14px 0; } } @media (max-width: 480px) { .faq-accordion { max-width: 100%; padding: 0 12px; } .faq-header span:first-child { font-size: 15px; font-weight: 500; text-align: left; } .faq-icon { font-size: 20px; } .faq-body p { padding: 12px 0 16px; } /* slightly reduce top/bottom margin to fit small screens */ } /* nri faq last doc section */ @media (max-width: 480px) { .doc-container { padding: 0 16px; } /* HEADERS */ .doc-headers { display: none; /* hide desktop header row */ } /* CONTENT */ .doc-content { display: flex; flex-direction: column; gap: 32px; } /* EACH LIST BLOCK */ .doc-content ul { padding-left: 18px; margin: 0; margin-bottom: 15px; } /* ADD MOBILE HEADINGS USING ::before */ .doc-content ul:first-child::before { content: "Salaried Individuals"; display: block; font-size: 18px; font-weight: 600; margin-bottom: 20px; } .doc-content ul:last-child::before { content: "Self-Employed Individuals"; display: block; font-size: 18px; font-weight: 600; margin-bottom: 20px; } /* DIVIDER */ .doc-divider { margin: 24px 0; } } /* ===== Enquire section - Mobile (max-width: 480px) ===== */ @media (max-width: 480px) { /* Enquire-specific fixes to avoid right-side clipping */ .nri-content .enq-wrapper { display: block !important; width: 100% !important; max-width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; padding-right: 8px !important; padding-left: 8px !important; box-sizing: border-box !important; } .nri-content .enq-text { padding: 0 4px !important; } .nri-content .enq-image { width: 100% !important; display: block !important; margin: 8px 0 0 0 !important; justify-content: center !important; } .nri-content .enq-image img { width: 100% !important; max-width: 360px !important; border-radius: 5px !important; height: auto !important; display: block !important; transform: none !important; object-fit: cover !important; } .nri-content .enq-contact-box { max-width: 360px !important; width: 100% !important; padding: 12px !important; box-sizing: border-box !important; } /* Enquiry form container: constrain to 480px and center */ /* Stack form fields into a single column for small screens */ /* defensive: prevent any child from causing horizontal overflow */ .nri-content { overflow-x: hidden !important; } } /* Mobile-only: ensure NRI Home Fest banner fits small screens (max-width:480px) */ @media (max-width: 480px) { .home-fest-first { width: 100% !important; max-width: 600px !important; overflow: hidden !important; display: block !important; } .home-fest-first img { display: block !important; width: 100% !important; height: auto !important; max-height: 60vh !important; object-fit: cover !important; } } /* Mobile: Home Fest Registration form tweaks (max-width:480px) */ @media (max-width: 480px) { .home-fest-register { padding: 0 !important; margin: 0 !important; } .home-fest-register .container { padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .home-fest-register .form-title { text-align: center !important; } .home-fest-register .form-title span { display: none !important; } } /* Fix horizontal clipping/overflow on very small screens */ @media (max-width: 480px) { html, body { overflow-x: hidden !important; overflow-x: clip !important; } .home-fest-register, .home-fest-register .container { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding-left: 12px !important; padding-right: 12px !important; margin: 0 auto !important; overflow-x: hidden !important; } /* Defensive: ensure no child produces extra width */ .home-fest-register *:where(:not(.site-form,.site-form *:not(.hp-field):not(.iti__country-list):not(.iti__country-list *))) { box-sizing: border-box !important; } .home-fest-register *:where(:not(.section-heading,.site-form,.site-form *:not(.hp-field):not(.iti__country-list):not(.iti__country-list *))) { max-width: 100% !important; } } /* Mobile adjustments why attend for small screens (max-width: 480px) */ @media (max-width: 480px) { .why-attend-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; padding: 0 !important; } .why-attend-content h2 { text-align: center; } .why-attend-content p { margin: 0; } .why-attend-image img { width: 100%; max-width: 600px !important; height: auto; display: block; margin: 8px auto 0 auto; } } /* Mobile adjustments project map for small screens (max-width: 480px) */ @media (max-width: 480px) { .map-fest-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; padding: 12px !important; } .map-fest-wrapper .map-fest-content h2 { margin: 0 0 6px 0 !important; text-align: center !important; position: relative !important; } .map-fest-wrapper .map-fest-image img { width: 100% !important; max-width: 350px !important; height: auto !important; display: block !important; margin: 8px auto 0 auto !important; } } /* Laptop adjustments for enquiry form (max-width: 1024px) */ /* ================= Laptop (max-width: 1024px) ================= */ @media (max-width: 1024px) { /* Section spacing */ .home-fest-register { padding: 30px 30px; } /* Title adjustment only */ /* Keep same desktop rows – no stacking */ /* Labels – slight reduction */ /* Inputs – FORCE desktop underline style */ .home-fest-register .fest-form input:not(.form-input, [type="checkbox"]) { font-size: 15px !important; padding: 12px 0 !important; border: none !important; border-bottom: 1px solid #bbb !important; background: transparent !important; box-shadow: none !important; } .home-fest-register .fest-form input:focus:not(.form-input, [type="checkbox"]) { border-bottom-color: #000 !important; outline: none !important; } /* Checkbox text */ /* Button – keep desktop feel */ /* some style adjust for way attend and map */ .why-attend-wrapper .why-attend-content { padding: 0 30px !important; } } /* ================= Tablet (max-width: 768px) ================= */ @media (max-width: 768px) { /* Section spacing */ .home-fest-register { padding: 30px 30px; } /* Title adjustment only */ .home-fest-register .form-title span { flex: 0 1 80px; height: 2px; background: #0071bb; } /* Keep same desktop rows – no stacking */ /* Labels – slight reduction */ /* Inputs – FORCE desktop underline style */ .home-fest-register .fest-form input:not(.form-input, [type="checkbox"]) { font-size: 15px !important; padding: 12px 0 !important; border: none !important; border-bottom: 1px solid #bbb !important; background: transparent !important; box-shadow: none !important; } .home-fest-register .fest-form input:focus:not(.form-input, [type="checkbox"]) { border-bottom-color: #000 !important; outline: none !important; } /* Checkbox text */ /* Button – keep desktop feel */ /* some style adjust for way attend and map */ .why-attend-wrapper .why-attend-content { padding: 0 30px !important; } /* LEFT LINE */ .map-fest-content h2::before, .map-fest-content h2::after { content: ""; position: absolute; top: 50%; width: 60px; height: 2px; background: #0071bb; } /* Left side */ .map-fest-content h2::before { left: -38px; } /* Right side */ .map-fest-content h2::after { right: -38px; } } /* ===== Legal section – Tablet (max-width: 768px) ===== */ @media (max-width: 768px) { .legal-wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; padding-right: 0; padding-left: 0; } /* TEXT SIDE */ /* IMAGE SIDE */ .legal-image { width: 100%; max-width: 400px; /* keeps image compact */ } .legal-image img { width: 100%; height: 300px; /* FIXED height */ object-fit: cover; /* crop nicely */ border-radius: 8px; } } /* ===== loan section – Tablet (max-width: 768px) ===== */ @media (max-width: 768px) { .loan-wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; padding-right: 0; padding-left: 0; } /* TEXT SIDE */ /* IMAGE SIDE */ .loan-image { width: 100%; max-width: 400px; /* keeps image compact */ } .loan-image img { width: 100%; height: 300px; /* FIXED height */ object-fit: cover; /* crop nicely */ border-radius: 8px; } } /* ===== FAQ section – Tablet (max-width: 768px) ===== */ @media (max-width: 768px) { .faq-wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: start !important; gap: 20px; padding-right: 0; padding-left: 0; } /* TEXT SIDE */ .faq-contact-box { font-size: 13px; } .faq-contact-box .contact-item { gap: 8px; } .faq-contact-box a, .faq-contact-box p { font-size: 13px; } /* IMAGE SIDE */ .faq-image { width: 100%; max-width: 400px; /* keeps image compact */ } .faq-image img { width: 100%; height: 450px; /* FIXED height */ object-fit: cover; /* crop nicely */ border-radius: 8px; } } /* ===== ENQ section – Tablet (max-width: 768px) ===== */ @media (max-width: 768px) { .enq-wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: start !important; gap: 20px; padding-right: 0; padding-left: 0; } /* TEXT SIDE */ .enq-contact-box { font-size: 13px; } .enq-contact-box .contact-item { gap: 8px; } .enq-contact-box a, .enq-contact-box p { font-size: 13px; } /* IMAGE SIDE */ .enq-image { width: 100%; max-width: 400px; /* keeps image compact */ } .enq-image img { width: 100%; height: 350px; /* FIXED height */ object-fit: cover; /* crop nicely */ border-radius: 8px; } } /* ===================================================================== Fixes 30 Oct 2026 (D5, D6) ===================================================================== */ /* D5: floating call / WhatsApp buttons stay under the open menu, and on phones step aside while the menu is open or a form field has focus (body classes set by script.js) */ /* D6: Career job table becomes one card per job on phones (labels come from data-label) */ /* D: Ongoing project cards were a fixed 380px inside narrower grid columns between 1025-1536px, so they overlapped each other (and pushed the page 13px wider at 1100px). */ @media (min-width: 1025px) and (max-width: 1536px) { .ongoingwrap .cinema-card { justify-self: center; } } /* D: two sections were 10-12px wider than the screen on tablets (768px) */ @media (max-width: 1024px) { @media (max-width: 1023.98px) { section.section.fade-in { width: auto !important; } } } @media (max-width: 800px) { section.value-services-page { width: auto !important; max-width: none !important; } } /* D: home "Who we are" row was 30px wider than a 768px tablet (fixed 40% stats column + 60px gap) */ @media (min-width: 600px) and (max-width: 1024px) { @media (max-width: 1023.98px) { .who-we-are > .who-content, .who-we-are > .who-stats { flex-shrink: 1 !important; min-width: 0 !important; } } } /* D: Value Added Services logos were a fixed 300px and 5px too wide on 320px phones */