@media screen and (max-width: 1300px) {
   #ensino .ensino-card{
    flex-wrap: wrap;
   }

 
}
@media screen and (max-width: 919px) {
    #listMenu li a{
        font-size: 1.6rem;
    }
    .ender p{
        font-size: 1.6rem;
    }
    .email p{
        font-size: 1.6rem;
    }
    .container-local{
        flex-direction: column;
        gap:0px;
    }
    .ender p{
        margin: 0px;
    }
    .email p{
        margin: 0px;
    }
    .ender, .email{
        gap:0px;
        justify-content: start;
    }
    .rede-social{
        flex-direction: column;
    }
    .rede{
        padding: 0px;
    }
    .rede-social .midias{
        display:flex;
        justify-content: center;
    }
    .copy{
        justify-content: center;
        flex-direction: column;
    }

 
}
@media screen and (max-width: 800px) {
    
    #menu #listMenu{
        width: 100%;
        height: calc(100vh - 3rem);
        overflow: auto;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        top: 10rem;
        position:absolute;
        transition: top .4s, opacity .3s;
    }
    .drop, .menu-toggle{
        display:flex;
    }
    .drop, .menu-toggle .fi{
        font-size:2.4rem;
    }
    .container-local{
        flex-direction: column;
        gap:0px;
    }
    .ender p{
        margin: 0px;
    }
    .email p{
        margin: 0px;
    }
    .ender, .email{
        gap:0px;
        justify-content: start;
    }
    .rede-social{
        flex-direction: column;
    }
    .rede{
        padding: 0px;
    }
    .rede-social .midias{
        display:flex;
        justify-content: center;
    }
    #hero h1{
        font-size: 6.4rem;
    }
    #hero .grid{
        flex-direction: column;
    }
    #historia .grid{
        flex-direction: column;
        margin: 0px;
    }
    #historia .descricao{
        margin: 0px;
        margin-bottom: 4rem
    }
    #historia .img-escola{
        margin: 0px;
        margin-top: 4rem
    }
    .ensino-card{
        flex-direction: column;
    }
    .info{
        flex-direction: column;
    }
}
@media screen and (max-width: 450px){
    .contato{
        display: none;
        width: 100%;
        flex-direction: column;
    }
    #hero .containe{
        flex-direction: column;
        & .text-imge{
            bottom: 0;
            right: 0;
        }
        & .text-title{
            top: 10rem;
        }
    }
    
}
@media screen and (max-width: 320px){
    #historia .grid .img-escola{
        width: 25rem;
    }
    #historia .grid .descricao h2{
        font-size: 4rem;
    }
    #hero .containe{
        flex-direction: column;
        & .text-imge{
            bottom: -10rem;
            right: 0;
        }
        & .text-title{
            top: 10rem;
        }
    }
    #ensino{
        & #card{
            width: 29rem;
            & .info{
                & h3{
                    text-align: center;
                }
            }
        }
    }
    
}