/*
Theme Name: Befective
Text Domain: befective
Version: 2.0
Description: Tema 100% customizado
Author: Francis Schonarth
*/

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

/*	0. CSS Reset
/* -------------------------------------------------------------------------- */
:root{
    --product-module-width: 70vw;
}

html,
body {
    border: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
    border: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-align: inherit;
}

blockquote::before,
blockquote::after {
    content: "";
}


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

/*	1. Document Setup
/* -------------------------------------------------------------------------- */

* {
    font-family: 'Poppins', sans-serif;
}

html {
    font-size: 62.5%; /* 1rem = 10px */
    scroll-behavior: smooth !important;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body#main {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    display: flex;
    background-color: #F8FAFB;
    max-width: max-content;
}

/* DEFAULT STYLING */

ul.default-list-container{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
    gap: 12px;
}

ul.default-list-container li.default-list-row{
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

ul.default-list-container li.default-list-row .material-symbols-outlined{
    color: rgb(34, 190, 173);
    font-size: 24px;
}

ul.default-list-container li.default-list-row p{
    color: rgb(30, 107, 127);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    margin: 0px;
}



/* ------------------------------------------------ */
.align-end {
    align-items: flex-end !important;
}

h2.center {
    text-align: center;
}

h2.center.w580{
    width: 580px;
}

h2.center.w640{
    width: 640px;
}

.box-center-h2{
    display: flex;
    justify-content: center;
}

.box-center-h2.custom-h2{
    margin-top: 80px;
}

.container {
    max-width: var(--primary-width);
    display: flex;
    width: 96% !important;
    padding-left: 2%;
    padding-right: 2%;
    /*padding: 0 90px;*/
    position: relative;
}

a.btnBlogRedirect{
    background: #22BEAD;
    color: #ffffff !important;
    padding: 10px 20px !important;
    font-size: 15px;
    border-radius: 30px;
    font-weight: 600;
    opacity: 1;
    transition: all linear 0.3s;
    width: 180px;
    cursor: pointer;
    margin-top: 0;
    height: auto;
    text-align: center;
    text-decoration: none;
}

a.btnBlogRedirect:hover{
    background-color: #FADC67;
    color: #1E6B7F !important;
}


#topHeaderContact{
    justify-content: flex-end !important;
    align-items: center;
    border-bottom: 1px solid #EEF1E3;
    height: 30px;
}

#topHeaderContact a{
    display: flex;
    align-items: center;
    padding: 0px 20px;
    text-decoration: none;
    color: #1E6B7F;
    font-size: 12px;
    transition: all .2s ease;
}

#topHeaderContact a:hover{
    color: #22BEAD;
}

#topHeaderContact a svg{
    margin-right: 2px;
}

.container.center {
    justify-content: center !important;
    align-items: center;
}

.container.start {
    justify-content: flex-start !important;
}

.container.column {
    flex-direction: column;
}

header {
    height: 122px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transition: transform 0.3s ease 0s, background-color 0.3s ease 0s, opacity 0.3s ease 0s, box-shadow 0.3s ease 0s, border-color 0.3s ease 0s, margin 0.25s ease-out 0s;
    transition: all .2s;
    background-color: #F8FAFB;
    -webkit-box-shadow: 0px 1px 4px 1px rgba(82,82,82,0.25);
    -moz-box-shadow: 0px 1px 4px 1px rgba(82,82,82,0.25);
    box-shadow: 0px 1px 4px 1px rgba(82,82,82,0.25);
}

header.compact {
    /* background-color: #24677e; */
    height: 84px;
}

header.compact .secondary-menu li {
    height: 0px;
}

header.compact .secondary-menu li .sub {
    top: 60px !important;
}

header .logo {
    width: 178px;
    min-width: 178px;
    display: flex;
}

header .logo a {
    display: flex;
    align-items: center;
}

header .logo img {
    width: 178px;
    transition: width 0.32s ease;
	max-height: 86px;
}

header.compact .logo img {
    width: 142px!important;
	max-height: 55px;
}

header .main-menu {
    display: flex;
    width: 100%;
    align-items: center;
}

header .main-menu ul {
    display: flex;
    width: 100%;
    justify-content: center;
}

header .main-menu ul li {
    display: block;
    font-size: 15px;
    will-change: opacity, color;
    transition: opacity 0.2s ease, color 0.2s ease;
    position: relative;
    height: 40px;
    align-items: center;
    margin-top: 20px;

}

header .main-menu ul li a,
header .main-menu ul li.main-menu-option span{
    will-change: opacity, color;
    transition: opacity 0.2s ease, color 0.2s ease;
}

header .main-menu ul li:hover a,
header .main-menu ul li:hover span {
    opacity: 1;
    color: #1E6B7F;
}

header .main-menu ul li a {
    display: flex;
    padding: 0 2rem;
    font-size: 15px;
    color: #24677E;
    text-decoration: none;
    font-weight: 600;
    align-items: center;

}

header .main-menu ul li a span {
    margin-left: 4px;
    font-size: 18px;
    color: #24677E;
}

header .main-menu ul li .sub {
    display: flex;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
    position: absolute;
    /* width: 210px; */
    background-color: #fff;
    height: 0;
    padding: 0px;
    top: 30px;
    flex-direction: column;
    margin-left: 10px;
}

header .main-menu ul li:hover .sub {
    display: flex;
    opacity: 1;
    height: auto;
    min-width: 280px;
    padding: 10px;
    box-shadow: 0 6px 28px rgb(0 0 0 / 8%);
}


header .main-menu ul li .sub ul {
    display: flex;
    /* width: 210px; */
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    height: 0;
    overflow: hidden;
}

header .main-menu ul li:hover .sub ul {
    height: auto;
}

header .main-menu ul li .sub ul li {
    display: flex;
    margin: 12px 0;
    height: auto;
}

header .main-menu ul li .sub ul li a {
    color: #24677e;
    transition: opacity 0.2s ease, color 0.2s ease;
    font-size: 16px !important;
}

header .main-menu ul li .sub ul li:hover a {
    color: #22BEAD;
}

header .main-menu ul li .sub-product {
    display: flex;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
    position: absolute;
    min-width: 650px;
    background-color: #fff;
    height: 0;
    padding: 0px;
    border-radius: 10px;
    top: 30px;
}

header .main-menu ul li:hover .sub-product {
    display: flex;
    opacity: 1;
    height: auto;
    /* width: 210px; */
    padding: 20px 10px;
    box-shadow: 0 6px 28px rgb(0 0 0 / 8%);
}


header .main-menu ul li .sub-product ul {
    display: flex;
    width: 380px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    height: 0;
    overflow: hidden;
}

header .main-menu ul li:hover .sub-product ul {
    height: auto;
}

header .main-menu ul li .sub-product ul li {
    display: flex;
    margin: 12px 0;
    height: auto;
}

header .main-menu ul li .sub-product ul li a {
    padding: 0px 10px;
    color: #24677e;
    transition: opacity 0.2s ease, color 0.2s ease;
}

header .main-menu ul li .sub-product ul li:hover a {
    color: #22BEAD;
}

header .main-menu ul li .sub-product ul li:hover .unavailable-module{
    color: #24677e !important;
    cursor: not-allowed;
}

header .main-menu ul li .sub-product ul li a .product-box{
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

header .main-menu ul li .sub-product ul li a .product-box .product-content-text h6{
    margin-bottom: 6px;
}
header .main-menu ul li .sub-product ul li a .product-box .product-content-text h6 > span{
    font-size: 14px;
    color: #fdbe2b;
}

header .main-menu ul li .sub-product ul li a .product-box .product-content-text p{
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}

header .secondary-menu {
    display: flex;
    align-items: center;
}

header .secondary-menu ul {
    display: flex;
    width: 100%;
    justify-content: center;
}

header .secondary-menu ul li {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 80px;
}

header .secondary-menu ul li div.label {
    font-size: 15px;
    will-change: opacity, color;
    transition: opacity 0.2s ease, color 0.2s ease;
    color: #24677E;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    border-radius: 30px;
    padding: 2px 8px;
    width: 32px;
    align-items: center;
}

header .secondary-menu ul li div.label span {
    will-change: opacity, color;
    transition: opacity 0.2s ease, color 0.2s ease;
    color: #24677E;

}

header .secondary-menu ul li:hover div.label{
    color: #ffffff;
}

header .secondary-menu ul li:hover div.label span {
    color: #ffffff;
    transform: rotate(180deg);
}


header .secondary-menu ul li:hover div.label {
    background: #22BEAD;
}

header .secondary-menu ul li a {
    /* opacity: 0.75; */
    font-size: 15px;
    will-change: opacity, color;
    transition: opacity 0.2s ease, color 0.2s ease;
    color: #fff;
    text-decoration: none;
}

header .secondary-menu ul li .sub {
    display: flex;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
    position: absolute;
    width: 190px;
    background-color: #fff;
    height: 0;
    padding: 0px;
    border-radius: 10px;
    top: 70px;
}

header .secondary-menu ul li:hover .sub {
    display: flex;
    opacity: 1;
    height: auto;
    width: 190px;
    padding: 20px 10px;
    box-shadow: 0 6px 28px rgb(0 0 0 / 8%);
}


header .secondary-menu ul li .sub ul {
    display: flex;
    width: 190px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    height: 0;
    overflow: hidden;
}

header .secondary-menu ul li:hover .sub ul {
    height: auto;
}

header .secondary-menu ul li .sub ul li {
    display: flex;
    margin: 4px 0;
    height: auto;
    padding: 0 8px;
    height: 30px;
}

header .secondary-menu ul li .sub ul li a {
    color: #24677e;
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 32px;
    display: flex;
    align-items: center;
    height: 24px;
    font-weight: 500;
    transition: all ease 0.2s;
}

header .secondary-menu ul li .sub ul li a:hover {
    padding-left: 36px;
}

header .secondary-menu ul li .sub ul li.en a {
    background-image: url("assets/images/en.webp");
}

header .secondary-menu ul li .sub ul li.es a {
    background-image: url("assets/images/es.webp");
}

header .secondary-menu ul li .sub ul li.pt a {
    background-image: url("assets/images/br.webp");
}

header .secondary-menu a.login {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 60px;
    color: #24677E;
    font-weight: 600;

}

header .secondary-menu a.login span {
    font-size: 20px;
    color: #22BEAD;
    margin-right: 3px;
    font-weight: 700;
    transition: all ease 0.2s;
}

header .secondary-menu a.login:hover {
    opacity: 1;
}

header .secondary-menu a.login:hover span {
    margin-right: 6px;
}

header .secondary-menu ul li button,
header .secondary-menu ul li .button-link{
    background: #22BEAD;
    color: #ffffff !important;
    margin-left: 10px;
    padding: 10px 20px !important;
    font-size: 15px;
    border-radius: 30px;
    font-weight: 600;
    opacity: 1;
    transition: all linear 0.3s;
    width: 180px;
    cursor: pointer;
    margin-top: 0;
    height: auto;
    text-align: center;
}

header .secondary-menu ul li button:hover,
header .secondary-menu ul li .button-link:hover {
    background-color: #FADC67;
    color: #1E6B7F !important;
}

.default-color{
    color: #24677e;
}

/* MAIN CONTENT */

#site-content {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
}


#site-content .befective-button {
    margin-top: 40px;
    display: flex;
    background: #fdbe2b;
    color: #6C5520 !important;
    padding: 0px 32px !important;
    font-size: 15px;
    border-radius: 30px;
    font-weight: 600;
    opacity: 1;
    transition: all .2s ease;
    width: fit-content;
    cursor: pointer;
    height: 48px;
    align-items: center;
    text-decoration: none;

}

#site-content .befective-button.success {
    color: #fff !important;
    background-color: #22BEAD !important;
    width: fit-content;
}

#site-content .befective-button.green {
    color: #fff !important;
    background-color: #24677e !important;
    width: fit-content;
}

#site-content .befective-button .icon {
    /* margin-top: 4px; */
    display: flex;
    width: 0 !important;
    font-size: 12px;
    padding-left: 0px;
    transition: all .2s ease-in-out;
}


#site-content .befective-button .icon span {
    opacity: 0;
    font-size: 0px;
}

#site-content .befective-button:hover {
    animation-name: buttonExpand;
    animation-duration: 0.2s;
    animation-delay: 0s;
    animation-timing-function: ease;

}

#site-content .befective-button:hover .icon {
    width: 24px;
    margin-left: 16px;
}

#site-content .befective-button:hover .icon span {
    opacity: 1;
    font-size: 18px;
}


.banner {
    width: 100%;
    background-color: #24677e;
    height: 660px;

    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    background-attachment: scroll;
    display: flex;
    justify-content: center;
    /* margin-bottom: 100px; */

}
.banner.banner-produtividade {
    background-image: url("assets/images/banner-produtividade.webp");
    background-position: center top;
    height: 695px;
}
.banner.banner-checkin {
    background-image: url("assets/images/banner-checkin.webp");
    background-position: center top;
    height: 695px;
} 
.banner.banner-rooms {
    background-image: url("assets/images/banner-rooms.webp");
    background-position: center top;
    height: 695px;
}
.banner.banner-invetory {
    background-image: url("assets/images/banner-invetory.webp");
    background-position: center top;
    height: 695px;
}

.banner.banner-ad {
    background-image: url("assets/images/banner-ad.jpg");
    background-position: center top;
    height: 695px;
}

.banner.banner-points {
    background-image: url("assets/images/banner-points.webp");
    background-position: center top;
    height: 695px;
}

.banner.banner-projects {
    background-image: url("assets/images/banner-projects.webp");
    background-position: center top;
    height: 695px;
}


/* .content-block .list-solucoes .item .text span {
    font-size: 16px;
    color: #24677e;
    font-weight: 600;  
} */


.content-block .list-solucoes .item .image2 img {
    width: 80%;
    height: auto;
    /* max-width: 625px; */
    border-radius: 10px;
}

.content-block .list-solucoes .item .image2.radar-chart{
    text-align: center;
}
.content-block .list-solucoes .item .image2.radar-chart img{
    width: 60%;
}

.content-block .list-standard {
    display: flex;
    margin: 0;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;

}


.content-block .list-standard .item {
    justify-content: space-between;
    display: flex;
    width: 100%;
    padding-bottom: 100px;
}

@media screen and (max-width: 680px) {
    .content-block .list-standard .item {
        flex-direction: column;
    }
}


.content-block .list-standard .item .text {
    width: 45%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;

}

.content-block .list-standard .item .text h4 {
    font-size: 32px;
    line-height: 42px;
    color: #24677e;
    font-weight: 400;
    margin-bottom: 10px;

}
.content-block  .list-standard .item .text span {
    font-size: 16px;
    color: #24677e;
    font-weight: 600;  
}

.content-block .list-standard .item .text h4 b {
    font-weight: 600;

}

.content-block .list-standard .item .text p {
    font-size: 17px;
    line-height: 30px;
    color: #24677e;
    margin-top: 20px;
    margin-bottom: 20px;
}

.content-block .list-standard .item .text ul {
    list-style: none;
}

.content-block .list-standard .item .text .only-text {
    list-style: none;
}

.content-block .list-standard .item .text ul li {
    min-height: 23px;
    font-size: 15px;
    color: #24677e;
    background: url("assets/images/check3.webp");
    background-repeat: no-repeat;
    margin-bottom: 10px;
    padding-left: 40px;
    background-position-y: 4px;
}

.content-block .list-standard.valores {
    width: 100%;
}

.content-block .list-standard.valores .item {
    justify-content: space-between;
}

.content-block .list-standard.valores .item .text {
    max-width: 400px;
    padding-right: 100px;
}

.content-block .list-standard.valores .item .text h4 {
    font-size: 35px;
    line-height: 46px;
    font-family: 'Poppins', sans-serif;
}

.content-block .list-standard.valores .item ul {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.content-block .list-standard.valores .item ul li {
    display: flex;
    color: #24677e;
    justify-content: flex-start;
    align-items: center;
    min-width: 280px;
    width: 280px;
    padding-left: 65px;
    background-repeat: no-repeat !important;
    background-size: 50px 50px !important;
    margin-bottom: 25px;
    height: 50px;
    font-size: 17px;
    line-height: 20px;
    font-weight: 700;
    margin-right: 30px;
}

.content-block .list-standard.valores .item ul li:nth-child(1) {
    background: url("assets/images/1-min.png");
}

.content-block .list-standard.valores .item ul li:nth-child(2) {
    background: url("assets/images/2-min.png");
}

.content-block .list-standard.valores .item ul li:nth-child(3) {
    background: url("assets/images/3-min.png");
}

.content-block .list-standard.valores .item ul li:nth-child(4) {
    background: url("assets/images/4-min.png");
}

.content-block .list-standard.valores .item ul li:nth-child(5) {
    background: url("assets/images/5-min.png");
}

.content-block .list-standard.valores .item ul li:nth-child(6) {
    background: url("assets/images/6-min.png");
} 

.content-block .list-standard.trabalhe {
    width: 100%;
}

.content-block .list-standard.trabalhe .item {
    justify-content: space-between;
    width: 100%;
}

.content-block .list-standard.trabalhe .item .text {
    max-width: 550px;
    padding-right: 100px;
}

.content-block .list-standard.trabalhe .item .text p,
.content-block .list-standard.column .item .text.content{
    font-size: 17px;
    line-height: 30px;
    color: #24677e;
    margin-top: 20px;
    margin-bottom: 20px;
}


.content-block .list-standard.column .item .text.content ul{
    margin-top: 28px;
}

.content-block .list-standard.column .item .text.content h4{
    margin-bottom: 28px;
}

.content-block .list-standard .item .image {
    width: 45%;
    opacity: 0;
}

.content-block .list-standard .item .image img {
    width: 100%;
    height: auto;
    max-width: 625px;
    border-radius: 10px;
}

.content-block .list-standard.column .item {
    flex-direction: column;

}

.content-block .list-standard.column .item .text {
    width: 100%;

}

.content-block .list-standard.column .item .image {
    width: 670px;

}

.content-block .list-standard.column .item .image img {
    max-width: 670px;
}
.style-block{
    font-size: 16px;
    color: #24677e;
    font-weight: 700;  
}

.banner.no-margin {
    margin-bottom: 0;
}

.banner .container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.banner .text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.banner .text h1 {
    font-size: 46px;
    width: 920px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    font-weight: 400;
}

.banner .text h1 b {
    color: #fdbe2b;
    font-weight: 500;
}


.banner .text h4 {
    margin-top: 20px;
    font-size: 22px;
    width: 920px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    font-weight: 400;
}

.banner .text button {
    margin-top: 40px;
    display: flex;
    background: #fdbe2b;
    color: #6C5520 !important;
    padding: 10px 32px !important;
    font-size: 15px;
    border-radius: 30px;
    font-weight: 500;
    opacity: 1;
    transition: all .8s ease-in-out;
    width: auto;
    cursor: pointer;
    height: 52px;
    align-items: center;

}

.banner .text button .icon {
    display: block;
    width: 0;
    font-size: 12px;
    padding-left: 20px;
    transition: all .4s ease-in-out;
}

.banner .text button .icon span {
    opacity: 0;
    font-size: 0px;
}

.banner .text button:hover .icon {
    width: auto;
}

.banner .text button:hover .icon span {
    opacity: 1;
    font-size: 18px;
}

.mt-100{
    margin-top: 100px !important;
}

.banner.home {
    background-image: url("assets/images/banner-home-3.webp");
    background-position: center 50px;
    background-size: cover;
    margin-bottom: 100px;
}

.banner.home2 {
    background-image: url("assets/images/banner-como-funciona-min.webp");
    background-position: center center;
    background-size: cover;
}

.banner.home3 {
    background-image: url("assets/images/banner-case-min.webp");
    background-position: center 40px;
    height: 780px;
}

.banner.produto {
    background-image: url("assets/images/produto.webp");
    background-position: center 80px;
    background-size: cover;
    height: 815px;
}

.banner.produto-v2 {
    background-image: url("assets/images/bg-banner-product.webp");
    background-position: center 80px;
    background-size: cover;
    height: 815px;
}

.banner.solucoes {
    background-image: url("assets/images/solucoes.webp");
    background-position: center 80px;
    background-size: cover;
    height: 695px;
}

.banner.solucoes .container .text h1{
    margin-top: 60px;
}

.banner.sobre {
    background-image: linear-gradient(rgba(30, 107, 127, 0.4), rgba(30, 107, 127, 0.4)), url("assets/images/sobre.webp");
    background-position: center center;
    height: 815px;
}

.banner.parceiros {
    background-image: url("assets/images/parceiros.webp");
    background-position: center top;
    height: 815px;
}

.banner.contato {
    background-image: url("assets/images/contato.webp");
    background-position: center top;
    height: 450px;
}

.banner.interno {
    height: 680px;
}

.simple-banner{
    margin-top: 120px;
}

.simple-banner.product {
    background-image: url("assets/images/bg-banner-product.webp");
    background-position: center center;
    background-size: cover;
    height: 380px;
    background-repeat: no-repeat;
}

.simple-banner .content{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.simple-banner .content h1{
    font-size: 40px;
    font-weight: 600;
    line-height: 64px;
    max-width: 500px;
    text-align: center;
    color: #FFFFFF;
}

.blog-bef-bar-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-page .blog-bef-bar-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
}

.blog-bef-bar-header.flex-end{
    justify-content: flex-end;
}

.button-filtro-categories{
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    height: 0px !important;
}
.filtro-categories{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.banner.blog {
    background-image: linear-gradient(rgba(30, 107, 127, 0.4), rgba(30, 107, 127, 0.4)), url("assets/images/blog.webp");
    background-position: center top;
    height: 715px;
}

.banner.blog .talk-with-us {
    max-height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    gap: 10px;
    border-radius: 100px;
    padding: 12px 32px;
    color: #1E6B7F;
    text-decoration: none;
    background-color: #FADC67;
    transition: 0.2s;
}

.banner.blog .talk-with-us img {
    max-width: 20px;
    filter: invert(28%) sepia(95%) saturate(431%) hue-rotate(165deg) brightness(92%) contrast(88%);
}

.banner.contato .container .text {
    width: 670px;

}

.banner.contato .container .text h1 {
    width: 670px;
}

.banner.interno .container {
    justify-content: center;
}

.banner.interno.blog .container {
    justify-content: flex-start;
}

.banner.interno.blog .container.center {
    justify-content: center;
}

.banner.interno .container .text {
    align-items: flex;
    max-width: 1200px;
}

.banner.interno .container .text h1 {
    text-align: center;
    /* width: auto; */
    font-weight: 700;
    line-height: 6rem;
}

.banner.interno .container .text h1 b {
    color: #fdbe2b;
    font-weight: 700;
}

.banner.blog .container .text {
    align-items: center;
    gap: 24px;
}

.banner.blog .container .text h1 {
    width: 100%;
    font-size: 46px;
    text-align: center;
}

.banner.blog .container .text h1 b {
    color: #fdbe2b;
    font-weight: 700;
}

.button-container {
    margin-top: 40px;
    height: 170px;
}

button.video {
    transition: all linear 0.1s !important;
    width: 100px !important;
    height: 100px !important;
    border-radius: 50px !important;
    border: solid 8px #156a60 !important;
    background-color: #23a98a !important;
    opacity: 0.7 !important;
    justify-content: center;

}

button.video span {
    color: #fff;
    font-size: 56px;
}

button.video:hover {
    transform: scale(1.1);
}

.content-block {
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
}

.content-block.no-margin {
    margin-bottom: 0;
}

.content-block.half-margin {
    margin-bottom: 50px;
}

.content-block.blog {
    /* background-color: #fff; */
    padding-top: 50px;
    padding-bottom: 100px;
}

.content-block.white-bg {
    background-color: #fff;
}

.content-block.gray-bg{
    background-color: #f1f5f6;
}

.content-block.py {
    padding: 50px 0px;
}

.content-block.direction-column{
    flex-direction: column;
    margin-bottom: 0px;
    padding-top: 60px;
}

.content-block h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 35px;
    line-height: 46px;
    font-weight: 400;
    color: #24677e;
    margin-bottom: 15px;
}

.content-block .container {
    display: flex;


    width: 100%;
}

.content-block .container .box-title-with-subtitle{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-block .container .box-title-with-subtitle h2{
    font-weight: 600;
}


.content-block .container .box-title-with-subtitle p{
    font-size: 16px;
    text-align: center;
    color: #24677E;
}

.content-block .container .feature-image {
    display: flex;
    padding-left: 50px;
    padding-right: 50px;
    width: 50%;
}

.content-block .container .the-content {
    width: 50%;
}

.content-block .container .feature-image img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}
.content-block .container .feature-image.rounded img {
    border-radius: 10px;
}

.content-block.newsletter {
    background-color: #FADC67;
    height: 150px;
}

.content-block.newsletter .container {
    align-items: center;
    justify-content: space-between !important;
}

.content-block.newsletter .text {
    height: 68px;
    font-size: 24px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #24677e;
    background: url("assets/images/bee2.webp");
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 76px 68px;
    align-items: center;
    padding-left: 100px;
    display: flex;
}

.partners-page .content-block.newsletter .text {
    width: 60%;
    background: url("assets/images/befective-ai-logo-rounded-blue-and-yellow.svg");
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 76px 68px;
}

.content-block.newsletter .text b {
    display: contents;
}


.content-block.sobre-feat {
    background-color: #ffcc4c;
    padding-top: 80px;
    padding-bottom: 80px;

}

.content-block.sobre-feat .container {
    justify-content: space-between;
}

.content-block.sobre-feat .item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    width: 30%;
    max-width: 390px;
    opacity: 0;

}

.content-block.sobre-feat .item .image {
    height: 50px;
    margin-bottom: 15px;
}

.content-block.sobre-feat .item .image img {
    width: 50px;
    height: 50px;

}


.content-block.sobre-feat .item h4 {
    font-size: 22px;
    font-weight: 700;
    color: #0c3646;
    margin-bottom: 10px;
}

.content-block.sobre-feat .item p {
    color: #0c3646;
    font-size: 17px;
    line-height: 30px;
}

.content-block.sobre-feat .item:first-child {
    margin-right: 30px;
}

.content-block.sobre-feat .item:last-child {
    margin-left: 30px;
}

.content-block.double-bg {

    height: auto;
    background-size: 50%, auto, 50%, auto !important;
    padding-top: 5%;
    padding-bottom: 5%;
}

.content-block.double-bg .container {
    justify-content: flex-end;
    align-items: center;
}


.content-block.double-bg .container .text {
    width: 45%;
    max-width: 450px;
    margin-right: 5%;
}

.content-block.double-bg .container .text h4 {
    color: #0c3646;
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    margin-bottom: 6px;
    margin-top: 10px;
}

.content-block.double-bg .container .text p {
    color: #0c3646;
    font-size: 17px;
    line-height: 30px;
    margin-bottom: 50px;
}

.content-block.faq {
    padding-top: 100px;
    background-color: #fff;
    margin-bottom: 0;
    padding-bottom: 100px;
}

.content-block.faq .container {
    position: relative;
    flex-direction: column;
    padding-left: 5%;
    padding-right: 5%;
}

.content-block.faq .container .block {
    flex-direction: row;
    display: flex;
}


.content-block.faq .container h2 {
    width: 100%;
    margin-top: 50px;
}

.content-block.faq .container .side {
    width: 275px;
    margin-right: 95px;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 50px;
    height: 300px;
    padding-top: 70px !important;
}

.content-block.faq .container .side ul {
    background-color: #f1f5f6;
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 10px 0;
}

.content-block.faq .container .side ul li {
    display: flex;
    padding: 0 25px;
    font-size: 15px;
    color: #24677e;
    opacity: 0.45;
    margin: 20px 0;
    transition: all ease 0.4s;
    border-left: solid 3px #f1f5f6;
    cursor: pointer;
}

.content-block.faq .container .side ul li.active {
    opacity: 1;
    border-left: solid 3px #fdbe2b;
    background: url("assets/images/seta.webp");
    background-repeat: no-repeat;
    background-position: 240px center;
}

.content-block.faq .container .list {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.content-block.faq .container .list h4 {
    font-size: 16px;
    font-weight: 600;
    color: #22BEAD;
    margin-bottom: 20px;
}

.content-block.faq .container .list ul {
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;
}

.content-block.faq .container .list ul li {
    display: flex;
    flex-direction: column;
    min-height: 32px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid #D3D6C2;
    cursor: pointer;
    max-height: 38px;
    overflow: hidden;
    transition: all ease 0.6s;
}

.content-block.faq .container .list ul li.expanded {
    max-height: 1000px;
}

.content-block.faq .container .list ul li h5 {
    display: flex;
    justify-content: space-between;
    /* height: 30px; */
    line-height: 24px;
    font-size: 18px;
    font-weight: 700;
    color: #24677e;
}

.content-block.faq .container .list ul li h5 span {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
}

.content-block.faq .container .list ul li .more,
.content-block.faq .container .list ul li.expanded .minus {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
}

.content-block.faq .container .list ul li .more {
    background-color: #22BEAD;
}

.content-block.faq .container .list ul li.expanded .minus{
    background-color: #F8D16E;
}

.content-block.faq .container .list ul li.expanded .minus span{
    color: #1E6B7F !important;    
}

.content-block.faq .container .list ul li.expanded .more {
    display: none;
}

.content-block.faq .container .list ul li .minus {
    display: none;
}

.content-block.faq .container .list ul li .text {
    font-size: 15px;
    line-height: 30px;
    color: #24677e;
    padding-right: 150px;
    padding-top: 10px;
    opacity: 0;
    transition: all ease 0.4s;
}

.content-block.faq .container .list ul li .text span {
    color: #fdbe2b;
    cursor: pointer;
}

.content-block.faq .container .list ul li .text a {
    color: #fdbe2b;
    text-decoration: none;
    font-weight: 700;
}

.content-block.faq .container .list ul li.expanded .text {
    opacity: 1;
}

.the-content {

    padding-left: 50px;
    padding-right: 50px;
    flex-direction: column;
    color: #24677e;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    line-height: 30px;
    margin-bottom: 15px;
}

.the-content.w490 {
    width: 520px;
    padding-left: 50px;
    padding-right: 50px;

}

.the-content.white {
    color: #fff;
    /* background: url("assets/images/bee.webp"); */
    background-repeat: no-repeat;
    padding-top: 20px;
    padding-left: 0;
}

.the-content h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 35px;
    line-height: 46px;
    font-weight: 500;
    color: #24677e;
    margin-bottom: 15px;
}

.the-content.white h2 {
    color: #fff;

}

.the-content.white h4 {
    color: #fff;
    font-size: 28px;
    font-weight: 400;
    line-height: 38px;
}

.the-content.white h4 b {
    color: #fdbe2b;
}

.the-content button {
    margin-top: 40px;
    display: flex;
    background: #fdbe2b;
    color: #ffffff !important;
    padding: 10px 32px !important;
    font-size: 15px;
    border-radius: 30px;
    font-weight: 500;
    opacity: 1;
    transition: all .8s ease-in-out;
    width: auto;
    cursor: pointer;
    height: 52px;
    align-items: center;

}

.the-content button .icon {
    display: block;
    width: 0;
    font-size: 12px;
    padding-left: 20px;
    transition: all .4s ease-in-out;
    margin-top: 10px;
    opacity: 0;
}

.the-content.icon span {
    opacity: 0;
    font-size: 0px;
}

.the-content button:hover .icon {
    width: auto;
    opacity: 1;
}

.the-content button:hover .icon span {
    opacity: 1;
    font-size: 18px;
}


.content-block .container .list {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
    margin-top: 70px;
    flex-wrap: wrap;
    justify-content: space-between;
}


.content-block .container .list .item {
    width: 305px;
    min-width: 305px;
    height: 180px;
    margin-bottom: 28px;
}

.content-block .container .list .item .icon {

}

.content-block .container .list .item .icon img {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
}

.content-block .container .list .item h4,
.content-block .container .list .item h6{
    font-size: 16px;
    margin-bottom: 8px;
    color: #24677e;
    font-family: 'Poppins', sans-serif;
    line-height: 24px;
}

.content-block .container .list .item h6 span{
    color: #fdbe2b;
}

.content-block .container .list .item p {
    font-size: 12px;
    line-height: 18px;
    color: #24677e;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.content-block .container .list.big{
    width: 90%;
    margin: 50px 0px;
    display: flex;
    justify-content: space-evenly;
    row-gap: 100px;
    column-gap: 20px;
}

.content-block .container .list.big .item {
    /* width: 20%; */
    max-width: 280px;
    min-width: 180px;
    /* height: 140px; */
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* margin-left: 2%;
    margin-right: 3%; */
    text-align: center;
}

.content-block .container .list.big .item.link{
    text-decoration: none;
    cursor: pointer;
    transition: all ease 0.4s;
    padding: 10px;
    border-radius: 8px;
}

.content-block .container .list.big .item.link:hover{
    background-color: #ffffff;
    box-shadow: 0px 4px 8px #40414133;
}

.content-block .container .list.big .item.cursor-not-alowed{
    cursor: not-allowed;
}
.opacity-70{
    opacity: 0.7;
}

/* 
.content-block .container .list.big .item.link:hover h6,
.content-block .container .list.big .item.link:hover p{
    color: #22BEAD;
} */

.content-block .container .list.big .item .icon img {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}

