/* Blue Airweld brand additions — loaded after style.css in includes/head.php */

.service-content-body {
    margin-bottom: 30px;
}

/* Honeypot field for the contact/quote forms — invisible to humans, visible to bots that fill every input. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* Inline success/error feedback for the contact and quote forms (js/form-ajax.js),
   replacing the previous behavior of navigating away to a raw JSON response. */
.messages:empty {
    display: none;
}
.messages.form-success {
    display: block;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: #e6f4ea;
    color: #1e7e34;
    border: 1px solid #b7dfc1;
}
.messages.form-error {
    display: block;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c6c2;
}

/* Static homepage hero, replacing the Revolution Slider carousel (removed — the
   bundled third-party plugin's JS never successfully renders text or rotates
   slides; see the two rules above this one for the background-image workaround
   that was in place before this page moved to a static hero entirely). */
.static-hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}
.static-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(9, 31, 68, 0.55);
}
.static-hero .container {
    position: relative;
    z-index: 1;
}
.static-hero-content {
    max-width: 600px;
    color: #fff;
}
.static-hero-eyebrow {
    display: block;
    color: #f5a623;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
}
.static-hero-headline {
    color: #fff;
    font-size: 46px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.15;
}
.static-hero-support {
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
}
@media (max-width: 767px) {
    .static-hero-headline {
        font-size: 30px;
    }
    .static-hero {
        min-height: 380px;
    }
}

/* When no Google Maps API key is configured (see includes/scripts.php), the map div
   would otherwise render as a blank 500px block. This gives it a graceful placeholder
   instead — remove this rule once a real API key is added and the map actually renders. */
.google-map:empty {
    background-color: #f4f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.google-map:empty::after {
    content: 'Map available once a Google Maps API key is configured.';
    color: #4a5467;
    font-size: 14px;
    text-align: center;
    padding: 0 20px;
}

/* ==========================================================================
   Layout corrections for real content
   ==========================================================================
   The vendor theme's demo pages all use short, uniform placeholder copy. Real
   service, industry and project names are not uniform, and that exposes two
   latent layout faults in the theme. Both are fixed here rather than in
   style.css so the vendor stylesheet stays untouched and upgradable.
   ========================================================================== */

/* 1. Bootstrap 3 float-grid snagging.
   The card grids are float-based columns. A float only clears past the tallest
   preceding sibling, so the moment one card's title wraps to a second line the
   following cards catch on it and the grid develops holes — cards sitting in
   the wrong column, whole gaps mid-grid. Laying these specific rows out with
   flex wrapping makes every visual row start clean regardless of card height.

   .filterlist is deliberately excluded: that grid (projects.php) is driven by
   Isotope, which absolutely positions its children and would fight flex. */
.service-1 .services-list.row,
.pageproject-1 .portfolio-list.row:not(.filterlist),
.whychooseus-5 > .container > .row,
.welcomesec-3 > .container > .row {
    display: flex;
    flex-wrap: wrap;
}

/* Bootstrap's .row clearfix pseudo-elements become stray flex items once the
   row is a flex container, adding a phantom column. */
.service-1 .services-list.row::before,
.service-1 .services-list.row::after,
.pageproject-1 .portfolio-list.row:not(.filterlist)::before,
.pageproject-1 .portfolio-list.row:not(.filterlist)::after,
.whychooseus-5 > .container > .row::before,
.whychooseus-5 > .container > .row::after,
.welcomesec-3 > .container > .row::before,
.welcomesec-3 > .container > .row::after {
    content: none;
}

/* Give every card in a row a common height so the images line up across the
   row instead of each card sitting at its own natural height. */
.service-1 .services-list.row > [class*="col-"] {
    display: flex;
}
.service-1 .services-list.row > [class*="col-"] > .service-inner {
    width: 100%;
}

/* 2. The certified strip under the hero.
   .whychooseus_1 carries margin-top:-100px so it overlaps the Revolution
   Slider, which had matching dead space beneath its caption. Our static hero
   has no such dead space, so the pull left the gold band floating inside the
   hero photo with a slice of image still showing below it. Sit it flush under
   the hero instead. The vendor got the strip's vertical padding from
   .box-light, which we don't use here because its white text is close to
   unreadable on the gold background — so supply the padding directly. */
