:root{
    --white: #F8FBFE;
    --blue: #286CAE;
}
body, main, #Servicos, #Confianca, #Trabalhos, #Pronto{
    overflow-x: hidden;
}

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

main button:hover:nth-child(2){
    color: white;
    border-color: white;
}
main{
    background-image: url(img/main\ serralheria.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 90vh;
    display: flex;
    flex-wrap: wrap;
}

main .textos{
    color:var(--white);
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding-left: 10%;
    width: 100%;
}

main h1{
    font-size: 3.8vw;
    font-weight: 700;
    width: 50%;
}

main p{
    font-family: sans-serif;
    font-size: 1.2vw;
    width: 50%;
    font-weight: 300;
    margin-top:1%;
    padding-left: 0.5%;
}

.botoes{
    display: flex;
    align-items: center;
    gap:2vw;
    width: 60%;
    padding-left: 10%;
    margin-top: -12vh;
}

.botao2{
    color:#E3ECF5;
    justify-content: center;
    gap:1vw;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.693);
    padding: 12px 10px;
    justify-content: end;
    transition: all ease 0.2s;
}
main .botao2:hover{
    font-size: 1vw;
    border: none;
}

.botoes button:nth-child(1){
    padding: 12px 32px;
    font-weight: 500;
}

#Servicos{
    width: 100%;
    height: 90vh;
    background-color: #F7FBFD;
    color: #051127;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10%;
    position: relative;
}

#Servicos h2{
    width: 100%;
    font-size: 36px;
    margin-top: 40px;
}

#Servicos .cards{
    display: flex;
    gap:24px;
}

#Servicos .card{
    position: relative ;
    background-color: #FFFFFF;
    width:30%;
    height: 85%;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 10vh;
    border-radius: 16px;
    overflow: hidden;
}

#Servicos .card:hover{
    box-shadow: 0px 8px 16px 4px rgba(0, 0, 0, 0.174);
}

#Servicos a{
        margin-left: 2%;
}
#Servicos a button{
    padding-top: 20%;
}

.card img{
    width: 100%;
    border-radius:6% 6% 0 0;
}

.card .texto{
    padding: 0 1.4vw;
    gap:1.4vw;
    background-color: white;
    margin-top: -1.5vw;
}

#Servicos .card p{
    font-weight: 200;
    font-size: 1.2vw;
    color: #051127a4;
    padding-top: 1.5vh;
    margin-bottom: 10%;
   
}

#Servicos .card h3{
    padding-top: 1.4vh;
}

#Servicos button, #Trabalhos button{
    color: #08173F;
    background-color: transparent;
    font-weight: 500;
    padding: 0;
    margin-bottom: 2vh;
    align-self: center;
}

#Servicos button:hover, #Trabalhos button:hover{
    color:#286CAE;
}

#Confianca{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: auto;
    background-color: #E3ECF5;
    padding: 0 10vw;
    overflow: hidden;
}

#Confianca h2{
    width: 100%;
    font-size: 36px;
    margin-top: 5%;
    display: flex;
    color: #051127;
    margin-bottom: 32px;
}

#Confianca .cards{
    display: flex;
    gap:2vw;
    padding-bottom: 4%;
}

#Confianca .card{
    width: 30%;
    background-color: #F8FBFE;
    padding: 16px 24px;
    border-radius: 12px;
}

#Confianca svg{
    color:#286CAE;
    margin:8px 0 16px;  
}

#Confianca h3{
    margin-bottom: 12px;
}

#Confianca p{
    margin-bottom: 12px;
    color: #05112790;
    font-size: 14px;
}

#Trabalhos{
    width: 100%;
    height: 80vh;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10vw;
    justify-content: space-between;
}

#Trabalhos h2{
    width: 80%;
    font-size: 2.4vw;
    padding-top: 6vh;
    display: flex;
    color: #051127;
}

#Trabalhos button{
    margin-top: 3vh;
    display: flex;
    font-size: 1.1vw;
}

#Trabalhos .imagens{
    display: flex;
    flex-direction: row;
    width: 100%;
    gap:1.4vw;
}

.imagens img{
    width: 24%;
    max-width: 25%;
    height: 35vh;
    border-radius: 6%;
}

#Pronto{
    width: 100%;
    height: 50vh;
    background-color: #08173F;
    color: #F7FBFD;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:4vh;
}

#Pronto h2{
    font-size: 2.4vw;
    font-weight: 600;
    margin-top: 9vh;
}

#Pronto h3{
    color: #f7fbfdb7;
    font-weight: 400;
    font-size: 1vw;
    width: 34%;
    text-align: center;
}

#Pronto button{
    padding: 16px 32px;
}

/* Media Query */

@media(max-width:1084px){
    #Confianca{
        align-items: center;
    }

    #Confianca .cards{
     justify-content: space-between;   
    }

    #Trabalhos button{
        font-size: 1.6vw;
    }

    #Pronto h3{
    font-size: 1.5vw;
    }
}

@media(max-width: 1000px){
    
    #Trabalhos button{
        font-size: 1.8vw;
        font-weight: 600;
    }

    #Confianca .cards{
        margin-bottom: 5%;
    }

    #Pronto h3{
        font-size: 1.6vw;
    }
}

