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

:root{

    /* cores */
    --main-bg-branco: #FFFFFF;
    --main-bg--azul-escuro: #081544;
    --main-roxo-enfeitado: #9A92FF;
    --main-cinza-claro: #F8F8FF;
    --main-azul: #4A64C2;

    --font-color2-cinza: #82849A;
    --font-color3-branco1: rgba(255, 255, 255, 0.8);
    --font-color4-lilas: #EDDBFE;
    --font-color5-branco2: #FFFFFF;
    --font-color6-ciano: #475070;

    /* outros */

    --padding-section: 2em 15%;
    --padding-section-tutorial: 4em 24%;
}

*{
    margin:0;
    padding:0;
    border:0;
    box-sizing: border-box;
}

/*                               pre-definições                               */

p,a, span, li {font-family: 'Poppins', sans-serif;}

a{text-decoration: none;}
li{list-style-type: none;}


.titulo{
    position: relative;
    font-size: 50px;
    color: var(--main-roxo-enfeitado);
    font-family: 'Anton', sans-serif;
    font-weight: 500;
    z-index: 2;

}

.subtitulo{
    position: relative;
    font-size: 19px;
    line-height: 26px;
    font-family: 'Poppins', sans-serif;
    color: var(--font-color2-cinza);
    z-index: 1;
    margin-top: -0.1em;
    font-weight: 400;
}

.texto{
    font-size: 19px;
    font-weight: 300;
    line-height: 26px;
    font-family: 'Poppins', sans-serif;
    color: var(--font-color2-cinza);
}

.background-bolhas, .background-bolhas2, .background-bolhas3{
    z-index: 0;
    position: absolute;
    pointer-events: none;
    max-width: none; /* Garante que não sejam limitadas pela largura */

}

.background-bolhas img{
    position: absolute;
    opacity: 0.74;
}

/* botão pre feito */
.botao{
    margin-top: 1.7em;
    display: flex;
    justify-content: space-between;
    padding: 0 2.4em;
    align-items: center;
    background-color: var(--main-roxo-enfeitado);
    box-sizing: border-box;
    width: 205.37px;
    height: 50px;
    border-radius: 25px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.botao p{
    font-size: 18px;
    font-weight: 400;
    transform: scale(1.05);
}

.botao:hover{
    transform: scale(1.05);
}

body{
    height: 100%;
    position: relative;
    
}


/* classes para a animação das sections */
.hidden {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  .visible-up {
    opacity: 1;
    transform: translateY(0);
  }
  
  .visible-down {
    opacity: 1;
    transform: translateY(0);
  }
  

/*                               header                               */

header h1 a img{
    width: 230px;
}

header h1 a{
    display: flex;
    align-items: center;
}

header {
    background-color: var(--main-bg-branco);
    display: flex;
    justify-content: space-between;
    height: 70px;
    box-sizing: border-box;
    padding: 0 5em;
    align-items: center;
    color: var(--main-roxo-enfeitado);
    font-size: 17px;
    font-weight: 500;
    z-index: 2;
}

header a{color: var(--main-roxo-enfeitado)}


header nav .nav-principal {
    list-style: none;
    display: flex;
    gap: 1.5em;
}

header nav .nav-principal li {
    position: relative;
    padding: 0.5em;
}

header nav .nav-principal li ol {
    z-index: 100;
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--main-bg-branco);
    padding: 0;
    border-top: solid 2px var(--main-roxo-enfeitado);
    margin-top: 0.5em;
    width: 100%;
    box-shadow: 0 4px 8px #00000033;
    opacity: 0;
    transform: translateY(-8px);
    list-style: none;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

header nav .nav-principal li:hover{
    cursor: pointer;
}

header nav .nav-principal li:hover ol {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

header nav .nav-principal li ol li{padding: 0;}

header nav .nav-principal ol li a{
    padding: .5em;
    display: block;
    transition: background-color 0.25s ease;
}

header nav .nav-principal ol li:hover a{
    background-color: var(--main-roxo-enfeitado);
    color: var(--main-bg-branco);
}

/*  menu hamburguer */

body #sombra-menu-hamburguer{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 100vw;
    background-color: #101c4928;
    z-index: 10;
    transition: all 0.4s ease;
}

body #menu-hamburguer{
    display: none;
    position: fixed;
    background-color: var(--main-bg-branco);
    box-sizing: border-box;
    width: 300px;
    height: 100%;
    z-index: 100;
    transform: translateX(-301px);
    transition: transform 0.5s ease;
}

body #menu-hamburguer h1{
    width: 100%;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.6em;
    margin-bottom: 0.6em;
    border-bottom: solid 1px var(--main-roxo-enfeitado);
}

body #menu-hamburguer h1 a img{
    width: 192px;
    
}

body #menu-hamburguer nav{
    height: auto;
    display: block;
    padding: 0 2em;
}

body #menu-hamburguer nav .nav-principal{
    display: flex;
    width: 100%;
    flex-direction: column;
    height: 153px;
}

body #menu-hamburguer nav .nav-principal li{
    width: 160px;
    height: auto;
    padding-bottom: 1em;
}

