html{
    font-size: 62.5%;
    scroll-behavior: smooth; /* Deixa a rolagem da página mais suave quando for deslocar para alguma seção interna */
}

body{
    display: grid;
    grid-template-areas: "header header header header"
                         "hero hero hero hero"
                         "about about about about"
                         "services services services services"
                         "projects projects projects projects"
                         "footer footer footer footer";
    grid-template-columns: repeat(4, 1fr);
    font-size: 1.6rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

/* HEADER */
.header{
    grid-area: header;
    background-color: white;

    position: fixed;
    top: 0;
    width: 100%; /* Essas aqui são pra melhorar o visual, viu? */
    z-index: 100; /* Garante que o cabeçalho fique em cima de outros elementos */
}

.header .header-container{
    display: flex;
    padding: 20px 40px;
    justify-content: space-between;
    align-items: center;
    min-height: 75px;
}

.header h1{
    font-size: 3rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s; /* Tempo de transição para o hover não ficar muito duro na mudança de cor */
}

.header a:hover h1{ /* Quando passar o mouse no <a>, fazer isso no <h1>*/
    color:coral;
}


/* HERO */
.hero{
    grid-area: hero;
    height: 89vh; /* não colocar 100 para o usuário ver que tem mais conteúdo pra baixo */
    background: url('../images/lemons.jpg') center center no-repeat; /* center 2 vezes para alinhar na vertical e na horizontal*/
    background-size: cover; /* faz a imagem se adequar ao tamanho da tela */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* é o pai do position absolute (setinha preta) */
}

.hero h2{
    font-weight: 500;
    text-transform: uppercase; /* deixar tudo MAIÚSCULO */
    font-size: 4rem;
}

.hero:after{
    content: url('../images/seta_preta.png');
    position: absolute; /* é filho do position relative do hero */
    height: 35px;
    bottom: 40px;

    animation: movimento-da-seta 0.6s infinite alternate ease-in-out;
}

@-webkit-keyframes movimento-da-seta{
    0% { -webkit-transform: translateY(0); opacity: 0.9; }
    100% { -webkit-transform: translateY(0.5rem); opacity: 0.4; }
}

@media(max-width: 425px){
    .hero{
        height: 60vh;
    }

    .hero h2{
        font-size: 2rem;
    }
}

/* ABOUT */
.about{
    grid-area: about;
    display: grid;
    grid-template-areas: "item rigth"
                         "left item";
    grid-template-columns: 1fr 1fr;
    background-color: #fff;
    max-width: var(--max-width-size);
    margin: 0 auto;
}

.about .image{
    height: 100%;
    width: 100%;
}

.about .image.rigth{ /* duas classes na mesma div tem que colocar sem espaço */
    background: url('../images/bridge.jpg') center center no-repeat;
    background-size: cover;
}

.about .image.left{ /* duas classes na mesma div tem que colocar sem espaço */
    background: url('../images/sky.jpg') center center no-repeat;
    background-size: cover;
}

.about .item{
    padding: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about .item h3{
    font-weight: 700;
    font-size: 4rem;
}

.about .item p{
    font-size: 1.8rem;
    margin: 30px 0;
    font-weight: 400;
}

.about .item .btn-know-more{
    font-size: 1.6rem;
    align-self: flex-start; /* para a área "clicável" ser apenas em cima do texto e não a linha toda */
}

.about .item .btn-know-more:hover{
    font-weight: 700;
}

@media (max-width: 425px){

    .about .item{
        text-align: center;
    }

    .about .item .btn-know-more{
        align-self: center;
    }

    .about{
        grid-template-columns: 1fr; /* 1 coluna */
        grid-template-rows: repeat(4, 1fr); /*4 linhas do msm tamanho */
    }

    /* Para intercalar imagem com o texto. Sem essa ordem as duas imagebs ficariam juntas entre os textos */
    .item-0 {
    order: 0;
    }
    .item-1 {
    order: 1;
    }
    .item-2 {
    order: 2;
    }
    .item-3 {
    order: 3;
    }

}

/* SERVICES */
.services{
    grid-area: services;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.services .service{
    padding: 70px 20px;
    text-align: center;
}

.services .service img{
    width: 250px;
    margin-bottom: 30px;
}

.services .service h3{
   font-size: 1.8rem;
   font-weight: 700; 
}

.services .service p{
   font-size: 2rem;
   font-weight: 400; 
   max-width: 400px;
   margin: 20px auto 0;
   line-height: 25px; /* aumentar o espaçamento das linhas */
}

.services .service:nth-child(1){ /* Estilizar o 1º "service" do "services" */
    background-color: lightskyblue;
}

.services .service:nth-child(2){ /* Estilizar o 2º "service" do "services" */
    background-color: lightpink;
}

@media (max-width: 425px){
    .services{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }
}


/* PROJECTS */
.projects{
    grid-area: projects;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.projects img{
    width: 100%;
    height: 100%;
    transition: 0.3s;
}

.projects a:hover img{
    opacity: 0.8;
}

@media (max-width: 768px){
    .projects{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 1fr);
    }
}

@media (max-width: 425px){
    .projects{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }
}





/* FOOTER */
.footer{
    grid-area: footer;
    background-color:lightgreen;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 100px 0;
}

.footer h4{
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer nav{
    margin: 50px 0;
}

.footer nav ul{
    display: flex;
    justify-content: center;
    max-width: 320px;
    margin: 0 auto; /* Para centralizar */
}

.footer nav ul li a{
    margin: 20px;
    font-size: 2rem;
    font-weight: 500;
    transition: 0.3s;
}

.footer nav ul li a:hover, i:hover{
    opacity: 0.3;
}

.footer .social i{
    font-size: 2rem;
    transition: 0.3s;

}

.footer .social a{
    margin: 20px;

}