@media (max-width: 1399.98px) {
    /* Upcoming Booking Page */
    .booking-form .w-20{
        width: calc(25% - 12px);
    }
}

@media (max-width: 1199.98px) {
    /* Overview Page  */
    .main-part .show-sidebar{
        display: flex;
    }
    .close-sidebar{
        display: block;
    }
    .main-part{
        padding-left: 32px;
    }
    .sidebar{
        left: -220px;
    }
    .sidebar.show{
        left: 0px;
    }
}

@media (max-width: 991.98px) {
    /* Overview Page */
    .logo {
        margin: 24px auto 27px;
    }
    .logo img {
        max-width: 58px;
    }
    .overview-cards .card{
        min-width: 216px;
        padding: 16px;
    }

    /* Login Page */
    .login-section {
        flex-direction: column-reverse;
        padding: 24px;
    }

    .login-section .login-bg {
        width: 100%;
        position: fixed;
        inset: 0;
        z-index: -1;
    }

    .login-section .login-page-section {
        padding: 24px 24px;
        align-items: center;
        height: fit-content;
        margin: auto;
        background: #ffffff6b;
        border-radius: 24px;
        backdrop-filter: blur(4px);
        width: 100%;
        max-width: 400px;
        border: 2px solid var(--white);
    }

    .form-radio-btns{
        justify-content: center;
    }

    .text-field{
        align-items: center;
    }
    /* Upcoming Booking Page */
    .booking-form .w-20 {
        width: calc(33.33% - 10.67px);
    }
    .common-table .btns-group{
        gap: 16px;
    }
}

@media (max-width: 767.98px) {
    /* Overview Page  */
    .main-part{
        padding: 28px 22px;
    }
    .main-part header h1{
        font-size: 22px;
        line-height: normal;
        margin-bottom: 0;
    }
    .overview-cards .card img {
        max-width: 38px;
        max-height: 38px;
    }
    .overview-cards .card h5 {
        line-height: normal;
        font-size: 20px;
    }
    .overview-cards .card p,
    .main-part header p{
        font-size: 14px;
        line-height: normal;
    }
    .main-part header{
        margin-bottom: 38px;
    }
    .overview-cards {
        gap: 12px;
    }
    .overview-cards .card{
        padding: 14px 10px;
        gap: 8px;
        min-width: 168px;
    }

    /* Login Page */
    .login-form .form-check label {
        font-size: 20px;
    }

    .form-check-input {
        width: 25px;
        aspect-ratio: 1;
    }
    /* Upcoming Booking Page */
    .booking-form .w-20 {
        width: calc(50% - 8px);
    }
    .booking-form{
        padding-bottom: 24px;
        margin-bottom: 30px;
    }

    /* Signup */
    .signup {
        padding: 36px 0;
    }
    .signup-logo {
        width: 64px;
        height: 64px;
    }
    .check-pricing-link img{
        width: 24px;
    }
    .signup-header h5{
        font-size: 22px;
        line-height: normal;
    }
    .signup-header h4{
        font-size: 24px;
        margin-bottom: 22px;
        line-height: normal;
    }
    .signup-header div{
        margin-bottom: 22px;
    }
    .signup-form{
        row-gap: 0px;
    }
}

@media (max-width: 575.98px) {
    /* Overview Page  */
    .main-part header{
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px;
        align-items: center;
        margin-bottom: 28px;
    }
    .main-part .heading{
        order: 1;
    }
    .overview-cards .card{
        padding: 14px;
        width: 100%;
    }

    /* Login Page */
    .login-section .login-page-section img {
        max-width: 92px;
    }
    /* Upcoming Booking Page */
    .booking-form .w-20 {
        width: 100%;
    }
    .booking-form .btn-primary{
        width: 100%;
        margin-bottom: 16px;
    }

    .booking-form .btn-outline{
        flex-basis: 47.1%;
        margin: auto;
    }
}