/*-----------------------------------------------------------------------------------

    Template Name: Handstand - Gym & Fitness HTMP Template
    Template URI: https://devitems.com/html/coffee-preview/
    Description: This is html5 template
    Author: HasTech
    Author URI: https://devitems.com/
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1. About Area
    2. Minha Prática
    2. Serviços Area
    3. Schedule Area
    4. Trainer Area
    5. Gallery Area
    6. Event Area
    7. Blog Area
    8. Pricing Area
    9. Newsletter Area
    10. Testimonial Area
    11. Map Area
    12. Newsletter Area
    13. Botão WhatsApp
    14. Botão Banner

-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  1. About Area
/*----------------------------------------*/
/*.game-bg{position: relative; background: #FFf; box-shadow: 0 0 4px 4px #ECECEC; height: 345px}*/
.about-video {
    position: relative;
    text-align: center;
    display: inline-block;
    box-shadow: 0 0 4px 4px #ECECEC;
}

.game:after {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    content: "";
}

.game {
    position: relative;
    z-index: 2;
    margin: 10px;
}

.about-content>h2 {
    margin-top: 28px
}

.about-content>h2,
.section-title h2 {
    color: #676767;
    font-size: 36px;
    text-transform: capitalize;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin-bottom: 13px;
}

.about-content p {
    margin-bottom: 35px
}

.about-content p.m-0 {
    margin-bottom: 0px
}

.video-icon a {
    left: 0;
    margin-top: -30px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    z-index: 9;
}

.video-icon a i {
    color: #FFf;
    font-size: 60px;
}

/*-----------------------------------------*/
/*  2. Minha Prática Area
/*----------------------------------------*/

/* Garante alinhamento perfeito */
.text-center.mt-4 {
    margin-top: 1.5rem;
    text-align: center;
}

/* Opcional: ajuste de espaçamento entre features e botão */
.pratica-features {
    margin-bottom: 1rem;
}

/* Mantém estilo existente do botão */
.banner-btn {
    display: inline-block;
    margin: 0 auto;
    /* Centraliza horizontalmente */
}

.minha-pratica-area {
    background: linear-gradient(135deg, rgba(216, 157, 85, 0.05) 0%, rgba(255, 255, 255, 0.9) 100%);
    position: relative;
    overflow: hidden;
}

.minha-pratica-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    z-index: 0;
}

