:root {
            /* Paleta de Azuis */
            --azul-escuro: #0a2540;
            --azul-medio: #0d6efd;
            --azul-claro: #6ea8fe;
            --azul-fundo: #f0f5ff;
            --branco: #ffffff;
            --texto-cor: #333333;
            --transicao: all 0.3s ease;
        } 

body { 
            margin: 0; 
            font-family: "Poppins", sans-serif; 
            background: var(--azul-fundo); 
            color: var(--texto-cor); 
            scroll-behavior: smooth; 
            overflow-x: hidden;
        }






/* === CABEÇALHO MODERNO & ELEGANTE === */

/* === AJUSTE NO HEADER === */
header { 
    background: rgba(10, 37, 64, 0.95);
    backdrop-filter: blur(10px);
    width: 100%; 
    position: sticky;
    top: 0; 
    z-index: 1000; 
    min-height: 80px; /* Use min-height em vez de height fixo */
    display: flex; 
    align-items: center; 
    border-bottom: 2px solid #FFD700;
}

/* === RESPONSIVIDADE (PARA APARECER NO CELULAR) === */
@media (max-width: 768px) {
    header {
        height: auto;      /* Libera a altura para o menu caber */
        padding: 20px 0;   /* Dá um respiro em cima e embaixo */
    }

    nav {
        flex-direction: column; /* Coloca a logo em cima e os botões embaixo */
        gap: 20px;
        padding: 0 10px;
    }

    nav ul {
        display: flex;     /* Garante que o menu seja exibido */
        flex-wrap: wrap;   /* Se não couber na largura, ele pula linha sozinho */
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 0;
    }

    nav ul li a {
        font-size: 0.8rem; /* Diminui o texto para caber mais botões */
        padding: 8px 12px;
    }

    .logo-text {
        font-size: 1.4rem;
    }
}


nav { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 10px; /* Reduzido de 40px para evitar quebra em telas médias */
}

/* === LOGO E TEXTO === */
.logo-area { 
    display: flex; 
    align-items: center; 
    gap: 5px; 
}

.logo-area img { 
    height: 90px; /* Ajustado para um tamanho mais harmônico */
    width: auto; 
    object-fit: contain;
}

.logo-text { 
    font-size: 3.8rem; /* Reduzido de 2.8rem (que era enorme) */
    font-weight: 800; 
    text-transform: uppercase; 
    color: white; 
    letter-spacing: 1.5px;
    line-height: 1;
}

/* === MENU DE NAVEGAÇÃO === */
nav ul { 
    list-style: none; 
    display: flex; 
    align-items: center;
    gap: 15px; /* Espaço entre os botões */
    margin: 0; 
    padding: 0;
}

/* Aplicando o estilo de "botão" para TODOS os links do menu */
nav ul li a { 
    background: #6ea8fe; /* Fundo dourado */
    color: #0a2540;      /* Texto azul escuro */
    text-decoration: none; 
    font-weight: 700; 
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 18px;  /* Respiro interno do botão */
    border-radius: 5px;  /* Pontas levemente arredondadas */
    transition: all 0.3s ease;
    display: inline-block;
    white-space: nowrap; /* Impede que a palavra quebre dentro do botão */
}

/* Efeito Hover para todos os botões */
nav ul li a:hover {
    background: #0a2540;



    color: #0a2540;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

/* === RESPONSIVIDADE PARA CELULAR === */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    nav ul {
        flex-wrap: wrap;    /* Permite que os botões criem novas linhas se necessário */
        justify-content: center;
        width: 100%;
    }

    nav ul li a {
        font-size: 0.8rem;  /* Diminui um pouco a fonte no celular */
        padding: 8px 12px;  /* Diminui o botão no celular */
    }
}






/* Efeito da linha dourada */
nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #FFD700;
    transition: width 0.3s ease;
}

