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

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background:#888;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::selection{
    background: #888;
}

/* Nav */

.navbar{
    position: fixed;
    width: 100%;
    z-index: 1000;
    padding: 25px 70px;
    transition: all 1s ease;
    align-items: center;
}

.navbar.sticky{
    background: #fffffff6;
    padding: 10px 70px;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.692);
    align-items: center;
}

.navbar .menu-list{
    padding-top: 15px;
    display: flex;
}

.menu-list li{
    list-style: none;
}

.menu-list li a{
    color: #bdbdbd;
    font-size: 18px;
    font-weight: 500;
    margin-left: 25px;
    text-decoration: none;
    transition: all 0.5s ease;
}

.menu-list li a:hover{
    color: #ffffff;
}

.navbar.sticky .menu-list li a{
    color: #000000;
}

.navbar.sticky .menu-list li a:hover{
    color: #E8202E;
}

.navbar.sticky .fa-bars{
    color: black;
}

/* ---------
HOME
--------- */

/* Banner */

.banner{
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.container{
    padding: 30px 0;
}

.container .title{
    font-size: 38px;
    font-weight: 700;
}

.container p{
    padding-top: 20px;
    text-align: justify;
}

.icon{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: none;
}

.menu-list .cancel-btn{
    position: absolute;
    right: 30px;
    top: 20px;
}

@media (max-width: 1230px) {
    .content{
        padding: 0 60px;
    }
}

@media (max-width: 1100px) {
    .content{
        padding: 0 40px;
    }
}

@media (max-width: 900px) {
    .content{
        padding: 0 30px;
    }
}

@media (max-width: 868px) {
    body.disabled{
        overflow: hidden;
    }

    .icon{
        display: block;
    }

    .icon.hide{
        display: none;
    }

    .navbar.sticky .menu-list li a{
        color: #cecece;
    }

    .navbar .menu-list{
        position: fixed;
        height: 100vh;
        width: 100%;
        max-width: 400px;
        left: -100%;
        top: 0px;
        display: block;
        padding: 40px 0;
        text-align: center;
        background: #222;
        transition: all 0.3s ease;
    }

    .navbar.show .menu-list{
        left: 0%;
    }

    .navbar .menu-list li{
        margin-top: 45px;
    }

    .navbar .menu-list li a{
        font-size: 23px;
        margin-left: -100%;
        transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .navbar.show .menu-list li a{
        margin-left: 0px;
    }
}

@media (max-height: 480px) and (max-width: 868px){
    .navbar .menu-list li{
        margin-top: 20px;
    }

    .navbar .menu-list{
        padding-top: 100px;
    }

    .navbar .menu-list a{
        color: white;
    }
}

@media (max-height: 380px) and (max-width: 868px){
    .navbar .menu-list li{
        margin-top: 20px;
    }

    .navbar .menu-list{
        padding-top: 40px;
    }
}

.navbar .logo img{
    transition: .5s;
}

.navbar.sticky .logo img{
    transition: .5s;
    content: url("../imgs/rap10LOGOblack.png");
}

@media (max-width: 380px) {
    .navbar .logo img{
        width: 100px;
        transition: .5s;
    }
}

#logoTxt{
  color: rgb(180, 180, 180);
}

/* Carousel */

.carousel-inner .item{
    height: 100vh;
    background-color: gray;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-background-position: center;
    -moz-background-position: center;
    -o-background-position: center;
    background-position: center;
    -webkit-background-attachment: fixed;
    -moz-background-attachment: fixed;
    -o-background-attachment: fixed;
    background-attachment: fixed;
}

.bannerCarousel{
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.carousel{
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.b1{
    background-image: url("../imgs/banner1.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
}

.b2{
    background-image: url("../imgs/banner2.png");
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    transition: 2s;
}

.b3{
    background-image: url("../imgs/banner3.png");
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    transition: 2s;
}

.titleCarousel{
    word-break: normal; 
    color: rgb(255, 255, 255);
    font-family: 'Poppins', sans-serif;
    font-size: 50px;
    text-align: center;
    font-weight: 700;
    transition: .5s;
}

.subtitleCarousel{
    color: rgba(255, 255, 255, 0.637);
    font-family: 'Poppins', sans-serif;
    font-size: 35px;
    text-align: center;
    font-weight: 100;
    width: 70%;
    transition: .5s;
}

.b1 .leftCarousel{
    margin: 0 0 0 200px;
}

.b1 .leftCarousel .titleCarousel{
    font-size: 60px;
}

.b1 .rightCarousel{
    margin: 0 190px 0 20px;
    transition: .5s;
}

.b1 .rightCarousel img{
    width: 250px;
}

.rightCarousel{
    margin: 150px 200px 0 280px;
}

.rightCarousel .titleCarousel{
    text-align: end;
    font-size: 40px;
}

.leftCarousel{  
    margin: -200px 120px 0 200px;
}

.leftCarousel .titleCarousel{
    text-align: start;
    font-size: 40px;
}

#btnBg1{
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    transition: .5s;
    position: absolute; 
    top: 80vh;
    left: 0;
}

#btnCntt-slide1{
    border-radius: 10px;
    padding: 10px 40px;
    margin: auto;
    text-align: center;
    border: none;
    outline: none;
    color: white;
    transition: .5s;
    background-color: #82C4FF;
}

#btnCntt-slide1:hover{ 
    background-color: #16578D;
    color: white;
    transition: .5s;
}

#btnBg2{
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    transition: .5s;
    position: absolute; 
    top: 80vh;
}

