@media (max-width: 991px) {
    .hero-section {
        padding: 120px 0 80px
    }

    .hero-actions {
        flex-direction: column
    }

    .stats-section {
        margin-top: 0;
        padding-top: 60px
    }

    .process-step, .process-step.reverse {
        grid-template-columns:1fr;
        gap: 25px
    }

    .process-step.reverse .process-img {
        order: 0
    }

    .flow-box {
        flex-direction: column
    }

    .flow-arrow {
        transform: rotate(90deg)
    }

    .loop-card {
        flex-direction: column
    }

    .loop-arrow {
        transform: rotate(90deg)
    }
}

@media (max-width: 576px) {
    .navbar-brand img {
        height: 46px
    }

    .hero-title {
        font-size: 38px
    }

    .hero-text, .page-hero p {
        font-size: 16px
    }

    .page-hero {
        padding: 135px 0 75px
    }

    .section-padding, .story-section, .supply-section, .why-section, .machine-section, .sources-section, .timeline-section, .quality-section, .contact-section, .circular-section, .carbon-section, .pollution-section, .applications-section {
        padding: 70px 0
    }

    .premium-image img, .process-img img {
        height: 300px
    }

    .process-content h3 {
        font-size: 30px
    }

    .card-body-premium {
        padding: 24px
    }
}