/* ============================================================ MBC BUILDWORKS — responsive.css The original stylesheet shipped with ZERO @media queries, fixed 72px paddings and absolute-positioned elements — so the site broke on tablets/phones. This file adds Bootstrap-based breakpoints on top of the untouched desktop layout. ============================================================ */ /* ---------- 1. FONT / "HIGHLIGHT" FIX ---------- The gold outline text (hero "MBC" logotype, section numerals, background numerals) is built with color:transparent + -webkit-text-stroke. That CSS property is WebKit/Blink-only — on Firefox/older browsers the stroke never paints and the text is fully invisible ("highlight nahi ho raha"). We add a solid fallback fill for browsers that don't support text-stroke. */ @supports not (-webkit-text-stroke: 1px black){ .b-mbc, .b-mbc::after, .im-cn, .cta-bg-txt, .model-num, .pre-mbc{ color: var(--gold) !important; opacity: .85; } } /* ---------- 2. BOOTSTRAP NAVBAR INTEGRATION ---------- */ #nav{ flex-wrap: wrap; } #nav .navbar-toggler{ border: 1px solid rgba(201,168,76,.35); padding: 8px 10px; display: none; flex-direction: column; gap: 4px; background: transparent; } #nav .navbar-toggler:focus{ box-shadow: none; outline: none; } #nav .nav-toggler-bar{ display: block; width: 20px; height: 1.5px; background: var(--gold); } #nav .na-drop{ position: relative; list-style: none; margin-bottom: 5px; } #nav .na-drop .dropdown-menu{ background: var(--navy2); border: 1px solid rgba(201,168,76,.18); border-radius: 0; padding: 6px 0; margin-top: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.4); } #nav .na-drop .dropdown-item{ color: rgba(255,255,255,.65); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 20px; transition: all .2s; } #nav .na-drop .dropdown-item:hover, #nav .na-drop .dropdown-item:focus{ background: rgba(201,168,76,.08); color: var(--gold); } #nav .na-drop .dropdown-divider{ border-color: rgba(201,168,76,.15); margin: 4px 0; } #nav .na.dropdown-toggle::after{ margin-left: 6px; vertical-align: 2px; border-top-color: rgba(255,255,255,.5); } /* ---------- 3. DISABLE CUSTOM CURSOR ON TOUCH DEVICES ---------- cursor:none on plus a JS-driven fake cursor makes the site unusable on phones/tablets (no mouse to draw). */ @media (hover: none), (pointer: coarse){ body{ cursor: auto !important; } #cur, #cur-r, .cursor-trail{ display: none !important; } } /* ================================================================ 4. BREAKPOINTS ================================================================ */ /* ---- ≥992px : DESKTOP NAV FIX ---- Bug: Bootstrap's ".navbar-expand-lg{justify-content:flex-start}" (a single class selector) overrides the custom "nav{justify-content:space-between}" (element selector) because class selectors beat element selectors. On top of that, Bootstrap's base ".navbar-collapse{flex-grow:1}" rule makes the menu wrapper expand and eat all the free space, so the actual links (.nr) end up hugging the left edge right next to the logo instead of sitting at the right edge — leaving one big empty gap on the right instead of an empty gap in the middle. Fix: force logo-left / menu-right with space-between (using an ID+class selector so it reliably beats Bootstrap's class-only rule), and stop .navbar-collapse from growing so it hugs its own content and gets pushed flush right by that space-between. */ @media (min-width: 992px){ #nav.navbar-expand-lg{ flex-wrap: nowrap; justify-content: space-around; } #nav .navbar-collapse{ flex-grow: 0; flex-basis: auto; display: flex; } #nav .nr{ flex-wrap: nowrap; } } /* ---- 992px–1199px : tighten the menu so it doesn't overflow/wrap on smaller laptop widths now that it's forced onto one line ---- */ @media (min-width: 992px) and (max-width: 1199.98px){ #nav .nr{ gap: 16px; } #nav .na{ letter-spacing: 2px; } #nav .nb{ padding: 10px 16px; } } /* ---- ≤1199px : small laptops / large tablets ---- */ @media (max-width: 1199.98px){ nav{ padding: 16px 32px; } nav.sc{ padding: 10px 32px; } .hc{ padding-left: 40px; padding-right: 40px; max-width: 520px; } .h-bar{ padding-left: 40px; padding-right: 40px; } .h-stats{ right: 28px; } .models-grid{ grid-template-columns: repeat(2,1fr); } .calc-services{ grid-template-columns: repeat(2,1fr); } .svc-grid{ grid-template-columns: repeat(2,1fr); } .how-steps{ grid-template-columns: repeat(3,1fr); } .im-b{ grid-template-columns: repeat(2,1fr); } .ft{ grid-template-columns: 1.4fr 1fr 1fr; } .ft > div:last-child{ grid-column: span 3; } } /* ---- ≤991px : tablets ---- */ @media (max-width: 991.98px){ /* Nav becomes a collapsible Bootstrap menu */ #nav{ padding: 14px 20px; } #nav .navbar-toggler{ display: flex; } #nav .navbar-collapse{ width: 100%; background: var(--navy); margin-top: 14px; border-top: 1px solid rgba(201,168,76,.12); } #nav .nr{ flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 0 6px; width: 100%; } #nav .na{ padding: 10px 4px; width: 100%; } #nav .na-drop{ width: 100%; } #nav .na-drop .dropdown-menu{ position: static; width: 100%; margin-top: 4px; box-shadow: none; } #nav .nb{ margin-top: 10px; width: 100%; } .hero{ min-height: 560px; } .hc{ padding-top: 64px; max-width: 100%; } .h-stats{ position: static; transform: none; text-align: left; display: flex; gap: 28px; padding: 0 40px 20px; margin-top: -8px; } .h-sdiv{ display: none; } .h-bar{ flex-wrap: wrap; gap: 12px; padding: 12px 20px 18px; } .p-design, .p-build{ padding: 56px 32px; } .dept-split{ grid-template-columns: 1fr; } .gallery{ padding: 64px 32px; } .gal-grid{ grid-template-columns: repeat(6,1fr); } .calc-grid{ grid-template-columns: 1fr; } .calc-services{ grid-template-columns: repeat(2,1fr); } .svc-grid{ grid-template-columns: repeat(2,1fr); } .how-steps{ grid-template-columns: repeat(2,1fr); } .models-grid{ grid-template-columns: 1fr; } .im-a, .im-b{ height: auto; min-height: 70vh; padding: 60px 32px; } .im-b{ grid-template-columns: repeat(2,1fr); } .faq-section{ padding: 60px 32px; } .ft{ grid-template-columns: 1fr 1fr; gap: 32px; } .ft > div:last-child{ grid-column: span 2; } .sticky-bar{ padding: 12px 24px; flex-wrap: wrap; gap: 10px; } .sb-sub{ display: none; } .chat-window{ width: 320px; height: 460px; } } /* ---- ≤767px : phones (landscape) ---- */ @media (max-width: 767.98px){ .mq1-item{ padding: 11px 20px; font-size: 8px; } .mq2-item{ padding: 11px 24px; font-size: 12px; } .hc{ padding-left: 24px; padding-right: 24px; padding-top: 56px; } .h-eye-t{ font-size: 7px; } .h-sub{ font-size: 10px; } .h-btns{ max-width: 100%; } .h-btns .btn-p, .h-btns .btn-g{ width: 100%; } .h-stats{ padding: 0 24px 16px; gap: 20px; flex-wrap: wrap; } .h-sv{ font-size: 30px; } .h-bar{ padding: 10px 16px 16px; } .h-cap-title{ font-size: 12px; } .h-inds{ display: none; } .models-header, .calc-wrap, .how-header, .faq-wrap{ padding-left: 8px; padding-right: 8px; } .p-design, .p-build{ padding: 44px 20px; } .gallery{ padding: 48px 20px; } .gal-grid{ grid-template-columns: repeat(2,1fr); } .calc-services{ grid-template-columns: repeat(2,1fr); gap: 6px; } .svc-grid{ grid-template-columns: 1fr 1fr; } .how-steps{ grid-template-columns: 1fr; } .im-b{ grid-template-columns: 1fr; height: auto; } .im-a{ padding: 48px 20px; } .faq-section{ padding: 48px 20px; } .cta-s{ padding: 64px 20px !important; } .ft{ grid-template-columns: 1fr; gap: 28px; text-align: left; } .ft > div:last-child{ grid-column: span 1; } .f-bot{ flex-direction: column; gap: 6px; text-align: center; } .ss-bar{ display: none; } /* social rail overlaps content on narrow screens */ .sticky-bar{ padding: 10px 16px; } .sb-title{ font-size: 9px; } .sb-phone{ display: none; } .chat-bubble{ right: 12px; bottom: 84px; } .chat-window{ width: calc(100vw - 24px); height: 70vh; } .modal{ padding: 32px 24px; } .form-row-2{ grid-template-columns: 1fr; } } /* ---- ≤575px : small phones ---- */ @media (max-width: 575.98px){ .nl-mbc{ font-size: 19px; letter-spacing: 5px; } .nl-bw{ font-size: 9px; letter-spacing: 3px; } .h-head{ font-size: clamp(32px,9vw,44px); } .b-mbc{ font-size: clamp(38px,15vw,52px); letter-spacing: 10px; } .b-ruler{ width: 100%; } .models-h, .calc-title, .how-title, .faq-title{ font-size: clamp(26px,7vw,36px); } .calc-services{ grid-template-columns: 1fr 1fr; } .svc-grid{ grid-template-columns: 1fr; } .gal-grid{ grid-template-columns: 1fr 1fr; } .model-card{ padding: 28px 20px; } .im-cn{ font-size: 44px; } } /* ---- Hero slideshow: keep it visually correct at very wide / very short viewports ---- */ @media (max-height: 620px) and (min-width: 768px){ .hero{ min-height: 620px; height: auto; } .hc{ padding-top: 90px; padding-bottom: 16px; } }