@charset "UTF-8";

/*

colors:
ciano: #42C7EE   66, 199, 238
azul: #2F4BC3   47, 75, 195
roxo: #6027B6   96, 39, 182
roxo escuro: #30135c   48, 19, 92

*/

:root {
    --cor1: 96, 39, 182; /* roxo */
    --cor2: 47, 75, 195; /* azul */
    --cor3: 66, 199, 238; /* ciano */
    --cor4: 48, 19, 92; /* roxo escuro */
    --cor5: rgb(202, 202, 202);
}

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

* a {
    color: white;
    text-decoration: none;
}
html {
    scroll-behavior: smooth;
}

body {
    color: white;
    position: relative;
    max-width: 100%;
}

header {
    display: inline-flex;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 6vw;
    transition: .3s;
    background: transparent;
    backdrop-filter: blur(15px);
    align-items: center;
    z-index: 1000;
}

header.ativo {
    background-color: rgb(var(--cor4), 0.5);
    border-bottom: 1px solid rgb(var(--cor4), 0.6);
    height: 6vw;
}

.empresa {
    align-items: center;
    display: flex;
    padding: 2vw;
}

.empresa p {
    font-size: 1.5vw;
}

.empresa .empresa-logo {
    background-image: linear-gradient(to right, rgb(var(--cor3)), rgb(var(--cor2)));
    border-radius: 1.3vw;
    display: block;
    padding: 1.5vw;
    align-items: center;
    font-size: 2vw;
    font-weight: bolder;
    margin-right: 1.5vw;
}

#home {
    display: flex;
    padding: 1vw 0px;
    width: 50%;
    margin-left: auto;
    gap: 2vw;
}

#home a {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 1.3vw;
}

#home a:hover {
    color: rgb(var(--cor3));
    transition: .5s;
}

#home #home-fc {
    background-image: linear-gradient(to right, rgb(var(--cor3)), rgb(var(--cor2)));
    border-radius: 100px;
}

#home #home-fc:hover {
    color: white;
    box-shadow: 0px 4px 10px rgb(var(--cor3), 0.5);
    transition: 0.5s;
}

#inicio {
    background: radial-gradient(circle at top left, rgba(255,255,255,0.1), transparent 40%), linear-gradient(135deg, rgb(var(--cor4)), rgb(var(--cor1)), rgb(var(--cor2)));
    text-align: center;
    padding: 6.5vw 0px;
}

#inicio h1 {
    font-size: 5vw;
    padding: 2vw 40vw 0px 5vw;
    text-align: left;
    font-weight: bolder;
}

#inicio .describe {
    color: white;
    font-size: 2vw;
    letter-spacing: 1.5px;
    line-height: 1.4em;
    padding: 2vw 40vw 0px 5vw;
    text-align: justify;
}

#inicio #inicio-button {
    padding: 6vw;
    text-align: left;
    padding-left: 5vw;
}

#inicio #inicio-button a {
    border-radius: 100px;
    font-weight: bolder;
    font-size: 1.5vw;
    padding: 2vw;
    margin: 0px 1vw 0px 0px;
}

#inicio #inicio-button #trabalho {
    background-image: linear-gradient(to right, rgb(var(--cor3)), rgb(var(--cor2)));
}

#inicio #inicio-button #trabalho:hover {
    background-image: linear-gradient(to right, rgb(var(--cor3), 0.8), rgb(var(--cor4), 0.8));
    box-shadow: 0px 5px 10px rgb(var(--cor3), 0.2);
    transition: .5s;
}

#inicio #inicio-button #econtato {
    background-color: white;
    color: rgb(var(--cor4));
}

#inicio #inicio-button #econtato:hover {
    background-image: linear-gradient(to right, rgb(var(--cor3)), rgb(var(--cor2)));
    color: white;
    transition: .5s;
}

#sobre {
    padding: 6vw 2vw;
}

#container-flex {
    display: flex;
}

#sobre #sobre-quadrado {
    background-color: rgb(var(--cor4));
    border-radius: 2vw;
    padding: 2vw;
    height: 25vw;
    margin: auto;
}

#sobre #sobre-descricao p {
    color: var(--cor5);
    border-left: 3px solid rgb(var(--cor3));
    padding-left: 1.5vw;
    margin-left: 2vw;
    font-size: 1.5vw;
    font-style: italic;
    letter-spacing: 1px;
    text-align: justify;
}

#sobre #sobre-diretoria {
    display: flex;
    align-items: center;    
}

#sobre #sobre-diretoria #diretoria-foto {
    background-image: linear-gradient(to right, rgb(var(--cor3)), rgb(var(--cor2)));
    border-radius: 100px;
    display: block;
    width: 4vw;
    height: 4vw;   
    margin: 2vw 0px 1vw 2vw; 
}

#sobre #sobre-diretoria #diretoria-descricao {
    margin-left: 1.5vw;
}

#sobre #descricao-direita {
    padding: 0px 4vw;
}

#sobre #descricao-direita h2 {
    color: rgb(var(--cor4));
    font-size: 3.5vw;
    font-weight: bolder;
    margin: 1.3vw 0px;
}

#sobre #descricao-direita p {
    color: rgb(80, 80, 80);
    font-size: 1.3vw;
    text-align: justify;
    letter-spacing: 1px;
    line-height: 1.4em;
    margin: 1.2vw 0px;
}

.subtitulo {
    color: rgb(var(--cor1));
    font-weight: bolder;
    font-size: 1.3vw;
}