.whychooseus_1 {
    margin-top: 0 !important;
    padding: 26px 0 22px;
}
.whychooseus_1 .mf-icon-box {
    margin-bottom: 0;
}
/* Those three sit side by side from col-sm up, where a bottom margin would only
   pad the strip out. Below that they stack, and with the margin gone they ran
   straight into each other — each item's description touching the next item's
   heading. Space the stacked case off the columns instead, so nothing trails
   below the last one. */
@media (max-width: 767px) {
    .whychooseus_1 [class*="col-"] + [class*="col-"] {
        margin-top: 24px;
    }
}

/* 3. Trailing space under the Why Choose Us grid.
   .whychooseus-5 pads 80px top and bottom, but its icon boxes also carry
   margin-bottom:40px, so the bottom gap read as 120px against 80px at the top.
   Absorb the box margin into the section's own bottom padding. */
.whychooseus-5 {
    padding-bottom: 40px;
}

/* 4. Thumbnail proportions.
   The theme sizes project images with `width:100%` and no height, and service
   images with nothing at all (so the HTML width/height attributes win). Both
   assume every image shares one aspect ratio. They don't — the theme's own
   placeholder set mixes 370x200, 585x415 and 1170x500, which is why the wide
   1170x500 project image rendered 77px shorter than its row-mates and knocked
   that row out of alignment, and why the 585x415 service images were being
   squashed into a 370x200 box. Pin the frame and crop to fill instead.
   This matters beyond the current placeholders: the client supplies the real
   project photography, so we cannot rely on its proportions. */
.pageproject-1 .project-inner .project-thumbnail,
.service-1 .service-inner .service-thumbnail {
    display: block;
}
.pageproject-1 .project-inner .project-thumbnail {
    aspect-ratio: 585 / 415;
}
.service-1 .service-inner .service-thumbnail {
    aspect-ratio: 370 / 200;
}
.pageproject-1 .project-inner .project-thumbnail img,
.service-1 .service-inner .service-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 5. Industries grid cells.
   Each cell is an icon beside a label. The theme absolutely positions the icon
   at top:0 and pads the label 80px clear of it — fine when every glyph is the
   same size and every label is one line. Neither holds here: these flaticon
   glyphs render anywhere from 54px to 65px tall at the same font-size, so they
   hung below their labels by differing amounts, and "Water & Infrastructure"
   wraps to two lines, which made its whole row taller than the others. The
   result read as a ragged grid rather than a grid.

   Fix the cell height, and put the icon and the label on a shared centre line
   so every cell resolves to the same shape regardless of glyph or label
   length. The icon stays absolutely positioned — the theme's hover animation
   slides it via `left`/`right`, and this must not disturb that. */
