:root{
        font-size: 10px;
        --main-color:#d3ad7f;
        --black:#131313;
        --bg:#010103;
        --border:0.1rem solid rgba(255,255,255,0.3);
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-decoration: none;
        font-family: "Roboto", sans-serif;
    }

    .caixa-video {
        position: fixed;
        z-index: -1;
        width: 100%;
        height: 100%;

    }

    .caixa-video video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
    }

    .mascara {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        background: linear-gradient(109deg, rgba(10, 12, 16, 0.99) 15%, rgba(10, 12, 16, 0.7) 50%, rgba(10, 12, 16, 0.99) 85%);

    }
    section {
        padding: 3rem 2rem;
        margin: 0 auto;
        max-width: 1200px;
    }

    .header{
        position: fixed;
        top:0;
        left: 0;
        z-index: 2;
        background-color:var(--bg);
        border-bottom: var(--border);
        width: 100vw;
    }
    .header section{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 50px;
        padding: 1.5rem 0;
        position: relative;
    }
    .header section a img {
        height: 6rem;
    }
    .header section nav a {
        margin: 0 1rem;
        font-size: 1.8rem;
        color: #fff;
        transition: 0.4s linear;

    }
    .header section nav a:hover {
        color: var(--main-color);
        border-bottom: 0.1rem solid var(--main-color);
        padding-bottom: 0.5rem;
    }
    .caixa-principal{
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
    .caixa-principal div{
        max-width: 60rem;
    }
    .caixa-principal div h3 {
        color: #fff;
        font-size: 6rem;
        text-transform: uppercase;

    }
    .caixa-principal div p {
        font-size: 2rem;
        color:#fff;
        font-weight: lighter;
        padding: 1rem 0;
        line-height: 1.8;
        
    }
    .botao-link {
        background-color: var(--main-color);
        cursor: pointer;
        margin-top: 2rem;
        display: inline-block;
        font-size: 1.7rem;
        color: #fff;
        padding: 1rem 3rem;
        border: none;
        transition: 0.3s linear;

    }
    .caixa-principal div a:hover{
        letter-spacing: 0.1rem;
    }

    .titulo {
        text-align: center;
        color: #fff;
        text-transform: uppercase;
        padding-bottom: 3.5rem;
        font-size: 4rem;

    }

   .titulo span {
        color: var(--main-color);

    }

    .caixa-sobre .sobre-container {
        display: flex;
        align-items: center;
        background-color: var(--black);
        gap: 1.5rem;
        flex-wrap: wrap;
        
    }
    
    .caixa-sobre .sobre-container .sobre-imagem {
        flex: 1 1 45rem;
    }

    .caixa-sobre .sobre-container .sobre-imagem img {
        width: 100%;
    }

    .caixa-sobre .sobre-container .sobre-texto {

        flex: 1 1 45rem;
        padding: 2rem;
    }

    .caixa-sobre .sobre-container .sobre-texto h3 {
        font-size: 3rem;
        color: #fff;

    }

    .caixa-sobre .sobre-container .sobre-texto p {
        font-size: 1.5rem;
        font-weight: lighter;
        color: #fff;
        line-height: 1.8;
        padding: 1rem 0;
    }

.modal {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    gap: 20px;
    z-index: 4;
    position: fixed;
    top:50%;
    left:-30%;
    transform: translate(-50%, -50%);
    transition: left 1s linear;
}

.mascara-modal {
   visibility: hidden; 
   z-index: 3;
   position: fixed;
   inset: 0;
   width: 100vw;
   height: 100vh;
   background: linear-gradient(109deg, rgba(10, 12, 16, 0.99) 15%, rgba(10, 12, 16, 0.7) 50%, rgba(10, 12, 16, 0.99) 85%);
}