body #menu-hamburguer nav .nav-principal li a, body #menu-hamburguer nav .nav-principal li div span p{
    display: flex;
    align-items: center;
    color: var(--main-roxo-enfeitado);
    font: 300;
    font-size: 19px;
}

body #menu-hamburguer nav .nav-principal li div{
    cursor: pointer;
    display: flex;
}

body #menu-hamburguer nav .nav-principal li div span{
    display: flex;
}

body #menu-hamburguer nav .nav-principal li div span p{
    padding-right: 8px;
}

body #menu-hamburguer nav .nav-principal li a img, body #menu-hamburguer nav .nav-principal li div img:nth-child(1){
    max-width: 40px;
    padding-right: 20px;
}

body #menu-hamburguer nav .nav-principal li #lista-deslizavel{
    max-height: 70px;
    display: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

body #menu-hamburguer nav .nav-principal li #lista-deslizavel li{
    transform: translateY(-10px);
}

body #menu-hamburguer nav .nav-principal li #lista-deslizavel li:nth-child(1){
    margin-top: 1em;
    margin-bottom: 0.1em;
}

body #menu-hamburguer nav .nav-principal li #lista-deslizavel li a{
    display: flex;
    align-items: center;
    color: var(--main-roxo-enfeitado);
    font: 200;
    font-size: 18px;
}

body #menu-hamburguer nav .nav-principal li:hover  {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body #menu-hamburguer #botao-lateral{
    cursor: pointer;
    transform: rotateY(180grad);
    position: fixed;
    right: -26px;
    top: 350px;
    transition: transform 0.5s ease;
}

body #menu-hamburguer #bolhas{
    position: absolute;
    left: 0;
    top: 400px;
    transform: translateX(-102px);
    transition: transform 0.8s ease;

}


/*                               home                               */

/*                               main                               */
main{
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: var(--main-bg--azul-escuro);
    min-height: 30em;
    font-weight: 300;
    width: 100%;
    max-width: 180em;
    margin: 0 auto;
    overflow: hidden;
}

main #destaque-home{
    z-index: 2;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: var(--padding-section);
    min-height: 600px;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../imagens/backgrounds/destaque-home.svg');
}

main #destaque-home div .subtitulo {
    max-width: 538px;
}

main #destaque-home .background-bolhas{
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(87px);
}
main #destaque-home .background-bolhas img{
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(87px);
    
}

main #destaque-home div{
    z-index: 1;
}

main #destaque-home #destaque-desktop{
    z-index: 1;
}

main #destaque-home div h1{
    font-size: 90px;
    font-family: 'Anton', sans-serif;
    font-weight: 500;
    line-height: 88px;
    color: var(--main-roxo-enfeitado);
    padding-bottom: .15em;
}

main #destaque-home div h1 span{
    color: var(--main-bg--azul-escuro);
    font-family: 'Anton', sans-serif;
}

main #destaque-home div .botao:hover{
    background-color: #8780e9;
}

main #destaque-home div .botao p{
    color: var(--font-color5-branco2);
}

/*                               home(sessão 2)                               */

main #tutoriais-home{
    padding: var(--padding-section);
    padding-top: 0;
    margin-bottom: 2em;
    position: relative;
}

main #tutoriais-home .background-bolhas{
    left: 0;
    top: -37%;
    position: absolute;
}

main #tutoriais-home .subtitulo{
    color: var(--font-color4-lilas);
}

/* a formatação dos cards são usadas na pagina de tutoriais */

main .lista-tutoriais{
    z-index: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em;
    padding-top: 2em;
}

main .lista-tutoriais.filtered {
    justify-content: flex-start;
}


main .lista-tutoriais li {
    width: 23%;
    min-height: 328.5px;
}

main .lista-tutoriais li a{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 2em;
    border-radius: 11.7px;
    box-sizing: border-box;
    background-color: var(--main-cinza-claro);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

/* Efeito hover para aumentar o card */
main .lista-tutoriais li a:hover {
    transform: scale(1.07);
    background-color: #E6F3FC;
}

main .lista-tutoriais li a div{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
}

main .lista-tutoriais li a div p {
    color: var(--font-color2-cinza);
    font-size: 17.3px;
    font-weight: 400;
    text-align: left;
    transition: transform 0.3s ease;
}

main .lista-tutoriais li a div:hover p {
    transform: scale(1.04); 
}

main .lista-tutoriais li a div figure{
    height: 63px;
    width: 63px;
    background-color: #E6F3FC;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 11.7px;
}

main .lista-tutoriais li a div h2{
    font-size: 24.3px;
    color: var(--font-color6-ciano);
    font-family: 'Anton', sans-serif;
    font-weight: 500;
    margin: 0.2em 0;
}

main .lista-tutoriais li a .figure-seta{
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
}

main #tutoriais-home .botao{
    z-index: 1;
    margin-top: 1.7em;
    display: flex;
    justify-content: space-between;
    padding: 0 2.4em;
    align-items: center;
    background-color: var(--main-bg-branco);
    transition: transform 0.3s ease;
    box-sizing: border-box;
    width: 205.37px;
    height: 50px;
    border-radius: 25px;
}

main #tutoriais-home .botao:hover{
    transform: scale(1.05);
}

main #tutoriais-home .botao p{
    color: var(--main-roxo-enfeitado);
}

