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

body {
    background: #e3e3e3;
}

.interface {
    max-width: 1280px;
    margin: 0 auto;
}

header .btn-contato button, .hero-site button, .dribles button {
    font-size: 18px;
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    transition: .5s;
}

header .btn-contato button:hover, .hero-site button:hover, .dribles button:hover {
    background-color: #fff;
    color: #000;
}

/* Estilo do header */

header {
    width: 100%;
    padding: 40px 0;
    position: fixed;
    top: 0;
    left: 0;
    
    transition: .5s;
    z-index: 9999999999999999999999;
}

header .interface {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo img {
    max-width: 60px;
}

/* Estilo do menu dinâmico */

header .logo img.logo-preta {
    display: none;
}

header.rolar {
    background-color: #fff;
    padding: 20px 0;
    box-shadow: 0 0 8px #00000062;
}

header.rolar .menu-desktop nav ul li a {
    color: #000;
}

header.rolar .btn-contato button {
    border: 1px solid #000;
    color: #000;
}

header.rolar .btn-contato button:hover {
    background-color: #000; 
    color: #fff;   
}

header.rolar .logo .logo-branca {
    display: none;
}

header.rolar .logo .logo-preta {
    display: block;
}

/*--------------------------------------*/

header .logo img:hover {
    transition: .5s;
    transform: scale(1.3);
    cursor: pointer;

}

header .menu-desktop nav ul {
    list-style-type: none;
}

header .menu-desktop nav ul li {
    display: inline-block;
    margin: 0 40px;
}

header .menu-desktop nav ul li a {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    transition: .2s;
}

.menu-desktop nav a:hover {
    transform: scale(1.05);
}

header .btn-contato button {
    width: 140px;
    height: 50px;
}

header .btn-contato button, .hero-site button {
    font-size: 18px;
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    transition: .5s;
}

header .btn-contato button:hover, .hero-site button:hover {
    background-color: #fff;
    color: #000;

}

/* Estilo do hero */

section.hero-site {
    height: 100vh;  
    background-image: url(../images/bg-site-5.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.hero-site .interface {
    display: flex;
    align-items: center;
    height: 100%;
}

.hero-site .txt-hero h1 {
    font-size: 4em;
    line-height: 70px;
    font-weight: 200;
}

.hero-site .txt-hero h1 span {
    display: block;
    font-weight: 800;
}

.hero-site .txt-hero p {
    font-size: 20px;
    font-weight: 300;
    margin: 20px 0;
}

.hero-site .txt-hero p span {
    display: block;
}

.hero-site button {
    width: 220px;
    height: 60px;
    font-size: 20px;    
}

/* Estilo das biografia */

section.biografia {
    padding: 80px 0;
}

.biografia .itens-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10%;
    margin-bottom: 60px;
}

.biografia .itens-container .img-itens img {
    max-width: 450px;
    border-radius: 10px;
    box-shadow: 3px 3px 9px black;
}

.biografia .itens-container .txt-itens h3 {
    font-size: 3em;
    line-height: 50px;
    margin-bottom: 20px;
}

.itens-container .txt-itens h3 span {
    font-weight: 300;
}

/* Estilo dos botões de contato */

section.contato {
    background-color: #fff;
    padding: 80px 0;
}

.txt-contato, .icons-contato {
    display: inline-block;
    width: 50%;
    margin-right: -4px;
    vertical-align: middle;
}

.contato .txt-contato h3 {
    font-size: 2.5em;
    line-height: 50px;
    font-weight: 300;
    margin-bottom: 20px;
}

.contato .txt-contato h3 span {
    display: block;
    font-weight: 700;
}

.contato .icons-contato a {
    text-decoration: none;
}

.contato .icons-contato button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60%;
    height: 60px;
    margin: 0 auto 20px auto;
    padding: 0 60px;

    background-color: transparent;
    border: 1px solid #000;
    cursor: pointer;
    transition: .5s;
}

.contato .icons-contato button i {
    font-size: 20px;    
}

.contato .icons-contato button:hover {
    background-color: #000;
}

.contato .icons-contato button:hover i, .contato .icons-contato button:hover p {
    color: #fff;
}

/* Estilo da sessão dribles */

section.dribles {
    height: 600px;
    
    background-image: url(../images/bg-site-6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    
    position: relative; 
    color: #fff; 
    text-align: center;
}

.dribles > .overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000000c2;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.dribles > .interface {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    z-index: 2;
    position: relative;
}

.dribles h3 {
    font-size: 3em;
    line-height: 50px;
    font-weight: 200;
}

.dribles h3 span {
    display: block;
    font-weight: 700;
}

.dribles p {
    margin: 20px 0;
    font-size: 20px;
    font-weight: 300;
}

.dribles button {
    width: 220px;
    height: 60px;
}

/* Estilo seção planeta Ney */

section.planeta-ney {
    padding: 80px 0;
}

.txt-ney, .instrucoes {
    display: inline-block;
    width: 50%;
    margin-right: -4px;
    vertical-align: top;        
}

.planeta-ney .txt-ney {
    position: sticky; 
    top: 50%;
    padding-bottom: 35px;  
}

.planeta-ney .txt-ney h3 {
    font-size: 4em;
    line-height: 60px;
    font-weight: 300;
}

.planeta-ney .txt-ney h3 span {
    display: block;
    font-weight: 700;
}

.instrucoes .instru-box {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-bottom: 40px;
    border: 2px solid #000;
    padding: 20px;
}


.instrucoes .instru-box img {
    min-width: 100px;
    cursor: pointer;
}

.instrucoes .instru-box h4 {
    font-size: 1.5em;
    font-weight: 800;
    margin-bottom: 10px;    
}

.instrucoes .instru-box h4 span {
    font-weight: 300;
}

.instrucoes .instru-box p {
    line-height: 20px;
}

/* Estilo do rodapé */

footer {
    background-color: #000;
    width: 100%;
    text-align: center;
    padding: 30px 0;
}

footer .top-footer button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: transparent;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    margin: 0 10px;
    transition: .5s;
}

footer .top-footer button:hover {
    background-color: #fff;
    color: #000;
}

footer .middle-footer {
    margin: 20px 0;
}

footer .middle-footer a {
    color: #fff;  
    margin: 0 15px; 
}

footer .bottom-footer {
    border-top: 2px solid #fff;
}

footer .bottom-footer p {
    color: #fff;
    margin-top: 15px;
}