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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: url("starsky1.jpg") no-repeat center center;
    background-size: cover;
    color: #ffffff;
    
    
} 

a {
    text-decoration:none ;
    color: currentColor;
}

h1, h2, h3{
    color: #00aaff;
}

.logo a img{
    max-width: 200px;
    max-height: auto;
    transition: all 0.3s ease;
    
}

.logo a img:hover{
    transform: scale(1.50);
}




/* CONTAINER PADRÃO */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    justify-content: center;
}

/* HEADER */
header {
    padding: 20px 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h2 {
    font-size: 1.5rem;
    color: #fff;
}

.menu {
    display: flex;
    gap: 40px;
    list-style: none;
}

.menu a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    transition: 0.3s;
}

.menu a:hover {
    color: #00aaff;
    transform: scale(1.05);
}

/* BOTÃO */
.btn-contato button {
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, rgba(0, 150, 255, 0.6), rgba(0, 80, 200, 1));
    color: #fff;
    transition: 0.3s;
}

.btn-contato button:hover {
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.8);
}

/* HERO */
.hero {
    display: flex;
    align-items: center;
    min-height: 80vh;
    flex-direction: column;
}

.hero-text {
    max-width: 700px;
}

.hero-text h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #00aaff
}

.hero-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

/* FOOTER */
footer {
    padding: 40px 0;
    text-align: center;
}

.social {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.social a {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.7);
    transition: 0.3s;
}

.social a:hover {
    color: #00aaff;
}

/* RESPONSIVO */
@media (max-width: 900px) {

    .nav-container {
        flex-direction: column;
        gap: 20px;
    }

    .menu {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .hero {
        text-align: center;
        justify-content: center;
    }

    .hero-text h1 {
        font-size: 2.2rem;
    }

    .hero-text p {
        font-size: 1rem;
    }
}

.hero-buttons {
    margin-top: 30px;
    display: flex;
    gap: 20px;
}

.btn-primary {
    padding: 12px 25px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, #00aaff, #0044cc);
    color: #fff;
    transition: 0.3s;
}

.btn-primary:hover {
    box-shadow: 0 0 25px rgba(0, 170, 255, 0.8);
    transform: translateY(-3px);
}

.btn-secondary {
    padding: 12px 25px;
    border-radius: 30px;
    border: 1px solid #00aaff;
    background: transparent;
    color: #00aaff;
    cursor: pointer;
    transition: 0.3s;
}

.btn-secondary:hover {
    background: #00aaff;
    color: #fff;
}

.hero-buttons {
    margin-top: 30px;
    display: flex;
    gap: 20px;
}

.btn-primary {
    padding: 12px 25px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, #00aaff, #0044cc);
    color: #fff;
    transition: 0.3s;
}

.btn-primary:hover {
    box-shadow: 0 0 25px rgba(0,170,255,0.8);
    transform: translateY(-3px);
}

.btn-secondary {
    padding: 12px 25px;
    border-radius: 30px;
    border: 1px solid #00aaff;
    background: transparent;
    color: #00aaff;
    cursor: pointer;
    transition: 0.3s;
}

.btn-secondary:hover {
    background: #00aaff;
    color: #fff;
}

.pagina-profissionais i {
    font-size: 4rem;
}

/* ============================= */
/* SEÇÃO PORTFÓLIO */
/* ============================= */

.portfolio {
    padding: 100px 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 60px;
    color: #00aaff
}

.cards {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.card {
    background: rgba(255, 255, 255, 0.05);
    width: 320px;
    padding: 30px 25px;
    border-radius: 25px;
    text-align: center;
    transition: 0.4s ease;
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-12px);
    box-shadow: 0 0 30px rgba(0, 150, 255, 0.7);
}

/* FOTO */
.card-img {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #00aaff;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* TEXTO */
.card h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.cargo {
    display: block;
    font-size: 0.9rem;
    color: #00aaff;
    margin-bottom: 15px;
}

.card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

.pagina-profissionais .container .cards .card{
   
    opacity: 0; 
    animation: slideUpFade 0.9s ease-out forwards;
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(30px);
        /* Começa 30px abaixo */
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        /* Termina na posição original */
    }
}



/* BOTÃO */
.btn-card {
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, #00aaff, #0044cc);
    color: #fff;
    transition: 0.3s;
}

.btn-card:hover {
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.8);
    transform: scale(1.05);
}

/* ============================= */
/* BOTÃO VER MAIS */
/* ============================= */

.ver-mais {
    margin-top: 60px;
    text-align: center;
}

.btn-ver-mais {
    padding: 14px 35px;
    border-radius: 40px;
    border: 2px solid #00aaff;
    background: transparent;
    color: #00aaff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.4s ease;
}

.btn-ver-mais:hover {
    background: linear-gradient(90deg, #00aaff, #0044cc);
    color: #fff;
    box-shadow: 0 0 25px rgba(0, 170, 255, 0.8);
    transform: translateY(-4px);
}


/* ============================= */
/* BARRA DE BUSCA */
/* ============================= */
h1{

    color: #00aaff;

}

.pagina-profissionais .container .titulo-pagina {
    display: flex;
    justify-content: center;
    margin: 40px;

}

.sobre-intro .container .titulo-pagina{
    display: flex;
    justify-content: center;
    margin: 40px;
}



.barra-busca {
    text-align: center;
    margin-bottom: 50px;
}

.barra-busca input {
    width: 60%;
    max-width: 500px;
    padding: 14px 20px;
    border-radius: 30px;
    border: 2px solid #00aaff;
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1rem;
}

.barra-busca input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* ============================= */
/* MODAL */
/* ============================= */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}


