/* SGK Phase 7 v3 - Force Full Width on ALL Pages (ALL viewports)
 * Including footer (was missed in Phase 7 v2)
 *
 * Key changes from Phase 7 v2:
 *   - Extend full-width rules to cover <footer id="pxl-footer-elementor">
 *     and its Bootstrap .container / .row / .col-12 wrappers
 *   - Footer section now spans full viewport width (was 363px on 393px mobile)
 *
 * Key changes from Phase 6:
 *   - Mobile (≤767px): 20px L/R padding (was 40px - too wide on small screens)
 *   - Tablet (768-1280px): 24px L/R padding
 *   - Desktop (≥1281px): 32px L/R padding, max-width 1440px (was 1920px)
 *   - Zero out Bootstrap .container / .row / .col-12 padding inside #pxl-main AND #pxl-footer
 *   - Zero out .elementor-widget-wrap padding inside .elementor-top-section
 *   - Force .sgk-home, .sgk-lp, .sgk-section-bg to 100% width
 */

/* === 1. Bootstrap .container / .row / .col-12 wrappers (main + footer) === */
#pxl-main > .container,
#pxl-main .container,
#pxl-main > .container > .row,
#pxl-main .container > .row,
#pxl-main > .elementor-container,
#pxl-main .pxl-content-wrap,
#pxl-main .row.pxl-content-wrap,
#pxl-main #pxl-content-area,
#pxl-main .pxl-content-area,
#pxl-main #pxl-content-main,
#pxl-main .pxl-content-main,
#pxl-footer-elementor > .container,
#pxl-footer-elementor .container,
#pxl-footer-elementor > .container > .row,
#pxl-footer-elementor .container > .row,
#pxl-footer-elementor > .elementor-container,
#pxl-footer-elementor .footer-elementor-inner > .container,
#pxl-footer-elementor .footer-elementor-inner .row,
#pxl-footer-elementor .footer-elementor-inner .col-12,
#pxl-footer-elementor .col-12,
footer .container,
footer .container > .row,
footer .col-12,
.pxl-footer .container,
.pxl-footer .container > .row,
.pxl-footer .col-12 {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Also zero out the negative margins on .row inside footer (was -15px) */
#pxl-footer-elementor .row,
footer .row,
.pxl-footer .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* === 2. Elementor sections: full-width on all viewports === */
.elementor-section.elementor-top-section,
.elementor-section.elementor-inner-section {
    max-width: 100% !important;
    width: 100% !important;
}

/* === 3. Elementor containers: full-width with 20px L/R padding on mobile === */
.elementor-section.elementor-top-section > .elementor-container,
.elementor-section.elementor-top-section.elementor-section-boxed > .elementor-container,
.elementor-section.elementor-top-section.elementor-section-full_width > .elementor-container,
.elementor-section.elementor-top-section.elementor-section-stretched > .elementor-container,
.elementor-section.elementor-inner-section > .elementor-container,
.elementor-section.elementor-inner-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* === 4. Zero out Elementor widget-wrap padding inside top-sections === */
.elementor-section.elementor-top-section .elementor-widget-wrap.elementor-element-populated,
.elementor-section.elementor-top-section .elementor-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* === 5. SGK custom homepage (.sgk-home wrapper) - full-bleed on all viewports === */
.sgk-home {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.sgk-home .sgk-section-bg,
.sgk-home .sgk-hero,
.sgk-home .sgk-manifest,
.sgk-home .sgk-doors,
.sgk-home .sgk-specialties,
.sgk-home .sgk-stats,
.sgk-home .sgk-coverage,
.sgk-home .sgk-process {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* === 6. .sgk-container (homepage inner content) - capped at 1440px on all viewports === */
.sgk-container,
.sgk-home .sgk-container,
.sgk-home .sgk-section-bg .sgk-container,
.sgk-home .sgk-hero .sgk-container,
.sgk-home .sgk-manifest .sgk-container {
    max-width: 1440px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* === 7. SGK service pages (.sgk-lp wrapper) - full-bleed === */
.sgk-lp {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* === 8. pxl-content-area (blog posts / archive content) - full width === */
.pxl-content-area,
.pxl-content-wrap.no-sidebar .pxl-content-area,
body.archive:not(.post-type-archive):not(.tax-product_cat):not(.tax-product_tag) .pxl-content-wrap.no-sidebar .pxl-content-area,
body.single-post .pxl-content-wrap.no-sidebar .pxl-content-area,
.pxl-entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* === 9. Body + footer wrappers === */
#pxl-wapper,
#pxl-main,
body:not(.home) #pxl-main,
#pxl-footer-elementor,
footer,
.pxl-footer,
.footer-elementor-inner {
    max-width: 100% !important;
    width: 100% !important;
}

/* === 10. Tablet (768-1280px): 24px L/R padding for breathing room === */
@media screen and (min-width: 768px) and (max-width: 1280px) {
    .elementor-section.elementor-top-section > .elementor-container,
    .elementor-section.elementor-top-section.elementor-section-boxed > .elementor-container,
    .elementor-section.elementor-top-section.elementor-section-full_width > .elementor-container,
    .elementor-section.elementor-top-section.elementor-section-stretched > .elementor-container,
    .elementor-section.elementor-inner-section > .elementor-container,
    .sgk-container,
    .sgk-home .sgk-container,
    .pxl-content-area,
    .pxl-content-wrap.no-sidebar .pxl-content-area,
    .pxl-entry-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* === 11. Desktop (≥1281px): cap at 1440px with 32px L/R padding === */
@media screen and (min-width: 1281px) {
    .elementor-section.elementor-top-section > .elementor-container,
    .elementor-section.elementor-top-section.elementor-section-boxed > .elementor-container,
    .elementor-section.elementor-top-section.elementor-section-full_width > .elementor-container,
    .elementor-section.elementor-top-section.elementor-section-stretched > .elementor-container,
    .elementor-section.elementor-inner-section > .elementor-container,
    .elementor-section.elementor-inner-section.elementor-section-boxed > .elementor-container {
        max-width: 1440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .sgk-container,
    .sgk-home .sgk-container {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

/* === 12. Very wide screens (≥1921px, 4K) - cap at 1600px to prevent extreme stretching === */
@media screen and (min-width: 1921px) {
    .elementor-section.elementor-top-section > .elementor-container,
    .elementor-section.elementor-inner-section > .elementor-container,
    .sgk-container,
    .sgk-home .sgk-container,
    .pxl-content-area,
    .pxl-content-wrap.no-sidebar .pxl-content-area,
    .pxl-entry-content {
        max-width: 1600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* === END PHASE 7 v3 === */

/* =====================================================================
   PHASE 8 — Disable theme title bar / header image / breadcrumb
   Hides the dark hero band (bg image + page title + breadcrumb)
   on the 11 inner pages that use the title-bar pattern.
   Reversible: delete this block or set display: block.
   ===================================================================== */

/* About Us (ID 163, section dd6246f) */
body.page-id-163 .elementor-element-dd6246f {
  display: none !important;
}

/* Contact Us (ID 173, section 4fa7a93) */
body.page-id-173 .elementor-element-4fa7a93 {
  display: none !important;
}

/* Our Services (ID 198, section 2fba119) */
body.page-id-198 .elementor-element-2fba119 {
  display: none !important;
}

/* Air Freight (ID 11183, section 9da88bf) */
body.postid-11183 .elementor-element-9da88bf {
  display: none !important;
}

/* Ocean Freight (ID 11184, section f647b92) */
body.postid-11184 .elementor-element-f647b92 {
  display: none !important;
}

/* Procurement (ID 11185, section 34b3786) */
body.postid-11185 .elementor-element-34b3786 {
  display: none !important;
}

/* Warehousing (ID 2908, section 246e1d8) */
body.postid-2908 .elementor-element-246e1d8 {
  display: none !important;
}

/* Packaging (ID 2907, section c4fab23) */
body.postid-2907 .elementor-element-c4fab23 {
  display: none !important;
}

/* Door-to-Door (ID 2906, section 3dbda69) */
body.postid-2906 .elementor-element-3dbda69 {
  display: none !important;
}

/* Customs Clearance (ID 2905, section 38951f8) */
body.postid-2905 .elementor-element-38951f8 {
  display: none !important;
}

/* Heavy Lift (ID 17238, section 9da88bf) */
body.postid-17238 .elementor-element-9da88bf {
  display: none !important;
}

/* =====================================================================
   PHASE 9 — Desktop full-width fix
   Removes the Phase 7 v3 cap of max-width:1440px on .elementor-container
   on desktop (≥1281px). On viewports wider than 1440px (1920px, 2560px,
   etc.) the body content was "boxed" with ~240-560px whitespace on each
   side. Now .elementor-container spans the full viewport width with
   40px L/R padding for breathing room.

   Mobile (≤767px) and tablet (768-1280px) rules from Phase 7 are
   UNCHANGED. .sgk-container (homepage hero text block) keeps its
   max-width:1440px cap for readability.

   Reversible: delete this block to restore Phase 7 desktop behavior.
   ===================================================================== */
@media screen and (min-width: 1281px) {
    /* Remove the 1440px cap on Elementor section containers */
    .elementor-section.elementor-top-section > .elementor-container,
    .elementor-section.elementor-top-section.elementor-section-boxed > .elementor-container,
    .elementor-section.elementor-top-section.elementor-section-full_width > .elementor-container,
    .elementor-section.elementor-top-section.elementor-section-stretched > .elementor-container,
    .elementor-section.elementor-inner-section > .elementor-container,
    .elementor-section.elementor-inner-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    /* Footer section containers: also full-width on desktop */
    #pxl-footer-elementor .elementor-section > .elementor-container,
    footer .elementor-section > .elementor-container {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    /* The "Company Information" / copyright footer sections use a 1280px
       inner container. Override that too. */
    #pxl-footer-elementor .elementor-element-884e42d > .elementor-container,
    #pxl-footer-elementor .elementor-element-1c27c1f > .elementor-container {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    /* Homepage hero text block (.sgk-container) — KEEP capped at 1440px
       for readability of long-form hero paragraphs on ultrawide monitors.
       Just bump padding from 32px to 40px for consistency. */
    .sgk-container,
    .sgk-home .sgk-container {
        max-width: 1440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}


/* ===== PHASE 10: Full-width fix for boxed sections with background ===== */
/* Fix: After Phase 9 set .elementor-container padding: 0 40px, sections with bg
   color that are nested inside the container got constrained to 1808px wide
   (40px white on each side). This fix extends their bg full-width. */

@media screen and (min-width: 1281px) {
    /* Allow children to extend beyond parent's padding (was hidden by overflow:hidden) */
    .sgk-home,
    .elementor-widget-container,
    .elementor-widget-wrap,
    .elementor-column {
        overflow: visible !important;
    }

    /* Extend custom SGK sections (homepage) full-width */
    .sgk-section-bg,
    .sgk-hero,
    .sgk-manifest,
    .sgk-doors,
    .sgk-specialties,
    .sgk-stats,
    .sgk-coverage,
    .sgk-process,
    .sgk-creds,
    .sgk-testimonials,
    .sgk-finalcta {
        margin-left: -40px !important;
        margin-right: -40px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        width: calc(100% + 80px) !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* Extend Elementor inner sections with bg color full-width
       (safe to apply to all inner sections — transparent ones have no visual effect) */
    .elementor-inner-section {
        margin-left: -40px !important;
        margin-right: -40px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        width: calc(100% + 80px) !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}
/* ===== END PHASE 10 ===== */


/* ===== PHASE 10 v4: Full-width fix for boxed sections with background ===== */
/* Fix: After Phase 9 set .elementor-container padding: 0 40px, sections with bg
   color that are nested inside the container got constrained to 1808px wide.
   This fix extends their bg full-width.
   v4: Removed the rule for .elementor-top-section-boxed (was over-extending
   footer sections that were already full-width via elementor-section-stretched).
   Only targets .elementor-inner-section (which is always constrained) and
   .sgk-home .sgk-* custom sections. */

@media screen and (min-width: 1281px) {
    /* Allow children to extend beyond parent's padding (was hidden by overflow:hidden) */
    body .sgk-home,
    body .elementor-widget-container,
    body .elementor-widget-wrap,
    body .elementor-column {
        overflow: visible !important;
    }

    /* Extend custom SGK sections (homepage) full-width.
       Use body .sgk-home .xxx (specificity 0,3,1) to override inline HTML widget CSS. */
    body .sgk-home .sgk-section-bg,
    body .sgk-home .sgk-hero,
    body .sgk-home .sgk-manifest,
    body .sgk-home .sgk-doors,
    body .sgk-home .sgk-specialties,
    body .sgk-home .sgk-stats,
    body .sgk-home .sgk-coverage,
    body .sgk-home .sgk-process,
    body .sgk-home .sgk-creds,
    body .sgk-home .sgk-testimonials,
    body .sgk-home .sgk-finalcta {
        margin-left: -40px !important;
        margin-right: -40px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        width: calc(100% + 80px) !important;
        max-width: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Extend Elementor INNER sections (only) full-width.
       Inner sections are always constrained by their parent's container padding,
       so they need the negative margin trick to extend their bg full-width.
       Do NOT apply to .elementor-top-section (footer sections are already
       full-width via elementor-section-stretched, applying negative margin
       would over-extend them beyond the viewport). */
    body .elementor-section.elementor-inner-section {
        margin-left: -40px !important;
        margin-right: -40px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        width: calc(100% + 80px) !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}
/* ===== END PHASE 10 v4 ===== */


/* ===== PHASE 11: Force max full-width on mobile, remove paddings ===== */
/* User request: 'force max full width on mobile devices, remove paddings'
   Applies the same negative-margin trick as Phase 10 (desktop) but for mobile
   (≤767px, 20px padding) and tablet (768-1280px, 24px padding).
   Also removes all internal paddings (.sgk-container, footer .elementor-container)
   so content extends to the screen edges. */

/* === MOBILE (≤767px) — parent .elementor-container has 20px L/R padding === */
@media screen and (max-width: 767px) {
    /* Allow children to extend beyond parent's padding */
    body .sgk-home,
    body .elementor-widget-container,
    body .elementor-widget-wrap,
    body .elementor-column,
    body .elementor-container {
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Extend custom SGK sections (homepage) full-width on mobile */
    body .sgk-home .sgk-section-bg,
    body .sgk-home .sgk-hero,
    body .sgk-home .sgk-manifest,
    body .sgk-home .sgk-doors,
    body .sgk-home .sgk-specialties,
    body .sgk-home .sgk-stats,
    body .sgk-home .sgk-coverage,
    body .sgk-home .sgk-process,
    body .sgk-home .sgk-creds,
    body .sgk-home .sgk-testimonials,
    body .sgk-home .sgk-finalcta,
    body .sgk-section-bg,
    body .sgk-hero {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Extend Elementor INNER sections full-width on mobile */
    body .elementor-section.elementor-inner-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Remove padding from inner content containers (.sgk-container, .elementor-container)
       so text/content extends to screen edges.
       Use high specificity (body .elementor-section.elementor-xxx > .elementor-container = 0,2,1+body=0,3,1)
       to override Phase 7 mobile rule (.elementor-section.elementor-xxx > .elementor-container = 0,2,1). */
    body .sgk-container,
    body .sgk-home .sgk-container,
    body .sgk-home .sgk-section-bg .sgk-container,
    body .sgk-home .sgk-hero .sgk-container,
    body .sgk-home .sgk-manifest .sgk-container,
    body .elementor-section.elementor-top-section > .elementor-container,
    body .elementor-section.elementor-top-section.elementor-section-boxed > .elementor-container,
    body .elementor-section.elementor-top-section.elementor-section-stretched > .elementor-container,
    body .elementor-section.elementor-top-section.elementor-section-full_width > .elementor-container,
    body .elementor-section.elementor-inner-section > .elementor-container,
    body .elementor-section.elementor-inner-section.elementor-section-boxed > .elementor-container,
    body #pxl-footer-elementor .elementor-section > .elementor-container,
    body #pxl-footer-elementor .elementor-section.elementor-top-section > .elementor-container,
    body footer .elementor-section > .elementor-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* === TABLET (768-1280px) — parent .elementor-container has 24px L/R padding === */
@media screen and (min-width: 768px) and (max-width: 1280px) {
    /* Allow children to extend beyond parent's padding */
    body .sgk-home,
    body .elementor-widget-container,
    body .elementor-widget-wrap,
    body .elementor-column,
    body .elementor-container {
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Extend custom SGK sections full-width on tablet */
    body .sgk-home .sgk-section-bg,
    body .sgk-home .sgk-hero,
    body .sgk-home .sgk-manifest,
    body .sgk-home .sgk-doors,
    body .sgk-home .sgk-specialties,
    body .sgk-home .sgk-stats,
    body .sgk-home .sgk-coverage,
    body .sgk-home .sgk-process,
    body .sgk-home .sgk-creds,
    body .sgk-home .sgk-testimonials,
    body .sgk-home .sgk-finalcta,
    body .sgk-section-bg,
    body .sgk-hero {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Extend Elementor INNER sections full-width on tablet */
    body .elementor-section.elementor-inner-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Remove padding from inner content containers */
    body .sgk-container,
    body .sgk-home .sgk-container,
    body .sgk-home .sgk-section-bg .sgk-container,
    body .sgk-home .sgk-hero .sgk-container,
    body .sgk-home .sgk-manifest .sgk-container,
    body .elementor-section.elementor-top-section > .elementor-container,
    body .elementor-section.elementor-top-section.elementor-section-boxed > .elementor-container,
    body .elementor-section.elementor-top-section.elementor-section-stretched > .elementor-container,
    body .elementor-section.elementor-top-section.elementor-section-full_width > .elementor-container,
    body .elementor-section.elementor-inner-section > .elementor-container,
    body .elementor-section.elementor-inner-section.elementor-section-boxed > .elementor-container,
    body #pxl-footer-elementor .elementor-section > .elementor-container,
    body #pxl-footer-elementor .elementor-section.elementor-top-section > .elementor-container,
    body footer .elementor-section > .elementor-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}
/* ===== END PHASE 11 ===== */


/* ===== PHASE 12: Restore minimum 10px L/R padding on mobile/tablet ===== */
/* User request: 'add a small minimum padding e.g 10px and center the
   contents of the hero and other parts of the website appropriately'.

   Phase 11 stripped all padding from inner content containers to make
   section BACKGROUNDS full-width. Side effect: text/buttons/phone number
   touched screen edges. Phase 12 restores 10px minimum L/R padding on
   inner content (.sgk-container, .elementor-widget-container) while
   keeping section backgrounds full-width via a negative-margin trick
   on .sgk-home (counteracts the widget-container padding). Only the CTA
   buttons are centered; hero heading + paragraph remain left-aligned.
   Desktop (≥1281px) is UNCHANGED — Phase 10 already has 40px L/R padding
   which exceeds the 10px minimum. */

/* === MOBILE (≤767px) — 10px minimum L/R padding on inner content === */
@media screen and (max-width: 767px) {
    /* (a) Add 10px L/R padding to ALL Elementor widget containers.
           This catches headings, text editors, buttons, icon boxes,
           and the phone-number widget below the hero. */
    body .elementor-widget-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* (b) Counteract the widget-container padding for .sgk-home (which
           wraps all the .sgk-* sections with bg colors). Without this,
           .sgk-home → .sgk-hero would be 370px wide in a 390px viewport
           and the navy hero bg would no longer extend edge-to-edge.
           Negative margin + calc(100% + 20px) extends .sgk-home back to
           full viewport width. */
    body .sgk-home {
        margin-left: -10px !important;
        margin-right: -10px !important;
        width: calc(100% + 20px) !important;
        max-width: calc(100% + 20px) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* (c) Add 10px L/R padding to .sgk-container (inner content of all
           .sgk-* sections — hero text, manifest text, doors, etc.).
           These override Phase 11's padding:0 with equal specificity
           (Phase 12 appended later → wins). */
    body .sgk-container,
    body .sgk-home .sgk-container,
    body .sgk-home .sgk-section-bg .sgk-container,
    body .sgk-home .sgk-hero .sgk-container,
    body .sgk-home .sgk-manifest .sgk-container,
    body .sgk-home .sgk-doors .sgk-container,
    body .sgk-home .sgk-specialties .sgk-container,
    body .sgk-home .sgk-stats .sgk-container,
    body .sgk-home .sgk-coverage .sgk-container,
    body .sgk-home .sgk-process .sgk-container,
    body .sgk-home .sgk-creds .sgk-container,
    body .sgk-home .sgk-testimonials .sgk-container,
    body .sgk-home .sgk-finalcta .sgk-container,
    body .sgk-section-bg .sgk-container,
    body .sgk-hero .sgk-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* (d) Center ONLY the CTA buttons in the hero. The .sgk-hero__ctas
           container is a flex column with align-items: flex-start (buttons
           left-aligned by default). Override to align-items: center so the
           buttons (max-width: 320px each) sit centered within the hero.
           Hero heading (.sgk-hero__headline) and paragraph (.sgk-hero__sub)
           remain LEFT-aligned — only the buttons are centered. */
    body .sgk-home .sgk-hero__ctas,
    body .sgk-hero__ctas,
    body .sgk-home .sgk-hero .sgk-hero__ctas,
    body .sgk-hero .sgk-hero__ctas {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* (e) Inner Elementor sections with bg color: their .elementor-container
           should also have 10px L/R padding so inner widget content is
           padded from edges. (Section bg stays full-width — Phase 11's
           width:100% on .elementor-inner-section remains in effect.) */
    body .elementor-section.elementor-inner-section > .elementor-container,
    body .elementor-section.elementor-inner-section.elementor-section-boxed > .elementor-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }
}

/* === TABLET (768-1280px) — 10px minimum L/R padding on inner content === */
@media screen and (min-width: 768px) and (max-width: 1280px) {
    /* (a) Add 10px L/R padding to ALL Elementor widget containers. */
    body .elementor-widget-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* (b) Counteract the widget-container padding for .sgk-home. */
    body .sgk-home {
        margin-left: -10px !important;
        margin-right: -10px !important;
        width: calc(100% + 20px) !important;
        max-width: calc(100% + 20px) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* (c) Add 10px L/R padding to .sgk-container (inner content). */
    body .sgk-container,
    body .sgk-home .sgk-container,
    body .sgk-home .sgk-section-bg .sgk-container,
    body .sgk-home .sgk-hero .sgk-container,
    body .sgk-home .sgk-manifest .sgk-container,
    body .sgk-home .sgk-doors .sgk-container,
    body .sgk-home .sgk-specialties .sgk-container,
    body .sgk-home .sgk-stats .sgk-container,
    body .sgk-home .sgk-coverage .sgk-container,
    body .sgk-home .sgk-process .sgk-container,
    body .sgk-home .sgk-creds .sgk-container,
    body .sgk-home .sgk-testimonials .sgk-container,
    body .sgk-home .sgk-finalcta .sgk-container,
    body .sgk-section-bg .sgk-container,
    body .sgk-hero .sgk-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* (d) Center ONLY the CTA buttons in the hero (heading + paragraph
           remain left-aligned). */
    body .sgk-home .sgk-hero__ctas,
    body .sgk-hero__ctas,
    body .sgk-home .sgk-hero .sgk-hero__ctas,
    body .sgk-hero .sgk-hero__ctas {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* (e) Inner Elementor sections padding. */
    body .elementor-section.elementor-inner-section > .elementor-container,
    body .elementor-section.elementor-inner-section.elementor-section-boxed > .elementor-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }
}
/* ===== END PHASE 12 ===== */


/* === Phase 15: True Sticky Navbar (always visible while scrolling) === */
/* User request: "I want it to have sticky navbar" */
/* Hide the main header on desktop — we only want ONE navbar (the sticky) */
@media (min-width: 1201px) {
    #pxl-header-elementor .pxl-header-elementor-main {
        display: none !important;
    }
}
/* Make the sticky header ALWAYS visible at top of viewport.
   This overrides the theme's default `transform: translateY(-120%)` which hides it.
   Disable transition so there's no animation on page load. */
#pxl-header-elementor .pxl-header-elementor-sticky.pxl-sticky-stt {
    transform: translateY(0%) !important;
    visibility: visible !important;
    -webkit-transition: none !important;
    transition: none !important;
}
/* Also force visible state when theme.js adds .pxl-header-fixed on scroll */
#pxl-header-elementor .pxl-header-elementor-sticky.pxl-sticky-stt.pxl-header-fixed {
    transform: translateY(0%) !important;
    visibility: visible !important;
}
/* === End Phase 15 === */