/* Override the default hero section height to be exactly 702px */
  .hero-section {
    height: 702px !important;
    min-height: 702px !important;
}
.hero-bg {
    height: 702px !important;
    min-height: 702px !important;
}
.hero-content {
    height: 702px !important;
    padding-top: 0px !important;
}
.hero-content .row {
    min-height: 702px !important;
}


.benefit-image {
    width: 100%;
    height: 400px;
    overflow: hidden;
}



/* ==================== CTA Section ==================== */
.cta-section {

    background-size: cover;
    background-position: center;
    position: relative;
    padding: 5rem 0;
}

/* ==================== Mobile Column Reordering ==================== */
@media (max-width: 991.98px) {
    .hero-section {
        height: 502px !important;
        min-height: 502px !important;
    }
    .hero-bg {
        height: 502px !important;
        min-height: 502px !important;
    }

    .hero-content .row {
        min-height: 502px !important;
    }


    .hero-content {
        height: 502px !important;
        padding-top: 80px !important;
    }


    /* Apply to all sections with aligned rows */
    section .row.align-items-center {
        display: flex;
        flex-direction: column;
    }
    
    /* When text is first, image is second - swap them */
    section .row.align-items-center .col-lg-6:first-child:not(:has(.benefit-card)):not(:has(.benefit-image)) {
        order: 2;
    }
    
    section .row.align-items-center .col-lg-6:last-child:has(.benefit-card),
    section .row.align-items-center .col-lg-6:last-child:has(.benefit-image) {
        order: 1;
    }
    
    /* When image is first, keep it first (no change needed for those) */
    section .row.align-items-center .col-lg-6:first-child:has(.benefit-card),
    section .row.align-items-center .col-lg-6:first-child:has(.benefit-image) {
        order: 1;
    }
    
    section .row.align-items-center .col-lg-6:last-child:not(:has(.benefit-card)):not(:has(.benefit-image)) {
        order: 2;
    }


    .py-5 {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
}