/* left part */
.facilities .left {
    width: 35%;
    padding: 1rem !important;
}

.facilities .left .search {
    width: 100%;
}

.facilities .left .test-card .upper-section {
    gap: 1rem;
}

.facilities .left .test-card .upper-section img {
    height: 3rem;
}

.facilities .left .test-card .upper-section > div {
    gap: 0.5rem;
    width: 100%;
    justify-content: space-between;
}
/* left part end */


/* right part */
.facilities .right {
    width: 75%;
    padding: 0;
}

.facilities .right .main-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.facilities .right .test-card {
    gap: 0.5rem;
}

.facilities .right .test-card img {
    height: 3rem;
}
/* right part end */




/* increment-decrement */
 /* Add some basic styles for better presentation */
 .value-container {
    display: flex;
    align-items: center;
    height: 2rem;
}

.value-container input {
    width: 3rem;
    text-align: center;
}

.value-container button {
    height: 100%;
    display: flex;
    align-items: center;
}

.value-container .value-button img {
    width: 0.8rem;
    height: auto !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* increment-decrement end*/




@media all and (max-width: 980px) {
    .facilities .left .test-card .upper-section > div {
        flex-direction: column;
    }

    .value-container {
        width: fit-content;
    }
    .facilities .right .toggler button {
        font-size: 0.8rem;
    }
}  

@media all and (max-width: 870px) {
    .facilities .right .toggler button {
        font-size: 0.7rem;
    }
}

@media all and (max-width: 820px) {
    .facilities .left .search-bar {
        flex-direction: column !important;
        align-items: start;
    }

    .facilities .left .search-bar .search {
        width: 100% !important;
    }

    .facilities .left .main-content {
        height: 100% !important;
    }
    .facilities .right .main-content {
        height: 100% !important;
    }
}

@media all and (max-width: 800px) {
    .facilities .right .toggler button {
        font-size: 0.6rem;
    }
}

@media all and (max-width: 740px) {
    .facilities .left {
        width: 40%;
    }
    .facilities .right {
        width: 60%;
    }
    .facilities .right .main-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width: 700px) {
    .facilities {
        flex-direction: column;
    }
    .facilities .left {
        width: 100%;
    }
    .facilities .left .test-card .upper-section > div {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }
    .facilities .right {
        width: 100%;
    }
    .facilities .right .main-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media  all and (max-width: 480px) {
    .facilities .right .main-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width: 440px) {
    .facilities .right .toggler button {
        font-size: 0.8rem;
    }
}

@media all and (max-width: 420px) {
    .facilities .right {
        padding: 1rem;
    }
}

@media all and (max-width: 395px) {
    .facilities .right .toggler button {
        font-size: 0.7rem;
    }
}

@media all and (max-width: 370px) {
    .facilities .right .toggler button {
        font-size: 0.6rem;
    }
}

@media  all and (max-width: 330px) {
    .facilities .left .test-card .upper-section > div {
        flex-direction: column;
    }
    .facilities .right .main-content {
        grid-template-columns: repeat(1, 1fr);
    }
}