/*                               home(sessão 3)                               */

main #servicos-prestados{
    background-color: var(--main-bg-branco);
    padding: var(--padding-section);
    position: relative;
    z-index: 2;
}

main #servicos-prestados ol{
    display: flex;
    justify-content: space-between;
    padding: 2.2em 0;
    flex-wrap: wrap;
    gap: 1em;
}

main #servicos-prestados ol li{
    height: 266px;
    background-position: right;
    background-repeat: no-repeat;
    padding: 1.3em;
    box-sizing: border-box;
    flex-wrap: wrap;
    background-size: cover;
    padding: 1.8em;
    width: 23%;
    height: auto;
    border-radius: 50px;
}

main #servicos-prestados ol li div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.6em;
    border-bottom: solid 1px #ffffff;
}

/*sem variavel pra mim não surtar fazendo o darkmode*/

main #servicos-prestados ol li h2{
    color: #FFFFFF;
    font-family: poppins, 'sans serif';
    font-weight: 600;
    font-size: 20.3px;
}

main #servicos-prestados ol li p{
    padding-top: 0.6em;
    color: rgba(255, 255, 255, 0.8);
}

main #servicos-prestados ol li:nth-child(1){background-image: url(../imagens/backgrounds/card-manutencao.png);}
main #servicos-prestados ol li:nth-child(2){background-image: url(../imagens/backgrounds/card-redes.png);}
main #servicos-prestados ol li:nth-child(3){background-image: url(../imagens/backgrounds/card-compras.png);}
main #servicos-prestados ol li:nth-child(4){background-image: url(../imagens/backgrounds/card-analise.png);
    background-position: left;
}

/*                               home(seção 4)*/

main #sec-numeros{
    padding: var(--padding-section);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

main #sec-numeros h1{
    color: var(--main-roxo-enfeitado);
}

main #sec-numeros .background-bolhas-superior{
    z-index: 0;
    position: absolute;
    right: 0;
    top: -20%;
}

main #sec-numeros .background-bolhas-inferior img{
    position: absolute;
    left: 0;
    bottom: -15%;
    z-index: 0;
}

main #sec-numeros ol {
    width: 100%;
    display: flex;
    gap: 1em;
    padding: 3em 0;
    justify-content: space-between;
    z-index: 1;
}

main #sec-numeros ol li {
    width: calc(20% - 1em);
    display: flex;
    align-items: center;
    flex-direction: column;
}

main #sec-numeros p{
    color: var(--font-color4-lilas);
}

main #sec-numeros ol li figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    min-height: 110px;
    border-radius: 50%;
    background-color: #3960EC;
    margin-bottom: 0.6em;
}

main #sec-numeros ol li h2, main #sec-numeros ol li h2 span {
    font-size: 41px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: var(--font-color4-lilas);
    display: flex;
    flex-direction: row;
}

main #sec-numeros ol li p {
    width: 140px;
    text-align: center;
    font-size: 19px;
    font-weight: 400;
    color: var(--font-color4-lilas);
}

/*                               home (5)                               */

main #conheca-campus{
    padding: var(--padding-section);
    background-image: url("../imagens/backgrounds/mapa.svg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    z-index: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

main #conheca-campus .titulo, main #conheca-campus .subtitulo{
    color: #ffffff;
}

main #conheca-campus .texto{
    color: #ffffff;
    width: 350px;
    font-size: 15px;
}

main #conheca-campus div{
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
}

main #conheca-campus div figure{
    background-color: var(--main-roxo-enfeitado);
    width: 37px;
    min-width: 37px;
    height: 37px;
    border-radius: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
}

main #conheca-campus div figure img{
    width: 16px;
}

main #conheca-campus div .botao{
    background-color: var(--main-bg-branco);
    margin-top: 1.7em;
    display: flex;
    justify-content: space-between;
    padding: 0 1.2em;
    align-items: center;
    box-sizing: border-box;
    width: 240px;
    min-width: 240px;
    height: 50px;
    border-radius: 25px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

main #conheca-campus div .botao p{
    color: var(--main-roxo-enfeitado);
}


/*                               footer                               */

footer{
    position: relative;
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 2em 5em;
    background-color: var(--main-bg-branco);
}

footer .background-footer{
    position: absolute;
    z-index: 1;
    left: 0;
    height: 260px;
}

footer .background-footer-responsivo{
    display: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 40%;

}

