/*
 * ============================================================
 * eWorkOrders — Industry Pages Stylesheet
 * ============================================================
 *
 * HOW TO USE:
 * 1. Upload to: D:\WWWRoot\eWorkOrders.com\eworkorders\wp-content\themes\eWorkOrders\industry-pages.css
 *
 * 2. Enqueue in functions.php:
 *    add_action('wp_enqueue_scripts', function() {
 *        if (is_page()) {
 *            wp_enqueue_style(
 *                'ewo-industry-pages',
 *                get_stylesheet_directory_uri() . '/css/industry-pages.css',
 *                array(),
 *                filemtime(get_stylesheet_directory() . '/css/industry-pages.css')
 *            );
 *        }
 *    });
 *
 * 3. Remove all inline style="" attributes and <style> blocks
 *    from each industry page in the WordPress editor.
 * ============================================================
 */


/* ============================================================
   GLOBAL RESET
   ============================================================ */

.entry-content * {
    font-family: Arial, sans-serif;
}


/* ============================================================
   HERO SECTION
   (.ew-hero-container, .ew-hero-text, h2.main-header, CTA btn)
   ============================================================ */

.ew-hero-container {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #ffffff;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0 60px 10px 100px;
    margin-top: -80px;
    gap: 0;
    box-sizing: border-box;
}

.ew-hero-text {
    flex: 1.2 1 620px;
    min-width: 340px;
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}

.ew-hero-container h2.main-header {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 8px;
    color: #003a63;
    line-height: 1.3;
}

.ew-hero-container p {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 0 8px 0;
    color: #1a1a1a;
}

.ew-hero-container p.ew-subheading {
    font-size: 18px;
    font-weight: 600;
    color: #0d3d6e;
    line-height: 1.5;
    margin: 0 0 8px 0;
}

.ew-hero-container .ew-feature-row {
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 1.3;
}

.ew-hero-container .ew-feature-list {
    margin: 0 0 4px 0;
}

.ew-hero-container strong {
    color: #fff;
    display: block;
    margin-bottom: 8px;
}

.ew-hero-container a.ew-cta-btn,
.entry-content a.ew-cta-btn {
    background: #FF5421;
    color: #ffffff;
    padding: 15px 40px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: 22px;
    font-family: Arial, sans-serif;
    display: inline-block;
    transition: transform 0.2s ease;
}

.ew-hero-container a.ew-cta-btn:hover,
.entry-content a.ew-cta-btn:hover {
    transform: scale(1.03);
}


/* ============================================================
   IMAGE COLUMN
   (Hero image, review logos, stars — right side of hero)
   ============================================================ */

.ew-image-col {
    flex: 1.5 1 720px;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background: transparent;
}

.religious-image-wrap,
.healthcare-image-wrap,
.lab-image-wrap,
.laundry-image-wrap,
.warehouse-image-wrap,
.restaurant-image-wrap,
.nonprofit-image-wrap,
.tourist-image-wrap,
.gov-image-wrap,
.hosp-image-wrap,
.retail-image-wrap,
.property-image-wrap,
.hvac-image-wrap {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    margin: 0 auto;
    background: transparent;
}

.religious-image-wrap a,
.healthcare-image-wrap a,
.lab-image-wrap a,
.laundry-image-wrap a,
.warehouse-image-wrap a,
.restaurant-image-wrap a,
.nonprofit-image-wrap a,
.tourist-image-wrap a,
.gov-image-wrap a,
.hosp-image-wrap a,
.retail-image-wrap a,
.property-image-wrap a,
.hvac-image-wrap a {
    display: block;
    text-decoration: none;
    width: 100%;
    max-width: 800px;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.religious-image-wrap img,
.healthcare-image-wrap img,
.lab-image-wrap img,
.laundry-image-wrap img,
.warehouse-image-wrap img,
.restaurant-image-wrap img,
.nonprofit-image-wrap img,
.tourist-image-wrap img,
.gov-image-wrap img,
.hosp-image-wrap img,
.retail-image-wrap img,
.property-image-wrap img,
.hvac-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
    margin: 0;
}


