.floating-whatsapp{width: 60px; height: 60px; background-color: #0dac01; position: fixed; right: 35px; bottom: 35px; z-index: 10; border-radius: 100%; cursor: pointer;}
.floating-whatsapp:hover{background-color: #2196f3;}
.floating-whatsapp:before{width: 60px; height: 60px; content: ""; position: absolute; left: 0; top: 0; z-index: 2; border-radius: 100%; background-image: url(icone-whatsapp-vazado-branco.svg) !important; background-position: center; background-repeat: no-repeat; background-size: 30px;}
.floating-whatsapp:after{width: 60px; height: 60px; position: absolute; content: ""; left: 50%; top: 50%; background-color: #0dac01; border-radius: 50%; -webkit-animation: pulse-border 1.5s ease-out infinite; animation: pulse-border 1.5s ease-out infinite; z-index: -1;}
.floating-whatsapp:hover:after{background-color: #2196f3;}
@-webkit-keyframes pulse-border{0%{-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -moz-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -o-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1;} 100%{-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -moz-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -o-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0;}}
@keyframes pulse-border{0%{-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -moz-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); -o-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1;} 100%{-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -moz-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); -o-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0;}}

#card-whatsapp *{font-family: "Roboto Condensed", Sans-serif !important; margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; box-shadow: none;}
#card-whatsapp{width: 300px; height: 340px; background-color: #fff; border-radius: 10px; border-bottom: 5px solid #4d9a1c; box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.15); position: fixed; right: 35px; bottom: 120px; z-index: 2000; display: none; flex-direction: column; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
#card-whatsapp.show{-webkit-animation:0.5s linear 1 bounceInUp; -moz-animation:0.5s linear 1 bounceInUp; -o-animation:0.5s linear 1 bounceInUp; animation:0.5s linear 1 bounceInUp; display: flex;}
#card-whatsapp.bigger{height: 500px; bottom: 35px;}
@-webkit-keyframes bounceInUp{0%{opacity:0; -webkit-transform:translateX(500px);}60%{opacity:1; -webkit-transform:translateX(-30px);}80%{opacity:1; -webkit-transform:translateX(10px);}100%{opacity:1; -webkit-transform:translateX(0);}}
@-moz-keyframes bounceInUp{0%{opacity:0; -moz-transform:translateX(500px);}60%{opacity:1; -moz-transform:translateX(-30px);}80%{opacity:1; -moz-transform:translateX(10px);}100%{opacity:1; -moz-transform:translateX(0);}}
@-o-keyframes bounceInUp{0%{opacity:0; -o-transform:translateX(500px);}60%{opacity:1; -o-transform:translateX(-30px);}80%{opacity:1; -o-transform:translateX(10px);}100%{opacity:1; -o-transform:translateX(0);}}
@keyframes bounceInUp{0%{opacity:0; transform:translateX(500px);}60%{opacity:1; transform:translateX(-30px);}80%{opacity:1; transform:translateX(10px);}100%{opacity:1; transform:translateX(0);}}

#card-whatsapp .header-card{width: 100%; height: 50px; min-height: 50px; background-color: #42af3f; background-image: linear-gradient(90deg, #489617 0%, #7dc14d 100%) !important; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 0 0 15px; position: relative; border-radius: 10px 10px 0 0;}
#card-whatsapp .header-card h2{color: #fff; font-size: 22px; font-weight: 700;}
#card-whatsapp .header-card .close-card{width: 30px; height: 30px; background-color: #388737; background-image: url(icone-close-card.svg) !important; background-position: center; background-repeat: no-repeat; background-size: 24px; position: absolute; right: 15px; border-radius: 100%; cursor: pointer;}
#card-whatsapp .header-card .close-card:hover{background-color: #f44336; box-shadow: 0 0 0 2px #fff}

#card-whatsapp .attendant-card{width: 100%; display: flex; align-items: center; padding: 30px 20px 0 20px;}
#card-whatsapp.bigger .attendant-card{padding: 30px 20px 10px 20px;}
#card-whatsapp .attendant-card .contact{width: 100%; height: 70px; min-height: 70px; background-color: #e8f7e8; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; box-shadow: 0 3px 5px rgba(0,0,0,0.2); cursor: pointer;}
#card-whatsapp .attendant-card .contact:hover{background-color: #4caf50; background-image: linear-gradient(90deg, #489617 0%, #89d354 100%) !important;}
#card-whatsapp .attendant-card .contact .atendentes{width: 55px; height: 55px; background-color: #4caf50; background-image: linear-gradient(90deg, #489617 0%, #89d354 100%) !important; border-radius: 100%; display: flex; align-items: center; justify-content: center; text-align: center;}
#card-whatsapp .attendant-card .contact:hover .atendentes{background: #fff !important; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; transform: rotateY(360deg); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform-style: preserve-3d; perspective: 1000px;}
#card-whatsapp .attendant-card .contact .atendentes img{width: 47px; height: 47px; border-radius: 100%;}
#card-whatsapp .attendant-card .contact .atendentes img.atendente-contato, #card-whatsapp .attendant-card .contact .atendentes img.atendente-vendas, #card-whatsapp .attendant-card .contact .atendentes img.atendente-suporte{display: none;}
#card-whatsapp .attendant-card .contact .atendentes img.flip{-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; transform: rotateY(360deg); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform-style: preserve-3d; perspective: 1000px;}
#card-whatsapp .attendant-card .contact h2{color: #666; font-size: 14px; font-weight: 400;}
#card-whatsapp .attendant-card .contact:hover h2{color: #fff !important;}
#card-whatsapp .attendant-card .contact h3{color: #444; font-size: 16px; font-weight: 700;}
#card-whatsapp .attendant-card .contact:hover h3{color: #fff !important;}
#card-whatsapp .attendant-card .contact h4{color: #666; font-size: 15px; font-weight: 400; display: flex; align-items: center; gap: 3px;}
#card-whatsapp .attendant-card .contact:hover h4{color: #fff !important;}
#card-whatsapp .attendant-card .contact h4:before{width: 10px; height: 10px; background-color: #4ae061; border-radius: 100%; content: "";}

#card-whatsapp .buttons-card{width: 100%; height: inherit; display: flex; flex-direction: column; justify-content: center; padding: 5px 20px 10px 20px;}
#card-whatsapp .buttons-card h2{color: #444; font-size: 18px; font-weight: 700; text-align: center; margin: 0 0 5px 0;}
#card-whatsapp .buttons-card > div{width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 35px;}
#card-whatsapp .buttons-card div .button{width: 100%; height: auto; background-color: #b5e7b4; background-image: linear-gradient(90deg, #489617 0%, #7dc14d 100%) !important; letter-spacing: 1px; padding: 10px 10px 8px 10px; border-radius: 100px; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center;}
#card-whatsapp .buttons-card div .button:hover{background-color: #42af3f; background-image: linear-gradient(90deg, #276f95 0%, #3b9cdd 100%) !important;}
#card-whatsapp .wrap-form{width: 100%; height: inherit; display: none; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: hidden;}
#card-whatsapp .wrap-form .back-to-buttons{width: 30px; height: 30px; position: absolute; background-color: #4caf50; background-image: linear-gradient(90deg, #489617 0%, #7dc14d 100%) !important; left: 0; top: 0; border-radius: 0 30px 30px 0; cursor: pointer;}
#card-whatsapp .wrap-form .back-to-buttons:hover{background-color: #f44336; background-image: linear-gradient(90deg, #f44336 0%, #fd837a 100%) !important;}
#card-whatsapp .wrap-form .back-to-buttons:after{width: 100%; height: 100%; content: ""; position: absolute; left: 0; top: 0; background-image: url(icone-back.svg) !important; background-position: center; background-repeat: no-repeat; background-size: 16px;}

#card-whatsapp .wrap-form input::-webkit-input-placeholder{color: #c5ccdd !important;}
#card-whatsapp .wrap-form input:-moz-placeholder{color: #c5ccdd !important;}
#card-whatsapp .wrap-form input::-moz-placeholder{color: #c5ccdd !important;}
#card-whatsapp .wrap-form input:-ms-input-placeholder{color: #c5ccdd !important;}
#card-whatsapp .wrap-form .wpcf7{width: 100%;}
#card-whatsapp .wrap-form .wpcf7-form p{width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: inherit; position: relative;}
#card-whatsapp .wrap-form .wpcf7-form h2{color: #444; font-size: 16px; font-weight: 700; text-align: center;}
#card-whatsapp .wrap-form .wpcf7-form h3{color: #444; font-size: 12px; font-weight: 400; text-align: center; margin: 0 0 5px 0;}
#card-whatsapp .wrap-form .wpcf7-form input[type="text"], #card-whatsapp .wrap-form .wpcf7-form input[type="tel"], #card-whatsapp .wrap-form .wpcf7-form input[type="email"]{width: 100%; height: 50px; border: 1px solid #b7c2e0; border-radius: 100px; color: #2196f3; font-size: 16px; font-weight: 700; padding: 0 0 0 20px; outline: none;}
#card-whatsapp .wrap-form .wpcf7-form input[type="submit"]{width: 100%; height: 50px; border-radius: 100px; background-color: #4caf50; background-image: linear-gradient(90deg, #489617 0%, #7dc14d 100%) !important; color: #fff; font-size: 20px; font-weight: 700; border: none; outline: none; letter-spacing: 1px;}
#card-whatsapp .wrap-form .wpcf7-form input[type="submit"]:hover{background-color: #29d730; background-image: linear-gradient(90deg, #276f95 0%, #3b9cdd 100%) !important;}
#card-whatsapp .wrap-form .wpcf7-form .wpcf7-spinner{width: 50px; height: 50px; position: absolute; left: 50%; bottom: 0; right: inherit; margin: 0 0 0 -25px; border-radius: 100%;}
#card-whatsapp .wrap-form .wpcf7-form .wpcf7-spinner:before{top: 17px; left: 17px; width: 10px; height: 10px;}
#card-whatsapp .wpcf7-form .wpcf7-not-valid{border: 1px solid red !important;}
#card-whatsapp .wpcf7-form .wpcf7-not-valid-tip{display: none !important;}
#card-whatsapp .wpcf7-form .wpcf7-response-output{margin: 5px 0 0 0 !important; padding: 5px; font-size: 14px; line-height: 17px; text-align: center;}

.fundo-preto{width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 1000; background-color: #000000c4; display: none;}

#card-whatsapp.show-pop-up *{font-family: "Montserrat", Sans-serif !important;}
#card-whatsapp.show-pop-up .wrap-form input::-webkit-input-placeholder{color: #555 !important;}
#card-whatsapp.show-pop-up .wrap-form input:-moz-placeholder{color: #555 !important;}
#card-whatsapp.show-pop-up .wrap-form input::-moz-placeholder{color: #555 !important;}
#card-whatsapp.show-pop-up .wrap-form input:-ms-input-placeholder{color: #555 !important;}
#card-whatsapp.show-pop-up{width: 750px; height: 530px; right: inherit; bottom: inherit; top: 50%; left: 50%; margin: -265px 0 0 -375px; -webkit-animation:0.5s linear 1 bounceInUp; -moz-animation:0.5s linear 1 bounceInUp; -o-animation:0.5s linear 1 bounceInUp; animation:0.5s linear 1 bounceInUp; display: flex; flex-direction: row; border: none; border-radius: 20px;}
#card-whatsapp.show-pop-up:after{width: 50%; height: 100%; content: ""; background-color: #ff0000; background-image: url(../../imagens/fundo-pop-up-contato.jpg); background-position: center top; background-repeat: no-repeat; background-size: cover; border-radius: 20px 0 0 20px; position: absolute; left: 0; top: 0; z-index: 1;}
#card-whatsapp.show-pop-up .buttons-card, #card-whatsapp.show-pop-up .wrap-form .back-to-buttons{display: none;}
#card-whatsapp.show-pop-up .header-card{height: 0; min-height: 0; position: absolute; left: 0; top: 0; z-index: 3;}
#card-whatsapp.show-pop-up .header-card h2{display: none;}
#card-whatsapp.show-pop-up .header-card .close-card{background-color: #f44336; box-shadow: 0 0 0 2px #fff; top: -5px; right: -5px;}
#card-whatsapp.show-pop-up .attendant-card{width: 50%; flex-direction: column; align-items: center; padding: 40px 20px 10px 20px; position: relative; z-index: 2;}

#card-whatsapp .attendant-card .logo{display: none;}
#card-whatsapp.show-pop-up .attendant-card .logo{width: 185px; height: auto; margin: -30px 0 40px 0; position: relative; z-index: 2; display: block;}
#card-whatsapp.show-pop-up .attendant-card:before{width: 155px; height: 15px; margin: 20px 0 0 0; content: ""; position: relative; z-index: 1; background-color: #ed1b23; box-shadow: 0 0 10px 20px #ed1b23, 0 0 40px 50px #ed1b23; border-radius: 100%; opacity: 0.9;}

#card-whatsapp.show-pop-up .attendant-card .contact{width: 290px; height: 102px; background-color: #fff; position: relative; z-index: 3;}
#card-whatsapp.show-pop-up .attendant-card .contact .atendentes{width: 83px; height: 83px; background-image: linear-gradient(45deg, #55c828 0%, #77ffef 50%, #55c828 100%) !important;}
#card-whatsapp.show-pop-up .attendant-card .contact .atendentes img{width: 73px; height: 73px;}
#card-whatsapp.show-pop-up .attendant-card .contact h2{display: none;}
#card-whatsapp.show-pop-up .attendant-card .contact h3{color: #000; font-size: 22px; font-weight: 700;}
#card-whatsapp.show-pop-up .attendant-card .contact h4{color: #000; font-size: 16px; font-weight: 900;}
#card-whatsapp.show-pop-up .attendant-card .contact h4:before{width: 12px; height: 12px; background-color: #08c921;}


#card-whatsapp .attendant-card .produtos{display: none;}
#card-whatsapp.show-pop-up .attendant-card .produtos.desktop{width: 380px; min-width: 380px; position: relative; left: 15px; top: -10px; z-index: 4; display: block;}
#card-whatsapp.show-pop-up .attendant-card .produtos.mobile{width: 270px; min-width: 270px; position: relative; top: -15px; z-index: 4; display: none;}

#card-whatsapp.show-pop-up .form-contact{width: 50%; padding: 0 40px; position: relative; z-index: 2;}
#card-whatsapp.show-pop-up .form-contact h2{color: #000; font-size: 32px; font-weight: 800; line-height: 32px; margin-bottom: 15px; text-align: left;}
#card-whatsapp.show-pop-up .form-contact h3{color: #000; font-size: 22px; font-weight: 800; line-height: 26px; margin-bottom: 22px; text-align: left;}

#card-whatsapp.show-pop-up .wrap-form .wpcf7-form p{gap: 15px;}
#card-whatsapp.show-pop-up .wrap-form .wpcf7-form input[type="text"], #card-whatsapp.show-pop-up .wrap-form .wpcf7-form input[type="tel"], #card-whatsapp.show-pop-up .wrap-form .wpcf7-form input[type="email"]{height: 46px; border: 2px solid #b8b8b8; border-radius: 8px; padding: 0 0 0 10px;}

#card-whatsapp.show-pop-up .wpcf7-form .wpcf7-not-valid{border: 2px solid red !important;}
#card-whatsapp.show-pop-up .wrap-form .wpcf7-form input[type="submit"]{height: 46px; background-color: #ff0000; background-image: none !important; border-radius: 8px; margin-top: 10px;}
#card-whatsapp.show-pop-up .wrap-form .wpcf7-form input[type="submit"]:hover{background-color: #4caf50;}

@media(max-width:1024px){
    #card-whatsapp{bottom: 150px;}
    #card-whatsapp.bigger{bottom: 65px;}
}

@media(max-width:767px){
    #card-whatsapp{width: 100%; height: 100% !important; right: 0; bottom: 0 !important; border-radius: 0;}
    #card-whatsapp .header-card{border-radius: 0;}
    #card-whatsapp .buttons-card{overflow: auto; justify-content: flex-start; padding: 20px}
    #card-whatsapp .buttons-card h2{margin: 0 0 17px 0;}
    #card-whatsapp .wrap-form{overflow: auto; align-items: flex-start; justify-content: flex-start; padding: 16px 20px 20px 20px;}
    #card-whatsapp .wrap-form .wpcf7-form h3{margin: 0 0 15px 0;}

    #card-whatsapp.show-pop-up{width: 100%; top: 0; left: 0; margin: 0; flex-direction: column; border-radius: 0;}
    #card-whatsapp.show-pop-up:after{
        width: 100%;
        height: 215px;
        border-radius: 0;
    }
    #card-whatsapp.show-pop-up .header-card .close-card{
        top: 8px;
        right: 8px;
        box-shadow: 0 0 0 5px #fff;
    }
    #card-whatsapp.show-pop-up .attendant-card{width: 100%; padding: 20px 10px 0 10px;}

    #card-whatsapp.show-pop-up .attendant-card .logo, #card-whatsapp.show-pop-up .attendant-card:before{display: none !important;}

    #card-whatsapp.show-pop-up .attendant-card .contact{
        width: 245px;
        height: 65px;
    }
    #card-whatsapp.show-pop-up .attendant-card .contact .atendentes{
        width: 60px;
        height: 60px;
    }
    #card-whatsapp.show-pop-up .attendant-card .contact .atendentes img{
        width: 53px;
        height: 53px;
    }
    #card-whatsapp.show-pop-up .attendant-card .contact h3{font-size: 18px;}
    #card-whatsapp.show-pop-up .attendant-card .contact h4{font-size: 14px; line-height: 14px;}
    #card-whatsapp.show-pop-up .attendant-card .contact h4:before{width: 10px; height: 10px;}

    #card-whatsapp.show-pop-up .attendant-card .produtos.desktop{display: none;}
    #card-whatsapp.show-pop-up .attendant-card .produtos.mobile{display: block;}

    #card-whatsapp.show-pop-up .form-contact{
        width: 100%;
        padding: 0 30px 10px 30px;
        margin-top: -5px;
    }
    #card-whatsapp.show-pop-up .form-contact h2{font-size: 22px; margin-bottom: 0;}
    #card-whatsapp.show-pop-up .form-contact h3{font-size: 16px; margin-bottom: 10px; font-weight: 500;}
}