@media (max-width: 991px) {

    .cta-flex a span {
        display: none;
    }

    .hero-section-flex {
        gap: 3rem;
    }

    .hero-flex-inner {
        flex-basis: 100%;
    }

    .formContainer {
        width: 100%;
        max-width: 650px;
    }

    .inner-box {
        flex-basis: calc(33.3% - 1rem);
    }

    .card-box h3 {
        font-size: 2rem;
    }
}

@media (max-width: 786px) {

    .formContainer {
        max-width: 100%;
    }

    .inner-box {
        flex-basis: calc(50% - 1rem);
    }
}

@media (max-width: 576px) {

    .logo img {
        width: 150px;
    }

    .hero-cta-flex {
        flex-wrap: wrap;
    }

    .hero-cta-flex a {
        flex-basis: 100%;
    }

    .icon-flex {
        flex-direction: column;
        align-items: flex-start;
    }


    .close-popup {
        right: 5%;
        top: -50px;
    }

    .inner-box,
    .pointerflex li {
        flex-basis: 100%;
    }

    .card-box h3 {
        top: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        display: grid;
        place-content: center;
        background: linear-gradient(180deg, rgba(255, 180, 120, 0.18) 0%, rgba(255, 200, 150, 0.08) 35%, #000000c0 100%);
        color: var(--color-white);
    }

    .card-box h3,
    .review-content h4 {
        font-size: 3rem;
    }

    .flex-box {
        gap: 2rem;
    }

    .review-content p {
        font-size: 1.6rem;
    }

    .timeline::after {
        left: 20px;
    }

    .timeline-box {
        width: 100%;
        padding-left: 40px;
        padding-right: 10px;
    }

    .left,
    .right {
        left: 0;
        text-align: left;
    }

    .left::after,
    .right::after {
        left: 12px;
        right: auto;
    }

    .left .content {
        text-align: start;
    }

}