#btnCntt{
    border-radius: 10px;
    padding: 10px 40px;
    margin: auto;
    text-align: center;
    border: none;
    outline: none;
    color: white;
    transition: .5s;
    background-color: #e8202e;
}

#btnCntt:hover{ 
    background-color: #741219;
    color: white;
    transition: .5s;
}

#btnWpp{
    background-color: rgb(18, 161, 30);
    border-radius: 10px;
    padding: 10px 40px;
    margin: auto;
    text-align: center;
    border: none;
    outline: none;
    color: white;
    transition: .5s;
}

#btnWpp:hover{
    background-color: rgb(13, 105, 21);
    transition: .5s;
}

#btnBg3{
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    transition: .5s;
    position: absolute; 
    top: 70vh;
}

@media (max-width: 868px){
    .b1 .leftCarousel .titleCarousel{
        font-size: 30px;
    }
        
    .b1 .rightCarousel img{
        width: 200px;
        transition: .5s;
    }

    .b1 .rightCarousel{
        margin: 0 180px 0 20px;
        transition: .5s;
    }
    
    #btnBg1{
        margin: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        transition: .5s;
        position: absolute; 
        top: 75vh;
    }

    #btnBg2{
        margin: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        transition: .5s;
        position: absolute; 
        top: 75vh;
    }

    .b3 .titleCarousel{
        font-size: 30px;
        text-align: center;
        width: 70%;
        margin: auto;
    }

    .b3 .subtitleCarousel{
        font-size: 20px;
        text-align: center;
        width: 70%;
        margin: auto;
    }

    .b2{
        background-image: url("../imgs/banner2cell.png");
        transition: 2s;
    }

    .b2 .leftCarousel{
        display: none;
    }

    .b2 .rightCarousel .titleCarousel{
        text-align: center;
    }

    .b2 .rightCarousel{
        margin: auto 200px;
    }
}

@media (max-width: 600px){
    .b1 .leftCarousel{
        margin: auto;
    }

    .b1 .leftCarousel .titleCarousel{
        font-size: 30px;
        text-align: center;
        width: 70%;
        margin: auto;
    }
        
    .b1 .rightCarousel{
        display: none;
    }

    .b2 .rightCarousel .titleCarousel{
        font-size: 30px;
    }

    .b3{
        background-image: url("../imgs/banner3cell.png");
        transition: 2s;
    }
}

@media (max-height: 600px){

    .b1 .leftCarousel .titleCarousel{
        font-size: 30px;
    }

    .b2 .rightCarousel .titleCarousel{
        font-size: 30px;
    }

    .b2 .leftCarousel .titleCarousel{
        font-size: 30px;
    }

    .b2 .leftCarousel{
        margin: -100px 120px 0 200px;
    }

    .b3 .titleCarousel{
        font-size: 30px;
    }

    .b3 .subtitleCarousel{
        font-size: 20px;
    }
}

@media (max-width:380px){
    #btnCntt{
        border-radius: 10px;
        padding: 8px 20px;
        margin: auto;
        text-align: center;
        border: none;
        outline: none;
        color: white;
        transition: .5s;
        background-color: #e8202e;
    }

    #btnCntt-slide1{
        border-radius: 10px;
        padding: 8px 20px;
        margin: auto;
        text-align: center;
        border: none;
        outline: none;
        color: white;
        transition: .5s;
        background-color: #82C4FF;
    }

    #btnWpp{
        background-color: rgb(18, 161, 30);
        padding: 8px 20px;
        border-radius: 10px;
        margin: auto;
        text-align: center;
        border: none;
        outline: none;
        color: white;
        transition: .5s;
    }
}

.iconSpace{
    padding-right: 10px;
}

/* Container */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,100&display=swap');

.titleMaster{
    text-align: center;
    font-size: 45px;
    font-family: 'Montserrat', sans-serif;
    margin: 100px 100px 20px;
    font-weight: bold;
}

.infos{
    display: flex;
    margin: 0 30px;
    width: 90%;
    margin-left: 5%;
    padding: 80px 0;
}

.containerInfo{
    text-align: center;
    padding: 0 30px;
    flex: 50%;
}

.containerInfo h2::after{
    content: ' ';
    width: 40px;
    height: 3px;
    background: #E8202E;
    display: block;
    margin: 10px auto 20px;
}

.containerInfo h2{ 
    transition: .5s; 
    font-weight: 500;
}

.containerInfo p{ transition: .5s; color: black;}

@media (max-width: 930px){
    .infos{
        width: 70%;
        margin-left: 15%;
        display: inline;
    }

    .containerInfo{
        text-align: center;
        margin: 0 80px;
    }

    .containerInfo h2{
        padding-top: 30px;
    }

    .containerInfo p{
        padding-bottom: 30px;
    }
}

