@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --fx: flex;
    --nada: none;
    --meia: .5rem;
    --umMeio: 1.5rem;
    --centro: center;
    --coluna: column;
    --preta: black;
    --negrito: bolder;
    --vermelho: red;
    --branco: white;
    --preta1: #1D2438;
    --relativo: relative;
    --espaco: space-between;
    --verde:  rgb(0, 239, 137);
    --font3: "Oswald", sans-serif;
    --laranja: rgb(250, 158, 16);
    --azul: rgba(0, 208, 255, 100%);
    --font1: "Montserrat", sans-serif;
    --font2: "Madimi One", sans-serif;
    --azul1: rgba(0, 208, 255, 45%);
    --font4: "Chakra Petch", sans-serif;
    --sombraAzul: 0 0 50px var(--azul1);
    --backImgCard: left / 12% no-repeat;
    --radiano: 30px 50px 100px 50px / 100px 50px 50px 50px;
    --gradiente2: linear-gradient(to bottom, #06A9CE, #696AA1);
    --gradiente3: linear-gradient(to bottom, #06A9CE, #DD2476);
    --gradiente1: linear-gradient(to bottom right, #FF512F, #DD2476);
    --gradiente5: linear-gradient(to bottom, var(--preta1), var(--preta), var(--preta1));
    --gradiente4: linear-gradient(to bottom, transparent, black, #FF512F, #FF512F, #DD2476, transparent, #1D2438);    
}

::-webkit-scrollbar {
    width: 7px;
    background: var(--preta);
}

::-webkit-scrollbar-thumb {
    transition: all .5s;
    border-radius: var(--meia);
    background: var(--gradiente1);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradiente4);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-font-smoothing: antiAliased !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antiAliased !important;
}

*::selection {
    color: white;
    background-color: #f94a3df2;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

#botaoLinkTopo {
    z-index: 9;
    right: 25px;
    bottom: 25px;
    position: fixed;
    cursor: pointer;
    border-radius: 50%;
    border: var(--nada);
    outline: var(--nada);
    display: var(--nada);
    background-color: var(--preta1);
}      

#botaoLinkTopo:hover {
    box-shadow: 0 0 50px var(--azul);
}

#botaoLinkTopo img {
    width: 50px;
    height: 50px;
}

#menu {
    height: 5rem;
    display: var(--fx);
    align-items: var(--centro);
    padding-inline: var(--umMeio);
    background-color: var(--preta);
    justify-content: var(--espaco);
}

#menu #imagemLogoMenu {
    width: 70px;
}

.letraPintada {
    color: var(--vermelho);
    font-family: var(--font3);
}

#menu .divMenuOpcoes a {
    padding: var(--meia);
    color: var(--branco);
    font-family: var(--font1);
    font-weight: var(--negrito);
    text-decoration: var(--nada);
}

#menu .divMenuHamburguer {
    display: var(--nada);
}

.botao {
    width: 130px;
    cursor: pointer;
    color: var(--branco);
    padding: var(--meia) 1rem;
    font-family: var(--font1);
    background: var(--gradiente1);
    border-radius: var(--radiano);
    border: 2px solid var(--branco);
    font-weight: var(--negrito) !important;
}

#divTextoImagemPrincipal {
    display: var(--fx);
    height: calc(100vh -5rem);
    align-items: var(--centro);
    padding-inline: var(--umMeio);
    background-color: var(--preta);
}

#divTextoImagemPrincipal #areaTextoPrincipal h1 {
    font-size: 40pt;
    color: var(--branco);
    font-family: var(--font4);
    padding-block-end: var(--meia);
}

#divTextoImagemPrincipal #areaTextoPrincipal p {
    color: var(--branco);
    padding-block-end: 1rem;
    font-family: var(--font1);
}

.divColorida {
    width: 25px;
    height: 9px;
    display: inline-block;
    background: var(--gradiente1);
}

#divTextoImagemPrincipal #areaImgPrincipal #imgPrincipal{
    width: 400px;
}

#areaInfo {
    display: var(--fx);
    background-color: var(--preta);
}

