@media (max-width: 504px) {
    
    .body_title {

        gap: 20px;
    }

    .body_button {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .about_content p {
        width: 90%;
    }

    .about_image img{
        width: 330px;
        height: 200px;
    }

    .menu_item img { 
        width: 80%;
        height: 180px;
    }

}

@media (max-width: 620px) {
    .medias_content {
        flex-direction: column;
        gap: 50px;   
    }
}

@media (max-width: 675px) {
    header {
        height: 12vh;

        gap: 20px;
        justify-content: space-between;
        align-items: center;
        padding: 0px 20px;
    }

    .header_nav {
        display: none;
    }

    .one,
    .two,
    .three {
        width: 80%;
        height: 2px;
        background-color: white;
        margin: 6px auto;
        transition-duration: 0.5s;
    }

    .menu_hamb {
        display: block;
        width: 30px;
        height: 30px;
    }

    header.on {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(30, 31, 30, 0.9);
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    header.on .header_logo {
       display: none;
    }

    header.on .menu_hamb {
        position: absolute;
        right: 40px;
        top: 20px;
    }

    /* TRANSFORMANDO EM X*/
    header.on .menu_hamb .one {
        transform: rotate(45deg) translate(5px, -8px);
    }
    header.on .menu_hamb .two {
        opacity: 0;
    }
    header.on .menu_hamb .three {
        transform: rotate(-45deg) translate(20px, -6Px);
    }

    header.on .header_nav {
        display: flex;
    }

    header.on .header_nav nav{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }

}

@media (max-width: 768px) {
    
    .body_title h1{
        text-align: center;
    }

}