@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;600&family=Roboto:wght@300;700&display=swap');

:root {

    --fontTitle: 'Roboto Mono', monospace;
    --fontText: 'Roboto', sans-serif;
    --branco: #fff;
    --cinzaClaro: rgb(240, 240, 240);
    --brancoTranp: rgba(255, 255, 255, 0.849);
    --preto: #222222;
    --gold: #ccb879;
    --cinza: #9d9797;

}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {

    font-family: var(--fontText);

}

.branco {
    color: var(--branco) !important;
}

.gold {
    color: var(--gold);
}

.tituloPag {
    color: var(--gold);
    font-family: var(--fontTitle);
    font-weight: 600;
}


.subTituloPa {

    color: var(--gold);
    font-family: var(--fontTitle);
    font-weight: 600;
    font-size: 25px;

}


.subTextoPag {
    color: var(--cinza);
}


/*HEADER*/
.iconMenu {

    font-size: 25px;
    color: var(--branco);

}

.bgBrancoH {
    background-color: var(--branco);
    color: var(--preto) !important;
}

.bgPretoH {
    background-color: var(--preto);
    color: var(--branco) !important;
}

.logoMenu {

    background: url('../img/logo_sem_fundo.png') no-repeat;
    background-size: contain;
    width: 125px;
    height: 80px;

}

.itemNav {
    color: var(--branco);
    border-bottom: 1px solid transparent;
    transition: .5s;
}

.itemNav:hover {
    border-bottom: 1px solid var(--gold);
    color: var(--branco);
}

.offcanvas-title {

    color: var(--preto) !important;

}


/*BANNER INICIO*/
.bannerInicio {
    height: 100vh;
    background: url('../img/backgrounds/bgFamilyCarro.jpg');
    background-size: cover;
    background-attachment: fixed;
}

.anuncioBanner {
    background-color: var(--brancoTranp);
    width: 650px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 5px;
}

.anuncioBanner h1 {
    font-family: var(--fontTitle);
}


/*SEGURADORAS*/
.containerSeguradoras {

    display: flex;
    flex-direction: row;
    /* overflow-x: auto; */
    overflow: hidden;
    gap: 1rem;

}

.teste {
    animation: scroll 20s linear infinite;
    display: flex;
    width: calc(250px * 14);
}

.imgSeguradora {
    height: 150px;
    padding: .5rem;
}

/*SERVIÇOS*/

.iconeServicos {

    color: var(--gold);
    margin-right: .5rem;

}

/*RODAPÉ*/
footer {

    background-color: var(--preto);
    padding: 2rem;

}

.copyr {
    font-size: 13px;
}

.logoFooter {
    width: 250px;
}

.containerListaFooter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.containerListaFooter a {

    color: var(--branco);
    text-decoration: none;


}

.containerListaRsFooter {

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;

}

.containerListaRsFooter i {

    font-size: 25px;
    color: var(--branco);

}

.btnWhatsapp {

    background-color: #4fce5d;
    color: var(--branco);
    text-decoration: none;
    padding: 1rem 2rem;
    position: fixed;
    right: 1rem;
    bottom: 2rem;
    border-radius: 30px;
}

.btnWhatsapp:hover {

    color: var(--branco);

}

/*PRA VOCÊ*/

.btnSaibaMais {

    background-color: var(--gold);
    color: var(--branco);
    font-weight: 600;

}

.btnSaibaMais:disabled {

    background-color: #ccba80;
    color: var(--branco);

}

.btnSaibaMais:hover {

    background-color: #ccba80;
    color: var(--branco);

}

#headerContato {

    background: url('../img/contato.jpg') no-repeat;
    background-size: cover;
    background-position: top;
    height: 75vh;
    background-attachment: fixed;

}

#headerPraVoce {

    background: url('../img/para_voce2.jpg') no-repeat;
    background-size: cover;
    background-position: top;
    height: 75vh;
    background-attachment: fixed;

}

#headerParaEmpresa {

    background: url('../img/para_empresas2.jpg') no-repeat;
    background-size: cover;
    background-position: bottom;
    height: 75vh;
    background-attachment: fixed;
}

#headerQuemSomos {

    background: url('../img/quem_somos.jpg') no-repeat;
    background-size: cover;
    background-position: bottom;
    height: 75vh;
    background-attachment: fixed;

}

.tituloPvc {
    font-size: 70px;
    font-family: var(--fontTitle);
    font-weight: 600;
}

.textoPvc {
    font-size: 18px;
}

.containerProduto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 1px 3px 5px #666666;
    margin-bottom: 2rem;
}