/* ============================================================
   LOVED BY / REVIEW LOGOS
   (Stars + "Customers Love Us!" + Capterra/G2/etc logos)
   ============================================================ */

.loved-by-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 1;
    margin-top: 8px;
    width: 100%;
    text-align: center;
}

.loved-by-section .stars {
    color: #ffcc00;
    font-size: 28px;
    font-weight: bold;
}

.loved-by-section .label {
    font-size: 22px;
    font-weight: 700;
    color: #0d3d6e;
    font-family: sans-serif;
}

.review-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    margin-bottom: 0;
    padding-bottom: 0;
    width: 100%;
}

.review-logos img {
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}


/* ============================================================
   VIDEO CONTAINER
   (Used on pages with video instead of image in hero)
   ============================================================ */

.video-container {
    min-width: 300px;
    max-width: 750px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 1 1 340px;
}

.video-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 8px;
}


/* ============================================================
   SECTION 2 — FEATURES (parallax background)
   (#ewoSection2 subtitle centering + CTA centering)
   ============================================================ */

#ewoSection2 {
    width: 100%;
    background: #D3D3D3 url('https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img/https://eworkorders.com/eworkorders/wp-content/uploads/Home-Page-Redesign.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 60px 0;
    display: flow-root;
    margin-bottom: 0 !important;
    font-family: sans-serif;
}

#ewoSection2 > div {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    padding: 0 15%;
    font-size: 18px;
    color: #444;
}

#ewoSection2 > div:last-child {
    text-align: center;
    margin-top: 36px;
    padding: 0;
}


/* ============================================================
   SECTION BACKGROUND PATTERN
   (Used on grey parallax sections throughout pages)
   ============================================================ */

.section-bg-pattern {
    width: 100%;
    background: #D3D3D3 url('/eworkorders/wp-content/uploads/Home-Page-Redesign.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 60px 0;
    display: flow-root;
    margin-bottom: 0 !important;
    font-family: sans-serif;
}


/* ============================================================
   MAIN CONTENT SECTION
   (.main-section — white full-width sections)
   ============================================================ */

.main-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #ffffff;
    padding: 50px 60px 100px 60px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

.main-section h2 {
    text-align: center;
}

.main-section section {
    background: #ffffff;
    padding: 40px 0;
}


/* ============================================================
   SECTION 7 — WHITE PADDED WRAPPER
   (Text + image intro row + 3 cards below)
   ============================================================ */

.section-white-padded {
    width: 100%;
    background: #ffffff;
    padding: 50px 60px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

.section-white-padded h2 {
    margin-bottom: 30px;
}

.section7-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
    margin-bottom: 50px;
}

.section7-text {
    flex: 1;
    min-width: 280px;
}

.section7-text p {
    text-align: left;
    font-size: 18px;
    color: #444;
    margin: 0;
    line-height: 1.7;
}

.section7-image {
    flex: 1;
    min-width: 280px;
    display: flex;
    justify-content: center;
}

.section7-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.1);
}


/* ============================================================
   EW ROW / ROW WIDE
   (Flex containers for card rows)
   ============================================================ */

.ew-row {
    display: flex;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 24px auto;
    flex-wrap: wrap;
    align-items: stretch;
}

.ew-row-wide {
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    align-items: stretch;
}


/* ============================================================
   EW CARD — COMPLETE RULE
   (Small feature cards, FAQ cards, role cards, why-choose cards)
   Includes: white background, hover, text color fix, footer
   ============================================================ */

.ew-card-wrap {
    flex: 1;
    min-width: 280px;
    display: flex;
}

a.ew-card,
div.ew-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border-top: 6px solid #0d3d6e;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a.ew-card:visited {
    color: inherit;
}

a.ew-card:hover,
div.ew-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    color: inherit;
}

