html, body{
    margin: 0 !important;
    padding: 0 !important;
    scroll-behavior: smooth;
}
:root {
    --azul-claro: #1473E6;
    --azul-intermediario: rgba(3, 48, 133, 0.7);
    --azul-escuro: #010B3D;  
    
    --preto: rgb(31, 31, 31); 
    --cinza-claro: #c7c7c7; 
    --cinza-escuro: #333333; 
    --cinza-escuro-transparente: rgba(31, 31, 31, 0.7);

}

/*==================Configurações gerais para todas as telas===========*/ 
/*--------------------------------------------Menu----------------------------------------------------*/
@font-face {
    font-family: Roboto;
    src: url(../../fontes/Roboto-Regular.ttf);
}
@font-face {
    font-family: DJR-Black;
    src: url(../../fontes/DJR/Forma\ DJR\ Display\ Black.otf);
}
@font-face {
    font-family: DJR-Thin;
    src: url(../../fontes/DJR/Forma\ DJR\ Display\ Thin.otf);
}

    #menu_modelo_1{
        background-color: #1C1B1B !important;
        /*opacity: 70%;*/
        padding-left: 1em;
        padding-right: 1em;
        padding-bottom: 0;
    }
   
    #menu_modelo_1 a{
        font-family: DJR-Black;
        color: white;
        text-transform: uppercase;
    }
    
    .logo-empresa img{
        margin-left: 1em;
        margin-right: 3em;
    }
    .logo-empresa span{
        color: white;
    }
    #opcoes-contato{
        font-family: Roboto;
    }
    #opcoes-contato p{
        color: white;
        line-height: 30%;
    }
    .texto-principal{
        font-family: DJR-Black;
    }

    .contato-empresa{ /*Texto com telefone e email*/ 
        transform: translateY(30%); /*para centralizar verticalmente dentro da div*/ 
        margin-left: 3em;
        position: relative;
        color: white;
    }
   
    .paralelogramo{
        /*margin: 0 auto; não funciona com position abosulute*/ 
        -webkit-transform: skew(45deg);
        -moz-transform: skew(45deg);
        -ms-transform: skew(45deg);
        -o-transform: skew(45deg);
        transform: skew(45deg);
        background-color: var(--azul-claro);
        opacity: 70%;
        z-index: 0;
        position: absolute;
    }
    /*--------------------------------Notícias---------------------------------------*/ 
    .container-noticias h4{
        font-family: DJR-Black;
        color: #1473E6;
        text-align: center;
    }
    /*--------------------------------Rodapé---------------------------------------*/
    #rodape-modelo-1{ /*div externa*/ 
        background-color: #161616;
    }
   
    .divisao-rodape{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .fale-conosco{
        margin-top: 3em;
        color: white;
    }
    .fale-conosco h4{
        margin-bottom: 1em;
    }
    .info{
        border: solid 1px white;
       margin-top: 2em;
       padding-top: 10px ;
       padding-bottom: 10px ;
       padding-left: 20px;
       padding-right: 20px;
    }
    .info img{
       margin-right: 10px;
    }
    .redes-sociais-rod{
        display: flex;
        justify-content: space-around;
        padding-bottom: 10px;
        border-bottom: solid 1px white;
        margin-top: 3em;
        margin-bottom: 3em;
    }
    .receba-info p{
        color: white;
    }
    .receba-info input{
        background-color: white; 
        border-radius: 0 !important;
    }
    .receba-info::placeholder{
        color: #161616 !important;
    }
    .receba-info input:focus{
        outline: none !important;
        
    }
    .copyright{
        height: 2em;
        background-color: #333333;
    }
    .copyright p{
        text-align: center;
        color: white;
    }


/*----------------------------------------------------------------------------------------------------------------------*/
.container-fluid{
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.header{
    background-image: url(../../imagens/carro.jpg) !important;
    background-position: center;
    background-size: cover;
    height: 35em;
}
.header .texto-principal{
    display: block;
}
.destaques{
    background-color: var(--preto);
    height: 12em;
}

#caixa-busca-redonda{
    background-color: white;
    height: 8em;
    width: 40em;
    margin: 0 auto;
    margin-top: -2em;
    border: solid 3px  #4c8fe0;
    border-radius: 2em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#texto-busca{
    font-size: 1.3em;
    font-family: DJR-Black;
    color: black;
    margin-top: 1em;
    text-align: center;
    text-transform: uppercase;
    text-align: left;
    margin-left: 2em;
}
#linha-busca-1{
    height: 2px;
    background-color: #1473E6;
    width: 25em;
    margin-left: -2em;
}
#linha-busca-2{
    height: 2px;
    background-color: red;
    width: 27em;
    margin-left: -4em;
}
#buscar{
    margin-top: 1em;
}