#areaInfo .areainfoQuadrado {
    bottom: 0;
    width: 350px;
    height: 350px;
    display: var(--fx);
    margin: var(--umMeio);
    position: var(--relativo);
    flex-direction: var(--coluna);
    padding-inline: var(--umMeio);
    justify-content: space-around;
    border-radius: var(--radiano);
    box-shadow: var(--sombraAzul);
    border: 2px solid var(--azul1);
    animation: moveCard 5s ease infinite;
    transition: border .3s ease, bottom .1s ease-out;
}

@keyframes moveCard {
    25% {
        border-radius: 30px 50px 50px 30px / 100px 50px 22px 50px;
    }
    50% {
        border-radius: 20px 55px 35px 15px / 70px 40px 10px 30px;
    }
    75% {
        border-radius: 70px 60px 15px 50px / 120px 50px 34.5px 50px;
    }
    100% {
        border-radius: var(--radiano);
    }
}

#areaInfo .areainfoQuadrado:hover {
    bottom: 1rem;
    border: 2px solid var(--azul);
}

#areaInfo .areainfoQuadrado img {
    width: 60px;
    height: 60px;
}

#areaInfo .areaInfoCursos h6 {
    color: var(--azul);
}

#areaInfo .areaInfoTotalAlunos h6  {
    color: var(--verde)
}

#areaInfo .areaInfoAlunosInscritos h6 {
    color: var(--laranja);
}

#areaInfo .areainfoQuadrado .imagemTemaCurso h6 {
    font-size: 13pt;
    font-family: var(--font4);
}

#areaInfo .areainfoQuadrado .numeroTema {
    font-size: 20pt;
    color: var(--branco);
    font-family: var(--font4);
    text-align: var(--centro);
    font-weight: var(--negrito);
}

#areaInfo .areainfoQuadrado .tema1 {
    color: var(--verde);
}

#areaInfo .areainfoQuadrado .tema2 {
    color: var(--laranja);
}

.paragrafoTema {
    color: var(--branco);
    font-weight: 300 !important;
}

#areaCursos {
    padding: var(--umMeio);
    padding-block: 2.5rem;
    background-color: var(--preta);
}

#contentorCards {
    flex-wrap: wrap;
    display: var(--fx);
    align-items: var(--centro);
    justify-content: var(--centro);
}

#areaCursos p.paragrafoInicial {
    opacity: 0;
    right: 100%;
    padding-block: 1rem;
    position: var(--relativo);
    transition: all 1s ease-in-out;
}

#areaCursos p { 
    color: var(--branco);
    font-family: var(--font1);
}

#areaCursos .cardCurso {
    width: 400px;
    height: 510px;
    cursor: pointer;
    border-width: 4px;
    border: 1px solid;
    display: var(--fx);
    margin: var(--meia);
    transform: scale(.1);
    padding-bottom: 1rem;
    border-image-slice: 1;
    text-align: var(--centro);
    align-items: var(--centro);
    border-radius: var(--meia);
    flex-direction: var(--coluna);
    justify-content: var(--espaco);
    transition: all .5s ease;
    border-image-source: var(--gradiente2);
}

#areaCursos .cardCurso .imgCurso {
    width: 100%;
    border-radius: var(--meia);
    border-bottom-left-radius: 250px;
    border-bottom-right-radius: 250px;    
}

#areaCursos .cardCurso .imgCurso img {
    width: 100px;
}

#areaCursos .cardCurso .sobreCurso .nomeCurso {
    font-size: 17pt;
    color: transparent;
    margin-bottom: 1rem;
    background-clip: text;
    font-family: var(--font4);
    font-weight: var(--negrito);
    background-image: var(--gradiente1);
}

#areaCursos hr {
    width: 50%;
    margin-left: 25%;
    color: transparent;
    background-clip: text;
    background-image: var(--gradiente1);
}

#areaCursos .cardCurso .sobreCurso .textoCurso {
    padding: 1rem;
    text-align: justify;
    font-family: var(--font4);
}

#areaCursos .cardCurso .extraCurso .precoCurso {
    display: var(--nada);
}

#areaCursos .cardCurso .extraCurso .precoCurso .moedaCurso {
    font-size: 13pt;
    font-family: var(--font4);
    font-weight: var(--negrito);
}

#areaCursos .cardCurso .extraCurso .precoCurso .valorCurso {
    font-size: 16pt;
    font-weight: var(--negrito);
    font-family: var(--font4);
}

.palavraExtra {
    font-size: 20pt;
    font-family: var(--font4);
    text-transform: uppercase;
    font-weight: var(--negrito);
}