.content-block.video-produto {
    margin: 0;
    padding-top: 100px;
    padding-bottom: 80px;
    background: linear-gradient(0deg, #f1f5f6 50%, #fff 50%);
}

.content-block.video-produto .container {
    align-items: center;
}

.content-block .container .video {
    width: 80%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

}

.content-block .container .video img {
    width: 100%;
    height: auto;
    box-shadow: 0 40px 40px rgb(12 54 70 / 10%);
    border-radius: 20px;
    cursor: pointer;
}

.content-block .container .video button {
    position: absolute;
    background-color: #fdbe2b !important;
    border-color: #fff !important;
    box-shadow: 0 40px 40px rgb(12 54 70 / 10%);
    width: 130px !important;
    height: 130px !important;
    border-radius: 100% !important;
}

.content-block.video-produto .container h4 {
    color: #24677e;
    font-weight: 700;
    font-size: 22px;
    line-height: 32px;
    margin-top: 80px;
    margin-bottom: 12px;
}

.content-block.video-produto .container p {
    color: #24677e;
    font-size: 15px;
}

.content-block .list-prod {
    display: flex;
    margin: 0;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;

}

.content-block .list-prod .item {
    justify-content: space-between;
    display: flex;
    width: 100%;
    padding-bottom: 200px;
}

.content-block .list-prod .item .text {
    width: 45%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;

}

.content-block .list-prod .item .text h4 {
    font-size: 32px;
    line-height: 42px;
    color: #24677e;
    font-weight: 400;
    margin-bottom: 10px;
    max-width: 430px;
}

.content-block .list-prod .item .text h4 b {
    font-weight: 600;

}

.content-block .list-prod .item .text p {
    font-size: 15px;
    line-height: 30px;
    color: #24677e;
    max-width: 430px;
}

.content-block .list-prod .item .image {
    width: 45%;
    opacity: 0;
}

.content-block .list-prod .item .image img {
    width: 100%;
    height: auto;
    max-width: 625px;
    border-radius: 10px;
}

.content-block.solucoes .container {
    flex-direction: row;
}

.content-block.solucoes .container .side {
    width: 275px;
    margin-right: 95px;
    height: 300px;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 20px;
    z-index: 9;
}

.content-block.solucoes .container .side {
    height: 490px;
}

.content-block.solucoes .container .side ul {
    background-color: #fff;
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 10px 0;
}

.content-block.solucoes .container .side ul li {
    display: flex;
    padding: 0 25px;
    font-size: 15px;
    color: #24677e;
    opacity: 0.45;
    margin: 20px 0;
    transition: all ease 0.4s;
    border-left: solid 3px #f1f5f6;
    cursor: pointer;
}

.content-block.solucoes .container .side ul li.active {
    opacity: 1;
    border-left: solid 3px #fdbe2b;
    background: url("assets/images/seta.webp");
    background-repeat: no-repeat;
    background-position: 240px center;
}

.content-block .list-solucoes {
    display: flex;
    margin: 0;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;

}


.content-block .list-solucoes .item {
    justify-content: space-between;
    display: flex;
    width: 100%;
    padding-bottom: 100px;
}

@media screen and (max-width: 680px) {
    .content-block .list-solucoes .item {
        flex-direction: column;
    }
}


.content-block .list-solucoes .item .text {
    width: 45%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;

}

.content-block .list-solucoes .item .text h4 {
    font-size: 3.2rem;
    line-height: 45px;
    color: #24677e;
    font-weight: 600;
    margin-bottom: 10px;
}

.content-block .list-solucoes .item .text h4 b {
    font-weight: 600;

}

.highlight{
    font-size: auto;
    background-color: #FFE066;
    padding: 0 8px;
    border-radius: 4px;
}

.content-block .list-solucoes .item .text h4 .highlight {
    font-size: auto;
    background-color: #FFE066;
    padding: 0 8px;
    border-radius: 4px;
}

.content-block .list-solucoes .item .text p.description {
    font-size: 17px;
    line-height: 30px;
    color: #24677e;
    margin-top: 20px;
    margin-bottom: 20px;
}

.content-block .list-solucoes .item .text ul.response-list {
    padding-left: 0px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

.content-block .list-solucoes .item .text ul.response-list li {
    /* height: 24px; */
    font-size: 15px;
    font-weight: 700;
    align-items: center;
    color: #24677e;
    display: flex;
    background: url("assets/images/check-min-1.png");
    background-repeat: no-repeat;
    margin-bottom: 10px;
    padding-left: 32px;
    background-size: 20px;
    background-position-y: 2px;
}

.content-block .list-solucoes .item .text.simple ul{
    list-style-type: circle;
    margin-left: 28px;
}

.content-block .list-solucoes .item .text.simple ul li{
    display: list-item;
    background: none;
    font-weight: 400;
    padding-left: 0px;
}

.content-block .list-solucoes.valores {
    width: 100%;
}

.content-block .list-solucoes.valores .item {
    justify-content: space-between;
}

.content-block .list-solucoes.valores .item .text {
    max-width: 400px;
    padding-right: 100px;
}

.content-block .list-solucoes.valores .item .text h4 {
    font-size: 35px;
    line-height: 46px;
    font-family: 'Poppins', sans-serif;
}

.content-block .list-solucoes.valores .item ul {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.content-block .list-solucoes.valores .item ul li {
    display: flex;
    color: #24677e;
    justify-content: flex-start;
    align-items: center;
    min-width: 280px;
    width: 280px;
    padding-left: 65px;
    background-repeat: no-repeat !important;
    background-size: 50px 50px !important;
    margin-bottom: 25px;
    height: 50px;
    font-size: 17px;
    line-height: 20px;
    font-weight: 700;
    margin-right: 30px;
}

.content-block .list-solucoes.valores .item ul li:nth-child(1) {
    background: url("assets/images/1-min.png");
}

.content-block .list-solucoes.valores .item ul li:nth-child(2) {
    background: url("assets/images/2-min.png");
}

.content-block .list-solucoes.valores .item ul li:nth-child(3) {
    background: url("assets/images/3-min.png");
}

.content-block .list-solucoes.valores .item ul li:nth-child(4) {
    background: url("assets/images/4-min.png");
}

.content-block .list-solucoes.valores .item ul li:nth-child(5) {
    background: url("assets/images/5-min.png");
}

.content-block .list-solucoes.valores .item ul li:nth-child(6) {
    background: url("assets/images/6-min.png");
}

.content-block .list-solucoes.trabalhe {
    width: 100%;
}

.content-block .list-solucoes.trabalhe .item {
    justify-content: space-between;
    width: 100%;
}

.content-block .list-solucoes.trabalhe .item .text {
    max-width: 550px;
    padding-right: 100px;
}

.content-block .list-solucoes.trabalhe .item .text p {
    font-size: 17px;
    line-height: 30px;
    color: #24677e;
    margin-top: 20px;
    margin-bottom: 20px;
}

.content-block .list-solucoes .item .image {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.content-block .list-solucoes .item .image img {
    width: 70%;
    height: auto;
    max-width: 625px;
    border-radius: 10px;
}

.content-block .list-solucoes.column .item {
    flex-direction: column;

}

.content-block .list-solucoes.column .item .text {
    width: 100%;

}

.content-block .list-solucoes.column .item .image {
    width: 670px;

}

.content-block .list-solucoes.column .item .image img {
    max-width: 670px;
}


.content-block .list-referrer {
    display: flex;
    margin: 0;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;

}

.content-block .container.referrer {
}

.content-block .container.referrer .side {
    width: 275px;
    margin-right: 95px;
    height: 300px;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 20px;
}


.content-block .container.referrer .side ul {
    background-color: #f1f5f6;
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 10px 0;
}

.content-block .container.referrer .side ul h5 {
    display: flex;

    font-size: 17px;
    color: #24677e;
    font-weight: 500;
    margin: 20px 25px;
    padding-bottom: 20px;
    transition: all ease 0.4s;
    border-left: solid 3px #f1f5f6;
    border-bottom: solid 1px #d8e6ec;

}

.content-block .container.referrer .side ul li {
    display: flex;
    padding: 0 25px;
    font-size: 15px;
    color: #24677e;
    opacity: 0.45;
    margin: 20px 0;
    transition: all ease 0.4s;
    border-left: solid 3px #f1f5f6;
    cursor: pointer;

}

.content-block .container.referrer .side ul li.active {
    opacity: 1;
    border-left: solid 3px #fdbe2b;
    background: url("assets/images/seta.webp");
    background-repeat: no-repeat;
    background-position: 240px center;
}

.content-block .container.referrer .side .bee, .content-block.faq .container .side .bee {
    background-color: #fff6e1;
    padding: 25px;
    border-radius: 15px;
    display: flex;
    align-items: center;
}

.content-block .container.referrer .side .bee p, .content-block.faq .container .side .bee p {
    font-size: 15px;
    line-height: 20px;
    color: #24677e;

}

.content-block .list-referrer .item {
    justify-content: space-between;
    display: flex;
    width: 100%;
    padding-bottom: 100px;
}


.content-block .list-referrer .item .text {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;

}

.content-block .list-referrer .item .text h4 {
    font-size: 32px;
    line-height: 42px;
    color: #24677e;
    font-weight: 400;
    margin-bottom: 10px;

}

.content-block .list-referrer .item .text h4 b {
    font-weight: 600;

}

.content-block .list-referrer .item .text p {
    font-size: 17px;
    line-height: 30px;
    color: #24677e;
    margin-top: 20px;
    margin-bottom: 20px;
}

.content-block .list-referrer .item .text ul {
    padding-left: 0px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

.content-block .list-referrer .item .text ul li {
    height: auto;
    font-size: 15px;
    font-weight: 700;

    color: #24677e;
    display: block;
    background: url("assets/images/check-min-1.png");
    background-repeat: no-repeat;
    background-size: 35px 34px;
    margin-bottom: 10px;
    padding-left: 60px;
}

.content-block .list-referrer .item .text ul li p {
    margin-top: 0;
    font-weight: 400;
    margin-bottom: 8px;
    line-height: 21px;
    font-size: 15px;
}

.content-block.comparativo {
    padding-top: 80px;
    padding-bottom: 80px;
    flex-direction: column;
    align-items: center;

}

.content-block.comparativo .container {
    min-width: 500px; /* Garante largura mínima para conteúdo completo */
    width: 100%;
}

.content-block.comparativo .table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-block.comparativo h1{
    font-size: 3.2rem;
    line-height: 45px;
    color: #24677e;
    font-weight: 600;
    margin-bottom: 10px;
}


.content-block.comparativo ul {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.content-block.comparativo ul li {
    display: flex;
    flex-direction: row;
    height: 60px;
    padding-left: 2%;
    padding-right: 2%;
    width: 96%;
}

.content-block.comparativo ul li:nth-child(even) {
    background-color: #e6eef0;
}

.content-block.comparativo ul li .item {
    display: flex;
    width: 40%;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    color: #24677e;
}

.content-block.comparativo ul li .prog {
    display: flex;
    width: 20%;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 18px;
}

.content-block.comparativo ul li .prog span {
    font-weight: 700;
    font-size: 18px;
    color: #22bead;
}

.content-block.comparativo ul li .prog.no span {
    font-weight: 700;
    font-size: 18px;
    color: #c8c8c8 !important;
}

.content-block.comparativo ul li.head {
    height: 70px;
}

.content-block.comparativo ul li.head .item {
    font-size: 28px;
    color: #24677e;
}

.content-block.comparativo ul li.head .item b {
    display: contents;
}

.content-block.comparativo ul li.head .prog {
    font-size: 17px;
    color: #24677e;
    font-weight: 700;
}

.content-block.contato .text {
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-block.contato .text img {
    width: 157px;
    height: 156px;
}

.content-block.contato .text p {
    font-size: 28px;
    line-height: 38px;
    color: #24677e;
    max-width: 500px;
}

.content-block.contato .list {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.content-block.contato .list .item {
    width: 455px;
    height: 250px;
    display: flex;
    border: solid 2px #d9e6e9;
    border-radius: 16px;
    margin-left: 15px;
    margin-right: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
}

.content-block.contato .list .item img {
    height: 35px;
}

.content-block.contato .list .item h5 {
    font-size: 28px;
    font-family: 'Poppins', sans-serif;
    line-height: 38px;
    color: #24677e;
    margin-top: 20px;
    margin-bottom: 25px;
}

.steps {
    max-width: 350px;
    margin-left: 50px;
}

.steps ul {
    display: block;


    padding-left: 20px;
}

.steps ul li {
    display: flex;
    position: relative;
    /* border-right: 3px solid #fff; */
    padding-bottom: 16px;
    width: auto;
    opacity: 0;
    justify-content: flex-start;
    min-width: 400px;
}

.steps ul li:last-child {
    padding-bottom: 0px;
}

.steps ul li .text {
    background-color: #fff;
    padding: 17px 20px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    border-radius: 55px;
    font-size: 13px;
    color: #24677e;
    font-weight: 600;
    float: right;
    width: auto;
    line-height: 20px;
    max-width: 300px;

}

.steps ul li .text img{
    width: 34px;
}

.steps ul li.step2 .text {
    max-width: 300px;
    /* margin-right: -20px; */
}

.steps ul li.step3 .text {
    max-width: 300px;
}

.steps ul li.step4 .text {
    max-width: 300px;
    /* margin-right: -30px; */
}

.steps ul li.step5 .text {
    max-width: 300px;
}

.steps ul li .number {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 100%;
    border: solid 3px #fdbe2b;
    font-size: 11px;
    color: #24677e;
    font-weight: 600;
    position: absolute;
    top: -12px;
    right: -16px;
    box-shadow: 0 3px 20px rgb(12 54 70 / 30%) !important;
}

.content-block .demo {
    width: 50%;
    display: flex;
    background-color: #fdbe2b;
    height: 650px;
    border-radius: 0 80px 0 0;
    background-image: url("assets/images/bg-demo-home.webp");
    background-clip: border-box;
    background-origin: padding-box;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    justify-content: flex-end;
    color: #24677e;
}

.content-block .demo h3 {
    font-size: 35px;
    color: #24677e;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 24px;
    max-width: 455px;
}

.content-block .demo ul {
    display: flex;
    margin: 0;
    padding: 0;
    margin-bottom: 24px;
    max-width: 455px;
    flex-direction: column;
    list-style-image: url("assets/images/check.webp");
    padding-left: 24px;
}

.content-block .demo ul li {

    font-size: 15px;
    font-weight: 700;
    height: 30px;
    align-items: center;

}

.content-block .testimonials {
    min-height: 520px;
    height: auto;

}

.content-block .testimonials .list {
    padding: 0px 20px 0;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.content-block .testimonials .list li {
    
    background: url("assets/images/quote.webp");
    background-repeat: no-repeat;
    background-position: 0px 40px;
    background-size: 40px;
    display: none;
    width: 30%;

    height: auto;
    padding-top: 70px;
}

.content-block .testimonials .list li p {
    font-size: 16px;
    color: #24677e;
    line-height: 26px;
    letter-spacing: 0.5px;
    margin-bottom: 30px;
}

.content-block .testimonials .list li .name {
    color: #24677e;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.content-block .testimonials .list li .position {
    font-size: 12px;
    color: #24677e;
}

.content-block .testimonials .list li.show {
    display: block;
}

.content-block .testimonials .pagination {
    display: flex;
    padding-left: 115px;
    margin-bottom: 60px;
}

.content-block .testimonials .pagination li {
    display: flex;
    cursor: pointer;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: #24677e;
    opacity: 0.4;
    margin-right: 8px;
}

.content-block .testimonials .pagination li.selected {
    color: #fdbe2b;
    border-bottom: solid 2px #fdbe2b;
    opacity: 1;
}

.half-container {
    justify-content: flex-start;
    flex-direction: column;
    max-width: 655px;
    width: 100%;
    padding-top: 180px;

    padding-left: 40px;

}

.blog .posts {
    margin-top: 20px;
    height: 450px;
    display: flex;
    justify-content: space-between;
}

.blog .posts .post {
    max-width: 310px;
    width: 25%;
    display: block;
    flex-direction: column;
    text-decoration: none;
    color: #24677e;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #d8e4e6;
    min-height: 390px;
    height: auto;
    transition: all ease 0.4s;
    opacity: 0;
    margin-right: 20px;
}

.blog .posts .post:last-child {
    margin-right: 0;
}

.blog .posts .post:hover {
    box-shadow: 0 30px 60px rgb(14 71 86 / 10%);
    height: auto;
    padding-bottom: 80px;
}

.blog .posts .post .image {
    width: 310px;
    height: 210px;
    overflow: hidden;
    border-radius: 0px;
    max-height: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog .posts .post img {
    width: 310px;
    transition: all ease 0.3s;

}

.blog .posts .post:hover img {
    width: 330px;

}

.blog .posts .post .text {
    padding: 12px 18px 21px !important;

}

.blog .posts .post .text .date {
    height: 26px;
    text-transform: capitalize;
}

.blog .posts .post .text h4 {
    font-size: 15px;
    margin-bottom: 7px;
}

.blog .posts .post .text p {
    font-size: 14px;
    line-height: 22px;
}

.blog .posts .post .more {
    height: 0;
    width: 150px;
    opacity: 0;
    transition: all ease 0.3s;
    padding: 12px 18px 21px !important;
    font-size: 12px;
    color: #fdbe2b;
    font-weight: 500;
}

.blog .posts .post:hover .more {
    width: 150px;
    height: auto;
    opacity: 1;
}

.blog-page .posts {
    min-height: 450px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 40px 0;
}

.blog-page .post {
    flex: 0 0 calc(25% - 23px);
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: #333;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Efeito de animação bottomTop */
.blog-page .post.bottomTop {
    animation: bottomTop 0.8s ease-in-out;
}

@keyframes bottomTop {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Efeito hover */
.blog-page .post:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Imagem do post */
.blog-page .post .image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.blog-page .post .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-page .post:hover .image img {
    transform: scale(1.05);
}

/* Conteúdo de texto */
.blog-page .post .text {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-page .post .date {
    font-size: 14px;
    color: #24677e;
    margin-bottom: 10px;
    font-weight: 500;
}

.blog-page .post h4 {
    font-size: 18px;
    font-weight: 600;
    color: #24677e;
    margin-bottom: 15px;
    line-height: 1.4;
}

.blog-page .post p {
    font-size: 15px;
    line-height: 1.5;
    color: #24677e;
    margin: 0;
}

/* Botão "Read more" */
.blog-page .post .more {
    background-color: #1d6e7c;
    color: white;
    padding: 12px 20px;
    text-align: center;
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    border-radius: 8px;
}

.blog-page .post:hover .more {
    opacity: 1;
    transform: translateY(0);
}

.blog .go-to-blog{
    padding: 20px 0px 0px;
    text-align: right;
}

.blog-home .go-to-blog{
    padding: 0 10px 20px 10px;
    text-align: right;
}

.blog .go-to-blog a,
.blog-home .go-to-blog a{
    font-size: 16px;
    color: #24677E;
    text-decoration: none;
}

.blog .go-to-blog a span:last-child,
.blog-home .go-to-blog a span:last-child{
    color: #FDBE2B;
    font-size: 18px;
    font-weight: 600;
}

.icon-size-small{
    font-size: 12px !important;
}

.blog-featured .container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-top: 100px;
    padding-bottom: 100px;


}

.blog-featured .image {
    overflow: hidden;
    max-width: 680px;
    width: 50%;
    height: 310px;
    border-radius: 5px;
    display: block;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 0;
    transition: all ease 0.3s;
}

.blog-featured .image:hover {
    box-shadow: 0 30px 60px rgb(0 0 0 / 17%);
    margin-top: 0;
    margin-bottom: 10px;
}

.blog-featured .image img {
    width: 100%;
    height: auto;
}

.blog-featured .text {
    margin-top: 10px;
    padding: 25px 7%;
    width: 50%;
    max-width: 500px;
}

.blog-featured .text a {
    text-decoration: none;
    color: #24677e;
}

.blog-featured .text h3 {
    font-size: 32px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    margin-bottom: 20px;
    color: #24677e;
    line-height: 42px;
}

.blog-featured .text p {
    font-size: 15px;
    line-height: 30px;
    color: #24677e;
    font-family: 'Poppins', sans-serif;
}

.blog-featured .author {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}

.blog-featured .author img {
    margin-right: 12px;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 100%;
}

.blog-featured .author .info {
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.blog-featured .author .info .name {
    font-size: 14px;
    color: #24677e;
    margin-bottom: 2px;
}

.blog-featured .author .info .date {
    font-size: 13px;
    color: #24677e;
}

.single {
    position: relative;
    z-index: 1;
    height: 550px;
}

.single .feat {
    filter: brightness(0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background-position: center center;
}

.single .text h1 {
    font-size: 46px;
    width: 100%;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    font-weight: 700;
    z-index: 2;
}

.single-blog {
    background-color: #fff;
    margin: 0;
    padding-top: 50px;
    padding-bottom: 50px;
}

.single-blog .container {
    max-width: 1000px;
}

.single-blog .post-header {
    justify-content: space-between;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
}

.single-blog .post-header .author {
    display: flex;
    flex-direction: row;


}

.single-blog .post-header .author img {
    margin-right: 12px;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 100%;
}

.single-blog .post-header.author .info {
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.single-blog .post-header .author .info .name {
    font-size: 14px;
    color: #24677e;
    margin-bottom: 2px;
}

.single-blog .post-header .author .info .date {
    font-size: 13px;
    color: #24677e;
}

.single-blog .post-header .share {
    display: flex;
}

.single-blog .post-footer {
    justify-content: flex-end;
    margin-top: 50px;
    display: flex;
    align-items: center;
}

.formatted-content {
    color: #24677e;
}

.formatted-content p {
    color: #24677e;
    font-size: 15px;
    line-height: 30px;
    margin-bottom: 22px;
}

.formatted-content h1 {
    font-size: 48px;
    margin-bottom: 22px;
}

.formatted-content h2 {
    font-size: 42px;
    margin-bottom: 22px;
}

.formatted-content h3 {
    font-size: 36px;
    margin-bottom: 22px;
}

.formatted-content h4 {
    font-size: 28px;
    margin-bottom: 22px;
}

.formatted-content h5 {
    font-size: 22px;
    margin-bottom: 22px;
}

.formatted-content h6 {
    font-size: 18px;
    margin-bottom: 22px;
}

.formatted-content h7 {
    font-size: 16px;
    margin-bottom: 22px;
}

.formatted-content ul, ol {
    margin-left: 40px;
    margin-bottom: 32px;
}

.formatted-content ul li, .formatted-content ol li {
    font-size: 15px;
    margin-bottom: 12px;
}

/* Footer */
#site-footer {
    display: flex;
    width: 100%;
    height: auto;
    background-color: #0c3646;
    padding-top: 75px;
    padding-bottom: 75px;
    justify-content: center;
    position: relative;
}

#site-footer .container {
    justify-content: space-between;
    gap: 20px;
}

#site-footer .block {
}

#site-footer .block .languages {
    display: flex;
    margin-top: 30px;
}

#site-footer .block .languages a {
    display: block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    margin-right: 10px;
    opacity: 0.5;
}

#site-footer .block .languages a.active, #site-footer .block .languages a:hover {
    opacity: 1;
}

#site-footer .block .languages a.en {
    background-image: url("assets/images/en.webp");
}

#site-footer .block .languages a.es {
    background-image: url("assets/images/es.webp");
}

#site-footer .block .languages a.pt {
    background-image: url("assets/images/br.webp");
}


#site-footer .block h4 {
    color: #FADC67;
    font-size: 14px;
    font-weight: 400;
}

#site-footer .block h4 a {
    color: #F9FBF4;
    text-decoration: none;
}

#site-footer .block h4 a:hover {
    color: #fdbe2b;
}

#site-footer .block .separator {
    margin-top: 20px;
    margin-bottom: 20px;
    background-image: url("assets/images/zigzag-1.svg");
    display: block;
    width: 25px;
    height: 10px;
    background-repeat: no-repeat;
}

#site-footer .block li {
    display: flex;
    height: 40px;
    align-items: center;
}

#site-footer .block li a {
    color: #b0c8d0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

#site-footer .block li a:hover {
    color: #fdbe2b;
}

#site-footer .block .social {
    display: flex;
    margin-top: 30px;
}

#site-footer .block .social a {
    display: block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    margin-right: 10px;
    opacity: 0.7;
}

#site-footer .block .social a:hover {
    opacity: 1;
}

#site-footer .block .social a.facebook {
    background-image: url("assets/images/facebook.svg");
    filter: brightness(0) invert(1);
}

#site-footer .block .social a.instagram {
    background-image: url("assets/images/instagram.svg");
    filter: brightness(0) invert(1);
}

#site-footer .block .social a.youtube {
    background-image: url("assets/images/youtube.svg");
    filter: brightness(0) invert(1);
}

#site-footer .block .social a.twitter {
    background-image: url("assets/images/twitter.svg");
    filter: brightness(0) invert(1);
}

#site-footer .block .social a.twitterx{
    background-image: url("assets/images/twitterx.svg");
    filter: brightness(0) invert(1);
}

#site-footer .block .social a.linkedin {
    background-image: url("assets/images/linkedin.svg");
    filter: brightness(0) invert(1);
}

#site-footer .block .social a.tiktok {
    background-image: url("assets/images/tiktok.svg");
    filter: brightness(0) invert(1);
}


.share {
    display: flex;

}

.share a {
    display: block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    margin-right: 6px;
    opacity: 0.7;
}

.share a:hover {
    opacity: 1;
}

.share a.facebook {
    background-image: url("assets/images/facebook.svg");
    filter: brightness(2) invert(1);
}

.share a.instagram {
    background-image: url("assets/images/instagram.svg");

}

.share a.whatsapp {
    background-image: url("assets/images/whatsapp.svg");

}

.share a.twitter {
    background-image: url("assets/images/twitterx.svg");
    filter: brightness(2) invert(1);
}

.share a.linkedin {
    background-image: url("assets/images/linkedin.svg");

}

#to-top {
    background-image: url("assets/images/back-to-top-green.svg");
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain;
    cursor: pointer;
    transition: all ease 0.2s;
    position: absolute;
    top: -25px;
    z-index: 99999;
}

#to-top:hover {
    width: 56px;
    height: 56px;
    top: -28px;
}

#modal-form {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    justify-content: center;
    align-items: center;
    opacity: 0;
    z-index: 150;
}

#modal-form .form-box {
    width: 570px;
    height: auto;
    padding: 44px;
    background-color: #f1f5f6;
    border-radius: 15px;
    z-index: 151;
    transition: all ease 0.4s;
    position: relative;
}

#modal-form .form-box .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background-image: url("assets/images/close.webp");
    background-repeat: no-repeat;
    background-size: 30px 30px;
    cursor: pointer;
    background-color: #fdbe2b;
    border-radius: 100%;

}

#modal-form .form-box .close svg path {
    fill: #24677e;
}

#modal-form .overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #24677e;
    opacity: 0;
    z-index: 150;
    cursor: pointer;
    transition: all ease 0.4s;
}

#modal-form.show {
    display: flex;
    opacity: 1;
}


#modal-form.show .overlay {
    opacity: 0.95;
}


#modal-video {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    justify-content: center;
    align-items: center;
    opacity: 0;
    z-index: 150;
}

#modal-video .video-box {
    width: 80%;
    aspect-ratio: 16/9;
    padding: 44px;
    display: flex;

    z-index: 151;
    transition: all ease 0.4s;

}

#modal-video .video-box {

}

#modal-video .video-box .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background-image: url("assets/images/close.webp");
    background-repeat: no-repeat;
    background-size: 30px 30px;
    cursor: pointer;
    background-color: #fdbe2b;


}

#modal-video .video-box .close svg path {
    fill: #24677e;
}

#modal-video .overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #24677e;
    opacity: 0;
    z-index: 150;
    cursor: pointer;
    transition: all ease 0.4s;
}

#modal-video.show {
    display: flex;
    opacity: 1;
}


#modal-video.show .overlay {
    opacity: 0.95;
}

#site-content .the-content button.noButton {
    background-color: transparent !important;
    opacity: 1;
    color: #fdbe2b !important;
    padding: 10px 0px !important;
    border-bottom: solid 2px #fdbe2b;
    border-radius: 0;
}

#site-content .the-content.white button:hover .icon {
    display: none;
}

#site-content .content-block.newsletter .befective-button {
    background-color: #fff !important;
    margin: 0 !important;
    font-size: 16px !important;
    color: #24677e !important;
    padding: 0px 32px !important;
    height: 58px;
}

#site-content .the-content.produto {
    width: 100%;
    margin-left: 95px;
    padding-top: 100px;
}

#site-content .the-content.produto h4 {
    font-size: 35px;
    line-height: 46px;
    font-weight: 700;
    color: #24677e;
    margin-bottom: 20px;
    font-weight: 400;
}

#site-content .the-content.produto h4 b {
    font-weight: 600;
}

#site-content .the-content.produto ul {
    display: flex;
    padding: 0;
    margin: 16px 0;

    flex-direction: column;
    list-style-image: url("assets/images/check2.webp");
    padding-left: 24px;
}

#site-content .the-content.produto ul li {
    padding-left: 18px;
    font-size: 15px;
    font-weight: 700;
    height: auto;
    align-items: center;
    margin-bottom: 6px;

}

#site-content .side {
    width: 275px;
    min-width: 275px;
    padding-top: 100px;
}

#site-content .side .breve {
    border-radius: 10px;

    height: 122px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin-bottom: 15px;
}

#site-content .side .breve h6 {
    font-size: 17px;
    color: #24677e;
    font-weight: 500;
    margin-top: 25px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 5px;
    padding-bottom: 20px;
    border-bottom: solid 1px #d9e6e9;
}

#site-content .side .breve .gestao {
    padding-left: 38px;
    border-left: solid 3px #fdbe2b;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 25px;
    margin-top: 15px;
    font-size: 15px;
    background: url("assets/images/em-breve-icon.svg");
    background-repeat: no-repeat;
    background-position: 18px center;
    background-size: contain;
    color: #24677e;
}

#site-content .side .breve .gestao span {
    font-size: 18px;
    color: #24677e;
}


#site-content .side .quote-produto {
    border-radius: 10px;
    border: solid 2px #d9e6e9;
    width: 100%;
    height: 122px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#site-content .side .quote-produto img {
    width: 55px;
    height: 61px;
    margin-left: 15px;
    margin-right: 15px;
}

#site-content .side .quote-produto p {
    font-size: 15px;
    line-height: 20px;
    color: #24677e;
    margin-right: 20px;

}

#site-content .side .quote-produto .name {
    font-size: 12px;
    line-height: 20px;
    color: #24677e;
    margin-top: 8px;
}

/* ANIMATION */
@keyframes wait {
    from {
        transform: translateY(20px);
    }
    to {
        transform: translateY(20px);
    }
}

