/* ========================================================================== SUDAIR PHARMA — HOME PAGE: RESPONSIVE CORRECTIONS Scoped to .elementor-86, the Home page wrapper, so nothing here can reach another page. Corrective only — no design decisions, no new styling. Everything that could be fixed in Elementor was fixed there: the desktop-only horizontal margins and the compounding container padding are now responsive settings on the elements themselves, editable in the panel. What is left here is the one thing a panel control cannot express. ========================================================================== */ /* -------------------------------------------------------------------------- FLEX ITEMS THAT REFUSE TO SHRINK .sud-eyebrow is a flex container and its heading is a flex item. A flex item defaults to min-width:auto, which floors it at its MIN-CONTENT width — so a long heading will not wrap, it overflows instead. Measured on "Global Pharmaceutical Partners" at 320px: the heading rendered 305px wide inside a 272px column and pushed 45px past the right edge of the screen. With the floor lifted it wraps to 236px and sits inside the column. min-width:0 only permits the shrinking that flex-shrink already asks for, so headings that already fit are unaffected. -------------------------------------------------------------------------- */ .elementor-86 .sud-eyebrow .elementor-heading-title { min-width: 0; } /* * Same reasoning one level out: the eyebrow itself sits in a flex column and * must be allowed to narrow to its container rather than to its content. */ .elementor-86 .sud-eyebrow { min-width: 0; max-inline-size: 100%; } /* -------------------------------------------------------------------------- A WORD TOO WIDE TO BREAK Lifting the min-width floor let the heading BOX shrink, but the text still painted 45px past the right edge of a 320px screen. The cause is a single token that cannot fit on any line: .sud-eyebrow tracks at .16em, and at that spacing "Pharmaceutical" alone is wider than the 236px column, so there is no legal break point and the line simply overflows. Four candidates were measured against "Global Pharmaceutical Partners" at 320px — flex-wrap:wrap, display:block and flex:1 1 0 all left it 45px over. Only allowing a break inside the word brings it back, to 31px inside. This engages only when a word genuinely cannot fit, so headings that already fit are untouched — which is why it is safe to apply at every width rather than hidden behind a media query. -------------------------------------------------------------------------- */ .elementor-86 .sud-eyebrow .elementor-heading-title { overflow-wrap: anywhere; } /* ========================================================================== "GLOBAL PHARMACEUTICAL PARTNERS" — the 147px desktop overflow THE CAUSE Three left margins stacked on top of each other — 452 + 74 + 58 = 584px — used to drag a centred label into the middle of the screen. The boxes they sit on are already full width, so the margin is added to a box that fills the row and 147px falls off the right at 1440. WHY THIS IS IN CSS AND NOT THE PAGE DATA It was fixed in the page data once, on 2026-08-31, and came back: the Home page was re-saved in Elementor at 12:15 that day, which rewrote `_elementor_data` and restored all three margins. The same thing happened to the Manufacture and Research & Development fixes. A stylesheet is not touched by an editor save, so this cannot be lost the next time someone opens the page. Every one of the three already has a tablet AND a mobile variant set to left: 0, so zeroing the desktop value is what the author had already decided at every other breakpoint. Scoped to 1025px and up for that reason — below that the stored values are correct on their own. Written at four classes because Elementor emits these margins at three, from a stylesheet that loads after this one. ONE THING TO KNOW: with the margins gone the label centres as a unit, and a `.sud-eyebrow` carries a 28px dash before its text. So the TEXT sits about 17px right of true centre rather than dead on it. That is the correct centring of dash-plus-label; the old margins centred the text by eye and overflowed the page to do it. ========================================================================== */ @media (min-width: 1025px) { .elementor-86 .elementor-element.elementor-element-2c3cec4.e-con, .elementor-86 .elementor-element.elementor-element-d1e628e.e-con { margin-left: 0; } .elementor-86 .elementor-element.elementor-element-d1e628e.e-con { align-items: center; } .elementor-86 .elementor-element.elementor-element-cc9b66e.elementor-widget { margin-left: 0; } } /* ========================================================================== "OUR PURPOSE" — Our Vision and Our Mission (d54cee3, 2f4452b) WHAT WAS WRONG Not the boxes. Measured at 1440, 1024 and 768, the two cards already shared a top edge, a bottom edge and a height to the pixel: they are flex items of b7a4033, which stretches them, and Our Mission — the taller copy — sets the height for both. That part of the layout was correct and is left alone. What did not line up was everything INSIDE them. Each card is a centred flex column, so each centred its own stack of icon, heading and paragraph. Our Mission runs to five lines and filled its card; Our Vision runs to two and floated in the middle of its own. The result was that the two eye/target icons, and the two headings under them, sat at different heights: 1440 67.4px apart 1024 37.7px apart 768 67.4px apart 390 45.9px apart (stacked, but still mismatched) THE FIX One declaration: the paragraph takes the leftover room. `flex-grow: 1` hands the free space in the column to the text widget, so in both cards the icon and heading come to rest directly under the 10px top padding and land on the same two lines. The paragraph is then a centred flex column itself, so the copy still sits in the middle of the space it was given rather than clinging to the heading above it. Our Mission is unchanged by this — its column has no free space to hand out, which is the point: the card that already filled its box keeps the position it had, and the short card comes up to meet it. `flex-shrink: 0`, not the shorthand's 1. Growing is the whole job here; shrinking a text box never shortens the text inside it, it only pushes the copy out through the bottom of the card. Nothing may make this card shorter than its own paragraph — not a narrow phone, and not Arabic, which runs longer than the English in both of these cards. No media query. The mechanism is free space, and free space is exactly what differs between breakpoints: where there is none, as in Our Mission at every width, the rule does nothing at all. Mobile keeps its existing stacking. The dot and the hairline between the cards are b7a4033's own ::before and ::after, placed at `top: 50%` and inset 35px from its ends. Both are measured off the wrapper, and the wrapper's height does not change here, so both stay exactly where they were. ========================================================================== */ .elementor-86 .elementor-element.elementor-element-d54cee3 > .elementor-widget-text-editor, .elementor-86 .elementor-element.elementor-element-2f4452b > .elementor-widget-text-editor { flex-grow: 1; flex-shrink: 0; flex-basis: auto; display: flex; flex-direction: column; justify-content: center; }