footer .div-superior{
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding: 1.2em 0;
    animation-name: rodinha;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes rodinha{
    0%{border-bottom: solid #ffffff .1em;}
    30%{border-bottom: solid #4567e3 .1em;}
    70%{border-bottom: solid #2d4188 .1em;}
    100%{border-bottom: solid #ffffff .1em;}
  }

footer .div-superior h1 a img{
    width: 230px;
}

footer .div-superior h1 a{
    display: flex;
    align-items: center;
}

footer .div-superior nav .nav-principal {
    list-style: none;
    display: flex;
    gap: 1.5em;
    z-index: 1000;
}

footer .div-superior nav .nav-principal li {
    position: relative;
    padding: 0.5em;
}

footer .div-superior nav .nav-principal li ol p{color: var(--main-roxo-enfeitado);}

/* lista reaproveitada do header pra poupar tempo */

footer .div-superior nav .nav-principal li ol {
    display: block;
    position: absolute;
    top: -220%;
    left: 0;
    background-color: var(--main-bg-branco);
    padding: 0;
    border-bottom: solid 2px var(--main-roxo-enfeitado); 
    margin-bottom: 0.5em;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(8px);
    list-style: none;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

footer .div-superior nav .nav-principal li:hover ol {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

footer .div-superior nav .nav-principal li ol li{padding: 0;}

footer .div-superior nav .nav-principal ol li a{
    padding: .5em;
    display: block;
    transition: background-color 0.25s ease;
}

footer .div-superior nav .nav-principal ol li:hover a{
    background-color: var(--main-roxo-enfeitado);
    color: var(--main-bg-branco);
}

footer .div-superior nav ol li img{
    transform: rotate(180deg);
}

footer .div-inferior{
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8em 0;

}

footer .div-inferior figure{
    height: 50px;
}

footer .div-inferior figure .logo-ifrn{
    height: 46px;
    padding-bottom: .95em;
    padding-left: .5em;
}

footer .div-inferior p{
    color: var(--font-color4-lilas);
}

footer .div-superior nav ol li a, footer .div-superior nav ol li p, .nav-responsivo li p, .nav-responsivo li a{
    color: var(--main-roxo-enfeitado);
    font-size: 17px;
    font-weight: 500;
}


/*                               footer responsivo                               */
.nav-responsivo{
    display: none;

}

.nav-responsivo ol li ol li a{
    font-weight: 300;
}

.nav-responsivo ol li{
    padding-bottom: 0.5em;
}

.nav-responsivo ol li ol li{padding:0;}

footer .footer-responsivo{display: none;}

footer .footer-responsivo figure{
    padding: 1.5em 2em;
    justify-content: space-between;

}

/*                               Sobre nós                               */

#sobre main{
    background-color: var(--main-bg-branco);
}

#sobre main section{
    position: relative;
    padding: var(--padding-section);
}

#sobre main section .background-bolhas{
    left: 0;
    top: 368px;
    width: 200px;
}

#sobre main section .background-bolhas2{
    z-index: 0;
    top: 0;
    right: 0;
    transform: rotate(87px);
}

#sobre main .sobre-texto-imagem{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

#sobre main section #destaque{
    position: relative;
    z-index: 3;
    padding-left: 1em;
    max-width: 700px;
}

#sobre main section .subtitulo{
    padding-bottom: 1em;
}

#sobre main section .texto{
    color: var(--font-color2-cinza);
}

#sobre main .sobre-texto-imagem #tecnicos{
    position: relative;
    z-index: 3;
    padding-right: 2em;

    max-width: 700px;
}

#sobre main .sobre-texto-imagem h2{
    font-size: 40px;
}

#sobre main #proposito>div{
    width: 100%;
    height: auto;
    background-color: var(--main-bg--azul-escuro);
    border-radius: 30px;
    padding: 2em;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#sobre main #proposito div h3{
    font-size: 40px;
}

#sobre main #proposito div .texto{
    color: #CDB1EF;
}


/* little slider que não é slider */
#sobre main .carousel {
    position: relative;
    width: 100%;
    height: 270px;
    overflow: scroll;
    display: flex;
    align-items: center;
    gap: 3em;
    overflow-y: hidden;
    margin-bottom: 3em;
    padding-bottom: 2em;

}

#sobre main .carousel::-webkit-scrollbar {
    height: 5px; /* Altura da barra */
    max-width: 100%;
}

#sobre main .carousel::-webkit-scrollbar-track {
    background: var(--font-color2-cinza);
    background: var(--main-cinza-claro);
    border-radius: 4px;
}

#sobre main .carousel::-webkit-scrollbar-thumb {
    background: var(--font-color2-cinza);
    border-radius: 4px;
}

#sobre main .carousel .slide {
width: 356px;
border-radius: 50px;
height: 230px;
flex-shrink: 0;
object-fit: cover;
background-color: var(--main-cinza-claro);
box-sizing: border-box;
padding: 1.4em 1.5em;
text-align: center;
border-bottom: 3px solid var(--main-roxo-enfeitado);

}

#sobre main .carousel .slide span{
    height: 50px;
}

#sobre main .carousel .slide span h3{
    font-size: 15px;
    font-weight: 500;
    padding-bottom: 6px;
}

#sobre main .carousel .slide p{
    font-size: 14px;
    font-weight: 400;
    line-height: 23px;
    
}




/*                                tutoriais                                */

#tutoriais main{
    background-color: var(--main-bg-branco);
}

#tutoriais main section{
    padding: var(--padding-section);
    min-height: 450px;
    position: relative;
}



#tutoriais main section .lista-tutoriais li .destaque-tutorial{
    background-color: #FF5627;
    width: 89.56px;
    height: 31px;
    color: var(--font-color5-branco2);
    font-size: 12.63px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    position: absolute;
    right: 32px;
}

#tutoriais main section figure .background-bolhas{
    top: 0;
    right: -30px;
}

#tutoriais main section figure .background-bolhas2{
    left: 0;
    top: 600px;
}

