/* ! *********************************** */
/*! Below 768px  */
/* ! 768px/16 = 48em */
/* ! *********************************** */

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

    .banner {
        flex-direction: column;
        /* padding: 4rem 3rem 0 3rem; */
    }

    .banner .desktop {
        display: none;
    }
    .banner .mobile {
        display: flex;
    }

    .banner .c1 .logo img {
        width: 5rem;
        height: 5rem;
        object-fit: contain;
    }
    .banner .c1 {
        width: 100%;
    }
    .banner .c2 {
        width: 100%;
    }

    .banner .c1 .content h1 {
        font-size: 2.6rem;
        line-height: 3.7rem;
    }

    .banner .c1 .content p {
        font-size: 1.4rem;
        line-height: 2.9rem;
    }

    .banner .c1 .content a {
        font-size: 1.2rem;
        line-height: 2.2rem;
        padding: 0.8rem 1.6rem;
    }
    /* !====================================================== */
    /*!===================== Form ============================  */
    /* !====================================================== */

    .form {
        flex-direction: column;
    }
    .form .c1 {
        width: 100%;
        padding: 7rem 3rem;
    }
    .form .c2 {
        width: 100%;
        height: 150rem;
        padding: 7rem 0 0rem 0;
    }
    .form .c1 h1 {
        font-size: 2.6rem;
        line-height: 3.7rem;
    }

    .form .c1 .bg {
        display: none;
    }

    /* !====================================================== */
    /*!===================== footer ============================  */
    /* !====================================================== */

    .footer {
        flex-direction: column;
        margin: 7.5rem 3rem 6rem 3rem;
        padding: 3rem 3rem;
        gap: 3.5rem;
    }

    .footer h1 {
        font-size: 1.8rem;
        line-height: 2.8rem;
    }
    .copyRights h1 {
        font-size: 1rem;
        line-height: 2rem;
    }
    .footer .socials img {
        width: 2rem;
        height: 1.7rem;
    }
}

/* ! *********************************** */
/*! Below 600px  */
/* ! 600px/16 = 37.5em */
/* ! *********************************** */

@media (max-width: 37.5em) {
}

/* ! *********************************** */
/*! Below 480px  */
/* ! 480px/16 = 30em */
/* ! *********************************** */

@media (max-width: 30em) {
}

/* ! *********************************** */
/*! Below 375px  */
/* ! 375px/16 = 23.43em */
/* ! *********************************** */

@media (max-width: 23.43em) {
}