@keyframes slideInLeftRight {
    from {
        transform: translateX(-150px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRightLeft {
    from {
        transform: translateX(150px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInBottomTop {
    from {
        transform: translateY(150px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes buttomExpand {
    from {
        transform: scaleX(0);

    }
    to {
        transform: translateY(10%);

    }
}

@keyframes slideInStep {
    from {
        transform: scaleX(0);

        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes popIn {
    from {

        opacity: 0;
    }
    to {

        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate.scaleIn {
    animation-name: scaleIn;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.animate.fadeIn {
    animation-name: popIn;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}


.animate.leftRight {
    animation-name: slideInLeftRight;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-timing-function: ease;
}

.animate.rightLeft {
    animation-name: slideInRightLeft;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-timing-function: ease;
}

.animate.bottomTop {
    animation-name: slideInBottomTop;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;

}

.animate.step {
    animation-name: slideInStep;
    animation-duration: 0.6s;
    animation-delay: 0s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    transform-origin: 100% 50%;
}


.animate.delay1 {
    animation-delay: 0.1s;
}

.animate.delay2 {
    animation-delay: 0.2s;
}

.animate.delay3 {
    animation-delay: 0.3s;
}

.animate.delay4 {
    animation-delay: 0.4s;
}

.wpcf7 {
    display: flex;
    max-width: 670px;
    width: 100%;
}

.wpcf7 form {
    max-width: 670px;
    width: 100%;
}

.wpcf7 form div {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    position: relative;
}

.wpcf7 form div label {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    color: #24677e;

}

.wpcf7 form div label span {
    padding-top: 4px
}

.wpcf7 form div label input {
    height: 40px;
    line-height: 40px;
    background-color: #f5f5f5;
    outline: none;
    border: solid 1px #fff;
    border-radius: 15px;
    padding: 0 15px;
    width: 100%;
    color: #24677e;
    font-size: 16px;
    line-height: 22px;
    max-width: 640px;
}

.wpcf7 form div label textarea {
    height: 90px;
    font-size: 16px;
    line-height: 22px;
    color: #24677e;
    background-color: #f5f5f5;
    outline: none;
    border: solid 1px #fff;
    border-radius: 15px;
    padding: 0 15px;
    width: 100%;
    max-width: 640px;
}

.wpcf7 form div label input:focus {
    border: solid 1px #fdbe2b;
    box-shadow: 0 0 10px rgb(0 0 0 / 11%);
}

.wpcf7 form p {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    justify-content: flex-end;
    flex-direction: row-reverse;
    justify-content: flex-start;
    flex-direction: row-reverse;
}

.wpcf7-submit {
    justify-self: flex-end;
    background: #fdbe2b;
    color: #6C5520 !important;
    margin-left: 10px;
    padding: 15px 20px !important;
    font-size: 15px;
    border-radius: 30px;
    font-weight: 500;
    opacity: 1;
    transition: all linear 0.1s;
    width: 170px;
    cursor: pointer;
    margin-top: 0;
    height: auto;
    border: none;
}

.wpcf7-not-valid-tip {
    position: absolute;
    right: 8px;
    top: 5px;
    font-size: 10px;
    color: #0c3646;
}

.wpcf7-response-output {
    background-color: #0c3646;
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: center;
    border: none !important;
    font-size: 15px;
    color: #fdbe2b;
    align-items: center;
    border-radius: 15px;
}

.formulario h4 {
    font-size: 35px;
    line-height: 46px;
    color: #24677e;
    font-weight: 400;
    margin-bottom: 15px;
    color: #24677e;
    max-width: 550px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.formulario h7 {
    font-size: 17px;
    line-height: 30px;
    color: #24677e;
    font-weight: 400;
    margin-bottom: 15px;
    color: #24677e;
    max-width: 550px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 80px;
}

.white-form .wpcf7 form div label input, .white-form .wpcf7 form div label textarea {
    border: solid 1px #cbd6e2;
    max-width: 530px;
}

.breve {
    padding: 3px 6px;
    background-color: #fddcb2;
    font-size: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

#menu-trigger {
    display: none;
}


.list-companies{
    display: flex;
    list-style: none;
    justify-content: space-evenly;
    margin: 54px 0px 72px;
    overflow: auto;
    gap: 10px;
    width: inherit;
}

.list-companies .item-list-companies img{
    width: 180px;
    height: 75px;
}

/* Estilização nova Home Page baseado no Wix */
.banner.home-page {
    background-image: url("assets/images/banner-home-page.webp");
    background-position: center 50px;
    background-size: cover;
    /* margin-bottom: 100px; */
}

.title-banner-home-page{
    font-size: 60px;
    line-height: 1.25em;
    color: #1E6B7F;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    margin-top: 80px;
}

.subtitle-banner-home-page{
    font-size: 18px;
    line-height: 1.7em;
    color: #1E6B7F;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    max-width: 600px;
    margin-top: 24px;
}

.banner-svg-mobile{
    display: none;
}

.banner-svg1{
    position: absolute;
    top: 150px;
    left: 150px;
}

.banner-svg2{
    position: absolute;
    left: 90px;
    bottom: 30px;
}

.banner-svg2 img{
    width: 360px;
}

.banner-svg3{
    position: absolute;
    top: 150px;
    right: 80px;
}

.banner-svg4{
    position: absolute;
    width: clamp(200px, 20vw, 300px);
    right: 130px;
    bottom: 60px;
}

.banner-svg4 img{
    width: auto;
}

.banner-svg1 img,
.banner-svg3 img{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.banner-svg1 img{
    width: clamp(90px, 9vw, 150px);
    border-radius: 50%;
}

.banner-svg3 img{
    width: clamp(150px, 14vw, 200px);
    border-radius: 20px;
}

.img-banner-animation{
    animation: float 2.5s ease-in-out;
}

@keyframes float{
    0%, 100%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-15px);
    }
}

.img-banner-animation-opacity{
    animation: fade 2.5s ease-in-out;
}

@keyframes fade{
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

.button-demo-schedule{
    font-family: 'Poppins', sans-serif;
    margin-top: 40px;
    display: flex;
    gap: 6px;
    background-color: #ffffff;
    color: #1E6B7F;
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 30px;
    font-weight: 600;
    opacity: 1;
    transition: all linear 0.3s;
    cursor: pointer;
    align-items: center;
    text-decoration: none;
}

.button-demo-schedule img{
    width: 28px;
    height: 28px;
}

.button-demo-schedule:hover{
    background-color: #FADC67;
    color: #22BEAD;
}

.button-free-trial{
    font-family: 'Poppins', sans-serif;
    margin-top: 40px;
    display: flex;
    background-color: transparent;
    color: #ffffff;
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 30px;
    font-weight: 600;
    border: 2px solid #ffffff;
    opacity: 1;
    transition: all linear 0.3s;
    cursor: pointer;
    align-items: center;
    align-self: center;
    text-decoration: none;
}

.befective-button-success {
    font-family: 'Poppins', sans-serif;
    margin-top: 40px;
    display: flex;
    background: #22BEAD;
    color: #FFFFFF;
    padding: 0px 32px !important;
    font-size: 16px;
    border-radius: 30px;
    font-weight: 600;
    opacity: 1;
    transition: all linear 0.3s;
    width: fit-content;
    cursor: pointer;
    height: 48px;
    align-items: center;
    text-decoration: none;
}

.befective-button-success:hover {
    background-color: #FADC67;
    color: #1E6B7F;
}

.befective-button-yellow {
    font-family: 'Poppins', sans-serif;
    margin-top: 40px;
    display: flex;
    background-color: #FADC67;
    color: #1E6B7F;
    padding: 0px 32px !important;
    font-size: 16px;
    border-radius: 30px;
    font-weight: 600;
    opacity: 1;
    transition: all linear 0.3s;
    width: fit-content;
    cursor: pointer;
    height: 48px;
    align-items: center;
    text-decoration: none;
}

.befective-button-yellow:hover {
    background-color: #22BEAD;
    color: #FFFFFF;
}

.befective-button-know-more{
    font-family: 'Poppins', sans-serif;
    margin-top: 18px;
    display: flex;
    background-color: transparent;
    color: #1E6B7F;
    padding: 0px 4px !important;
    font-size: 16px;
    border-radius: 30px;
    font-weight: 600;
    opacity: 1;
    transition: all linear 0.3s;
    width: fit-content;
    cursor: pointer;
    height: 48px;
    align-items: center;
    text-decoration: none;
    gap: 6px;
}

/* .befective-button-know-more:hover{
    background: #22BEAD;
    color: #FFFFFF;
} */

.befective-button-know-more .icon{
    display: flex;
    color: #FADC67;    
    transition: all linear 0.3s;
}

.befective-button-know-more:hover .icon{
    margin-left: 4px;
}

.content-block.custom-direction{
    z-index: 1;
    flex-direction: column;
    align-items: center;
}

.custom-title-center{
    font-weight: 900 !important;
    margin-bottom: 84px !important;
    line-height: 1.7em;
}

.custom-title-center-top{
    color: #22BEAD;
    text-align: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.custom-title-center b{
    font-weight: 700 !important;
    background-color: #FADC67;
    font-family: 'Poppins', sans-serif;
}

.custom-subtitle-center{
    color: #1E6B7F;
    text-align: center;
    font-size: 18px;
    margin: 16px 0px;
}

.custom-content-post{
    font-size: 20px;
    line-height: 1.7em;
    color: #1E6B7F;
    font-family: 'Poppins', sans-serif;
    max-width: 500px;
}

.box-cards-modules{
    display: flex;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: -20px;
    flex-wrap: wrap;
    justify-content: center;
}

.box-cards-modules a{
    text-decoration: none;
}

.box-cards-modules a img {
    transition: transform 0.3s ease; /* Transição suave */
}

.box-cards-modules a img:hover {
    transform: scale(1.05); /* Aumenta a escala em 10% no hover */
}

#box-img-section-2{
    justify-content: center;
}

#box-img-section-2 img{
    width: 450px;
}

.bg-gray{
    background-color: #eef1e3 !important;
    padding-top: 80px;
}

.solutions-page .bg-gray{
    background-color: #eef1e3 !important;
    padding-top: 0px;
}

.bg-green{
    background-color: #22BEAD !important;
}

.title-white{
    color: #ffffff !important;
    font-weight: 700 !important;
}

.content-block .container .list-items {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.content-block .container .list-items .item {
    width: 360px;
    min-width: 360px;
    height: 180px;
    margin-bottom: 28px;
}

.content-block .container .list-items .item .icon img {
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
}

.content-block .container .list-items .item h4{
    font-size: 16px;
    margin-bottom: 6px;
    color: #24677e;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6em;
}

.content-block .container .list-items .item h6 span{
    color: #fdbe2b;
}

.content-block .container .list-items .item p {
    font-size: 16px;
    line-height: 1.6em;
    color: #24677e;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.content-block .testimonials .list li.card {
    background-color: #ffffff;
    border-radius: 16px;
    background-image: none !important;
    padding: 10px;
    height: fit-content;
}

.content-block .testimonials .list li.card img{
    margin-left: 26px;
    margin-top: 24px;
    margin-bottom: -16px;
}

.content-block .testimonials .list li.card p{
    margin-left: 28px;
    margin-right: 28px;
    font-size: 14px;
}

.content-block .testimonials .list li.card .name{
    text-align: center;
    font-size: 14px;
}

.content-block .testimonials .list li.card .position{
    text-align: center;
    margin-bottom: 24px;
    font-size: 14px;
}

.mb-0{
    margin-bottom: 0px !important;
}

.mt-64{
    margin-top: 64px !important;
}

.mt-medium{
    margin-top: 80px !important;
}

.mb-medium{
    margin-bottom: 64px;
}

.the-content.maximize h2{
    font-size: 26px;
    font-weight: 700;
}

.the-content.maximize div p{
    font-size: 16px;
}

.the-content.maximize div ul,
.the-content.maximize ul{
    margin-top: 10px;
    margin-left: 24px;
}

.box-video{
    width: 80%;
    aspect-ratio: 16/9;
    padding: 44px;
    display: flex;
    transition: all ease 0.4s;
    margin-bottom: 32px;
}

.box-selos{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 64px 0px;
}

.box-selos img{
    max-width: 70vw;
    max-height: 11vw;
}

.box-selos.mobile{
    display: none;
}

.tabs {
    display: flex;
    gap: 20px;
    background-color: #EEF1E3;
    border-radius: 36px;
    width: 60%;
    justify-content: space-between;
    padding: 5px;
}

.tab {
    color: #1E6B7F;
    font-size: 16px;
    padding: 16px 28px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 36px;
}

.tab.active {
    background-color: #fedd75;
    font-weight: bold;
}

.tab-content {
    display: none;
    padding: 20px;
    border-radius: 10px;
}

.tab-content.active {
    display: flex;
}

.card-gray{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    border-radius: 16px;
    padding: 32px;
    background-color: #EEF1E3;
    max-width: 600px;
    margin: 0px 32px;
    height: 100px;
}

.card-gray h4{
    color: #1E6B7F;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 12px;
}

.card-gray p{
    color: #1E6B7F;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px; /* 166.667% */
}

#banner-ai{
    display: flex;
    align-items: center;
    max-width: 96%;
    border-radius: 32px;
    background: url('assets/images/bg-banner-ai.svg') lightgray 50% / cover no-repeat;
}

#banner-ai .box-img-girl{
    display: flex;
    justify-content: center;
    width: 50%;
    margin-top: 40px;
}

.position-relative{
    position: relative;
}

.container-bottom-absolute{
    position: absolute;
    height: 300px;
    width: 100%;
    bottom: -200px;
    z-index: -1;
}

.content-block.section-video {
    background-color: #FADC67;
    height: 360px;
}

.content-block.section-video .container-video{
    display: flex;
    align-items: center;
    gap: 80px;
}

.content-block.section-video .container-video .the-content{
    width: 50%;
}

.content-block.section-video .container-video .the-content h2{    
    color: #1E6B7F;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
    margin-bottom: 45px;
    max-width: 520px;
}

.content-block.section-video .container-video .box-iframe-video{
    text-align: center;
    width: 50%;
}

.box-buttons-video{
    display: flex;
    gap: 20px;
}

.box-buttons-video a{
    display: flex;
    padding: 0px 32px !important;
    font-size: 16px;
    border-radius: 30px;
    font-weight: 600;
    opacity: 1;
    transition: all linear 0.3s;
    width: fit-content;
    cursor: pointer;
    height: 48px;
    align-items: center;
    text-decoration: none;
}

.box-buttons-video .button-success{
    background: #22BEAD;
    color: #FFFFFF;
}

.box-buttons-video .button-white{
    background-color: #ffffff;
    color: #1E6B7F;
}

.slider {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin-bottom: 64px;
}

.solutions-page .slider {
    margin-bottom: 64px !important;
}

.slider-items {
    display: flex;
    align-items: center;
    gap: 10px;
    animation: scrolling 20s linear infinite;
}

@keyframes scrolling {

    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.slider-items img {
    width: 24%;
    height: 72px;
    margin: 16px;
}

/* Global Elements */

.h1-blue{
    font-family: "Poppins", monospace;
    font-weight: 700;
    font-size: clamp(20px, 4vw, 40px);
    text-align: left;
    color: #1E6B7F;
}

/* MOBILE */
@media screen and (max-width: 768px) {

    .content-block .list-solucoes .item{
        padding-bottom: 80px;
    }

    .content-block .list-solucoes .item .text h4{
        font-size: 18px;
        line-height: 28px;
        margin-top: -50px;
    }

    .content-block .list-solucoes .item .text p{
        font-size: 16px;
    }

    .content-block .list-solucoes .item .image img{
        margin-top: 48px;
    }

    .content-block .list-solucoes .item.column-reverse{
        flex-direction: column-reverse;
    }
    .simple-banner{
        margin-top: 80px;
    }

    .simple-banner.product{
        height: 300px;
    }
    
    .simple-banner .content h1{
        font-size: 24px;
        line-height: 44px;
    }

    .slider {
        margin-bottom: 10px;
    }

    .box-center-h2.custom-h2{
        margin-top: 20px;
    }

    .list-companies .item-list-companies img{
        width: 120px;
        height: 64px;
    }

    .list-companies{
        margin: 20px 0px 52px;
    }

    #menu-trigger {
        display: block;
        color: #fff;
        cursor: pointer;
        padding: 8px;
        z-index: 11;
    }

    #menu-trigger span {
        font-size: 36px;
    }

    header .main-menu, header .secondary-menu {
        display: none;
    }
	
	header.aberto .main-menu, header.aberto .secondary-menu {
		display: flex;
	}

    header {
        align-items: center;
        z-index: 999999;
        height: auto;
    }

    header.aberto {
        position: fixed;
        width: 100% !important;
        height: 100% !important;
        flex-direction: column;
        background-color: rgb(36 103 126 / 0.95);
        top: 0;
        left: 0;
        z-index: 10;
        justify-content: flex-start !important;
        padding-top: 20px !important;
    }

    header .logo {
        z-index: 11;
		min-height: 55px;
    }

    header .main-menu {
        position: absolute;
        top: 20px;
        left: 0;
    }

    header .secondary-menu {
        position: absolute;
        bottom: 40px;
        left: 5%;
        flex-direction: column;
    }

    header .secondary-menu button {
        margin-top: 20px !important;
    }

    header .main-menu ul, header .secondary-menu ul {
        flex-direction: column;

    }

    header .main-menu ul li, header .secondary-menu ul li {
        height: auto !important;
    }


    /* header .main-menu ul li a, header .secondary-menu ul li a {
        color: #fff !important;
        opacity: 1 !important;
    } */

    header .main-menu ul .sub, header .secondary-menu ul .sub {
        display: flex;
        height: auto !important;
        opacity: 1 !important;
        position: relative !important;
        top: inherit !important;
        left: inherit !important;
        background-color: transparent !important;
        padding: 0 !important;
        width: inherit !important;
        box-shadow: none !important;

    }

    header .main-menu ul .sub ul, header .secondary-menu ul .sub ul {
        height: auto !important;
        width: inherit !important;
    }

    header .secondary-menu ul li {
        margin-top: 20px !important;
    }

    header .label {
        display: none !important;
    }

    header .main-menu ul li {
        margin-top: 15px !important;
    }

    header .main-menu ul li a {
        font-size: 20px !important;
        color: white;
    }

    header .main-menu ul .sub ul li, header .secondary-menu ul .sub ul li {
        margin-top: 15px !important;
        margin-bottom: 0 !important;
    }

    .banner .text h4{
        width: auto;
        font-size: 16px;
    }
    
    .steps{
        margin-left: 0px;
        width: 100%;
    }

    .steps ul{
        padding-left: 0px;
    }

    .steps ul li{
        min-width: auto;
    }

    .container {
        flex-direction: column !important;
        max-width: 100% !important;
        width: 80% !important;
        padding-right: 5% !important;
        padding-left: 5% !important;
    }

    .container .list {
        margin-top: 40px !important;
    }

    .container .list .item {
        width: 100% !important;
        min-height: 180px;
        height: auto !important;
        margin-bottom: 30px;
    }

    .the-content, .feature-image {
        width: 100% !important;
        height: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex;
        align-items: center;
    }

    .home2 .the-content {
        background-image: none !important;
    }

    .home2 .the-content button {
        margin-bottom: 30px;
    }

    .home3 .container {
        justify-content: center !important;
    }

    .content-block {
        min-height: 185px;
        margin-bottom: 50px;
        flex-direction: column;
        align-items: center;
    }

    .content-block.no-margin {
        margin-bottom: 0 !important;
    }

    .content-block.contato .list .item h5{
        font-size: 16px;
        margin-top: 16px;
        margin-bottom: 16px;
    }
    
    .content-block.contato .text{
        margin-top: 16px;
    }

    .content-block.contato .text img{
        width: 80px;
        height: 80px;
    }
    .content-block.contato .text p{
        font-size: 14px;
        line-height: 22px;
    }

    .the-content h2, .content-block h2 {
        font-size: 18px !important;
        line-height: 26px !important;
        margin-top: 20px !important;
        margin-bottom: 32px !important;
        text-align: center;

        /* max-width: 320px; */
    }

    .banner .text h1 {
        width: 80% !important;
        font-size: 20px !important;
        line-height: 34px !important;
    }

    button.video {

        min-width: 80px !important;
        max-width: 80px !important;
        width: 80px !important;
        height: 80px !important;
        border-radius: 100% !important;
    }

    .banner {
        background-size: cover;
        background-position: center !important;
    }

    .banner.home {
        height: 525px !important;
    }

    .banner.home2 {
        height: 800px !important;
    }

    .content-block.blog {
        padding-top: 10px;
        padding-bottom: 50px;
    }

    .content-block.blog .posts {
        flex-direction: column;
        height: auto;
    }

    .content-block.blog .posts .post {
        width: 100% !important;
        max-width: inherit !important;
        margin-bottom: 30px;
    }

    .blog .posts .post:hover {
        padding-bottom: 0 !important;
    }

    .content-block.blog .posts .post .image {
        width: 100% !important;
    }

    .content-block.blog .posts .post img {
        width: 100%;
    }

    .blog .posts .post .more {
        width: 150px;
        height: auto;
        opacity: 1;
    }

    .demo {
        width: 90% !important;
        margin-right: 5% !important;
        margin-left: 5% !important;
        border-radius: 40px !important;
        height: auto !important;
    }

    .demo .half-container {
        padding: 40px !important;
    }

    .demo .half-container ul li {
        margin-bottom: 10px;
    }

    .testimonials {
        /* width: 90% !important; */
        /* margin-right: 5% !important;
        margin-left: 5% !important; */
        height: auto !important;
        min-height: inherit !important;

    }

    .testimonials .list {
        padding: 0px !important;
        padding-top: 0px !important;
        background-position: 0px 70px !important;
        margin-top: 0px !important;
    }

    .testimonials .pagination {
        margin-top: 30px !important;
        padding-left: 0 !important;
    }

    .content-block .testimonials .list li{
        padding-top: 24px;
        background-size: 32px;
        background-position: 10px 16px;
    }

    .testimonials .list .show {
        width: 100% !important;
        background-color: #fff !important;
        padding: 8px;
        margin-bottom: 10px;
        border-radius: 8px !important;
    }

    footer .languages {
        margin-bottom: 40px !important;
    }

    header .container {
        flex-direction: row !important;
        align-items: flex-start;
        justify-content: space-between;
    }

    header.aberto .container{
        justify-content: flex-end !important;
    }

    .banner.contato .container .text {
        width: auto;    
    }

    .content-block.newsletter .text{
        font-size: 16px;
        background-size: 54px 54px;
        padding-left: 0px;
        padding-top: 50px;
        background-position: top;
        text-align: center;
    }
    .content-block .list-solucoes.column .item .image,
    .content-block .list-solucoes .item .text,
    .content-block .list-solucoes .item .image{
        width: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 0 !important;
    }

    .banner.interno.blog .container{
        justify-content: center;
    }
    .banner.blog .container .text{
        align-items: center;
    }

    .blog-featured .text,
    .blog-featured .image{
        width: auto;
    }

    .banner-svg1,
    .banner-svg2,
    .banner-svg3,
    .banner-svg4{
        display: none;
    }

    .banner-svg-mobile{
        display: block;
        margin-top: 32px;
    }

    .banner-svg-mobile img{
        width: 300px;
    }

    .title-banner-home-page{
        font-size: 24px;
        max-width: 300px;
        margin-top: 130px;
        margin-bottom: 10px;
    }

    .subtitle-banner-home-page{
        font-size: 14px;
    }

    .button-demo-schedule {
        margin-top: 24px;
    }
    
    .custom-title-center-top{
       max-width: 340px;
       max-height: 60px;
    }

    .box-selos.desktop{
        display: none;
    }

    .box-selos.mobile{
        display: flex;
    }

    .box-selos.mobile img{
        max-width: 300px;
        max-height: fit-content;
    }
    
    /* .content-block.custom-direction{
        margin-top: 32px !important;
    } */

    .hide{
        display: none !important;
    }

    #whatsapp-button{
        bottom: 80px !important;
        right: 8px !important;
    } 

    .box-center-h2{
        width: 100%;
    }
    
    .w-790,
    h2.center.w640,
    h2.center.w580{
        width: auto !important;
    }

    .banner.home-page{
        margin-bottom: 0px;
    }

    .custom-content-post{
        font-size: 14px;
    }

    .befective-button-success,
    .befective-button-know-more{
        width: auto;
        margin-bottom: 24px;
        justify-content: center;
    }

    #box-img-section-2 img{
        margin-bottom: 64px;
    }
    
    .bg-gray{
        padding-top: 32px;
        min-height: auto;
    }

    .content-block .container .list-items .item{
        height: auto;
    }

    .content-block .container .list-items .item p{
        font-size: 14px;
    }

    .custom-title-center-top{
        font-size: 14px;
        margin-bottom: 0px;
    }

    .content-block.custom-direction.mb-0.mt-medium{
        margin-top: 32px !important;
        min-height: auto;
    }

    .content-block.mb-0.mt-medium{
        margin-top: 0px !important;
    }
    
    .the-content.maximize h2{
        font-size: 16px !important;
        margin: 0px 0px 24px !important;
    }

    .the-content.maximize div p{
        font-size: 14px;
    }

    #maximize-okr-container{
        flex-direction: column-reverse !important;
    }

    .content-block .container .feature-image img{
        margin-bottom: 64px;
    }

    .box-video{
        padding: 0px;
    }

    .content-block.newsletter{
        min-height: 250px;
    }

    .custom-subtitle-center{
        font-size: 14px !important;
        margin: 0px;
    }

    .box-cards-modules{
        gap: 80px;
    }

    .box-cards-modules a img{
        width: 100%;
    }

    .logos{
        padding: 24px 0px;
    }

    .logos-slide img{
        margin: 0px 10px;
    }

    .tabs{
        width: 100%;
        gap: 10px;
        overflow-x: auto;
        margin-bottom: 20px;
    }

    .tab{
        text-wrap: nowrap;
        padding: 6px 10px;
    }

    .the-content p{
        text-align: justify;
        font-size: 14px;
    }

    .card-gray{
        width: 80%;
        margin-bottom: 42px;
        height: auto;
    }

    .card-gray h4{
        font-size: 16px;
    }

    .card-gray p{
        font-size: 14px;
    }

    #banner-ai{
        max-width: 100%;
        flex-direction: column;
        margin-bottom: 32px;
    }

    /* #banner-ai .the-content.maximize{
        padding: 32px !important;
    } */

    #banner-ai .the-content.maximize h2{
        line-height: 16px;
        margin: 32px 24px !important;
    }

    #banner-ai .the-content.maximize p{
        margin: 0px 32px;
        text-align: justify;
        font-size: 14px;
    }

    #banner-ai .the-content.maximize .befective-button-success{
        margin: 24px 24px 0px;
    }

    #banner-ai .box-img-girl{
        width: 100%;
        margin: 0;
    }

    #banner-ai .box-img-girl img{
        width: 250px;
    }

    .content-block.section-video{
        height: auto;
        padding: 24px;
    }

    .content-block.section-video .container-video{
        gap: 30px;
    }

    .content-block.section-video .container-video .the-content .box-buttons-video{
        flex-direction: column;
        align-items: center;
    }

    .content-block.section-video .container-video .box-iframe-video{
        width: 100%;
    }

    .content-block.section-video .container-video .box-iframe-video iframe{
        width: 100%;
        height: 170px;
    }

    .custom-title-center{
        font-size: 16px !important;
        margin-bottom: 0px !important;
    }

    .h1-blue{
        text-align: center;
    }

    .product-module .banner.interno.produto {
        height: fit-content !important;
        margin-top: 90px;
    }

    .product-module .container-header{
        width: 100vw !important;
        margin-top: 20px;
        flex-direction: column;
        justify-content: space-between !important;
    }

    .product-module .banner .header-image{
        width: 80%;
        display: flex;
        justify-content: center !important;
        align-self: center !important;
    }

    .product-module .header-image .img-banner-animation{
        display: none;
    }

    .product-module .header-image img {
        width: 100%;
        max-height: 300px;
        object-fit: contain;
    }

    .product-module h1.description {
        width: 90vw !important;
        font-size: 24px !important;
    }

    .product-module h2.title {
        font-size: 20px !important;
    }

    .product-module .header-button-container {
        justify-content: space-evenly !important;
        flex-direction: column;
    }

    .product-module .button-free-trial{
        width: 148px !important;
        height: 50px !important;
        font-size: 14px !important;
    }

    .product-module .button-demo-schedule{
        width: 148px !important;
        height: 50px !important;
        font-size: 14px !important;
    }

    .product-module .product-container{
        padding-top: 0 !important;
    }

    /* .product-module .product-container .content{
        margin-bottom: 1000px !important;
    } */

    .product-module .custom-direction{
        padding-top: 0 !important;
    }

    .product-module .product-container .content h1 {
        font-size: 18px !important;
        width: 95vw;
        margin-bottom: 40px !important;
    }

    .product-module .aux-relative-to-tab-container{
        width: 90vw !important;
    }

    .product-module .tabs-container {
        width: 90vw !important;
        font-size: 12px !important;
        height: 36px !important;
        overflow-x: auto;
        overflow-y: none;
        gap: 20px;
        margin-bottom: 500px !important;
    }

    .product-module .tabs-container input + label > .tab-content{
        top: 46px !important;
        flex-direction: column;
    }

    .product-module .tabs-container .tab-name {
        padding: 5px 20px;
    }

    .product-module .tabs-container input + label > .tab-name {
        width: 120px
    }

    .product-module .tab-content .text .title {
        font-size: 20px !important;
    }

    .product-module .itens-container .title {
        width: 90vw !important;
        font-size: 18px !important;
    }

    .product-module .itens-container .card{
        width: 90% !important;
    }

    .product-module .container-common-questions .list {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .product-module .container-common-questions .list ul li{
        width: 90vw !important;
    }

    .product-module .container-common-questions .list ul li h5 {
        font-size: 14px !important;
    }


    .product-module .container-common-questions .list ul li .text {
        width: 100% !important;
        font-size: 13px !important;
    }

    .product-module .content-common-questions{
        gap: 20px !important;
        flex-direction: column-reverse;
    }

    .product-module .container-common-questions .title{
        margin-bottom: 20px !important;
    }

    .product-module .content-free-trial{
        width: 90% !important;
        flex-direction: column !important;
    }

    .product-module .content-free-trial a.btn-free-trial{
        width: 120px !important;
        font-size: 12px !important;
    }

    .product-module .itens-container .cards .description{
        width: auto !important;
    }

    .product-module .header-image.center-image{
        margin-bottom: 0px !important;
    }

    .product-projects-main-content {
        flex-direction: column;
    }

    .plans-page .products-list-container .products-list-content{
        flex-direction: column;
    }

    .plans-page .common-questions-container .questions-container {
        grid-template-columns: 1fr !important;
    }
    
    .plans-page .common-questions-container .title {
        font-size: 28px !important;
    }

    .banner-contato .content{
        flex-direction: column;
    }

    .content-block.faq .container .list ul li{
        padding-top: 0px;
        padding-bottom: 16px;
    }

    .content-block.faq .container .list ul li h5{
        font-size: 14px;
    }

    .content-block.faq .container .list ul li .text{
        padding-right: 10px;
        text-align: justify;
        font-size: 14px;
    }
    
    .content-block.faq .container .list ul li h5 p{
        width: 96%;
    }

    .content-block.faq .container .list ul{
        margin-bottom: 24px;
    }

    .about-page .banner.interno.sobre{
        margin-top: 90px !important;
    }

    .about-page .first-about-container .center img {
        display: none;
    }

    .about-page .first-about-container .first-about-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .about-page .first-about-container .about-side{
        width: auto !important;
    }

    .about-page .solutions-header-container {
    background: linear-gradient(to right, #1a4a54, #2a6a74);
    padding: 60px 20px;
    font-family: "Poppins", monospace;
    color: #ffffff;
    }

    .about-page .solutions-header-container .solutions-header-content {
        max-width: var(--product-module-width, 1200px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
    }

    .about-page .solutions-header-container .text {
        width: 50%;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .about-page .solutions-header-container .title {
        font-size: 42px;
        line-height: 1.2;
        font-weight: 600;
        margin: 0;
    }

    .about-page .solutions-header-container .description {
        font-size: 18px;
        line-height: 1.6;
        margin: 0;
    }

    .about-page .solutions-header-container .description strong {
        color: #FADC67;
        font-weight: 600;
    }

    .about-page .solutions-header-container .buttons {
        display: flex;
        gap: 16px;
        margin-top: 10px;
    }

    .about-page .solutions-header-container .test-free {
        background-color: #FADC67;
        color: #1E6B7F;
        text-decoration: none;
        padding: 12px 24px;
        border-radius: 30px;
        font-weight: 600;
        font-size: 16px;
        transition: background-color 0.3s;
    }

    .about-page .solutions-header-container .test-free:hover {
        background-color: #ffc107;
    }

    .about-page .solutions-header-container .schedule-demo {
        background-color: transparent;
        color: #ffffff;
        text-decoration: none;
        padding: 12px 24px;
        border-radius: 30px;
        font-weight: 600;
        font-size: 16px;
        border: 1px solid #ffffff;
        transition: background-color 0.3s;
    }

    .about-page .solutions-header-container .schedule-demo:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .about-page .solutions-header-container .image {
        width: 55%;
    }

    .about-page .solutions-header-container .image img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
    }

    .solutions-page .solutions-header-container .solutions-header-content {
        max-width: 100% !important;
        display: flex !important; 
        justify-content: center !important; 
        align-items: center !important; 
        flex-direction: column !important; 
        gap: 0 !important;
    }

    .solutions-page .solutions-header-container .text {
        justify-content: flex-end !important;
    }

    .solutions-page .solutions-header-container .text-container {
        width: 100% !important;
        display: flex !important; 
        align-self: center !important;
        flex-direction: column!important;
    }

    .solutions-page .solutions-header-container .title {
        width: auto !important;
        text-align: center !important; 
        justify-self: center !important;
        align-self: center !important;
    }

    .solutions-page .solutions-header-container .description {
        text-align: center !important; 
    }

    .solutions-page .solutions-header-container .description strong {
        font-weight: 600 !important; 
    }

    .solutions-page .solutions-header-container .buttons {
        flex-direction: column !important; 
        align-self: center !important;
    } 

    .solutions-page .solutions-header-container .image {
        align-self: center !important;
        width: 60% !important; 
    }

    .partners-page .solutions-page .solutions-header-container .image {
        align-self: center !important;
        width: 35% !important; 
    }

    .solutions-page .solutions-header-container .image img {
        width: 100% !important; 
    }



    .solutions-page .solution-container .content {
        flex-direction: column !important;
    }
    
    .solutions-page .solution-container .text-content {
        width: auto !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .solutions-page .solution-container .image-content {
        display: none !important;
    }
    
    .partners-page .form-container .left-right img{
        display: none;
    }

    .partners-page .content-block.comparativo h1{
        text-align: center;
        margin: 10px;
    }

    .partners-page .content-block.comparativo .table-container {
        display: block;
    }

    .content-block.comparativo ul li.head .item {
        font-size: 16px;
    }

    .content-block.comparativo ul li.head .prog {
        font-size: 12px;

    }

    .content-block.comparativo ul li .item {
        width: 55%;
        font-size: 14px;
    }

    .content-block.comparativo ul li .prog {
        width: 15%;
        text-align: center;
    }

    .solutions-page .solutions-header-container .description{
        font-size: 16px !important;
    }

    .solutions-page .solutions-header-container .solutions-header-content{
        max-width: auto !important;
    }

    .partners-page .content-block.newsletter .text {
        width: auto;
        background-position: top center !important;
        background-size: 60px 60px !important;
    }
}
/*mobile acima*/


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
    min-height: 5%;
  }
  
  /* The Close Button */
  .close-modal {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close-modal:hover,
  .close-modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .btn-donwload-ebook{
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    color: black;
    font-weight: 600;
    padding: 10px 30px;
    border-radius: 5px;
    background: repeating-linear-gradient(
                  310deg,
                  #FDBE2B,
                  #FDBE2B 20px,
                  #FFC43C 20px,
                  #FFC43C 40px
  );
}
#whatsapp-button {
    cursor: pointer;
    position: fixed;
    bottom: 90px; /* Distância do botão ao fundo da página */
    right: 16px; /* Distância do botão à borda esquerrda da página */
    z-index: 1000; /* Para garantir que o botão esteja sempre na frente de outros elementos */
    background-color: #22BEAD;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    box-shadow: #0000001a 0px 1px 4px, #00000033 0px 2px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s;
}
#whatsapp-button:hover{
    background-color: #1bb19f;
}


/* Estilos do modal */
.modal-lead {
    display: none; /* Esconde o modal por padrão */
    position: fixed; /* Permite que o modal se posicione em relação à janela do navegador */
    z-index: 9999; /* Coloca o modal sobre todos os outros elementos da página */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Adiciona uma barra de rolagem quando o conteúdo do modal é muito grande */
    background-color: rgba(0,0,0,0.4); /* Fundo preto semi-transparente */
    transition: 0.5s ease;
}

.modal-lead::-webkit-scrollbar {
    width: 0;
}

/* Estilos do conteúdo do modal */
.modal-lead-content {
    background-color: #ffffff;
    margin: 5% auto; /* Centraliza o modal verticalmente */
    padding: 20px;
    width: 590px; /* Largura do modal */
    height: fit-content;
    transition: 0.5s ease; /* Adiciona uma transição suave para a transformação */
    border-radius: 10px;
    transform: translateY(-100%); /* Move o modal para cima */
}

/* Estilos do modal quando está visível */
.modal-lead.show {
    display: flex; /* Exibe o modal */
}

/* Estilos do conteúdo do modal quando está visível */
.modal-lead.show .modal-lead-content {
    transform: translateY(0); /* Move o modal para a posição original */
}

/* Estilos do botão fechar */
.close-modal-lead {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
}

.close-modal-lead:hover,
.close-modal-lead:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.form-lead{
    margin: 16px;
}

.form-lead .row{
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.form-lead .row label {
    font-size: 12px;
    color: #205B6F;
    padding-left: 6px;
}

#check-read-policy-label{
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.form-lead .row input,
.form-lead .row select {
    height: 40px;
    border: 1px solid #cbd6e2;
    border-radius: 8px;
    padding-left: 6px;
    font-size: 14px;
}

.form-lead .row input[type="checkbox"]{
    height: auto;
}

.form-lead .row input:focus,
.form-lead .row textarea:focus,
.form-lead .row select:focus{
    outline: none;
    border-color: rgba(82, 168, 236, .8);
}

.form-lead .row textarea {
    border: 1px solid #cbd6e2;
    border-radius: 8px;
    padding-left: 6px;
    padding-top: 6px;
    font-size: 14px;
    resize: none;
}

.form-lead button {
    width: 100px;
    height: 40px;
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
    background-color: #187DFF;
    color: #ffffff;
    transition: opacity 0.5s ease;
    text-align: center;
}

.form-lead button:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
}

.form-lead button:hover{
    opacity: 0.8;
}

.lead-error-message{
    color: #f2545b;
    font-size: 12px;
}

.form-lead .box-submit-button {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert {
    font-size: 12px;
    padding: 12px;
    border-radius: 3px;
}

.alert.alert-success {
    font-size: 11px;
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.custom-select-categories{
    padding: 10px;
    outline: none;
    border: 1px solid #d8e4e6;
    color: #24677e;
}

.w-790{
    width:790px;
}

.mw-300{
    max-width: 300px;
    line-height: 24px;
}

.mt-reset{
    margin-top: 0px !important;
}

.pt-reset{
    padding-top: 0px !important;
}

.hide{
    display: none !important;
}

#icon-close{
    color: #ffffff;
}

/*product novo card*/

#_1.list-card{
    background: radial-gradient(circle at top left,  #66b3d3, transparent),
                radial-gradient(circle at top right, #8ceabf, transparent),
                radial-gradient(circle at bottom left, #408f80, transparent),
                radial-gradient(circle at bottom right, #8ceabf, transparent);
}

#_2.list-card{
    background: radial-gradient(circle at top left,  #8ceabf, transparent),
                radial-gradient(circle at top right, #b5e7db, transparent),
                radial-gradient(circle at bottom left, #8ceabf, transparent),
                radial-gradient(circle at bottom right, #9ce5ad, transparent);
}

#_3.list-card{
    background: radial-gradient(circle at top left,  #b5e7db, transparent),
                radial-gradient(circle at top right, #e2df76, transparent),
                radial-gradient(circle at bottom left, #9ce5ad, transparent),
                radial-gradient(circle at bottom right, #a1ca6a, transparent);
}

#_4.list-card{
    background: radial-gradient(circle at top left,  #66b3d3, transparent),
                radial-gradient(circle at top right, #8ceabf, transparent),
                radial-gradient(circle at bottom left, #408f80, transparent),
                radial-gradient(circle at bottom right, #8ceabf, transparent);
}

#_5.list-card{
    background: radial-gradient(circle at top left,  #8ceabf, transparent),
                radial-gradient(circle at top right, #b5e7db, transparent),
                radial-gradient(circle at bottom left, #8ceabf, transparent),
                radial-gradient(circle at bottom right, #9ce5ad, transparent);
}

#_6.list-card{
    background: radial-gradient(circle at top left,  #b5e7db, transparent),
                radial-gradient(circle at top right, #e2df76, transparent),
                radial-gradient(circle at bottom left, #9ce5ad, transparent),
                radial-gradient(circle at bottom right, #a1ca6a, transparent);
}

#_7.list-card{
    background: radial-gradient(circle at top left,  #66b3d3, transparent),
                radial-gradient(circle at top right, #8ceabf, transparent),
                radial-gradient(circle at bottom left, #408f80, transparent),
                radial-gradient(circle at bottom right, #8ceabf, transparent);
}

#_8.list-card{
    background: radial-gradient(circle at top left,  #8ceabf, transparent),
                radial-gradient(circle at top right, #b5e7db, transparent),
                radial-gradient(circle at bottom left, #8ceabf, transparent),
                radial-gradient(circle at bottom right, #9ce5ad, transparent);
}

.list-card{
    width: 328px;
    height: 280px;
    border-radius: 24px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background-blend-mode: overlay;
    font-size: 16px;
    color: #24677e;
    font-weight: 700;
}

.list-card.disabled{
    opacity:40%;
    cursor: default;
}

.link-card-content{
    width: 268px;
    height: 282px;
    border-radius: 20px;
    display: flex;
    position: absolute;
    top: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0px 12px 32px 0px rgba(43, 44, 38, 0.12);
}

.link-card-content-hidden{
    width: 268px;
    height: 200px;
    border-radius: 20px;
    display: flex;
    position: absolute;
    top: 62px;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    gap: 5px;
    background: linear-gradient(transparent, #fbe385);
    opacity: 0;
    transition: all ease .5s;
    text-decoration: none;
    color: #24677e;
    padding-bottom: 50px;
}

.link-card-content-hidden div{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.link-card-content-hidden:hover{
    opacity: 100;
}

.list-card.disabled .link-card-content-hidden{
    pointer-events: none;
}

.list-card.disabled .link-card-content-hidden:hover{
    opacity:0%;
    cursor: default;
    pointer-events: none;
}

.icon-card-content{
    width: 56px;
    height: 56px;
    background-color: #fadc67;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-content{
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.card-content h6{ 
    width: 50%;
}

.card-content div{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 25px;
}


/*demo container*/

.container-free-trial{
    height: 176px;
    background-color: #FADC67;
    color: #24677e;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.content-free-trial {
    width: 80%;
    height: 70%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
}

.content-free-trial .text-and-image{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 12px;
}

.content-free-trial .text-and-image h6{
    font-size: clamp(14px ,1.6vw, 24px);
    font-weight: 700;
    text-align: center;
}

.content-free-trial .text-and-image img{
    height: clamp(20px,2.4vw, 39px); 
}

a.btn-free-trial {
    /* width: clamp(120px ,10vw, 180px); */
    height: clamp(30px, 8vw, 64px);
    border-radius: 50px;
    font-size: clamp(14px, 1.1vw, 18px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    background-color: white;
    color: #24677e;
    cursor: pointer;
    transition: ease .5s;
    text-decoration: none;
    padding: 0 10px;
}

a.btn-free-trial:hover {
    background-color: #24677e;
    color: white;
}

/* pagina contato-pt-v2 */

.banner-contato {
    width: 100%;
    height: 300px;
    margin-top: 85px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: 
        radial-gradient(circle at top left,  #6fb8e1, transparent),
        radial-gradient(circle at top right, #f6e372, transparent),
        radial-gradient(circle at bottom left, #77de85, transparent),
        radial-gradient(circle at bottom right, #9ede92, transparent);
}

.banner-contato .content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.banner-contato .content .banner-image{
    width: clamp(100px, 9vw, 200px);
    height: clamp(100px, 9vw, 200px);
    object-fit: contain;
}

.banner-contato .content h1{
    font-family: "Poppins", monospace;
    font-weight: 700;
    font-size: 40px;
    color: #1E6B7F;
}

.contact-container{
    display:flex;
    justify-content: center;
    align-items: center;
    font-family: "Poppins", monospace;
    color: #1E6B7F;
    padding-bottom: 100px;
}

.contact-content{
    width: 80%;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
}

.form-info{
    display: flex;
    flex-direction: column;
}

.form-info h1{
    font-weight: 700;
    font-size: clamp(20px, 2vw, 32px);
    margin-bottom: 16px;
}

.form-info p.description{
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 32px;
}

.form-info .checklist{
    display: flex;
    flex-direction: column;
    margin-bottom: 65px;
    gap: 25px;
}

.form-info .checklist .checklist-content{
    display: flex;
    gap: 18px;
}

.form-info .checklist p{
    font-weight: 600;
    font-size: 17px;
}

.image-circle{
    width: 56px;
    height: 56px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
    background-color: rgba(34, 190, 173, 0.16);
}

.free-trial-container{
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.free-trial-content{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.free-trial-text h2{
    font-size: 18px;
    font-weight: 700;
}

.free-trial-text p{
    font-size: 14px;
    font-weight: 400;
}

.contact-page .form-content h1{
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    line-height: 35px;
    margin-bottom: 10px;
}

.contact-page .form-content form{
    display: flex;
    flex-direction: column;
}

.contact-page .form-content form .input-group label{
    margin-bottom: 8px;
}

.contact-page input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Remove as setas */
    margin: 0; /* Remove o espaço adicional */
}

/* Remove as setas no Firefox */
.contact-page input[type="number"] {
    -moz-appearance: textfield; /* Remove a aparência padrão */
}

.contact-page .form-content form input, .form-content form select{
    width: clamp(300px ,417px);
    height: 56px;
    border-width: 2px ;
    border: solid;
    border-radius: 8px;
    outline: none;
    border-color: rgb(212, 212, 212, 0.5);
    text-indent: 16px;
    padding: 0px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(30, 107, 127, 1)
}

.contact-page .form-content form select {
    box-sizing: content-box;
}

.contact-page form .input-group{
    display: flex;
    flex-direction: column;
    color: rgba(30, 107, 127, 1);
    margin-bottom: 16px;
}

.contact-page form .input-group label{
    font-size: 12px;
    font-weight: 600;
}

.contact-page form .input-group:has(input:hover) label, form .input-group:has(select:hover) label{
    border-color: rgba(34, 190, 173, 1);
    color: rgba(34, 190, 173, 1);
}

.contact-page form .input-group:has(input:focus) label, form .input-group:has(select:focus) label{
    border-color: rgba(34, 190, 173, 1);
    color: rgba(34, 190, 173, 1);
}

.contact-page .form-content form input:hover{
    border-color: rgba(34, 190, 173, 1);
}

.contact-page .form-content form input:focus{
    border-color: rgba(34, 190, 173, 1);
}

.contact-page .form-content form input::placeholder{
    font-size: 16px;
    font-weight: 400;
    color: rgba(30, 107, 127, 0.5)
}

.contact-page .form-content form select:invalid{
    font-size: 16px;
    font-weight: 400;
    color: rgba(30, 107, 127, 0.5)
}

.contact-page .form-content form select:valid{
    font-size: 16px;
    font-weight: 400;
    color: rgba(30, 107, 127, 1)
}

.contact-page .form-content form option{
    font-size: 16px;
    font-weight: 400;
    color: rgba(30, 107, 127, 1)
}

.contact-page .form-content form .checkbox-group{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin-bottom: 16px;
}

.contact-page .form-content form .checkbox-group input{
    width: 24px;
    height: 24px;
    border-width: 2px ;
    border: solid;
    border-color: rgb(212, 212, 212, 0.1);
    outline: none;
    margin-right: 12px;
}

.contact-page .form-content form .checkbox-group label{
    font-size: 13px;
    font-weight: 400;
    color: rgba(30, 107, 127, 1);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.contact-page .form-content form .submit-button{
    width: 140px;
    height: 56px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(34, 190, 173, 1);
    color: white;
    font-size: 18px;
    font-weight: 700;
    transition: 0.5s ease-in-out;
    align-self: flex-end;
    cursor: pointer;
    margin-bottom: 16px;
}

.contact-page .form-content form .submit-button:disabled{
    background-color: #e8eaed;
    color: #6f7684;
    cursor: not-allowed;
}

.contact-page .form-content form .submit-button:hover{
    background-color: rgb(21, 211, 189);
}

.contact-page .form-content form .submit-button:disabled:hover{
    background-color: #e8eaed;
    color: #6f7684;
    cursor: not-allowed;
}

/* product module GPSE (productivity)*/

.product-module{
    font-family: 'Poppins', sans-serif;
}

.product-module .banner.interno.produto {
    height: 550px;
    background: linear-gradient(90deg, #22BEAD, #91FE83)
}

.product-module .header-text-container{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
}
.product-banner-befective-green{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.product-module .container-header .product-banner-svg-01{
    position: absolute;
    right: -5px;
    bottom: 130px;
}

.product-module .container-header .product-banner-svg-02{
    position: absolute;
    left: -15px;
    bottom: 150px;
}

.product-module .container-header .product-banner-svg-03{
    position: absolute;
    left: -85px;
    bottom: 200px;
}

.product-module .container-header{
    width: var(--product-module-width);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-module .container-header .text{
    width: 33vw;
    display: flex;
    justify-content: start;
    align-items: start;
    text-align: left;
    gap: 32px;
}

.product-module h2.title{
    font-weight: 700;
    font-size: 24px;
    color: #FFFFFF;
    text-align: left;
}

.product-module h1.description{
    width: auto;
    font-weight: 700 !important;
    font-size: clamp(24px, 2.5vw, 40px);
    color: #1E6B7F;
    text-align: left !important;
}

.product-module .header-button-container{
    display: flex;
    align-items: start;
    gap: 15px;
}

.product-module .button-free-trial{
    width: 173px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #ffffff;
    border-radius: 500px;
    cursor: pointer;
    text-decoration: none;
    transition: all linear 0.3s;
}

.product-module .button-free-trial:hover{
    background-color: #FADC67;
    color: #22BEAD;
    border: 2px solid #FADC67;
}

.product-module .button-demo-schedule{
    width: 188px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    color: #1E6B7F;
    font-size: 16px;
    font-weight: 600;
    border-radius: 500px;
    border: 2px solid #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all linear 0.3s;
}

.product-module .button-demo-schedule:hover{
    background-color: #FADC67;
    color: #22BEAD;
    border: 2px solid #FADC67;
}

.product-module .header-image{
    align-self: flex-end;
    padding-top: 10px;
    position: relative;
    z-index: 0;
}

.product-module .header-image.center-image{
    margin-bottom: 70px;
}

.product-module .header-image img{
    display: flex;
    align-items: start;
}

.product-module .product-container{
    height: 500px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    transition-duration: 1s;
    padding-bottom: 10px;
}

.product-module .product-container .content{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.product-module .product-container .content h1{
    width: 70vw;
    /* font-size: clamp(20px, 2vw, 36px); */
    font-size: 36px;
    color: #1E6B7F;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

.product-module .aux-relative-to-tab-container{
    position:relative;
    width: var(--product-module-width);
    display: flex;
    justify-content: center;
}

.product-module .tabs-container{
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #eaeed9;
    padding: 5px;
    border-radius: 100px;
    color: #1E6B7F;
    font-size: 16px;
    gap: 8px;
}

.product-module .tabs-container input{
    display: none;
}

.product-module .tabs-container input + label{
    display: flex;
    font-weight: 500;
    border-radius: 50px;
    transition: 0.2s ease-in-out;
}

.product-module .tabs-container input + label:hover{
    background-color: #cccfbd;
}

.product-module .tabs-container input:checked + label{
    background-color: #ffdc67;
    font-weight: 700;
}

.product-module .tabs-container input:checked + label > .tab-name{
    font-weight: 700;
}

.product-module .tabs-container input + label > .tab-name{
    align-self: center;
    font-weight: 500;
    border-radius: 50px;
    transition: 0.2s ease-in-out;
    text-align: center;
}


.product-module .tabs-container input + label > .tab-content{
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    font-weight: 500;
    opacity: 0;
    z-index: 0;
    box-sizing: content-box;
    transition: 0.2s ease-in-out;
}

.product-module .tabs-container input:checked + label > .tab-content{
    display: flex;
    width: 100%;
    opacity: 1;
    z-index: 1;
    padding-top: 30px;
}

.product-module .tab-name{
    padding: 10px 40px;
    cursor: pointer;
    border-radius: 20px;
    transition: 0.3s;
}

.product-module .tab-content{
    padding: 0px;
    gap: 60px;
}

.product-module .tab-content .text{
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.product-module .tab-content .text .title {
    /* font-size: clamp(20px, 2vw, 24px) !important; */
    font-size: 22px;
    font-weight: 700;
}

.product-module .tab-content .text .description {
    /* font-size: clamp(14px, 1.8vw, 17px) !important; */
    font-size: 16px;
    font-weight: 400;
}

.product-module .tab-content .text ul{
    display: flex;
    flex-direction: column;
    margin-left: 30px;
    gap: 10px;
}

.product-module .tab-content .text li {
    /* font-size: clamp(14px, 1.8vw, 17px) !important; */
    font-size: 16px;
    font-weight: 400;
}

.product-module .tab-content .text em {
    /* font-size: clamp(14px, 1.8vw, 17px) !important; */
    font-size: 16px;
    font-weight: 700;
}

.product-module .text .btn-contact {
    width: fit-content;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffdc67;
    color: #1E6B7F;
    padding: 2px 32px !important;
    font-size: 16px;
    border-radius: 30px;
    font-weight: 600;
    transition: all .2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.product-module .text .btn-contact:hover {
    background: #22bead;
    color: #ffffff;
}

/* .product-module .tab-content .image{
    width: clamp(600px, 45vw, 700px);
    /* height: 321px;
} */

.product-module .tab-content .image img{
    width: 100%;
    max-height: 250px;
    object-fit: contain;
} 

.product-module .itens-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 60px 0;
    z-index: 2;
}

.product-module .itens-container .title{
    width: 35vw;
    font-size: clamp(24px, 2vw, 32px);
    color: #1E6B7F;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

.product-module .itens-container .cards{
    width: var(--product-module-width);
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
}

.product-module .itens-container .card{
    width: 33%;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 18px;
}

.product-module .itens-container .icon{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #22BEAD;
    border: 14px solid #CDE8DB;
    border-radius: 100%;
}

.product-module .material-symbols-outlined:disabled {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    -webkit-text-stroke: 1px #ffffff;
}

.product-module .itens-container .cards .description{
    width: 50%;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 700;
    text-align: center;
    color: #1E6B7F;
}

.product-module .container-common-questions.faq{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

.product-module .content-common-questions{
    width: var(--product-module-width);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 64px;
}

.product-module .container-common-questions .image{
    display: block;
    width: 300px;
}

.product-module .container-common-questions .image img{
    width: 100%;
    max-height: 375px;
    object-fit: contain;
} 

.product-module .container-common-questions .title{
    font-size: 24px;
    color: #1E6B7F;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    justify-self: start;
}

.product-module .container-common-questions .list{
    flex: 1;
}


.product-module .container-common-questions .list ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.product-module .container-common-questions .list ul li {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 50px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    cursor: pointer;
    max-height: 38px;
    overflow: hidden;
    transition: all ease 1s;
    color: #1E6B7F;
    border-bottom: 1px solid #D3D6C2; 
}

.product-module .container-common-questions .list ul li.expanded {
    max-height: 1000px;
    transition: all ease-out 2s;
}


.product-module .container-common-questions .list ul li h5{
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
}

.product-module .container-common-questions .list ul li h5 p{
    height: 55px;
    flex: 1;
}

.product-module .container-common-questions .list ul li h5 div.more {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #22BEAD;
    border-radius: 50px;
}

.product-module .container-common-questions .list ul li.expanded h5 div.more {
    display: none;
}

.product-module .container-common-questions .list ul li .more span{
    color: white;
    font-size: 18px;
    font-weight: 500;
    -webkit-text-stroke: 0px;
}

.product-module .container-common-questions .list ul li.expanded h5 div.minus {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F8D16E;
    color: #1E6B7F !important;
    border-radius: 50px;
}

.product-module .container-common-questions .list ul li h5 div.minus {
    display: none;
}

.product-module .container-common-questions .list ul li .minus span{
    color: #1E6B7F !important;
    font-size: 18px;
    font-weight: 500;
    -webkit-text-stroke: 0px;
}

.product-module .container-common-questions .list ul li .text{
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    text-wrap: wrap;
}

.product-module .container-free-trial .text-and-image h6{
    text-align: start;
}

.product-module .content-free-trial{
    width: 70vw;
    column-gap: 30px;
}

.product-module .content-free-trial .text-and-image{
    flex: 1
}

/**/

.product-projects-main-content {
    width: var(--product-module-width);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    background-color: #f9f9f9;
    font-size: 16px;
}

.product-projects-main-content .text {
    flex: 1;
}

.product-projects-main-content .image {
    max-width: 500px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-projects-main-content .image {
    max-width: 500px;
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.product-projects-main-content .image img{
    width: 100%;
}

.product-projects-main-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    flex-direction: column;
    color: #0a6e8a;
}

.product-projects-main-content ul li {
    margin-bottom: 15px;
    line-height: 1.5;
}

.product-projects-main-content .btn-contact {
    display: inline-block;
    background-color: #ffd966;
    color: #333;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.product-projects-main-content .btn-contact:hover {
    background-color: #ffc933;
}


/*Page Planes - Plans - Planos*/

.plans-page .cards-container {
    margin-bottom: 60px;
    font-family: "Poppins", monospace;
}

.plans-page .cards-container .cards-content {
    max-width: var(--product-module-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    color: #1E6B7F;
}

.plans-page .cards-container .card {
    width: 265px;
    height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #EEF1E3;
    border-radius: 24px;
    padding: 32px;
}

.plans-page .cards-container .image-icon {
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #FADC67;
    margin-bottom: 15px;
}

.plans-page .cards-container .image-icon .material-symbols-outlined {
    font-size: 26px;
}

.plans-page .cards-container .title h1 {
    font-size: 25px;
    margin-bottom: 15px;
}

.plans-page .cards-container .description {
    margin-bottom: 25px;
}

.plans-page .cards-container .description p {
    font-size: 16px;
    line-height: 1.5;
}

.plans-page .cards-container .details {
    list-style-type: none;
    width: 100%;
    margin-bottom: 30px;
    flex: 1;
}

.plans-page .cards-container .details li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
    text-align: left;
    gap: 12px;
}

.plans-page .cards-container .details li .li-before {
    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FADC67;
    border-radius: 100%;
}

.plans-page .cards-container .details li .li-before .material-symbols-outlined{
    font-size: 18px;
}

.plans-page .cards-container .contact-button {
    background-color: #FADC67;
    color: #1a6e7d;
    text-decoration: none;
    padding: 15px 0;
    border-radius: 30px;
    font-weight: bold;
    width: 100%;
    display: block;
    font-size: 16px;
    transition: background-color 0.3s;
}

.plans-page .cards-container .contact-button:hover {
    background-color: #ffc107;  
}

.plans-page .calculator-container {
    padding: 60px 20px;
    font-family: "Poppins", monospace;
    background-color: #f8f8f2;
}

.plans-page .calculator-container .calculator-content {
    max-width: var(--product-module-width, 1200px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    color: #1E6B7F;
}

@media screen and (max-width: 1225px){
    .plans-page .calculator-container .calculator-content{
        justify-content: center;
    }
}

.plans-page .calculator-container .details {
    list-style-type: none;
    max-width: 550px;
    padding: 0;
}

.plans-page .calculator-container .details-title {
    font-size: 32px;
    line-height: 1.3;
    margin-bottom: 40px;
    font-weight: 600;
}

.plans-page .calculator-container .details li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    font-size: 16px;
    gap: 16px;
}

.plans-page .calculator-container .details li .li-before {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e6f5f2;
    border-radius: 100%;
    margin-top: 5px;
}

.plans-page .calculator-container .details li .li-before .material-symbols-outlined {
    font-size: 32px;
    color: #22BEAD;
}

.plans-page .calculator-container .details li p {
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
}

.plans-page .calculator-container .details li p strong {
    color: #1E6B7F;
    font-weight: 600;
}

.plans-page .calculator-container .calculator-form {
    width: 450px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.plans-page .calculator-container .form-header {
    background-color: #FADC67;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plans-page .calculator-container .form-header .title {
    color: #1E6B7F;
    font-size: 16px;
    margin: 0;
    font-weight: 600;
}

.plans-page .calculator-container .form-header .circles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.plans-page .calculator-container .form-header .circle {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    opacity: 32%;
    border-radius: 100%;
}

/* .plans-page .calculator-container .form-header .material-symbols-outlined {
    color: #1E6B7F;
    font-size: 24px;
} */

.plans-page .calculator-container .form-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.plans-page .calculator-container .form-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plans-page .calculator-container .form-input label {
    color: #1E6B7F;
    font-size: 16px;
    font-weight: 500;
}

.plans-page .calculator-container .form-input input {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    color: #444;
    width: 100%;
    box-sizing: border-box;
}

.plans-page .calculator-container .form-input input:focus {
    outline: none;
    border-color: #1E6B7F;
}

.plans-page .calculator-container .form-submit {
    width: 130px;
    display: flex;
    justify-content: center;
    align-self: end;
    background-color: #FADC67;
    color: #1E6B7F;
    border: none;
    border-radius: 30px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.2s ease-in-out;
}

.plans-page .calculator-container .form-submit:hover {
    background-color: #ffc107;
}

.plans-page .calculator-container .calculator-form .buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.plans-page .calculator-container .calculator-form .buttons-container .alert.alert-danger{
    display: flex;
    gap: 10px;
    margin-top: 10px;
    font-size: 11px;
}

.plans-page .calculator-container .calculator-form .buttons-container .alert.alert-danger .close-alert{
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
}

.plans-page .calculator-container .calculator-form .buttons-container .alert.alert-danger .close-alert:hover{
    opacity: 1;
}

.plans-page .calculator-container .calculator-form .buttons-container .buttons-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.plans-page .calculator-container .calculator-form .buttons-container .buttons-content #btn-calculator-calculate:disabled{
    background-color: rgb(232, 234, 237);
    color: rgb(111, 118, 132);
    cursor: not-allowed;
}

.plans-page .calculator-container .calculator-form .buttons-container .form-back-button{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EEF1E3;
    border-radius: 100%;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.plans-page .calculator-container .calculator-form .buttons-container .form-back-button:hover{
    background-color: #D8DBC8
}

#result-container{
    font-size: 14px;
}

.plans-page .calculator-container .result-contents{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plans-page .calculator-container .result-content{
    display: flex;
    justify-content: space-between;
}

.plans-page .calculator-container .result-content p:first-child{
    width: 60%;
}

.plans-page .calculator-container .result-content p:last-child{
    align-self: center;
}

.plans-page .calculator-container .result-total-value{
    font-size: 20px;
    font-weight: 900;
    align-self: center;
}

.plans-page .calculator-container .result-divisor{
    border: none;
    background-color: #EEF1E3;
    height: 2px;
    width: 100%;
}

.plans-page .calculator-container .result-infos{
    display: flex;
    flex-direction: column;
}

.plans-page .calculator-container .result-details{

}

.plans-page .calculator-container .employees-economy{

}

.plans-page .calculator-container .form-reset {
    width: 234px;
    display: flex;
    justify-content: center;
    align-self: center;
    justify-self: center;
    background-color: #FADC67;
    color: #1E6B7F;
    border: none;
    border-radius: 30px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 24px;
    transition: 0.2s ease-in-out;
}

.plans-page .calculator-container .form-reset:hover {
    background-color: #ffc107;
}

.plans-page .products-list-container {
    padding: 60px 20px;
    font-family: "Poppins", monospace;
}

.plans-page .products-list-container .products-list-content {
    max-width: var(--product-module-width, 1200px);
    margin: 0 auto;
    display: flex;
    gap: 60px;
    color: #1E6B7F;
}

.plans-page .products-list-container .list-description {
    max-width: 650px;
}

.plans-page .products-list-container .list-description .title {
    font-size: 32px;
    line-height: 1.3;
    margin-bottom: 24px;
    font-weight: 600;
}

.plans-page .products-list-container .list-description p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.plans-page .products-list-container .list-features {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

.plans-page .products-list-container .feature {
    display: flex;
    gap: 20px;
    max-width: 550px;
    align-items: flex-start;
}

.plans-page .products-list-container .feature .image {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #D6F1E9;
    border-radius: 100%;
}

.plans-page .products-list-container .feature .image img {
    width: 28px;
    height: 28px;
    filter: invert(50%) sepia(100%) saturate(267%) hue-rotate(115deg);
}

.plans-page .products-list-container .feature .description {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plans-page .products-list-container .feature .description .title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.plans-page .products-list-container .feature .description .description {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.plans-page .common-questions-container {
    padding: 60px 20px;
    font-family: "Poppins", monospace;
}

.plans-page .common-questions-container .common-questions-content {
    max-width: var(--product-module-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.plans-page .common-questions-container .title {
    color: #1E6B7F;
    font-size: 32px;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.plans-page .common-questions-container .questions-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
}

.plans-page .common-questions-container .question-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #1E6B7F;
}

.plans-page .common-questions-container .question-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: flex-start;
}

.plans-page .common-questions-container .question-title::before {
    content: attr(data-number);
    font-weight: 600;
    margin-right: 8px;
}

.plans-page .common-questions-container .question-description {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* refatorando a pagina sobre */

.about-page .banner.interno.sobre{
    height: 600px;
    margin-top: 105px;
}

.about-page .sobre .text{
    gap: 32px;
}

.about-page .sobre .text h1{
    width: 100%;
    font-weight: 700 !important;
}

.about-page .sobre .text h1 b{
    font-weight: 700 !important;
}

.about-page .sobre .talk-with-us{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    gap: 10px;
    border-radius: 100px;
    padding: 12px 32px;
    color: #1E6B7F;
    text-decoration: none;
    background-color: #FADC67;
    transition: 0.2s;
}

.about-page .sobre .talk-with-us:hover{
    background-color: #ddc35b;
}

.about-page .sobre .talk-with-us img{
    max-width: 20px;
    filter: invert(28%) sepia(95%) saturate(431%) hue-rotate(165deg) brightness(92%) contrast(88%);
}

/*testando*/

.about-page .first-about-container {
    padding: 60px 20px;
    font-family: "Poppins", monospace;
    background-color: #FADC67;
    color: #1E6B7F;
}

.about-page .first-about-container .first-about-content {
    max-width: var(--product-module-width, 1200px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.about-page .first-about-container .about-side {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.about-page .first-about-container .about-side > div {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-page .first-about-container .about-side span {
    font-size: 32px;
    font-weight: 500;
}

.about-page .first-about-container .about-side .title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.about-page .first-about-container .about-side .description {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.about-page .first-about-container .center {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-page .first-about-container .center img {
    height: 800px;
    max-width: 100%;
    object-fit: contain;
}
/* 
@media (max-width: 1024px) {
    .about-page .first-about-container .first-about-content {
        flex-direction: column;
        align-items: center;
    }
    
    .about-page .first-about-container .about-side {
        width: 100%;
        max-width: 500px;
    }
    
    .about-page .first-about-container .center {
        width: 100%;
        order: -1;
        margin-bottom: 40px;
    }
    
    .about-page .first-about-container .center img {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .about-page .first-about-container .about-side {
        gap: 40px;
    }
    
    .about-page .first-about-container .center img {
        height: 300px;
    }
} */

.about-page .values-container {
    /* padding: 60px 20px; */
    font-family: "Poppins", monospace;
    background-color: #ffffff;
    background-image: url("assets/images/about-values-image.jpg");
    background-size: 50% auto; /* Ocupa 50% da largura e 100% da altura */
    background-position: right center; /* Posiciona a imagem à direita */
    background-repeat: no-repeat; /* Evita repetição */
}

.about-page .values-container .values-content {
    max-width: var(--product-module-width, 1200px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: center;
    position: relative;
    padding: 80px 20px;
}

.about-page .values-container .values-text {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 26px;
    color: #1E6B7F;
}

.about-page .values-container .title {
    font-size: 32px;
    line-height: 1.5;
    font-weight: 600;
    margin: 0;
}

.about-page .highlight {
    font-size: auto;
    background-color: #FFE066;
    padding: 0 8px;
    border-radius: 4px;
}

.about-page .values-container .description {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.about-page .values-container .description p {
    font-size: 16px;
    line-height: 2;
    margin: 0;
}

.about-page .values-container .values-image-container {
    /* background-image: url("assets/images/about-values-image.jpg"); */
}

.about-page .values-container .values-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.about-page .values-container .value-bubble {
    position: absolute;
    top: 20%;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.45);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #1E6B7F;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
}

.about-page .values-container .value-bubble-1 {
    /* top: 80px; */
    margin-left: 73px;
}

.about-page .values-container .value-bubble-2 {
    /* top: 130px; */
    margin-left: 14px;
    margin-top: 65px;
}

.about-page .values-container .value-bubble-3 {
    /* top: 180px; */
    margin-left: 104px;
    margin-top: 130px;
}

.about-page .values-container .value-bubble-4 {
    /* top: 230px; */
    margin-left: 48px;
    margin-top: 195px;
}

.about-page .values-container .value-bubble-5 {
    /* top: 280px; */
    margin-left: 73px;
    margin-top: 260px;
}

.about-page .values-container .value-bubble-6 {
    /* top: 330px; */
    margin-left: 116px;
    margin-top: 325px;
}

.about-page .values-container .value-bubble-7 {
    /* top: 330px; */
    margin-left: 73px;
    margin-top: 390px;
}

/*SOLUTIONS PAGE*/

.solutions-page .solutions-header-container {
    width: 100%;
    max-width: auto !important;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-family: "Poppins", monospace;
    color: #ffffff;
    background-color: rgba(36, 103, 126, 0.3);
}

.solutions-page .solutions-header-container .solutions-header-content {
    max-width: var(--product-module-width, 1200px);
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.solutions-page .solutions-header-container .text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.solutions-page .solutions-header-container .text .text-container {
    width: 80%;
    align-self: self-start;
}

.solutions-page .solutions-header-container .title {
    width: auto;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 600;
    margin: 0;
    text-align: left;
    margin-bottom: 30px;
}

.solutions-page .solutions-header-container .description {
    font-size: 20px;
    line-height: 2;
    margin: 0;
    text-align: left;
    font-weight: 300;
}

.solutions-page .solutions-header-container .description strong {
    font-weight: 600;
}

.solutions-page .solutions-header-container .buttons {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    align-self: self-start;
}

.solutions-page .solutions-header-container .test-free {
    background-color: #FADC67;
    color: #1E6B7F;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    transition: background-color 0.3s;
}

.solutions-page .solutions-header-container .test-free:hover {
    background-color: #ffc107;
}

.solutions-page .solutions-header-container .schedule-demo {
    background-color: transparent;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    border: 1px solid #ffffff;
    transition: background-color 0.3s;
}

.solutions-page .solutions-header-container .schedule-demo:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.solutions-page .solutions-header-container .image {
    width: 35%;
    display: flex;
    align-self: flex-end;
    opacity: 0;
    transform: translateY(550px);
    z-index: 0;
    animation: fadeInUp 1s ease forwards;
    animation-delay: 1s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(550px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.solutions-page .solutions-header-container .image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.solutions-page .solution-container {
    max-width: auto !important;
    width: 100% !important;
    padding: 60px 0px;
    font-family: "Poppins", monospace;
    z-index: 1;
}

.solutions-page .solution-container .content {
    max-width: var(--product-module-width, 1200px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: center;
}

.solutions-page .solution-container .text-content {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.solutions-page .solution-container .title {
    color: #1E6B7F;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 16px;
}

.solutions-page .solution-container .description {
    font-size: 18px;
    line-height: 1.6;
    color: #1E6B7F;
    margin-bottom: 16px;
}

.solutions-page .solution-container ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.solutions-page .solution-container .items {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.solutions-page .solution-container .items .material-symbols-outlined {
    color: #22BEAD;
    font-size: 24px;
}

.solutions-page .solution-container .items p {
    color: #1E6B7F;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    font-weight: 600;
}

.solutions-page .solution-container .contactarnos-button {
    display: inline-block;
    background-color: #FADC67;
    color: #1E6B7F;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    margin-top: 20px;
    text-align: center;
    max-width: 200px;
    transition: background-color 0.3s;
}

.solutions-page .solution-container .contactarnos-button:hover {
    background-color: #ffc107;
}

.solutions-page .solution-container .image-content {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 600px;
}

.solutions-page .solution-container .buttons-container {
    /* min-height: 42px; */
    display: flex;
    gap: 16px;
    padding-inline: 20px;
}

.solutions-page .solution-container .module-button {
    background-color: #FADC67;
    color: #1E6B7F;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.solutions-page .solution-container .next-image-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.solutions-page .solution-container .image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.solutions-page .solution-container .image img {
    width: 90%;
    height: auto;
    display: block;
}

.solutions-page .solution-container .next-image-button {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.solutions-page .solution-container .image-slider {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    padding-bottom: 20px
}

.solutions-page .solution-container .slide {
    display: none;
    width: 90%;
}

.solutions-page .solution-container .slide.active {
    display: block;
}

.solutions-page .solution-container .slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Estilos para os indicadores de slide */
.solutions-page .solution-container .slide-indicators {
    position: absolute;
    bottom: 5px;
    left: 45%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.solutions-page .solution-container .slide-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.solutions-page .solution-container .slide-indicator.active {
    background-color: #ffffff;
}

.solutions-page .solution-container .next-image-button .material-symbols-outlined {
    color: #1E6B7F;
    font-size: 24px;
}

/* Estilo para o botão do módulo ativo - NOVOS ESTILOS*/
.solutions-page .solution-container .module-button.active-module {
    border: 2px solid #22BEAD; /* Cor da borda - usando a cor verde padrão da sua marca */
    box-shadow: 0 0 8px rgba(34, 190, 173, 0.4); /* Sombra suave para destacar ainda mais */
    transform: translateY(-2px); /* Leve efeito de elevação */
    transition: all 0.3s ease; /* Transição suave */
}

/* Garantir que a transição seja suave para todos os botões */
.solutions-page .solution-container .module-button {
    border: 2px solid;
    transition: all 0.3s ease;
    position: relative;
}

/* Indicadores de slide com estilo melhorado */
.solutions-page .solution-container .slide-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.solutions-page .solution-container .slide-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(30, 107, 127, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.solutions-page .solution-container .slide-indicator.active {
    background-color: #22BEAD;
    transform: scale(1.2);
}

/* Melhorar a transição entre slides */
.solutions-page .solution-container .slide {
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    width: 90%;
}

.solutions-page .solution-container .slide.active {
    align-self: flex-start;
    opacity: 1;
    position: relative;
}

.solutions-page .solution-container .image-slider {
    position: relative;
    min-height: 400px; /* Ajuste conforme necessário para evitar saltos de layout */
}

/* Estilos base do container */
.solutions-page .solution-container {
    width: 100%;
    padding: 60px 0;
    font-family: "Poppins", sans-serif;
}

.solutions-page .solution-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: center;
}

/* Área de texto (lado esquerdo) */
.solutions-page .solution-text-area {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.solutions-page .solution-title {
    color: #1E6B7F;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 16px;
}

.solutions-page .solution-description {
    font-size: 18px;
    line-height: 1.6;
    color: #1E6B7F;
    margin-bottom: 16px;
}

.solutions-page .solution-features {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.solutions-page .solution-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.solutions-page .solution-feature-item .material-symbols-outlined {
    color: #22BEAD;
    font-size: 24px;
}

.solutions-page .solution-feature-item p {
    color: #1E6B7F;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    font-weight: 600;
}

.solutions-page .solution-cta-button {
    display: inline-block;
    background-color: #FADC67;
    color: #1E6B7F;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    margin-top: 20px;
    text-align: center;
    max-width: 200px;
    transition: all 0.3s ease;
}

.solutions-page .solution-cta-button:hover {
    background-color: #ffc107;
    transform: translateY(-2px);
}

/* Área do slider (lado direito) */
.solutions-page .solution-slider-area {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Container do slider */
.solutions-page .solution-slider-container {
    position: relative;
    border: solid 1px rgba(1, 1, 1, 0.1);
    border-radius: 12px;
    background-color: transparent;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */
}

/* Slider */
.solutions-page .solution-slider {
    position: relative;
    /* min-height: 500px; */
    width: 100%;
}

/* Slides */
.solutions-page .solution-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.solutions-page .solution-slide.active {
    display: flex;
    opacity: 1;
    position: relative;
}

.solutions-page .solution-slide-image {
    width: 100%;
    overflow: hidden;
}

.solutions-page .solution-slide-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px 8px 0 0;
}

/* Conteúdo do slide */
.solutions-page .solution-slide-content {
    padding: 30px;
    background-color: #fff;
    border-radius: 0 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.solutions-page .solution-module-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.solutions-page .solution-module-icon img {
    width: 30px;
    height: 30px;
}

.solutions-page .solution-module-icon .material-symbols-rounded {
    font-size: 42px;
    color: #22BEAD;
}

.solutions-page .solution-module-icon .material-symbols-outlined {
    font-size: 42px;
    color: #22BEAD;
}

.solutions-page .solution-module-title {
    color: #1E6B7F;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.solutions-page .solution-module-description {
    color: #1E6B7F;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.solutions-page .solution-module-link {
    display: inline-block;
    color: #22BEAD;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
    margin-top: 8px;
    text-decoration: underline;
}

.solutions-page .solution-module-link:hover {
    color: #1E6B7F;
    text-decoration: underline;
}

/* Botões de navegação */
.solutions-page .solution-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: #FADC67;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: all 0.3s ease;
}

/* Estilo para botões de navegação desabilitados */
.solutions-page .solution-nav-button.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none; /* Impede interações com o botão */
}

.solutions-page .solution-nav-button.disabled:hover {
    background-color: #FADC67; /* Mantém a cor original mesmo no hover */
    transform: translateY(-50%); /* Remove o efeito de escala no hover */
}

.solutions-page .solution-prev-button {
    left: -25px;
}

.solutions-page .solution-next-button {
    right: -25px;
}

.solutions-page .solution-nav-button:hover {
    background-color: #ffc107;
    transform: translateY(-50%) scale(1.05);
}

.solutions-page .solution-nav-button .material-symbols-outlined {
    color: #1E6B7F;
    font-size: 24px;
}

/* Indicadores de slide */
.solutions-page .solution-indicators {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.solutions-page .solution-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(30, 107, 127, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.solutions-page .solution-indicator.active {
    background-color: #22BEAD;
    transform: scale(1.2);
}

/* Responsividade */
@media (max-width: 992px) {
    .solutions-page .solution-content {
        flex-direction: column;
        padding: 0 20px;
    }
    
    .solutions-page .solution-text-area,
    .solutions-page .solution-slider-area {
        width: 100%;
    }
}

/* Estilos do Carrossel */
.solutions-page .bebot-carousel-container {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.solutions-page .bebot-carousel {
    max-width: 1200px;
    position: relative;
    width: 100%;
    height: 500px;
}

.solutions-page .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: none;
}

.solutions-page .carousel-slide.active {
    opacity: 1;
    display: block;
}

.solutions-page .slide-content {
    display: flex;
    height: 100%;
}

/* Estilos do texto */
.solutions-page .slide-text {
    flex: 0 0 40%;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.solutions-page .slide-text h2 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #1d6e7c;
}

/* Já existe na sua folha de estilos */
.solutions-page /* .highlight {
    background-color: #f9d949;
    padding: 5px 10px;
    display: inline-block;
    margin-bottom: 5px;
} */

.solutions-page .description strong {
    font-weight: 600;
}

.solutions-page .cta {
    font-size: 20px;
    font-weight: 600;
    color: #1d6e7c;
    margin-top: 20px;
}

.solutions-page .description {
    font-size: 20px;
    font-weight: 500;
    color: white;
    margin-top: 20px;
}

.solutions-page .slide-text .description {
    font-size: 18px;
    line-height: 1.5;
    color: #1d6e7c;
    margin-bottom: 20px;
}

/* Estilos da imagem */
.solutions-page .slide-image {
    flex: 0 0 60%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solutions-page .laptop-image {
    width: 110%;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* Elementos decorativos */
.solutions-page .chat-bubble {
    position: absolute;
    border-radius: 50%;
    z-index: 2;
}

.solutions-page .chat-bubble.blue {
    width: 200px;
    top: 15%;
    left: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solutions-page .chat-bubble.yellow {
    width: 50px;
    height: 50px;
    background-color: #f9d949;
    top: 40%;
    left: 25%;
}

.solutions-page .ai-icon {
    width: 100%;
    height: 100%;
}

.solutions-page .bee-icon-container {
    position: absolute;
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 10%;
    right: 3.5%;
    z-index: 2;
}

.solutions-page .bee-icon-container.teal {
    position: absolute;
    border-radius: 50%;
    z-index: 2;
    width: 140px;
    top: 20%;
    bottom: auto;
    left: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solutions-page .bee-icon {
    width: 100%;
    height: 100%;
}

.solutions-page .checklist-container {
    position: absolute;
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 10%;
    right: 3.5%;
    z-index: 2;
}

.solutions-page .checklist-icon {
    width: 100%;
    height: 100%;
}

.solutions-page .chart-icon-container {
    position: absolute;
    width: 90px;
    height: 90px;
    background-color: #f9d949;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 20%;
    right: 15%;
    z-index: 2;
}

.solutions-page .chart-icon {
    width: 60px;
    height: 60px;
}

/* Botões de navegação */
.solutions-page .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: #f9d949;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d6e7c;
    z-index: 10;
    transition: all 0.3s ease;
}

.solutions-page .carousel-nav:hover {
    background-color: #f0c929;
}

.solutions-page .carousel-nav.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #e5e7eb;
}

.solutions-page .carousel-nav.prev {
    left: 20px;
}

.solutions-page .carousel-nav.next {
    right: 20px;
}

/* Indicadores */
.solutions-page .carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.solutions-page .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #d1d5db;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.solutions-page .indicator.active {
    background-color: #1d6e7c;
}

/* Responsividade */
/* @media (max-width: 992px) {
    .slide-content {
        flex-direction: column;
    }
    
    .slide-text, .slide-image {
        flex: 0 0 100%;
    }
    
    .slide-text {
        padding-right: 0;
        padding-bottom: 20px;
        text-align: center;
    }
    
    .bebot-carousel {
        height: auto;
        min-height: 700px;
    }
} */

@media (max-width: 768px) {
    .slide-text h2 {
        font-size: 28px;
    }
    
    .description {
        font-size: 16px;
    }
    
    .cta {
        font-size: 18px;
    }
    
    .carousel-nav {
        width: 40px;
        height: 40px;
    }

    .solutions-page .bebot-carousel-container{
        height: 100%;
        padding-top: 40px;
    }

    /* .solutions-page .bebot-carousel {
        height: auto;
    }

    .solutions-page .carousel-slide.active {
        display: flex;
    } */

    .solutions-page .carousel-slide {
        position: relative;
    }

    .solutions-page .bebot-carousel {
        height: auto;
    }

    .solutions-page .slide-content {
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        gap: 20px;
    }


    .solutions-page .slide-text {
        flex: auto;
        padding-right: 0;
        text-align: center;
    }

    .solutions-page .slide-image {
        flex: auto;
    }

    .solutions-page .chat-bubble.blue,
    .solutions-page .bee-icon-container,
    .solutions-page .bee-icon-container.teal,
    .solutions-page .checklist-container{
        display: none;
    }

    .solutions-page .laptop-image {
        width: 100%;
        object-fit: cover;
    }

    .solutions-page .carousel-nav.prev {
        left: 0;
        top: 500px; 
    }

    .solutions-page .carousel-nav.next {
        right: 0;
        top: 500px;
    }

}

/* New Home Page */
.menu-home-page .percentage-indicators-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 300px;
    position: relative;
    cursor: pointer;
    transition: 2s;
}

.menu-home-page .percentage-indicator {
    width: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 24px;
    padding: 15px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-wrap: nowrap;
    position: absolute;
}

.menu-home-page .percentage-indicator.first {
    bottom: 120px;
    transition: 0.5s ease-in-out;
}

.menu-home-page .percentage-indicator.second {
    bottom: 40px;
    left: 100px;
    transition: 0.5s ease-in-out;
}

.menu-home-page .percentage-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 8px;
}

.menu-home-page .percentage-value {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #2196F3;
}

.menu-home-page .percentage-indicator:nth-child(2) .percentage-value {
    color: #22bead;
}

.menu-home-page .percentage-indicator .percentage-label {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #2196F3;
}

.menu-home-page .indicator-link .percentage-indicator.second .percentage-header .percentage-value {
    font-size: 24px;
    font-weight: 700;
    color: #22bead;
}
.menu-home-page .indicator-link .percentage-indicator.second .percentage-header .percentage-label{
    font-size: 18px;
    font-weight: 700;
    color: #22bead;
}

.menu-home-page .progress-bar {
    width: 100%;
    height: 24px;
    background-color: rgba(33, 150, 243, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

.menu-home-page .percentage-indicator:nth-child(2) .progress-bar {
    width: 100%;
    height: 24px;
    background-color: rgba(34, 190, 173, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

.menu-home-page .progress-fill {
    height: 100%;
    border-radius: 20px;
}

.menu-home-page .progress-fill.blue {
    background-color: #2196F3;
}

.menu-home-page .progress-fill.green {
    background-color: #22bead;
    -webkit-box-shadow: 0px 4px 6px -4px rgba(34,190,172,1);
    -moz-box-shadow: 0px 4px 6px -4px rgba(34,190,172,1);
    box-shadow: 0px 4px 6px -4px rgba(34,190,172,1);
}

.menu-home-page .progress-fill.expected.green {
    background-color: rgba(34, 190, 173, 0.2);
}

/* Primeiro, vamos tornar o container clicável e adicionar cursor pointer */
.menu-home-page .percentage-indicators-container {
    cursor: pointer;
}

/* Posicionamento relativo para os indicadores para conter o efeito de brilho */
.menu-home-page .percentage-indicator {
    position: absolute;
    overflow: hidden; /* Importante para conter o efeito dentro do card */
}

/* Efeito de brilho para o primeiro indicador (azul) */
.menu-home-page .percentage-indicator.first {
    bottom: 120px;
}

.menu-home-page .percentage-indicator.first::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%,
        rgba(33, 150, 243, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: all 0.75s;
    z-index: 1;
    opacity: 0;
}

/* Efeito de brilho para o segundo indicador (verde) */
.menu-home-page .percentage-indicator.second {
    bottom: 40px;
    left: 100px;
}

.menu-home-page .percentage-indicator.second::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%,
        rgba(34, 190, 173, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: all 0.75s;
    z-index: 1;
    opacity: 0;
}

/* Ativação do efeito no hover */
.menu-home-page .percentage-indicators-container:hover .percentage-indicator.first::before,
.menu-home-page .percentage-indicators-container:hover .percentage-indicator.second::before {
    animation: shimmer 1.5s infinite;
    opacity: 1;
}

/* Efeito de crescimento no hover */
.menu-home-page .percentage-indicators-container:hover .percentage-indicator.first,
.menu-home-page .percentage-indicators-container:hover .percentage-indicator.second {
    transform: scale(1.05); /* Aumenta o tamanho em 5% */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra um pouco maior para enfatizar o efeito */
}

/* Definição da animação */
@keyframes shimmer {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}

/* Garantir que o conteúdo fique acima do efeito de brilho */
.menu-home-page .percentage-header,
.menu-home-page .progress-bar {
    position: relative;
    z-index: 2;
}

.menu-home-page .indicator-link {
    text-decoration: none;
    display: block;
    position: relative;
    z-index: 5;
}

/* Garantir que o posicionamento absoluto continue funcionando */
.menu-home-page .indicator-link .percentage-indicator.first {
    bottom: 0;
    left: 0;
}

.menu-home-page .indicator-link .percentage-indicator.second {
    bottom: 0;
    left: 0;
}

.menu-home-page .percentage-indicators-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 300px;
    position: relative;
}

.menu-home-page .percentage-indicators-container .indicator-link:first-child {
    position: absolute;
    bottom: 120px;
    left: 0;
}

.menu-home-page .percentage-indicators-container .indicator-link:last-child {
    position: absolute;
    bottom: 40px;
    left: 100px;
}

/* Adicione isso ao CSS existente para efeitos de hover *.menu-home-page
.ai-badge-full {
    width: 280px;
    height: 160px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    position: relative;
  }
  
  /* Estilo para a imagem principal */
.menu-home-page .ai-badge-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Estilo para o conteúdo do badge (ícone + texto) */
.menu-home-page .ai-badge-content {
    position: absolute;
    bottom: 20px;
    left: -20px;
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 50px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 2;
  }
  
  /* Container do ícone */
.menu-home-page .ai-icon-conteiner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #FFC107, #FF9800);
    border-radius: 50%;
    margin-right: 8px;
    overflow: hidden;
  }
  
  /* Imagem do ícone */
.menu-home-page .ai-icon-conteiner img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }
  
  /* Texto do badge */
.menu-home-page .ai-text {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1E6B7F;
    white-space: nowrap;
  }
  
.typed-cursor {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1E6B7F;
}

/* Container para as bolhas flutuantes */
.menu-home-page .floating-bubbles {
    position: absolute;
    top: 10px;
    left: 15px;
    z-index: 2;
    width: 60px;
    height: 80px;
  }
  
  /* Estilo base para as bolhas de IA */
  .menu-home-page .ia-bubble {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #fadc67;
    opacity: 1;
    transform: translateY(100px);
    animation: float-up 3s ease-in-out infinite;
  }
  
  /* Posicionamento e atraso para cada bolha */
  .menu-home-page .ia-bubble:nth-child(1) {
    left: 0;
    top: -25px;
    animation-delay: 0s;
  }
  
  .menu-home-page .ia-bubble.delay-1 {
    left: 20px;
    animation-delay: 0.2s;
  }
  
  .menu-home-page .ia-bubble.delay-2 {
    left: 0;
    top: 25px;
    animation-delay: 0.4s;
  }

  .menu-home-page .ia-bubble.delay-3 {
    left: 20px;
    top: 50px;
    animation-delay: 0.6s;
  }
  
  /* Animação de flutuação */
  @keyframes float-up {
    0% {
      opacity: 0;
      transform: translateY(100px);
    }
    20% {
      opacity: 0;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateY(0px);
    }
  }

  /* Efeitos de hover */
.menu-home-page .ai-badge-full {
    /* height: 25%; */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 50px;
    cursor: pointer;
  }

  /* Efeito de hover */
.menu-home-page .ai-badge-full:hover,
.banner-svg3:hover img {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
}

.banner-svg1:hover img{
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}
  
  /* Versão responsiva */
  @media (max-width: 768px) {
    .ai-badge-full {
      width: 240px;
      height: 140px;
    }

    .partners-page .ai-badge-full {
      width: 240px;
      height: auto;
    }
    
    .ai-badge-content {
      padding: 4px 10px;
    }
    
    .ai-text {
      font-size: 12px;
    }
  }

/* Animação opcional para quando o componente aparecer na tela
@keyframes progressFill {
    from { width: 0; }
    to { width: var(--fill-width); }
}

.menu-home-page .progress-fill {
    animation: progressFill 3s ease-out forwards;
    --fill-width: 0;
}

.menu-home-page .progress-fill.blue {
    --fill-width: 80%;
}

.menu-home-page .progress-fill.green.expected {
    --fill-width: 80%;
}

.menu-home-page .progress-fill.green {
    --fill-width: 62.5%;
} */

/*Partners page*/

.partners-page .form-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partners-page .form-container .left-right{
    max-width: 1380px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.partners-page .form-content {
    width: 600px;
    /* margin: 0 auto; */
    padding: 30px;
}

.partners-page .form-content.select {
    width: 600px;
    /* margin: 0 auto; */
    padding: 0;
}

.partners-page .form-content .title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: #1E6B7F;
}

.partners-page .form-content .section-title {

}

.partners-page .form-content form {
    display: flex;
    flex-direction: column;
    /* gap: 16px; */
}

.partners-page .form-content .form-row {
    display: flex;
    gap: 20px;
    width: 100%;
}

.partners-page .form-content .form-row .input-group {
    flex: 1;
}

.partners-page .form-content .input-group {
    display: flex;
    flex-direction: column;
    color: #1E6B7F;
}

.partners-page .form-content .input-group.full-width {
    width: 100%;
}

.partners-page .form-content .input-group label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.partners-page .form-content input[type="text"],
.partners-page .form-content input[type="email"],
.partners-page .form-content input[type="tel"],
.partners-page .form-content select {
    /* width: 100%; */
    height: 56px;
    border: 2px solid rgba(212, 212, 212, 0.5);
    border-radius: 30px;
    outline: none;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 500;
    color: #1E6B7F;
    background-color: #fff;
    transition: border-color 0.3s ease;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.partners-page .form-content input[type="text"]::placeholder,
.partners-page .form-content input[type="email"]::placeholder,
.partners-page .form-content input[type="tel"]::placeholder {
    color: rgba(30, 107, 127, 0.5);
    font-weight: 400;
}

.partners-page .form-content select:invalid {
    color: rgba(30, 107, 127, 0.5);
    font-weight: 400;
}

.partners-page .form-content select:valid {
    color: #1E6B7F;
    font-weight: 500;
}

.partners-page .form-content input:hover,
.partners-page .form-content select:hover {
    border-color: #22BEAD;
}

.partners-page .form-content input:focus,
.partners-page .form-content select:focus {
    border-color: #22BEAD;
}

.partners-page .form-content .input-group:has(input:hover) label,
.partners-page .form-content .input-group:has(select:hover) label,
.partners-page .form-content .input-group:has(input:focus) label,
.partners-page .form-content .input-group:has(select:focus) label {
    color: #22BEAD;
}

.partners-page .form-content .radio-group-container {
    margin: 0 0;
}

.partners-page .form-content .radio-group-label {
    font-size: 14px;
    font-weight: 600;
    color: #1E6B7F;
    /* margin-bottom: 12px; */
    display: block;
}

.partners-page .form-content .radio-options {
    display: flex;
    gap: 30px;
}

.partners-page .form-content .radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.partners-page .form-content .radio-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: #22BEAD;
    cursor: pointer;
}

.partners-page .form-content .radio-option label {
    font-size: 16px;
    color: #1E6B7F;
    cursor: pointer;
}

.partners-page .form-content .checkbox-group {
    margin: 0 0;
}

.partners-page .form-content .checkbox-group label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #1E6B7F;
    cursor: pointer;
}

.partners-page .form-content .checkbox-group input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    accent-color: #22BEAD;
    cursor: pointer;
}

.partners-page .form-content .checkbox-group a {
    color: #22BEAD;
    text-decoration: none;
    font-weight: 600;
}

.partners-page .form-content .checkbox-group a:hover {
    text-decoration: underline;
}

.partners-page .form-content .submit-button {
    width: 140px;
    height: 56px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #22BEAD;
    color: white;
    font-size: 18px;
    font-weight: 700;
    border: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
    align-self: flex-end;
}

.partners-page .form-content .submit-button:hover {
    background-color: #FADC67;
    color: #1E6B7F !important;
}

.partners-page .form-content .submit-button:disabled {
    background-color: #e8eaed;
    color: #6f7684;
    cursor: not-allowed;
}

.partners-page .form-content .lead-error-message {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
    min-height: 18px;
}

.partners-page .form-content .alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 16px;
    font-size: 14px;
}

.partners-page .form-content .alert-success {
    background-color: rgba(34, 190, 173, 0.1);
    color: #22BEAD;
    border: 1px solid #22BEAD;
}

.partners-page .form-content .alert-danger {
    background-color: rgba(255, 77, 79, 0.1);
    color: #ff4d4f;
    border: 1px solid #ff4d4f;
}

/*Partners page 02*/
/* Main container and background */ 
  .partners-page .be-partners-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 80px;
  }
  
  .partners-page .be-partners-container .be-partners-logo{
    width: 500px;
  }

  .partners-page .be-partners-container .be-partners-logo img{
    width: 100%;
    height: 100%;
  }

  .partners-page .be-partners-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    gap: 20px;
    justify-self: center;
  }
  
  /* Hexagon and "be" styling */
  .partners-page .hexagon-img {
    width: 200px;
    height: 225px;
    background: url("assets/images/blue-hexagon-be-partners.svg");
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .partners-page .title-01 {
    color: white;
    font-size: 120px;
    font-weight: bold;
    margin: 0;
  }
  
  .partners-page .col-02 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .partners-page .col-03{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
  }

  .partners-page .col-03 div{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .partners-page .col-03 span{
    letter-spacing: 0;
  }

  /* "partners" styling */
 .partners-page .title-02 {
    color: #1d6e7c;
    font-size: 80px;
    font-weight: bold;
    margin: 0;
  } 
  
  /* "program" styling */
  .partners-page .text-program {
    color: #e9b949;
    font-size: 16px;
    letter-spacing: 15px;
    text-transform: uppercase;
    margin: 0;
    margin-left: 20px;
    margin-top: -10px;
  }
  
  .partners-page .bee-path {
    margin-bottom: 50px;
  }
  
  /* JOIN, REFER, WIN styling */
  .partners-page .join, .refer, .win {
    color: #1d6e7c;
    font-size: 24px;
    letter-spacing: 30px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 500;
  }
  
  .partners-page .join {
    top: 10px;
    right: 50px;
  }
  
  .partners-page .refer {
    top: 80px;
    right: 50px;
  }
  
  .partners-page .win {
    top: 150px;
    right: 100px;
  }
  
  /* Bee image styling */
  .partners-page .bee {
    width: 20px;
    height: auto;
    align-self: flex-start;
  }
  
  /* Main title styling */
  .partners-page .title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1d6e7c;
    line-height: 1.3;
  }
  
  /* Description paragraph styling */
  .partners-page .description {
    font-size: 18px;
    font-weight: normal;
  }
  
  /* Last description (h2) specific styling */
  .partners-page h2.description {
    font-size: 20px;
    font-weight: 600;
    line-height: normal !important;
  }
  
  /* Bullet list container */
  .partners-page .response-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 30px;
  }
  
  /* Bullet list items */
  .partners-page .response-list li {
    font-size: 18px;
    font-weight: 500 !important;
    margin-bottom: 15px;
    position: relative;
    padding-left: 5px;
  }
  
  /* Bullet color customization */
  .partners-page .response-list li::marker {
    color: #1d6e7c;
    font-size: 20px;
  }

/* Main container */
.partners-page .partner-tiers-container {
    padding: 40px 20px;
    font-family: 'Arial', sans-serif;
    color: #1d6e7c;
  }
  
  /* Title styling */
  .partners-page .partner-tiers-title {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 40px;
    color: #1d6e7c;
  }
  
  /* Flex layout for cards instead of grid */
  .partners-page .partner-tiers-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 120px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Card styling with flex basis instead of grid columns */
  .partners-page .partner-tier-card {
    background-color: #f5f3e6;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 450px;
    min-height: 470px;
  }
  
  /* Card header */
  .partners-page .tier-header {
    background-color: #d9e6e8;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #1d6e7c;
    position: relative;
  }
  
  .partners-page .tier-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(253, 253, 252, 0.5);
    border-radius: 50%;
    color: #1d6e7c;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 15px;
  }

  .partners-page .tier-icon img{
    align-self: center !important;
  }
  
  .partners-page .tier-name {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: #1d6e7c;
  }
  
  /* Card content */
  .partners-page .tier-content {
    padding: 20px 30px;
    background-color: #eef1e3 !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  
  .partners-page .tier-tagline {
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    color: #1d6e7c;
  }
  
  .partners-page .tier-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 15px;
  }
  
  /* Benefits list */
  .partners-page .tier-benefits {
    list-style-type: none;
    padding-left: 0;
    margin-top: 10px;
    margin-bottom: 15px;
  }
  
  .partners-page .tier-benefits li {
    font-size: 16px;
    margin-bottom: 8px;
    position: relative;
  }
  
  .partners-page .tier-benefits li::before {
    content: "👉 ";
    color: #1d6e7c;
    font-size: 18px;
  }
  
  /* Call to action */
  .partners-page .tier-cta {
    font-weight: 600;
    margin-top: auto;
    color: #1d6e7c;
  }
  
  /* Main container */
.partners-page .bepartners-container.be-parners-form {
    font-family: 'Arial', sans-serif;
    color: #1d6e7c;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 50px !important;
}

.partners-page .be-parners-form .bepartners-content {
    display: flex;
    max-width: 1200px;
    width: 100%;
    border-radius: 10px;
    align-items: flex-end;
    justify-content: center;
}

/* Left side with image */
.partners-page .be-parners-form .bepartners-left {
    flex: 0 0 45%;
    position: relative;
    display: flex;
}

.partners-page .be-parners-form .bepartners-left img{
    width: 100%;
    height: 100%;
    align-self: flex-end;
    object-fit: cover;
}

.partners-page .be-parners-form .consultant-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.partners-page .be-parners-form .yellow-shape {
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: #f9d949;
    border-radius: 50%;
    top: 50px;
    left: -75px;
    z-index: 1;
}

/* Right side with form */
.partners-page .be-parners-form .bepartners-right {
    min-height: 650px;
    flex: 0 0 55%;
    padding: 10px 30px 30px 30px;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 50px;
    margin: 5px;
    margin-bottom: 50px;
}

/* Logo styling */
.partners-page .be-parners-form .bepartners-logo-container {
    margin-bottom: 20px;
    margin-top: 20px;
}

.partners-page .be-parners-form .be-partners-container {
    display: flex;
    align-items: flex-start;
    background-color: transparent;
    padding: 0;
    margin-top: 0;
}

.partners-page .be-parners-form .be-partners-content {
    display: flex;
    align-items: center;
}

/* Form container */
.partners-page .be-parners-form .bepartners-form-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.partners-page .be-parners-form .form-step {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.partners-page .be-parners-form .form-title {
    width: 90%;
    font-size: 24px;
    font-weight: 700;
    color: #1d6e7c;
    line-height: 1.3;
}

.partners-page .be-parners-form .form-title~p {
    width: 90%;
    font-size: 16px;
    line-height: 35px;
}

.partners-page .be-parners-form .form-title~p~strong {
    width: 90%;
    font-size: 16px;
}

.partners-page .be-parners-form .form-title~p~strong a{
    text-decoration: none;
    color: #1d6e7c;
    text-decoration: underline;
}

.partners-page .be-parners-form .form-title~p~strong a~a{
    text-decoration: none;
    color: #22BEAD;
    text-decoration: underline;
}

/* Step 1 - Options */
.partners-page .be-parners-form .form-options {
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;}

.partners-page .be-parners-form .btn-forward:disabled{
    background-color: #e8eaed;
    color: #6f7684;
    cursor: not-allowed;
}

.partners-page .be-parners-form .btn-forward:disabled:hover{
    background-color: #e8eaed;
    color: #6f7684;
    cursor: not-allowed;
    transform: translateY(0);
}


.partners-page .be-parners-form .option-button,
.partners-page .be-parners-form .btn-back,
.partners-page .be-parners-form .btn-forward {
    display: flex;
    align-items: center;
    background-color: #f9d949;
    border: none;
    border-radius: 50px;
    padding: 9px;
    font-size: 18px;
    font-weight: 600;
    color: #1d6e7c;
    cursor: pointer;
    transition: all 0.3s ease;
}

.partners-page .be-parners-form .option-button:hover,
.partners-page .be-parners-form .btn-back:hover,
.partners-page .be-parners-form .btn-forward:hover {
    background-color: #f0c929;
    transform: translateY(-2px);
}

.partners-page .be-parners-form .btn-back-container {
    width: 90%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
}

.partners-page .be-parners-form .btn-back,
.partners-page .be-parners-form .btn-forward {
    width: 42px;
    height: 42px;
    justify-content: center;
    align-self: flex-end;
}

.partners-page .be-parners-form .option-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: white;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partners-page .be-parners-form .option-circle span{
    color: #22bead;
    font-size: 28px;
    display: none;
}

/* Select styling basado en la imagen */
.partners-page .be-parners-form .network-size-select {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #1d6e7c;
    background-color: #f9d949; /* Fondo amarillo para el select */
    appearance: none; /* Removes default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6e7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    cursor: pointer;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.partners-page .be-parners-form .network-size-select:focus {
    outline: none;
}

/* Estilo para las opciones del select */
.partners-page .be-parners-form .network-size-select option {
    background-color: #fff9db; /* Fondo amarillo claro para las opciones */
    color: #1d6e7c;
    padding: 15px;
    font-weight: 500;
}

/* Estilo para la opción seleccionada */
.partners-page .be-parners-form .network-size-select option:checked,
.partners-page .be-parners-form .network-size-select option:hover {
    background-color: #f9d949; /* Fondo amarillo para la opción seleccionada/hover */
}

/* Personalización adicional para navegadores específicos */
/* Para Firefox */
.partners-page .be-parners-form .network-size-select {
    text-indent: 0;
    text-overflow: '';
}

/* Para Chrome/Safari */
.partners-page .be-parners-form .network-size-select::-ms-expand {
    display: none;
}

/* Contenedor personalizado para el select para mejor control */
.partners-page .be-parners-form .select-container {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

/* Form inputs */
.partners-page .be-parners-form .form-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0;
    margin-top: 30px;
}

.partners-page .be-parners-form .form-input {
    display: flex;
    flex-direction: column;
}

.partners-page .be-parners-form .form-input .input-with-icon{
    width: 70%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.partners-page .be-parners-form .form-input .input-with-icon .input-container{
    flex: 1;
}

.partners-page .be-parners-form .form-input .input-with-icon input{
    width: 100%;
}

.partners-page .be-parners-form .form-input.select-container {
    max-width: 300px;
}

.partners-page .be-parners-form .form-input label {
    font-size: 14px;
    margin-bottom: 5px;
    color: #1d6e7c;
}

.form-input input,
.partners-page .be-parners-form .form-input select {
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 16px;
    color: #1d6e7c;
    font-weight: 600;
}

.form-input input:focus,
.partners-page .be-parners-form .form-input select:focus {
    outline: none;
}

.partners-page .be-parners-form .lead-error-message {
    font-size: 12px;
    color: #ef4444;
    margin-top: 5px;
    min-height: 15px;
    margin-left: 15px;
}

.partners-page .be-parners-form .input-with-icon+.lead-error-message {
    margin-left: 50px;
}

/* Radio buttons */
.partners-page .be-parners-form .radio-group-container {
    margin-bottom: 10px;
}

.partners-page .be-parners-form .radio-options {
    display: flex;
    gap: 20px;
    margin-top: 5px;
}

.partners-page .be-parners-form .radio-option {
    display: flex;
    align-items: center;
}

.partners-page .be-parners-form .radio-option input[type="radio"] {
    margin-right: 8px;
}

/* Checkbox */
.partners-page .be-parners-form .checkbox-container {
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
}

.partners-page .be-parners-form .checkbox-container input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 3px;
}

.partners-page .be-parners-form .checkbox-container label {
    font-size: 14px;
    line-height: 1.4;
}

.partners-page .be-parners-form .checkbox-container a {
    color: #1d6e7c;
    text-decoration: underline;
}

/* Buttons */
.partners-page .be-parners-form .buttons-container {
    margin-top: 20px;
}

.partners-page .be-parners-form .buttons-content {
    display: flex;
    gap: 15px;
}

.partners-page .be-parners-form .form-back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #1d6e7c;
    border-radius: 5px;
    background-color: transparent;
    color: #1d6e7c;
    cursor: pointer;
    transition: all 0.3s ease;
}

.partners-page .be-parners-form .form-back-button:hover {
    background-color: #1d6e7c;
    color: white;
}

.partners-page .be-parners-form .form-submit {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* .partners-page .be-parners-form .form-submit:hover {
    background-color: #165761;
} */

.partners-page .be-parners-form .form-submit:disabled {
    background-color: #94a3a6;
    cursor: not-allowed;
}

/* reCAPTCHA notice */
.partners-page .be-parners-form .recaptcha-notice-minimal {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 12px;
    color: #6b7280;
}

.partners-page .be-parners-form .recaptcha-notice-minimal a {
    color: #6b7280;
    text-decoration: underline;
}

/* Partner options */
.partners-page .be-parners-form .partner-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.partners-page .be-parners-form .partner-option {
    flex: 0 0 calc(50% - 10px);
    border: 2px solid #d9e6e8;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.partners-page .be-parners-form .partner-option:hover {
    border-color: #1d6e7c;
    transform: translateY(-3px);
}

.partners-page .be-parners-form .partner-option.selected {
    border-color: #1d6e7c;
    background-color: #f0f7f8;
}

.partners-page .be-parners-form .partner-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.partners-page .be-parners-form .partner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #d9e6e8;
    border-radius: 50%;
    margin-right: 10px;
}

.partners-page .be-parners-form .partner-icon .material-symbols-outlined {
    color: #1d6e7c;
    font-size: 24px;
}

.partners-page .be-parners-form .partner-option h3 {
    margin: 0;
    font-size: 18px;
    color: #1d6e7c;
}

.partners-page .be-parners-form .partner-option p {
    font-size: 14px;
    margin: 10px 0;
}

.partners-page .be-parners-form .partner-option ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.partners-page .be-parners-form .partner-option ul li {
    font-size: 13px;
    margin-bottom: 5px;
    position: relative;
    padding-left: 15px;
}

.partners-page .be-parners-form .partner-option ul li::before {
    content: "•";
    color: #1d6e7c;
    position: absolute;
    left: 0;
}

/* Success step */
.partners-page .be-parners-form .success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}

.partners-page .be-parners-form .success-icon {
    font-size: 60px;
    color: #10b981;
    margin-bottom: 20px;
}

.partners-page .be-parners-form .success-title {
    font-size: 24px;
    color: #1d6e7c;
    margin-bottom: 15px;
}

.partners-page .be-parners-form .success-message {
    font-size: 16px;
    color: #4b5563;
    margin-bottom: 30px;
    max-width: 400px;
}

/* Progress bar */
.partners-page .be-parners-form .progress-container {
    height: 6px;
    background-color: #e5e7eb;
    margin-top: 30px;
}

.partners-page .be-parners-form .progress-bar {
    height: 100%;
    background-color: #1d6e7c;
    width: 0%;
    transition: width 0.5s ease;
    width: 33.3333%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
}

.partners-page .be-parners-form .progress-bar img{
    height: 25px;
    margin-bottom: 8px;
}

/* Alert styles */
.partners-page .be-parners-form .alert {
    padding: 12px 15px;
    border-radius: 5px;
    margin-top: 15px;
    font-size: 14px;
}

.partners-page .be-parners-form .alert-success {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.partners-page .be-parners-form .alert-danger {
    background-color: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* Responsive styles */
@media (max-width: 992px) {
    .bepartners-content {
        flex-direction: column;
    }
    
    .bepartners-left {
        flex: 0 0 300px;
    }
    
    .bepartners-right {
        flex: 1;
    }
    
    .partner-option {
        flex: 0 0 100%;
    }
}

@media (max-width: 768px) {
    .bepartners-left {
        display: none;
    }
    
    .bepartners-right {
        padding: 20px;
    }
    
    .form-title {
        font-size: 20px;
    }
    
    .option-button {
        font-size: 16px;
    }

    .partners-page .be-partners-container .be-partners-logo{
        width: 350px;
    }
}

  /* Responsive adjustments */
  @media (max-width: 900px) {
    .partner-tier-card {
      flex: 0 0 100%;
      max-width: 100%;
    }
    
    .partner-tiers-title {
      font-size: 24px;
    }
  }
  
  @media (max-width: 600px) {
    .tier-header {
      padding: 10px;
    }
    
    .tier-name {
      font-size: 18px;
    }
    
    .tier-tagline {
      font-size: 16px;
    }
    
    .tier-content p,
    .tier-benefits li {
      font-size: 14px;
    }
  }

  
@media screen and (max-width: 768px) {
    .partners-page .be-partners-content{
        flex-wrap: nowrap;
        flex-direction: column;
        gap: 0;
    }
    .partners-page .hexagon-img{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .partners-page .bee-path{
        display: none;
    }
    .partners-page .col-03{
        align-items: center;
        margin-top: 40px;
        gap: 20px;
    }
    .partners-page .join, .refer, .win {
        font-size: 20px;
    }
    .partners-page .bee {
        width: 16px;
    }
}
/* Ocultar o badge flutuante automático */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Estilo para o aviso minimalista do reCAPTCHA */
.recaptcha-notice-minimal {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 11px;
    color: #777;
    text-align: center;
}

.recaptcha-notice-minimal img {
    margin-right: 5px;
    vertical-align: middle;
}

.recaptcha-notice-minimal span {
    line-height: 16px;
}

.recaptcha-notice-minimal a {
    color: #777;
    text-decoration: none;
    transition: color 0.2s ease;
}

.recaptcha-notice-minimal a:hover {
    color: #333;
    text-decoration: underline;
}

.contact-container .alert {
    position: relative;
    margin-top: 15px;
    border-radius: 4px;
}

.contact-container .alert-danger {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.contact-container .alert-danger p{
    flex: 1;
    font-size: 11px;
}

.contact-container .close-alert {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
}

.contact-container .close-alert:hover {
    opacity: 1;
}

@media (max-width: 768px) {

    .partners-page .be-parners-form .form-input .input-with-icon {
        width: 100%;
    }

    .partners-page .be-parners-form .form-input .input-with-icon input {
        flex: 1;
    }

    .partners-page .be-parners-form .form-input {
        width: 320px;
    }

    .partners-page .be-parners-form .form-content {
        width: auto;
        align-items: center;
    }

    .partners-page .be-parners-form .bepartners-right {
        border-radius: 0; 
        margin: 10px;
    }

    .partners-page .be-parners-form .bepartners-right {
        padding: 0;
    }

    .partners-page .be-parners-form .be-partners-container {
        width: auto;
        justify-content: center;
    }

    .partners-page .be-parners-form .form-title {
        font-size: 20px;
        font-weight: 600;
    }

    .partners-page .be-parners-form .btn-back-container {
        justify-content: center;
    }

    .partners-page .be-parners-form .form-options {
        width: 300px
    }

    .partners-page .be-parners-form .bepartners-left{
        display: none
    }

    .partners-page .be-parners-form .form-step{
        align-items: center;
    }

    .partners-page .be-parners-form .btn-back, .partners-page .be-parners-form .btn-forward{
        justify-content: center;
    }

    .partners-page .form-content .form-row {
        flex-direction: column;
        gap: 16px;
    }
    
    .partners-page .form-content .title {
        font-size: 24px;
    }
    
    .partners-page .form-content .submit-button {
        width: 100%;
    }
}

@media screen and (max-width: 1220px) {
    .about-page .values-container{
        background-image: none;
    }
    .about-page .values-container .values-content .values-text{
        width: 100%;
    }
    .about-page .values-container .values-content .values-image-container{
        display: none
    }
}

@media (max-width: 1350px) {
    .partners-page .be-parners-form .bepartners-left{
        display: none
    }
}

@media screen and (max-width: 1550px) {
    :root{
        --product-module-width: 85vw;
    }
}

@media screen and (max-width: 1000px) {

    .product-module .banner .container-header .text{
        align-items: center;
    }

    /* .product-module .tabs-container input + label > .tab-content{
        flex-direction: column-reverse
    } */

    .product-module .tab-content{
        gap: 20px;
    }

    .product-module .tab-content .image{
        width: 90vw;
        align-self: center;
    }

    /* .product-module .tab-content .image{
        display: none;
    } */

    .product-module .banner .container-header .header-text-container{
        align-items: center;
    }

    .product-module .banner .container-header .text .description{
        text-align: center !important;
    }

    /* .product-module .banner .header-image{
        display: none;
    } */

    .product-module .container-free-trial .text-and-image h6{
        text-align: center !important;
    }
/* 
    .product-module .container-common-questions .image{
        display: none !important;
    } */

    .product-module .itens-container .title{
        width: 50vw;
    }

    .product-module .itens-container .card{
        width: 50%;
    }

}

/* ============================================================
   HERO SECTION - Página Inicial
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Estilização da seção hero com layout Flexbox,
              destaque visual para IA e botão de ação.
   ============================================================ */

:root {
  /* Tamanhos principais */
  --primary-width: 90vw;
  /* Cores principais */
  --primary-gradient-start: rgba(34, 190, 173, 0.7);
  --primary-gradient-end: rgba(148, 235, 166, 0.7);
  --text-primary: #0C3646;
  --text-white: #ffffff;
  --background-white: #ffffff;

  /* Cores de destaque */
  --highlight-bg: #FADC67;

  /* Cores de sombra */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
}

/* Hero Section */
.home-page .hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 105px;
  background:   linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end)),
                url("assets/images/couple-designers-using-digital-tablet.jpg") no-repeat center top / cover;;
}

.home-page .hero .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--primary-width);
  width: 100%;
  gap: 4rem;
}

.home-page .hero .text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 600px;
}

.home-page .hero .text-container h1 {
  font-size: 5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.home-page .hero .highlight-icon-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.home-page .hero .highlight-container {
  display: flex;
  padding: 0rem 1rem;
  position: relative;
}

.home-page .hero .highlight-content {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background-color: var(--highlight-bg);
  position: absolute;
  left: 0;
  z-index: 0;
  animation: highlight-text 1s forwards;
  transform-origin: 0 100%;
}

.home-page .hero .highlight-text {
  display: flex;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 3.2rem;
  margin: 0;
  z-index: 1;
}

@keyframes highlight-text {
  0%{
    transform: scaleX(0);
  }
  100%{
    transform: scaleX(1)
  }
}

.home-page .hero .highlight-icon-container i.sparkles{
  width: 23px;
  height: 23px;
  position: relative;
  align-self: flex-start;
}

.home-page .hero .highlight-icon-container .sparkles svg:first-child {
  color: var(--text-white);
  width: 2rem;
  height: 2rem;
  position: absolute;
  animation: sparkles-animation 3s forwards
}

.home-page .hero .highlight-icon-container .sparkles svg:last-child{
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-white);
  position: absolute;
  top: -8px;
  left: 16px;
  animation: sparkles-animation 2.4s forwards
}

@keyframes sparkles-animation {
  0% {
    transform: scale(0);
  }
  30% {
    transform: scale(1.2);

  }
  50% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.1);
  }
  90% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}


.home-page .hero .btn-free-trial-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-white);
    color: var(--text-primary);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.8rem;
    transition: all 0.3s ease;
    align-self: flex-start;
    box-shadow: 0 4px 15px var(--shadow-light);
}

.home-page .hero .btn-free-trial:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-medium);
}

.home-page .hero .image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 40vw;
  animation: fade-in 1s linear;
}

.home-page .hero .image-container img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 40px var(--shadow-light);
}

/* Responsive */
@media (max-width: 768px) {
  .home-page .hero {
    margin-top: 88px;
  }
    
  .home-page .hero .content {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .home-page .hero .text-container {
    align-items: center;
  }

  .home-page .hero .btn-free-trial-hero {
    align-self: center;
  }

  .home-page .hero .image-container {
    max-width: 90vw;
  }

  .home-page .hero .text-container h1 {
    font-size: 2.5rem;
  }

  .home-page .hero .highlight-icon-container {
    justify-content: center;
  }

  .home-page .hero .highlight-icon-container .sparkles svg:first-child {
    top: 10px;
    left: 0;
  }

  .home-page .hero .highlight-icon-container .sparkles svg:last-child {
    top: 0;
    left: 16px;
  }

  .home-page .hero .highlight-text{
    font-size: 2.4rem;
  }
}

/* === Fim HERO SECTION === */

/* ============================================================
   PERFORMANCE OVERVIEW SECTION - Página Inicial
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Estilização da seção de gestão de desempenho
              com layout Flexbox, destaques visuais e hexágonos.
   ============================================================ */

:root {
  /* Cores principais */
  --primary-blue: #196478;
  --secondary-blue: #1E6B7F;
  --background-light: #f8fafb;

  /* Cores de destaque */
  --highlight-bg: #fadc67;
  --highlight-text: #0c3646;

  /* Cores do botão */
  --button-bg: #fadc67;
  --button-text: #1E6B7F;
  --button-hover: #f5d147;

  /* Cores de sombra */
  --shadow-light: rgba(0, 0, 0, 0.08);
  --shadow-medium: rgba(0, 0, 0, 0.12);
}

/* Performance Overview Section */
.home-page .performance-overview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  background-color: var(--background-light);
  position: relative;
}

.home-page .performance-overview-content {
  display: flex;
  flex-direction: column;
  max-width: var(--primary-width);
  width: 100%;
  gap: 12rem;
}

.home-page .title-and-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.home-page .title-and-description .main-title {
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.2;
  margin: 0;
}

.home-page .title-and-description .main-description {
  font-size: 2.8rem;
  color: var(--secondary-blue);
  line-height: 1.6;
  /* max-width: 800px; */
  margin: 0;
}

.home-page .performance-overview-description-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.home-page .performance-overview-description-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}

.home-page .performance-overview-description-content #bee-animation{
  width: 300px;
  height: 300px;
  position: absolute;
  right: 0;
  bottom: 0;
}

.home-page .performance-overview-description {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 700px;
  gap: 1.5rem;
}

.home-page .performance-overview-description .section-subtitle {
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--secondary-blue);
  line-height: 1.4;
  margin: 0;
}

.home-page .performance-overview-description .section-subdescription {
  font-size: 2.4rem;
  color: var(--secondary-blue);
  line-height: 1.6;
  margin: 0;
}

.home-page .performance-overview-description .section-subdescription .bold-text {
  font-weight: 600;
}

.home-page .performance-overview-container .highlight-text {
    display: inline-grid;
    position: relative;
}

.home-page .performance-overview-container .highlight-text .highlight-content{
    width: 100%;
    height: 100%;
    background: #fadc67;
    border-radius: 3px;
    padding-inline: 6px;
    position: absolute;
    right: -6px;
    z-index: 0;
    animation: highlight-text 1s forwards;
    transform-origin: 0 100%;
}

.home-page .performance-overview-container .highlight-text span:last-child {
    z-index: 1;
}

.home-page .hexagons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 400px;
}

.home-page .btn-learn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--button-bg);
    color: var(--button-text);
    padding: 1.2rem 3.2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.8rem;
    transition: all 0.3s ease;
    align-self: center;
    box-shadow: 0 4px 15px var(--shadow-light);
}

.home-page .btn-learn-more:hover {
  background-color: var(--button-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-medium);
}

.home-page .btn-learn-more svg {
  width: 1.2rem;
  height: 1.2rem;
  transition: transform 0.3s ease;
}

.home-page .btn-learn-more:hover svg {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1024px) {
  .home-page .performance-overview-description-content {
    flex-direction: column-reverse;
    text-align: center;
    gap: 3rem;
  }

  .home-page .performance-overview-description {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .home-page .performance-overview-container {
    padding: 4rem 1rem;
  }

  .home-page .title-and-description .main-title {
    font-size: 2.5rem;
  }

  .home-page .title-and-description .main-description {
    font-size: 1.6rem;
  }

  .home-page .performance-overview-description .section-subtitle {
    font-size: 1.6rem;
  }

  .home-page .performance-overview-description .section-subdescription {
    font-size: 1.4rem;
  }

  .home-page .performance-overview-content {
    gap: 10rem;
  }

  .home-page .btn-learn-more{
    font-size: 1.6rem;
    padding: 0.6rem 1.5rem;
  }
}

/* === Fim PERFORMANCE OVERVIEW SECTION === */

/* ============================================================
   AI DECISIONS SECTION - Página Inicial
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Estilização da seção de decisões estratégicas com IA
              com layout Flexbox e destaque visual.
   ============================================================ */

:root {
  /* Novas cores específicas desta seção */
  --background-yellow: #FBE079;
  --button-solutions-bg: #4ecdc4;
  --button-solutions-text: #ffffff;
  --button-solutions-hover: #44b3a8;
}

/* AI Decisions Section */
.home-page .ai-decisions-container {
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-yellow);
  position: relative;
}

.home-page .ai-decisions-content {
  width: var(--primary-width);
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6rem;
}

.home-page .ai-decisions-text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 700px;
  gap: 2rem;
}

.home-page .ai-decisions-text-container .ai-decisions-title {
  font-size: 3.8rem;
  font-weight: 750;
  color: var(--primary-blue);
  line-height: 1.2;
  margin: 0;
}

.home-page .ai-decisions-text-container .ai-decisions-subtitle {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--secondary-blue);
  line-height: 1.3;
  margin: 0;
}

.home-page .ai-decisions-text-container .ai-decisions-description {
  font-size: 2.2rem;
  color: var(--secondary-blue);
  line-height: 1.5;
  margin: 0;
}

.home-page .ai-decisions-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-page .ai-decisions-list .ai-decisions-list-item {
  font-size: 2.2rem;
  color: var(--secondary-blue);
  line-height: 1.4;
  position: relative;
  padding-left: 2rem;
}

.home-page .ai-decisions-list .ai-decisions-list-item::before {
  content: "•";
  color: var(--primary-blue);
  font-weight: 700;
  font-size: 2.4rem;
  position: absolute;
  left: 0;
  top: -0.2rem;
}

.home-page .btn-solutions {
  width: 17.6rem;
  height: 4.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--button-solutions-bg);
  color: var(--button-solutions-text);
  padding: 1.2rem 3.2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.8rem;
  transition: all 0.3s ease;
  align-self: flex-start;
  box-shadow: 0 4px 15px var(--shadow-light);
}

.home-page .btn-solutions:hover {
  background-color: var(--button-solutions-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-medium);
}

.home-page .ai-decisions-image-container {
  max-width: 500px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
}

.home-page .ai-decisions-image-container img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  position: absolute;
  bottom: 0;
}

.home-page .ai-decisions-image-container .befective-ai-ballon {
  width: 60%;
  height: auto;
  border-radius: 12px;
  /* position: fixed; */
  bottom: 40%;
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

@keyframes fade-in{
  from{
    opacity: 0;
    transform: translateY(100px);
  }
  to{
    opacity: 1;
    transform: translateY(0px);
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .home-page .ai-decisions-content {
    height: 700px;
    flex-direction: column;
    text-align: center;
    gap: 4rem;
  }

  .home-page .ai-decisions-text-container {
    max-width: 100%;
  }

  .home-page .ai-decisions-list .ai-decisions-list-item::before {
    display: none;
  }

  .home-page .ai-decisions-list .ai-decisions-list-item {
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .home-page .ai-decisions-container {
    height: 700px;
    padding: 4rem 1rem 0 1rem;
  }

  .home-page .ai-decisions-text-container .ai-decisions-title {
    font-size: 2rem;
  }

  .home-page .ai-decisions-text-container .ai-decisions-subtitle {
    font-size: 2rem;
  }

  .home-page .ai-decisions-text-container .ai-decisions-description {
    font-size: 1.8rem;
  }

  .home-page .ai-decisions-list .ai-decisions-list-item {
    font-size: 1.6rem;
  }

  .home-page .btn-solutions {
    font-size: 1.4rem;
    padding: 0;
    align-self: center;
  }

  .home-page .ai-decisions-image-container {
    width: 200px;
    height: 264px;
    align-self: center;
  }
}

/* ============================================================
   TEAM USAGE SECTION - Página Inicial
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Estilização da seção sobre uso interno do Befective
              com layout Flexbox e call-to-action.
   ============================================================ */

:root {
  /* Novas cores específicas desta seção */
  --background-beige: #f0f0e8;
  --button-schedule-bg: #fadc67;
  --button-schedule-text: #1e6b7f;
  --button-schedule-hover: #f5d147;
}

/* Team Usage Section */
.home-page .team-usage-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  background-color: var(--background-beige);
  position: relative;
}

.home-page .team-usage-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--primary-width);
  width: 100%;
  gap: 6rem;
}

.home-page .team-usage-text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 700px;
  gap: 2rem;
}

.home-page .team-usage-text-container .team-usage-title {
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.2;
  margin: 0;
}

.home-page .team-usage-text-container .team-usage-description {
  font-size: 2.2rem;
  color: var(--secondary-blue);
  line-height: 1.5;
  margin: 0;
}

.home-page .team-usage-text-container .team-usage-highlight {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--secondary-blue);
  line-height: 1.5;
  margin: 0;
}

.home-page .btn-schedule-meeting {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--button-schedule-bg);
  color: var(--button-schedule-text);
  padding: 1.2rem 3.2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.8rem;
  transition: all 0.3s ease;
  align-self: flex-start;
  box-shadow: 0 4px 15px var(--shadow-light);
}

.home-page .btn-schedule-meeting:hover {
  background-color: var(--button-schedule-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-medium);
}

.home-page .team-usage-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 700px;
  opacity: 0;
  transition: opacity 2s;
}

.home-page .team-usage-image-container img {
  width: 100%;
  height: auto;
}

/* Responsive */
@media (max-width: 1024px) {
  .home-page .team-usage-content {
    flex-direction: column;
    text-align: center;
    gap: 4rem;
  }

  .home-page .team-usage-text-container {
    max-width: 100%;
  }
}

@media (max-width: 850px) {
  .home-page .team-usage-container {
    padding: 4rem 1rem;
  }

  .home-page .team-usage-text-container .team-usage-title {
    font-size: 1.8rem;
  }

  .home-page .team-usage-text-container .team-usage-description {
    font-size: 1.6rem;
  }

  .home-page .team-usage-text-container .team-usage-highlight {
    font-size: 1.6rem;
  }

  .home-page .btn-schedule-meeting {
    font-size: 1.6rem;
    padding: 0.5rem 1.25rem;
    align-self: center;
  }

  .home-page .blog-page .posts {
    flex-direction: column;
    margin: 0;
  }

  .content-block.blog .posts {
    flex-direction: column;
    margin: 0;
    height: auto;
  }

  .blog .container.start.column {
    flex-direction: column !important;
    max-width: 100% !important;
    width: 80% !important;
    padding-right: 5% !important;
    padding-left: 5% !important;
  }

  .content-block.blog .posts .post{
    width: 100% !important;
    max-width: inherit !important;
    margin-bottom: 30px;
  }

  .content-block.blog .posts .post .image {
    width: 100% !important;
  }

  .blog .posts .post .more {
    width: 150px;
    height: auto;
    opacity: 1;
  }

  .content-block.blog .posts .post img {
    width: 100%;
  }
}

/* === Fim TEAM USAGE SECTION === */

/* ============================================================
   MODULES SECTION
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 09/07/2025
   Descrição: Estilização padrão de todos os módulos
   ============================================================ */

:root {
  /* Cores específicas dos módulos */
  --module-active-title: #f39c12;
  --module-inactive-title: var(--secondary-blue);
  --module-icon-active: #fadc67;
  --module-icon-inactive: #e8e8e8;
  --check-icon-color: #4ecdc4;
}

/* Hero Section */
.module-page .hero {
  min-height: 60vh;
  display: flex;
  justify-content: center;
  margin-top: 105px;
  background:   linear-gradient(135deg, rgba(34, 190, 173, 0.9), rgba(9, 143, 129, 0.9)),
                url("assets/images/modules/collaborative-work-desk-with-computers.avif") no-repeat center top / cover;
  background-attachment: fixed;
}

.module-page.working-day .hero {
  min-height: 60vh;
  display: flex;
  justify-content: center;
  margin-top: 105px;
  background:   linear-gradient(135deg, rgba(250, 220, 103, 0.9), rgba(34, 190, 173, 0.9)),
                url("assets/images/modules/working-day/desktop-with-a-computer.avif") no-repeat center top / cover;
  background-attachment: fixed;
}

.module-page.resource-management .hero {
  min-height: 60vh;
  display: flex;
  justify-content: center;
  margin-top: 105px;
  background:   linear-gradient(135deg, rgba(30, 107, 127, 0.9), rgba(34, 190, 173, 0.9)),
                url("assets/images/modules/resource-management/company-room-with-some-computers.avif") no-repeat center top / cover;
  background-attachment: fixed;
}

.module-page .hero .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--primary-width);
  width: 100%;
  gap: 4rem;
  padding-top: 60px;
}

.module-page .hero .text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 670px;
}

.module-page .hero .text-container h1 {
  font-size: 5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 4rem;
}

.module-page .hero .highlight-icon-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.module-page .hero .highlight-container {
  display: flex;
  padding: 0rem 1rem;
  position: relative;
}

.module-page .hero .highlight-content {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background-color: var(--highlight-bg);
  position: absolute;
  left: 0;
  z-index: 0;
  animation: highlight-text 1s forwards;
  transform-origin: 0 100%;
}

.module-page .hero .highlight-text {
  display: flex;
  text-align: center;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 3.2rem;
  margin: 0;
  z-index: 1;
}

@keyframes highlight-text {
  0%{
    transform: scaleX(0);
  }
  100%{
    transform: scaleX(1)
  }
}

.module-page .hero .title-container span{
  font-size: 30px;
  color: white;
  position: relative;
}

.module-page .hero .btn-free-trial-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-white);
  color: var(--text-primary);
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.8rem;
  transition: all 0.3s ease;
  align-self: flex-start;
  box-shadow: 0 4px 15px var(--shadow-light);
}

.module-page .hero .btn-free-trial:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-medium);
}

.module-page .hero .image-container {
  display: flex;
  align-items: center;
  align-self: flex-end;
  justify-content: center;
  flex: 1;
  max-width: 500px;
  /* animation: fade-in 2s linear; */
  position: relative;
  margin-right: 80px;
}

.module-page.work-schedule-control .hero .image-container {
  max-width: 400px;
}

.module-page .hero .image-container img{
  height: auto;
  position: absolute;
}

.module-page .hero .image-container img:first-child{
  position: relative;
}

.module-page .hero .image-container .main-image{
  width: 100%;
  height: auto;
  z-index: 1;
}

.module-page .hero .image-container .parallax-element-back{
  z-index: 0;
  animation: fade-in 2s linear;
}

.module-page .hero .image-container .parallax-element-middle{
  z-index: 2;
  animation: fade-in 1.5s linear;
}

.module-page .hero .image-container .parallax-element-front{
  z-index: 2;
  animation: fade-in 1s linear;
}

/* Modules Overview Section */
.module-page .modules-overview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 0;
  background-color: var(--background-beige);
  position: relative;
}

.module-page .modules-overview-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 6rem;
}

.module-page .modules-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.module-page .modules-main-title {
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.2;
  margin: 0;
  max-width: 1400px;
}

.module-page .modules-main-title .highlight-text {
    display: inline-grid;
    position: relative;
}

.module-page .modules-main-title .highlight-text .highlight-content{
    width: 100%;
    height: 100%;
    background: #fadc67;
    border-radius: 3px;
    padding-inline: 6px;
    position: absolute;
    right: -6px;
    z-index: 0;
    animation: highlight-text 1s forwards;
    transform-origin: 0 100%;
}

.module-page .modules-main-title .highlight-text span:last-child {
    z-index: 1;
}

.module-page .modules-container {
  display: flex;
  flex-direction: column;
  position: relative;
}

.module-page .module-item {
  display: flex;
  justify-content: center;
  transition: all 0.5s ease-in-out;
  border: solid 1px rgba(250 220 103 / 0%);
}

.module-page .module-item.active {
  opacity: 1;
  background: rgba(250 220 103 / 10%);
  border: solid 1px rgba(250 220 103 / 67%);
}

.module-page .modules-container .inviseble-bee-progress-line {
  width: 0;
  height: 95%;
  top: 30px;
  left: 20px;
  background: black;
  position: absolute;
}

.module-page .modules-container .inviseble-bee-progress-line .bee-progress{
  width: 34px;
  height: auto;
  position: sticky;
  top: 200px;
  left: 40px;
}

.module-page .module-content {
  max-width: var(--primary-width);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 6rem;
  position: relative;
  padding: 50px 0;
}

.module-page .module-content .progress-line{
  width: 25px;
  height: 100%;
  background-color: rgb(244 213 133 / 25%);
  position: absolute;
  left: 24px;
  bottom: 0;
}

.module-page .module-content .progress-line.first{
  height: 95%;
  border-radius: 20px 20px 0 0;
}

.module-page .module-content .progress-line.last{
  height: 95%;
  border-radius: 0 0 20px 20px;
  top: 0;
}


.module-page .module-text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 600px;
  gap: 2rem;
}

.module-page .module-icon-title {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
}

.module-page .module-icon-title span {
  font-size: 4.5rem;
  color: var(--secondary-blue);
  position: absolute;
  left: 14px;
  z-index: 1;
}

.module-page .module-icon-container {
  width: 64.5PX;
  height: 100px;
  position: absolute;
  background: linear-gradient(#FADC67, #F1B017);
  filter: saturate(0);
  margin: 4px;
  border-radius: 10px;
  transform: rotate(30deg);
  opacity: 1;
  transition: all 0.5s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  /* animation-range: entry 0% cover 30%; */
}

.module-page .module-icon-container:before, .module-page .module-icon-container:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  background: inherit;
  border-radius: inherit;
  z-index: 0;
}
.module-page .module-icon-container:before {
  transform: rotate(60deg);
}
.module-page .module-icon-container:after {
  transform: rotate(-60deg);
}

.module-page .module-item.active .module-icon-container {
  filter: saturate(1);
}

.module-page .module-title {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--module-inactive-title);
  line-height: 1.2;
  margin: 0;
  transition: all 0.5s ease-in-out;
  margin-left: 10rem;
}

.module-page .module-item.active .module-title {
  color: var(--module-active-title);
}

.module-page .module-features-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: 10rem;
}

.module-page .module-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 2.2rem;
  color: var(--secondary-blue);
  line-height: 1.4;
}

.module-page .check-icon {
  font-size: 2.4rem;
  color: var(--check-icon-color);
  margin-top: 0.2rem;
  flex-shrink: 0;
  transition: all 0.5s ease-in-out;
}

.module-page .module-item.active .module-feature-item .check-icon{
  color: var(--module-active-title);
}

.module-page .module-feature-item strong{
  margin-left: 3.2rem;
}

.module-page .module-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 600px;
}

.module-page .module-image-container img {
  width: 100%;
  height: auto;
  max-height: 500px;
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 1550px) {  
  .module-page .hero .image-container{
    max-width: 400px;
    margin-right: 0;
  }

  .module-page.work-schedule-control .hero .image-container{
    max-width: 350px;
    margin-right: 0;
  }
}

@media (max-width: 1180px) {  
  .module-page .hero .content{
    flex-direction: column;

  }

  .module-page .hero .image-container{
    align-self: center;
  }

  .module-page .hero .text-container{
    align-items: center;
  }

  .module-page .hero .title-container{
    text-align: center
  }

  .module-page .hero .btn-free-trial-hero{
    align-self: center;
  }
}

@media (max-width: 1024px) {
  .module-page .module-content {
    flex-direction: column;
    text-align: center;
    gap: 4rem;
  }

  .module-page .module-text-container {
    width: 100%;
  }

  .module-page .modules-main-title{
    font-size: 1.8rem;
  }

  .module-page .module-icon-title {
    justify-content: center;
  }

  .module-page .modules-container .inviseble-bee-progress-line{
    left: 5px
  }

  .module-page .modules-container .inviseble-bee-progress-line .bee-progress{
    width: 26px
  }
}

@media (max-width: 1024px) {
  .module-page .module-content .progress-line{
    display: none;
  }

  .module-page .module-icon-container{
    width: 51.6px;
    height: 80px;
    top: -100px;
    left: auto;
  }

  .module-page .module-title {
    font-size: 2rem;
    margin-left: 0;
  }

  .module-page .module-icon-title span{
    font-size: 4rem;
    top: -76px;
    left: auto;
  }

  .module-page .module-features-list{
    margin-left: 0;
  }

  .module-page .module-feature-item{
    font-size: 1.6rem;
    text-align: left;
  }

  .module-page .modules-container .inviseble-bee-progress-line{
    display: none;
  }
}

@media (max-width: 630px) {
  .module-page .hero{
    margin-top: 85px;
  }

  .module-page.working-day .hero{
    margin-top: 85px;
  }

  .module-page.resource-management .hero{
    margin-top: 85px;
  }

  .module-page .hero .highlight-text{
    font-size: 2.4rem; 
  }

  .module-page .hero .text-container h1 {
    font-size: 3.2rem;
  }

}
/* ============================================================
   CHALLENGES SECTION - Página de Módulos
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Estilização da seção de desafios empresariais
              com layout em grid flexível.
   ============================================================ */

:root {
  /* Cores específicas da seção de desafios */
  --challenge-icon-bg: #fadc67;
  --challenge-card-bg: #ffffff;
  --challenge-card-border: rgba(0, 0, 0, 0.08);
}

/* Challenges Section */
.module-page .challenges-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  background-color: var(--background-beige);
  position: relative;
}

.module-page .challenges-content {
  width: 100%;
  max-width: var(--primary-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}

.module-page .challenges-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.module-page .challenges-main-title {
  font-size: 4rem;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.3;
  margin: 0;
}

.module-page .challenges-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  width: 100%;
}

.module-page .challenges-grid.four-children .challenge-card{
  min-width: 600px;
}

.module-page .challenges-grid.four-children .challenge-card:nth-child(1){
  border-right: 2px solid rgba(161 157 157 / 50%);
}

.module-page .challenges-grid.four-children .challenge-card:nth-child(3){
  border-right: 2px solid rgba(161 157 157 / 50%);
}

@media (max-width: 1457px){
  .module-page .challenges-grid.four-children .challenge-card{
    min-width: auto;
  }

  .module-page .challenges-grid.four-children .challenge-card:nth-child(1){
    border-right: 0;
  }

  .module-page .challenges-grid.four-children .challenge-card:nth-child(3){
    border-right: 0;
  }
}

@media (max-width: 768px){
   .module-page .challenges-grid.four-children .challenge-card{
    min-width: auto;
   }
  .module-page .challenges-grid.four-children .challenge-card:nth-child(1){
    border-right: 0
  }

  .module-page .challenges-grid.four-children .challenge-card:nth-child(2){
    border-right: 0
  }

  .module-page .challenges-grid.four-children .challenge-card:nth-child(3){
    border-right: 0
  }

  .module-page .challenges-grid.four-children .challenge-card:nth-child(4){
    border-right: 0
  }
}

.module-page .challenges-grid.five-children .challenge-card:nth-child(1){
  border-right: 2px solid rgba(161 157 157 / 50%);
}

.module-page .challenges-grid.five-children .challenge-card:nth-child(2){
  border-right: 2px solid rgba(161 157 157 / 50%);
}

.module-page .challenges-grid.five-children .challenge-card:nth-child(4){
  border-right: 2px solid rgba(161 157 157 / 50%);
}

@media (max-width: 1468px){
  .module-page .challenges-grid.five-children .challenge-card:nth-child(1){
    border-right: 2px solid rgba(161 157 157 / 50%);
  }

  .module-page .challenges-grid.five-children .challenge-card:nth-child(2){
    border-right: 0
  }

  .module-page .challenges-grid.five-children .challenge-card:nth-child(3){
    border-right: 2px solid rgba(161 157 157 / 50%);
  }

  .module-page .challenges-grid.five-children .challenge-card:nth-child(4){
    border-right: 0
  }
}

@media (max-width: 768px){
  .module-page .challenges-grid.five-children .challenge-card:nth-child(1){
    border-right: 0
  }

  .module-page .challenges-grid.five-children .challenge-card:nth-child(2){
    border-right: 0
  }

  .module-page .challenges-grid.five-children .challenge-card:nth-child(3){
    border-right: 0
  }

  .module-page .challenges-grid.five-children .challenge-card:nth-child(4){
    border-right: 0
  }
}

.module-page .challenges-grid.six-children .challenge-card:nth-child(1){
  border-right: 2px solid rgba(161 157 157 / 50%);
}

.module-page .challenges-grid.six-children .challenge-card:nth-child(2){
  border-right: 2px solid rgba(161 157 157 / 50%);
}

.module-page .challenges-grid.six-children .challenge-card:nth-child(4){
  border-right: 2px solid rgba(161 157 157 / 50%);
}

.module-page .challenges-grid.six-children .challenge-card:nth-child(5){
  border-right: 2px solid rgba(161 157 157 / 50%);
}

@media (max-width: 1468px){
  .module-page .challenges-grid.six-children .challenge-card:nth-child(1){
    border-right: 2px solid rgba(161 157 157 / 50%);
  }

  .module-page .challenges-grid.six-children .challenge-card:nth-child(2){
    border-right: 0
  }

  .module-page .challenges-grid.six-children .challenge-card:nth-child(3){
    border-right: 2px solid rgba(161 157 157 / 50%);
  }

  .module-page .challenges-grid.six-children .challenge-card:nth-child(4){
    border-right: 0
  }
}

@media (max-width: 967px){
  .module-page .challenges-grid.six-children .challenge-card:nth-child(1){
    border-right: 0
  }

  .module-page .challenges-grid.six-children .challenge-card:nth-child(3){
    border-right: 0
  }

  .module-page .challenges-grid.six-children .challenge-card:nth-child(5){
    border-right: 0
  }
}

.module-page .challenge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 2rem;
  gap: 2rem;
  flex: 1 1 calc(33.333% - 2rem);
  min-width: 300px;
  max-width: 380px;
  transition: all 0.3s ease;
}

.module-page .challenge-card:nth-child(4),
.module-page .challenge-card:nth-child(5) {
  flex: 1 1 calc(50% - 1.5rem);
}

.module-page .challenge-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--challenge-icon-bg);
  border-radius: 50%;
  flex-shrink: 0;
}

.module-page .challenge-icon-container span {
  font-size: 5rem;
  color: var(--secondary-blue);
}

.module-page .challenge-text {
  font-size: 2rem;
  color: var(--secondary-blue);
  line-height: 1.4;
  margin: 0;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 1024px) {
  .module-page .challenge-card {
    flex: 1 1 calc(50% - 1.5rem);
    min-width: 280px;
  }

  .module-page .challenge-card:nth-child(4),
  .module-page .challenge-card:nth-child(5) {
    flex: 1 1 calc(50% - 1.5rem);
  }
}

@media (max-width: 768px) {
  .module-page .challenges-container {
    padding: 4rem 1rem;
  }

  .module-page .challenges-main-title {
    font-size: 1.6rem;
  }

  .module-page .challenges-grid {
    gap: 2rem;
  }

  .module-page .challenge-card {
    flex: 1 1 100%;
    min-width: unset;
    max-width: unset;
    padding: 2.5rem 2rem;
  }

  .module-page .challenge-card:nth-child(4),
  .module-page .challenge-card:nth-child(5) {
    flex: 1 1 100%;
  }

  .module-page .challenge-text {
    font-size: 1.6rem;
  }

  .module-page .challenge-icon-container {
    width: 70px;
    height: 70px;
  }

  .module-page .challenge-icon-container span {
    font-size: 3.5rem;
  }
}

.module-page .container-common-questions.faq{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

.module-page .content-common-questions{
    width: var(--product-module-width);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 64px;
}

.module-page .container-common-questions .main-title{
    width: 90%;
    font-size: 32px;
    color: #1E6B7F;
    font-weight: 700;
    text-align: center;
    margin-bottom: 100px;
    justify-self: start;
}

.module-page .container-common-questions .title{
    font-size: 24px;
    color: #1E6B7F;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    justify-self: start;
}

.module-page .container-common-questions .list{
    flex: 1;
}


.module-page .container-common-questions .list ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.module-page .container-common-questions .list ul li {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 50px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    cursor: pointer;
    max-height: 100px;
    overflow: hidden;
    transition: all ease 1s;
    color: #1E6B7F;
    border-bottom: 1px solid #D3D6C2; 
}

.module-page .container-common-questions .list ul li.expanded {
    max-height: 1000px;
    transition: all ease-out 2s;
}


.module-page .container-common-questions .list ul li h5{
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
}

.module-page .container-common-questions .list ul li.expanded {
    max-height: 1000px;
    transition: all ease-out 2s;
}

.module-page .container-common-questions .list ul li h5 p{
    flex: 1;
}

.module-page .container-common-questions .list ul li h5 div.more {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #22BEAD;
    border-radius: 50px;
}

.module-page .container-common-questions .list ul li.expanded h5 div.more {
    display: none;
}

.module-page .container-common-questions .list ul li .more span{
    color: white;
    font-size: 18px;
    font-weight: 500;
    -webkit-text-stroke: 0px;
}

.module-page .container-common-questions .list ul li.expanded h5 div.minus {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F8D16E;
    color: #1E6B7F !important;
    border-radius: 50px;
}

.module-page .container-common-questions .list ul li h5 div.minus {
    display: none;
}

.module-page .container-common-questions .list ul li .minus span{
    color: #1E6B7F !important;
    font-size: 18px;
    font-weight: 500;
    -webkit-text-stroke: 0px;
}

.module-page .container-common-questions .list ul li .text{
    display: none;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    text-wrap: wrap;
    transition: all ease-out 2s;
}

.module-page .container-common-questions .list ul li.expanded .text{
    display: block;
}

.module-page .container-free-trial .text-and-image h6{
    text-align: start;
}

.module-page .content-free-trial{
    width: 70vw;
    column-gap: 30px;
}

.module-page .content-free-trial .text-and-image{
    flex: 1
}

@media screen and (max-width: 768px) {
  .product-module .container-common-questions .list {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }

  .product-module .container-common-questions .list ul li{
      width: 90vw !important;
  }

  .product-module .container-common-questions .list ul li h5 {
      font-size: 14px !important;
  }


  .product-module .container-common-questions .list ul li .text {
      width: 100% !important;
      font-size: 13px !important;
  }

  .product-module .content-common-questions{
      gap: 20px !important;
      flex-direction: column-reverse;
  }

  .product-module .container-common-questions .title{
      margin-bottom: 20px !important;
  }

  .module-page .container-common-questions .main-title{
    font-size: 1.8rem;
  }

  .module-page .container-common-questions .title {
    font-size: 1.8rem;
    justify-self: center;
  }

  .module-page .container-common-questions .list ul li h5 {
    font-size: 1.6rem;
  }

  .module-page .container-common-questions .list ul li .text {
    font-size: 1.6rem;
  }
}



/* === Fim CHALLENGES SECTION === */


.performance-assessment-page .img-man-watching-in-laptop{
  width: 100%;
  height: auto;
  z-index: 1;
  animation: fade-in 1.5s linear;
}

.performance-assessment-page .img-man-watching-in-laptop img{
  will-change: transform;
  transition: transform 0.2s ease-out;
}

.performance-assessment-page .img-activities-chart{
    width: 220px;
    left: -100px;
    top: 50px;
}

.performance-assessment-page .img-day-work-chart{
    width: 220px;
    right: -80px;
    bottom: 100px;
}

.performance-assessment-page .img-befecive-ai-ballon{
    width: 280px;
    bottom: 100px;
    left: 30px;
}

@media (max-width: 1550px) {  
  .performance-assessment-page .img-activities-chart{
      width: 150px;
      left: -40px;
  }

  .performance-assessment-page .img-day-work-chart{
      width: 150px;
      right: -40px;
  }

  .performance-assessment-page .img-befecive-ai-ballon{
      width: 220px;
      bottom: 60px;
  }
}

@media (max-width: 630px) {  
  .performance-assessment-page .img-activities-chart{
      width: 120px;
      left: -20px;
  }

  .performance-assessment-page .img-day-work-chart{
      width: 130px;
      right: -20px;
  }

  .performance-assessment-page .img-befecive-ai-ballon{
      width: 200px;
      bottom: 70px;
      left: 0;
  }
}

.mood-state-page .hero .image-container{
    max-width: 900px;
    margin: 0;
}

.mood-state-page .img-card-mood{
    top: 40px;
    left: -40px;
}

.mood-state-page .img-card-human-resource-contact{
    top: 40px;
    right: -20px;
}

@media (max-width: 1550px) {  
  .mood-state-page .hero .image-container{
    max-width: 650px;
  }

  .mood-state-page .img-card-mood{
    width: 150px;
    top: 50px;
    left: -40px;
  }

  .mood-state-page .img-card-human-resource-contact{
    width: 150px;
    right: 0px;
  }
}

@media (max-width: 630px) {  
  .mood-state-page .img-card-mood{
    width: 80px;
    left: -10px;
    top: 50px;
  }

  .mood-state-page .img-card-human-resource-contact{
    width: 80px;
    right: 10px;
  }
}

.okrs-module-page .img-card-mood{
    top: 180px;
    left: -40px;
}

.okrs-module-page .img-card-human-resource-contact{
    top: 120px;
    right: -100px;
}

@media (max-width: 1550px) {  
  .okrs-module-page .hero .image-container{
    max-width: 410px;
  }

  .okrs-module-page .img-card-mood{
    width: 180px;
    top: 160px;
    left: -20px;
  }

  .okrs-module-page .img-card-human-resource-contact{
    width: 180px;
    right: -50px;
  }
}

@media (max-width: 1180px) {  
  .okrs-module-page .img-card-mood{
    width: 180px;
    top: 100px;
    left: -60px;
  }

  .okrs-module-page .img-card-human-resource-contact{
    width: 180px;
    top: 50px;
    right: -100px;
  }
}

@media (max-width: 630px) {  
  .okrs-module-page .img-card-mood{
    width: 150px;
    left: -40px;
    top: 120px;
  }

  .okrs-module-page .img-card-human-resource-contact{
    width: 130px;
    right: -30px;
    top: 100px;
  }
}

.productive-time-management-page .img-woman-watching-in-laptop{
  width: 100%;
  height: auto;
  z-index: 1;
  animation: fade-in 1.5s linear;
}

.productive-time-management-page .img-activities-chart{
    width: 220px;
    left: -100px;
    top: 50px;
}

.productive-time-management-page .img-day-work-chart{
    width: 220px;
    right: -80px;
    bottom: 100px;
}

.productive-time-management-page .img-befecive-ai-ballon{
    width: 280px;
    bottom: 100px;
    left: 30px;
}

@media (max-width: 1550px) {  
  .productive-time-management-page .img-activities-chart{
      width: 150px;
      left: -40px;
  }

  .productive-time-management-page .img-day-work-chart{
      width: 150px;
      right: -40px;
  }

  .productive-time-management-page .img-befecive-ai-ballon{
      width: 220px;
      bottom: 60px;
  }
}

@media (max-width: 630px) {  
  .productive-time-management-page .img-activities-chart{
      width: 120px;
      left: -20px;
  }

  .productive-time-management-page .img-day-work-chart{
      width: 130px;
      right: -20px;
  }

  .productive-time-management-page .img-befecive-ai-ballon{
      width: 200px;
      bottom: 70px;
      left: 0;
  }
}

.module-page.performance-evaluation-page .hero .image-container{
    max-width: 400px;
}

.performance-evaluation-page .img-individual-development-plan{
    bottom: 350px;
    left: -60px;
}

.performance-evaluation-page .img-card-with-pdi{
    bottom: 350px;
    right: -150px;
}

@media (max-width: 1550px) {  
  .module-page.performance-evaluation-page .hero .image-container{
    max-width: 330px;
    margin-right: 100px;
  }

  .performance-evaluation-page .img-individual-development-plan{
    bottom: 230px;
    width: 130px;
    left: -60px;
  }

  .performance-evaluation-page .img-card-with-pdi{
    bottom: 230px;
    width: 150px;
    right: -100px;
  }
}

@media (max-width: 630px) {  
  .performance-evaluation-page .img-individual-development-plan{
    width: 100px;
    left: -20px;
    bottom: 220px;
  }

  .performance-evaluation-page .img-card-with-pdi{
    width: 100px;
    right: -60px;
    bottom: 220px;
  }
}


.individual-feedback-page .img-one-one-meeting{
    top: 160px;
    left: -170px;
}

.individual-feedback-page .img-list-of-people{
    top: 100px;
    right: -150px;
}

@media (max-width: 1550px) {  
  .individual-feedback-page .hero .image-container{
    max-width: 500px;
    margin-right: 80px;
  }

  .individual-feedback-page .img-one-one-meeting{
    width: 200px;
    left: -150px;
  }

  .individual-feedback-page .img-list-of-people{
    width: 180px;
    right: -120px;
  }
}

@media (max-width: 630px) {  
  .individual-feedback-page .img-one-one-meeting{
    width: 100px;
    top: 50px;
    left: -10px;
  }

  .individual-feedback-page .img-list-of-people{
    width: 100px;
    top: 150px;
    right: -10px;
  }
}

.individual-pdi-page .img-individual-development-plan{
    width: 220px;
    top: 0px;
    left: -120px;
}

.individual-pdi-page .img-card-with-pdi{
    width: 350px;
    top: 30px;
    right: -150px;
}

@media (max-width: 1550px) {  
  .individual-pdi-page .hero .image-container{
    max-width: 450px;
  }

  .individual-pdi-page .img-individual-development-plan{
    width: 150px;
    top: 60px;
    left: -50px;
  }

  .individual-pdi-page .img-card-with-pdi{
    width: 220px;
    top: 60px;
    right: -50px;
  }
}

@media (max-width: 630px) {  
  .individual-pdi-page .img-individual-development-plan{
    width: 100px;
    left: -10px;
    top: 50px;
  }

  .individual-pdi-page .img-card-with-pdi{
    width: 140px;
    right: -10px;
  }
}

.virtual-assistant-page .img-card-slide-to-check-in{
    width: 200px;
    top: 60px;
    left: -40px;
}

.virtual-assistant-page .img-card-remote-checkin-time{
    width: 200px;
    top: 160px;
    right: -20px;
}

@media (max-width: 1550px) {  
  .virtual-assistant-page .hero .image-container{
    max-width: 450px;
  }

  .virtual-assistant-page .img-card-slide-to-check-in{
    width: 150px;
    top: 70px;
    left: -20px;
  }

  .virtual-assistant-page .img-card-remote-checkin-time{
    width: 150px;
    right: -0px;
    top: 180px;
  }
}

@media (max-width: 630px) {  
  .virtual-assistant-page .img-card-slide-to-check-in{
    width: 100px;
    top: 65px;
    left: -10px;
  }

  .virtual-assistant-page .img-card-remote-checkin-time{
    width: 120px;
    top: 150px;
    right: -10px;
  }
}

.remote-check-in-page .img-card-slide-to-check-in-2-es{
    width: 150px;
    top: 100px;
    left: 0px;
}

.remote-check-in-page .img-chack-in-message-es{
    top: 230px;
    right: 80px;
}

.remote-check-in-page .img-card-with-an-avatar-and-location-es{
    top: 100px;
    right: -80px;
}

@media (max-width: 1550px) {  
  .remote-check-in-page .hero .image-container{
    max-width: 450px;
  }

  .remote-check-in-page .img-card-slide-to-check-in-2-es{
    width: 150px;
    top: 40px;
    right: 55px;
  }

  .remote-check-in-page .img-chack-in-message-es{
    top: 200px;
    right: 55px;
  }

  .remote-check-in-page .img-card-with-an-avatar-and-location-es{
    width: 200px;
    top: 100px;
    right: -50px;
  }
}

@media (max-width: 1180px) {  
  .remote-check-in-page .hero .image-container{
    max-width: 450px;
  }

  .remote-check-in-page .img-card-slide-to-check-in-2-es{
    width: 150px;
    top: 20px;
    left: -30px;
  }

  .remote-check-in-page .img-chack-in-message-es{
    top: 140px;
    right: 0px;
  }

  .remote-check-in-page .img-card-with-an-avatar-and-location-es{
    width: 200px;
    top: 70px;
    right: -80px;
  }
}

@media (max-width: 630px) {  
  .remote-check-in-page .img-card-slide-to-check-in{
    width: 100px;
    top: 65px;
    left: -10px;
  }

  .remote-check-in-page .img-card-slide-to-check-in-2-es{
    width: 120px;
    top: 50px;
    left: 0px;
  }

  .remote-check-in-page .img-chack-in-message-es{
    width: 180px;
    top: 150px;
    right: 25px;
  }

  .remote-check-in-page .img-card-with-an-avatar-and-location-es{
    z-index: 0;
    width: 120px;
    top: 70px;
    right: 10px;
  }
}

.vocations-module-page .img-vocaciones-card-es{
    width: 240px;
    bottom: 100px;
    left: -100px;
}

.vocations-module-page .img-medical-certificate-es{
    width: 200px;
    bottom: 100px;
    right: -60px;
}

@media (max-width: 1550px) {  
  .vocations-module-page .hero .image-container{
    max-width: 450px;
  }

  .vocations-module-page .img-vocaciones-card-es{
    width: 150px;
    bottom: 100px;
    left: -60px;
  }

  .vocations-module-page .img-medical-certificate-es{
    width: 150px;
    right: -40px;
  }
}

@media (max-width: 630px) {  
  .vocations-module-page .img-vocaciones-card-es{
    width: 120px;
    bottom: 70px;
    left: -10px;
  }

  .vocations-module-page .img-medical-certificate-es{
    width: 120px;
    bottom: 70px;
    right: -10px;
  }
}

.individual-overtime-page .hero .image-container{
  max-width: 350px;
}

.individual-overtime-page .img-total-hours-chart{
  width: 180px;
  top: 100px;
  left: -100px;
}

.individual-overtime-page .img-cards-total-hours-extra-hours-lost-hours{
  width: 240px;
  top: 100px;
  right: -140px;
}

@media (max-width: 1550px) {  
  .individual-overtime-page .hero .image-container{
    max-width: 300px;
    margin-right: 80px;
  }

  .individual-overtime-page .img-total-hours-chart{
    width: 160px;
    top: 30px;
    left: -110px;
  }

  .individual-overtime-page .img-cards-total-hours-extra-hours-lost-hours{
    width: 200px;
    top: 40px;
    right: -120px;
  }
}

@media (max-width: 630px) {  
  .individual-overtime-page .img-total-hours-chart{
    width: 120px;
    top: 20px;
    left: -60px;
  }

  .individual-overtime-page .img-cards-total-hours-extra-hours-lost-hours{
    width: 120px;
    top: 30px;
    right: -50px;
  }
}

.spaces-reservation-page .hero .image-container{
  max-width: 550px;
  align-self: center;
}

.license-management-page .hero .image-container{
  max-width: 450px;
  align-self: center;
}
/* ============================================================
   VIDEO DEMO SECTION - Página de Módulos
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Estilização da seção de demonstração em vídeo
              com layout Flexbox e call-to-actions.
   ============================================================ */

:root {
  /* Cores específicas da seção de vídeo */
  --video-demo-bg: #fadc67;
  --btn-demo-bg: #22bead;
  --btn-demo-text: #ffffff;
  --btn-demo-hover: #1da89a;
  --btn-contact-bg: #ffffff;
  --btn-contact-text: #1e6b7f;
  --btn-contact-hover: #f5f5f5;
}

/* Video Demo Section */
.video-demo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  background-color: var(--video-demo-bg);
  position: relative;
  min-height: 360px;
}

.video-demo-container .video-demo-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--primary-width);
  width: 100%;
  gap: 8rem;
}

.video-demo-container .video-demo-text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 700px;
  gap: 4.5rem;
}

.video-demo-container .video-demo-text-container .video-demo-title {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--secondary-blue);
  line-height: 1.5;
  margin: 0;
}

.video-demo-container .video-demo-buttons-container {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.video-demo-container .btn-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn-demo-bg);
  color: var(--btn-demo-text);
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.6rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px var(--shadow-light);
}

.video-demo-container .btn-demo:hover {
  background-color: var(--btn-demo-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-medium);
}

.video-demo-container .btn-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn-contact-bg);
  color: var(--btn-contact-text);
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.6rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px var(--shadow-light);
}

.video-demo-container .btn-contact:hover {
  background-color: var(--btn-contact-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-medium);
}

.video-demo-container .video-demo-iframe-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 520px;
}

.video-demo-container .video-demo-iframe-container iframe {
  width: 100%;
  height: 290px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 1024px) {
  .video-demo-container .video-demo-content {
    flex-direction: column;
    text-align: center;
    gap: 4rem;
  }

  .video-demo-container .video-demo-text-container {
    max-width: 100%;
    gap: 3rem;
    align-items: center;
  }

  .video-demo-container .video-demo-iframe-container {
    width: 520px;
  }
}

@media (max-width: 768px) {
  .video-demo-container {
    padding: 4rem 1rem;
    min-height: unset;
  }

  .video-demo-container .video-demo-iframe-container {
    width: 420px;
    height: 230px;
  }

  .video-demo-container .video-demo-text-container .video-demo-title {
    font-size: 2.4rem;
  }

  .video-demo-container .video-demo-buttons-container {
    flex-direction: column;
    gap: 1.5rem;
  }

  .video-demo-container .btn-demo,
  .video-demo-container .btn-contact {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .video-demo-container .video-demo-text-container .video-demo-title {
    font-size: 1.8rem;
  }

  .video-demo-container .video-demo-iframe-container iframe {
    width: 320px;
    height: 180px;
  }
}

/* === Fim VIDEO DEMO SECTION === */

/* ============================================================
   NEW NAVBAR DROPDOWN - Menu Principal
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Novo menu dropdown com hover aninhado e
              categorias dinâmicas.
   ============================================================ */

/* Substituir .sub-product por .sub-product-new */
header .main-menu ul li .sub-product-new {
  display: flex;
  opacity: 0;
  transition: opacity 0.2s ease;
  position: absolute;
  width: 300px;
  background-color: #fff;
  height: 0;
  padding: 0px;
  border-radius: 12px;
  top: 30px;
  left: -80px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: 1s ease-in-out;
}

header .main-menu ul li .sub-product-new.active {
    width: 910px;
}

header .main-menu ul li .sub-product-new.active .menu-modules{
    opacity: 1;
}

header .main-menu ul li:hover .sub-product-new,
header .main-menu ul li .sub-product-new.opened
{
  display: flex;
  opacity: 1;
  height: 660px;
  padding: 0;
}

/* Menu Categories (lado esquerdo) */
.menu-categories {
  display: flex;
  flex-direction: column;
  width: 280px;
  background-color: #f8fafb;
  border-radius: 12px 0 0 12px;
  padding: 2rem 1rem;
}

.menu-categories ul {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-categories .category-item {
  display: flex;
  margin: 0;
  height: auto;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.menu-categories .category-item.active{
  background-color: rgba(250, 220, 103, 0.5);
}

.menu-categories .category-item:hover {
  background-color: rgba(250, 220, 103, 0.5);
}

.menu-categories .category-item.disabled {
  display: block;
  opacity: 0.5;
  pointer-events: none;
  flex-direction: column;
}

.menu-categories .category-item a {
  display: flex;
  align-items: center;
  padding: 2rem 2rem;
  color: #24677e;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.4rem;
  width: 100%;
  gap: 1rem;
  transition: all 0.2s ease;
}

.menu-categories .category-item.disabled a {
  padding: 2rem 2rem 0 2rem;
}

.menu-categories .category-item a span.material-symbols-rounded {
  font-size: 2.4rem;
  color: #EDC050;
}

.menu-categories .category-item.disabled a span.material-symbols-rounded,
.menu-categories .category-item.disabled a
.menu-categories .category-item.disabled .category-badge{
  color: #D9D9D9;
}

.menu-categories .category-item a .arrow {
  margin-left: auto;
  font-size: 1.8rem;
  opacity: 0.6;
}

.menu-categories .category-badge {
    color: #1e6b7f;
    font-size: 1.2rem;
    border-radius: 12px;
    font-weight: 500;
    align-self: flex-start;
    margin-left: 5.8rem;
}

/* Fixed Sections */
.fixed-sections {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  border-top: 1px solid rgba(36, 103, 126, 0.1);
}

.fixed-section {
  display: flex;
  margin: 0.5rem 0;
  border-radius: 10px;
}

.fixed-section:hover {
  background-color: rgba(250, 220, 103, 0.5);
}

.fixed-section a {
  display: flex;
  align-items: flex-start;
  padding: 2rem 2rem !important;
  color: #24677e;
  text-decoration: none;
  width: 100%;
  gap: 1rem;
  transition: all 0.2s ease;
}

.fixed-section:hover a {
  color: #22bead;
}

.fixed-section a span.material-symbols-rounded {
  font-size: 2.4rem;
  color: #fadc67;
  margin-top: 0.2rem;
}

.fixed-section-content h6 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  color: inherit;
}

.fixed-section-content p {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  opacity: 0.8;
}

/* Menu Modules (lado direito) */
.menu-modules {
  display: flex;
  flex: 1;
  position: relative;
  background-color: #F8F8F8;
  border-radius: 0 12px 12px 0;
  width: 480px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.modules-content {
  display: none;
  flex-direction: column;
  width: 100%;
  padding: 2rem;
  gap: 2rem;
  opacity: 0;
  transition: 0.5s ease-in-out;
  transition-delay: 0.5s;
}

.modules-content.active {
  opacity: 1;
  display: flex;
}

.modules-content .modules-header{
    width: 580px;
}

.modules-header h4 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #24677e;
  margin: 0 0 0.5rem 0;
}

.modules-header p {
  font-size: 1.3rem;
  color: #24677e;
  line-height: 1.4;
  margin: 0;
  opacity: 0.8;
}

.modules-list {
  width: 580px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

header .module-item {
  display: flex;
  align-items: flex-start;
  padding: 1rem 0 !important;
  color: #24677e;
  text-decoration: none;
  border-radius: 8px;
  gap: 1rem;
  transition: all 0.2s ease;
}

header .module-item:hover {
  background-color: rgba(34, 190, 173, 0.05);
  color: #22bead;
}

header .module-item a{
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  color: #24677e;
  text-decoration: none;
  border-radius: 8px;
  gap: 1rem;
  transition: all 0.2s ease;
}

header .module-item span.material-symbols-rounded {
  font-size: 2.4rem;
  color: #22bead;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.module-content h6 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  color: inherit;
}

.module-content p {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  opacity: 0.8;
}

@media (max-width: 1600px){
  header .main-menu ul li .sub-product-new {
    overflow-y: auto;
    overflow-x: hidden;
  }

  header .main-menu ul li .sub-product-new.active{
    width: 810px;
  }

  .modules-content .modules-header{
    width: 460px;
  }

  .modules-content{
    gap: 0;
  }

  .menu-categories{
    height: 640px;
  }

  .menu-modules{
    height: 680px;
  }

  .modules-list{
    width: 460px;
  }

  header .main-menu ul li:hover .sub-product-new{
    height: 500px;
  }
}
/* === Fim NEW NAVBAR DROPDOWN === */
/* === FINAL MODULES SECTION === */


/* ============================================================
   BEFECTIVE AI - Menu Principal
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Página para befective AI
   ============================================================ */

/* Hero Section */
.befective-ai-page .hero {
  height: 450px;
  display: flex;
  justify-content: center;
  margin-top: 105px;
  background:   linear-gradient(135deg, rgba(250, 220, 103, 0.9), rgba(241, 176, 23, 0.9)),
                url("assets/images/befective-ai/man-working-on-his-computer.avif") no-repeat center top / cover;
  background-attachment: fixed;
}

.befective-ai-page .hero .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--primary-width);
  width: 100%;
  gap: 4rem;
  padding-top: 60px;
}

.befective-ai-page .hero .text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 600px;
}

.befective-ai-page .hero .text-container h1 {
  font-size: 5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.befective-ai-page .hero .title-container {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.befective-ai-page .hero .title-container .white-befective{
    font-size: 5rem;
    background: white;
    font-weight: 700;
    color: var(--text-primary);
    padding: 1rem;
}

.befective-ai-page .hero .text-container h1 {
    font-size: 5rem;
    background: var(--text-primary);
    color: white;
    font-weight: 300;
    padding: 1rem;
}

.befective-ai-page .hero .text-container .description-container p{
    width: 100%;
    margin-bottom: 32px;
}

.befective-ai-page .hero .text-container .description-container p{
    font-size: 2.4rem;
    color: var(--text-primary);
}

.befective-ai-page .hero .btn-free-trial-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-white);
  color: var(--text-primary);
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.8rem;
  transition: all 0.3s ease;
  align-self: flex-start;
  box-shadow: 0 4px 15px var(--shadow-light);
}

.befective-ai-page .hero .btn-free-trial:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-medium);
}

.befective-ai-page .hero .image-container {
  display: flex;
  align-items: center;
  align-self: flex-end;
  justify-content: center;
  flex: 1;
  max-width: 340px;
  /* animation: fade-in 2s linear; */
  position: relative;
  margin-right: 80px;
}

.befective-ai-page .hero .image-container img{
  height: auto;
  position: absolute;
}

.befective-ai-page .hero .image-container img:first-child{
  position: relative;
}

.befective-ai-page .hero .image-container .parallax-element-back{
  z-index: 0;
  animation: fade-in 2s linear;
}

.befective-ai-page .hero .image-container .parallax-element-middle{
  z-index: 2;
  animation: fade-in 1.5s linear;
}

.befective-ai-page .hero .image-container .parallax-element-front{
  z-index: 2;
  animation: fade-in 1s linear;
}

.befective-ai-page .img-man-woman-with-a-phone{
  width: 100%;
  height: auto;
  z-index: 1;
  animation: fade-in 1.5s linear;
}

.befective-ai-page .img-befective-ai-ballon-question{
    width: 280px;
    bottom: 100px;
    left: 30px;
    z-index: 2;
    animation: fade-in 1s linear;
}

@media (max-width: 700px) {
    .befective-ai-page .hero {
        height: auto;
        margin-top: 85px;
    }

    .befective-ai-page .hero .text-container{
        align-items: center;
    }

    .befective-ai-page .hero .title-container .white-befective {
        font-size: 3rem;
    }

    .befective-ai-page .hero .text-container h1 {
        font-size: 3rem;
    }

    .befective-ai-page .hero .text-container .description-container p {
        width: auto;
        font-size: 1.8rem;
    }

    .befective-ai-page .hero .btn-free-trial-hero {
        align-self: center;
    }

    .befective-ai-page .hero .content {
        flex-direction: column;
    }

    .befective-ai-page .img-befective-ai-ballon-question {
        width: 220px;
    }

    .befective-ai-page .hero .image-container {
        align-self: center;
        max-width: 300px;
        margin-right: 0;
    }

    .befective-ai-page .bebot-main-title {

    }
}

/* ============================================================
   BEBOT SECTION - Página de Módulos
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Estilização da seção do assistente conversacional
              BeBot com interface de chat simulada.
   ============================================================ */

:root {
  /* Cores específicas da seção BeBot */
  --bebot-title-bg: #FADC67;
  --bebot-avatar-bg: #FDBE2B;
  --chat-header-bg: #1E6B7F;
  --chat-bg: #ffffff;
  --bot-message-bg: rgba(34, 190, 173, 0.15);
  --user-message-bg: #FDBE2B;
  --chat-border: rgba(0, 0, 0, 0.1);
  --search-color: #A19D9D;
  --send-button-bg: #22bead;
}

/* BeBot Section */
.befective-ai-page .bebot-container {
  min-width: var(--primary-width);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  background-color: var(--background-beige);
  position: relative;
}

.befective-ai-page .bebot-content {
  display: flex;
  flex-direction: column;
  max-width: var(--primary-width);
  width: 100%;
  gap: 4rem;
}

.befective-ai-page .bebot-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.befective-ai-page .bebot-main-title {
  font-size: 4rem;
  font-weight: 700;
  color: var(--primary-blue);
  padding: 1rem 2rem;
  border-radius: 8px;
  line-height: 1.2;
  margin: 0;
}

.befective-ai-page .bebot-demo-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6rem;
}

/* Chat Interface */
.befective-ai-page .bebot-chat-container {
  display: flex;
  flex: 1;
  max-width: 500px;
  opacity: 0;
}

.befective-ai-page .chat-interface {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--chat-bg);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.befective-ai-page .chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--chat-header-bg);
  padding: 1.5rem 2rem;
  color: white;
}

.befective-ai-page .chat-header-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.befective-ai-page .bebot-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--bebot-avatar-bg);
  border-radius: 50%;
}

.befective-ai-page .bebot-avatar .img-befective-ai-avatar{
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.befective-ai-page .bebot-avatar.small {
  width: 32px;
  height: 32px;
}

.befective-ai-page .bebot-avatar span {
  font-size: 2rem;
  color: var(--primary-blue);
}

.befective-ai-page .bebot-avatar.small span {
  font-size: 1.6rem;
}

.befective-ai-page .chat-title {
  font-size: 1.6rem;
  font-weight: 600;
}

.befective-ai-page .chat-search {
  display: flex;
  align-items: center;
  position: relative;
}

.befective-ai-page .chat-search input {
  background-color: white;
  border: none;
  border-radius: 20px;
  padding: 0.8rem 3rem 0.8rem 1.5rem;
  color: white;
  font-size: 1.4rem;
  width: 150px;
  outline: none;
  cursor: default;
}

.befective-ai-page .chat-search input::placeholder {
  color: var(--search-color);
}

.befective-ai-page .chat-search span {
  position: absolute;
  right: 1rem;
  font-size: 1.8rem;
  color: var(--search-color);
}

/* Chat Messages */
.befective-ai-page .chat-messages {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  gap: 2rem;
  min-height: 300px;
}

.befective-ai-page .message {
  display: flex;
  gap: 1rem;
}

.befective-ai-page .bot-message {
  align-items: flex-start;
}

.befective-ai-page .user-message {
  align-items: center;
}

.befective-ai-page .message-avatar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.befective-ai-page .message-avatar.user {
  flex-direction: row-reverse;
}

.befective-ai-page .message-avatar.ai {
  flex-direction: row;
}

.befective-ai-page .user-avatar {
  width: 32px;
  height: 32px;
  background-color: var(--bebot-avatar-bg);
  border-radius: 50%;
}

.befective-ai-page .user-avatar .img-user-avatar{
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: contain;
}

.befective-ai-page .message-sender {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--secondary-blue);
}

.befective-ai-page .message-content {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  padding: 1.5rem;
  border-radius: 12px;
  gap: 0.5rem;
}

.befective-ai-page .bot-message .message-content {
  background-color: var(--bot-message-bg);
  border-top-left-radius: 4px;
}

.befective-ai-page .user-message .message-content {
  background-color: rgba(250, 220, 103, 0.53);
  border-top-right-radius: 4px;
}

.befective-ai-page .message-content p {
  font-size: 1.4rem;
  color: var(--secondary-blue);
  line-height: 1.4;
  margin: 0;
}

/* Chat Input */
.befective-ai-page .chat-input {
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--chat-border);
  gap: 1rem;
}

.befective-ai-page .chat-input input {
  flex: 1;
  border: 1px solid var(--chat-border);
  border-radius: 25px;
  padding: 1rem 1.5rem;
  font-size: 1.4rem;
  color: var(--secondary-blue);
  cursor: default;
  outline: none;
}

.befective-ai-page .chat-input input::placeholder {
  color: rgba(30, 107, 127, 0.6);
}

.befective-ai-page .send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--send-button-bg);
  border: none;
  border-radius: 50%;
  cursor: default;
  transition: all 0.3s ease;
  outline: none;
}

.befective-ai-page .send-button span {
  font-size: 1.8rem;
  color: white;
}

/* Features List */
.befective-ai-page .bebot-features-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2rem;
  max-width: 700px;
}

.befective-ai-page .bebot-features-title {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.3;
  margin: 0;
}

.befective-ai-page .bebot-features-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.befective-ai-page .bebot-feature-item {
  display: flex;
  align-items: flex-start;
  font-size: 2rem;
  color: var(--secondary-blue);
  line-height: 1.4;
  position: relative;
  padding-left: 2rem;
}

.befective-ai-page .bebot-feature-item::before {
  content: "•";
  color: var(--primary-blue);
  font-size: 2.4rem;
  position: absolute;
  left: 0;
  top: -0.2rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .befective-ai-page .bebot-demo-container {
    flex-direction: column;
    gap: 4rem;
  }

  .befective-ai-page .bebot-chat-container {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .befective-ai-page .bebot-container {
    padding: 4rem 1rem;
  }

  .befective-ai-page .bebot-main-title {
    font-size: 2.8rem;
  }

  .befective-ai-page .bebot-features-title {
    font-size: 2rem;
  }

  .befective-ai-page .bebot-feature-item {
    font-size: 1.6rem;
  }

  .befective-ai-page .chat-header {
    padding: 1rem 1.5rem;
  }

  .befective-ai-page .chat-search input {
    width: 120px;
  }

  .befective-ai-page .message-content {
    max-width: 250px;
  }
}

/* === Fim BEBOT SECTION === */

/* ============================================================
   AI REPORTS SECTION - Página de Módulos
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Estilização da seção de reportes de IA com
              interface de relatório simulada.
   ============================================================ */

:root {
  /* Cores específicas da seção AI Reports */
  --ai-title-bg: #FADC67;
  --magic-wand-color: #1E6B7F;
  --report-header-bg: #1E6B7F;
  --report-bg: #ffffff;
  --general-header-bg: #FADC67;
  --insights-header-bg: #e8f4f8;
  --btn-generate-bg: #FADC67;
  --btn-cancel-bg: transparent;
  --download-button-bg: rgba(255, 255, 255, 0.2);
}

/* AI Reports Section */
.befective-ai-page .ai-reports-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6rem 2rem;
  background-color: var(--background-beige);
  position: relative;
  min-width: var(--primary-width);
}

.befective-ai-page .ai-reports-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--primary-width);
  width: 100%;
  gap: 6rem;
  flex-direction: column;
}

/* Text Container */
.befective-ai-page .ai-reports-container {
  display: flex;
}

.befective-ai-page .ai-reports-text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 700px;
  gap: 3rem;
}

.befective-ai-page .ai-reports-title-container {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 2rem;
}

.befective-ai-page .magic-wand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: var(--magic-wand-color);
  border-radius: 50%;
  position: relative;
  align-self: flex-start;
}

.befective-ai-page .magic-wand-icon span {
  font-size: 3rem;
  color: white;
}

.befective-ai-page .magic-lines {
  position: absolute;
  top: -20px;
  right: -30px;
  width: 80px;
  height: 80px;
  border: 2px dashed var(--magic-wand-color);
  border-radius: 50%;
  opacity: 0.6;
}

.befective-ai-page .magic-lines::before {
  content: "";
  position: absolute;
  top: -15px;
  right: -15px;
  width: 40px;
  height: 40px;
  border: 2px dashed var(--magic-wand-color);
  border-radius: 50%;
  opacity: 0.4;
}

.befective-ai-page .ai-reports-main-title {
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.2;
  margin: 0;
}

.befective-ai-page .title-highlight {
  background-color: var(--ai-title-bg);
  padding: 0.5rem 1rem;
  border-radius: 8px;
}

.befective-ai-page .ai-reports-subtitle {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.3;
  margin: 0 0 1.5rem 0;
}

.befective-ai-page .ai-reports-intro {
  font-size: 2.4rem;
  color: var(--secondary-blue);
  line-height: 1.5;
  margin: 0 0 2rem 0;
}

.befective-ai-page .ai-reports-container .highlight-text {
  display: inline-grid;
  position: relative;
}

.befective-ai-page .ai-reports-container .highlight-text .highlight-content {
  width: 100%;
  height: 100%;
  background: var(--highlight-bg);
  border-radius: 3px;
  padding-inline: 6px;
  position: absolute;
  right: -6px;
  z-index: 0;
  animation: highlight-text 1s forwards;
  transform-origin: 0 100%;
}

.befective-ai-page .ai-reports-container .highlight-text span:last-child {
  z-index: 1;
}

.befective-ai-page .ai-reports-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.befective-ai-page .ai-reports-benefit-item {
  display: flex;
  align-items: flex-start;
  font-size: 2rem;
  color: var(--secondary-blue);
  line-height: 1.4;
  position: relative;
  padding-left: 2rem;
}

.befective-ai-page .ai-reports-benefit-item::before {
  content: "•";
  color: var(--primary-blue);
  font-size: 2.4rem;
  position: absolute;
  left: 0;
  top: -0.2rem;
}

/* Report Interface */
.befective-ai-page .ai-reports-interface-container {
  display: flex;
  flex: 1;
  max-width: 500px;
  opacity: 0;
}

.befective-ai-page .report-interface {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--report-bg);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.befective-ai-page .report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--report-header-bg);
  padding: 1.5rem 2rem;
  color: white;
}