#tutoriais main section figure .background-bolhas3{
    right: 0;
    top: 1000px;
}

#tutoriais main section #pesquisar{
    height: 40px;
    width: 240px;
    display: flex;
    border-radius: 50px;
    background-color: var(--main-cinza-claro);
    box-sizing: border-box;
    border: none;
    margin-top: 2em;
}

#tutoriais main section #pesquisar input[type=image]{
    padding: 10px;
    background-color: var(--main-roxo-enfeitado);
    border-radius: 50%;
    height: 100%;
}


#tutoriais main section #pesquisar input[type=search]:-webkit-autofill {
    background-color: var(--main-cinza-claro) !important;
    color: inherit;
    box-shadow: 0 0 0 100px var(--main-cinza-claro) inset !important; /* Força o fundo desse newba */
    -webkit-text-fill-color: inherit !important; 
}


#tutoriais main section #pesquisar input[type=search]{
    margin-left: 10px;
    border-radius: 50px;
    background-color: var(--main-cinza-claro);
    
    
}

#tutoriais main section #pesquisar input[type=search]:focus{
    outline: none;
    background-color: var(--main-cinza-claro);

}

main section #pesquisar input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
    appearance: none;
}

#tutoriais main section #mensagem-erro{
    display: none;
    width: 100%;
    text-align: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 90px;
    position: relative;
    z-index: 3;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}

#tutoriais main section #mensagem-erro figure, #tutoriais main section #mensagem-erro figure img{
    width: 100%;
    max-width: 500px;
}

#tutoriais main section #mensagem-erro .subtitulo{
    font-size: 40px;
    color: var(--main-roxo-enfeitado);
    margin-top: 0.6em;
    margin-bottom: 0.3em;
}

/*                               equipe                               */

#equipe main{
    background-color: var(--main-bg-branco);
    position: relative;
}

#equipe main section{
    padding: var(--padding-section);
}

#equipe main .background-bolhas{
    left: 0;
    top: 368px;
    width: 200px;
}

#equipe main .background-bolhas2{
    z-index: 0;
    top: 0;
    right: 0;
    transform: rotate(87px);
}

#equipe main section ol{
    padding-top: 2em;
    display: flex;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;

}

#equipe main section ol li{
    background-color: var(--main-cinza-claro);
    width: 23%;
    min-height: 378px;
    border-radius: 33px;
}

#equipe main section ol li .perfil{
    width: 100%;
}

#equipe main section ol li .perfil img{
    width: 100%;
    border-radius: 30px 30px 0 0;
}

#equipe main section ol li div{
    padding: 0.2em 1.3em 1.3em 1.3em;
    box-sizing: border-box;

}

#equipe main section ol li div span{
    color: var(--font-color2-cinza);
    font-size: 14.5px;
    font-weight: 400;
}

#equipe main section ol li div h2{
    font-size: 24.3px;
    color: var(--font-color6-ciano);
    margin-top: -6px;
}

#equipe main section ol li div p{
    font-weight: 400;
    color: var(--main-roxo-enfeitado);
    font-size: 15px;
}

#equipe main section ol #diretor div p{
    color: #FFFFFF;
}

#equipe main section ol #diretor div div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

#equipe main section ol #diretor div h2{
    color: #FFFFFF; /* não vai mudar com o dark theme */
}

#equipe main section ol #diretor{
    background-color: var(--main-roxo-enfeitado);
}

#equipe main section ol #diretor div span{
    color: var(--main-bg--azul-escuro);
    font-weight: 600;
}

/* contato */

#contato main{
    background-color: var(--main-bg-branco);
}

#contato main section{
    padding: var(--padding-section);
    display: flex;
    align-items: center;
}

#contato main section div{
    width: 50%;
}

#contato main section div #contactForm #from_name, #from_email, #message{
    background-color: var(--main-cinza-claro);
    width: 100%;
    min-height: 61px;
    border-radius: 15px;
    color: var(--font-color2-cinza);
    margin-bottom: 15px;
    box-sizing: border-box;
    padding: 1em;
    font-size: 16.5px;
}

#contato main section div #contactForm #from_name, #from_email, #message:focus{border: none;}

#contato main section div #contactForm h2{
    font-size: 25px;
}


#contato main section div #contactForm .botao{
    color: white;
    font-size: 18px;
}

#contato main section div #contactForm .botao:hover{
    cursor: pointer;
}

/* contato */

#contato main section{
    padding: var(--padding-section);
    padding-bottom: 6em;
    background-color: var(--main-bg-branco);
    display: flex;
    justify-content: space-between;
    

}

#contato main section div ol li{
    display: flex;
    align-items: center;
    max-height: 62px;
    max-width: 440px;
    padding-right: 5px;
}

#contato main section div ol li:last-child{
    margin-top: 1em;
}

#contato main section div{
    min-height: 611px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#contato main section div:last-child{
    padding-left: 1em;
}

#contato main section div ol li figure{
    width: 62px;
    min-width: 62px;
    height: 62px;
    min-height: 62px;
    border-radius: 62px;
    background-color: var(--main-cinza-claro);
    display: flex;
    align-items: center;
    justify-content: center;
}

#contato main section div ol li span{
    height: 62px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 15px;
}