nav ul li a:hover { color: #FFD700; }
nav ul li a:hover::after { width: 100%; }

/* Botão de Contato Especial */
nav ul li:last-child a {
    background: #FFD700;
    color: #0a2540;
    padding: 10px 18px;
    border-radius: 5px;
}

nav ul li:last-child a::after { display: none; }

nav ul li:last-child a:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

/* === RESPONSIVIDADE (A MÁGICA PARA O CELULAR) === */
@media (max-width: 768px) {
    header {
        height: auto;
        padding: 15px 0;
    }

    nav {
        flex-direction: column; /* Empilha logo e menu */
        gap: 15px;
    }

    .logo-text {
        font-size: 1.4rem; /* Diminui o texto da logo no celular */
    }

    nav ul {
        gap: 10px;
        flex-wrap: wrap; /* Permite que os links quebrem linha se não couberem */
        justify-content: center;
    }

    nav ul li a {
        font-size: 0.85rem; /* Diminui os links para caberem lado a lado */
    }
}












/* === SLIDESHOW / HERO === */
        .slideshow-container { 
            position: relative; 
            width: 100%; 
            height: 450px; 
            background: #000;
        }
        .slide { display: none; width: 100%; height: 100%; }
        .slide img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
        .active-slide { display: block; }

        .hero-text { 
            position: absolute; top: 50%; left: 50%; 
            transform: translate(-50%, -50%); 
            color: #fff; text-align: center; z-index: 10; 
            width: 80%;
        }
 
/* === AJUSTE DE COR NO SLIDESHOW (VOLTANDO PARA BRANCO) === */
.hero-text h1 { 
    font-size: 5rem; 
    margin-bottom: 10px; 
    color: #ffffff !important; /* Branco puro */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Sombra escura para destacar a letra branca na foto */
}

.hero-text p {
    color: #ffffff; /* Garante que o texto debaixo também seja branco */
    font-weight: 600;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
 font-size: 2rem; 

}

/* Estilo das Setas */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    z-index: 100;
}
.next { right: 0; border-radius: 3px 0 0 3px; }
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }

/* Estilo das Bolinhas (Dots) */
.dot-container {
    text-align: center;
    position: absolute;
    bottom: 20px;
    width: 100%;
    z-index: 100;
}
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.dot.active, .dot:hover { background-color: #FFD700; } /* Dourado para combinar */



        /* === VANTAGENS === */
        .vantagens-beneficios { 
            padding: 60px 20px; 
            background: var(--azul-escuro); 
            color: white;
            text-align: center; 
        }
        .vantagem-card { 
            max-width: 900px; 
            margin: 0 auto; 
            background: #0a2540; 
            padding: 30px; 
            border-radius: 15px;
            border: 1px solid var(--azul-claro);
        }

.vantagens-texto h5 {
    font-size: 1.8rem; /* Estava 2.5rem, diminui para 1.8rem */
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}
        .vantagem-card h4 { #FFD700; font-size: 1.8rem; }

        /* === CURSOS === */
        .cursos { padding: 80px 20px; background: var(--azul-fundo); }
        .titulo-cursos { text-align: center; font-size: 2.5rem; color: var(--azul-escuro); margin-bottom: 40px; }
        
        .cursos-grid { 
            max-width: 1200px; 
            margin: 0 auto; 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
            gap: 25px; 
        }

        .curso-card { 
            background: var(--branco); 
            border-radius: 15px; 
            padding: 20px; 
            text-align: center; 
            box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
            transition: var(--transicao);
            border-bottom: 4px solid transparent;
        }
        .curso-card:hover { 
            transform: translateY(-10px); 
            border-bottom: 4px solid var(--azul-medio);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        .curso-card img { width: 100%; height: 160px; object-fit: contain; margin-bottom: 15px; }
        .curso-card h3 { color: var(--azul-escuro); font-size: 1.3rem; }
        
        .btn-curso { 
            display: inline-block; 
            margin-top: 15px; 
            padding: 10px 25px; 
            background: var(--azul-medio); 
            color: white; 
            border-radius: 25px; 
            text-decoration: none; 
            font-weight: 600; 
            transition: var(--transicao);
        }
        .btn-curso:hover { background: var(--azul-escuro); }

/* === ESTILO VANTAGENS TECH (IMAGEM) === */
.tech-vantagens {
    background: #0a2540; /* Degradê azul vibrante */
    padding: 80px 50px;
    color: white;
    text-align: left;
}

.vantagens-header {
    text-align: center;
    margin-bottom: 50px;
}

.vantagens-header h2 {
    font-size: 3rem;
    font-weight: 900;
    margin: 0;
}

.vantagens-header p {
    font-size: 1.2rem;
    opacity: 0.9;
}

.vantagens-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.vantagens-texto {
    flex: 1;
    min-width: 300px;
}

.vantagens-texto h3 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}

.vantagens-texto p {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.95;
}

/* Grid de Pílulas */
.vantagens-grid-tech {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
    min-width: 300px;
}

.item-vantagem {
    background: rgba(255, 255, 255, 0.2); /* Efeito de transparência da imagem */
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
}

.item-vantagem:hover {
    transform: translateX(10px);
    background: rgba(255, 255, 255, 0.3);
}

.item-vantagem i {
    font-size: 24px;
    color: #ffeb3b; /* Amarelo para os ícones como na imagem */
    min-width: 35px;
    text-align: center;
}

.item-vantagem span {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

/* Ajuste Responsivo */
@media (max-width: 992px) {
    .tech-vantagens { padding: 50px 20px; }
    .vantagens-texto { text-align: center; }
    .vantagens-texto h3 { font-size: 2rem; }
}


/* Cor Dourada para Redes Sociais */
/* Estilo Melhorado para Ícones Redes Sociais */
.social-dourado {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.social-dourado a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;  /* Tamanho do círculo */
    height: 55px; /* Tamanho do círculo */
    color: #FFD700 !important; /* Dourado */
    background: rgba(255, 255, 255, 0.05); /* Fundo sutil */
    border: 2px solid #FFD700; /* Borda dourada */
    border-radius: 50%; /* Faz o círculo */
    font-size: 26px; /* Tamanho do ícone dentro do círculo */
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Efeito ao passar o mouse (Hover) */
.social-dourado a:hover {
    background: #FFD700; /* Fundo fica dourado */
    color: #0a2540 !important; /* Ícone fica azul escuro para contraste */
    transform: translateY(-5px) scale(1.1); /* Sobe e aumenta levemente */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); /* Brilho dourado */
}
/* Ajuste específico para o Banner (Hero) */
.hero-social {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}


.footer-col:last-child {
    text-align: center/* Alinha o texto à direita */
}

.footer-col:last-child {
    text-align: center; /* Centraliza o título */
}

.footer-col:last-child .social-dourado {
    justify-content: center; /* Centraliza os ícones */
}


        /* === WHATSAPP === */
        .whatsapp { 
            position: fixed; bottom: 25px; right: 25px; 
            background: #25D366; color: white; 
            width: 60px; height: 60px; border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; 
            font-size: 30px; z-index: 3000; transition: var(--transicao); 
        }
        .whatsapp:hover { transform: scale(1.1); }




        /* === RODAPÉ === */
 footer { 
            background: var(--azul-escuro); 
            color: #fff; 
            padding: 60px 20px 20px; 
        }
        .footer-container { 
            max-width: 1200px; margin: 0 auto; 
            display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
            gap: 40px; 
        }
        .footer-col h4 { color: var(--azul-claro); margin-bottom: 20px; }
        .footer-contact { list-style: none; padding: 0; }
        .footer-contact li { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
        .footer-contact i { color: var(--azul-claro); }
        
        .footer-social a { 
            color: white; font-size: 20px; margin-right: 15px; 
            transition: var(--transicao); 
        }
        .footer-social a:hover { color: var(--azul-claro); }

        .footer-bottom { 
            text-align: center; margin-top: 40px; 
            padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); 
            font-size: 0.8rem; color: #aaa;
        }
/* --- AJUSTE NOS ÍCONES DE CONTATO --- */
.footer-contact i { 
    color: #FFD700; /* Cor dourada nos ícones */
    font-size: 1.2rem; /* Aumenta um pouco o tamanho das figuras (estava padrão) */
    min-width: 25px; /* Garante que os ícones fiquem alinhados */
}

/* --- OPCIONAL: DOURADO TAMBÉM NOS TÍTULOS DO RODAPÉ --- */
.footer-col h4 { 
    color: #FFD700; /* Se quiser os títulos combinando com os ícones */
    margin-bottom: 20px; 
}

/* --- AJUSTE NA LISTA PARA FICAR MAIS ESPAÇADA --- */
.footer-contact li { 
    margin-bottom: 15px; /* Aumenta o espaço entre as linhas de contato */
    display: flex; 
    align-items: center; 
    gap: 12px; 
    font-size: 0.95rem; 
}




/* === COPYRIGHT PREMIMUM === */
.footer-bottom {
    text-align: center;
    margin-top: 50px;
    padding: 30px 20px;
    border-top: 1px solid rgba(255, 215, 0, 0.3); /* Linha dourada suave */
    background: rgba(0, 0, 0, 0.2); /* Fundo levemente mais escuro para contraste */
}

.footer-bottom p {
    font-size: 1.1rem; /* Aumentado para dar presença */
    color: #ffffff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
}

/* O toque de ouro no nome e data */
.footer-bottom .destaque-dourado {
    color: #FFD700;
    font-weight: 800;
    text-shadow: 0px 0px 10px rgba(255, 215, 0, 0.3); /* Brilho sutil */
    padding: 0 5px;
}

.footer-bottom {
    text-align: center;
    margin-top: 50px;
    padding: 30px 20px;
    /* Linha dourada mais grossa e com brilho */
    border-top: 1px solid #FFD700; 
    background: rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 10px 15px -10px rgba(255, 215, 0, 0.3); /* Sombra interna para dar profundidade */
}


/* === RESPONSIVIDADE PARA CELULARES === */
@media (max-width: 768px) {
    header {
        height: auto; /* Permite que o header cresça se necessário */
        padding: 15px 0;
    }

    nav {
        flex-direction: column; /* Empilha logo e menu verticalmente */
        gap: 15px;
        padding: 0 20px; /* Reduz o respiro lateral */
    }

    .logo-area img {
        height: 50px; /* Diminui a logo no celular */
    }

    .logo-text {
        font-size: 1.5rem; /* Reduz drasticamente o texto (era 2.8rem) */
        text-align: center;
    }
}



        /* Responsividade */
        @media (max-width: 768px) {
            nav { padding: 0 20px; }
            .hero-text h1 { font-size: 2rem; }
        }
   



/* === REGRAS DE RESPONSIVIDADE (PARA CELULAR) === */
@media (max-width: 768px) {
    header {
        height: auto !important; /* Força o fundo azul a crescer */
        padding: 15px 0;
    }

    nav {
        flex-direction: column !important; /* Logo em cima, botões embaixo */
        gap: 15px;
        padding: 0 10px;
    }

    nav ul {
        display: flex !important; /* FORÇA O MENU A APARECER */
        flex-wrap: wrap;         /* Permite que os botões pulem linha */
        justify-content: center;
        gap: 8px;
        padding: 0;
    }

    nav ul li a {
        font-size: 0.75rem;      /* Diminui a letra para caber mais botões */
        padding: 8px 10px;       /* Botões um pouco menores */
    }

    .logo-area img {
        height: 40px;            /* Logo menor no celular */
    }

    .logo-text {
        font-size: 1.2rem;       /* Nome Faifer TI menor */
    }

    .hero-text h1 {
        font-size: 1.8rem;       /* Ajusta o título do slide */
    }
}