@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=Dancing+Script:wght@400..700&family=Pacifico&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=Dancing+Script:wght@400..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Edu+AU+VIC+WA+NT+Dots:wght@400..700&family=Indie+Flower&display=swap');

:root {
    --azul-escuro: #003366;
    --azul: #0077cc;
    --azul-claro: #66b3ff;
    --azul-petroleo: #005f6b;
    --azul-turquesa: #008080;
    --verde-escuro: #005f00;
    --verde: #00b300;
    --verde-claro: #99ff99;
    --verde-agua: #1abc9c;
    --verde-limao: #c2e0c6;
    --amarelo-escuro: #cc9900;
    --amarelo: #ffcc00;
    --amarelo-claro: #ffff99;
    --amarelo-ouro: #ffd700;
    --laranja-escuro: #cc6600;
    --laranja: #ff6600;
    --laranja-claro: #ff9966;
    --vermelho-escuro: #990000;
    --vermelho: #ff3300;
    --vermelho-claro: #ff6666;
    --vermelho-cereja: #dc143c;
    --roxo-escuro: #660066;
    --roxo: #9933cc;
    --roxo-claro: #cc99ff;
    --roxo-violeta: #8a2be2;
    --cinza-escuro: #333333;
    --cinza: #999999;
    --cinza-claro: #cccccc;
    --preto: #000000;
    --branco: #ffffff;
    --bege: #f5f5dc;
    --dourado: #ffd700;
    --prata: #c0c0c0;
    --salmao: #fa8072;
    --coral: #ff7f50;
    --peixe: #ffe4b5;
    --lavanda: #e6e6fa;
    --pessego: #ffdab9;
    --turquesa: #40e0d0;
    --aqua: #00ffff;
    --magenta: #ff00ff;
    --ciano: #00bfff;
    --azul-marinho: #000080;
    --violeta: #ee82ee;
    --malva: #d3006c;
    --berinjela: #5e2748;
    --laranja-burnt: #cc5500;
    --verde-oliva: #556b2f;
    --verde-pistache: #9cbf9c;
    --laranja-queimado: #b0523b;
    --azul-royal: #4169e1;
    --roxoclaro: #d1b3ff;
    --lavanda: #e6e6fa;
    --purpura: #800080;
    --violeta: #8a2be2;
    --ametista: #9966cc;
    --preto-azulado: #0d1117;
    --carvao: #2e2e2e;
    --cinza-ardosia: #343a40;
    --preto-fume: #1c1c1c;
    --preto-jato: #343434;
    --branco-neve: #f8f8ff;
    --branco-fantasma: #f5f5f5;
    --marfim: #fffff0;
    --branco-antigo: #faebd7;
    --branco-fumaça: #f5f5f5;
    --preto-eclipse: #1b1b1b;
    --preto-meia-noite: #191970;
    --preto-ebano: #555d50;
    --preto-grafite: #2c3539;
    --preto-chumbo: #36454f;
    --cinza-musgo: #737d69;
}



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

body {
    font-family: "Poppins", sans-serif;
    font-weight: 100;

}

header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 10vh;
    background-color: var(--preto-azulado);
    padding: 0 30px;
    color: var(--branco-antigo);
    border-bottom: 5px solid var(--preto-jato);
    transition: all 1s ease;
}

header:hover {
    height: 15vh;
}

#icone-menu-lateral {
    font-size: 2rem;
    cursor: pointer;
    transition: all 1s ease;
}

#icone-menu-lateral:hover {
    color: var(--branco-neve);
    scale: 1.2;
}

.header-texto {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: all 0.3s ease-in;
}

.header-texto:hover {
    -webkit-text-stroke: 1px var(--branco-antigo);
    color: transparent;
}

.header-texto h1 {
    font-size: 3rem;
}

main {
    background-color: var(--preto-fume);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--branco-antigo);
}

.apresentacao {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    width: 100%;
}

.texto {
    margin-top: 100px;
}

.texto h1 {
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-size: 5rem;
    font-weight: 700;
    font-style: normal;
    background: linear-gradient(to right, var(--magenta), var(--amarelo),var(--azul-claro)); /* Define o degradê */
    -webkit-background-clip: text;
    color: transparent; /* Torna a cor da fonte transparente para o fundo aparecer */    
    margin-bottom: 10px;
    transition: all 1s ease;
}

.texto h1::after {
    content: '';
    position: absolute;
    left: 50%; /* Posiciona o início da borda no centro */
    bottom: -5px; /* Distância da borda do texto */
    height: 2px; /* Espessura da borda */
    width: 0; /* Começa com largura zero */
    background: linear-gradient(to right, var(--magenta), var(--amarelo), var(--azul-claro)); /* Degradê */
    transition: width 1s ease, left 1s ease; /* Transições para largura e deslocamento */
}