#contato main section div ol li span p{
    font-size: 17px;
    font-weight: 450;
}

#contato main section div ol li span a{
    font-size: 17px;
    color: var(--main-roxo-enfeitado);
    font-weight: 400;
    line-height: 18px;
    margin-top: -3px;
}

#contato main section div form input{
    height: 60px;
    width: 100%;
    background-color: var(--main-cinza-claro);
    margin-bottom: 14px;
    border-radius: 30px;
    box-sizing: border-box;
    padding: 2em;
    color: var(--font-color2-cinza);
    font-family: poppins;
    
}

#contato main section div form input::-webkit-input-placeholder, #contato main section div form input:-ms-input-placeholder{
    color: var(--font-color2-cinza);
    font-weight: 100;
    font-family: poppins;
}

#contato main section div form input:focus, #contato main section div form #contato-mensagem:focus{
   outline: none;
}

#contato main section div form #contato-mensagem{
    color: var(--font-color2-cinza);
    font-family: poppins;
    width: 100%;
    height: auto;
    min-height: 220px; 
    margin-top: 10px;
    padding: 2em;
    background-color: var(--main-cinza-claro);
    border-radius: 30px;   
    box-sizing: border-box; 
    resize: vertical;
    overflow: auto; 
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: left;
}

#contato main section div form #contato-mensagem:-webkit-input-placeholder, #contato main section div form #contato-mensagem:-ms-input-placeholder{
    color: red;
}

#contato main section div form h2{
    font-size: 24px;
}
#contato main section div .botao{
    margin: 0;
    display: flex;
    justify-content: center;
}
#contato main section div .botao p{
    color: #FFFFFF;
}

/*                               tutoriais                               */

#tutorial main .titulo{
    font-size: 38px;
    font-family: poppins;
    font-weight: 500;
    color: var(--font-color4-lilas);
    padding-bottom: 0.3em;
}

#tutorial main .texto{
    font-weight: 400;
}

#tutorial main a{
    color: var(--main-roxo-enfeitado);
    font-weight: 600;
    text-decoration: underline;
    
}

#tutorial main a:hover{
    color: #4567e3;
}

#tutorial main a:hover{
    text-decoration: underline;
}

#tutorial main section{
    padding: var(--padding-section-tutorial);
    height: auto;
}

#tutorial main .tutorial-titulo{
    background-image: url(../imagens/backgrounds/section-diagonal.svg);
    z-index: 2;
    position: relative;
    height: auto;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 7em;
    margin-top: -2px;
}

#tutorial main .tutorial-titulo .background-bolhas1{
    position: absolute;
    top: -46px;
    left: -72px;
    z-index: 0;
}

#tutorial main .tutorial-titulo .background-bolhas2{
    right: -10px;
    position: absolute;
    top: 0;
}

#tutorial main .tutorial-titulo .titulo{
    position: relative;
    z-index: 2;
    font-size: 50px;
    color: var(--main-roxo-enfeitado);
    font-family: 'Anton', sans-serif;
    font-weight: 500;
    padding-bottom: 0;

}

#tutorial main .tutorial-titulo .detalhes{
    display: flex;
    position: relative;
    z-index: 2;

}

#tutorial main .tutorial-titulo .detalhes li{
    padding: 1em;
    border-radius: 30px;
    max-height: 38px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-right: 1.5em;
}

#tutorial main .tutorial-titulo .detalhes li{
    font-size: 14.4px;
    font-weight: 600;
}

#tutorial main .tutorial-titulo .detalhes li p{color: var(--font-color2-cinza);}

#tutorial main .tutorial-titulo .detalhes .principal{background-color: #F4EED8;}

#tutorial main .tutorial-titulo .detalhes .principal p{color: #FF7A00;}

#tutorial main .tutorial-titulo .detalhes .tempo{background-color: #D0DAFF;}

#tutorial main .tutorial-titulo .detalhes .tempo p{color: #4A64C2;}



#tutorial main .tutorial-titulo .aviso{
    display: flex;
    padding-top: 3em;
    position: relative;
    z-index: 2;
}
#tutorial main .tutorial-titulo .aviso p{
    padding-left: 0.5em;
    color: #FFC63B;
    font-weight: 400;
}

#tutorial main .sessao-1{
    background-color: var(--main-bg--azul-escuro);
    position: relative;
    z-index: 3;
}

#tutorial main .sessao-1 p{
    color: var(--font-color4-lilas);
    
}

#tutorial main .imagem-texto, #tutorial main .imagem-texto-invertido{
    padding-bottom: 1.3em;
    display: flex;
    justify-content: space-between;
    position: relative;
    gap: 1.3em;
}

#tutorial main .imagem-texto figure, #tutorial main .imagem-texto-invertido figure{
    width: 171%;
    padding-right: 1em;
    max-width: 450px;
}

#tutorial main .imagem-texto figure img, #tutorial main .imagem-texto-invertido figure img{
    width: 100%;
    min-width: 210px;
    max-width: 600px;
}




#tutorial main .sessao-2, #tutorial main .sessao-4, #tutorial main .sessao-2{
    background-color: var(--main-bg-branco);
}
#tutorial main .sessao-2 .titulo, #tutorial main .sessao-4 .titulo{
    color: var(--main-roxo-enfeitado);
}

