@media only screen and (min-width: 0px) and (max-width: 767px) {
    .black-modal {
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.06);
        position: fixed;
    }

    .width-70 {
        width: 100% !important;
    }

    #delete_pay_method {
        width: 100%;
    }

    #subscribed_card_number {
        display: block;
    }

    #card_logo {
        height: 15px;
    }

    #btn_delete_method {
        width: 100%;
        height: 5rem;
        padding: 6px 12px;
    }

    .header {
        padding: 0 3rem;
    }

    .button_cont {
        position: fixed;
        right: -50%;
        top: 7.8rem;
        display: flex !important;
        flex-direction: column;
        padding: 3rem 1rem;
        background: #2dd4ac;

        height: 100% !important;
        z-index: 9999;

        justify-content: end !important;
    }

    .button_cont button:last-child {
        margin-left: 0;
        margin-top: 2rem;
    }

    .button_cont button {
        background: white;
        border-color: transparent;
    }

    .cont_section {
        padding: 3rem;
    }

    .section {
        padding: 6.6rem 2.5rem;
    }

    .button_payment {
        width: 100%;
        font-size: 1.2rem;
    }

    .sec_2 h1 {
        font-size: 1.5rem;
    }

    .pay_method {
        display: block;
    }

    .input-group {
        width: 100%;
        padding: 1.8rem;
        display: block;
        border-width: 0;
        font-family: Rubik;
        font-size: 1.2rem;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: -0.1px;
        color: #474c4f;
    }

    .input-group p {
        padding: 0.5rem;
    }

    .inputs_2 {
        font-size: 1.2rem;
    }

    .total {
        text-align: center;
    }

    .button_paymant_2 {
        width: 100%;
    }

    .button_hamburger {
        display: block;
    }

    .hamburger--collapse_modification {
        padding: 0;
    }

    .hamburger_box_modification,
    .hamburger_modification,
    .hamburger_modification::after,
    .hamburger_modification::before {
        width: 3.6rem;
    }

    #exampleModal .modal-content-modificaition {
        overflow: scroll;
    }

    #exampleModal .modal-dialog {
        width: auto;
    }

    /* #greenContainer #paymentSuccess {
        font-size: 23px !important;
    } */

    #makePay .modal-dialog {
        width: auto;
        height: -webkit-fill-available;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 500px;
        margin: auto;
    }

    #centerArea {
        height: 150px;
    }

    #centerArea .date,
    #centerArea .card {
        padding: 10px 20px;
    }

    #bottomArea .btn {
        height: 50px;
    }

    /* #makePay .modal-body {
        height: 800px;
    }

    #makePay .modal-content {
        overflow: scroll;
    }

    #centerArea {
        width: 280px;
        top: 30%;
    }

    #bottomArea {
        margin-top: 50%;
    }

    #bottomArea .btn {
        width: 270px;
    } */
}

@media (max-width: 320px) {
    #centerArea {
        top: 28%;
    }

    #centerArea,
    #bottomArea .btn,
    #greenContainer .btn,
    #form_add_card .btn {
        width: 290px;
    }

    /* #bottomArea {
        margin-top: 60%;
    } */
}