.subTitulos {
    font-size: 35pt;
    text-align: left;
    color: var(--branco);
    font-family: var(--font4);
}

.tituloServico, .tituloParceiro {
    text-align: var(--centro) !important;
}

.textoGradiente {
    color: transparent;
    background-clip: text;
    background-image: var(--gradiente1);
}

.faleConnosco {
    top: 6rem;
    text-align: var(--centro);
    position: var(--relativo);
}

#areaVideos {
    padding-inline: var(--umMeio);
    background-color: var(--preta);
}

#areaVideos > p {
    right: 100%;
    color: var(--branco);
    font-family: var(--font1);
    position: var(--relativo);
    padding-block: var(--meia);
    transition: all 1s ease-in-out;
}

#areaVideos #contentorVideo {
    display: var(--fx);
    padding: var(--meia);
    align-items: var(--centro);
    justify-content: var(--centro);
}

#areaVideos #contentorVideo iframe {
    width: 100%;
    cursor: pointer;
    border: 2px solid;
    border-width: 5px;
    border-image-slice: 1;
    border-image-source: var(--gradiente1);
}

#areaVideos #areaVideoTexto {
    font-size: 13pt;
    color: var(--branco);
    margin-top: var(--meia);
    font-family: var(--font4);
    font-weight: var(--negrito) !important;
}

#areaVideos #areaVideoTexto .numeroAviso {
    font-size: 14pt;
    color: transparent;
    background-clip: text;
    background-image: var(--gradiente1);
}

#areaQuemSomos {
    padding-top: 1.5rem;
    padding-bottom: var(--umMeio);
    padding-inline: var(--umMeio);
    background-color:var(--preta);
    border-bottom-right-radius: 400px 30px;
}

#areaQuemSomos #contentorTexto h3 {
    font-size: 27pt;
    color: var(--branco);
    font-family: var(--font4);
    font-weight: var(--negrito);
}

#areaQuemSomos #contentorTexto .textoSobre p {
    width: 90%;
    color: var(--branco);
    font-family: var(--font1);
}

#areaExtra {
    display: var(--fx);
    align-items: var(--centro);
    padding-inline: var(--umMeio);
    justify-content: space-around;
    background-color: var(--preta);
}

#areaExtra #imagemExtraExtra img {
    width: 30rem;
}
    
#areaExtra #textoExtraExtra {
    display: var(--fx);
    align-items: var(--centro);
    flex-direction: var(--coluna);
}

#areaExtra #textoExtraExtra h1 {
    font-size: 60pt;
    font-family: var(--font4);
    font-weight: var(--negrito);
}

#areaExtra #textoExtraExtra small {
    font-size: 16.7pt;
    margin-top: -1.5rem;
    color: var(--branco);
    font-family: var(--font1);
    font-weight: var(--negrito);
}

#parceiros {
    padding-inline: var(--umMeio);
    background-color: var(--preta);
}

#parceiros p {
    color: var(--branco);
    font-family: var(--font1);
    text-align: var(--centro);
}

#parceiros #contentorParceiros {
    display: var(--fx);
    padding-block-end: 7rem;
    align-items: var(--centro);
    flex-direction: var(--espaco);
    justify-content: space-evenly;
    padding-block-start: var(--meia);
}

#parceiros #contentorParceiros img {
    width: 100px;
    height: 90px;
    transition: filter .5s ease-in;
}

#servicos {
    background: var(--preta);
    padding-inline: var(--umMeio);
}

#servicos p {
    right: 100%;
    color: var(--branco);
    font-family: var(--font1);
    position: var(--relativo);
    transition: all 1s ease-in-out;
}

#servicos #contentorServicos {
    display: var(--fx);
    align-items: var(--centro);
    justify-content: space-around;
}

#servicos #contentorServicos .cardCurso {
    width: 40rem;
    height: 100px;
    display: var(--fx);
    padding-inline: 6rem;
    margin-block-start: 1rem;
    border-radius: var(--meia);
    align-items: var(--centro);
    border: 2px solid var(--azul);
    background-color: var(--preta1) !important;
}

#servicos #contentorServicos .cardCurso h3 {
    color: var(--branco);
    font-family: var(--font4);
}

#servicos #contentorServicos .cardServico1 {
    background: var(--backImgCard) url("../img/dev.png");
}

