/* ===================================================================== SMART ESTIMATION — consolidated custom styles ===================================================================== */ /* one shared page gutter so every custom section lines up with .container */ /* ---------- global responsive safety net ---------- */ /* long unbroken strings (emails, URLs) must not force a sideways scroll */ /* ---------- scroll reveal engine ---------- */ /* sideways reveals cause horizontal jitter on narrow screens — go vertical there */ /* ---------- header top bar safety ---------- */ /* ---------- hero enhancements ---------- */ /* ---------- trust strip under hero ---------- */ /* ---------- service card polish ---------- */ /* ---------- shared orange button ---------- */ /* ---------- Who We Are ---------- */ /* ---------- stats + quality ---------- */ /* ---------- process / how it works ---------- */ /* ---------- tools carousel ---------- */ /* NOTE: this section previously used inline style="...!important" attributes. Inline !important outranks stylesheet !important, so none of the media queries below could ever apply. Everything now lives in classes. */ /* ---------- why choose us cards ---------- */ /* ---------- project tabs polish ---------- */ /* ---------- FAQ ---------- */ /* ---------- footer social ---------- */ /* ===================================================================== RESPONSIVE LAYER Everything below adapts the theme itself. It is last in the file so it wins over the theme's own rules at equal specificity. ===================================================================== */ /* ---- 1. Fluid hero type ------------------------------------------------- The theme sets fixed pixel sizes for the hero and only overrides them at a few breakpoints, so the headline clips between them. clamp() scales it continuously from 320px up to desktop, which removes the need for per-breakpoint font rules entirely. */ /* ---- 2. Hero height per breakpoint -------------------------------------- The theme covers 768–991px and ≤575px but leaves 576–767px and 992–1199px on the desktop default of 900px, which overflows most laptop and large-phone viewports. */ /* mt-110 is a 110px gap — far too much above the fold on a phone */ /* stack the two hero buttons full width so neither gets a cramped tap target */ /* ---- 3. Header at the 992–1199px squeeze -------------------------------- Logo + six nav items + the quote button share one row before Bootstrap's xl breakpoint. Tightening spacing keeps them on a single line. */ /* top bar items wrap rather than collide at narrow desktop widths */ /* the mobile drawer sits under a transparent header — give it breathing room */ /* ---- 4. Section rhythm on small screens --------------------------------- section-padding30 is 100px top and bottom, which reads as dead space on a phone and pushes real content several swipes down. */ /* ---- 5. Section titles --------------------------------------------------- .back-text is a very large outlined word behind each heading. At fixed size it runs past the viewport edge on phones; body overflow hides it, but it also crowds the heading, so it scales down instead. */ /* ---- 6. Contact band ----------------------------------------------------- */ /* ---- 7. Project tab panes ------------------------------------------------ Bootstrap tab panes keep their inactive siblings in the flow on some mobile browsers when the fade class is used without .show; forcing the display avoids a tall blank gap under the active tab. */ /* ---- 8. Footer ---------------------------------------------------------- The footer columns use col-sm-8 / col-sm-5 / col-sm-7, which do not sum to 12, so they sit at odd widths between 576px and 767px. Full width below 768px is cleaner and keeps the newsletter field usable. */ /* ---- 9. Touch targets and tap behaviour ---------------------------------- */ /* hover lifts never resolve on touch, leaving cards stuck mid-transform */ /* ---- 10. Very small phones (≤360px) -------------------------------------- */ /* ---- 11. Landscape phones ------------------------------------------------ A short viewport in landscape makes a min-height hero swallow the screen. */ /* ---- 12. Print ----------------------------------------------------------- */ --> /* must mirror the flex-basis breakpoints in the stylesheet */ /* swipe support — arrows alone are awkward on a phone */ /* recalculate on resize and on orientation change, debounced */ /* Section-level reveals */ /* Item-level staggered reveals */ /* Directional reveal on the About section */ /* Animated stat counters */