import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();


/*GlobalGlobalGlobalGlobal*/

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    background-color: #F4F1F1;

}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

@font-face {
    font-family: Eurostile MN;
    src: url(../fonts/eurostile-mn-extended-bold.tff);
}


/*MenuMenuMenuMenuMenuMenuMenu*/
.logoHeader {
    width: 60%;
}

.bg-b3x {
    background-color: transparent !important;
}

.bg-b3x li,
a {
    font-size: 22px;
    color: white !important;
    font-weight: 700;
}

@media screen and (max-width: 769px) {

    .bg-b3x li,
    a {
        font-size: 22px;
        color: #043964 !important;
        font-weight: 700;
    }

}

/*HomeHomeHomeHomeHomeHomeHomeHome*/
.home {
    margin-bottom: 100px;
}

h1 {
    color: #043964;
    font-size: 38px;
    margin-top: 100px;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
}

.pH1{
    color: #043964;
    font-size: 22px;
    text-align: left;
    margin-left: 5px;
    margin-top: 50px;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
}

.bolas {
    margin-top: 490px;
    width: 20%;
}

.imgFixa {
    z-index: -1;
    position: absolute;
    right: 0;
    top: 0;
    width: 56%;
    height: 780px;
}

/*sobresobresobresobresobresobresobre*/
.sobre h2 {
    color: #043964;
    font-size: 150px;
    line-height: 0.8em;
    margin-top: 10px;
    margin-bottom: 40px;
    font-family: Eurostile MN;
    font-style: normal;
    font-weight: bold;
    font-feature-settings: 'kern'off;
    text-transform: capitalize;
}

.sobre p {
    font-size: 22px;
    text-align: left;
    color: black;
}

.imgAbaixo {
    margin-top: 50px !important;
}

.imgAcima {
    margin-top: -50px !important;
}

.sobre img {
    margin: 20px;
    width: 100%;
}


/*propositopropositopropositopropositopropositoproposito*/
.proposito {
    padding: 80px 0px;
}

.proposito img {
    margin-top: 50px;
    width: 100%;
}

.proposito h2,
p {
    text-align: right;
    color: white;
}

.proposito h2 {
    line-height: 1em;
    margin-top: 10px;
    margin-bottom: 40px;
    font-family: Eurostile MN;
    font-style: normal;
    font-weight: bold;
    font-feature-settings: 'kern'off;
    text-transform: capitalize;
    font-size: 65px;
}

.corEscuro {
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
    margin-top: -560px;
    position: absolute;
    width: 70%;
    z-index: -1;
    right: 0;
    background-color: #043964;
    height: 580px;
}






/*ensinoensinoensinoensinoensinoensinoensinoensinoensinoensi*/

.box {
    padding: 20px;
    background-color: white;
    border: 1px solid #043964;
    text-align: center;
    cursor: pointer;
    height: 300px;
    color: #043964;
    border-radius: 20px;
    
}

.box p {
    display: none;
}

.box:hover h3 {
    display: none;
}

.box:hover img {
    display: none;
}

.box:hover p {
    display: block;
    color: black;
    text-align: left;
}

.box p::before {
    content: "- ";
}

.box:hover {
    
    
    
    -webkit-animation: flip-in-ver-left;
    animation: flip-in-ver-left;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    /*cubic-bezier(0.250, 0.460, 0.450, 0.940) both*/
}

@-webkit-keyframes flip-in-ver-left {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 0;
    }
    50% {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
        opacity: 0.7;
    }

    100% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
        opacity: 1;
    }
}

@keyframes flip-in-ver-left {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 0;
    }
    50% {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
        opacity: 0.7;
    }

    100% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
        opacity: 1;
    }
}


/*animation-name: 2s boxvirando;
@keyframes boxvirando{
    from{
        transform: rotateY(0deg);
    }
    to{
        
    }
}*/
.box img {
    margin: 30px auto;
    display: block;
}

.box h3 {
    font-size: 24px;
}

.cursoss {
    padding-bottom: 80px;
}




/*depoimentosdepoimentosdepoimentosdepoimentosdepoimentos*/
.setamobile img {
    cursor: pointer;
}


.depoimentos {
    padding: 100px 0px;
}