#servicos #contentorServicos .cardServico2 { 
    background: var(--backImgCard) url("../img/auditoria.png");
}

#servicos #contentorServicos .cardServico3 { 
    background: var(--backImgCard) url("../img/formacao.png");
}

#servicos #contentorServicos .cardServico4 {
    background: var(--backImgCard) url("../img/data.png");
}

#servicos #contentorServicos .cardServico5 {
    background: var(--backImgCard) url("../img/tecnologias.png");
}

#servicos #contentorServicos .cardServico6 {
    background: var(--backImgCard) url("../img/tecnologias.png");
}

#servicos #contentorServicos .cardServico7 { 
    background: var(--backImgCard) url("../img/seguranca.png");
}

#servicos #contentorServicos .cardServico8 { 
    background: var(--backImgCard) url("../img/rede.png");
}

#servicos #contentorServicos .cardServico9 { 
    background: var(--backImgCard) url("../img/cloud.png");
}

#servicos #contentorServicos .cardServico10 { 
    background: var(--backImgCard) url("../img/solucoes.png");
}
#servicos #contentorServicos .cardServico100 { 
    background: var(--backImgCard) url("../img/appMobile.png");
}
#servicos #contentorServicos .cardServico101 { 
    background: var(--backImgCard) url("../img/hospedagem.png");
}

#complementares {
    display: var(--fx);
    padding: 6rem var(--umMeio);
    background-color: var(--preta);
    justify-content: space-around;
}

#complementares #contentorComplementares {
    width: 50%;
    right: 100%;
    flex-wrap: wrap;
    display: var(--fx);
    padding-block: 2rem;
    position: var(--relativo);
    align-items: var(--centro);
    justify-content: var(--centro);
    transition: all 1.5s ease-in-out;
}

#complementares #contentorComplementares .cardComplementar {
    width: 250px;
    height: 200px;
    cursor: pointer;
    display: var(--fx);
    transition: all .3s;
    margin: var(--meia);
    border: var(--nada);
    color: var(--branco);
    position: var(--relativo);
    align-items: var(--centro);
    border-radius: var(--meia);
    flex-direction: var(--coluna);
    border: 2px solid var(--azul1);
    justify-content: var(--centro);
    background-color: var(--preta);
}

#complementares #contentorComplementares .cardMoveEsquerda {
    right: 0;
}

#complementares #contentorComplementares .cardMoveDireita {
    left: 0;
}

#complementares #contentorComplementares .cardComplementar:hover {
    border: 2px solid var(--azul);
}

#complementares #contentorComplementares .cardMoveEsquerda:hover {
    right: 2.5rem;
}

#complementares #contentorComplementares .cardMoveDireita:hover {
    left: 2.5rem;
}

#complementares #contentorComplementares .cardComplementar img {
    width: 60px;
}

#complementares #contentorComplementares .cardComplementar h4 {
    font-size: 1.4rem;
    font-family: var(--font4);
}

#complementares #contentorComplementares .cardComplementar p {
    font-family: var(--font4);
}

#complementares #contentorFormComplementares {
    left: 100%;
    display: var(--fx);
    padding: var(--meia);
    position: var(--relativo);
    text-align: var(--centro);
    border-radius: var(--meia);
    flex-direction: var(--coluna);
    border: 2px solid var(--azul);
    border: var(--nada) !important;
    background-color: var(--preta);
    transition: all 1.5s ease-in-out;
}

#complementares #contentorFormComplementares input, 
#complementares #contentorFormComplementares textarea {
    border: var(--nada);
    margin: var(--meia);
    outline: var(--nada);
    color: var(--branco);
    transition: border .3s;
    font-family: var(--font4);
    font-weight: var(--negrito);
    background-color: transparent;
    padding: var(--meia) var(--umMeio);
    border-bottom: 1.5px solid var(--azul1);
}

#complementares #contentorFormComplementares input:hover, 
#complementares #contentorFormComplementares input:focus {
    border-bottom: 2px solid var(--azul);    
}

#complementares #contentorFormComplementares input[name="objetivo"] {
    width: 97%;
}

#complementares #contentorFormComplementares textarea {
    width: 97%;
    height: 250px;
    resize: var(--nada);
    border-radius: var(--meia);
    border: 1.5px solid var(--azul1);
}

