/* media queries

XL queries: 1200
L queries: 1023
L queries: 992
M queries: 676

*/

@media (min-width: 1200px) {
    .container {
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
    }

    .section {
        padding: 10rem 0;
    }

    .section header,
    #testimonials header {
        max-width: 32rem;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .button {
        height: 3.1rem;
    }

    main {
        margin-top: var(--header-height);
    }

    nav .menu {
        opacity: 1;
        visibility: visible;
        top: 0;
    }

    nav .menu ul {
        display: flex;
        gap: 2rem;
    }

    nav .menu ul li a.title {
        font: 400 1rem 'Josefin Sans', sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    nav .menu ul li a.title.active{
        font-weight: bold;
        -webkit-font-smoothing: auto;
    }

    nav .icon-menu {
        display: none;
    }

    /* home */

    #home .container {
        grid-auto-flow: column;
        justify-content: space-between;
        margin: 0 auto;
    }

    #home .image {
        order: 1;
    }

    #home .text {
        order: 0;
        max-width: 24rem;
        text-align: left;
    }

    /* about */

    #about .container {
        margin: 0 auto;
        grid-auto-flow: column;

    }

    /* serviços */ 

    .cards {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .card {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* cardapio */

    .product-list h1 {
        font-size: 2rem;
    }

    /* testimonials */

    #testimonials .container {
        margin-left: auto;
        margin-right: auto;
    }

    /* contact */

    #contact .container {
        grid-auto-flow: column;
        align-items: center;
    }

    #contact .text {
        max-width: 25rem;
    }

    /* footer */

    footer.section {
        padding: 3.7rem 0;
    }

    footer .container {
        grid-auto-flow: column;
        align-items: center;
        justify-content: space-between;
    }

    footer .logo {
        font-size: 2.25rem;
    }
}


@media (min-width: 800px) {
    
    #header {
        margin-bottom: 0rem;
    }

    .section {
        padding: 8rem 0;
    }

    .section header,
    #testimonials header {
        max-width: 32rem;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .button {
        height: 3.1rem;
    }

    main {
        margin-top: var(--header-height);
    }

    nav .menu {
        opacity: 1;
        visibility: visible;
        top: 0;
    }

    nav .menu ul {
        display: flex;
        gap: 2rem;
    }

    nav .menu ul li a.title {
        font: 400 1rem 'Josefin Sans', sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    nav .menu ul li a.title.active{
        font-weight: bold;
        -webkit-font-smoothing: auto;
    }

    nav .icon-menu {
        display: none;
    }

    /* home */

    #home .container {
        grid-auto-flow: column;
        justify-content: space-between;
        margin: 0 auto;
        align-items: center;
    }

    #home .image {
        width: 100%;
        order: 1;
    }

    #home .text {
        order: 0;
        max-width: 26rem;
        text-align: left;
    }

    /* about */

    #about .container {
        margin: 0 auto;
        grid-auto-flow: column;

    }

    /* serviços */ 

    .cards {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .card {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    /* testimonials */

    #testimonials .container {
        margin-left: auto;
        margin-right: auto;
    }

    /* contact */

    #contact .container {
        grid-auto-flow: column;
        align-items: center;
    }

    #contact .text {
        max-width: 25rem;
    }

    /* footer */

    footer.section {
        padding: 3.7rem 0;
    }

    footer .container {
        grid-auto-flow: column;
        align-items: center;
        justify-content: space-between;
    }

    footer .logo {
        font-size: 2.25rem;
    }
}

@media (min-width: 850px) {

    .title {
        font-size: 2.25rem;
    }
    .subtitle{
        font-size: 1.12rem;
    }

    .menu-products .product-list h1 {
        font-size: 1.5rem;
    }
}

@media (min-width: 700px) {
    #home .image img {
        position: relative;
        top: 1rem;
        width: 90%;
    } 

    #home .image::before {
        height: 85%;   
    }

    img {
        width: 100%;
        top: 0;
    }

}

@media (min-width: 500px) {
    #home .image img {
        position: relative;
        top: 1rem;
        width: 90%;
    } 

    #home .image::before {
        height: 85%;   
    }

    img {
        width: 90%;
        top: 0;
    }

    .product-list h1 {
        font-size: 1.4rem;
    }
}