/* mobile */
@media (max-width: 575.98px) {
    /* SECTION A -- NAVBAR AND BANNER */
    .height-80 {
        height: fit-content;
    }

    .save-message {
        width: fit-content;
        position: relative;
        top: 0;
        left: 0;
        margin-top: 1.7rem;
    }

    .message {
        position: relative;
        top: 20px;
    }

    .p-me {
        padding-right: 0 !important;
    }

    .d-me {
        position: relative;
        justify-content: start;
        left: 1rem;
    }

    .card-features2 {
        height: fit-content !important;
    }
    /* AKHIR SECTION A -- NAVBAR AND BANNER */

    .w-offer-text{
        width: 100%;
    }

    .w-andrew{
        width: 90%;
    }

    .w-daniel{
        width: 85%;
    }

    .w-mark{
        width: 80%;
    }

    .card-about{
        width: 85%;
        margin: 0 2rem 2rem 2rem;
    }
    .ms-card-about{
        left: 0;
    }
}

/* mobile 2 */
@media (max-width: 767.98px) {
    .height-80 {
        height: fit-content;
    }

    .save-message {
        width: fit-content;
        position: relative;
        top: 0px;
        left: 0;
        margin-top: 1.7rem;
    }

    .message {
        position: relative;
        top: 20px;
    }

    .card-features2 {
        height: fit-content !important;
    }

    .p-me {
        padding-right: 0 !important;
    }

    .d-me {
        position: relative;
        justify-content: start;
        left: 1rem;
    }
    .w-offer-text{
        width: 100%;
    }
    .w-andrew{
        width: 90%;
    }

    .w-daniel{
        width: 85%;
    }
    .w-mark{
        width: 80%;
    }
    .card-about{
        width: 85%;
        margin: 0 2rem 2rem 2rem;
    }
    .ms-card-about{
        left: 0;
    }
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .height-80 {
        height: fit-content;
    }

    .w-offer-text{
        width: 100%;
    }
    .w-andrew{
        width: 90%;
    }
    .w-daniel{
        width: 85%;
    }
    .w-mark{
        width: 80%;
    }

    .card-features2 {
        height: fit-content !important;
    }
    .card-about{
        width: 85%;
        margin: 0 2rem 2rem 2rem;
    }
    .ms-card-about{
        left: 0;
    }
    /* SECTION D -- FOOTER AND SIGN UP */
    .p-me {
        padding-right: 0 !important;
    }
    /* mengatur margin top pada judul footer */
    .title-footer {
        margin-top: 20px;
        text-align: center;
    }
    /* mengatur aligning pada konten footer agar berada di tengah pada saat lebar browser dikecilkan */
    .content-footer ul li a {
        text-align: center;
    }
    /* mengatur padding pada footer */
    .footer-links {
        padding: 120px;
        color: var(--primary-me);
    }
    /* mengatur lebar form input ketika tampilan mobile agar tidak over */
    .input-form input {
        width: 80%;
    }

    /* AKHIR SECTION D -- FOOTER AND SIGN UP */
}