/* ============== 344px to 360px (Mobile to Tablet Portrait) ============== */
@media (min-width: 170px) and (max-width:360px) {
    .add-btn {
        font-size: 14px;
    }

    .badge {
        display: none;
    }


    .main-card {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 60px;
    }

}


/* ============== 344px to 360px (Mobile to Tablet Portrait) ============== */
@media (min-width: 344px) and (max-width:360px) {

    .forgot-card {
        width: 350px;
    }

    .reset-password-card {
        padding: 40px 30px;
        width: 350px;

    }


    img.right-arrow {
        display: none;
    }

    .card {
        padding: 25px 20px 20px 53px;
        margin-top: 60px;
    }

    .card-img {
        height: 80px;
        width: 80px;
        left: -5px;
    }

    p {
        font-size: 16px;
        margin-bottom: 0px;
    }

    .pricing-table th {
        background-color: #ffffff;
        font-size: 11px;
    }

    .pricing-table th,
    .pricing-table td {
        padding: 5px;
    }


    .price {
        font-size: 14px;
    }


    .login-card {
        padding: 40px 30px;
        width: 350px;
    }



    /* footer-navbar */
    button.btn.btn-primary {
        float: inline-end;
        padding: 4px 10px;
        margin-top: -20px;
    }

    .alert.alert-warning.alert-dismissible.fade.show p {
        font-size: 14px;
    }

    .main-card {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 60px;
    }

}



/* ============== 360px to 768px (Mobile to Tablet Portrait) ============== */
@media (min-width: 360px) and (max-width: 767px) {


    .login-card {
        padding: 40px 30px;
        width: 350px;
    }

    .reset-password-card {
        padding: 40px 30px;
        width: 330px;
    }

    .forgot-card {
        width: 330px;
    }

    a.btn p {
        font-size: 14px;
    }

    img.right-arrow {
        position: absolute;
        top: 0;
        right: -30%;
        width: 230px;
        display: none;
    }

    .card {
        padding: 25px 20px 20px 53px;
        margin-top: 60px;
    }

    .card-img {
        height: 80px;
        width: 80px;
        left: -5px;
    }

    .pricing-table th {
        background-color: #ffffff;
        font-size: 11px;
    }

    .pricing-table th,
    .pricing-table td {
        padding: 5px;
    }



    .price {
        font-size: 14px;
    }

    /* dashboard */
    .badge {
        left: 12%;
    }

    .content h1 {
        font-size: 22px;
        font-weight: 700;
        color: white;
        margin-bottom: 0px;
    }


    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        height: 90%;
        line-height: 1.4;
        padding: 0px 20px 20px;
        position: absolute;
        text-align: center;
        width: 100%;
        z-index: 9;
        justify-content: center;
    }

    .photo-wall-qr img {
        width: 100% !important;
    }

    /* end dashboard */

    /* media */

    a.btn.upload-photo {
        font-size: 12px;
        font-weight: 700;
        padding: 10px 10px;
    }

    a.btn.upgrade {
        font-size: 12px;
    }

    .tab-buttons .btn {
        border-radius: 25px;
        margin-right: 5px;
        font-size: 14px;
        padding: 5px 10px;
    }

    .main-card {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 60px;
    }

}

@media (min-width: 600px) and (max-width: 767px) {
    a.btn p {
        font-size: 14px;
    }

    img.right-arrow {
        position: absolute;
        top: 0;
        right: -30%;
        width: 230px;
        display: none;
    }

    .main-card {
        display: block;
    }

    .card {
        padding: 25px 20px 20px 53px;
        margin-top: 60px;
    }

    .card-img {
        height: 80px;
        width: 80px;
        left: -5px;
    }

    .login-card {
        padding: 40px 30px;
        width: 350px;
    }

    .main-card {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 60px;
    }
}



/* ============== 768px to 991px (Tablet Landscape) ============== */
@media (min-width: 768px) and (max-width: 991px) {

    .login-card {
        padding: 40px 30px;
        width: 400px;
    }

    .card-img {
        height: 80px;
        width: 80px;
        left: -20px;
    }

    .card {
        padding: 25px 20px 20px 30px;
    }

    .feature-card {
        padding: 15px;
    }



    .feature-card h5 {
        font-size: 14px;
    }

    .feature-card p {
        font-size: 14px;
    }

    img.right-arrow {
        position: absolute;
        top: 10%;
        right: -28%;
        width: 95px;
        z-index: 9;
    }

    .price {
        font-size: 28px;
    }

    .price small {
        font-size: 14px;
    }

    .features li {
        margin-bottom: 8px;
        font-size: 13px;
        line-height: 1.4;
    }

    .btn-select {
        padding: 10px 14px;
    }

    .content-div h6 {
        margin: 15px 0;
        font-size: 16px;
    }

    .content-div {
        padding: 0px;
        gap: 10px;
    }

}

/* ============== 991px to 1200px (Small Desktops) ============== */
@media (min-width: 992px) and (max-width: 1200px) {
    .card-img {
        height: 80px;
        width: 80px;
        left: -15px;
    }

    img.right-arrow {
        position: absolute;
        top: 0;
        right: -30%;
        width: 150px;
    }

    .features li {
        margin-bottom: 12px;
        font-size: 16px;
        line-height: 1.2;
    }
}