.befective-ai-page .report-title-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.befective-ai-page .report-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--ai-title-bg);
  border-radius: 50%;
}

.befective-ai-page .report-icon span {
  font-size: 1.8rem;
  color: var(--primary-blue);
}

.befective-ai-page .report-title {
  font-size: 1.6rem;
  font-weight: 600;
}

.befective-ai-page .download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--download-button-bg);
  border: none;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.befective-ai-page .download-button span {
  font-size: 2rem;
  color: white;
}

/* Report Content */
.befective-ai-page .report-content {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  gap: 2rem;
}

.befective-ai-page .report-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.befective-ai-page .section-header {
  padding: 0.8rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
}

.befective-ai-page .section-header.general {
  background-color: var(--general-header-bg);
  color: var(--primary-blue);
}

.befective-ai-page .section-header.insights {
  background-color: var(--insights-header-bg);
  color: var(--primary-blue);
}

.befective-ai-page .section-header h4 {
  font-size: 1.4rem;
  margin: 0;
}

.befective-ai-page .report-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0 1rem;
  list-style: none;
}

.befective-ai-page .report-metrics li {
  font-size: 1.3rem;
  color: var(--secondary-blue);
  position: relative;
  padding-left: 1.5rem;
}

.befective-ai-page .report-metrics li::before {
  content: "•";
  color: var(--primary-blue);
  position: absolute;
  left: 0;
}