.minha-pratica-content {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.9);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.minha-pratica-img {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.img-border-radius {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.experience-badge {
    position: absolute;
    bottom: -20px;
    right: 20px;
    background: #D89D55;
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.experience-badge span {
    font-size: 28px;
    font-weight: 700;
    display: block;
    line-height: 1;
}

.experience-badge p {
    margin: 5px 0 0;
    font-size: 14px;
}

.pratica-features {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.feature-item {
    text-align: center;
    flex: 1;
    padding: 0 10px;
}

.feature-item i {
    font-size: 30px;
    color: #D89D55;
    margin-bottom: 10px;
    display: block;
}

.feature-item h5 {
    font-size: 16px;
    color: #676767;
}

/* Mantendo o scrollable-paragraph existente */
.scrollable-paragraph {
    height: 270px;
    overflow-y: scroll;
    direction: rtl;
    text-align: left;
    margin-left: -15px;
    padding-left: 15px;
}

.scrollable-paragraph::-webkit-scrollbar {
    width: 5px;
}

.scrollable-paragraph::-webkit-scrollbar-thumb {
    background: #D89D55;
    border-radius: 5px;
}

/*----------------------------------------*/
/*  3. Serviços Area
/*----------------------------------------*/
.single-img,
.portfolio-img {
    position: relative;
    display: inline-table;
    height: 100%;
}

.single-img:after,
.portfolio-img:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0;
    transform: scaleY(0);
    background: #D89D55;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.single-class:hover .single-img:after,
.single-class:hover .gallery-icon,
.grid-item:hover .portfolio-img:after,
.grid-item:hover .gallery-icon,
.single-blog:hover .gallery-icon {
    opacity: 1;
    transform: scaleY(1);
}

.gallery-icon {
    bottom: 0;
    height: 40px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    opacity: 0;
    z-index: 9;
    transform: scaleY(0);
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.single-img i {
    color: #FFf;
    font-size: 35px;
    z-index: 99;
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: table-cell;
    vertical-align: middle;
    background: transparent;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    margin: auto;
    line-height: 42px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.single-img i:hover {
    color: #E5BA86;
    background: #FFf;
    transform: scale(1);
}

.single-content {
    background: #FFf;
}

.single-content h3 {
    font-size: 18px;
    text-transform: capitalize;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    padding: 5px 25px;
    border-bottom: 1px solid #F1F1F1;
}

.single-content h3 a {
    color: #757575;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.single-content h3:hover a {
    color: #D89D55;
}

.single-content ul {
    margin: 0;
    padding: 15px 0 15px 35px;
    list-style: none;
}

.single-content ul li {
    display: inline-block;
    color: #7f7f7f;
    font-size: 14px;
    margin-right: 30px;
}

.single-content ul li:last-child {
    margin-right: 0px;
}

.single-content ul li i {
    color: #D89D55;
    font-size: 18px;
    margin-right: 10px;
    position: relative;
    top: 2px;
}

/* Serviços - Alinhamento de Cartões */
.single-class {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 30px;
    /* Espaçamento vertical entre cartões */
    transition: all 0.3s ease;
}

.single-class:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.single-img {
    position: relative;
    overflow: hidden;
    height: 200px;
    /* Altura fixa para a imagem */
}

.single-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.single-class:hover .single-img img {
    transform: scale(1.05);
}

.single-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: white;
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.single-content h3 {
    margin-bottom: 15px;
    flex: 1;
}

/* Garante que as linhas tenham espaçamento igual */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-lg-4,
.col-md-6 {
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 15px;
}

/* Ajustes para mobile */
@media (max-width: 767px) {
    .single-img {
        height: 180px;
    }

    .single-content {
        padding: 15px;
    }
}

/* Garante que o botão fique alinhado na base */
.banner-btn.mt-55 {
    margin-top: 5px !important;
}


/*----------------------------------------*/
/*  4. Trainer Area
/*----------------------------------------*/
.single-trainer,
.blog-pic {
    position: relative;
    overflow: hidden;
}

.single-trainer:hover {
    box-shadow: 0 0 4px 4px #ECECEC;
}

.single-trainer:after,
.blog-pic:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #D89D55 none repeat scroll 0 0 padding-box content-box;
    opacity: 0;
    transform: scaleY(0);
    padding: 15px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.single-trainer:hover::after,
.single-trainer:hover .trainer-hover h3,
.single-trainer:hover .trainer-hover ul,
.single-blog:hover .blog-pic:after {
    opacity: 1;
    transform: scaleY(1);
}

.trainer-hover {
    position: absolute;
    left: 0;
    top: 50%;
    margin: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 99;
    margin-top: -32px;
}

.trainer-hover h3 {
    color: #FFf;
    font-size: 20px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
    opacity: 0;
    transform: scaleY(0);
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.trainer-hover ul {
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    transform: scaleY(0);
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.trainer-hover ul li {
    display: inline-block;
    border: 12px solid #FFf;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin: 0 5px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.trainer-hover ul li a {
    font-size: 16px;
    color: #FFf;
    line-height: 28px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.trainer-hover ul li:hover {
    background: #FFf;
}

.trainer-hover ul li:hover a {
    color: #D89D55
}

/*----------------------------------------*/
/*  5. Gallery Area
/*----------------------------------------*/
.portfolio-img {
    position: relative;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.portfolio-img::after {
    background: #D89D55 none repeat scroll 0 0 padding-box content-box;
    padding: 7px;
}

.portfolio-img::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0;
    background: rgba(255, 255, 255, 0.7);
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.grid-item:hover .portfolio-img::before {
    opacity: 1;
}

.grid-item:hover .portfolio-img {
    box-shadow: 0px 0px 4px 4px #ECECEC;
}

.grid .grid-item:first-child,
.grid .grid-item:nth-child(2),
.grid .grid-item:nth-child(3),
.grid .grid-item:nth-child(4),
.grid .grid-item:nth-child(5),
.grid .grid-item:nth-child(6) {
    padding-bottom: 30px;
}

.mfp-wrap.mfp-gallery.mfp-close-btn-in.mfp-auto-cursor.mfp-ready {
    z-index: 99999;
}

.load a {
    background: #95652A;
    color: #FFf;
    text-transform: uppercase;
    padding: 5px 25px 4px;
    font-size: 14px;
    text-align: center;
    display: inline-block;
    margin-top: 50px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.load a:hover {
    color: #95652A;
}

/*----------------------------------------*/
/*  6. Event Area
/*----------------------------------------*/
.event-content {
    z-index: 2;
    position: relative;
}

.event-wrapper {
    background: #FFf;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    padding: 50px 80px;
    box-shadow: 0 0 4px 4px #ddd;
    position: relative;
    z-index: 9;
    margin: 0 42px;
}

.event-area .section-title p {
    margin-bottom: 75px;
}

.event-wrapper:before {
    position: absolute;
    left: 30px;
    top: -20px;
    box-shadow: 0 0 4px 4px #ddd;
    background: #FFf;
    height: 100%;
    content: "";
    right: 30px;
}

*/ .event-content h3 {
    font-size: 20px;
    color: #757575;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 20px;
}

.event-content p {
    padding: 0 60px;
    margin-bottom: 20px;
}

.event-content h4 {
    font-family: 'Montserrat', sans-serif;
    color: #D89D55;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 10px;
}

.event-content h5 {
    font-size: 16px;
    color: #7f7f7f;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/*----------------------------------------*/
/*  7. Blog Area
/*----------------------------------------*/
.blog-pic {
    width: 30%;
    display: inline-block;
    float: left;
}

.single-blog {
    display: inline-block
}

.blog-content {
    box-shadow: 0 0 4px 4px #F4F4F4;
    float: left;
    padding: 35px 30px;
    margin-top: 20px;
    width: 70%;
}

.blog-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: #757575;
    font-weight: 500;
    margin-bottom: 12px;
}

.blog-content h6 {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #aaaaaa;
    font-weight: 400;
    margin-bottom: 15px;
}

.blog-content p {
    margin-bottom: 15px
}

.blog-content a {
    color: #757575;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-transform: capitalize;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.blog-content a:hover {
    color: #D89D55
}

/*----------------------------------------*/
/*  8. Pricing Area
/*----------------------------------------*/
.single-table {
    box-shadow: 0 0 4px 4px #E2E2E2;
}

.single-table:hover .table-head h2,
.single-table:hover .table-body,
.single-table:hover .table-body a {
    background: #D89D55;
}

.single-table:hover .table-head h2,
.single-table:hover .table-body ul li,
.single-table:hover .table-body a {
    color: #FFf;
}

.single-table:hover .table-body ul li {
    border-bottom: 1px solid #CF8831;
}

.single-table:hover .table-body ul li:last-child {
    border-bottom: none;
}

.single-table:hover .table-body a {
    box-shadow: 0 0 4px 1px #F2D7B7;
}

.table-head h2 {
    font-size: 18px;
    color: #757575;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    padding: 25px 0;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.table-head h1 {
    background: #FFf;
    font-size: 42px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    padding: 25px 0;
}

.table-head h1 span {
    font-size: 12px;
    color: #7f7f7f;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

.table-body {
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.table-body ul {
    margin: 0;
    padding-top: 33px;
    padding-bottom: 30px;
    list-style: none;
}

.table-body ul li {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid #EAE8E8;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.table-body ul li:last-child {
    display: block;
    padding-bottom: 0;
    border-bottom: none;
}

.table-body a {
    background: #f1f1f1 none repeat scroll 0 0;
    border-radius: 25px;
    box-shadow: 0 0 4px 4px #e2e2e2;
    color: #D89D55;
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 33px;
    position: relative;
    text-transform: uppercase;
    top: 19px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

/*----------------------------------------*/
/*  9. Newsletter Area
/*----------------------------------------*/

/*----------------------------------------*/
/*  10. Testimonial Area
/*----------------------------------------*/
.client-area .section-title p {
    margin-bottom: 5px;
}

.client-area .container {
    width: 100% !important;
}

.single-testimonial {
    background: #D89D55 none repeat scroll 0 0;
    padding: 4.68vw 10.25390625vw;
    border-radius: 0.9765625vw;
    color: #FFf;
    text-align: center;
    position: relative;
    margin: 1.91315vw;
    -webkit-border-radius: 0.9765625vw;
    -moz-border-radius: 0.9765625vw;
    -ms-border-radius: 0.9765625vw;
    -o-border-radius: 0.9765625vw;
}

.testimonial-slider {
    max-width: 78.12vw;
    margin: 0 auto;
}

.single-testimonial i {
    position: absolute;
    height: 115px;
    width: 115px;
    border-radius: 50%;
    background: #D89D55;
    box-shadow: 0 0 5px 0px black;
    left: -4.39453125vw;
    top: -4.39453125vw;
    content: "";
    font-size: 6.8359375vw;
    line-height: 8.71875vw;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.single-testimonial p {
    margin-bottom: 2.44140625vw;
}

.single-testimonial h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}



.testimonial-slider .single-testimonial {
    display: none;
    /* Oculta todos os depoimentos inicialmente */
}

.slick-initialized .single-testimonial {
    display: block;
    /* Apenas o slide ativo será exibido */
    text-align: center;
    max-width: 80%;
    margin: auto;
    border-radius: 10px;
}

.card-block-testimonial {
    padding-top: 1.46484375vw;
    margin-top: 3.7109375vw;
}

/* Altera a cor das setas */
.slick-prev:before,
.slick-next:before {
    color: #D89D55;
    /* Vermelho - altere para a cor desejada */
    font-size: 4vw;
    /* Tamanho do ícone */
    opacity: 1;
    /* Remove transparência padrão */
}

/* Posicionamento das setas */
.slick-prev {
    left: 1vw;
    /* Ajuste conforme necessário */
}

.slick-next {
    right: 1vw;
    /* Ajuste conforme necessário */
}

.custom-prev-arrow,
.custom-next-arrow {
    color: #D89D55;
    /*Cordotexto*/
    border-radius: 50%;
    /*Bordaarredondada*/
    width: 8vw;
    height: 8vw;
    max-width: 50px;
    /* Limite máximo */
    max-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
}

.slick-prev .fa,
.slick-next .fa {
    font-size: 24px;
    color: #D89D55;
}

/* Ajuste para desktop */
@media (min-width: 1200px) {

    .slick-prev,
    .slick-next {
        width: 4vw;
        height: 4vw;
    }
}

@media (min-width: 768px) {
    .single-testimonial {
        padding: 6.25vw;
    }

    .slick-prev:before,
    .slick-next:before {
        font-size: 1.5vw;
        /* Reduz o tamanho em telas largas */
    }


}

/*----------------------------------------*/
/*  11. Map Area
/*----------------------------------------*/
.contact-map-size {
    margin-top: 50px;
    width: 100%;
    height: 380px;
}

.map-area {
    z-index: 1
}

/*----------------------------------------*/
/*  12. Newsletter Area
/*----------------------------------------*/
.newsletter-wrapper {
    background: #D89D55;
    padding: 55px 40px;
    margin-top: -110px;
    z-index: 2;
    position: relative;
}

.newsletter-content h2 {
    font-size: 24px;
    color: #FFf;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.newsletter-content.section-title h2:after {
    background: none
}

#mc-form {
    position: relative;
    width: 680px;
    margin: auto;
}

#mc-form>input {
    color: #FFF4E7;
    font-size: 13px;
    margin-top: 20px;
    padding-left: 15px;
    padding-right: 150px;
    background: #D28F3D;
    border: none;
    height: 45px;
}

.newsletter-form input#mc-email::-moz-placeholder {
    color: #FFF4E7;
}

.newsletter-form input[type="email"]::-webkit-input-placeholder {
    color: #FFF4E7;
}

#mc-form .default-btn {
    background: #FFf none repeat scroll 0 0;
    border: medium none;
    color: #666666;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    height: 45px;
    line-height: 34px;
    padding: 0 35px;
    position: absolute;
    font-weight: 600;
    right: 0px;
    top: -10px;
    border-radius: 0;
    text-transform: capitalize;
}

#mc-form .default-btn:hover {
    color: #D89D55 !important
}

#mc-form .default-btn:before {
    background: #FFf none repeat scroll 0 0;
    z-index: -1
}

.newsletter-area .default-btn:before,
.newsletter-area .default-btn:after {
    display: none
}

.contact-form form {
    margin-top: 50px
}

#contact-form .form-message,
#subscribe-form .subscribe-message {
    margin-top: 10px;
    margin-bottom: 0;
}

/* 
----------------------------------
    Botão WhatsApp Flutuante 
----------------------------------
*/
.whatsapp-float {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 99;
}

.whatsapp-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.whatsapp-btn:hover {
    background-color: #128C7E;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}



/* Animação pulsante para o WhatsApp */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Responsividade */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 80px;
        right: 20px;
    }


    .whatsapp-btn {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }

}

/* ==================== */
/*  BOTÕES              */
/* ==================== */
.banner-btn {
    background: transparent;
    color: var(--text-color);
    display: inline-block;
    border: 1px solid var(--primary-color);
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 36px;
    overflow: hidden;
    padding: 0 30px;
    border-radius: 25px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.5s ease;
    text-decoration: none;
}

.banner-btn::after {
    content: attr(data-text);
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translate(-30%, 0);
    transition: all 0.3s ease;
    width: 100%;
}

.banner-btn span {
    display: block;
    transition: all 0.3s ease;
}

.banner-btn:hover {
    background: rgba(216, 157, 85, 0.5);
}

.banner-btn:hover>span {
    opacity: 0;
    transform: translate(0, 40px);
}

.banner-btn:hover::after {
    opacity: 1;
    transform: translate(0, 0);
}