#complementares #contentorFormComplementares textarea:hover, 
#complementares #contentorFormComplementares textarea:focus {
    border: 2px solid var(--azul);
}

#rodape {
    text-align: var(--centro);
    padding-block-start: .5rem;
    justify-content: var(--centro);
    background-color: var(--preta);
}

#rodape #contentorRodape h3 {
    font-size: 11pt;
    font-weight: 400;
    color: var(--branco);
    padding: var(--meia);
    border-radius: .3rem;
    font-family: var(--font4);
    background-color: var(--preta1);
    box-shadow: 0 0 .1rem var(--branco);
}

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

    /* Autor: Calebe "CL" Lukombo */

    :root {
        --in: inline-block;
    }

    body {
        overflow-x: hidden !important;
    }

    .subTitulos {
        font-size: 25pt;
    }

    .divColorida {
        width: 15px;
        height: 5px;
    }

    .faleConnosco {
        bottom: 0;
        top: 4.3rem;
        position: var(--relativo);
    }

    .paragrafoInicial {
        text-align: justify !important;
    }

    #menu .divMenuOpcoes {
        gap: 0;
        right: 0;
        top: -100%;
        width: 60%;
        z-index: 10;
        position: fixed;
        display: var(--fx);
        height: max-content;
        transition: 1.5s ease;
        pointer-events: var(--nada);
        flex-direction: var(--coluna);
        background-color: var(--preta);
    }
    
    #menu .divMenuOpcoes a {
        opacity: 0;
        text-align: left;
        font-family: var(--font4);
    }

    #menu .divMenuOpcoes .opcaoMenu1 {
        transition: .5s .2s;
    }

    #menu .divMenuOpcoes .opcaoMenu2 {
        transition: .5s .4s;
    }

    #menu .divMenuOpcoes .opcaoMenu3 {
        transition: .5s .6s;
    }

    #menu.active .divMenuOpcoes {
        top: 0%;
        pointer-events: all;
    }

    #menu.active .divMenuOpcoes a {
        opacity: 1;
    }

    #menu .divMenuHamburguer {
        z-index: 100;
        display: block;
        padding: .5rem;
        cursor: pointer;
    }

    #menu .divMenuHamburguer img {
        width: 35px;
        transition: all 20s ease;
    }

    #divTextoImagemPrincipal #areaTextoPrincipal h1 span#palavraZeiner {
        width: 100%;
    }

    #divTextoImagemPrincipal h1 {
        text-align: left;
        font-weight: 15pt;
    }

    #divTextoImagemPrincipal {
        text-align: var(--centro);
    }

    #divTextoImagemPrincipal {
        padding-block: var(--meia);
        flex-direction: var(--coluna);
    }

    #divTextoImagemPrincipal #areaTextoPrincipal h1 {
        font-size: 15pt;
    }
    
    #divTextoImagemPrincipal #areaTextoPrincipal p {
        font-weight: 300;
        text-align: justify;
    }

    #divTextoImagemPrincipal #areaImgPrincipal #imgPrincipal{
        width: 95%;
    }

    #areaInfo {
        align-items: var(--centro);
        flex-direction: var(--coluna);
        justify-content: var(--centro);
    }
    
    #areaInfo .areainfoQuadrado {
        width: 70%;
        text-align: var(--centro);
        border-radius: var(--radiano);
        transition: all .3s ease-in-out;
    }

    #areaCursos p { 
        /* parágrafo principal de cursos */
        text-align: var(--centro);
    }

    #areaVideos > p {
        text-align: var(--centro);
    }

    #areaVideos #areaVideoTexto {
        text-align: left    ;
        font-weight: 400 !important;
    }

    #areaExtra {
        align-items: var(--centro);
        justify-content: var(--centro);
    }
    
    #areaExtra #imagemExtraExtra img {
        width: 60%;
    }

    #areaExtra #textoExtraExtra {
        display: var(--fx);
        align-items: var(--centro);
        flex-direction: var(--coluna);
    }
    
    #areaExtra #textoExtraExtra h1 {
        font-size: 14pt;
    }

    #areaExtra .divColoridaExtra {
        width: 100%;
        height: .15rem;
    }
    
    #areaExtra #textoExtraExtra small {
        font-size: 7pt;
        width: max-content;
        color: var(--branco);
        font-family: var(--font1);
        font-weight: var(--negrito);
    }
    
    #parceiros #contentorParceiros {
        padding-block-end: 3.5rem;
        flex-direction: var(--coluna);
    }
    
    #parceiros #contentorParceiros img {
        margin-top: var(--meia);
    }

    #servicos p {
        text-align: var(--centro)
    }
    
    #servicos #contentorServicos {
        flex-direction: var(--coluna);
    }
    
    #servicos #contentorServicos .cardCurso {
        width: 100%;
    }
    
    #servicos #contentorServicos .cardCurso h3 {
        text-align: var(--centro);
    }

    #areaQuemSomos {
        padding-block-end: 2rem;
        border-bottom-right-radius: 210px 20px;
    }

    #areaQuemSomos #contentorSobre {
        display: block;
    }
    
    #areaQuemSomos #contentorImagem2 {
        display: block;
        border-radius: 20px;
        background: var(--gradiente4);
    }
    
    #areaQuemSomos #contentorImagem2 img {
        width: 100%;
    }

    #areaQuemSomos #contentorTexto h3 {
        font-size: 20pt;
        text-align: var(--centro);
    }
    
    #areaQuemSomos #contentorTexto .textoSobre p {
        width: 100%;
        text-align: var(--centro);
    }
        
    #areaQuemSomos #contentorImagem {
        display: var(--nada);
    }

    #complementares {
        display: var(--fx);
        align-items: var(--centro);
        flex-direction: var(--coluna);
        justify-content: var(--centro);
    }

    #complementares #contentorComplementares {
        width: 100%;
        display: var(--fx);
        align-items: var(--centro);
        flex-direction: var(--coluna);
        justify-content: var(--centro);
    }

    #complementares #contentorComplementares .cardComplementar {
        background-color: var(--preta1);
    }

    /* Autor: Calebe "CL" Lukombo */
}