.texto h1:hover::after {
    width: 100%; /* Aumenta a largura para 100% */
    left: 0; /* Alinha a borda ao início */
}

.texto h1:hover {
    filter: saturate(5); 
}

.texto h2 {
    text-align: left;
    font-family: "Indie Flower", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    transition: all 1s ease;
}

.texto h2:hover {
    transform: translateY(10px);
}

.apresentacao img {
    filter: saturate(1);
    transition: 2s ease;
}

.apresentacao img:hover {
    filter: saturate(2.5);
    scale: 1.01;
}

footer {
    min-height: 200px;
}


.cards {
    width: 100%;
    padding-top:50px;
    padding-bottom: 50px;
    
}

.cards-conteudo {
    position: relative;
    z-index: 2;
    text-align: center;

    display:flex;
    flex-direction: column;
    
}

.cards-conteudo h2{
    font-size: 2.5rem;
    transition: all 1s ease;
}

.cards-conteudo h2:hover{
    -webkit-text-stroke: 1px var(--branco-antigo);
    color: transparent;
}

.cards-conteudo p{
    font-size: 1.5rem;
    transition: all 1s ease;
}

.cards-conteudo p:hover{
    letter-spacing: 2px;
}

.grupo-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; 
    margin-top: 30px;
}

.card {
    background-color: var(--preto);
    padding: 20px;
    border:1px solid var(--cinza-claro);
    border-radius: 15px; 
    width: 250px; 
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden; /* Para ocultar a borda animada que sai da seção */
    color: var(--branco-fumaça); 
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid var(--cinza-claro);
    border-radius: 15px; 
    transform: scale(0); /* Começa invisível */
    transform-origin: center; /* Origem da transformação */
    transition: transform 0.5s ease; /* Transição suave */
    z-index: -1; /* Coloca atrás do conteúdo */
}

/* Efeito ao passar o mouse */
.card:hover::before {
    transform: scale(1); /* Aumenta a borda para a escala normal */
}

.card:hover {
    transform: translateY(-10px) scale(1.05); 
    background-color: var(--preto);
}

.card img {
    border-radius: 10px;
    margin-bottom: 20px;
    width: 100%;
    opacity: 0.5;
    transition: all 1s ease-in-out;
}

.card img:hover {
    opacity: 1; 
    transform: saturate(2) scale(1.02) translate3D(100px, 50px, 20px);
}

.card h3 {
    font-size: 1.2rem;
    height: 90px;
}

.card p {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    height: 120px;
}

.card button {
    background-color: var(--amarelo); 
    color: var(--preto-ebano);
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.card button:hover {
    background-color: var(--amarelo-escuro); 
    transform: translateY(-3px); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}



.tema-card{
    width: 100%;
}

.tema-card-moldura{
    margin: 20px 200px 20px 200px;
    padding: 20px;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: first baseline;
    border-radius:20px;
    transition: 3s ease;
}

.tema-card-moldura img{
    height: 20rem;
    transform: translateX(150px);
    border-radius: 50%;
    transition: all 1s ease;
}

.tema-card img:hover{
    filter: saturate(1.5);
}



.tema-card-informacoes{
    width: 100%;
    display:flex;
    flex-direction:column;
    justify-content: first baseline;
}

.tema-card-informacoes h2{
    width: 100%;
    font-size: 2rem;
    margin-bottom: 30px;
    height: 60px;
}

.tema-card-informacoes p{
    font-size:2rem;
}

#section-introducaoaprogramacao{
    border: 4px solid var(--amarelo)
}

#section-introducaoaprogramacao img{
    border: 5px solid var(--amarelo)
}

#section-desenvolvimentowebcompleto{
    border: 4px solid var(--azul-claro)
}

#section-desenvolvimentowebcompleto img{
    border: 4px solid var(--azul-claro)
}






/* Media Queries */

/* Para telas pequenas (smartphones) */
@media (max-width: 600px) {
    .header-texto h1 {
        font-size: 1rem;
    }

    .apresentacao{
        flex-direction: column;
    }

    grupo-cards{
      flex-direction: column;
    }

    .tema-card-moldura{
        padding: 20px;
        display:flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: first baseline;
        border-radius:5px;
        transition: 3s ease;
    }

    .tema-card-moldura img{
        height: 20rem;
        border-radius: 50%;
        transition: all 1s ease;
    }
   
}

/* Para tablets (telas médias) */
@media (min-width: 601px) and (max-width: 1024px) {
    grupo-cards{
        flex-direction: column;
      }

      .tema-card-moldura{
        padding: 20px;
        display:flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: first baseline;
        border-radius:5px;
        transition: 3s ease;
    }
}

/* Para desktops (telas grandes) */
@media (min-width: 1025px) {
    grupo-cards{
        flex-direction: column;
      }


}