@media screen and (max-width: 1024px) {}

@media screen and (max-width: 640px) {

    nav, section, footer {
        padding-inline: 1rem;
    }

    section {
        padding-block: 3.5rem;
        min-height: max-content;
    }

    #hero-section{
        text-align: center;
        width: 100%;
        padding-inline: 0.5rem;
    }
    
    .hero-img{
        display: none;
    }

    .build-team-card {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .horizonal-card {
        flex-direction: column;
        padding-bottom: 3.5rem;
    }

    .horizonal-card img {
        margin-right: 0;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
    }

    #teams {
    grid-template-columns: 1fr;
    }

    .teams-grid {
        row-gap: 2.5rem;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .card-img-top{
        margin-inline: auto;
    }

    .project-types {
        grid-template-columns: 1fr;
        margin-top: 1rem;
    }

    .sidenav{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .tab {
        padding: 0;
        width: max-content
    }

    .sidenav b{
        display: none;
    }

    .tab-info {
        margin-top: 2rem;
        margin-left: 0;
        width: 100%;
    }

    #bottom-cta {
        padding-inline: 1rem;
    }

    .cta-container {
        padding: 2rem;
    }

    .bcta-icons {
        flex-direction: column;
        gap: 1rem;
        margin-block: 1.5rem;
    }

    .bcta-image {
        display: none;
    }

    #contact{
        flex-direction: column;
        justify-content: center;
    }

    .form-container{
        width: 100%;
    }

    .form-container .row {
        flex-direction: column;
        gap: 1rem;
    }

    .form-item-h{
        width: 100%;
    }
}