@media(max-width:851px){

    main h1{
        font-size: 4vw;
    }
    main p{
        font-size: 1.7vw;
    }

    .imagens{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .imagens img{
        width:40%;
        max-width: 48%;
    }

    main button{
        font-size: 1.6vw;

    }
    #Confianca{
        height: auto;
        align-items: center;
        justify-content: center;
    }
    #Confianca h2{
        text-align: center;
        display: block;
    }
    #Confianca .cards .card{
        margin-bottom: 5vh;
    }

    #Confianca .cards .card{
       width:fit-content
    }
    #Trabalhos{
        height: auto;
        padding-bottom: 3%;
    }
    #Trabalhos h2{
        font-size: 3.4vw;
        margin: 0 0 5vh;
    }

    #Tranalhos .imagens img{
        width:48%;
    }

    #Pronto h2{
        font-size: 4vw;
    }

    #Pronto h3{
        font-size: 2vw;
        width:60%
    }
}

@media(max-width:781px){
   #Trabalhos{
    align-items: center;
    flex-direction: column;
    text-align: center;
    flex-wrap: nowrap;
    padding:10% 0 0 0;
    height:auto;
    min-height: 0;
    gap:0;
    }

    #Trabalhos h2{
        font-size: 5vw;
        width: auto;
    }

    #Trabalhos a button{
        margin:0;
        font-size: 2.2vw;
        transform: translateX(200%);
        margin: 5vh 0;
    }

    #Trabalhos .imagens{
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
        margin-bottom: 5%;
        gap:8vh;
    }

    #Trabalhos .imagens img{
        width:60%;
        max-width:100%;
    }

      #Confianca{
        padding: 0;
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
    }
    #Confianca h2{
      
        display: flex;
        text-align: center;
        justify-content: center;
        width: 100%;
        margin: 3% 0 0 0;
    }
    #Confianca .cards{
        margin-top: 4%;
        display: flex;
        flex-direction: column;
       align-items: center;
       justify-content: center;
       padding: 0;
    }

    #Confianca .card {
        max-width: 80%;
        margin:auto;
    }

 .contato ul{
     margin-top: -10vh;
    }
    }

 

@media(max-width:701px){
        main{
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        main .botoes{
            justify-content: space-between;
            margin-top:5%;
            padding: 0;
        }

        main .textos{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
        }
        main h1{
            margin-top: 12%;
            font-size: 2rem;
            width: 100%;
            text-align: center;
        }

        .textos p{
            margin-top: 2%;
            font-size: 1rem;
            width: 90%;
            text-align: center;
        }

        #Confianca{
            height: auto;
            padding-top: 4%;
        }

        #Trabalhos{
            padding: 0;
        }

        #Trabalhos h2{
            margin-top:3%;
        }

        #Trabalhos img{
            aspect-ratio: 12/9;
            height: fit-content;
        }

}

@media(max-width:610px){

        main .textos{
            max-width: 90%;
            margin-top: 12%;
        }
       main .botoes{
            gap:8vw;
            margin-top: 10%;
            width: 80%;
        }
        main button{
            font-size: 2vw;
        }

        #Servicos{
            height: auto;
        }

        #Servicos h2{
            text-align: center;
            margin-bottom: 5%;
        }
        #Servicos .cards{
            flex-direction: column;
            align-content: center;
            width:100%;
        }
        #Servicos .card{
            margin: auto;
            width:70vw;
            padding-left: 2%;
        }

        #Servicos .card p{
            font-size: 2.4vw;
        }

        #Servicos a button{
            margin-bottom: 10vh;
        }
        #Confianca h2{
            max-width: 80%;
            font-size: 5vw;
            margin-top: 5%;
        }
        
        #Pronto h2{
            font-size: 4vw;
        }
        #Pronto h3{
            font-size: 2.4vw;
            width: 70%;
        }
}

@media(max-width:501px){
     #Confianca h2{
     font-size: 7vw;
        display: flex;
        text-align: center;}

        #Trabalhos{
            padding: 0;
        }

        #Trabalhos h2{
            font-size: 7vw;
            padding: 0;
        }

        #Trabalhos a button{
        margin: 0 20vw 4vh 0;
        font-size: 3vw;
        }

        #Pronto h2{
            font-size: 5vw;
        }

        #Pronto h3{
         font-size: 3vw;
        }
}

@media(max-width:451px){
    .textos p{
      font-size: 3vw; 
      margin-top: 5%; 
    }

    #Servicos .texto p{
        font-size: 3vw;
        margin-top: 3%;
    }

    #Confianca h2{
        font-size: 7vw;
        display: flex;
        align-self: center;
        text-align: center;
    }
}

@media(max-width:401px){
    main button{
        width: max-content;
    }

    main .botoes{
        justify-content: center;
        gap:4vw;
    }

    #Servicos h2{
        font-size: 8vw;
        margin-bottom: 10%;
    }

    #Trabalhos h2{
        margin-top: 4vh;
    }

 
}