.befective-ai-page .insights-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1rem;
}

.befective-ai-page .insight-item h5 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.befective-ai-page .insight-item p {
  font-size: 1.2rem;
  color: var(--secondary-blue);
  line-height: 1.4;
  margin: 0 0 0.5rem 0;
}

/* Report Actions */
.befective-ai-page .report-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.befective-ai-page .btn-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn-cancel-bg);
  color: var(--secondary-blue);
  border: 1px solid var(--secondary-blue);
  padding: 0.8rem 2rem;
  border-radius: 6px;
  font-size: 1.4rem;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: default;
}

.befective-ai-page .btn-generate {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn-generate-bg);
  color: var(--primary-blue);
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 6px;
  font-size: 1.4rem;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: default;
}

/* Responsive */
@media (max-width: 1024px) {
  .befective-ai-page .ai-reports-content {
    flex-direction: column;
    gap: 4rem;
  }

  .befective-ai-page .ai-reports-text-container {
    max-width: 100%;
  }

  .befective-ai-page .ai-reports-interface-container {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .befective-ai-page .ai-reports-container {
    padding: 4rem 1rem;
    flex-direction: column;
    gap: 5rem;
  }

  .befective-ai-page .ai-reports-main-title {
    font-size: 3rem;
  }

  .befective-ai-page .ai-reports-subtitle {
    font-size: 2.4rem;
  }

  .befective-ai-page .ai-reports-intro {
    font-size: 1.8rem;
  }

  .befective-ai-page .ai-reports-benefit-item {
    font-size: 1.6rem;
  }

  .befective-ai-page .report-header {
    padding: 1rem 1.5rem;
  }

  .befective-ai-page .report-content {
    padding: 1.5rem;
  }
}

/* === Fim AI REPORTS SECTION === */

/* ============================================================
   INTEGRAÇÕES - Menu Principal
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Página referente as integrações do sistema
   ============================================================ */

/* Hero Section */
.integrations-page .hero {
  height: 450px;
  display: flex;
  justify-content: center;
  margin-top: 105px;
  background:   linear-gradient(135deg, rgba(250, 220, 103, 0.9), rgba(241, 176, 23, 0.9)),
                url("assets/images/befective-ai/man-working-on-his-computer.avif") no-repeat center top / cover;
  background-attachment: fixed;
}

.integrations-page .hero .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--primary-width);
  width: 100%;
  gap: 4rem;
  padding-top: 60px;
}

