.bannerTop{background-image: url('../img/bannerTop.webp'); background-size: cover; background-position: center; height: 100px;}
.bannerTop .bannerTop-wrapper{display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; height: 100px; padding: 0 20px;}
.bannerTop .bannerTop-wrapper .link-home p{font-size: 20px; font-weight: bold; color: var(--white);}
.bannerTop .bannerTop-wrapper .page h1{font-size: 22px; font-weight: bold; color: var(--darkGreen);}

.contact .titlePage{display:flex; justify-content: center; align-items: center; min-height: 60px; height: auto;}
.contact .titlePage h1{font-size: 20px; font-weight: bold; text-transform: uppercase; color: var(--darkGreen);}
.contact .titlePage h1::after{content: ""; position: absolute; background-color: var(--darkGreen); width: 55px; height: 4px; margin-top: 14px; margin-left: 8px;}
.contact .contact-wrapper{height: auto; min-height: 600px; margin: 0 20px;}
.contact .contact-wrapper .leftSide{width:100%;display: flex;justify-content:space-between;}
.contact .contact-wrapper .leftSide .form{width: 100%;max-width: 750px;}
.contact .contact-wrapper .leftSide .form .nome, .contact-wrapper .leftSide .form .mensagem{display: flex; flex-direction: column;}

.contact-wrapper .leftSide .form .wrapper .whats,.contact .contact-wrapper .leftSide .form .wrapper .email{width: 100%;max-width:330px; flex-direction: column;}


