@media screen and (max-width: 991px) {
    .desktop-max-width {
        max-width: 100%;
        padding: 0rem 2.4rem;
    }

    html {
        font-size: 60%;
    }

    .content__container {
        gap: 4rem;
    }

    .rever__col {
        flex-direction: column-reverse;
    }

    .normal__col {
        flex-direction: column;
    }

    .payment__container {
        flex-direction: column;
    }

    .stripe__heading {
        justify-content: center;
        flex-direction: column;
    }

    .stripe__heading .secondary__btn {
        margin: initial;
        margin-bottom: 4.8em;
    }

    .banner__heading {
        font-size: 6.4rem;
    }

    /* about us page */
    .about__page__container {
        flex-direction: column;
    }

}



@media screen and (max-width: 768px) {
    .stats__container {
        align-items: center;
        flex-direction: column;
        gap: 3.2rem;
    }

    .content__image {
        width: 80%;
    }

    .stripe__heading .section__heading__left {
        text-align: center;
    }

    .payment__container {
        gap: 8rem;
    }

    .blog__text {
        max-width: 100%;
    }

    /* about us page */
    .offering__box {
        gap: 2.4rem;

    }
}


@media screen and (max-width: 450px) {
    html {
        font-size: 55%;
    }

    #hero {
        background: url(../assets/hero/hero_image_2.webp) no-repeat center center/cover;
        height: calc(100vh + 10rem);
    }

    .hero__content__box {
        width: 100%;
    }

    .hero__title {
        font-family: var(--primary-typeface);
        font-size: 1.6rem;
        font-weight: 200;
        line-height: 150%;
        letter-spacing: 1px;
        color: var(--primary-color);
        margin: initial;
    }

    .hero__heading {
        font-family: var(--primary-typeface);
        font-size: 5.6rem;
        font-weight: 700;
        line-height: 115%;
        color: var(--normal-white);
    }

    .fitness__badge {
        width: 14rem;
        height: auto;
        object-fit: contain;
    }

    .hero__para {
        font-family: var(--primary-typeface);
        font-size: 1.6rem;
        font-weight: 300;
        line-height: 150%;
        color: var(--normal-white);
    }

    .content__image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .cardio__head__mobile {
        display: block;
    }

    .cardio__head__desktop {
        display: none;
    }

    .page__btn {
        padding: .8rem 1.2rem;
    }

    .page__num a {
        padding: .8rem 1.2rem;
    }

    .payment__container {
        gap: 4rem;
    }

    .footer__menu__title {
        font-size: 1.8rem;
    }

    .footer__link {
        font-size: 1.6rem;
    }

    .footer__container {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        grid-column-gap: 4rem;
        grid-row-gap: 4.8rem;
        place-items: left;
    }

    .copyright__container {
        justify-content: initial;
        flex-direction: column;
        gap: 1.6rem;
    }

    .blog__listing__container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /* about us page */
    .hero__para {
        font-size: 1.8rem;
    }

    .about__page__image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .who__para {
        max-width: 100%;
        font-size: 1.8rem;
    }

    .offering__image {
        max-width: 95%;
        margin: 0rem auto;
    }

    .commitment__container {
        background: url(../assets/about__us__page/commitment__bg.png) no-repeat center center/cover;

        padding: 10rem 2rem;
        border-radius: 2.4rem;
        outline: 2.4px solid hsla(73, 79%, 78%, 0.72);
    }

    .commitment__heading {
        margin-bottom: 3.2rem;
        font-size: 5rem;
    }

    .commitment__para {
        max-width: 100%;
    }

    /* signup page */
    .signup-email-field {
        width: 100%;
    }
    .signup__container h2 {
        font-size: 4.2rem !important;
    }

    .signup__container h2 span {
        font-size:  6.4rem !important;
    }
}