/* ! *********************************** */
/*! Below 1200px  */
/* !1200px/16 = 75em */
/* ! *********************************** */

@media (max-width: 75em) {
    /* !====================================================== */
    /*!===================== banner =========================  */
    /* !====================================================== */

    .banner {
        display: flex;
        /* padding: 3.5rem 2rem 0rem 7rem; */
    }

    .banner .c1 .content h1 {
        font-size: 4.2rem;
        line-height: 5.3rem;
    }

    .banner .c1 .content p {
        font-size: 1.6rem;
        line-height: 3.1rem;
    }
    .banner .c1 .content a {
        font-size: 1.4rem;
        line-height: 2.4rem;
        padding: 1.6rem 2.3rem;
    }

    /* !====================================================== */
    /*!===================== Form ===========================  */
    /* !====================================================== */

    .form .c1 {
        padding: 0 7rem;
    }
    .form .c1 h1 {
        font-size: 4rem;
        line-height: 5.3rem;
    }

    .form .c1 p {
        font-size: 1.4rem;
        line-height: 2.5rem;
    }
    .footer h1 {
        font-size: 2.5rem;
        line-height: 3.5rem;
    }

    /* !====================================================== */
    /*!===================== Footer =========================  */
    /* !====================================================== */

    .footer {
        margin: 7.5rem 10rem 6rem 10rem;
    }

    .footer .socials img {
        width: 3rem;
        height: 2.5rem;
    }
}

/* ! *********************************** */
/*! Below 1024px  */
/* ! 1024px/16 = 64em */
/* ! *********************************** */
@media (max-width: 64em) {
    /* !====================================================== */
    /*!===================== banner =========================  */
    /* !====================================================== */

    .banner .c1 .content h1 {
        font-size: 3.2rem;
        line-height: 4.3rem;
    }

    /* !====================================================== */
    /*!===================== Form ===========================  */
    /* !====================================================== */

    .form .c1 h1 {
        font-size: 3rem;
        line-height: 4.3rem;
    }
}

/* ! *********************************** */
/*! Below 850px  */
/* ! 850px/16 = 53.125em */
/* ! *********************************** */

@media (max-width: 53.125em) {
    /* !====================================================== */
    /*!===================== banner =========================  */
    /* !====================================================== */

    .banner {
        display: flex;
        /* padding: 3.5rem 1rem 0rem 5rem; */
    }

    /* !====================================================== */
    /*!===================== Form ===========================  */
    /* !====================================================== */
    .form .c1 {
        padding: 0 5rem;
    }
    /* !====================================================== */
    /*!===================== footer =========================  */
    /* !====================================================== */

    .footer {
        margin: 7.5rem 5rem 6rem 5rem;
    }
    .footer h1 {
        font-size: 2.1rem;
        line-height: 3.1rem;
    }
}