#tutorial main .sessao-2 ol {
    padding-left: 1.5em;
    padding-top: 2em;
}

#tutorial main .sessao-2 ol li{
    list-style: disc;
}

#tutorial main .sessao-2 p, #tutorial main .sessao-4 p{
    color: var(--font-color2-cinza);
}

#tutorial main .duas-imagens{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 3em;
    padding-bottom: 2em;
    align-items: start;
}

#tutorial main .imagem-grande{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 1.3em;
    padding-top: 1.3em;
}

#tutorial main .imagem-grande, #tutorial main .imagem-grande img{
    width: 100%;
    padding-top: 1em;
}

#tutorial main .coluna-imagens{
    flex-direction: column;
    align-items: center;
    gap: 1em;
    display: flex;
    
}

#tutorial main .coluna-imagens figure{
    margin-top: 1em;
}


#tutorial main .coluna-imagens figure, #tutorial main .coluna-imagens figure img{
    width: 100%;
}


#tutorial main .duas-imagens{
    width: 100%;
}

#tutorial main .duas-imagens img{
    width: 48%;
}

#tutorial main .sessao-3{
    background-color: var(--main-azul);
}

#tutorial main .sessao-3 .titulo{
    color: #ffffff;
}

#tutorial main .sessao-3 .texto{
    color: rgb(255, 255, 255, 0.8);
}


#tutorial main .sessao-3 div figure img{
    min-width: 300px;
}


/* cores dos fundos pre definido */



/*                               responsividade                               */

/*                               listas da home (tutoriais e serviços)                               */

@media  screen and (max-width: 1850px){
    #tutoriais .lista-tutoriais li{
        width: 31%;
    }
   

    main #servicos-prestados .lista-tutoriais li{
        width: 23.5%;
    }

    main #servicos-prestados .lista-tutoriais li p{
        font-size: 18px;
    }

    
}

@media screen and (max-width: 1730px){
    main #servicos-prestados ol li{
        width: 49%;
    }

    /* equipe */

    #equipe main section ol li{
        min-height: 300px;
    }
}

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

    /* home */
    main #destaque-home .background-bolhas img{
        right: -50px;
    }
    main #destaque-home #destaque-desktop{
        display: none;
    }



    main #tutoriais-home .lista-tutoriais li, #tutoriais main section .lista-tutoriais li{
        width: 46%;
    }
    #tutoriais .lista-tutoriais > li:nth-last-child(1), #tutoriais .lista-tutoriais > li:nth-last-child(2){
        width: 46%;
    }

    main #servicos-prestados ol{justify-content: center;}
    main #servicos-prestados ol li{
        width: 48%;
    }

    footer .background-footer{
        position: absolute;
        z-index: 1;
        left: -24%;
        height: 260px;
        box-sizing: border-box;
    }

    /* sobre nós - (1 - dti) */

    #sobre main #sobre-dti .background-bolhas2 img{
        width: 20%;
        right: -90px;
    }

    /* equipe */

    #equipe main section ol li{
        min-height: 300px;
        width: 30%;
    }


    /* contato */
    #contato main section div ol li span a{
        font-size: 15px;
    }

    #contato main section div #pc-logo-dti img{
        width: 28vw;
    }
    
}

@media screen and (max-width: 1300px){
    #sobre main section #destaque{
        width:424.01px;
    }

    
}

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

    /* pagina tutoriais */

    #tutoriais main section figure .background-bolhas{
        top: 100px;
        right: -250px;
        width: 50%;
    }

    footer{
        background-color: var(--main-bg-branco);
        height: 500px;
        box-sizing: border-box;
        padding: 0;
        display: flex;
        justify-content: flex-start;

    }

    footer .background-footer{
        display: none;
    }
    footer .footer-responsivo{display: block;}

    footer .footer-responsivo figure .logo-ifrn{
        padding-left: 1em;}

    footer .footer-responsivo .background {
        height: 406.92px;
        box-sizing: border-box;
        padding: 1em 2em;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('../imagens/backgrounds/footer-responsivo.svg');


    }

    footer .div-inferior, footer .div-superior{
        display: none;
    }

    footer .footer-responsivo .div-inferior, footer .footer-responsivo .div-superior{
        display: flex;
    }
    footer .footer-responsivo .div-inferior .nav-responsivo{display: flex;}

    footer .footer-responsivo .div-inferior{
        display: flex;
        flex-direction: column;
        align-items: start;

        }
    }