#sobre #descricao-direita .grid-valores {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
    padding: 2vw 0px;
}

#sobre #descricao-direita .grid-valores i {
    color: rgb(var(--cor4));
}

#sobre #descricao-direita .grid-valores .valor-item {
    display: flex;
}

#sobre #descricao-direita .grid-valores .icon {
    background: color-mix(in srgb, var(--cor5), transparent 60%);
    border-radius: 1.2vw;
    display: inline-block;
    width: 1.2vw;
    height: 1.2vw;
    padding: 1.2vw;
    margin-right: 1.3vw;
    font-size: 1.2vw;
}

#sobre #descricao-direita .grid-valores .texto-valor h3 {
    color: rgb(var(--cor4));
    font-size: 1.5vw;
}

#sobre #descricao-direita .grid-valores .texto-valor p {
    letter-spacing: 0px;
    line-height: 1em;
    margin-top: 0.5vw;
    font-size: 1.2vw;
}

#patrocinio {
    background: radial-gradient(circle at top left, rgba(255,255,255,0.1), transparent 40%), linear-gradient(135deg, rgb(var(--cor4)), rgb(var(--cor1)), rgb(var(--cor2)));
    text-align: center;
    padding: 3vw 0px;
}

.marquee-container {
    width: 100vw;
    overflow: hidden;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.marquee-container h2 {
    font-size: 2vw;
    color: white;
    text-shadow: 2px 0px 15px rgb(var(--cor3));
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bolder;

}

.marquee-track {
    display: flex;
    width: max-content;
    animation: scroll-loop 20s linear infinite;
}

.logo-item {
    width: 200px;
    margin: 0 80px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    transition: 0.3s;
}

.logo-item img {
    height: 8vw;
    object-fit: contain;
}

@keyframes scroll-loop {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

#contato #contato-container {
    padding: 7vw 4vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#contato #contato-info h2 {
    color: rgb(var(--cor4));
    font-size: 3vw;
    font-weight: bolder;
    margin: 1.3vw 0px;
}

#contato #contato-info p {
    color: rgb(80, 80, 80);
    font-size: 1.3vw;
    text-align: justify;
    letter-spacing: 1px;
    margin: 1.2vw 0px;
}

#contato #contato-info #atendimento .item-contato {
    box-shadow: 1px 0px 10px rgb(143, 143, 143);
    border-radius: 1vw;
    display: flex;
    align-items: center;
    margin: 2vw 0;
    padding: 1.4vw;
}

#contato #contato-info #atendimento .item-contato h3 {
    color: rgb(var(--cor4));
    font-size: 1.4vw;
}

#contato #contato-info #atendimento .item-contato p {
    margin: 0px;
}

#contato #contato-info #atendimento i {
    background: color-mix(in srgb, var(--cor5), transparent 60%);
    color: rgb(var(--cor1));
    border-radius: 100px;
    padding: 1vw;
    margin: 1vw;
    font-size: 1.6vw;
}

#contato #social-link .social-icon {
    background-color: rgb(var(--cor4));
    border-radius: 100px;
    font-size: 1.5vw;
    padding: 1.2vw;
    margin-right: 1.7vw;
}

#contato #social-link .social-icon:hover {
    background-color: rgb(var(--cor1));
    box-shadow: 1px 2px 10px rgb(var(--cor4));
    transition: .5s;
}

#contato #contato-form {
    box-shadow: 1px 0px 10px rgb(143, 143, 143);
    border-radius: 1.3vw;
    display: flex;
    margin-left: 4vw;
    padding: 2vw;

}

#contato #contato-form .grupo-input {
    margin: 2vw 0px;
    display: grid;
}

#contato #contato-form .grupo-input label {
    color: rgb(var(--cor4));
    font-size: 1.3vw;
    font-weight: bold;
}

#contato #contato-form .grupo-input input {
    border: 1px solid rgb(197, 197, 197);
    border-radius: 1vw;
    padding: 1vw;
    margin: 1vw 0;
    width: 35vw;
}

#contato #contato-form .grupo-input textarea {
    border: 1px solid rgb(197, 197, 197);
    border-radius: 1vw;
    padding: 1vw;
    margin: 1vw 0;
    resize: none;
    min-width: 35vw;
    max-height: 10vw;
}

#contato #contato-form .grupo-input input, textarea::placeholder {
    font-size: 1vw;
}

#contato #contato-form button {
    background-image: linear-gradient(to right, rgb(var(--cor3)), rgb(var(--cor2)));
    display: inline-flex;
    border: none;
    border-radius: 1vw;
    color: white;
    font-size: 1.5vw;
    font-weight: bolder;
    width: 35vw;
    justify-content: center;
    padding: 1vw;
}

#contato #contato-form button:hover {
    cursor: pointer;
    background-image: linear-gradient(to right, rgb(var(--cor3), 0.8), rgb(var(--cor4), 0.8));
    box-shadow: 0px 0px 10px rgb(var(--cor3), 0.7);
    transition: 0.5s;
}

footer {
    background-color: rgb(var(--cor4));
    padding-top: 2vw;
}

#foot {
    border-top: 1px solid rgba(128, 128, 128, 0.438);
    font-size: 1vw;
    justify-content: space-between;
    display: flex;
    margin: 0 3vw;
}

footer #copy {
    
    margin-top: 1vw;
    padding: 1vw;
    color: gray;
}

footer #termo {
    padding: 2vw;
}

footer #termo a {
    color: gray;
    padding: 2vw;
}


footer #termo a:hover {
    color: rgb(var(--cor3));
}