.contact .contact-wrapper .leftSide .form .nome label, .contact .contact-wrapper .leftSide .form .wrapper .email label, .contact-wrapper .leftSide .form .wrapper .whats label, .contact-wrapper .leftSide .form .mensagem label{margin-left: 12px; margin-bottom: 11px; font-size: 17.5px; font-weight: bold; color: var(--darkGreen);}
.contact .contact-wrapper .leftSide .form .wrapper{display: flex; justify-content: space-between; width: 100%;}
.contact .contact-wrapper .leftSide .form .nome input{width: 100%; height: 48px; margin-bottom: 28px; border:none; border-radius: 10px; background-color: #d7d7d7; padding: 17px 13px; box-shadow: 5px 2px 10px 0px #d7d7d7;}
.contact .contact-wrapper .leftSide .form .wrapper .email input, .contact .contact-wrapper .leftSide .form .wrapper .whats input{max-width: 326px;width:100%; height: 48px; margin-bottom: 28px; border:none; border-radius: 10px; background-color: #d7d7d7; padding: 17px 13px; box-shadow: 5px 2px 10px 0px #d7d7d7;}
.contact .contact-wrapper .leftSide .form .mensagem textarea{width: 100%; height: 189px;resize: none; background-color: #d7d7d7; border-radius: 10px; padding: 17px 12px; border: none; box-shadow: 5px 2px 10px 0px #d7d7d7; margin-bottom: 18px;}

.termos-check{ margin-top: 26px;width: 100%;}
.termos-check .content .check {width: 15px;height: 13px;background-color:#d8d8d8;margin-top:5px;display: flex;border: 2px solid #848484;border-radius:3px;justify-content: center;align-items: center;}
.termos-check .content .check .checkbox + label:before{content: ''; display: inline-block; width: 6px; height: 6px; margin: 0px 5px 9px 3px; cursor: pointer;}
.termos-check .content .check .checkbox:checked + label:before{background: #fff; border-radius: 3px;}

input[type="checkbox"] {
    appearance:none !important;
    -webkit-appearence:none !important;
    height: 7px;
    width: 7px;
    background-color: #d8d8d8;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}
input[type="checkbox"]:checked {
 background-color: white;
}
input[type="checkbox"]:checked:after {
 display: block;
}

.contact .contact-wrapper .leftSide .form .termos-check .content{display: flex;width: 100%;justify-content: center}
.contact .contact-wrapper .leftSide .form .termos-check .content .text-right span{margin-left: 6px; color: #6d6d6d;font-size: 13px; font-weight: normal;cursor: pointer;}
.contact .contact-wrapper .leftSide .form .termos-check .content .text-right a{text-decoration: underline; font-weight: bold; font-size: 13px;cursor: pointer;}

.contact .contact-wrapper .leftSide .form .btn{width: 100%;display: flex;justify-content: center;margin-top: 20px;}
.contact .contact-wrapper .leftSide .form .btn button{width: 83px; height: 34px; border-radius: 10px; background-color: #d7d7d7; display: flex; justify-content: center; align-items: center; color: var(--darkGreen); font-size: 16px; border:none; box-shadow: 2px 2px 3px 1px #b4b4b4; cursor: pointer; font-weight: bold;}
.contact .contact-wrapper .leftSide .form .btn button:hover{text-decoration: underline;}

.contact .contact-wrapper .rightSide .rightSide-wrapper{width: 100%; height: 428px; background-color: #d7d7d7; margin-top: 30px; border-radius: 10px; box-shadow: 0px 8px 10px 3px #ededed; padding: 33px 37px 47px 34px;}
.contact .contact-wrapper .rightSide .rightSide-wrapper .content .phone a, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .whatsApp a, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .address a{display: flex;}
.contact .contact-wrapper .rightSide .rightSide-wrapper .content .email{width:100%;}
.contact .contact-wrapper .rightSide .rightSide-wrapper .content .email .email-wrapper{width:100%;display:flex;}
.contact .contact-wrapper .rightSide .rightSide-wrapper .content .phone  .icon i, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .whatsApp .icon i, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .email .icon i, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .address .icon i{margin-right: 22px; font-size: 40px; color: var(--green);}
.contact .contact-wrapper .rightSide .rightSide-wrapper .content .phone h1, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .whatsApp h1, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .email h1, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .address h1{color: #467c3d; font-size: 16px; font-weight: bold; text-transform: uppercase;}
.contact .contact-wrapper .rightSide .rightSide-wrapper .content .phone p, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .whatsApp p, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .email p, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .address p{color: #467c3d; font-size: 16px; font-weight: normal; margin-bottom: 47px;}
.contact .contact-wrapper .rightSide .rightSide-wrapper .content .phone:hover .infos h1, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .phone:hover .infos p, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .whatsApp:hover .infos h1, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .whatsApp:hover .infos p, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .email:hover .infos h1, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .email:hover .infos p, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .address:hover .infos h1, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .address:hover .infos p{color: var(--darkGreen);}
.contact .contact-wrapper .rightSide .rightSide-wrapper .content .phone:hover .icon i,.contact .contact-wrapper .rightSide .rightSide-wrapper .content .whatsApp:hover .icon i, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .email:hover .icon i, .contact .contact-wrapper .rightSide .rightSide-wrapper .content .address:hover .icon i{color: var(--darkGreen);}

.bannerBottom-area .banner-bottom-wrapper .bannerBottom .text h2::after{width: 296px !important;}

@media(max-width: 992px) {
    .contact .titlePage h1 {
        margin: 20px 0;
    }
}
/*@media (width: 380px){*/
/*    .content .email .email-wrapper{*/
/*        display:block;*/
/*        width:100%;*/
/*    }*/
/*}*/

@media (min-width: 200px) and (max-width: 992px){
.bannerTop{margin-top: 105px;}
.bannerTop .bannerTop-wrapper .link-home p{font-size: 14px;}
.bannerTop .bannerTop-wrapper .page h1{font-size: 14px; text-align: center;}
.contact .contact-wrapper .leftSide, .contact .contact-wrapper .leftSide .form .wrapper{flex-direction: column;}
.contact .titlePage h1{font-size: 16px; text-align: center;}
.contact .titlePage h1::after{display: none;}
.termos-check{display:block;}
.contact .contact-wrapper .leftSide .form{width: 100%;}
.contact .contact-wrapper .leftSide .form .nome input, .contact .contact-wrapper .leftSide .form .mensagem textarea, .contact .contact-wrapper .leftSide .form .btn{max-width: 326px;width:100%; display:flex;justify-content:center;}
.contact .contact-wrapper .leftSide .form .termos-check .content{max-width: 326px !important;width:100%; margin-bottom:25px;}
.contact .contact-wrapper .rightSide .rightSide-wrapper{min-height: 428px; height: auto; margin-bottom: 12%; padding: 33px 15px 0px 15px; display: flex; justify-content: center;}
.contact .contact-wrapper .rightSide .rightSide-wrapper .content{}
.content .email .email-wrapper{display:flex;}
.bannerBottom-area .banner-bottom-wrapper{height: auto; padding: 20px 0; display: flex; justify-content: center;}
.bannerBottom-area .banner-bottom-wrapper .bannerBottom .text h2{margin-top: 10%; text-align: center;}
.bannerBottom-area .banner-bottom-wrapper .bannerBottom .text h2::after{width: 0 !important;}
.bannerBottom-area .banner-bottom-wrapper .bannerBottom .title-area .title h1{font-size: 30px !important; text-align: center;}    
}