@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&display=swap');


*{
    font-family: "Exo 2", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

:root{
    --BG_base: #D9DCDF;
    --BG_contrast: #E1E5E8;
    --Azul_principal: #294B78;
    --Laranja_principal: #FF7A0F;
    --Texto_preto: #3F4242;
    --Texto_branco: #E0E0E0;
    --Numero_motivo: #3c5f5080;
}
html,
body{
    background-color: var(--BG_base);
    width: 100vw;
    height: 100vh;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

html{
    height: min-content;
}

span{
    color: var(--Laranja_principal);
}


#home{
    width: 100%;
    height: max-content;
    padding: 70px 5% 0;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 20px;
    color: var(--Azul_principal);

    .home_capa{
        height: 40vh;
        animation: pulsar 10s ease-in-out infinite;
        cursor: pointer;

    }

    .content{
        
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: center;

        h1{
            font-size: clamp(24px, 1.7rem, 40px);
            font-size: bold;
        }

        p{
            font-size: 18px;
        }

        .btns{
            display: flex;
            gap: 30px;
            justify-content: center;
            i{
                transition: all .3s ease-in-out;
                font-size: 0rem;
            }

            button{
                border: none;
                a{
                    padding: 7px 15px;
                    border-radius: 5px;
                    font-size: 20px;
                    font-weight: bold;
                    background-color: var(--Azul_principal);
                    color: var(--BG_base);
                }
            }
            button:nth-child(2){
                a{
                    border: 2px solid var(--Laranja_principal);
                    background-color: var(--BG_base);
                    color: var(--Laranja_principal);
                }
            }
            button:hover{
                
                a{
                    i{
                        margin-left: 1rem;
                        font-size: 1.5rem;
                    }
                }
            }
        }
    }

    .home_capa{
        max-width: 100%;
    }
}


#motivos{
    width: 100%;
    background-image: url(../img/bg_motivos.png);
    background-position: center center;
    padding: 5vh 5vw;
    position: relative;

    .titolo{
        color: var(--Texto_branco);
        font-size: 28px;

    }

}

#home_services{
    width: 100vw;
    padding: 5vh 5vw;
    display: flex;
    flex-direction: column;
    gap: 25px;

    .cards{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 30px;

        .card{
            width: 45%;
            min-height: 150px;
            padding: 5%;
            background-color: var(--BG_contrast);
            border-radius: 15px;
            box-shadow: 10px 10px 15px #3f424241;
            transition: background .5s ease-in-out;

            img{
                width: 60px;
            }

            h3{
                max-width: 100%;
                font-size: 21px;
                font-weight: bolder;
                color: var(--Azul_principal);
                transition: background .5s ease-in-out;
                transition-delay: .3s;
            }

            &:nth-child(2),
            &:nth-child(4){
                transform: translateY(50px);
            }
            
            &:hover{
                background-color: var(--Azul_principal);
                color: var(--Texto_branco);
                h3{color: var(--Laranja_principal);}
            }
        }

        
    }
        
    .text{
        width: 100%;
        height: min-content;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .titolo{
            font-size: 24px;
            font-weight: bolder;
            color: var(--Azul_principal);

            span{
                font-size: 18px;
            }
        }

        p{
            color: var(--Texto_preto);
            font-size: 18px;
            font-weight: 600;
        }

        button{
            padding: 10px 15px;
            background-color: var(--Azul_principal);
            border: none;
            border-radius: 10px;
            margin-right: 15px;
            i{
                transition: all .3s ease-in-out;
                font-size: 0rem;
            }

            

            a{
                font-size: 19px;
                font-weight: 600;
                color: var(--Texto_branco)
            }

            &:nth-child(2){
                background-color: transparent;
                border: 3px solid var(--Laranja_principal);

                a{
                    color: var(--Laranja_principal);
                    border: none;
                }
            }
        }
    
        button:hover{
            
            a{
                i{
                    margin-left: 1rem;
                    font-size: 1.5rem;
                }
            }
        }
    }
}

#home_sob{
    width: 100%;
    padding:  5vh 3vw;
    background-color: var(--BG_contrast);
    display: flex;
    flex-direction: column;
    gap: 2vh;

    img{
        width: 100%;
        max-width: 500px;
    }

    .content{
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin: 0 5vw;

        h1{
            font-family: "Exo 2", sans-serif;
            font-size: 24px;
            color: var(--Azul_principal);

            span{
                font-size: 32px;
            font-family: "Orbitron", sans-serif;
            }
        }

        p{
            font-size: 18px;
            color: var(--Texto_preto);
            text-align: justify;
        }
        strong{
            font-family: "Orbitron";
        }
    }
}


#home_form{
    width: 100%;
    padding: 5vh 5vw;
    background-image: url(../img/form.png);
    position: relative;

    .titolo{
        font-size: 30px;
        margin-bottom: 2vh;
    }
    p{
        font-size: 18px;
        color: var(--Texto_branco);
    }

    form{
        width: 100%;
        background-color: var(--Azul_principal);
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        padding: 20px 3%;
        gap: 2vh;
        position: relative;
        z-index: 2;
        

        input{
            height: 50px;
            padding: 2vw 3vw;
            font-size: 20px;
            color: var(--Texto_preto);
            border-radius: 10px;
            border: none;
            font-weight: 600;

            &::placeholder{
                color: var(--Texto_preto);
            }
            
        }
        textarea{
            width: 100%;
            height: clamp(200px, 25vh, 500px);
            padding: 3vw;
            font-size: 20px;
            font-weight: 600;
            color: var(--Texto_preto);
            border-radius: 15px;

            &::placeholder{
                color: var(--Texto_preto);
            }
        }

        button{
            font-size: 22px;
            font-weight: 900;
            color: var(--Texto_branco);
            background-color: var(--Laranja_principal);
            border: none;
            padding: 1vh 10%;
            border-radius: 10px;
        }
    }

    &::before{
        content: "";
        background: linear-gradient(to bottom, #00000000, #D9DCDF);
        height: 20%;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
    }
}



@media (min-width: 1024px) {
    

    #home{

        width: 92%;
        max-width: 1400px;
        margin: auto;
        padding: 2vh 0 0 0;
        flex-direction: row;
        text-align: start;
        position: relative;

        .content{
            text-align: start;
            justify-content: space-around;

            h1{
                font-size: 40px;
            }

            p{
                font-size: 24px;
                margin-left: 15px;
            }

            .btns{
                width: max-content;
                margin-left: 15px;
                justify-content: start;
                margin-top: 3vh;
            }
        }
        .home_capa{
            height: max-content;
            max-height: 80%;
        }
    }

    /* .destaque{
        flex-direction: row;
        padding: 2vh 5vw;


        div{
            margin: 0 0;
            flex-direction: column;
            align-items: start;

        img{
            height: 55px;
        }
        }

        .item{
            margin: 0;
            padding-right: 20px;
        }

    } */


    #home_services{
        flex-direction: row;
        padding-bottom: 80px;

        .cards{
            justify-content: space-around;
        }

        .text{
            max-width: 50%;
        }
    }

    #home_sob{
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    #home_form{
        margin-top: 10vw;
        display: flex;
        flex-direction: row;
        gap: 5%;

        .txt{
            width: 90%;

            p{
                font-size: 1.5rem;
            }
        }
        .titolo{
            font-size: 4rem;
        }

        form{
            width: 80%;
            padding: 4%;
            gap: 1.5rem;
            transform: translateY(-25%);
            input,
            textarea{
                padding: 01rem;
                font-size: 1.3rem;
            }
            textarea{
                height: 300px;
            }
        }
    }
}