/* ==========================================================================
   Feature page UI screenshots — landscape captures need wider columns
   Old blob mockups were tall composites; raw screenshots are ~2:1 ratio.
   ========================================================================== */

.generic-services.hp-services-row5 .col-left img,
.generic-services.hp-services-row6 .col-left img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

.entrepreneurs-row .col-left img,
.entrepreneurs-row .col-right img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 36px rgba(29, 65, 98, 0.12);
}

@media screen and (min-width: 992px) {
    .generic-services.hp-services-row5,
    .generic-services.hp-services-row6 {
        align-items: center;
        gap: 24px;
    }

    .generic-services.hp-services-row5 .col-left,
    .generic-services.hp-services-row6 .col-left {
        width: 62% !important;
        flex: 1 1 62%;
        max-width: 720px;
        padding: 40px 16px 40px 30px !important;
    }

    .generic-services.hp-services-row5 .col-right,
    .generic-services.hp-services-row6 .col-right {
        width: 34% !important;
        flex: 1 1 34%;
        padding: 40px 30px 40px 0 !important;
    }

    .entrepreneurs-row .row {
        align-items: center;
        gap: 20px;
    }

    .entrepreneurs-row .col-left,
    .entrepreneurs-row .col-right {
        width: 50%;
    }
}

@media screen and (max-width: 991px) {
    .generic-services.hp-services-row5 .col-left,
    .generic-services.hp-services-row6 .col-left {
        width: 100% !important;
        padding: 0 20px 24px !important;
    }

    .generic-services.hp-services-row5 .col-right,
    .generic-services.hp-services-row6 .col-right {
        width: 100% !important;
        padding: 0 20px 32px !important;
    }

    .entrepreneurs-row .col-left img,
    .entrepreneurs-row .col-right img {
        margin-bottom: 24px;
    }
}
