/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#0f0f1a;
    color:white;

}

/* ===========================
   HEADER
=========================== */

header{

    position:sticky;
    top:0;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 8%;

    background:#17172b;

    box-shadow:0 5px 20px rgba(0,0,0,.4);

    z-index:999;

}

.logo{

    font-size:28px;
    font-weight:bold;
    color:#b266ff;

}

nav{

    display:flex;
    gap:30px;

}

nav a{

    color:white;
    text-decoration:none;
    transition:.3s;

}

nav a:hover{

    color:#b266ff;

}

/* ===========================
   HERO
=========================== */

.hero{

    min-height:90vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:40px;

}

.logo-box{

    width:180px;
    height:180px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#191933;

    border: 3px solid #7c3aed;

    box-shadow:
    0 0 30px #341c5f;

    animation:flutuar 3s ease-in-out infinite;

    overflow:hidden;
}


.logo-box img{

    width:100%;
    height:100%;

    object-fit:cover;

}
.hero h1{

    margin-top:35px;

    font-size:50px;

    background:linear-gradient(90deg,#7c3aed,#c084fc);

    background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 0 20px #7c3aed;

}

/* ===========================
   SEÇÕES
=========================== */

section{

    padding:80px 10%;

}

.titulo{

    text-align:center;

    margin-bottom:50px;

    color:#b266ff;

    font-size:38px;

}

/* ===========================
   SOBRE
=========================== */

.sobre{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.sobre p{

    line-height:1.8;

    color:#d5d5d5;

    margin-bottom:20px;

    font-size:18px;

}

/* ===========================
   CARDS
=========================== */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.card{

    background:#1a1a2f;

    border:2px solid #34345e;

    border-radius:18px;

    padding:30px;

    transition:.3s;

    text-align:center;

}

.card:hover{

    transform:translateY(-10px);

    border-color:#a855f7;

    box-shadow:0 0 25px rgba(168,85,247,.4);

}

.card h3{

    margin-bottom:15px;

    color:#c084fc;

}

.card p{

    color:#ddd;

}

.icone{

    font-size:55px;

    display:block;

    margin-bottom:20px;

}

/* ===========================
   EVENTO
=========================== */

.evento{

    max-width:800px;

    margin:auto;

    text-align:center;

    background:#1a1a2f;

    padding:50px;

    border-radius:20px;

    border:2px solid #7c3aed;

}

.evento h2{

    color:#b266ff;

    margin-bottom:20px;

}

.evento h3{

    margin-bottom:20px;

    font-size:30px;

}

.evento p{

    margin-top:12px;

    color:#ddd;

    line-height:1.8;

}

/* ===========================
   FORMULÁRIO
=========================== */

.texto-centro{

    text-align:center;

    margin-bottom:30px;

    color:#ccc;

}

input,
textarea{

    width:100%;

    margin-bottom:20px;

    padding:18px;

    border:none;

    border-radius:12px;

    background:#1b1b30;

    color:white;

    font-size:16px;

}

input:focus,
textarea:focus{

    outline:none;

    border:2px solid #a855f7;

}

button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:12px;

    background:#5d24bf;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    background:#9333ea;

    transform:scale(1.02);

}

/* ===========================
   FOOTER
=========================== */

footer{

    background:#17172b;

    text-align:center;

    padding:50px 20px;

    margin-top:80px;

}

footer h3{

    color:#b266ff;

    margin-bottom:15px;

}

footer p{

    color:#bdbdbd;

    margin-top:10px;

}

/* ===========================
   ANIMAÇÃO
=========================== */

@keyframes flutuar{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ===========================
   RESPONSIVO
=========================== */

@media(max-width:900px){

    header{

        flex-direction:column;

        gap:20px;

    }

    nav{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

    .hero h1{

        font-size:38px;

    }

    .titulo{

        font-size:30px;

    }

    .logo-box{

        width:150px;
        height:150px;

        font-size:70px;

    }

}