.textoProduto {

    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;

}

.containerTextoProduto {

    color: var(--cinza);
    height: 220px;
    overflow-y: auto;

}



/*CONTATO*/
.containerContato {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.formaContato {
    font-size: 15px;
}

.avisoForm {

    font-size: 14px;
    color: var(--cinza);

}


/*SOBRE NÓS*/

.containerValores {

    display: flex;
    flex-direction: row;
    gap: 1.3rem;

}

.containerValores i {

    color: var(--preto);

}




@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-230px * 7));
    }
}

/*RESPONSIVIDADE*/

@media screen and (min-width: 0px) and (max-width: 300px) {

    .bannerInicio {

        background-attachment: unset;
    }

    #headerQuemSomos {

        background-attachment: unset;

    }

    #headerContato {

        background: url('../img/contato.jpg') no-repeat;
        background-size: cover;
        background-position: top center;
        height: 75vh;
        background-attachment: unset;

    }

    #headerPraVoce {

        background: url('../img/para_voce2.jpg') no-repeat;
        background-size: cover;
        background-position: top right;
        height: 75vh;
        background-attachment: unset;

    }

    #headerParaEmpresa {

        background: url('../img/para_empresas2.jpg') no-repeat;
        background-size: cover;
        background-position: bottom left;
        height: 75vh;
        background-attachment: unset;
    }

    .msgWhatsapp {
        display: none;
    }

    .btnWhatsapp {

        padding: .7rem 1rem;
        border-radius: 50%;

    }

    .containerValores {
        flex-wrap: wrap;
    }


    .itemNav {
        color: var(--preto) !important;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-260px * 10));
        }
    }

}

@media screen and (min-width: 301px) and (max-width: 575px) {

    .bannerInicio {

        background-attachment: unset;
    }

    #headerQuemSomos {

        background-attachment: unset;

    }


    #headerContato {

        background: url('../img/contato.jpg') no-repeat;
        background-size: cover;
        background-position: top center;
        height: 75vh;
        background-attachment: unset;

    }

    #headerPraVoce {

        background: url('../img/para_voce2.jpg') no-repeat;
        background-size: cover;
        background-position: top right;
        height: 75vh;
        background-attachment: unset;

    }

    #headerParaEmpresa {

        background: url('../img/para_empresas2.jpg') no-repeat;
        background-size: cover;
        background-position: bottom left;
        height: 75vh;
        background-attachment: unset;
    }



    .anuncioBanner {

        padding: .3rem;

    }

    .itemNav {
        color: var(--preto) !important;
    }

    .containerListaFooter {

        gap: 1.5rem;

    }

    .msgWhatsapp {
        font-size: 14px;
    }

    .btnWhatsapp {

        padding: .7rem 1rem;

    }

    .containerValores {
        flex-wrap: wrap;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-230px * 11));
        }
    }

}

@media screen and (min-width: 576px) and (max-width: 767px) {


    #headerContato {

        background: url('../img/contato.jpg') no-repeat;
        background-size: cover;
        background-position: top center;
        height: 75vh;
        background-attachment: fixed;

    }

    #headerPraVoce {

        background: url('../img/para_voce2.jpg') no-repeat;
        background-size: cover;
        background-position: top right;
        height: 75vh;
        background-attachment: fixed;

    }

    #headerParaEmpresa {

        background: url('../img/para_empresas2.jpg') no-repeat;
        background-size: cover;
        background-position: bottom left;
        height: 75vh;
        background-attachment: fixed;
    }


    .itemNav {
        color: var(--preto) !important;
    }

    .containerListaFooter {
        gap: 1.5rem;
    }


    .msgWhatsapp {
        font-size: 14px;
    }

    .btnWhatsapp {

        padding: .7rem 1rem;

    }

    .containerValores {
        flex-wrap: wrap;
    }


    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-210px * 11));
        }
    }

}

@media screen and (min-width: 768px) and (max-width: 991px) {


    #headerPraVoce {

        background: url('../img/para_voce2.jpg') no-repeat;
        background-size: cover;
        background-position: top right;
        height: 75vh;
        background-attachment: fixed;

    }

    .msgWhatsapp {
        font-size: 14px;
    }

    .btnWhatsapp {

        padding: .7rem 1rem;

    }

    .containerValores {
        flex-wrap: wrap;
    }


    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-200px * 11));
        }
    }

}

@media screen and (min-width: 992px) and (max-width: 1199px) {

    .containerValores {
        flex-wrap: wrap;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-190px * 10));
        }
    }

}