/* ============================================================ Framework Technology — Theme & Accessibility Layer Loaded after tokens.css. Fixes contrast, focus, motion, RTL, forms, hero legibility, brand palette, and premium polish. ============================================================ */ /* ---- Typography application (Roboto EN / Droid Arabic Kufi AR) ---- */ body { font-family: var(--ft-font-en); font-size: var(--fs-body); color: var(--ft-ink); } h1, h2, h3, h4, h5, h6 { font-family: var(--ft-font-heading); color: var(--ft-navy); } p, .text { color: var(--ft-muted); } html[lang="ar"] body, [dir="rtl"] body, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: var(--ft-font-ar); } /* ---- file:// fallback (both languages) ---- Browsers always fetch webfonts in CORS mode; under file:// the origin is "null" so that fetch is blocked. The per-page boot script adds `.file-proto` to when location.protocol === "file:". Swap the Latin (English) stack to system fonts so roboto-400.woff2 is never requested at all (no CORS error) — on English pages AND on Arabic pages (whose Latin runs also resolve --ft-font-en). The Arabic body font (Droid Arabic Kufi) is untouched: its @font-face loads fine under file://. Icon fonts (Font Awesome / Flaticon / custom icon classes) declare their own font-family and are unaffected. Over http/https nothing changes; the approved Roboto + Droid Arabic Kufi rendering is preserved exactly. */ .file-proto { --ft-font-en: system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif; } /* Fluid, responsive heading sizes (replace fixed 96px/60px) */ h1 { font-size: var(--fs-hero); line-height: 1.08; } h2 { font-size: var(--fs-h2); line-height: 1.14; } h3 { font-size: var(--fs-h3); line-height: 1.2; } h4 { font-size: var(--fs-h4); line-height: 1.25; } h5 { font-size: var(--fs-h5); line-height: 1.3; } h6 { font-size: var(--fs-h6); line-height: 1.35; } .slider-one_heading { font-size: clamp(2rem, 1.1rem + 3.4vw, 2.6rem) !important; line-height: 1.08 !important; } .sec-title_heading { font-size: var(--fs-h2); } /* ---- Skip link ---- */ .skip-link { position: absolute; inset-inline-start: var(--sp-4); top: -100px; z-index: 100000; background: var(--ft-navy); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; transition: top var(--dur) var(--ease); } .skip-link:focus { top: var(--sp-4); color: #fff; outline: 3px solid var(--ft-frame-blue); } /* ---- Visible focus (defeats legacy outline:none !important) ---- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .theme-btn:focus-visible, .swiper-pagination-bullet:focus-visible, summary:focus-visible { outline: 3px solid var(--ft-frame-blue) !important; outline-offset: 2px !important; border-radius: 4px; } :focus-visible { outline: 3px solid var(--ft-frame-blue); outline-offset: 2px; } /* ---- Brand palette retune (was blue #000DFF -> magenta #C115EC) ---- */ .preloader { background-image: var(--ft-gradient) !important; } .btn-style-one { background-image: var(--ft-gradient) !important; } .btn-style-one::before, .btn-style-two::before, .btn-style-three::before { background-image: var(--ft-gradient) !important; } .btn-style-three { background-color: var(--ft-navy) !important; } .sec-title_title { color: var(--ft-frame-blue-700); } .sec-title_dots span { background-image: var(--ft-gradient) !important; } ::-webkit-scrollbar-thumb { background-color: var(--ft-frame-blue-700); } .about-three_experiance { background-color: var(--ft-navy) !important; } /* ---- HERO legibility: contrast scrim + guaranteed readable text ---- */ .slider-one .swiper-slide::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* background: linear-gradient(180deg, rgba(11,20,45,.42) 0%, rgba(11,20,45,.55) 50%, rgba(11,20,45,.66) 100%);*/ /* background: linear-gradient(180deg, rgb(11 20 45 / 0%) 0%, rgb(11 20 45 / 13%) 50%, rgb(11 20 45 / 0%) 100%);*/ background: unset; } .slider-one_content { position: relative; z-index: 2; } .slider-one_heading, .slider-one_title { color: #fff !important; text-shadow: 0 2px 18px rgba(6,12,30,.55); } .slider-one_heading { white-space: normal !important; } .slider-one_title { background: rgba(106,195,238,.22); border: 1px solid rgba(255,255,255,.35); } /* ---- Fixed "Request Demo" CTA: prevent covering content ---- */ .demo-request-fixed { z-index: var(--z-sticky); box-shadow: var(--shadow-lg); } .footer-style_three, footer.footer-style_three { /* padding-bottom: 200px;*/ } @media (max-width: 767px) { .demo-request-fixed { inset-inline-start: 50%; transform: translateX(-50%); bottom: 12px; width: max-content; } [dir="rtl"] .demo-request-fixed { transform: translateX(50%); } } /* ---- Remove distracting custom cursor (no measurable value; hurts a11y) ---- */ .cursor, .cursor-follower { display: none !important; } a, button, .theme-btn, [role="button"], summary, label[for] { cursor: pointer; } /* ---- Touch targets (min 44x44 for icon-only controls). Header controls are intentionally EXCLUDED to preserve the exact baseline header sizing (see the header baseline-restoration block below). ---- */ .footer-three_socials a, .social-box a, .scroll-top { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ---- Accessible form system: labels, states, messages ---- */ .form-field { position: relative; margin-bottom: var(--sp-5); } .form-field > label { display: block; font-weight: 600; color: var(--ft-navy); margin-bottom: 6px; font-size: var(--fs-small); } .form-field .req { color: #c0392b; } .form-group input, .form-group textarea, .form-group select { border: 1px solid var(--ft-border) !important; border-radius: var(--radius-sm); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--ft-frame-blue-700) !important; } .field-error { display: none; color: #b02a1e; font-size: var(--fs-small); margin-top: 6px; font-weight: 600; } [aria-invalid="true"] { border-color: #c0392b !important; } .form-field.invalid .field-error { display: block; } .form-status { border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 600; margin-top: var(--sp-4); } .form-status[hidden] { display: none; } .form-status.is-success { background: #e7f7ee; color: #0b5b34; border: 1px solid #b7e4cd; } .form-status.is-error { background: #fdecea; color: #7a1a11; border: 1px solid #f5c6c2; } .form-error-summary { background: #fdecea; border: 1px solid #f5c6c2; color: #7a1a11; padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: var(--sp-5); } .form-error-summary a { color: #7a1a11; font-weight: 700; text-decoration: underline; } .btn-loading { position: relative; pointer-events: none; opacity: .85; } .btn-loading::after { content: ""; width: 16px; height: 16px; margin-inline-start: 10px; display: inline-block; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: ft-spin .7s linear infinite; vertical-align: middle; } @keyframes ft-spin { to { transform: rotate(360deg); } } /* ---- Accessible click-to-load map placeholder ---- */ .map-embed { position: relative; /* box-shadow: 0 28px 80px rgba(17, 29, 66, .12);*/ border-radius: 15px!important; } .map-embed .map-facade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 200px; background: var(--ft-light-gray); border: 1px solid var(--ft-border); border-radius: var(--radius-md); color: var(--ft-navy); font-weight: 600; cursor: pointer; } .map-embed .map-facade .map-pin { font-size: 26px; color: var(--ft-frame-blue-700); } .map-embed iframe { border-radius: 10px!important; } /* ---- RTL logical corrections for common legacy patterns ---- */ [dir="rtl"] .list-style-one li { padding-inline-start: 30px; padding-inline-end: 0; } [dir="rtl"] .list-style-one li .icon { inset-inline-start: 0; inset-inline-end: auto; } [dir="rtl"] .progress-wrap { inset-inline-end: 30px; inset-inline-start: auto; direction: ltr; } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .marquee, .animation_mode, .sec-title_dots span { animation: none !important; } } /* ---- Misc polish ---- */ img, video { height: auto; } :target { scroll-margin-top: 120px; } .auto-container { max-width: var(--container); } /* ---- Contrast fixes (WCAG 2.2 AA) ---- */ .sec-title_title, .sec-title_label { color: #0c5a7d !important; } .eyebrow { color: #45506b !important; } .slider-one_reviews, .slider-one_reviews span, .offer-one_heading, .offer-one_heading a { color: var(--ft-navy) !important; } /* Author + meta sit on WHITE -> dark text */ .news-block_one-author, .news-block_one-meta a, .news-block_one-meta li { color: #45506b !important; } /* The date badge sits on the NAVY/blue badge -> light text */ .news-block_one-date, .news-block_one-date *, .news-block_one-date span, .news-block_one-date strong { color: #ffffff !important; } .about-three_text, .offer-one_tags .tag, .clients-one_title { color: var(--ft-muted); } /* Dark cards / footer -> light text for contrast */ .testimonial-two_reviews, .testimonial-two_title { color: #fff !important; } .footer-style_three, .footer-style_three p, .footer-three_text, .footer-three_appointment, .footer-three_appointment span, .footer-three_appointment .word, .footer-three_appointment-text, .footer-three_location-text, .footer-three_title, .footer-three_appointment-title { color: #e6edf7 !important; } .footer-three_location-text a, .footer-three_list a { color: #bfe0f4 !important; } .footer-three_location-text a:hover, .footer-three_list a:hover { color: #fff !important; } .testimonial-two_rating-outer { background-color: var(--ft-navy) !important; } .team-block_three .team-block_three-designation, [class*="_designation"], .team-block_three-designation, .team-block_two-designation, .team-block_one-designation, .designation, .team-designation, .member-role, .author-designation { color: #45506b !important; } /* Active nav/tab pills: darker brand so white text passes AA */ .nav-link.active, .nav-pills .nav-link.active, .nav-tabs .nav-link.active, .tab-btn.active, .filter-btn.active { background-color: var(--ft-frame-blue-700) !important; color: #fff !important; } /* Saturated-blue service cards -> light text */ /* NOTE: .service-block_one is used on BOTH white (services tabs) and colored backgrounds. Do NOT force a global color here — it made on-white list text invisible. Readable dark defaults apply on white; dark-card variants are handled by their own scoped rule below (.service-block_one.is-dark). */ .service-block_one.is-dark, .service-block_one.is-dark * { color: #fff !important; } .footer-style_three .footer-three_appointment .word, .footer-style_three .prismic-style .word { color: #eaf1fb !important; -webkit-text-fill-color: #eaf1fb !important; animation: none !important; background: none !important; opacity: 1 !important; } .footer-style_three .footer-three_appointment span { color: #eaf1fb !important; } .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ============================================================ HEADER — exact baseline (1a1d635) restoration. The header is fully styled by the UNCHANGED legacy CSS (style.css / style1.css / responsive / bootstrap). The app layer (tokens.css + theme.css body rules) was leaking into it and changing the design: body typography (Roboto / 17px / --ft-ink instead of Manrope / 14px / #666), 44px touch targets (icons 40->44), and the darkened accent (--main-color #176090 instead of frame-blue #6ac3ee). Neutralise the app layer *within the header scope only* so the header renders identically to the baseline in LTR and RTL. No structural or markup changes; the ARIA attributes added during remediation stay (they are in the HTML). */ .main-header, .mobile-menu, .xs-sidebar-group, .sticky-header { --main-color: #6ac3ee; --main-color-rgb: 106, 195, 238; --color-two: #c115ec; --color-two-rgb: 193, 21, 236; --black-color: #000000; --black-color-rgb: 0, 0, 0; --white-color: #ffffff; font-family: "Manrope", sans-serif; font-size: 14px; line-height: 1.6em; color: #666666; } /* Language switcher: baseline solid frame-blue accent (undo the app gradient). */ .main-header_button .theme-btn.btn-style-one { background-color: var(--main-color) !important; background-image: none !important; } .main-header_button .theme-btn.btn-style-one::before { background-image: linear-gradient(90deg, #6ac3ee 0%, #6ac3ee 100%) !important; } /* ============================================================ ARABIC / RTL header — Arabic-ONLY (the English header is frozen/approved). Every rule here is scoped with html[lang="ar"] / [dir="rtl"], so English (html[lang="en"]) is never affected. See FIX_ARABIC_HEADER_RTL_ONLY.md. ============================================================ */ /* 1) Typography: use Droid Arabic Kufi (not the English Manrope reset) across the Arabic desktop header, mobile menu and off-canvas panel. Baseline Arabic used ~0.9x size with looser leading so the Arabic glyphs are not clipped. */ html[lang="ar"] .main-header, html[lang="ar"] .mobile-menu, html[lang="ar"] .about-sidebar, [dir="rtl"] .main-header, [dir="rtl"] .mobile-menu, [dir="rtl"] .about-sidebar { font-family: "Droid Arabic Kufi", "Manrope", sans-serif; } html[lang="ar"] .main-header, [dir="rtl"] .main-header { font-size: 12.6px; line-height: 1.75em; } /* 2) Contain the RTL off-canvas overflow at the source-behaviour level. Baseline pushes the closed panels off-screen with transform (no page growth); the app layer let them expand the document ~24px between 992-1200px. Clip the horizontal overflow on the ARABIC ROOT ONLY. `clip` (not `hidden`) keeps vertical scrolling and sticky behaviour intact; the panels still open fully inside the viewport, and the closed state produces zero horizontal scroll. */ /* NOTE: Newer Arabic hero/slider content overrides removed per HARD_RESTORE_ORIGINAL_ARABIC_DESIGN.md — the original slider layout is governed entirely by the restored baseline CSS (style1.css + rtl.css). */ /* ---- Final contrast pass ---- */ /* Designations are dimmed with opacity:0.60 in the legacy CSS -> restore full opacity + AA color */ .team-block_three-designation, .team-block_three-content .team-block_three-designation, [class*="-designation"] { color: #45506b !important; opacity: 1 !important; } /* Service-detail feature lists sit on a brand-blue panel -> light text */ /* service-detail feature lists sit on WHITE -> readable dark text (list markers are colored via the legacy ::before). Do not white-out the li text. */ .service-detail_list li, .service-detail_list-two li { color: var(--ft-ink) !important; } /* Sidebar category badges (count span) sit on the brand color -> white */ .category-list li span, .category-list li a span, .category-list li .count { color: #fff !important; } /* NOTE: Newer Arabic header/offer-one layout overrides (component-scoped row-reverse compensation + offer-one token bidi isolation) removed per HARD_RESTORE_ORIGINAL_ARABIC_DESIGN.md. The original Arabic header, menu and offer-one layout are now governed entirely by the restored baseline CSS (rtl.css global `.rtl .row/.d-flex` reversal + style1.css). No newer overrides are layered on top. Any Latin-token isolation, if still wanted, is deferred until after the full baseline design is confirmed (see that prompt, §7). */ /* ============================================================================ SECTION RHYTHM ---------------------------------------------------------------------------- Every public section owned its own spacing, so the whitespace at a boundary was whatever the two neighbours happened to add up to. Measured at 1440px before this block: / 0, 41, 40, 110, 120, 240, 160, 120, 210 /Home/Blog 135, 230 /Home/Projects 155, 120 /Home/Gallery 155, 120 /Home/Team 145, 320 /Home/Contact 145, 150, 230 /Home/BlogDetail 265, 210, 120 /Home/ProjectDetail 135, 30, 210, 250 /Home/ServiceDetail 135, 168 /Home/GalleryDetail 135, 120 /Home/TeamDetail 145, 220 0px at one boundary and 320px at another is the whole complaint. The fix is that no section decides its own gap any more: each carries the same --fwt-section-space (tokens.css) as padding-block, so every boundary is two halves of the same value and stays in step at every width. Scoped under .page-wrapper, which only the public site uses - the CMS is not reachable from here. That also puts these at (0,2,0), enough to outrank the per-section rules in style.css/style1.css including the two-class ones (.gallery-one.style-two, .sidebar-page-container.alternate), which this file already loads after. ============================================================================ */ .page-wrapper .ft-counter, .page-wrapper .about-three, .page-wrapper .process-one, .page-wrapper .clients-one, .page-wrapper .clients-two, .page-wrapper .news-one, .page-wrapper .news-four, .page-wrapper .gallery-one, .page-wrapper .team-three, .page-wrapper .team-detail, .page-wrapper .contact-two, .page-wrapper .map-one, .page-wrapper .faq-two, .page-wrapper .deliver-one, .page-wrapper .referenced-page, .page-wrapper .sidebar-page-container, .page-wrapper .cta-one { padding-block: var(--fwt-section-space); } /* The rhythm is padding-only, so section margins that used to top it up are cleared: team-three carried 120px top and bottom (the Team page's 320px boundary), and the two product-detail sections carry 60px each. .about-three is the one that needs !important - the home page authors it as `about-three mt-3` and Bootstrap utilities are !important, so a 16px stub survived on that boundary otherwise. The class is also used by CMS-authored markup on InnerPage; clearing it there is intentional too, so that block's spacing comes from the wrapper below rather than from whichever utility an editor happened to paste. */ .page-wrapper .team-three, .page-wrapper .faq-section, .page-wrapper .kyc-section, .page-wrapper .clients-one { margin-block: 0; } .page-wrapper .about-three { margin-block: 0 !important; } /* ---- Documented exceptions ------------------------------------------------ Four sections are deliberately left out, each for a structural reason. */ /* 1. .slider-one is the hero. Its 350px/170px is stage height, not rhythm, and responsive.css already steps it down per width. 2. .page-title is the inner-page banner. Its top padding clears the fixed header and sets the banner's height; changing it would resize the artwork. Its 25px bottom is kept, so a banner is followed by 25 + one half-gap rather than a full gap - hero-adjacent spacing is deliberately tighter than section-to-section, and it is now the same on every inner page. 3. .offer-one hosts .step-award_box, which is absolutely positioned and hangs off the bottom of the image inside a section that is overflow:hidden. The bottom padding is what stops it being clipped, so above 992px it keeps the badge's overhang on top of the half-gap. Below 992px the badge is in normal flow (style1.css) and the plain rhythm applies. */ .page-wrapper .offer-one { padding-block: var(--fwt-section-space); } /* The overhang is not a constant: style1.css anchors the badge with `bottom:-60px` between 992 and 1300 but with `top:90%` above that, where it follows a column whose height depends on how much text sits beside it. So it varies by width AND by language - Arabic runs shorter, which puts the badge lower. Measured clearances, Arabic being the worst case throughout: allowance = space + 60 992px -8 (clipped), 1175px -8, 1280px 0, 1440px 35 One allowance covers the whole range rather than a per-band pair: the two positioning rules do not split into two tidy bands, they overlap in how much they need. 100px is the worst case plus a margin. This is the one boundary on the site that does not settle at a full gap: offer-one -> testimonial-two runs ~1.7x the normal rhythm above 992px. It is the cost of an absolutely positioned badge inside an overflow:hidden section. Re-anchoring the badge would make it uniform, but that changes an approved desktop design rather than its spacing, so it is left alone and called out here instead. */ @media (min-width: 992px) { .page-wrapper .offer-one { padding-block-end: calc(var(--fwt-section-space) + 100px); } } /* 4. The footer's 130px top padding never changed with viewport, so it read as a large dead band on a phone. It becomes a full gap - the same distance any two sections keep - which is ~120px on desktop and 56px on a small screen. */ .page-wrapper .main-footer { padding-block-start: calc(var(--fwt-section-space) * 2); } /* ---- InnerPage -------------------------------------------------------------- InnerPage.js wraps each CMS component in its own div. That wrapper used to be Bootstrap's .mb-5 - a flat 48px at every width, which is the one page that did not follow any of the section padding above. The wrapper now adds nothing and the components space themselves like every other page. The exception is raw CMS content - the PageContent component returns sanitised HTML with no section of its own - so the wrapper supplies the half-gap in that case only. The markup an editor pastes there can carry its own Bootstrap spacing utilities (.m-5/.p-5 are !important); that is content, not layout, and is left alone. The test is for a spaced block, not for a
tag: every one of these is emitted as a div (ServiceDetail.js:45, GalleryDetail.js:89, ProjectDetail.js:374, BlogDetail.js:195), so a tag test would have handed them a second gap on top of their own padding. It uses margin, not padding, so that where the pasted markup carries its own block margin the two collapse into a single gap instead of stacking. */ .page-wrapper .inner-page_section:not(:has(> section)):not(:has(> .sidebar-page-container)):not(:has(> .about-three)):not(:has(> .offer-one)):not(:has(> .process-one)):not(:has(> .faq-two)):not(:has(> .news-four)):not(:has(> .deliver-one)):not(:has(> .gallery-one)) { margin-block: var(--fwt-section-space); } /* ============================================================================ REFERENCED PAGE COMPONENT ---------------------------------------------------------------------------- A page attached to another page as a component (InnerPage.js, renderReferencedPageComponent). It carries the same section padding as every other component through the rhythm list above; this only sets the body copy, so a referenced page reads like the rest of the page it was dropped into rather than inheriting nothing. ============================================================================ */ .referenced-page_lead { margin: 0 0 var(--sp-4, 1rem); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.75; font-weight: 500; color: var(--ft-ink, #1f2a44); } .referenced-page_body { font-size: var(--fs-body, 1rem); line-height: 1.85; color: var(--ft-ink, #1f2a44); overflow-wrap: anywhere; } .referenced-page_body > *:first-child { margin-top: 0; } .referenced-page_body > *:last-child { margin-bottom: 0; } /* .referenced-page_body p { margin: 0 0 var(--sp-4, 1rem); }*/ .referenced-page_body ul, .referenced-page_body ol { margin: 0 0 var(--sp-4, 1rem); /* Logical, so bullets sit on the correct side in Arabic with no RTL rule. */ padding-inline-start: 1.4em; } .referenced-page_body img { max-width: 100%; height: auto; } /* Wide content scrolls inside its own box; the page never does. */ .referenced-page_body table, .referenced-page_body pre { display: block; max-width: 100%; overflow-x: auto; } .rtl .referenced-page_body, [dir="rtl"] .referenced-page_body { line-height: 2; } /* ============================================================================ MOBILE HEADER CONTROLS — about-widget / search-box-btn ---------------------------------------------------------------------------- Two pre-existing rules silently dropped these actions below 768px: - style1.css "Hide hamburger on mobile only" sets .hamburger (the icon inside .about-widget, which opens .about-sidebar) to display:none, which collapses .about-widget itself to a 0x0 box since it has no other content. - responsive.css hides .main-header .search-box-btn entirely at <=599px. Both were presumably hidden to avoid a second hamburger-look icon crowding a header that had no room for it. Restoring them compactly alongside the real menu toggler (.mobile-nav-toggler) - shrinking the logo to make room, per the requirement - keeps every header action reachable on mobile instead of removing it. .outer-box's own flex order (already correct, untouched) mirrors automatically for RTL - no [dir] overrides needed here. Desktop (>767px) is completely unaffected: nothing in this block has a bare, unscoped selector. */ @media (max-width: 767px) { .header-lower .logo-box .logo img { max-width: 185px; } .header-lower .logo-box { margin-inline-end: 6px; } /* Un-hide just this one instance rather than touching style1.css's rule - .hamburger is used nowhere else in the shared layout (confirmed by search), so no other usage is affected. */ .outer-box .about-widget .hamburger { display: flex !important; } .main-header .search-box-btn { display: block !important; } /* .outer-box still carries Bootstrap's .flex-wrap utility class from the markup; with 3 real controls visible it now wraps internally instead of sitting in one row, pushing content above the header. Forcing one line is safe - the icons above plus the shrunk logo fit with room to spare down to 320px (the second, narrower tier below). */ .outer-box { gap: 6px; flex-wrap: nowrap !important; } } /* Narrow phones (iPhone SE-class and smaller): the 185px logo plus full-size controls no longer fit next to a 44px menu toggler, which was forcing .auto-container itself to grow past the viewport (a second overflow source, distinct from the one in style1.css .sec-title .left-box/.right-box). Shrinking the logo further and the two restored controls (the toggler is left alone - it is the primary action and already a reasonable touch target) keeps everything on one row without reintroducing that overflow. */ @media (max-width: 400px) { .header-lower .logo-box .logo img { max-width: 110px; } .main-header .search-box-btn { width: 32px !important; height: 36px !important; } .outer-box .about-widget .hamburger { width: 24px !important; height: 30px !important; padding: 9px 3px !important; } .outer-box { gap: 4px; } }