@media screen and (max-width: 650px) {
    #calculator {
        font-size: 14px;
    }

    #calculator .calc-row {
        flex-direction: column;
        gap: 12px;
    }

    #myModal .modal-footer {
        flex-direction: column;
        gap: 12px;
        padding: 16px 0;
    }

    #myModal .modal-footer input[type="button"] {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    #calculator .calc-row {
        padding: 0 !important;
    }

    .col-lg-4.col-md-6.col-12 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    #jobTypesContainer,
    #addNewRoomContainer,
    #getInstructionsContainer,
    #resetContainer,
    #projectResults {
        width: min(100%, calc(100vw - 40px)) !important;
        margin: 10px auto !important;
        display: block;
    }

    #projectResults {
        padding: 16px !important;
    }
}