/* ==========================================================
   Homepage responsive rules (loaded after home.css)
   Common typography sizes live in responsive.css (body.redesign)
   ========================================================== */

/* process steps: staggered cards on desktop */
@media (min-width: 1200px) {
    .process-section .steps > div:nth-child(2) { margin-top: 30px; }
    .process-section .steps > div:nth-child(3) { margin-top: 60px; }
    .process-section .steps > div:nth-child(4) { margin-top: 90px; }
    .process-section .steps > div:nth-child(5) { margin-top: 120px; }
}

@media (max-width: 1599.98px) {
    .process-section .step .arrow {
        right: -42px;
    }
}

@media (max-width: 1199.98px) {
    .testimonials-section .owl-item.center {
        transform: scale(1.1);
    }
}

@media (max-width: 991.98px) {
    .home-hero {
        margin-bottom: 60px;
    }
    .home-hero .benefit + .benefit {
        border-left: 0;
    }
    .home-hero .suppliers {
        margin-bottom: -60px;
    }
    .about-section {
        padding: 90px 0 60px;
    }
}

@media (max-width: 767.98px) {
    .testimonials-section .owl-item.center {
        transform: none;
    }
    .testimonials-section .review,
    .testimonials-section .name {
        opacity: 1;
    }
    .testimonials-section .review {
        -webkit-line-clamp: unset;
    }
    .testimonials-section .heading-area::before {
        width: 260px;
        height: 260px;
    }
}