.depoimentos h2 {
    color: #043964;
    font-size: 55px;
    margin-bottom: 50px;
    line-height: 1em;
    margin-top: 10px;
    font-family: Eurostile MN;
    font-style: normal;
    font-weight: bold;
    font-feature-settings: 'kern'off;
}

.itenscontent {
    width: 100% !important;
}

.itens {
    width: 100% !important;
    display: flex !important;
    scroll-snap-type: x mandatory !important;
    overflow: hidden !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.item {
    margin: 0 5px !important;
    width: 32.60% !important;
    backface-visibility: hidden;
    flex: none !important;
    scroll-snap-align: start !important;
    position: relative;
    float: left;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
}

::-webkit-scrollbar {
    width: 0px;
}

.videoDepoi {
    width: 100% !important;
    height: 250px !important;
}

/*.representatividade {
    background-color: black;
    width: 100%;
    height: 250px;
}
.ver {
    background-color: red;
    width: 100%;
    height: 250px;
}
.ama {
    background-color: yellow;
    width: 100%;
    height: 250px;
}*/
/*.carousel{
    width: 100%;
}
.carousel-inner{
    width: 100%;
    display: flex;
}
.carousel-item {
    position: relative;
    display: block;
    flex: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out;
}*/




/*insigthsinsigthsinsigthsinsigthsinsigthsinsigthsinsigths*/

.insigths {
    background-image: url(../img/fundo.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 600px;
}


.insigths h2 {
    color: #043964;
    font-size: 50px;
    margin-bottom: 50px;
    line-height: 1em;
    padding-top: 30%;
    font-family: Eurostile MN;
    font-style: normal;
    font-weight: bold;
    font-feature-settings: 'kern'off;
}

.insigths .textoP {
    color: black;
    text-align: left;
}

.insigths p {
    color: black;
    cursor: pointer;
    text-align: center;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff !important;
    text-shadow: 0 1px 0 #fff;
    opacity: 1 !important;
}

.modal-content {
    background-color: #043964 !important;
    color: #fff !important;
}

.modal-header {
    border-bottom: 1px solid transparent !important;
}

.modal-footer {
    border-top: 1px solid transparent !important;
}

.btn-modalB3X {
    background-color: #fff;
    color: #043964;
}

.primeira {
    margin-top: 100px;
}

.pequeno,
.media,
.grande {
    text-align: center !important;
    color: #043964 !important;
}

.pequeno {
    font-weight: 700;
    font-size: 20px;
}

.media {
    font-size: 25px;
}

.grande {
    font-size: 32px;
}

/*parceirosparceirosparceirosparceirosparceirosparceiros*/

.parceiros h2 {
    text-align: center;
    color: #043964;
    font-size: 65px;
    margin-bottom: 50px;

    line-height: 1em;
    margin-top: 10px;
    font-family: Eurostile MN;
    font-style: normal;
    font-weight: bold;
    font-feature-settings: 'kern'off;
    text-transform: capitalize;
}

.parceiros img {
    width: 100%;
}

.parceiros {
    padding-bottom: 100px;
}


/*perguntasperguntasperguntasperguntasperguntasperguntas*/
.perguntas {
    padding-bottom: 200px;
}

.perguntas h2 {
    color: #043964;
    font-size: 60px;
    line-height: 1em;
    margin-top: 10px;
    margin-bottom: 40px;
    font-family: Eurostile MN;
    font-style: normal;
    font-weight: bold;
    font-feature-settings: 'kern'off;
    text-transform: capitalize;
}

.perguntas p {
    color: #043964;
    text-align: left;
}

.btn-b3x-perguntas {
    color: black !important;
    font-size: 14px;
}



/*footerfooterfooterfooterfooterfooterfooterfooterfooter*/
footer {
    background-color: #043964;
}

.lastP {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

.boxFooter {
    margin-top: -50px;
    border-radius: 30px;
    border: 1px solid #043964;
    width: 100%;
    padding: 80px;
    background-color: white;
}

.logoFooter {
    width: 80% !important;
    height: 80% !important;
    margin-bottom: 20px;
}

.boxFooter img {
    margin-right: 5px;
    width: 24px;
    height: 24px;
}

.boxFooter p {
    text-align: left;
    color: black !important;
}

form {
    width: 100%;
}

form input,
textarea {
    width: 100%;
    margin: 10px 0px;
    padding: 8px;
    border-bottom: 1px solid black !important;
    border: 1px solid transparent;
}

.btn-envia {
    background-color: #043964;
    width: 200px;
    color: white;
    border-bottom: 1px solid transparent !important;
    border: 1px solid transparent;
}




@media screen and (max-width: 400px) {
    .proposito h2 {
        line-height: 1em;
        margin-top: 10px;
        margin-bottom: 40px;
        font-family: Eurostile MN;
        font-style: normal;
        font-weight: bold;
        font-feature-settings: 'kern'off;
        text-transform: capitalize;
        font-size: 37px !important;
    }

    .corEscuro {
        border-top-left-radius: 60px;
        border-bottom-left-radius: 60px;
        margin-top: -780px !important;
        position: absolute;
        width: 100%;
        z-index: -1;
        right: 0;
        background-color: #043964;
        height: 780px !important;
    }
}


@media screen and (max-width: 769px) {

    .oculto {
        display: none;
    }

    .imgFixa {
        display: none;
    }

    .bolas {
        margin-top: 20px;
        margin-left: auto;
        width: 7%;
        margin-right: auto;
        display: block;
    }

    h1, .pH1 {
        text-align: center;
    }

    .navbar-brand {
        width: 78%;
    }



    .sobre h2 {
        color: #043964;
        font-size: 85px;
        line-height: 0.8em;
        margin-top: 10px;
        margin-bottom: 40px;
        font-family: Eurostile MN;
        font-style: normal;
        font-weight: bold;
        font-feature-settings: 'kern'off;
        text-transform: capitalize;
    }

    .sobre img {
        margin: 0px;
        width: 100%;
    }

    .proposito h2 {
        line-height: 1em;
        margin-top: 10px;
        margin-bottom: 40px;
        font-family: Eurostile MN;
        font-style: normal;
        font-weight: bold;
        font-feature-settings: 'kern'off;
        text-transform: capitalize;
        font-size: 40px;
    }

    .corEscuro {
        border-top-left-radius: 60px;
        border-bottom-left-radius: 60px;
        margin-top: -718px;
        position: absolute;
        width: 100%;
        z-index: -1;
        right: 0;
        background-color: #043964;
        height: 720px;
    }

    .centraMb {
        margin: 0 auto;
        display: block;
    }

    .box {
        padding: 20px;
        background-color: white;
        border: 1px solid #043964;
        text-align: center;
        width: 100%;
        margin: 10px 0px;
        display: block;
        height: 300px;
        color: #043964;
        border-radius: 20px;
    }


    .depoimentos h2 {
        color: #043964;
        font-size: 47px;
        margin-bottom: 50px;
        text-align: center;
        line-height: 1em;
        margin-top: 10px;
        font-family: Eurostile MN;
        font-style: normal;
        font-weight: bold;
        font-feature-settings: 'kern'off;
    }

    .item {
        margin: 0 5px !important;
        width: 90% !important;
        backface-visibility: hidden;
        flex: none !important;
        scroll-snap-align: start !important;
        position: relative;
        float: left;
        -webkit-backface-visibility: hidden;
        transition: -webkit-transform .6s ease-in-out;
        transition: transform .6s ease-in-out;
        transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
    }

    .setamobile {
        display: none;
        /* width: 100%;
        position: absolute;
        text-align: center;
        margin-top: 430px;*/
    }

    .insigths h2 {
        color: #043964;
        text-align: center;
        font-size: 45px;
        margin-bottom: 20px;
        line-height: 1em;
        padding-top: 10%;
        font-family: Eurostile MN;
        font-style: normal;
        font-weight: bold;
        font-feature-settings: 'kern'off;
    }

    .primeira {
        margin-top: 0px;
    }

    .pequeno {
        font-weight: 700;
        font-size: 14px;
    }

    .media {
        font-size: 16px;
    }

    .grande {
        font-size: 20px;
    }

    .h2Form {
        margin-top: 40px;
        text-align: center;
    }
}