@media screen and (min-width:899px){
    nav{
        justify-content: center;
    }
    .menu{
        width: 80%;
        position: inherit;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        padding: 1rem 0.8rem;
        opacity: 1;
    }
    .dropdown-menu{
        position: relative;
    }
    .links-dropdown{
        width: 19rem;
        padding: 2rem;
        background-color: var(--color-brand-gray);
        /* display: block; */
        position: absolute;
        top: 3rem;
        left: 0rem;
    }
    .linkmenu{
        padding: 1rem;
        display: flex;
        align-items: center;
        cursor: pointer;
        & i{
            display: flex;
            color: var(--color-brand-blue);
            transition: all .3s ease;
        }
        & a{
            color: var(--color-brand-blue);
            font-weight: 600;
            transition: all .3s ease-in;
        }
    }
    .btn-matrículas{
        background-color: #F2ED4F;
        margin-left: 3.2rem;
        width: 12rem;
        font-size: 1.6rem;
        margin-top: 0rem;
    }
    .btn-matrículas:hover{
        background-color: #fffcae;
    }
    .toggle-menu{
        display: none;
    }

    /* banner-hero main */
    main .container .banner-hero{
        flex-direction: row;
    }
    main .container .infor-banner{
        justify-content: center;
        align-items: start;
        position: relative;
        & .video{
            display: block;
            width: 100%;
            max-width: 30rem;
            height: 30rem;
            position: absolute;
            right: 200px;
            bottom: 0;
        }
        /* & .infor-texto, .btn-star{
            margin-left: 20rem;
        } */
    }

 
    main .container .personagem{
       
        margin-right: 3.2rem;
        
    }
    main .btn-matrículas{
        margin: 0;
        margin-top: 2.4rem;
        background-color: var(--color-brand-red);
    }
    main .container .infor-banner .infor-texto{
        width: 100%;
        max-width: 46rem;
        padding: 1.2rem;
        h1{
            font-size: 4rem;
            font-family: "Inter", sans-serif;
            line-height: 4rem;
            color: #ffffff;
            & span{
                font-size: 4rem;
                font-family: "Inter", sans-serif;
                line-height: 4rem;
                color: #ffffff42;
            }
        }
    }
    .historia{
        padding: 10rem;
        opacity: 0;
        transform: translateY(80px);
        transition: all .3s ease;
    }
    .ativo{
        opacity: 1;
        transform: translateY(0);
    }
    
    .historia .conainer-hitoria .text-historia{
        flex-direction: row;
        gap: 4rem;
    }
    .historia .conainer-hitoria .container-text {
        width: 100%;
        max-width: 54rem;
        text-align:start;
        align-items: start;
        
        & p{
            text-align:start;
            align-items: start;
        }
        & a{
            width: 20rem;
            margin: 0;
            margin-top: 2.4rem;
        }
    }
    .missao .container-info{
        flex-direction: row;
        max-height: 28rem;
    }
    
    .container-ensino-card02{
        flex-direction:row;
    }
    .ensino .container-ensino{
        flex-direction: row;
        gap: 2rem;
    }
    .container-cards{
        display: flex;
        flex-direction: row;
    }
    .galeria .container-galeria{
        width: 100%;
        display: flex;
        /* flex-direction: row; */
    }
    .galeria .container-img {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .galeria .container-galeria .btn-galeria{
        display: none;
    }
    .container-img .foto{
        display:flex;
    }
    footer .container .infor-logo {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 4rem;
        flex-direction: row;
    }
    footer .container .logo-footer{
        width: 20rem;
        position: absolute;
        left: 532px;
        top: -100px;
        display: block;
        /* margin: 0 auto; */
    }
    footer .container .infor-logo .map iframe{
        width: 70rem;
        height: 30rem;
    }
    footer .container .infor{
        & p{
            font-size: 1.6rem;
            & span{
                font-size: 2.8rem;
                font-weight: 700;
                margin-bottom: 0.5rem;
            }
        }
        & .ender{
            width: 100%;
        }
    }
    footer .container .redes-sociais{
        padding-left: 23rem;
    }

}
@media screen and (min-width:999px){


}