@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body{
    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;


 }





@media (max-width: 720px) {
    .larguraPadrao{
        max-width: 85vw;
        margin: auto;
    }
    
    

    #cards{
        display: flex;
        justify-content: space-between;

        

    }

    #cards .card-home{
        margin-top: 6vh;
        width: 45%;
        background-color:#F7C0A5;
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 10px ;
        box-shadow: var(--sombra);
        
    }

    .card-home p{
        background-color: #ea5a14;
        width: 100%;
        height: 6vh;
        max-height: 50px;
        font: normal bold 4.5vw Roboto;
        color: white;
        text-align: center;
        padding: 20%;
        border-radius: 0 0 10px 10px;
        display: flex;
        justify-content: center;
        align-items: center;


    }

    .card-home img{
        margin: 10% auto;
        display: flex;
        width: 65%;
    
    }


    .informacoes{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 10vh;
        background-color: #F2F2F2;
        width: 100vw;
        padding: 2vw;
        
    }

    .informacoes h1{
        color: #ea5a14;
        margin: 4vw;
        font-size: 6vw;
    }

    .informacoes img{
        width: 30%;
        margin-bottom: 1.5vh;
    }

    .informacoes p{
        color: #1a1a1a;
        font: bolder 4vw Roboto, sans-serif;
        text-align: center;
        width: 40%;
        margin-bottom: 6vh;
    }

    .informacoes a{
        background-color: #ea5a14;
        width: 100vw;
        color: white;
        padding: 4vw;
        border-radius: 20px;
        font:bold 5vw Roboto, sans-serif;
        text-align: center;
        box-shadow: var(--sombra);
        margin-bottom: 3vh;
        cursor: pointer;
    }

    .informacoes a:hover{
        background-color: #ea5b14da;
        border: 2px solid #1a1a1a;
    }

    .informacoes:nth-child(2){
        background-color: white;
    }

    .informacoes:nth-child(2) a{
        display: block;
        margin-bottom: 5vh;
    }}

    @media(min-width:720px){
        /* main{
            width: 80vw;
            margin: auto;
        } */

        #barraPesquisa{
            width: 80vw;
            display: flex;
            justify-content: center;
            height: 6vh;
            margin: auto;
            
        }
    
        #barraPesquisa input{
            width: 75%;
            margin-right: -1px;
            border: 2px solid #ea5a14;
            border-radius: 5px 0 0 5px;
            font-size: 2vw;
            padding: 2vw;
        }
    
        #barraPesquisa input::placeholder{
            font-style: italic;
            text-align: center;
        }
    
        #barraPesquisa button{
            width: 25%;
            background-color: #1a1a1a;
            color: #fff;
            font-weight: bold;
            font-size: 2.2vw;
            border-radius: 0 5px 5px 0;
            margin-left: -1px;
            border: 2px solid #1a1a1a;
            padding: 2vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        #barraPesquisa button:hover{
            background-color: #1a1a1ae8;
        }

        #cards{
            display: none;
        }

        article{

            margin: auto;
        }

        .informacoes{
            display: grid; 
            grid-template-columns: 1fr 1fr 1fr; 
            grid-template-rows: 0.5fr 2fr 1fr 1fr; 
            gap: 1vh 4vw; 
            grid-template-areas: 
                "OQ OQ OQ"
                "BR filtro veiculos"
                "txtBr txtFiltro txtVeículos"
                "cadastrar cadastrar cadastrar"; 
            padding: 0 10vw 0 10vw;
            margin-top: 3vh;
            background-color: #f2f2f2;
            margin-top: 5vh;
        }

        .informacoes>h1{
            grid-area: OQ;
        }

        .informacoes>img:nth-child(2){
            grid-area: BR;
        }
        
        .informacoes>p:nth-child(3){
            grid-area: txtBr;
        }

        .informacoes>img:nth-child(4){
            grid-area: filtro;
        }
        
        .informacoes>p:nth-child(5){
            grid-area: txtFiltro;
        }

        .informacoes>img:nth-child(6){
            grid-area: veiculos;
        }
        
        .informacoes>p:nth-child(7){
            grid-area: txtVeículos;
        }
        .informacoes>a{
            grid-area: cadastrar;
        }

        .informacoes p{
            color: #1a1a1a;
            font: bolder 2vw Roboto, sans-serif;
            text-align: center;
            margin-bottom: 6vh;
        }

        .informacoes>h1{
            margin: 2vh auto;
            font: bold 2.5vw Roboto, sans-serif;
            color: #ea5a14;
        }

        .informacoes>img{
            width: 60%;
            margin: auto;
        }

        .informacoes a{
            background-color: #ea5a14;
            width: 35vw !important;
            color: white;
            padding: 2vw;
            border-radius: 20px;
            font: bold 2vw Roboto, sans-serif;
            text-align: center;
            box-shadow: var(--sombra);
            margin-bottom: 3vh;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: auto;
        }
        
        #funcionamento{
            background-color: #1a1a1a !important;
            
        }

        #funcionamento p{
            color:white;
        }
       
    

    }