#buscar input{
    background-color: #1473E6 !important;
    background-image: url(../../imagens/icones/pesquisar.png);
    background-repeat: no-repeat;
    background-position: calc(20% - 2px);
    width: 14em;
    height: 3em;
    border-radius: 2em;
    box-shadow: 2px 4px red;
    margin-right: -2em;
}
#buscar input::placeholder{
    color: white;
    font-weight: bold;
    text-align: center;
}

.opcoes-select{
    width: 30em;
    /*margin: 0 auto;*/ 
    margin-top: -2em;
    margin-left: 22%;
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    
}
.opcoes-select select{
    border: 3px solid #1473E6;
    border-radius: 2em;
    height: 3.2em;
    width: 14em ;
    color: black !important;
    font-weight: bold !important;
    background: url(../../imagens/icones/setas-select.png);
    background-repeat: no-repeat;
    background-position: 90%;
    background-color: white;
}

/*-----------------Seção dos Cards dos carros à venda-------------------*/ 
#cards_modelo_1{
    margin-top: 2em;
    margin-bottom: 2em;
}
.card{
    border: none !important;
}

.paralelogramo{
    /*margin: 0 auto; não funciona com position abosulute*/ 
    -webkit-transform: skew(45deg);
    -moz-transform: skew(45deg);
    -ms-transform: skew(45deg);
    -o-transform: skew(45deg);
    transform: skew(45deg);
    background-color: var(--azul-claro);
    opacity: 70%;
    z-index: 0;
    position: absolute;
}
.preco-carro{
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    z-index: 1000;
}
.coluna-icone p{
  color: #5e5e5e;
}
.ver-mais{
    display: block;
    background-color: #161616 !important;
    box-shadow: 2px 1px 1px black;
    border: none;
    border-radius: 0 !important;
   margin: 0 auto;
   color: white;
   font-family: DJR-Black;
   margin-bottom: 3em;

}
/*--------------------Barra flutuante de redes sociais-------------------*/
.barra-redes-sociais{
    background-color: var(--preto);
    width: 40px;
    opacity: 70%;
    position: fixed; 
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 10em;
    margin-left: 95%;
    z-index: 3000;
    border-radius: 5%;
}
.barra-redes-sociais img{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

/*##########################Desktop menor ####################################*/
@media (min-width: 801px) and (max-width: 1079px) {
    /*-----------------------Menus----------------------------------*/ 
   
    #botao-fechar{  /*mobile*/ 
        display: none !important;
     }
    #menu-mobile{
        display: none !important;
    }
    #botao-menu { /*mobile*/ 
        display: none;
    }
    .logo-empresa{
        width: 40px;
    }
    #menu-desktop{
        display: flex;
        flex-direction: row;
        margin-left: calc(20%);
    }
    #menu-desktop li a{
        font-size: 16px;
        margin-left: 6px;
    }
  
    .header{
        background-image: url(../../imagens/carro.jpg) !important;
        background-position: center;
        background-size: cover;
        height: 35em;
    }
    .barra-redes-sociais{
        margin-left: 90%;
    }

    .texto-principal{
        color: white; 
        font-size: 30px;
        font-weight: 500;
        text-align: left;
        margin-top: 2em;
        margin-left: 2em;
    }
    /*-------------------------------Cards-------------------------------*/
    .linha-card{
        margin-top: 1em;
        margin-bottom: 1em;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .card {
        margin-bottom: 1em;
        width: 200px;
        padding-left: 2%;
        padding-right: 2%;
    }
    #card-exibicao img{
        transition: 1s; /*transição lenta também na volta ao estado normal*/ 
    }
    #card-exibicao:hover img{
        transform: scale(1.5,1.5); /*imagem aumenta, mas sem deslocar div abaixo*/ 
    }
    .paralelogramo{
        width: 90px;
        height: 2em;
        margin-left: 10%;
    }
    .preco-carro{
        transform: translateY(0.5em); /*para centralizar verticalmente*/
        font-size: 14px;
        margin-left: 20%;
    }
    .coluna-icone p{
        font-size: 10px;
    }
    /*------------------------Noticias-----------------------------*/
    .noticias{
        display: flex;
        flex-direction: row;
    }
    /*------------------------Rodapé------------------------------*/
    #rodape-modelo-1{
        padding: 2em;
    }
    .logo-grande{
        margin-right: 1em;
        display: flex;
        justify-content: end;
       transform: translateY(30%);
    }
    .logo-grande img{
        width: calc(40%);
    }
    .fale-conosco span{
        font-size: 14px;
    }
    .info img{
        width: calc(15%);
    }
    .caixa-texto-revenda{
        height: 2em;
    }
    #menu-rodape{
        display: flex;
        flex-direction: column !important;
         margin-top: 1em;
    }
    #menu-rodape ul{
        margin-top: 4em;
    }
    #menu-rodape ul li a{
        padding: 0.3em;
        color: white !important;
        font-size: 16px;
        margin-left: 1em;
    }

}
/*#########################Desktop maior #################################*/
@media (min-width: 1080px){ /*pc*/
    .header{
        background-image: url(../../imagens/carro.jpg) !important;
        background-position: center;
        background-size: cover;
        height: 35em;
    }
    #opcoes-contato{
        margin-left: calc(20%);
    }
    #opcoes-contato img{
        display: inline;
    }
    #botao-menu{
        display: none;
    }
    #menu-mobile{
        display: none !important;
    }
    #botao-fechar{
        display: none !important;
    }
    .header{
        background-image: url(../../imagens/carro.jpg) !important;
        background-position: center;
        background-size: cover;
        height: 35em;
    }
    .texto-principal{
        color: white; 
        font-size: 40px;
        margin-top: 1em;
        text-align: left;
        margin-left: 1em;
    }
    #procura-carro{
        width: 15em;
    }
    /*----------------------------Cards------------------------*/ 
    .linha-card{ /*criada para centralizar os cards*/ 
        margin-top: 1em;
        margin-bottom: 1em;
        display: contents;
        justify-content: space-evenly;
    }
    #card-exibicao img{
        transition: 1s; /*transição lenta também na volta ao estado normal*/ 
        width: 18rem;
    }
    #card-exibicao:hover img{
        transform: scale(1.5,1.5); /*imagem aumenta, mas sem deslocar div abaixo*/ 
    }
    .paralelogramo {
        width: 270px;
        height: 2em;
       /* margin-left: 10%; */
    }
    .preco-carro{
        font-size: 16px;
        margin-left: 3%;
    }
    .noticias{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    #hover-noticia{
        position: absolute;
        color: white;
        font-size: 28px;
    }
    
    /*---------------------------Rodapé--------------------------*/
    #rodape-modelo-1{
        height: 18em;
        margin-top: 1em;
    }
    #menu-rodape{ /*lista*/
       margin-top: 3em;
     }
     #menu-rodape ul li a{
         color: white !important;
         padding-left: 2em;
         font-size: 15px;
    }
    .logo-grande{
        margin-right: 1em;
        display: flex;
        justify-content: end;
       transform: translateY(30%);
    }
}