a.ew-card h3,
div.ew-card h3,
a.ew-card .ew-card-body h3,
div.ew-card .ew-card-body h3 {
    color: #003a63 !important;
}

a.ew-card p,
div.ew-card p,
a.ew-card .ew-card-body p,
div.ew-card .ew-card-body p {
    color: #444 !important;
}

.ew-card-line {
    background: #0d3d6e;
    height: 6px;
    flex-shrink: 0;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
    border: 0;
}

.ew-card-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ew-card-body h3 {
    color: #003a63;
    font-size: 17px;
    margin: 0 0 8px 0;
}

.ew-card-body p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

.ew-card-footer {
    background: #0d3d6e;
    padding: 12px 24px;
    text-align: center;
    flex-shrink: 0;
}

.ew-card-footer span {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.card-emoji {
    font-size: 32px;
    margin-bottom: 10px;
}

.card-container {
    flex: 1 1 45%;
    min-width: 280px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
}


/* ============================================================
   SECTION 5 — SERVICE REQUEST / WORK ORDER CARDS
   (Larger blue/red header cards with checklist)
   ============================================================ */

.card-inner-blue,
.card-inner-red {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.06);
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-inner-blue:hover,
.card-inner-red:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.card-header-blue {
    background: #0d3d6e;
    padding: 20px 24px;
}

.card-header-blue h3 {
    color: #ffffff;
    font-size: 20px;
    margin: 0;
}

.card-header-blue p {
    color: #cce0f5;
    font-size: 14px;
    margin: 6px 0 0 0;
}

.card-header-red {
    background: #640000;
    padding: 20px 24px;
}

.card-header-red h3 {
    color: #ffffff;
    font-size: 20px;
    margin: 0;
}

.card-header-red p {
    color: #ffcccc;
    font-size: 14px;
    margin: 6px 0 0 0;
}

.card-body-content {
    padding: 24px;
    flex: 1;
}

.card-body-content p {
    font-size: 15px;
    color: #444;
    line-height: 1.7;
    margin: 0 0 16px 0;
}

.card-checklist {
    font-size: 15px;
    color: #1a1a1a;
    line-height: 1.8;
}

.card-checklist div {
    margin-bottom: 8px;
}


/* ============================================================
   PROCESS BOX
   (Dark blue box with step arrows — "How They Work Together")
   ============================================================ */

.process-box {
    background: #003a63;
    border-radius: 12px;
    padding: 30px 40px;
    max-width: 1000px;
    margin: 0 auto 40px auto;
    text-align: center;
}

.process-box h3 {
    color: #ffffff;
    font-size: 22px;
    margin: 0 0 12px 0;
}

.process-box p {
    color: #cce0f5;
    font-size: 16px;
    line-height: 1.7;
    margin: 0 auto 20px auto;
    max-width: 700px;
}

.process-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.process-step-blue {
    background: #0d3d6e;
    border-radius: 10px;
    padding: 14px 24px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.process-step-red {
    background: #640000;
    border-radius: 10px;
    padding: 14px 24px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.process-step-green {
    background: #2d7a2d;
    border-radius: 10px;
    padding: 14px 24px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.process-arrow {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
}


/* ============================================================
   STAT STRIP BANNER
   (Full-width dark blue strip with numbers/stats)
   ============================================================ */

.stat-strip {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #0d3d6e;
    padding: 40px 60px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

.stat-strip-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-item {
    flex: 1;
    min-width: 200px;
    text-align: center;
    padding: 20px 30px;
    box-sizing: border-box;
}

.stat-strip .stat-number {
    font-size: 48px;
    font-weight: 900;
    color: #FF5421;
    line-height: 1;
}

.stat-strip .stat-number-sm {
    font-size: 32px;
    font-weight: 900;
    color: #FF5421;
    line-height: 1;
}

.stat-strip .stat-label {
    font-size: 16px;
    color: #cce0f5;
    margin-top: 6px;
    font-weight: 600;
}


/* ============================================================
   MAINTENANCE CENTER CARDS
   (Resource guide cards with image/coming-soon + footer)
   ============================================================ */

.mc-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 40px;
    align-items: stretch;
    box-sizing: border-box;
}

.mc-card {
    flex: 1 1 280px;
    max-width: 340px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

.mc-card-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    flex-shrink: 0;
    background: #000;
}

.mc-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mc-card-coming-soon {
    width: 100%;
    height: 180px;
    background: #0d3e6e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0;
}

.mc-card-body {
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mc-card-body h3 {
    margin: 0 0 10px;
    font-size: 15px;
    color: #003a63;
}

.mc-card-body p {
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
    color: #444;
    flex: 1;
}

.mc-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d3e6e;
    height: 44px;
    flex-shrink: 0;
    text-decoration: none;
}

.mc-card-footer span {
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.mc-card-footer-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #999;
    height: 44px;
    flex-shrink: 0;
}

.mc-card-footer-disabled span {
    color: white;
    font-weight: 600;
    font-size: 14px;
}


/* ============================================================
   FAQ GRID
   (2-column grid for FAQ cards)
   ============================================================ */

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}


/* ============================================================
   TRUST BUTTON
   (Blue pill-shaped button — "Read More Testimonials")
   ============================================================ */

.trust-btn {
    background: #0d3d6e;
    color: #fff;
    border-radius: 999px;
    height: 42px;
    border: 1px solid #0d3d6e;
    box-sizing: border-box;
    display: table;
    width: 100%;
    text-decoration: none;
    transition: transform 0.2s;
}

.trust-btn span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    padding: 0 12px;
}


/* ============================================================
   FINAL CTA SECTION
   (Dark blue full-width closing CTA at bottom of page)
   ============================================================ */

.final-cta {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #003a63;
    padding: 60px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    text-align: center;
}

.final-cta h2 {
    color: #ffffff;
    font-size: 34px;
    margin: 0 0 16px 0;
}

.final-cta p {
    color: #cce0f5;
    font-size: 18px;
    margin: 0 0 32px 0;
}


/* ============================================================
   FLOATING PANEL / FAB DEMO BUTTON
   (Fixed right-side panel + mobile bottom sheet)
   ============================================================ */

.ewo-panel {
    position: fixed;
    top: 120px;
    right: 0;
    width: 310px;
    z-index: 99999;
    display: none;
    transition: transform .35s ease;
}

.ewo-panel.tab-only {
    transform: translateX(310px);
}

.ewo-panel-tab {
    position: absolute;
    left: -38px;
    top: 40px;
    width: 38px;
    background: #FF5421;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-family: Arial, sans-serif;
    cursor: pointer;
    border-radius: 8px 0 0 8px;
    padding: 14px 8px;
    writing-mode: vertical-rl;
    transform: rotate(0deg);
    letter-spacing: .5px;
    user-select: none;
    box-shadow: -3px 0 8px rgba(0,0,0,.15);
}

.ewo-panel-body {
    background: #fff;
    border: 1px solid #ccd6e0;
    border-right: none;
    border-radius: 10px 0 0 10px;
    box-shadow: -4px 0 20px rgba(0,0,0,.12);
    overflow: hidden;
    padding: 10px 12px 8px;
}

.ewo-mob-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #FF5421;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 800;
    font-family: Arial, sans-serif;
    cursor: pointer;
    z-index: 99999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.ewo-mob-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999998;
    display: none;
    align-items: flex-end;
}

.ewo-mob-overlay.open {
    display: flex;
}

.ewo-sheet-inner {
    background: #fff;
    width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 88vh;
    overflow-y: auto;
    padding-bottom: 24px;
}

.ewo-sheet-header {
    background: #003a63;
    border-radius: 18px 18px 0 0;
    padding: 16px;
    text-align: center;
    position: relative;
}

.ewo-sheet-header div {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    font-family: Arial, sans-serif;
}

.ewo-sheet-header button {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}


/* ============================================================
   TESTIMONIALS
   (Testimonial Pro / Swiper plugin overrides)
   ============================================================ */

.testi-wrap {
    padding: 0 320px 0 180px;
}

.sp-testimonial-pro-item.swiper-slide {
    width: 247px;
    margin-right: 20px;
}

.blue-outline {
    text-align: center;
}


/* ============================================================
   THANK-YOU PANELS
   (Hidden confirmation panels after form submission)
   ============================================================ */

[id$="_thanks"] {
    display: none;
}


/* ============================================================
   BUTTONS — ORANGE & BLUE, ALL SIZES
   Usage: <a href="/" class="btn btn-orange-lg">Text</a>
   Sizes: -sm / -md / -md-fluid (grows with text) / -lg
   ============================================================ */

.btn {
    display: inline-block;
    font-family: Arial, sans-serif;
    font-weight: 800;
    text-decoration: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.btn:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.btn-orange-sm {
    background: #FA572A;
    color: #ffffff;
    padding: 10px 24px;
    font-size: 14px;
    border-radius: 8px;
}

.btn-orange-md {
    background: #FA572A;
    color: #ffffff;
    padding: 14px 36px;
    font-size: 18px;
    border-radius: 10px;
}

.btn-orange-md-fluid {
    background: #FA572A;
    color: #ffffff;
    padding: 14px 28px;
    font-size: 18px;
    border-radius: 10px;
    white-space: normal;
    width: auto;
}

.btn-orange-lg {
    background: #FA572A;
    color: #ffffff;
    padding: 18px 50px;
    font-size: 22px;
    border-radius: 12px;
}

.btn-blue-sm {
    background: #0D3D63;
    color: #ffffff;
    padding: 10px 24px;
    font-size: 14px;
    border-radius: 8px;
}

.btn-blue-md {
    background: #0D3D63;
    color: #ffffff;
    padding: 14px 36px;
    font-size: 18px;
    border-radius: 10px;
}

.btn-blue-md-fluid {
    background: #0D3D63;
    color: #ffffff;
    padding: 14px 28px;
    font-size: 18px;
    border-radius: 10px;
    white-space: normal;
    width: auto;
}

.btn-blue-lg {
    background: #0D3D63;
    color: #ffffff;
    padding: 18px 50px;
    font-size: 22px;
    border-radius: 12px;
}

.btn-orange-sm:hover,
.btn-orange-md:hover,
.btn-orange-md-fluid:hover,
.btn-orange-lg:hover {
    background: #e04a22;
    color: #ffffff;
}

.btn-blue-sm:hover,
.btn-blue-md:hover,
.btn-blue-md-fluid:hover,
.btn-blue-lg:hover {
    background: #0a2f4d;
    color: #ffffff;
}


/* ============================================================
   MODAL / OVERLAY CLOSE BUTTON
   ============================================================ */

.ewo-modal button.ewo-close-btn,
.ewo-overlay button {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}


/* ============================================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ============================================================ */

@media (max-width: 1024px) {
    .ew-hero-container {
        padding: 20px 40px;
        margin-top: -40px;
    }

    .testi-wrap {
        padding: 0 60px;
    }
}
#ewoSection2 .ew-row { padding: 0 20px; box-sizing: border-box; } 
#ewoSection2 .ew-card-wrap { flex: 1 1 0; min-width: 0; } 
#ewoSection2 { padding-left: 20px; padding-right: 20px; }

/* ============================================================
   RESPONSIVE — DESKTOP PANEL (max-width: 900px)
   ============================================================ */

@media (max-width: 900px) {
    .ewo-panel {
        display: none !important;
    }

    .ewo-mob-btn {
        display: block !important;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {

    /* Hero */
    .ew-hero-container {
        padding: 20px 20px 30px;
        margin-top: 0;
        flex-direction: column;
    }

    .ew-hero-container h2.main-header {
        font-size: 28px;
    }

    .ew-hero-container p,
    .ew-hero-container p.ew-subheading {
        font-size: 16px;
    }

    .ew-hero-container a.ew-cta-btn,
    .entry-content a.ew-cta-btn {
        font-size: 18px;
        padding: 12px 28px;
    }

    .ew-hero-text {
        min-width: 100%;
        padding: 0;
    }

    /* Video */
    .video-container {
        max-width: 100%;
        padding: 0 10px;
    }

    /* Main section */
    .main-section {
        padding: 30px 20px !important;
    }

    /* Cards */
    .card-container {
        min-width: 100% !important;
        flex: 1 1 100% !important;
        margin-bottom: 20px;
    }

    .ew-row,
    .ew-row-wide {
        flex-direction: column;
        align-items: center;
    }

    .ew-card-wrap {
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 20px !important;
    }

    /* Image wraps */
    .religious-image-wrap,
    .healthcare-image-wrap,
    .lab-image-wrap,
    .laundry-image-wrap,
    .warehouse-image-wrap,
    .restaurant-image-wrap,
    .nonprofit-image-wrap,
    .tourist-image-wrap,
    .gov-image-wrap,
    .hosp-image-wrap,
    .retail-image-wrap,
    .property-image-wrap,
    .hvac-image-wrap {
        width: 100% !important;
    }

    /* Stars and logos */
    .loved-by-section {
        margin-top: 12px;
        flex-direction: column;
        gap: 6px;
    }

    .loved-by-section .stars {
        font-size: 24px;
    }

    .loved-by-section .label {
        font-size: 18px;
    }

    .review-logos {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .review-logos img {
        height: 32px !important;
        width: auto !important;
        max-width: 120px !important;
        object-fit: contain !important;
    }

    /* Testimonials */
    .testi-wrap {
        padding: 0 20px;
    }

    /* Stats */
    .stat-item {
        min-width: 100%;
    }

    .stat-strip {
        padding: 30px 20px;
    }

    /* FAQ */
    .faq-grid {
        grid-template-columns: 1fr !important;
    }

    /* Maintenance center cards */
    .mc-card {
        max-width: 100% !important;
        min-width: 100% !important;
    }

    /* Final CTA */
    .final-cta {
        padding: 40px 20px;
    }

    /* Section 7 */
    .section-white-padded {
        padding: 30px 20px;
    }

    .section7-intro {
        flex-direction: column;
        gap: 24px;
    }

    .section7-text,
    .section7-image {
        min-width: 100%;
    }

    .section7-image img {
        max-width: 100%;
    }

    /* Buttons */
    .btn-orange-lg,
    .btn-blue-lg {
        font-size: 18px;
        padding: 14px 28px;
    }

    .btn-orange-md,
    .btn-orange-md-fluid,
    .btn-blue-md,
    .btn-blue-md-fluid {
        font-size: 16px;
        padding: 12px 22px;
    }

    .btn-orange-sm,
    .btn-blue-sm {
        font-size: 13px;
        padding: 9px 18px;
    }
}


/* ============================================================
   RESPONSIVE — SMALL MOBILE (max-width: 640px)
   ============================================================ */

@media (max-width: 640px) {

    /* Process steps */
    .process-box {
        padding: 20px;
    }

    .process-step-blue,
    .process-step-red,
    .process-step-green {
        font-size: 13px;
        padding: 10px 16px;
    }

    /* Card containers */
    .card-container {
        flex: 1 1 100% !important;
    }
}


/* ============================================================
   RESPONSIVE — EXTRA SMALL MOBILE (max-width: 480px)
   ============================================================ */

@media (max-width: 480px) {

    .ew-hero-container h2.main-header {
        font-size: 24px;
    }

    .ew-hero-container a.ew-cta-btn,
    .entry-content a.ew-cta-btn {
        font-size: 16px;
        padding: 10px 20px;
        width: 100%;
        text-align: center;
    }

    .process-arrow {
        font-size: 18px;
    }

    .mc-card {
        flex: none !important;
        width: calc(100% - 40px) !important;
    }
}