@media screen and (max-width: 1100px){
    :root{
        --padding-section: 2em 10%;
        --padding-section-tutorial: 2em 10%;

    }

    .texto{
        font-size: 17px;
    }

    main #tutoriais-home #background-bolhas{
        left: -4%;
        top: -40%;
    }

    main #sec-numeros .background-bolhas-superior{
        right: -8%;
    }
    
    footer .footer-responsivo figure{
        width: 40%;
        padding: 1em;
        display: flex;
        box-sizing: border-box;

    }

    footer .footer-responsivo figure img{
        width: 10em;
    }
    footer .footer-responsivo figure .logo-ifrn{
        padding-left: 1em;
        height: 37px;
    }

    /* pagina sobre nós */

    #sobre main section .background-bolhas{
        left: -106px;
    }

    #sobre main section .background-bolhas2 {
        display: block;
        width: 30%;
        right: -31px;
    }
    #sobre main .sobre-texto-imagem #tecnicos{
        width: 90%;
        min-width: 300px;
    }

    
    #sobre main #proposito>div figure img{
        width: 290px;
    }
    
    


    /* min-width: 339px;*/

    #equipe main section ol li{
        min-height: 300px;
        width: 30%;
    }

    #equipe main section ol li div span{
        font-size: 13px;
    }

    #equipe main section ol li div h2{
        font-size: 23px;
    }

    /* contato */
    #contato main section div #pc-logo-dti img{
        width: 34vw;
    }
}

/*  caso especifico pra não quebrar a lista de pessoas */

@media screen and (max-width: 870px){
    header{
        display: none;}

    body #menu-hamburguer{
        display: block;
    }

    main #sec-numeros {

        align-items: start;}

    main #sec-numeros ol{
        flex-wrap: wrap;
        margin-top: 2em;

    }

    main #sec-numeros ol li{
        width: 47%;
    }
    main #conheca-campus div{
        gap: 10px;
    }

    main #conheca-campus div .botao{
        margin: 0;
    }


    #sobre main .sobre-texto-imagem{
        flex-direction: column;
    }

    /* sessão com as imagens do tecnicos, mesma classe porem com esta adicional */
    #sobre main .reverse{
        flex-direction: column-reverse;
    }

    #sobre main .sobre-texto-imagem #tecnicos{
        width: 100%;
        padding: 0;
        padding-top: 1em;
    }

    #sobre main section .reverse{
        flex-direction: column-reverse;
    }
    #sobre main section #destaque{
        width: 100%;
        padding: 0;
        padding-top: 1em;
    }

    #equipe main section ol li{
        width: 48%;
    }


    #sobre main #proposito>div figure img{
        display: none;
    }

    /* tutoriais */
    #tutoriais main section figure .background-bolhas3{
        top: 1900px;

    }

    

    /* contato */

    #contato main section div #pc-logo-dti{
        display: none;
        padding-top: 2em;
    }

    #contato main section div{
        width: 100%;
        min-height: 11em;

    }

    #contato main section div:last-child{
        padding: 0;
    }

    #contato main section div ol{
        padding-top: 2em;
    }

    #contato main section{
        flex-direction: column-reverse;
    }


}

/* mini lista de tutoriais de home - isso aqui quebra muita facil:( */
@media screen and (max-width: 718px){

    main #destaque-home div h1{
        font-size: 80px;}

    main #destaque-home .background-bolhas img{
        width: 300px;
        right: -100px;
        top: -50px;
    }

    main #tutoriais-home .background-bolhas {
        left: -21%;
        top: 19%;
    }

    main #tutoriais-home .lista-tutoriais li, #tutoriais main section .lista-tutoriais li{
        width:100%;
        opacity: 1;
        padding-top: 0;
        padding-bottom: 0;
        height: 268.5px;
    }
    

    #tutoriais .lista-tutoriais > li:nth-last-child(1), #tutoriais .lista-tutoriais > li:nth-last-child(2){
        width: 100%;
    }

    main #tutoriais-home .lista-tutoriais li a div p{
        width: 86%;
    }
    
    main #servicos-prestados ol li{
        width:100%;
        padding: 3em 2.3em;
    }

    main #servicos-prestados ol li div{
        flex-direction: row-reverse;
        justify-content: left;

    }

    main #servicos-prestados ol li div h2{
        padding-left: 1em;
    }

    main #servicos-prestados ol li p{
        width: 90%;
    }

    main #servicos-prestados ol li {
        width: 100%;
    }


    main #sec-numeros .background-bolhas-superior{
        right: -22%;
    }

    main #sec-numeros ol{
        padding: 0;
    }



    /* pagina sobre nós */

    #sobre main section .background-bolhas{
        left: -142px;
        top: 38%;
    }

    #sobre main section .background-bolhas2{
        right: -190px;
    }

    

    
    

    /* pagina tutoriais */


    #tutoriais main section figure .background-bolhas2{
        top: 800px;

    }

    

    /* tutoriais error */

    #tutoriais main section #mensagem-erro .subtitulo{
        font-size: 16px;
    }

}

@media screen and (max-width: 520px){
    #equipe main section ol li{
        width: 100%;
    }

    #equipe main section ol li div span{
        font-size: 15px;
    }

    #equipe main section ol li div h2{
        font-size: 25px;
    }
}

@media screen and (max-width: 428px){
    :root{
        --padding-section: 2em 7%;
        --padding-section-tutorial: 2em 7%;
    }

    main #destaque-home div h1{
        font-size: 65px;}
    
    main #servicos-prestados ol li{
        height: 300px; 
    }

    main #sec-numeros .background-bolhas-superior{
        right: -40%;
    }


    footer .footer-responsivo .background {
        height: 420px;
        background-size: cover;
        padding: 1.5em 2em;
        background-image: url('../imagens/backgrounds/footer-mobile.svg');

    }
    footer .footer-responsivo figure{width: 100%;}

}