.integrations-page .hero .text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 600px;
}

.integrations-page .hero .text-container h1 {
  font-size: 5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.integrations-page .hero .title-container {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.integrations-page .hero .title-container .white-befective{
    font-size: 5rem;
    background: white;
    font-weight: 700;
    color: var(--text-primary);
    padding: 1rem;
}

.integrations-page .hero .title-container .join-icon{
    font-size: 8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.integrations-page .hero .text-container h1 {
    font-size: 5rem;
    background: var(--text-primary);
    color: white;
    font-weight: 300;
    padding: 1rem;
}

.integrations-page .hero .text-container .description-container p,
.integrations-page .hero .text-container .description-container strong{
    width: 450px;
    font-size: 2.4rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.integrations-page .hero .text-container .description-container strong{
  font-weight: 600;
}

.integrations-page .hero .btn-free-trial-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-white);
  color: var(--text-primary);
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.8rem;
  transition: all 0.3s ease;
  align-self: flex-start;
  box-shadow: 0 4px 15px var(--shadow-light);
}

.integrations-page .hero .btn-free-trial:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-medium);
}

.integrations-page .hero .image-container {
  display: flex;
  align-items: center;
  align-self: flex-end;
  justify-content: center;
  flex: 1;
  max-width: 270px;
  /* animation: fade-in 2s linear; */
  position: relative;
  margin-right: 80px;
}

