@media (max-width: 960px){
    .header{
        height: 15em;
    }

    .header-content{
        margin-top: 1em;
    }
  }

/** Home **/
@media (max-width: 770px){
    .m-v-statements{
        flex-direction: column;
        align-items: center;
    }

    .statement{
        width: 90%;
    }
}

@media (max-width: 1185px){
    .review-panels{
        flex-direction: column;
    }

    .panel{
        min-width: 100%;
        min-height: 11em;
    }

    .client-info{
        transform: translateX(5em) translateY(-5em);
    }

    .client-review{
        transform: translateY(-4em);
        margin-bottom: -4em;
    }
}

@media (max-width: 610px){
    .five-star-mobile{
        display: block ;
    }

    .five-star-web{
        display: none ;
    }

}

@media (max-width: 510px){
    .quote-mark{
        display: none;
    }

    .client-info{
        transform:  translateY(-5em);
    }

    .client-review{
        transform: translateY(-4em);
        margin-bottom: -4em;
    }

    .review-panels{
        padding-inline: 2em;
    }
    
}

@media (max-width: 430px){
    .client-info{
        transform:  none;
        text-align: center;
    }

    .client-review{
        transform: none;
        margin-bottom: 0;
    }

    .five-star-mobile{
        display: none;
    }

    .five-star-web{
        display: block;
        text-align: center;
    }

    .stars{
        margin-bottom: .5em;
    }

}

@media (max-width: 290px){
    .review-panels{
        padding-inline: 1em;
    }
}

/** Contact **/
@media (max-width: 840px){
    main{
        height: auto;        
    }

    .contact-container{
        flex-direction: column;
        height: auto;
        width: auto;
    }

    .left-panel{
        width: 100%;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
    }

    ul{
        display: flex;
        justify-content: space-between;
        gap: 2em;
    }

    .social-buttons{
        justify-content: center;
    }

    .right-panel{
        width: 100%;
        height: 50%;
        flex-direction: row;
        padding: 3em;
    }

    .form-container{
        width: 90%;
    }

    .input-box{
        width: 100%;
        max-width: 100%;
    }

    .input-box textarea{
        height: 30px;
    }

    .get-in-touch{
        text-align: center;
    }

    .input-box textarea{
        height: 8em;
    }
}


@media(max-width: 716px){
    .contact-container{
        width: 100%;
    }

    .contact-info ul{
        flex-direction: column;
        gap: 0em;
    }



    .left-panel{
        flex-direction: column;
        padding: 1.5em;
    }

    .social-buttons{
        justify-content: center;
    }
}


@media(max-width: 450px){
    .left-panel{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    ul li{
        justify-content: center;
        text-align: center;
    }

    .contact-info svg{
        display: none;
    }

    .get-in-touch h3{
        font-size: 1.75rem;
    }
}

/** Projects List **/
@media(max-width:1480px){
    .projects-list-container{
        max-width: 1060px;
    }

    .projects{
        width: 100%;
    }
}


@media(max-width:1130px){
    .projects-list-container{
        max-width: 710px;
    }

    .search-feature{
        justify-content: center;
        padding: 1em 0 0 0;
    }
}

@media(max-width: 710px){
    .projects-list-container{
        max-width: 355px;
    }

    .projects{
        padding-bottom: 2em;
        padding-top: 2em
    }
}

@media(max-width: 370px){
    input.search{
        width: 100%;
        max-width: 290px;
    }

    .project-card{
        width: 100%;
        min-width: 280px;
        height:  300px;
    }
}

/** Specific Projects **/
@media (max-width: 1120px){
    .info-map{
        flex-direction: column;
    }

    .info-map{
        margin-bottom: 2em;
    }
}


@media (max-width: 640px){
    .text-container h2{
        font-size: 2.5rem;
    }

    .text-container p{
        font-size: 1rem;
    }

    .container p{
        width: 100%;
    }

    .container{
        flex-direction: column;
    }

    .single-picture{
        width: 100%;
      }
}

@media (max-width: 640px) {
    .projects-page{
      padding: 4em 2em;
    }

    .container {
      grid-template-columns: 1fr;
    
      min-width: none;
      max-width: 650px;
    }
    
    .small-grid {
      grid-template-rows: auto;
    }

    #map{
      min-width: 200px;
      min-height: 150px;
    }
    
  }

  @media (max-width: 440px){
    #map{
      height: 300px;
    }
  }