@media (max-width: 450px){
    .containerInfo h2{
        font-size: 25px;
        transition: .5s;
    }

    .containerInfo p{
        font-size: 18px;
        transition: .5s;
    }

    .containerInfo{
        text-align: center;
        margin: 0 20px;
    }
}

.parallax1{
    background-image: url("../imgs/parallax01.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
    padding: 150px 0;
}

.parallax1 h2{
    color: white;
    font-weight: 500;
    font-size: 30px;
}

.parallax1 h2::after{
    content: ' ';
    width: 40px;
    height: 3px;
    background: #E8202E;
    display: block;
    margin: 10px auto 20px;
}

.parallax1 p{
    color: #c7c7c7;
    margin: 0 20%;
}

@media (max-width: 450px){
    .parallax1 h2{
        font-size: 20px;
        transition: .5s;
    }

    .parallax1 p{
        font-size: 12px;
        transition: .5s;
        margin: 0 10%;
    }
}

.cardServico1{
    padding: 40px 0;
}

.bgHelperServico{
    display: flex;
    width: 70%;
    margin-left: 15%;
}

.containerServico1{
    margin-left: 20%;
    width: 100%;
    text-align: left;
    padding: 30px 10px;
    font-style: italic;
    font-weight: 400;
}

.containerServico1 h3{
    margin-bottom: 30px;
    font-weight: 700;
}

.ftServico1{
    width: 100%;
    position: relative;
}

.ftServico1 img{
    width: 300px;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
    transition: .5s;
}

.ftServico1 img:hover{
    width: 320px;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
    transition: .5s;
}

.ic-servicos{
    margin-right: 15px;
    font-size: 20px;
    color: #E8202E;
    transition: .5s;
}

.ic-servicos:hover{
    color: #8f171f;
    transition: .5s;
}

@media (max-width: 900px){
    .bgHelperServico{
        display: inline;
    }

    .containerServico1{
        padding-top: 150px;
        text-align: center;
        margin-left: 0px;
    }
}



.cardServico2{
    background-image: url("../imgs/parallax02.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.bgHelperCard{
    width: 90%;
    margin-left: 5%;
    display: flex;
    text-align: center;
    padding: 50px 0;
}

.leftCardContainer{
    display: flex;
    width: 100%;
}

.rightCardContainer{
    display: flex;
    width: 100%;
}

.cardLeft{
    padding: 20px 0;
    width: 100%;
}

.cardRight{
    padding: 20px 0;
    width: 100%;
}

.pic{
    margin: auto;
    width: 100px;
    height: 100px;
    border-radius: 80px;
}

.titleCard{
    margin-top: 15px;
    font-size: 25px;
    font-weight: 700;
}

.subTitleCard{
    font-size: 15px;
    font-style: italic;
    font-weight: 400;
}

.alright{
    color: darkgreen;
    padding-left: 10px;
}

.textCard{
    font-size: 15px;
    margin: 20px 30px;
    color: rgb(82, 82, 82);;
}

.leftCardContainer .cardLeft .pic{
    background-image: url("../imgs/motor-de-partida.png");
}

.leftCardContainer .cardRight .pic{
    background-image: url("../imgs/alternador.png");
}

.rightCardContainer .cardLeft .pic{
    background-image: url("../imgs/tensao.png");
}

.rightCardContainer .cardRight .pic{
    background-image: url("../imgs/fuga-de-corrente.png");
}

@media (max-width: 1250px){
    .bgHelperCard{
        display: inline-block;
    }
}

@media (max-width: 700px){
    .leftCardContainer{
        display: inline-block;
    }

    .rightCardContainer{
        display: inline-block;
    }
}

/* Footer */

footer{
    width: 100%;
    background-color: #161616;;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0px;
}

.mainContent{
    display: flex;
    position: relative;
    color: rgb(235, 235, 235);
}

.mainContent .box{
    flex-basis: 50%;
    padding: 50px 20px;
}

.box h2{
    font-size: 1.125rem;
    font-weight: 700;
}

.box .contentFooter{
    margin: 10 0 0 0;
    position: relative;
}

.right .contentFooter .social{
    margin: 20px 0 0 0;
}

.right .contentFooter .social a{
    padding: 0 2px;
    color: white;
}

.right .contentFooter a button{
    margin-top: 20px;
    width: 136px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
    border: none;
    outline: none;
    color: white;
    transition: .5s;
    background-color: #e8202e;
}

.right .contentFooter a button:hover{
    transition: .5s;
    background-color: #741219;
}

.right .contentFooter .social a span{
    height: 40px;
    width: 40px;
    background: #1a1a1a;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    border-radius: 5px;
    transition: 0.5s;
}

.right .contentFooter .social a span:hover{
    background: #e8202e;
}

.right .contentFooter{
    display: flex;
    justify-content: center;
    align-items: center;
}

.left .contentFooter{
    display: flex;
    justify-content: center;
}

.left .contentFooter .fas{
    font-size: 1.4375rem;
    background: #1a1a1a;
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 15px;
    text-align: center;
    border-radius: 50%;
    transition: 0.5s;
    cursor: pointer;
    margin-top: 10px;
    transition: .5s;
}

.left .contentFooter .fas:hover{
    background: #e8202e;
}

.left .contentFooter .text{
    font-size: 1.0625rem;
    font-weight: 500;
    padding-left: 10px;
    transition: .5s;
    color: rgb(189, 189, 189);
}

.center{
    white-space: nowrap;
    text-align: center;
}

.center img{
    vertical-align: middle;
    width: 300px;
    transition: .5s;
}

.helper{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.containerCredits{
    padding: 10px;
    font-size: 0.9375rem;
    background: #1b1b1b;
    color: rgb(255, 255, 255);
    font-weight: 500;
    width: 100%;
    display: table;
}

.credits{
    display: table-cell;
    vertical-align: middle;
}

.ourTeam{
    color: rgb(255, 255, 255);
    font-weight: 700;

}

a:hover{
    text-decoration: none;
}

@media screen and (max-width: 1060px) {
    .left .text{
        color: rgb(189, 189, 189);
        font-size: 15px !important;
        transition: .5s;
    }

    .left .contentFooter .fas{
        font-size: 1rem;
        background: #1a1a1a;
        height: 30px;
        width: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        transition: 0.5s;
        cursor: pointer;
        margin-top: 10px;
        transition: .5s;
    }
}

@media screen and (max-width: 990px) {
    .left .text{
        color: rgb(189, 189, 189);
        font-size: 13px !important;
        transition: .5s;
    }

    .center img{
        vertical-align: middle;
        width: 250px;
        transition: .5s;
    }
}


@media screen and (max-width: 970px) {
    .left .text{
        color: rgb(189, 189, 189);
        font-size: 12px !important;
        transition: .5s;
    }

    .left .contentFooter .fas{
        font-size: 1rem;
        background: #1a1a1a;
        height: 20px;
        width: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        transition: 0.5s;
        cursor: pointer;
        margin-top: 10px;
        transition: .5s;
    }
}


@media screen and (max-width: 864px) {
    .center img{
        vertical-align: middle;
        width: 200px;
        transition: .5s;
    }
}

@media screen and (max-width: 780px) {
    .left .text{
        color: rgb(189, 189, 189);
        font-size: 10px !important;
        transition: .5s;
    }

    .left .contentFooter .fas{
        font-size: 1rem;
        background: #1a1a1a;
        height: 25px;
        width: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 50%;
        transition: 0.5s;
        cursor: pointer;
        margin-top: 10px;
        transition: .5s;
    }
}

@media screen and (max-width: 735px) {
    footer{
        position: relative;
        bottom: 0px;
    }

    .mainContent{
        flex-wrap: wrap;
        flex-direction: column;
    }

    .mainContent .box{
        margin: 5px 0;
        padding: 50px 20px;
    }

    .adjust h2{
        font-size: 35px;
        text-align: center;
        margin-bottom: 15px;
    }

    .right .contentFooter .adjust .social{
        display: flex;
        justify-content: center;
    }

    .right .contentFooter a{
        display: flex;
        justify-content: center;
    }

    .right .contentFooter a button{
        width: 140px;
    }

    .left .text{
        color: rgb(189, 189, 189);
        font-size: 20px !important;
        transition: .5s;
    }

    .left .contentFooter .fas{
        font-size: 1rem;
        background: #1a1a1a;
        height: 45px;
        width: 45px;
        line-height: 45px;
        text-align: center;
        border-radius: 50%;
        transition: 0.5s;
        cursor: pointer;
        margin-top: 10px;
        transition: .5s;
    }

    .right .contentFooter .social a span{
        height: 45px;
        width: 45px;
        background: #1a1a1a;
        line-height: 45px;
        text-align: center;
        font-size: 18px;
        border-radius: 5px;
        transition: 0.5s;
    }

    .mainContent{
        display: flex;
        flex-flow: column;
    }

    .center{
        order: 3;
    }
}

@media (max-width: 450px) {
    .left .text{
        color: rgb(189, 189, 189);
        font-size: 16px !important;
        transition: .5s;
    }

    .left .contentFooter .fas{
        height: 30px;
        width: 30px;
        font-size: 13px;
        line-height: 30px;
        transition: .5s;
    }
}

/* ---------
CONTATO
--------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,100&display=swap');
/* Banner */

.cntt-header-bg{
    background-image: url("../imgs/bgHeaderContato.png");
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aux-cntt{
    text-align: center;
}

.aux-cntt h3{
    text-align: center;
    color: white;
    font-size: 70px;
    font-family: 'Montserrat', sans-serif;
    transition: .5s;
    font-weight: 100;
}

.aux-cntt h3::after{
    content: ' ';
    width: 60px;
    height: 3px;
    text-align: center;
    background-color: currentColor;
    display: block;
    margin: 20px auto 50px;
    transition: .5s;
}

.iconBanner{
    color: #e8202eff;
    font-size: 60px;
    transition: .5s;
}

.iconBanner:hover{
    color: #741219;
    font-size: 60px;
    transition: .5s;
}

@media (max-width: 868px), (max-height: 500px){
    .aux-cntt h3{
        text-align: center;
        color: white;
        margin-top: 20px;
        font-size: 60px;
        transition: .5s;
    }
    
    .aux-cntt h3::after{
        content: ' ';
        width: 40px;
        height: 3px;
        text-align: center;
        background-color: currentColor;
        display: block;
        margin: 20px auto 50px;
        transition: .5s;
    }
    
    .iconBanner{
        color: #e8202eff;
        font-size: 50px;
        transition: .5s;
    }
}

@media (max-width: 410px){
    .aux-cntt h3{
        text-align: center;
        color: white;
        margin-top: 20px;
        font-size: 40px;
        transition: .5s;
    }
    
    .aux-cntt h3::after{
        content: ' ';
        width: 40px;
        height: 3px;
        text-align: center;
        background-color: currentColor;
        display: block;
        margin: 20px auto 50px;
        transition: .5s;
    }
}

/* Container */

.cntt-infos{
    background-color: #EBEBEB;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 50px 0;
    transition: .5s;
}

.container-cntt-info h3{
    margin-bottom: 30px;
    text-align: center;
    transition: .5s;
    font-weight: bold;
}

.container-cntt-info{
    padding: 40px 30px;
    transition: .5s;
    font-weight: bold;
}

.container-cntt-info{
    padding: 40px 70px;
    transition: .5s;
}

.ic-servicosDay{
    margin-right: 15px;
    font-size: 12px;
    color: #E8202E;
    transition: .5s;
}

.ic-servicosDay:hover{
    color: #8f171f;
    transition: .5s;
}

.ic-servicos-cntt{
    margin-right: 15px;
    font-size: 20px;
    color: #E8202E;
    transition: .5s;
}

.ic-servicos-cntt:hover{
    color: #8f171f;
    transition: .5s;
}

.container-cntt-info{
    background-color: white;
    box-shadow: 5px 8px 10px 5px #888888;
    border-radius: 15px;
    transition: .5s;
}

.middle-cntt-wrapper{
    margin: 0 15px;
    transition: .5s;
}

.btn-cntt{
    margin-top: 10px;
    border-radius: 10px;
    padding: 10px 0;
    width: 100%;
    text-align: center;
    border: none;
    outline: none;
    color: white;
    transition: .5s;
    background-color: #e8202eff
}

.btn-cntt:hover{ 
    background-color: #741219;
    color: white;
    transition: .5s;
}

@media (max-width: 1075px){
    .cntt-infos{
        background-color: white;
        width: 70%;
        margin: auto;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        justify-content: center;
        align-items: center;
        padding: 40px 0;
        transition: .5s;
        margin-bottom: 15px;
    }

    .container-cntt-info{
        padding: 40px 30px;
        transition: .5s;
    }
    
    .container-cntt-info p{
        text-align: center;
        transition: .5s;
    }
        
    .middle-cntt-wrapper{
        margin: 0 0;
        transition: .5s;
    }

    .newMiddle-cntt-wrapper{
        margin: 30px 0;
        transition: .5s;
    }
    
    .btn-cntt{
        margin-left: 15%;
        margin-top: 10px;
        border-radius: 10px;
        padding: 10px 0;
        width: 70%;
        text-align: center;
        border: none;
        outline: none;
        color: white;
        transition: .5s;
        background-color: #e8202eff
    }

    .hours{
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }
}

@media (max-width: 540px){
    .cntt-infos{
        background-color: white;
        width: 80%;
        margin: auto;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        justify-content: center;
        align-items: center;
        padding: 40px 0;
        transition: .5s;
        margin-bottom: 15px;
    }

    .btn-cntt{
        margin-left: 0%;
        margin-top: 10px;
        border-radius: 10px;
        padding: 10px 0;
        width: 100%;
        text-align: center;
        border: none;
        outline: none;
        color: white;
        transition: .5s;
        background-color: #e8202eff
    }

    .container-cntt-info p{
        text-align: center;
        transition: .5s;
        font-size: 15px;
    }

    .ic-servicosDay{
        margin-right: 15px;
        font-size: 8px;
        color: #E8202E;
        transition: .5s;
    }

    .ic-servicos-cntt{
        margin-right: 15px;
        font-size: 15px;
        color: #E8202E;
        transition: .5s;
    }

    .hours{
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }
}

/* Form */

.btnSubmit.active.focus, .btnSubmit.active:focus,
.btnSubmit.focus, .btnSubmit:active.focus, 
.btnSubmit:active:focus, .btnSubmit:focus {
    outline: none;
    box-shadow: none;
}

input.active.focus, input.active:focus,
input.focus, input:active.focus, 
input:active:focus, input:focus {
    outline: none;
    box-shadow: none;
}

::placeholder{
    color: #16578dff;
}

.form-container{
    background-image: url("../imgs/bgFormContato.png");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 740px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
    transition: .5s;
}


.map{
    height: 100%;
    width: 600px;
    background-color: #16578dff;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    transition: .5s;
}

#maps-google{
    height: 100%;
    width: 100%;
    opacity: .3;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.form{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 100%;
    background-color: #16578dff;
    text-align: center;
    padding: 50px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    justify-content: center;
    align-items: center;
}

.form h3{
    text-align: left;
    margin-bottom: 30px;
    color: white;
}

form{
    display: inline-block;
}

.wrapperIcon{
    position: relative;
}

.iconInput{
    position: absolute;
    top: 15px;
    left: 90%;
    color: rgb(47, 97, 138);
}

.cellGRR{
    left: 91%;
}

.form-input{
    width: 300px;
    margin-bottom: 10px;
    padding: 10px;
    padding-right: 40px;
    background: rgb(72, 140, 199);
    border-radius: 5px;
    outline: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: rgb(47, 97, 138);
    transition: .5s;
}

.form-input:focus{
    outline: none;
}

.txtArea{
    border-radius: 5px;
    width: 300px;
    min-height: 150px;
    max-height: 150px;
    resize: none;
    padding: 10px;
    background-color: #82c4ffff;
    outline: none;
    border: none;
    margin-bottom: 10px;
    color: rgb(47, 97, 138);
    transition: .5s;
}

.txtArea:focus{
    outline: none;
    transition: .5s;
}

.btnSubmit{
    border-radius: 5px;
    padding: 10px;
    margin-left: 150px;
    width: 150px;
    outline: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: rgb(31, 102, 165);
    color: white;
    transition: .5s;
}

.btnSubmit:hover{
    background-color: rgb(67, 140, 204);
    transition: .5s;
}

.btnSubmit:focus{
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

@media (max-width: 1075px){
    .map{
        height: 100%;
        width: 400px;
        background-color: #16578dff;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        transition: .5s;
    }
}

@media (max-width: 830px){
    .map{
        height: 100%;
        width: 250px;
        background-color: #16578dff;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        transition: .5s;
    }
}

@media (max-width: 700px){
    .map{
        height: 100%;
        width: 200px;
        background-color: #16578dff;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        transition: .5s;
    }
}

@media (max-width: 630px){
    .form-container{
        background-image: url("../imgs/bgFormContato.png");
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        width: 100%;
        height: 550px;
        display: block;
        justify-content: center;
        align-items: center;
        padding: 0 0;
        transition: .5s;
    }

    .map{
        display: none;
    }
           
    .form h3{
        text-align: center;
        margin-bottom: 30px;
        color: white;
        transition: .5s;
    }
        
    .form{
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        height: 100%;
        text-align: center;
        padding: 50px;
        margin: auto;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        justify-content: center;
        align-items: center;
    }

    .form-input{
        width: 100%;
        transition: .5s;
        margin: 0px;
        margin-bottom: 10px;
        padding: 10px;
        padding-right: 40px;
    }

    .txtArea{
        width: 100%;
        padding: 10px;
    }
    
    .btnSubmit{
        margin-left: 50%;
        width: 50%;
        transition: .5s;
    }
}

@media (max-width: 440px){
    .form{
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        height: 100%;
        text-align: center;
        padding: 50px;
        margin: auto;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        justify-content: center;
        align-items: center;
    }

    .form-input{
        width: 100%;
        transition: .5s;
    }

    .txtArea{
        width: 100%;
    }
    
    .btnSubmit{
        margin-left: 0px;
        width: 100%;
        transition: .5s;
    }
}

/* ---------
EMPRESA
--------- */

/* Banner */

.empresa-header-bg{
    background-image: url("../imgs/ftOutside3.png");
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container 1 */

.empresa-main-container{
    display: flex;
    transition: .5s;
}

.empresa-info-left{
    padding: 50px 80px;
    flex: 60%;
    transition: .5s;
}

.empresa-info-left p{
    vertical-align: middle;
}

.empresa-info-right{
    padding: 50px 80px;
    background-color: #16578dff;
    flex: 40%;
    transition: .5s;
}

.empresa-info-right h3{
    color: #ebebebff;
    transition: .5s;
}

.empresa-info-right p{
    color: rgb(212, 212, 212);
    transition: .5s;
}

.empresa-main-container p{
    font-size: 17px;
    transition: .5s;
}

#afterParallax{display: none;}

@media (max-width: 1180px){
    #afterParallax{display: block;}
    #beforeParallax{display: none;}

    .empresa-main-container{
        display: block;
        text-align: center;
        transition: .5s;
    }

    .empresa-info-left{
        padding: 80px 130px;
        flex: 60%;
        transition: .5s;
    }
    
    .empresa-info-right{
        padding: 80px 130px;
        background-color: #16578dff;
        flex: 40%;
        transition: .5s;
    }
    
    .empresa-info-right h3{
        color: #ebebebff;
        transition: .5s;
    }

    .empresa-info-right h3::after{
        content: ' ';
        width: 40px;
        height: 3px;
        background-color: currentColor;
        display: block;
        margin: 10px auto 20px;
        transition: .5s;
    }

    .empresa-info-left h3::after{
        content: ' ';
        width: 40px;
        height: 3px;
        background-color: currentColor;
        display: block;
        margin: 10px auto 20px;
        transition: .5s;
    }
    
    .empresa-info-right p{
        color: rgb(212, 212, 212);
        transition: .5s;
    }
}

@media (max-width: 750px){
    .empresa-info-left{
        padding: 80px 50px;
        transition: .5s;
    }
    
    .empresa-info-right{
        padding: 80px 50px;
        transition: .5s;
    }
}

@media (max-width: 500px){
    .empresa-info-left{
        padding: 50px;
        transition: .5s;
    }
    
    .empresa-info-right{
        padding: 50px;
        transition: .5s;
    }

    .empresa-main-container p{
        font-size: 15px;
        transition: .5s;
    }
}

@media (max-width: 400px){
    #second-info-left{
        display: none;
    }

    .empresa-main-container p{
        font-size: 15px;
        transition: .5s;
    }

    .empresa-info-left{
        padding: 50px 30px;
        transition: .5s;
    }
    
    .empresa-info-right{
        padding: 50px 30px;
        transition: .5s;
    }
}

/* Container 2 */

.empresa-missao-container{
    display: flex;
    align-items: center;
    padding: 50px 80px;
    transition: .5s;
}

.empresa-missao-right{
    padding: 50px 80px;
    flex: 50%;
}

.empresa-missao-left img{
    max-width: 100%;
    border-radius: 5px;
}

.empresa-missao-right h3{
    font-size: 35px;
    transition: .5s;
}

@media (max-width: 1180px){
    .empresa-missao-container{
        display: block;
        align-items: center;
        justify-items: center;
        justify-content: center;
        padding: 50px 80px;
        transition: .5s;
    }

    .empresa-missao-right{
        flex: 100%;
    }

    .empresa-missao-left{
        display: flex;
        justify-content: center;
    }

    .empresa-missao-right p{
        text-align: center;
        font-size: 18px;
        margin: 0 5%;
        margin-top: 20px;
        transition: .5s;
    }

    .empresa-missao-right h3{
        text-align: center;
        margin: 0 10%;
        transition: .5s;
    }
}

@media (max-width: 800px){
    .empresa-missao-container{
        display: block;
        align-items: center;
        justify-items: center;
        justify-content: center;
        padding: 50px 80px;
        transition: .5s;
    }

    .empresa-missao-right{
        padding: 50px 0;
    }
}

@media (max-width: 510px){
    .empresa-missao-container{
        display: block;
        align-items: center;
        justify-items: center;
        justify-content: center;
        padding: 20px 20px;
        transition: .5s;
    }

    .empresa-missao-right{
        padding: 50px 20px;
    }
}

@media (max-width: 450px){
    .empresa-missao-right p{
        font-size: 15px;
        transition: .5s;
    }

    .empresa-missao-right h3{
        font-size: 25px;
        transition: .5s;
    }
}

.parallax2{
    background-image: url("../imgs/parallaxEmpresa.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 75px 0;
}

.parallax2 h2{
    color: #0c3252;
    font-weight: 500;
    font-size: 30px;
}

.parallax2 h2::after{
    content: ' ';
    width: 40px;
    height: 3px;
    background: #16578d;
    display: block;
    margin: 10px auto 20px;
}

.parallax2 p{
    color: #10436d;
    font-size: 18px;
    margin: 0 20%;
}

@media (max-width: 630px){
    .parallax2 p{
        font-size: 15px;
        transition: .5s;
        margin: 0 10%;
    }
}

@media (max-width: 450px){
    .parallax2 h2{
        font-size: 20px;
        transition: .5s;
    }

    .parallax2 p{
        font-size: 15px;
        transition: .5s;
        margin: 0 5%;
    }
}

.btnCnttGoogle{
    border-radius: 10px;
    padding: 10px 40px;
    margin: auto;
    margin-top: 30px;
    text-align: center;
    border: none;
    outline: none;
    color: white;
    transition: .5s;
    background-color: #16578d;
}

.btnCnttGoogle:hover{
    transition: .5s;
    background-color: #0f4169;
}

@media (max-width: 380px){
    .btnCnttGoogle{
        border-radius: 10px;
        padding: 8px 30px;
        margin: auto;
        margin-top: 30px;
        text-align: center;
        border: none;
        outline: none;
        color: white;
        transition: .5s;
        background-color: #16578d;
    }
}

/* ---------
BATERIAS
--------- */

/* Banner */

.baterias-header-bg{
    background-image: url("../imgs/bgHeaderBaterias.png");
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container */

.baterias-section h3{
    font-size: 35px;
    font-weight: 600;
    transition: .5s;
}

.baterias-section h5{
    color: #e8202eff;
    font-style: italic;
    font-size: 20   px;
    font-weight: 300;
    margin-top: -10px;
    transition: .5s;
}

.baterias-section p{
    font-size: 20px;
    font-weight: 200;
    transition: .5s;
}

.odd{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 80px;
    transition: .5s;
}

.even{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(245, 245, 245);
    padding: 100px 80px;
    transition: .5s;
}

.content-bateria{
    flex: 50%;
    transition: .5s;
}

@media (min-width: 1800px){
    .baterias-section .even p{
        padding-right: 280px;
    }
    
    .baterias-section .odd p{
        padding-left: 280px;
    }
}

.ft-bateria{
    text-align: center;
    flex: 50%;
    transition: .5s;
}

.odd .content-bateria{
    text-align: end;
    transition: .5s;
}

.ft-bateria img{
    width: 300px;
    transition: .5s;
}

.ft-bateria img:hover{
    width: 320px;
    transition: .5s;
}

@media (max-width: 940px){
    .content-bateria{
        flex: 50%;
        margin-bottom: 50px;
        transition: .5s;
    }

    .odd{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 100px 80px;
        flex-flow: column;
        transition: .5s;
    }
    
    .even{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgb(245, 245, 245);
        padding: 100px 80px;
        flex-flow: column;
        transition: .5s;
    }

    .ft-bateria{
        text-align: center;
        flex: 50%;
        transition: .5s;
    }
    
    .odd .content-bateria{
        text-align: center;
        transition: .5s;
    }

    .even .content-bateria{
        text-align: center;
        transition: .5s;
    }

    .even .ft-bateria{
        text-align: center;
        order: 2;
        transition: .5s;
    }
}

@media (max-width: 500px){
    .baterias-section h3{
        font-size: 30px;
        font-weight: 600;
        transition: .5s;
    }
    
    .baterias-section h5{
        font-size: 20px;
        font-weight: 300;
        transition: .5s;
    }
    
    .baterias-section p{
        font-size: 18px;
        font-weight: 200;
        transition: .5s;
    }

    .ft-bateria img{
        width: 250px;
        transition: .5s;
    }

    .ft-bateria img:hover{
        width: 270px;
        transition: .5s;
    }

    .odd{
        padding: 100px 30px;
        transition: .5s;
    }
    
    .even{
        padding: 100px 30px;
        transition: .5s;
    }
}

@media (max-width: 350px){
    .ft-bateria img{
        width: 200px;
        transition: .5s;
    }

    .ft-bateria img:hover{
        width: 220px;
        transition: .5s;
    }
}

.btnCnttForm{
    border-radius: 10px;
    padding: 10px 40px;
    margin: auto;
    margin-top: 30px;
    text-align: center;
    border: none;
    outline: none;
    color: white;
    transition: .5s;
    background-color: #e8202eff;
}

.btnCnttForm:hover{
    transition: .5s;
    background-color: #741219;;
}

@media (max-width: 380px){
    .btnCnttForm{
        border-radius: 10px;
        padding: 8px 30px;
        margin: auto;
        margin-top: 30px;
        text-align: center;
        border: none;
        outline: none;
        color: white;
        transition: .5s;
    }
}

.parallax3{
    background-image: url("../imgs/parallaxBaterias.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 75px 0;
}

.parallax3 h2{
    color: rgb(20, 20, 20);
    font-weight: 500;
    font-size: 30px;
}

.parallax3 h2::after{
    content: ' ';
    width: 40px;
    height: 3px;
    background: rgb(59, 59, 59);
    display: block;
    margin: 10px auto 20px;
}

.parallax3 p{
    color: rgb(68, 68, 68);
    font-size: 18px;
    margin: 0 20%;
}

@media (max-width: 630px){
    .parallax3 p{
        font-size: 15px;
        transition: .5s;
        margin: 0 10%;
    }
}

@media (max-width: 450px){
    .parallax3 h2{
        font-size: 20px;
        transition: .5s;
    }

    .parallax3 p{
        font-size: 15px;
        transition: .5s;
        margin: 0 5%;
    }
}

/* Batteries Carousel */

.other-batteries{
    width: 100%;
    padding: 80px 0;
    background-color: white;
    transition: .5s;
}

@media(max-width: 950px){
    .other-batteries{
        padding: 80px 0;
        transition: .5s;
    }
}

.carousel-cell {
    width: 25%;
    height: 150px;
    margin-right: 10px;
    border-radius: 5px;
}

.carousel-cell:before {
    display: block;
    text-align: center;
    line-height: 150px;
    color: white;
}

@media(max-width: 500px){
    .other-batteries{
        padding: 80px 0;
        transition: .5s;
    }

    .carousel-cell {
        width: 33%;
        height: 100px;
        margin-right: 10px;
        border-radius: 5px;
    }

    .carousel-cell:before {
        display: block;
        text-align: center;
        line-height: 100px;
        font-size: 80px;
        color: white;
    }
}

.c1{
    background-image: url("../imgs/getpower.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
}

.c2{
    background-image: url("../imgs/heliar.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
}

.c3{
    background-image: url("../imgs/kondor.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
}

.c4{
    background-image: url("../imgs/prestocar.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
}

.c5{
    background-image: url("../imgs/route.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
}

.c6{
    background-image: url("../imgs/zetta.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
}

.battery-title{
    font-size: 35px;
    font-weight: 600;
    transition: .5s;
    text-align: center;
    margin-bottom: 80px;
}