.industry-inner .service-summary {
    display: flex;
    align-items: center;
    min-height: 92px;
    /* The theme reserves 23px under the title for a description. Industry cells
       are a label and nothing else, and that reserved strip pushed the centred
       label ~12px above the icon's centre line, so the two never lined up. */
    padding-bottom: 0;
}
.industry-inner .service-summary .service-title {
    margin-bottom: 0;
}
.industry-inner .service-summary .service-icon {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 54px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.industry-inner .service-summary .service-content {
    width: 100%;
}
.industry-inner .service-title {
    margin: 0;
}

/* These cells are plain labels, not links — the theme's card hover (icon
   swaps out, label slides sideways) is motion with nothing behind it here,
   and it made an otherwise settled grid twitch under the cursor. */
.industry-inner:hover .service-summary .service-icon-1 {
    left: 0;
    opacity: 1;
}
.industry-inner:hover .service-summary .service-icon-2 {
    opacity: 0;
}
.industry-inner:hover .service-summary .service-content {
    padding-left: 80px;
    padding-right: 0;
}

/* 6. Service card icons.
   The same glyph-height variance as the industries grid, in milder form: most
   of these flaticons ink out at 54px but a few at 65px, and since the theme
   anchors the icon at top:0 the whole difference appeared as an overhang below
   the icon — one card's icon sitting 11px lower than the eight beside it. Pin
   the icon box and centre the glyph in it so every card's icon occupies the
   same band. */
.service-1 .service-inner .service-summary .service-icon {
    height: 54px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

/* 7. Contact page — Headquarters detail rows.
   The icons are floated with a flat margin-top:5px, which only lines up if
   every icon has the same metrics. These come from two different icon fonts:
   the address and mail glyphs are flaticons (38px tall at the set size) while
   the phone and globe are Font Awesome (24px). Measured against a text first
   line whose centre sits at 13px, the flaticons centred at 24px and the Font
   Awesome ones at 17px — so no icon lined up with its own label, and the two
   families disagreed with each other by 7px on top of that.

   No single margin can reconcile two font families. Give each icon a box the
   height of one text line and centre the glyph inside it, so alignment comes
   from the layout rather than from per-font nudging. */
.mf-contact-box .contact-info {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
}
.mf-contact-box .contact-info i {
    float: none;
    margin-top: 0;
    flex: 0 0 45px;
    height: 25.6px; /* one line of the adjacent text */
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.mf-contact-box .contact-info div {
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
}

/* The theme's 10px/15px gave a 26px gap between one row's text and the next,
   which reads as squashed for four short rows in a tall panel. Opened up to
   ~42px, split either side of the divider so the rule sits centred in the gap
   rather than hugging the row above it. */
.mf-contact-box .contact-info {
    padding-bottom: 20px;
    margin-bottom: 22px;
}

/* 8. Contact page — Certifications list.
   .mf-working-hour styles an opening-hours table: rows packed flush together
   and zebra-striped white/transparent to separate them. Used for a short
   certifications list it just reads as cramped. Give the rows real vertical
   separation, and once they are separated the zebra has nothing left to do —
   alternating rows would simply look like two of the four had lost their
   background. Uniform white cards on the panel instead.

   Specificity note: this must match .mf-working-hour ul li:nth-child(odd)
   (0,2,2) to override it, hence ul.mf-list-hour rather than just .mf-list-hour;
   brand.css loads after style.css so an equal-specificity rule wins. */
.mf-working-hour ul.mf-list-hour li,
.mf-working-hour ul.mf-list-hour li:nth-child(odd) {
    background-color: #fff;
    padding: 14px 20px;
    margin-bottom: 10px;
}
.mf-working-hour ul.mf-list-hour li:last-child {
    margin-bottom: 0;
}

/* The theme forces the phone row's label onto its own line, presumably to give
   a long number room. Ours fits inline comfortably — the address row above it
   is considerably longer — and leaving it stacked made that one row read as
   misaligned against the other three. */
.mf-contact-box .contact-info.phone span {
    display: inline;
}

/* 9. About page — Certifications & Compliance row.
   Three float columns like every other card grid on the site, and subject to
   the same snagging if a certification name or description grows. Flex them
   for the same reason, and give the boxes a bottom margin: unlike
   .whychooseus-5 (which supplies 40px), .ourhistory gives its icon boxes no
   margin at all, so once they stack below col-md they ran flush into each
   other. */
.ourhistory > .container > .row {
    display: flex;
    flex-wrap: wrap;
}
.ourhistory > .container > .row::before,
.ourhistory > .container > .row::after {
    content: none;
}
@media (max-width: 991px) {
    .ourhistory [class*="col-"] + [class*="col-"] {
        margin-top: 30px;
    }
}

/* 10. About page — intro columns when they stack.
   Below col-md the image, the summary and the accordion sit on top of each
   other, and nothing supplies spacing between them: the 30px above the summary
   is just the h3's own top margin and the 10px above the accordion is just the
   paragraph's bottom margin. So the gaps were both incidental and unequal.
   Give the stacked case a deliberate 30px and neutralise the two content
   margins that were standing in for it. Scoped to the stacked breakpoint so
   the desktop three-column layout is untouched. */
@media (max-width: 991px) {
    .abouttop .row > [class*="col-"] + [class*="col-"] {
        margin-top: 30px;
    }
    .abouttop .row > [class*="col-"] > h3:first-child {
        margin-top: 0;
    }
    .abouttop .row > [class*="col-"] > p:last-child {
        margin-bottom: 0;
    }
}

/* 11. Logo sizing.
   The supplied Blue Airweld artwork is a stacked lockup (emblem over wordmark
   over strapline over capability line) at 1536x1024. The theme's header band
   is built for a wide, short mark — dropped in unconstrained it rendered
   330x220 and pushed the header from 64px to 220px on every page. Squeezing
   the stacked lockup into 64px instead would have made it ~96px wide with an
   illegible wordmark.

   images/logo.png is therefore a horizontal lockup derived from the original
   (emblem beside the BLUE AIRWELD wordmark); the untouched original is kept at
   images/logo-full.png. "Engineering and Procurement" is dropped from the mark
   itself because at header scale it renders under 8px — the topbar and the
   .site-description in the markup already carry it.

   Capped by height so the header band keeps its proportions, with max-width so
   it scales down rather than overflowing on narrow screens. */
.site-logo img.logo {
    height: auto;
    width: auto;
    max-height: 52px;
    max-width: 100%;
}

/* The footer sits on #020202, so it uses a reversed build of the same lockup:
   neutral ink turned white, blues and orange lifted to read against near-black. */
.footer-1 .textwidget img {
    max-width: 250px;
    height: auto;
}

/* 12. Project detail page.
   The theme's single-project template is built around an Owl carousel of
   images and a meta panel of stock fields (date, link, star rating). Each
   project here has one image and a real set of engineering facts instead, so
   the carousel is dropped and these two additions carry the parts the theme
   has no equivalent for: the Services Delivered list, and a thumbnail frame
   that holds its shape whatever proportions the client's photography arrives
   in (same reasoning as the grid thumbnails above). */
.single-portfolio .entry-thumbnail {
    aspect-ratio: 1170 / 500;
    overflow: hidden;
}
.single-portfolio .entry-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-services-title {
    font-size: 22px;
    margin-top: 34px;
    margin-bottom: 18px;
}
.project-services {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.project-services li {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 20px 12px 0;
    color: #4a5467;
}
.project-services li i {
    color: #f5a623;
    margin-right: 10px;
}
@media (max-width: 767px) {
    .project-services li {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* The sidebar's quote button sits under the meta list and needs separating
   from it; .portfolio-metas .meta supplies padding only between meta rows. */
.portfolio-metas .mf-button {
    margin-top: 26px;
}

/* 13. Project card titles.
   Client names are not a uniform length — "Tiger Brands" is one line, "South
   African Breweries (SAB)" and "Eskom — Koeberg Nuclear Power Station" are
   two — so the category line beneath sat 18px lower on the wrapping cards than
   on their row-mates. Reserve two lines for the title so the category always
   lands on the same baseline across a row. */
.pageproject-1 .project-title {
    min-height: 36px; /* two lines at the theme's 18px line-height */
}

/* 14. Service detail hero.
   Same reasoning as the project and card thumbnails: pin the frame so a
   replacement image of different proportions cannot change the page's height
   or crop oddly. 1170:517 is the size the theme's own service banner used. */
.service-dtail .dtlbgimg {
    display: block;
    aspect-ratio: 1170 / 517;
    overflow: hidden;
}
.service-dtail .dtlbgimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 15. "Where We've Delivered This" on service pages.
   Derived from data/projects.php via includes/relations.php: the completed
   projects whose recorded scope evidences this service, and the scope terms
   that matched. Two columns from col-sm up — some services match all ten
   projects, and a single column would push the rest of the page a long way
   down. */
.service-projects-intro {
    margin-top: -18px;
    margin-bottom: 22px;
    color: #4a5467;
}
.service-projects {
    list-style: none;
    padding-left: 0;
    margin: 0 0 44px;
    display: flex;
    flex-wrap: wrap;
}
.service-projects li {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 24px 20px 0;
}
.service-projects-name {
    display: block;
    color: #002060;
    font-weight: 600;
    line-height: 1.35;
}
.service-projects-name:hover,
.service-projects-name:focus {
    color: #f5a623;
}
.service-projects-industry,
.service-projects-scope {
    display: block;
    font-size: 13px;
    line-height: 1.5;
}
.service-projects-industry {
    color: #f5a623;
    margin-top: 3px;
}
.service-projects-scope {
    color: #7a8194;
}
@media (max-width: 767px) {
    .service-projects li {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* 16. "Where We've Worked" on the industries page.
   Grouped by industry, from data/projects.php via projects_for_industry().
   Laid out with CSS columns rather than a Bootstrap row: the groups hold
   between one and four projects each, and a flex row stretched to its tallest
   member left a lot of empty space under the single-project industries.
   Columns pack them instead, and break-inside keeps a group whole. */
.industry-projects-intro {
    margin-top: -14px;
    margin-bottom: 30px;
    color: #4a5467;
}
.industry-projects {
    column-count: 3;
    column-gap: 40px;
}
.industry-projects-group {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    /* Safari needs the block to be inline-block-ish to honour break-inside. */
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}
@media (max-width: 991px) {
    .industry-projects { column-count: 2; }
}
@media (max-width: 767px) {
    .industry-projects { column-count: 1; }
}
.industry-projects-name {
    font-size: 18px;
    color: #002060;
    margin: 0 0 10px;
}
.industry-projects-group ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.industry-projects-group li {
    padding-bottom: 7px;
    line-height: 1.45;
}
.industry-projects-group li a {
    color: #4a5467;
}
.industry-projects-group li a:hover,
.industry-projects-group li a:focus {
    color: #f5a623;
}

/* 17. Project card category.
   This was an <a href="#"> — a link that navigated nowhere and jumped the page
   to the top when clicked. It is a label describing the card (the filter row
   above it is the navigation), so it is now a span. These rules reproduce what
   the anchor inherited, so the cards look unchanged. */
.cat-portfolio {
    display: inline;
    color: #4a5467;
    font-weight: 300;
}

/* 18. 404 page body.
   Was the last inline layout style left in the templates. */
.notfound-body {
    padding: 60px 0;
    text-align: center;
}
.notfound-body p {
    margin-bottom: 22px;
}
.notfound-body .mf-btn + .mf-btn {
    margin-left: 8px;
}

/* 19. Welcome section — the three points beside the "Who We Are" paragraph.
   Three separate things made these read as scattered rather than as a list:

   - the gap between them was 60px while each item is only 59px tall, so the
     whitespace competed with the content;
   - .icon_position-left floats the 70px icon and pads the text 100px clear of
     it, which centres the icon against the whole title+description block —
     measured, its centre sat 28px below its own heading, so each icon looked
     detached and low;
   - the group was top-aligned against a much taller paragraph, leaving 125px
     of dead space under it.

   Lay each item out as a flex row so the icon and its text share a centre line,
   tighten the rhythm, and centre the group against the paragraph so the two
   columns balance. */
.welcomesec-3 > .container > .row {
    -webkit-box-align: center;
    align-items: center;
}
.welrightm .mf-icon-box {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 34px;
}
.welrightm .mf-icon-box:last-child {
    margin-bottom: 0;
}
.welrightm .mf-icon-box .mf-icon {
    float: none;
    flex: 0 0 70px;
    margin-top: 0;
    margin-bottom: 0;
}
.welrightm .mf-icon-box .box-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}
/* The 100px allowance existed to clear the floated icon; the flex row now
   handles that, so this is just the gap between icon and text. */
.welrightm .mf-icon-box .box-title,
.welrightm .mf-icon-box .desc {
    padding-left: 22px;
}

/* The icon badge is #f4f5f9 (.mf-icon-box.icon_style-has-background-color) and
   so is this section (.welcomesec-3) — exactly the same colour, so the circle
   behind each glyph was invisible and the icons read as floating marks rather
   than badges. White gives them an edge against the grey. The theme's hover
   still takes them to gold. */
.welrightm .mf-icon-box .mf-icon {
    background-color: #fff;
}

/* 20. Icon glyphs sat 8px high inside their circular badges.
   .mf-icon-box.icon_style-has-background-color makes a 70x70 circle and centres
   the glyph with text-align plus line-height:70px. Horizontal centring works,
   but line-height only positions an inline box on its baseline — the baseline
   of a 70px line box sits below the middle, so the 32px glyph hung 8px above
   the circle's centre. Measured at -8px on every badge on the site: the welcome
   points, Why Choose Us, the about page's quality and certification grids, and
   the service pages' commitment boxes.

   Centre the glyph geometrically instead, which is independent of the icon
   font's metrics and of line-height. */
.mf-icon-box.icon_style-has-background-color .mf-icon {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    line-height: 1;
}

/* 21. Mobile nav accessibility.
   The panel is slid off-screen with right:-340px but stays visibility:visible,
   so its 17 links remained in the tab order and in the accessibility tree while
   the menu was closed — a keyboard user tabbing the page fell into an invisible
   menu. visibility:hidden removes it from both. The delay keeps it visible for
   the 0.4s slide-out, then hides it; opening is immediate. */
.primary-mobile-nav {
    visibility: hidden;
    -webkit-transition: right 0.4s, visibility 0s linear 0.4s;
    transition: right 0.4s, visibility 0s linear 0.4s;
}
.primary-mobile-nav.open {
    visibility: visible;
    -webkit-transition: right 0.4s, visibility 0s;
    transition: right 0.4s, visibility 0s;
}

/* The toggle is now a <button> so it can be focused and activated by keyboard;
   strip the browser's default button chrome so it looks exactly as before. */
button.navbar-icon {
    background: none;
    border: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}
button.navbar-icon:focus-visible {
    outline: 2px solid #f5a623;
    outline-offset: 4px;
}

/* 22. Hero fills the first screen, so the gold strip lands at the fold.
   The hero was a flat 500px, which on a desktop window left the strip finishing
   around 810px of a ~985px viewport — "Welcome to Blue Airweld" was already
   showing underneath. Sizing the hero off the viewport instead puts the bottom
   of the strip at the fold, so the first screen is hero + strip and nothing
   else.

   The subtraction is what sits outside the hero, measured rather than guessed,
   and it changes by breakpoint because the topbar is hidden below lg and the
   strip's three items rewrap:

       >= 1200px   topbar 51 + masthead 127 = 178 chrome, strip 132  -> 310
       992-1199px  masthead 72 chrome (no topbar),      strip 156  -> 228

   Left alone below 992px: there the three strip items stack to ~350px, so
   filling the viewport would squeeze the hero smaller than it is now, and a
   phone user expects to scroll regardless.

   The max() floor keeps the hero usable on a short window (a laptop at 700px
   tall would otherwise get a 390px hero) — the strip then sits just below the
   fold, which is the better trade. */
@media (min-width: 992px) {
    .static-hero {
        min-height: 460px;
        min-height: max(460px, calc(100vh - 228px));
    }
}
@media (min-width: 1200px) {
    .static-hero {
        min-height: 460px;
        min-height: max(460px, calc(100vh - 310px));
    }
}

/* 23. Section padding on phones.
   The theme carries its desktop section padding straight down to mobile — 80px
   or 90px top and bottom on every section. Between any two sections that is
   160-180px of empty screen, which on a 390x844 phone is a fifth of the
   viewport with nothing in it. On the About page the gap between the end of the
   accordion and the "Our Quality Management" heading measured 180px.

   Roughly a 40% reduction, keeping each section's own top/bottom relationship
   (whychooseus-5 and service-1 are deliberately lighter at the bottom, where
   their icon boxes and cards already carry margin). Desktop is untouched. */
@media (max-width: 767px) {
    .welcomesec-3,
    .requets-quote-3 {
        padding-top: 55px;
        padding-bottom: 55px;
    }
    .abouttop,
    .ourhistory,
    .pageproject-1,
    .service-dtail {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .service-1 {
        padding-top: 50px;
        padding-bottom: 30px;
    }
    .whychooseus-5 {
        padding-top: 50px;
        padding-bottom: 25px;
    }
    .contactpage {
        padding-top: 45px;
        padding-bottom: 30px;
    }
    .contactform {
        padding-top: 45px;
        padding-bottom: 45px;
    }
}

/* Footer text color overrides */
.footer-widgets,
.site-footer,
.footer-widgets .widget a,
.footer-widgets .widget_text,
.site-footer .footer-copyright,
.site-footer .footer-developed-by {
    color: #a0a0a0;
}

/* Footer button text color override */
.footer-widgets .mf-btn-widget {
    color: #000000 !important;
}

/* Hyperlink styling for phone, email & website contact links */
.topbar a[href^="tel:"],
.topbar a[href^="mailto:"],
.header-contact a[href^="tel:"],
.header-contact a[href^="mailto:"],
.footer-widget-contact a[href^="tel:"],
.footer-widget-contact a[href^="mailto:"],
.mf-contact-box a[href^="tel:"],
.mf-contact-box a[href^="mailto:"],
.mf-contact-box a[href^="https://"],
.quote3info a[href^="tel:"],
.quote3info a[href^="mailto:"],
.mf-team-contact a[href^="tel:"],
.mf-team-contact a[href^="mailto:"] {
    color: inherit;
    text-decoration: none;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.topbar a[href^="tel:"]:hover,
.topbar a[href^="mailto:"]:hover,
.header-contact a[href^="tel:"]:hover,
.header-contact a[href^="mailto:"]:hover,
.footer-widget-contact a[href^="tel:"]:hover,
.footer-widget-contact a[href^="mailto:"]:hover,
.mf-contact-box a[href^="tel:"]:hover,
.mf-contact-box a[href^="mailto:"]:hover,
.mf-contact-box a[href^="https://"]:hover,
.quote3info a[href^="tel:"]:hover,
.quote3info a[href^="mailto:"]:hover,
.mf-team-contact a[href^="tel:"]:hover,
.mf-team-contact a[href^="mailto:"]:hover {
    color: #f5a623;
    text-decoration: none;
}