.integrations-page .hero .image-container img{
  height: auto;
  position: absolute;
}

.integrations-page .hero .image-container img:first-child{
  position: relative;
}

.integrations-page .hero .image-container .parallax-element-back{
  z-index: 0;
  animation: fade-in 2s linear;
}

.integrations-page .hero .image-container .parallax-element-middle{
  z-index: 2;
  animation: fade-in 1.5s linear;
}

.integrations-page .hero .image-container .parallax-element-front{
  z-index: 2;
  animation: fade-in 1s linear;
}

.integrations-page .img-man-woman-with-a-phone{
  width: 100%;
  height: auto;
  z-index: 1;
  animation: fade-in 1.5s linear;
}

.integrations-page .img-hex-windows-logo.parallax-element-back {
  width: 70px;
  height: 70px;
  left: 0;
  top: 80px;
}

.integrations-page .img-hex-teams-logo.parallax-element-back {
  width: 106px;
  height: 106px;
  top: 140px;
  left: -65px;
}

.integrations-page .img-hex-befective-logo.parallax-element-middle {
  width: 77px;
  height: 77px;
  bottom: 100px;
  left: 10px;
}

.integrations-page .img-hex-open-ai-logo.parallax-element-back {
  width: 85px;
  height: 85px;
  top: 90px;
  right: -15px;
}

.integrations-page .img-hex-drive-logo.parallax-element-front {
  width: 133px;
  height: 133px;
  bottom: 110px;
  right: -80px;
}

@media (max-width: 700px){
    .integrations-page .hero{
        height: auto;
        margin-top: 85px
    }

    .integrations-page .hero .title-container {
        justify-content: center;
    }

    .integrations-page .hero .title-container .white-befective {
        font-size: 3rem;
    }

    .integrations-page .hero .title-container .join-icon{
        font-size: 6rem;
    }

    .integrations-page .hero .text-container {
        flex-direction: column;
        display: flex;
        align-items: center;
    }

    .integrations-page .hero .text-container .description-container p, 
    .integrations-page .hero .text-container .description-container strong {
        width: auto;
        text-align: center;
    }

    .integrations-page .hero .content {
        flex-direction: column;
    }

    .integrations-page .hero .image-container {
        align-self: center;
        margin: 0;
    }

    .integrations-page .img-hex-drive-logo.parallax-element-front {
        width: 120px;
        right: -60px;
    }
}

/* ============================================================
   INTEGRATIONS SECTION - Página de Integrações
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Estilização da seção de integrações com
              estrutura de hexágonos e API.
   ============================================================ */

:root {
  /* Cores específicas da seção de integrações */
  --integrations-title-bg: #fadc67;
  --hexagon-bg: #fadc67;
  --hexagon-main-bg: #22bead;
  --hexagon-icon-color: #196478;
  --integrations-check-color: #22bead;
}

/* Integrations Section */
.integrations-page .integrations-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  background-color: var(--background-beige);
  position: relative;
}

.integrations-page .integrations-content {
  display: flex;
  flex-direction: column;
  max-width: var(--primary-width);
  width: 100%;
  gap: 12rem;
}

.integrations-page .integrations-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.integrations-page h1.integrations-main-title {
  color: var(--primary-blue);
  font-size: 4rem;
  font-weight: 700;
  padding: 1.5rem 3rem;
  max-width: 1300px;
}

.integrations-page h1.integrations-main-title span{
  color: var(--primary-blue);
  background-color: var(--integrations-title-bg);
  border-radius: 12px;
}

.integrations-page .integrations-demo-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6rem;
}

/* Visual Container com Hexágonos */
.integrations-page .integrations-visual-container {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.integrations-page .hexagons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: -10px;
  position: relative;
}

.integrations-page .hexagon-content img {
  position: absolute;
  left: 21%;
  bottom: 31%;
  width: 60px;
  height: 60px;
  /* z-index: 10; */
  transform: rotate(0deg);
}

.integrations-page .hexagon-content img.main-logo {
  position: absolute;
  left: 12%;
  bottom: 24%;
  width: 80px;
  height: 80px;
  /* z-index: 10; */
  transform: rotate(0deg);
}

/* Features Container */
.integrations-page .integrations-features-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 500px;
  gap: 3rem;
}

.integrations-page .integrations-features-title {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.3;
  margin: 0;
}

.integrations-page .integrations-features-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.integrations-page .integrations-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  font-size: 2rem;
  color: var(--secondary-blue);
  line-height: 1.4;
}

