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


img,
video,
svg {
    display: block;
    width: 100%;
    height: auto;
}


:root {
    --branco-neve: #FAF8F5;
    --preto: #000;
    --bordeaux: #7B0404;
    --bordeux-medio: #C22424;
    --azul-escuro: #0f1727;
}


body {
    background-color: var(--branco-neve);
    color: var(--preto);
    font-family: sans-serif;
    font-size: 14px;
}


html {
    scroll-behavior: smooth;
}



#golega{

grid-column: 1/13;
grid-row: 1;

}

#cavaloinicio{
grid-column: 2/7;
grid-row: 1;

z-index: 10;

transform: rotate(-10deg);
align-self: flex-end;
position: relative;
top: 80px;


}

@font-face {
    font-family: Grenze;
    src: url(fonts/Grenze/Grenze-VariableFont_wght.ttf);
}

@font-face {
    font-family: Rubik;
    src: url(fonts/Rubik/Rubik-VariableFont_wght.ttf);
}


.banda {
    width: 100%;
}


.bordeaux {
    background-color: var(--bordeaux);
}

.bordeaux-medio {
    background-color: var(--bordeux-medio);


}

.azul-escuro {
    background-color: var(--azul-escuro);
}


.branco-neve {
    background-color: var(--branco-neve);
}


.max {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


.grelha12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 28px;
}


#logo {
    width: 100px;
    grid-column: 1/3;
    margin: 37px 0;
}


nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    grid-column: 3/13;
}


nav a {
    text-decoration: none;
    color: var(--branco-neve);
    margin-left: 25px;
}



#Botoes {
    color: var(--branco-neve);
    font-size: 20px;
    line-height: 76px;
    font-family: "Rubik";
    font-weight: 400px;
    grid-column: 6/12;

}

#identificacao {


    color: var(--branco-neve);
    font-size: 80px;
    line-height: 76px;
    font-family: "Grenze"

}

#convite {
    margin-top: 30px;
    color: var(--branco-neve);
    font-size: 36px;
    line-height: 48px;
    font-family: "Grenze"

}

#texto {
    grid-column: 7/13;
    
    align-self: center;
grid-row: 1;

}

#Atencao {
    margin-top: 130px;
    color: var(--azul-escuro);
    font-size: 80px;
    line-height: 76px;
    font-family: "Grenze";
    grid-column: 3/11;
text-align: center;
}



#atencaopequeno {

    margin-top: 30px;
    color: var(--bordeux-medio);
    font-size: 36px;
    line-height: 48px;
    font-family: "Grenze";
    margin-bottom: 130px;
text-align: center;
    grid-column: 4/10;
}


#linhasdelama{

grid-row: 1;
grid-column: 1/13;
position: relative;
top: -130px;
transform: rotate(-5.72deg);


}

#subtitulo {
    color: var(--branco-neve);
    grid-column: 1/9;
    font-family: "Grenze";
    font-size: 58px;
    line-height: 68px;
    font-weight: 500px;
margin-top: -215px;

}

#subtitulo2 {
    color: var(--branco-neve);
    margin-top: 330px;
    font-family: "Grenze";
    font-size: 58px;
    line-height: 68px;
    font-weight: 500px;
    grid-column: 6/13;
}

#textinho {
    color: var(--branco-neve);
    font-size: 20px;
    font-family: "Rubik";
    line-height: 32px;
    grid-column: 1/7;
    margin-top: 30px;

}

#textinho2 {
    color: var(--branco-neve);
    font-size: 20px;
    font-family: "Rubik";
    margin-top: 30px;
    line-height: 32px;
    grid-column: 6/13;
    margin-bottom: 100px;
}

#montado{

grid-column: 1/13;
grid-row:1/3;



}






#experiencia {
    color: var(--branco-neve);
    margin-top: 130px;
    font-family: "Grenze";
    font-size: 58px;
    line-height: 68px;
    font-weight: 500;
    grid-column: 3/11;
    text-align: center;
grid-row: 1;
z-index: 10;
}

#experienciatexto {
grid-column: 3/11;
    text-align: center;
    color: var(--branco-neve);
    margin-top: -30px;
    font-size: 36px;
    line-height: 48px;
    font-family: "Grenze";
    font-weight: 400;

    grid-row: 2;
z-index: 10;
}


#trescavalos{

margin-top: 125px;
grid-column: 2/7;
grid-row: 1;

}
#produtos{
margin-top: 125px;
   grid-column: 7/13;
grid-row: 1;

}

#mocado{
margin-top: 30px;
grid-column: 1/5;
grid-row: 2/4;
}

#vila{
margin-top: 30px;
 grid-column: 5/10;
grid-row: 2;

}

#castanhasassadas{
 grid-column: 10/13;
grid-row: 2;
margin-top: 30px;

}


#loja{
margin-top: 30px;
 grid-column: 5/12;
grid-row: 3;

}

#video{

 grid-column: 2/12;
grid-row: 4;
border-radius: 30px;
margin-top: 125px;
margin-bottom: 125px;
}

#mostre{

grid-column: 4/10;
 color: var(--bordeaux);
    margin-top: 130px;
    font-family: "Grenze";
    font-size: 58px;
    line-height: 68px;
    font-weight: 500;
  
    text-align: center;
grid-row: 1;
z-index: 10;
}

#conquiste{
grid-column: 3/11;
    text-align: center;
    color: var(--preto);
    margin-top: -30px;
    font-size: 36px;
    line-height: 48px;
    font-family: "Grenze";
    font-weight: 400;
margin-top: 30px;
margin-bottom: 130px;
    grid-row: 2;
z-index: 10;


}


#garante{
color: var(--branco-neve);
grid-column: 5/10;

}

#inscricoes{
color: var(--branco-neve);
grid-column: 6/9;
font-family: "Grenze";
font-size: 58px;
font-weight: 400;
}



#linhaferraduras{

grid-row: 1;
grid-column: 1/13;
position: relative;
top: -100px;
transform: rotate(-5.72deg);



}

#cronometragem{
color: var(--branco-neve);
font-size: 100px;
font-family: "Grenze";

grid-column: 4/10;

display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 25% 30px 25% 30px 25% 30px 25%;
text-align: center;
}

#cronometragem .legenda{

font-size: 20px;
font-family: "Rubik";
text-align: center;

}


#garante{

font-family: "Grenze" ;
font-size: 36px;
color: var(--branco-neve);
line-height: 48px;
grid-column: 4/10;

}


#inscricoes{
grid-column: 5/9;
font-family: "Grenze" ;
font-size: 58px;
color: var(--branco-neve);
display: flex;
align-items: center;
gap: 15px;
    margin-top: 55px;

    margin-bottom: 217px;
}
#seta{

width: 90px;


}