/* ============================= */
/* PÁGINA PERFIL PROFISSIONAL */
/* ============================= */

.perfil-profissional {
    padding: 100px 0;
    
}

.perfil-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    
}

/* BLOCO SUPERIOR */
.perfil-info {
    display: flex;
    gap: 50px;
    align-items: center;
    flex-wrap: wrap;
    
}

.perfil-img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #00aaff;
}

.perfil-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.perfil-dados {
    max-width: 600px;
}

.perfil-dados h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.perfil-area {
    display: block;
    color: #00aaff;
    margin-bottom: 20px;
    font-weight: bold;
}

.perfil-dados p {
    line-height: 1.6;
    margin-bottom: 25px;
}

/* BOTÕES */
.perfil-botoes {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-linkedin,
.btn-download {
    padding: 12px 25px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

.btn-linkedin {
    background: #0A66C2;
    color: #fff;
}

.btn-linkedin:hover {
    box-shadow: 0 0 20px rgba(10, 102, 194, 0.8);
}

.btn-download {
    background: linear-gradient(90deg, #00aaff, #0044cc);
    color: #fff;
}

.btn-download:hover {
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.8);
}

/* VÍDEO */
.perfil-video h2 {
    text-align: center;
    margin-bottom: 30px;
    color:#00aaff;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 20px;
}

.video-wrapper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}



.empresas-intro {

    padding: 80px 0 30px 0;
    text-align: center;

}

.descricao-pagina {

    max-width: 700px;
    margin: 20px auto;
    line-height: 1.6;
    color: #ccc;

}


/* GRID DE EMPRESAS */

.empresas {

    padding: 60px 0;

}

.empresas-cards {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;

}


/* CARD */

.empresa-card {

    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 20px;
    text-align: center;

    backdrop-filter: blur(10px);
    transition: 0.4s;

}

.empresa-card:hover {

    transform: translateY(-10px);
    box-shadow: 0 0 25px rgba(0, 170, 255, 0.4);

}



/* IMAGEM */

.empresa-img img {

    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 20px;

}


/* TITULO */

.empresa-card h3 {

    color: #00aaff;
    margin-bottom: 5px;

}

.badges {
    display: flex;
    justify-content: center;
    
}

.badges .imagem {
   max-width: 100px;
   height: auto;
    
}

/* CATEGORIA */

.categoria {

    display: block;
    font-size: 14px;
    color: #aaa;
    margin-bottom: 15px;

}

.empresa-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* RESPONSIVO */


@media (max-width:768px) {

    .empresas-cards {

        grid-template-columns: 1fr;

    }

}


/* SOBRE MIM */

.sobre {

    padding: 80px 0;

}

.sobre-container {

    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;

}

.foto-perfil img {

    width: 280px;
    border-radius: 20px;
    box-shadow: 0 0 25px rgba(0, 170, 255, 0.4);

}

.historia {

    flex: 1;
    

}

.historia h2 {

    color: #00aaff;
    margin-bottom: 20px;

}

.historia p {

    line-height: 1.7;
    height: 300px;  
    overflow-y: auto;
    

}

.historia p::-webkit-scrollbar {
    width: 4px;
}

.historia p::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.historia p::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00aaff, #0044cc);
    border-radius: 10px;
}

.historia p::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00ccff, #0066ff);
}

.sobre, 
.empresas-intro,
.pagina-profissionais{    
    opacity: 0;
    animation: slideUpFade 0.9s ease-out forwards;
}
    
@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(30px);
        /* Começa 30px abaixo */
    }
    
    100% {
        opacity: 1;
        transform: translateY(0);
        /* Termina na posição original */
    }
}

.sobre-intro,
.perfil-img,
.perfil-dados,
.perfil-video{
        opacity: 0;
        animation: slideUpFade 0.9s ease-out forwards;
    }

    @keyframes slideUpFade {
        0% {
            opacity: 0;
            transform: translateY(30px);
            /* Começa 30px abaixo */
        }

        100% {
            opacity: 1;
            transform: translateY(0);
            /* Termina na posição original */
        }
    }

/* VIDEO */

.video-historia {

    padding: 80px 0;
    text-align: center;

}

.video-container {

    margin-top: 30px;
    display: flex;
    justify-content: center;

}

.video-container iframe {

    width: 800px;
    max-width: 100%;
    height: 450px;
    border-radius: 20px;

}


/* REDES */

.redes {

    padding: 80px 0;
    text-align: center;

}

.redes-icons {

    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 40px;

}

.redes-icons a {

    font-size: 40px;
    color: white;
    transition: 0.3s;

}

.redes-icons a:hover {

    color: #00aaff;
    transform: scale(1.2);

}


/* RESPONSIVO */

@media (max-width:900px) {

    .sobre-container {

        flex-direction: column;
        text-align: center;

    }

}


@media (max-width:900px) {

    .empresas-cards {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width:600px) {

    .empresas-cards {

        grid-template-columns: 1fr;

    }

}


/* RESPONSIVO */
@media (max-width: 900px) {

    .perfil-info {
        flex-direction: column;
        text-align: center;
    }

    .perfil-dados {
        max-width: 100%;
    }

    .perfil-botoes {
        justify-content: center;
    }
}







/* ============================= */
/* ANIMAÇÕES */
/* ============================= */

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate {
    opacity: 0;
    animation: fadeSlideUp 1s ease forwards;
}

.animate-delay-1 {
    animation-delay: 0.3s;
}

.animate-delay-2 {
    animation-delay: 0.6s;
}