@media screen and (max-width: 1100px) {
    .menu { gap: 10px; }

    .banner { height: 350px; }

    .banner-slide {
        img { height: 350px; }
        p:first-of-type {
            font-size: 35px;
            line-height: 40px;
            top: 100px;
        }
        p:last-child { top: 150px; }
    }

    .about-us {
        gap: 20px;
        img { width: 350px; height: auto; }
        > div { width: calc(100% - 370px); }
    }

    .curr-product {
        justify-content: space-between;
        gap: 10px;
    }

    .product-left { width: calc(100% - 270px); }

    .proj-filter-card label {
        font-size: 14px;
        line-height: 19px;
        padding: 10px;
    }

    .proj-info { gap: 20px; }
}

@media screen and (max-width: 1023px) {
    #menu-toggle-button { display: flex; }
    .menu, .header-actions .search { display: none; }
    .header-content { justify-content: space-between; }
    .header-actions { gap: 15px; }

    .info-blocks > div {
        min-height: 190px;
        img { margin-bottom: 15px; }
        p {
            font-size: 30px;
            line-height: 35px;
            margin-bottom: 10px;
        }
        span { 
            font-size: 12px;
            line-height: 16px;
        }
    }

    .prod-card { padding: 20px; }
    .prod-info {
        > p {
            font-size: 20px;
            line-height: 24px;
            margin-bottom: 10px;
        }
        > div:nth-child(2) {
            font-size: 12px;
            line-height: 16px;
        }
    }

    .about-intro1 .content { gap: 20px; }

    .about-card {
        padding: 20px;
        width: calc(50% - 10px);
        .name {
            font-size: 20px;
            line-height: 24px;
            margin-bottom: 10px;
        }
        .text {
            font-size: 12px;
            line-height: 16px;
            height: 96px;
        }
    }

    .icon { width: 40px; height: 40px; }
    .checkpoints {
        font-size: 14px;
        line-height: 19px;
    }
    
    .benefits {
        margin-top: 20px;
        margin-bottom: 50px;
        justify-content: center;
        div { 
            min-width: 220px;
            min-height: 170px; 
            p {
                font-size: 16px;
                line-height: 22px;
            }
            span {
                font-size: 13px;
                line-height: 16px;
            }
        }
    }

    #prod5 { 
        gap: 10px; 
        flex-direction: column-reverse;
        .product-left { 
            padding: 0;
            width: 100%; 
        }
    }

    .concrete-img { width: 450px; }

    .proj-name {
        font-size: 40px;
        line-height: 50px;
    }

    .product-slide { height: 500px !important; }

    .proj-block1 { 
        padding: 20px; 
        min-height: 155px;
        p:last-child {
            font-size: 20px;
            line-height: 24px;
        }
    }
}

