@media (max-width: 1100px) {
    .nav-list{
        display: none;
    }

    .nav-button{
        display: block;
        top: 15px;
        right: 30px;
        z-index: 9;
        position: absolute;
    }

    .nav.open .nav-list{
        position: fixed;
        top: 0;
        bottom: 0;
        /*left: 0;*/
        width: 400px;
        right: 0;
        background-color: #1d2f30;

        z-index: 5;
        padding: 15px 30px;
        display: flex;
        flex-direction: column;
        row-gap: 40px;
    }

    .nav.open .nav-list {
        align-items: start;
    }

    .nav.open .nav-button {
        position: fixed;
    }

    .nav.open .sub-menu{
        row-gap: 40px;
    }

    .metal-detail-heading {
        font: 400 36px "PT Sans Caption", sans-serif;
    }

    .metal-detail-description {
        font: 400 22px "PT Sans Caption", sans-serif;
    }

    #image1 {
        justify-self: end;
    }

    #image2 {
        justify-self: start;
    }

    #image3 {
        display: none;
    }

    .firm-info-container{
        padding: 30px 60px;
    }

    .table-text-container {
        font: 400 14px "PT Sans Caption", sans-serif;
    }
}

@media (max-width: 790px) {

    .nav.open .nav-list{
        left: 0;
        width: 100%;
    }

    .head-container{
        padding-left: 20px;
        padding-right: 20px;
    }

    .metal-detail-heading {
        font: 400 26px "PT Sans Caption", sans-serif;
    }

    .metal-detail-description {
        font: 400 20px "PT Sans Caption", sans-serif;
    }

    #image1 {
        justify-self: center;
    }

    #image2 {
        display: none;
    }

    .engineering-company-image {
        grid-column: span 2;
        padding: 0 40px;
    }

    .column-info-container {
        padding: 0 20px;
    }

    .firm-info-container{
        padding: 20px 20px;
    }

    .table-text-container {
        font: 400 12px "PT Sans Caption", sans-serif;
    }

    .page-link{
        font: 400 10px "PT Sans Caption", sans-serif;
    }

    .carousel {
        margin-top: 20px;
        margin-bottom: 20px;
        width: 240px;
        height: 160px;
        position: relative;
    }

    .services-info-container{
        padding: 20px;
    }
}