.integrations-page .check-icon {
  font-size: 2.4rem;
  color: var(--integrations-check-color);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .integrations-page .integrations-demo-container {
    flex-direction: column;
    gap: 4rem;
  }

  .integrations-page .integrations-visual-container {
    order: 2;
  }

  .integrations-page .integrations-features-container {
    order: 1;
    max-width: 100%;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .integrations-page .integrations-container {
    padding: 4rem 1rem;
  }

  .integrations-page .integrations-main-title {
    font-size: 2.8rem;
    padding: 1rem 2rem;
  }

  .integrations-page .integrations-features-title {
    font-size: 2.4rem;
  }

  .integrations-page .integrations-feature-item {
    font-size: 1.8rem;
  }

  .integrations-page .main-logo {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .integrations-page h1.integrations-main-title{
      font-size: 1.8rem
  }

  .integrations-page h1.integrations-main-title span {
      background-color: transparent;
  }

  #bee-animation {
      width: 150px;
  }

  .integrations-page .hexagon-content img {
    width: 30px;
    height: 30px;
    left: 21%;
    bottom: 31%;
  }

  .integrations-page .hexagon-content img.main-logo {
    width: 40px;
    height: 40px;
  }

  .integrations-page .integrations-main-title {
    font-size: 2.2rem;
  }

  .integrations-page .integrations-features-title {
    font-size: 2rem;
  }

  .integrations-page .integrations-feature-item {
    font-size: 1.6rem;
  }
}

/* ============================================================
   INTEGRATION READY SECTION - Página de Integrações
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Estilização da seção de integrações prontas
              com calendário e logos conectados.
   ============================================================ */

:root {
  /* Cores específicas da seção integration ready */
  --integration-check-color: #22bead;
  --integration-title-color: #196478;
}

/* Integration Ready Section */
.integrations-page .integration-ready-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  background-color: var(--background-beige);
  position: relative;
}

.integrations-page .integration-ready-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--primary-width);
  width: 100%;
  gap: 6rem;
}

/* Text Container */
.integrations-page .integration-ready-text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 500px;
  gap: 3rem;
}

.integrations-page .integration-ready-title {
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--integration-title-color);
  line-height: 1.3;
  margin: 0;
}

.integrations-page .integration-ready-features {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.integrations-page .integration-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.integrations-page .integration-feature-item .check-icon {
  font-size: 2.4rem;
  color: var(--integration-check-color);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.integrations-page .integration-feature-text {
  font-size: 2rem;
  color: var(--secondary-blue);
  line-height: 1.4;
  margin: 0;
}

/* Visual Container */
.integrations-page .integration-ready-visual-container {
  display: flex;
  flex: 1;
  position: relative;
  align-items: center;
  justify-content: center;
  max-width: 600px;
}

.integrations-page .calendar-interface {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

.integrations-page .calendar-interface img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.integrations-page .integration-logos {
  position: absolute;
  bottom: -20px;
  right: -20px;
  z-index: 10;
}

.integrations-page .integration-logos img {
  width: 120px;
  height: auto;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.15));
}

/* Animações */
.integrations-page .integration-logos {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.integrations-page .calendar-interface {
  transition: all 0.3s ease;
}

.integrations-page .calendar-interface:hover {
  transform: translateY(-5px);
}

.integrations-page .calendar-interface:hover img {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 1024px) {
  .integrations-page .integration-ready-content {
    flex-direction: column;
    gap: 4rem;
  }

  .integrations-page .integration-ready-text-container {
    max-width: 100%;
    text-align: center;
  }

  .integrations-page .integration-ready-visual-container {
    max-width: 100%;
  }

  .integrations-page .integration-logos {
    bottom: -15px;
    right: -15px;
  }

  .integrations-page .integration-logos img {
    width: 100px;
  }
}

@media (max-width: 768px) {
  .integrations-page .integration-ready-container {
    padding: 4rem 1rem;
  }

  .integrations-page .integration-ready-title {
    font-size: 2.8rem;
  }

  .integrations-page .integration-feature-text {
    font-size: 1.8rem;
  }

  .integrations-page .integration-ready-features {
    gap: 2rem;
  }

  .integrations-page .calendar-interface img {
    max-width: 400px;
  }

  .integrations-page .integration-logos {
    bottom: -10px;
    right: -10px;
  }

  .integrations-page .integration-logos img {
    width: 80px;
  }
}

@media (max-width: 480px) {
  .integrations-page .integration-ready-title {
    font-size: 2rem;
  }

  .integrations-page .integration-feature-text {
    font-size: 1.6rem;
  }

  .integrations-page .calendar-interface img {
    max-width: 320px;
  }

  .integrations-page .integration-logos img {
    width: 70px;
  }
}

/* === Fim INTEGRATION READY SECTION === */

/* ============================================================
   New Header - Página de Integrações
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Estilização da seção de integrações prontas
              com calendário e logos conectados.
   ============================================================ */

@media screen and (max-width: 768px) {
    /* Reset e estilos base */
    header .main-menu {
        width: 100%;
        max-width: 400px;
    }

    header .main-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: block;
        max-height: 90vh;
        overflow-y: auto;
    }

    header .main-menu > ul > li {
    
    }

    header .main-menu > ul > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        text-decoration: none;
        color: white;
        font-weight: 500;
        font-size: 16px;
        transition: background-color 0.2s ease;
    }

    header .main-menu ul li a span {
        color: white;
    }

    header .main-menu ul li a{
        font-size: 16px !important;
        padding: 1rem 0rem;
    }

    header .main-menu .arrow {
        transition: transform 0.3s ease;
    }

    header .main-menu .arrow.rotated {
        transform: rotate(180deg);
    }



    header .main-menu ul li:hover a,
    header .main-menu ul li:hover span {
        opacity: 1;
        color: white;
    }

    header .main-menu ul li a span{
        margin-left: 0;
        font-size: 12px;
    }

    /* Submenu */
    header .sub {
    display: none;
    background-color: #f8fafc;
    border-top: 1px solid #e5e7eb;
    padding: 8px 0;
    }

    header .sub.active {
    display: block;
    }

    /* Tree View Styles */
    header .tree-item {
    border-bottom: 1px solid #e5e7eb;
    }

    header .tree-item:last-child {
    border-bottom: none;
    }

    header .tree-toggle {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    text-decoration: none;
    color: white;
    font-weight: 500;
    font-size: 14px;
    transition: background-color 0.2s ease;
    cursor: pointer;
    }

    /* header .tree-toggle:hover {
    background-color: #f1f5f9;
    } */

    header .tree-single {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: white;
    font-weight: 500;
    font-size: 14px;
    transition: background-color 0.2s ease;
    }

    /* header .tree-single:hover {
    background-color: #f1f5f9;
    } */

    header .tree-icon {
    margin-right: 8px;
    font-size: 18px;
    transition: transform 0.3s ease;
    color: #6b7280;
    }

    header .tree-icon.rotated {
    transform: rotate(90deg);
    }

    /* Tree Children */
    header .tree-children {
        display: none;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        margin-left: 26px;
    }

    header .tree-children.active {
        display: block;
    }

    header .tree-child {
        display: flex;
        align-items: center;
        padding: 10px 20px 10px 50px;
        text-decoration: none;
        color: #4b5563;
        font-size: 13px;
        transition: background-color 0.2s ease;
    }

    header .tree-child:last-child {
        border-bottom: none;
    }

    /* header .tree-child:hover {
    background-color: #f8fafc;
    } */

    header .tree-indicator {
        margin-right: 6px;
    }

    header .product-content-text h6 {
        font-size: 13px;
        font-weight: 500;
        color: white;
        margin: 0;
        line-height: 1.4;
    }

    /* Disabled items */
    header .tree-item.disabled {
    opacity: 0.6;
    }

    header .tree-item-disabled {
        display: flex;
        align-items: center;
        padding: 12px 20px;
        text-decoration: none;
        color: #9ca3af;
        font-weight: 500;
        font-size: 14px;
        cursor: not-allowed;
        position: relative;
    }

    header .category-badge {
        background-color: #dbeafe;
        color: #2563eb;
        font-size: 10px;
        padding: 2px 8px;
        border-radius: 12px;
        margin-left: auto !important;
        font-weight: 500;
    }

    /* Hide class */
    header .hide {
    display: none;
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
  header .main-menu {
    max-width: 100%;
  }

  header .tree-child {
    padding-left: 40px;
  }

  header .product-content-text h6 {
    font-size: 12px;
  }
}

/* Animation for smooth expand/collapse */
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    max-height: 500px;
  }
  to {
    opacity: 0;
    max-height: 0;
  }
}

.tree-children.expanding {
  animation: slideDown 0.3s ease-in-out;
}

.tree-children.collapsing {
  animation: slideUp 0.3s ease-in-out;
}

/* === Fim New Header === */

/* GLOBAL */

  /* BGs */

  .bg-yellow {
    background-color: var(--background-yellow);
  }

  /* FINAL BGs */

  /* BTNs */

  .default-btn-size {
    min-width: 17.6rem;
    height: 4.1rem;
    padding: 1.2rem 3.2rem;
  }

  @media (max-width: 680px){
    .default-btn-size {
      min-width: 15rem;
      height: 4rem;
      padding: 0.6rem 1.6rem;
    }
  }

  /* FINAL BTNs */

  /* HEXAGONS */

  .hexagons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    position: relative;
  }

  .hexagon-content {
    position: relative;
    opacity: 0;
    transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out;
  }
  .hexagon-content span {
    position: absolute;
    top: 28%;
    left: 16%;
    font-size: 70px;
    color: transparent;
    background-clip: text;
    background-image: linear-gradient(#22BEAD, #1E6B7F);
  }
  .hexagon-content span.main-icon {
    background-image: linear-gradient(#1D85AC, #0C3646);
  }

  .hexagon {
    width: 96.75PX;
    height: 150px;
    position: relative;
    background: linear-gradient(#FADC67, #F1B017);
    margin: 4px;
    border-radius: 10px;
    transform: rotate(30deg);
    opacity: 0;
    transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    animation-timeline: view();
    /* animation-range: entry 0% cover 30%; */
  }

  .hexagonAnimationActive {
    animation: fade-in 5s linear;
  }

  .hexagon:before, .hexagon:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background: inherit;
    border-radius: inherit;
  }
  .hexagon:before {
    transform: rotate(60deg);
  }
  .hexagon:after {
    transform: rotate(-60deg);
  }

  .hexagons-row {
    display: inline-flex;
    gap: 55.5px;
    margin-top: -28px;
    margin-left: 0px;
  }

  @media (max-width: 1550px){
    .hexagon {
        width: 64.50PX;
        height: 100px;
    }

    .integrations-page .hexagon-content img.main-logo {
        left: 14%;
        bottom: 25%;
        width: 50px;
        height: 50px;
    }

    .integrations-page .hexagon-content img {
        left: 21%;
        bottom: 31%;
        width: 40px;
        height: 40px;
    }

    .hexagons-row {
        gap: 35.5px;
    }

    .hexagon-content span {
        font-size: 50px;
    }

    .home-page .performance-overview-description-content #bee-animation {
        width: 250px;
        height: 250px;
    }
  }

@media (max-width: 700px){
    .home-page .performance-overview-description-content #bee-animation {
        width: 150px;
        height: 150px;
        position: absolute;
        bottom: 270px;
    }
}

  @keyframes hexagonColorAnimation {
    from {
      opacity: 0;
    }
    to {
      opacity: 100%;
    }
  }

  /* FIM HEXAGONS */

  /* GLOBAL KEYFRAMES */

  @keyframes fade-in-left-to-right {
    from{
        opacity: 0;
        transform: translateX(-100px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
  }

    @keyframes fade-in-right-to-left {
    from{
        opacity: 0;
        transform: translateX(100px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
  }

  @media (max-width: 764px) {
    .hexagons-row {
        gap: 20px;
    }
    .hexagon {
        width: 45.15px;
        height: 70px;
        border-radius: 8px;
    }
    .hexagon-content span{
        font-size: 35px;
    }
  }

  /* FINAL GLOBAL KEYFRAMES */

/* FIM GLOBAL */

/* ============================================================
   LANDING HERO SECTION - Página Principal
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Hero da landing page com formulário de conversão
              e elementos decorativos de fundo.
   ============================================================ */

:root {
  /* Cores específicas do hero da landing */
  --hero-bg-primary: #196478;
  --hero-bg-secondary: #22bead;
  --hero-title-bg: #fadc67;
  --hero-title-text: #1E6B7F;
  --hero-text-color: #ffffff;
  --form-bg: #ffffff;
  --form-border: #D8E4E6;
  --form-focus: #22bead;
  --button-bg: #fadc67;
  --button-text: #196478;
  --button-hover: #f5d147;
  --error-color: #e74c3c;
  --privacy-link: #22bead;
}

/* Landing Hero Section */
/* .landing-page .landing-hero-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--hero-bg-primary) 0%, var(--hero-bg-secondary) 100%);
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
} */

.landing-page .landing-hero-container {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 120px;
  background:   linear-gradient(135deg, rgba(30, 107, 127, 0.8), rgba(34, 190, 173, 0.8)),
                url("assets/images/landing/team-collaboration-brainstorming-meeting.avif") no-repeat center / cover;
}

.landing-page .landing-hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--primary-width);
  width: 100%;
  gap: 6rem;
  z-index: 2;
  position: relative;
}

/* Hero Text Container */
.landing-page .hero-text-container {
  display: flex;
  flex-direction: column;
  /* flex: 1; */
  max-width: 650px;
  gap: 3rem;
}

.landing-page .hero-title-container {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.landing-page .hero-main-title {
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--hero-text-color);
  line-height: 1.2;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.landing-page i.sparkles{
  width: 23px;
  height: 23px;
  position: relative;
  align-self: flex-start;
}

.landing-page .sparkles svg:first-child {
  color: var(--text-white);
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 2rem;
  left: 0.2rem;
  animation: sparkles-animation 3s forwards
}

.landing-page .sparkles svg:last-child{
  width: 2rem;
  height: 2rem;
  color: var(--text-white);
  position: absolute;
  top: 10px;
  left: 26px;
  animation: sparkles-animation 2.4s forwards
}

.landing-page .bottom-title {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.landing-page .title-highlight {
  background-color: var(--hero-title-bg);
  color: var(--hero-bg-primary);
  padding: 1rem 2rem;
  border-radius: 12px;
  display: inline-block;
}

.landing-page .highlight-icon-container {
  display: flex;
  margin-bottom: 1rem;
  flex-direction: column;
}

.landing-page .highlight-container {
  display: flex;
  padding: 0rem 1rem;
  position: relative;
  align-items: flex-start;
}

.landing-page .highlight-content {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background-color: var(--highlight-bg);
  position: absolute;
  left: 0;
  z-index: 0;
  animation: highlight-text 1s forwards;
  transform-origin: 0 100%;
}

.landing-page .highlight-text {
  display: flex;
  text-align: center;
  color: var(--hero-title-text);
  font-weight: 700;
  font-size: 4.8rem;
  margin: 0;
  z-index: 1;
}

.landing-page .title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-page .title-icon span {
  font-size: 4rem;
  color: var(--hero-title-bg);
}

.landing-page .hero-subtitle {
  max-width: 550px;
  font-size: 2.8rem;
  color: var(--hero-text-color);
  line-height: 1.4;
  margin: 0;
}

/* Hero Form Container */
.landing-page .hero-form-container {
  display: flex;
  position: absolute;
  right: 0;
  top: -5rem;
  flex: 1;
  max-width: 500px;
  align-items: center;
  justify-content: center;
}

.landing-page .trial-form-wrapper {
  background-color: var(--form-bg);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  width: 100%;
}

.landing-page .form-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}

.landing-page .form-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--hero-bg-primary);
  margin: 0;
  text-align: left;
}

.landing-page .form-subtitle {
  font-size: 1.6rem;
  color: var(--secondary-blue);
  line-height: 1.4;
  margin: 0;
  opacity: 0.8;
  text-align: left;
}

/* Form Styles */
.landing-page .trial-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.landing-page .form-row {
  display: flex;
  gap: 1.5rem;
}

.landing-page .form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
}

.landing-page .form-input,
.landing-page .form-select {
  padding: 1.2rem 1.5rem;
  border: 2px solid var(--form-border);
  border-radius: 50px;
  font-size: 1.4rem;
  color: var(--secondary-blue);
  background-color: var(--form-bg);
  transition: all 0.3s ease;
}

.landing-page .form-input:focus,
.landing-page .form-select:focus {
  outline: none;
  border-color: var(--form-focus);
  box-shadow: 0 0 0 3px rgba(34, 190, 173, 0.1);
}

.landing-page .form-input.error,
.landing-page .form-select.error {
  border-color: var(--error-color);
}

.landing-page .form-input::placeholder {
  color: rgba(30, 107, 127, 0.6);
}

.landing-page .form-select {
  cursor: pointer;
}

.landing-page .error-message {
  font-size: 1.2rem;
  color: var(--error-color);
  display: none;
}

.landing-page .error-message.show {
  display: block;
}

/* Checkbox Styles */
.landing-page .checkbox-group {
  margin: 1rem 0;
}

.landing-page .checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  position: relative;
}

.landing-page .checkbox-container input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.landing-page .checkmark {
  width: 16px;
  height: 16px;
  border: 2px solid var(--form-border);
  border-radius: 4px;
  background-color: var(--form-bg);
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.landing-page .checkbox-container input:checked ~ .checkmark {
  background-color: var(--form-focus);
  border-color: var(--form-focus);
}

.landing-page .checkbox-container input:checked ~ .checkmark::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
}

.landing-page .checkbox-text {
  font-size: 1.1rem;
  color: var(--secondary-blue);
  line-height: 1.4;
}

.landing-page .privacy-link {
  color: var(--privacy-link);
  text-decoration: none;
  font-weight: 600;
}

.landing-page .privacy-link:hover {
  text-decoration: underline;
}

/* Submit Button */
.landing-page .submit-button {
  width: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  padding: 1.5rem 0rem;
  border-radius: 8px;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  align-self: flex-end;
}

.landing-page .submit-button:hover {
  background-color: var(--button-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.landing-page .submit-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.landing-page .button-loader {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid var(--button-text);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 1rem;
}

.landing-page .submit-button.loading .button-text {
  opacity: 0.7;
}

.landing-page .submit-button.loading .button-loader {
  display: block;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Background Elements */
.landing-page .hero-background-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.landing-page .bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  animation: float 6s ease-in-out infinite;
}

.landing-page .bg-circle-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.landing-page .bg-circle-2 {
  width: 200px;
  height: 200px;
  top: 60%;
  left: 15%;
  animation-delay: 2s;
}

.landing-page .bg-circle-3 {
  width: 150px;
  height: 150px;
  top: 30%;
  right: 10%;
  animation-delay: 4s;
}

/* Alert Messages */
.landing-page .alert {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  font-size: 1.4rem;
  font-weight: 500;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.landing-page .alert-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.landing-page .alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.landing-page .alert::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 1rem;
  font-weight: bold;
}

.landing-page .alert-success::before {
  background-color: #28a745;
  color: white;
}

.landing-page .alert-danger::before {
  content: "✕";
  background-color: #dc3545;
  color: white;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

/* Responsive */
@media (max-width: 1536px) {
  .landing-page .landing-hero-container {
    min-height: 80vh;
  }

  .landing-page .report-interface {
    max-width: 340px;
    position: absolute;
    top: 20%;
    right: 2%;
  }

  .landing-page .bee-image {
    width: 200px;
    height: 200px;
    bottom: 10px;
    right: 5%;
  }

  .landing-page .bee-image img{
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 1280px) {
  .landing-page .highlight-text{
    font-size: 4rem;
  }

  .landing-page .top-title.highlight-container {
    width: 82%;
  }

  .landing-page .hero-subtitle {
    font-size: 2.4rem;
  }

  .landing-page .form-title {
    font-size: 2rem;
  }

  .landing-page .form-subtitle {
    font-size: 1.4rem;
  }

  .landing-page .form-input, .landing-page .form-select {
    padding: .6rem 1.2rem;
  }

  .landing-page .trial-form {
    gap: 1.5rem;
  }

  .landing-page .submit-button {
    padding: 1rem 0rem;
  }

  .landing-page .hero-form-container {
    top: -6.5rem;
  }
}

@media (max-width: 1024px) {
  .landing-page .landing-hero-content {
    flex-direction: column;
    gap: 4rem;
    margin-top: 50px;
  }

  .landing-page .hero-text-container {
    max-width: 100%;
    text-align: center;
  }

  .landing-page .hero-form-container {
    max-width: 60%;
  }

  .landing-page .top-title.highlight-container {
    width: auto;
    justify-content: center;
  }

  .landing-page .top-title.highlight-container .highlight-content {
    left: auto;
  }

  .landing-page .landing-hero-container {
    margin-top: 120px;
  }

  .landing-page .bottom-title {
    flex-direction: column;
  }
  
  .landing-page i.sparkles {
    width: 10px;
    height: auto;
    align-self: center;
  }

  .landing-page .sparkles svg:first-child {
    width: 2rem;
    height: 2rem;
    top: 1rem;
    left: 0;
  }

  .landing-page .sparkles svg:last-child {
    width: 1rem;
    height: 1rem;
    top: 0.5rem;
    left: 1.7rem;
  }

  .landing-page .highlight-text {
    font-size: 2.2rem;
  }

  .landing-page .highlight-icon-container {
    align-items: center;
  }

  .landing-page .hero-form-container {
    position: unset;
  }

  .landing-page .hero-main-title {
    font-size: 2.4rem;
  }

  .landing-page .title-highlight {
    padding: 0.8rem 1.5rem;
  }

  .landing-page .hero-subtitle {
    font-size: 1.6rem;
  }

  .landing-page .trial-form-wrapper {
    padding: 1.5rem;
  }

  .landing-page .submit-button {
    align-self: center;
  }
}

@media (max-width: 768px) {
  .landing-page .landing-hero-container {
    margin-top: 90px;
    padding: 2rem 1rem;
    min-height: auto;
  }

  .landing-page .hero-main-title {
    font-size: 3.2rem;
    flex-direction: column;
    gap: 1rem;
  }

  .landing-page .hero-subtitle {
    font-size: 1.8rem;
  }

  .landing-page .trial-form-wrapper {
    padding: 2rem;
  }

  .landing-page .form-row {
    flex-direction: column;
    gap: 1rem;
  }

  .landing-page .form-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .landing-page .top-title.highlight-container {
    width: auto;
    justify-content: center;
  }

  .landing-page .top-title.highlight-container .highlight-content {
    left: auto;
  }

  .landing-page .landing-hero-container {
    margin-top: 90px;
  }

  .landing-page .bottom-title {
    flex-direction: column;
  }
  
  .landing-page i.sparkles {
    width: 10px;
    height: auto;
    align-self: center;
  }

  .landing-page .sparkles svg:first-child {
    width: 2rem;
    height: 2rem;
    top: 1rem;
    left: 0;
  }

  .landing-page .sparkles svg:last-child {
    width: 1rem;
    height: 1rem;
    top: 0.5rem;
    left: 1.7rem;
  }

  .landing-page .highlight-text {
    font-size: 2.2rem;
  }

  .landing-page .highlight-icon-container {
    align-items: center;
  }

  .landing-page .hero-form-container {
    position: unset;
    max-width: 100%;
  }

  .landing-page .hero-main-title {
    font-size: 2.4rem;
  }

  .landing-page .title-highlight {
    padding: 0.8rem 1.5rem;
  }

  .landing-page .hero-subtitle {
    font-size: 1.6rem;
  }

  .landing-page .trial-form-wrapper {
    padding: 1.5rem;
  }

  .landing-page .submit-button {
    align-self: center;
  }
}

/* === Fim LANDING HERO SECTION === */

/* ============================================================
   LANDING FEATURES SECTION - Página Principal
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Seção de características principais com cards
              de funcionalidades e visualizações.
   ============================================================ */

:root {
  /* Cores específicas da seção de features */
  --features-bg: #fadc67;
  --features-text-color: #196478;
  --card-header-bg: #196478;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.1);
  --progress-fill: #22bead;
  --progress-bg: #e1e5e9;
  --check-color: #22bead;
  --pending-color: #95a5a6;
  --link-color: #196478;
}

/* Landing Features Section */
.landing-page .landing-features-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14rem 2rem 6rem 2rem;
  background: linear-gradient(135deg, rgba(253, 190, 43, 0.8), rgba(231, 229, 204, 0.8)),
    url("assets/images/landing/modern-office-workspace-computer-desk.avif") no-repeat center / cover;
  position: relative;
}

.landing-page .landing-ai-container {
  min-height: 800px;
}

.landing-page .landing-features-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--primary-width);
  width: 100%;
  gap: 6rem;
  margin-bottom: 6rem;
}

/* Features Text Container */
.landing-page .features-text-container {
  max-width: 70%;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2rem;
}

.landing-page .features-main-title {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--features-text-color);
  line-height: 1.2;
  margin: 0;
  text-align: center;
}

.landing-page .features-subtitle {
  max-width: 90%;
  font-size: 2.8rem;
  color: var(--features-text-color);
  line-height: 1.4;
  margin: 0;
  opacity: 0.9;
  text-align: center;
}

/* Features Image Container */
.landing-page .features-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 500px;
  position: absolute;
  right: 10%;
  bottom: 30%;
  z-index: 0;
}

.landing-page .features-image-container img {
  width: 100%;
  height: auto;
}

/* Features Cards Container */
.landing-page .features-cards-container {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 3rem;
  max-width: var(--primary-width);
  width: 100%;
  z-index: 1;
}

.landing-page .feature-card {
  max-width: 380px;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.landing-page .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.landing-page .card-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: var(--card-header-bg);
  padding: 2rem;
  color: white;
  opacity: 0.9;
}

.landing-page .card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: rgba(216, 228, 230, 1);
  border-radius: 50%;
  flex-shrink: 0;
}

.landing-page .card-icon span {
  font-size: 2.4rem;
  color: var(--card-header-bg);
}

.landing-page .card-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0;
}

.landing-page .card-content {
  width: auto;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2rem;
  gap: 2rem;
  flex: 1;
  background-color: var(--card-bg);
}

.landing-page .card-description {
  font-size: 1.6rem;
  color: var(--secondary-blue);
  line-height: 1.4;
  margin: 0;
}

/* Card Visuals */
.landing-page .card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin: 1rem 0;
}

/* Productivity Chart */
.landing-page .productivity-chart .chart-container {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.landing-page .circular-chart {
  position: relative;
  width: 80px;
  height: 80px;
}

.landing-page .chart-progress {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(var(--progress-fill) 0deg 252deg, var(--progress-bg) 252deg 360deg);
  position: relative;
}

.landing-page .chart-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-page .chart-center span {
  font-size: 2rem;
  color: var(--progress-fill);
}

.landing-page .chart-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.landing-page .chart-line {
  width: 60px;
  height: 8px;
  background-color: var(--progress-bg);
  border-radius: 4px;
}

.landing-page .chart-line:first-child {
  width: 80px;
  background-color: var(--progress-fill);
}

/* Objectives Progress */
.landing-page .objectives-progress {
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.landing-page .progress-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.landing-page .progress-icon {
  font-size: 1.8rem;
  color: var(--features-text-color);
  flex-shrink: 0;
}

.landing-page .progress-bar {
  flex: 1;
  height: 8px;
  background-color: var(--progress-bg);
  border-radius: 4px;
  overflow: hidden;
}

.landing-page .progress-fill {
  height: 100%;
  background-color: var(--progress-fill);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.landing-page .check-icon {
  font-size: 2rem;
  color: var(--check-color);
  flex-shrink: 0;
}

.landing-page .check-icon.pending {
  color: var(--pending-color);
}

/* Evaluation Score */
.landing-page .evaluation-score {
  gap: 2rem;
}

.landing-page .score-hexagon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-page .hexagon-shape {
  width: 80px;
  height: 80px;
  background-color: var(--progress-fill);
  position: relative;
  transform: rotate(30deg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-page .hexagon-shape::before,
.landing-page .hexagon-shape::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: var(--progress-fill);
  border-radius: 8px;
}

.landing-page .hexagon-shape::before {
  transform: rotate(60deg);
}

.landing-page .hexagon-shape::after {
  transform: rotate(-60deg);
}

.landing-page .score-content {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  transform: rotate(-30deg);
  z-index: 10;
}

.landing-page .star-icon {
  font-size: 1.6rem;
  margin-bottom: 0.2rem;
}

.landing-page .score-number {
  font-size: 1.8rem;
  font-weight: 700;
}

.landing-page .score-dots {
  position: absolute;
  top: -10px;
  right: -10px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.landing-page .dot {
  width: 6px;
  height: 6px;
  background-color: var(--progress-fill);
  border-radius: 50%;
}

.landing-page .score-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.landing-page .score-line {
  width: 50px;
  height: 6px;
  background-color: var(--progress-bg);
  border-radius: 3px;
}

.landing-page .score-line:nth-child(2) {
  width: 70px;
  background-color: var(--progress-fill);
}

/* Card Link */
.landing-page .card-link {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.6rem;
  align-self: center;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.landing-page .card-link:hover {
  border-bottom-color: var(--link-color);
}

/* Responsive */
@media (max-width: 1024px) {
  .landing-page .landing-features-content {
    flex-direction: column;
    gap: 4rem;
    margin-bottom: 4rem;
  }

  .landing-page .features-text-container {
    max-width: 100%;
    text-align: center;
  }

  .landing-page .features-cards-container {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .landing-page .landing-features-container {
    padding: 4rem 1rem;
  }

  .landing-page .features-main-title {
    font-size: 2.8rem;
  }

  .landing-page .features-subtitle {
    font-size: 1.8rem;
  }

  .landing-page .card-header {
    padding: 1.5rem;
  }

  .landing-page .card-title {
    font-size: 2rem;
  }

  .landing-page .card-content {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .landing-page .features-main-title {
    font-size: 2.4rem;
  }

  .landing-page .features-subtitle {
    max-width: 100%;
    font-size: 1.6rem;
  }

  .landing-page .card-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}

/* === Fim LANDING FEATURES SECTION === */

/* ============================================================
   LANDING PERFORMANCE METRIC SECTION - Página Principal
   Design: Alan Marquez
   Desenvolvedores: Jean Vasconcelos, Bruno Oliveira
   Data: 04/07/2025
   Descrição: Seção do Índice Global de Desempeño com gráfico
              circular e informações destacadas.
   ============================================================ */

:root {
  /* Cores específicas da seção performance metric */
  --metric-title-color: #196478;
  --metric-box-bg: #fef6e0;
  --metric-box-border: #f5e5b8;
  --metric-text-color: #196478;
  --hexagon-badge-bg: #fadc67;
  --hexagon-icon-color: #196478;
}

/* Landing Performance Metric Section */
.landing-page .landing-performance-metric-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 0 15rem 0;
  background-color: var(--background-beige);
  position: relative;
}

.landing-page .performance-metric-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 6rem;
}

/* Metric Title */
.landing-page .metric-title-container {
  display: flex;
  background: linear-gradient(90deg, transparent, rgba(226, 229, 216, 1), transparent);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.landing-page .metric-main-title {
  font-size: 3.2rem;
  padding-block: 22px;
  font-weight: 700;
  color: var(--metric-title-color);
  line-height: 1.3;
  margin: 0;
  max-width: 900px;
}

/* Metric Demo Container */
.landing-page .metric-demo-container {
  /* max-width: var(--primary-width); */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 6rem;
}

/* Metric Visual Container */
.landing-page .metric-visual-container {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  max-width: 500px;
}

.landing-page .chart-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
}

.landing-page .performance-chart {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
}

.landing-page .chart-hexagon-badge {
  position: absolute;
  top: 0;
  right: -10%;
  z-index: 10;
}

.landing-page .hexagon-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-page .hexagon-badge span {
  position: absolute;
  font-size: 3rem;
  color: var(--hexagon-icon-color);
  z-index: 10;
}

/* Metric Description Container */
.landing-page .metric-description-container {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  max-width: 600px;
}

.landing-page .metric-info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 12px;
  padding: 3rem;
  gap: 2rem;
}

.landing-page .metric-info-title {
  width: 100%;
  text-align: left;
  font-size: 3.2rem;
  font-weight: 700;
  background: linear-gradient(90deg, transparent, rgba(250, 220, 103, 1), transparent);
  padding-block: 22px;
  color: var(--metric-text-color);
  line-height: 1.2;
  margin: 0;
}

.landing-page .metric-info-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.landing-page .metric-info-text {
  font-size: 1.8rem;
  color: var(--metric-text-color);
  line-height: 1.5;
  margin: 0;
}

.landing-page .metric-info-text strong {
  font-weight: 700;
  color: var(--metric-text-color);
}

.landing-page .metric-highlight-text {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--metric-text-color);
  line-height: 1.4;
  margin: 0;
}

.landing-page .button-link {
  background: #22BEAD;
  color: #ffffff !important;
  padding: 10px 20px !important;
  font-size: 15px;
  border-radius: 30px;
  font-weight: 600;
  opacity: 1;
  transition: all linear 0.3s;
  width: 180px;
  cursor: pointer;
  margin-top: 0;
  height: auto;
  text-align: center;
  text-decoration: none;
}

.landing-page .button-link:hover {
  background-color: #FADC67;
  color: #1E6B7F !important;
}


/* Animações */
.landing-page .chart-wrapper {
  animation: fadeInScale 0.8s ease-out;
}

.landing-page .report-interface {
  max-width: 460px;
  position: absolute;
  top: 30%;
  right: 7.5%;
}

.landing-page .bee-image {
  top: auto;
  bottom: 10%;
  right: 10%;
}

.landing-page .btn-download-brochure {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-white);
    color: var(--text-primary);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.8rem;
    transition: all 0.3s ease;
    align-self: flex-start;
    box-shadow: 0 4px 15px var(--shadow-light);
}

.landing-page .btn-download-brochure:hover {
    background-color: #e5e5e5;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-medium);
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.landing-page .hexagon-badge {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}


/* Responsive */
@media (max-width: 1536px) {

  .landing-page .report-interface {
    max-width: 360px;
    position: absolute;
    top: 20%;
    right: 2%;
  }

  .landing-page .bee-image {
    width: 160px;
    height: 160px;
    bottom: 10%;
    right: 0;
  }

  .landing-page .bee-image img{
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 1024px) {
  .landing-page .metric-info-title {
    text-align: center;
  }

  .landing-page .metric-demo-container {
    flex-direction: column;
    gap: 4rem;
  }

  .landing-page .metric-visual-container {
    max-width: 100%;
  }

  .landing-page .metric-description-container {
    max-width: 100%;
  }

  .landing-page .button-link {
    align-self: center;
  }
}

@media (max-width: 768px) {
  .landing-page .landing-performance-metric-container {
    padding: 4rem 1rem;
  }

  .landing-page .performance-metric-content {
    gap: 4rem;
  }

  .landing-page .metric-main-title {
    font-size: 2.8rem;
  }

  .landing-page .metric-info-box {
    padding: 2rem;
  }

  .landing-page .metric-info-title {
    font-size: 2.4rem;
  }

  .landing-page .metric-info-text {
    font-size: 1.6rem;
  }

  .landing-page .metric-highlight-text {
    font-size: 1.8rem;
  }

  .landing-page .chart-hexagon-badge {
    top: auto;
    bottom: 0;
    right: 5%;
  }

  .landing-page .hexagon-badge {
    width: 72px;
    height: 80px;
  }

  .landing-page .hexagon-badge span {
    font-size: 2.4rem;
  }
}

@media (max-width: 480px) {
  .landing-page .button-link {
    align-self: center;
  }

  .landing-page .metric-main-title {
    font-size: 2.4rem;
  }

  .landing-page .metric-info-box {
    padding: 1.5rem;
  }

  .landing-page .metric-info-title {
    text-align: center;
    font-size: 2rem;
  }

  .landing-page .metric-info-text {
    font-size: 1.5rem;
  }

  .landing-page .metric-highlight-text {
    font-size: 1.6rem;
  }

  .landing-page .metric-visual-container {
    max-width: 90%;
    gap: 20px;
    flex-direction: column;
  }

  .landing-page .report-interface {
    position: initial;
  }

  .landing-page .chart-hexagon-badge {
    top: auto;
    bottom: 0;
  }

  .metric-visual-container.befective-ai-page .btn-generate {
    padding: 0.8rem 1.2rem;
  }

  .metric-visual-container.befective-ai-page .message-avatar.ai {
    flex-direction: column;
  }

  .metric-visual-container.befective-ai-page .message-avatar.user {
    flex-direction: column;
  }

  .metric-visual-container.befective-ai-page .chat-search input {
    width: 80px;
  }

  .metric-visual-container.befective-ai-page .bebot-avatar {
    width: 30px;
    height: 30px;
  }

  .landing-page .home-page .performance-overview-description-content #bee-animation {
    bottom: -25px;
  }
}

/* === Fim LANDING PERFORMANCE METRIC SECTION === */

.site-main {
    width: 100%;
}