@media screen and (max-width: 850px) {
    .products {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .prod-card {
        width: 100%;
        &:hover { top: -10px; }
    }

    .proj-grid {
        grid-template-columns: repeat(1, 1fr);
        justify-content: center;
    }

    .about-intro { padding: 40px 20px; }
    .about-us {
        flex-direction: column;
        > div { width: 100%; }
        img { margin: 0; }
    }
}

@media screen and (max-width: 768px) {
    .info-blocks { 
        grid-template-columns: repeat(2, 1fr); 
        margin-bottom: 30px;
    }

    .page-title {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 20px;
    }

    .page-title1 {
        font-size: 20px;
        line-height: 25px;
    }

    .prev-text {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 25px;
    }

    .info-prev {
        flex-direction: column;
        div { 

            font-size: 14px;
            line-height: 19px;
            width: 100%; 
        }
        p { 
            font-size: 20px; 
            line-height: 24px; 
            margin-bottom: 8px;
        }
    }

    .contact-cont { padding: 30px 20px 60px; }
    .contact-page { flex-direction: column; }

    .contact-form, .contact-right { width: 100%; }

    .footer-top {
        flex-direction: column;
        gap: 25px;
    }

    .footer-bottom { 
        flex-direction: column; 
        div { order: 1; margin-bottom: 20px; }
    }

    .creator { order: 3; }
    .copyright { order: 2; }

    .about-intro1 { 
        padding: 30px 20px; 
        .content { flex-direction: column; }
    }

    .about-card { width: 100%; }
    .about-quote {
        font-size: 20px;
        line-height: 24px;
    }

    .project-filter-cont1 {
        align-items: center;
        .project-filter { display: none; }
    }

    .project-filter-cont .project-filter > .proj-filter-card { display: none; } 

    .project-filter-card:first-child label:hover { border-radius: 8px 8px 0 0; }
    .project-filter-card:last-child label:hover { border-radius: 0 0 8px 8px; }

    .proj-filter-card label {
        background: white;
        border-radius: 0;
        font: 14px 'Campton Medium', 'Helvetica Roman';
        line-height: 19px;
        padding: 10px;
        width: 100%;
    }

    .custom-select {
        cursor: pointer;
        display: flex;
        position: relative;
        width: 100%;
    }

    .select-head {
        background: var(--tertiary-color);
        border: 1px solid #EEF7F2;
        border-radius: 8px;
        padding: 0 20px;
        font: 16px 'Campton Medium', 'Helvetica Medium';
        line-height: 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%; height: 50px;
    }

    .options {
        background: white;
        border: 1px solid #EEF7F2;
        border-radius: 8px;
        position: absolute;
        top: calc(100% + 5px);
        left: 0; right: 0;
        display: none;
        flex-direction: column;
        z-index: 10;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .options a {
        color: var(--secondary-color);
        font: 14px 'Campton Medium', 'Helvetica Medium';
        line-height: 19px;
        padding: 10px;
        text-decoration: none;
        transition: all 0.3s ease;
        &:first-child { border-radius: 8px 8px 0 0; }
        &:last-child { border-radius: 0 0 8px 8px; }
        &:hover { background: #EEF7F2; }
    }

    .custom-select.active .options { display: flex; }

    .custom-select i { transition: all 0.3s ease; }
    .custom-select.active i { transform: rotate(180deg) ;}

    .curr-product-cont { padding: 30px 20px; }
    .product-left {
        .name {
            font-size: 30px;
            line-height: 40px;
            margin-bottom: 10px;
        }
        .desc {
            font-size: 20px;
            line-height: 24px;
            margin-bottom: 15px;
        }
        .text {
            font-size: 14px;
            line-height: 19px;
            margin-bottom: 25px;
        }
    }

    .table-cont { overflow-x: auto; }
    .prod-table1 { width: 780px !important; }

    .prod-table th {
        font-size: 18px;
        line-height: 24px;
        padding: 12px 0 !important;
        text-align: center;
        &:first-child { padding: 12px 0 12px 25px !important; }
        &:last-child { padding: 12px 25px 12px 0 !important;  }
    }

    .prod-table td {
        font-size: 14px;
        line-height: 19px;
        padding: 12px 0 !important;
        text-align: center;
        &:first-child { padding: 12px 0 12px 25px !important; }
        &:last-child { padding: 12px 25px 12px 0 !important; }
    }

    .benefits-cont { padding: 40px 20px; }

    .project-img-button { width: 200px !important; height: 150px !important; }
    .product-slide { height: 350px !important; }
}

@media screen and (max-width: 650px) {
    .banner { height: 200px; }
    .banner-slide {
        img { height: 200px; }
        p:first-of-type {
            font-size: 20px;
            line-height: 25px;
            top: 50px;
        }
        p:last-child { 
            font-size: 14px;
            line-height: 19px;
            top: 80px; 
        }
    }

    .banner-prev, .banner-next { display: none; }

    .curr-product { flex-direction: column-reverse; }
    .product-left {
        padding: 0;
        width: 100%;
    }

    .prod-img1 {
        width: 180px; height: 245px;
        img {  width: 124px; height: 214px; }
    }

    .proj-info1 .content { flex-direction: column; }
    .proj-block1 { width: 100%; }
}

@media screen and (max-width: 500px) {
    .concrete-img {
        width: 100%;
        height: auto;
    }

    .proj-info { 
        flex-direction: column; 
        align-items: flex-start;
    }

    .proj-name {
        font-size: 30px;
        line-height: 40px;
    }
}

@media screen and (max-width: 450px) {
    .about-us-prev, .prod-prev, .proj-prev,
    .tech-specic { padding: 30px 20px; }

    .info-blocks { 
        grid-template-columns: repeat(1, 1fr);
        gap: 10px; 
    }

    .prod-card { gap: 10px; }
    .prod-info { 
        width: calc(100% - 140px); 
        > div:nth-child(2) { height: 64px; }
    }

    .prod-img {
        width: 130px; height: 180px;
        img {
            width: 100px; height: 150px;
        }
    }

    .learn-more {
        font-size: 12px;
        line-height: 16px;
        width: 120px; height: 40px;
    }

    .proj-card { 
        height: 270px; 
        > div:last-child {  top: 170px; left: 20px; }
        .name {
            font-size: 16px;
            line-height: 22px;
        }
        .location {
            font-size: 12px;
            line-height: 16px;
            margin: 0;
        }
    }

    .tag { 
        font-size: 12px;
        line-height: 19px;
        left: 20px; bottom: 115px;
        width: 120px; height: 40px; 
    }

    .about-card .text {
        line-clamp: unset;
        -webkit-line-clamp: unset;
        height: unset;
    }

    .prod-table { width: 400px !important; }
    .prod-table1 { width: 780px !important; }
    .benefits div { width: 100%; }

    .get-in-touch {
        p:first-child {
            font-size: 30px;
            line-height: 40px;
            margin-bottom: 15px;
        }
        p:nth-child(2) {
            font-size: 16px;
            line-height: 22px;
            margin-bottom: 20px;
        }
        a { width: 100%; }
        div { 
            flex-direction: column; 
            gap: 10px; 
            width: 100%;
        }
    }

    .product-slide { height: 250px !important; }
    .project-img-button {
        width: 120px !important;
        height: 90px !important;
    }

    .logos {
        a:first-child img { max-width: 100px; }
        a:last-child img { max-width: 80px; }
    }
}