@media screen and (min-width: 768px) and (max-width: 991px) {

    /* Autor: Calebe "CL" Lukombo */

    body {
        overflow-x: hidden;
    }

    .faleConnosco {
        top: 4rem;
    }

    #areaVideos #areaVideoTexto {
        text-align: var(--centro);
    }

    #areaExtra #textoExtraExtra h1 {
        font-size: 30pt;
    }

    #areaQuemSomos #contentorTexto {
        text-align: var(--centro);
    }

    #areaQuemSomos #contentorTexto h3 {
        font-size: 22pt;
    }
    
    #areaQuemSomos #contentorTexto .textoSobre p {
        width: 90%;
        font-weight: 200;
    }
        
    #areaQuemSomos #contentorImagem img {
        width: 350px;
        border-radius: 40%;
    }
    
    #servicos #contentorServicos .cardCurso {
        width: 99%;
    }

    #complementares #contentorComplementares .cardComplementar {
        /* position: static; */
        background-color: var(--preta1);
    }
    
    #complementares #contentorComplementares .cardComplementar:hover {
        transform: scale(1.05);
        border: 2px solid var(--azul);
    }

    #complementares #contentorFormComplementares {
        height: max-content;
        background-color: var(--preta);
    }

    
}

@media screen and (min-width: 992px) and (max-width: 1200px) {

    

    body {
        overflow-x: hidden;
    }

    #divTextoImagemPrincipal #areaTextoPrincipal h1 {
        font-size: 37pt;
        color: var(--branco);
        font-family: var(--font4);
        padding-block-end: var(--meia);
    }
    
    #complementares #contentorComplementares .cardComplementar {
        background-color: var(--preta1);
    }

   
    
} 

@media screen and (min-width: 1201px) and (max-width: 1400px) {

    

    body {
        overflow-x: hidden;
    }

    #divTextoImagemPrincipal #areaTextoPrincipal h1 {
        font-size: 35pt;
    }

    #areaInfo {
        justify-content: left;
    }

    #servicos #contentorServicos .cardCurso {
        width: 100%;
    }

    #complementares #contentorComplementares .cardComplementar {
        background-color: var(--preta1);
    }

  
}

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

   

    body {
        overflow-x: hidden;
    }

    #divTextoImagemPrincipal {
        justify-content: var(--espaco);
    }

    #areaInfo {
        justify-content: var(--centro);
    }    

    #complementares #contentorComplementares .cardComplementar {
        background-color: var(--preta1);
    }

    
}