/********** Template CSS **********/

/* imported fonts */
@font-face {
  font-family: BebasNeue;
  src: url("../fonts/bebas_neue/BebasNeue.otf") format("opentype");
}

@font-face {
  font-family: Montserrat;
  src: url("../fonts/Montserrat/Montserrat-ExtraLight.ttf") format("opentype");
}
/* *{
  font-family: Arial, Helvetica, sans-serif!important;
} */
/*  */
:root {
  --primary: #212d47;
  --secondary: #9b9b9b;
  --light: #f5f5f5;
  --dark: #161616;
}

.navbar-logo {
  /* margin-left: 150px !important; */
  width: 150px;
  background: cover;
}

@media (max-width: 1210px) {
  /* .navbar-logo {
    margin-left: 100px !important;
  } */
}

@media (max-width: 1133px) {
  /* .navbar-logo {
    margin-left: 60px !important;
  } */
}

@media (max-width: 1037px) {
  /* .navbar-logo {
    margin-left: 30px !important;
  } */
}

h1 {
  font-family: "BebasNeue";
}

h2 {
  font-family: "BebasNeue";
}

p {
  font-family: "Montserrat";
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-black {
  font-weight: 900 !important;
}

.back-to-top {
  position: fixed;
  display: none;
  right: 15px;
  bottom: 25px;
  z-index: 99;
}

/*** Spinner ***/
#spinner {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease-out,
    visibility 0s linear 0.5s;
  z-index: 99999;
}

#spinner.show {
  transition:
    opacity 0.5s ease-out,
    visibility 0s linear 0s;
  visibility: visible;
  opacity: 1;
}

/*** Button ***/
.btn {
  font-weight: 500;
  transition: 0.5s;
}

.btn.btn-primary {
  color: #ffffff;
}

.btn-square {
  width: 38px;
  height: 38px;
}

.btn-sm-square {
  width: 20px;
  height: 20px;
}

.btn-lg-square {
  width: 48px;
  height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
}

/*** Navbar ***/
.navbar {
  background: #fff;
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to right, #212d47, #51fffa) 1;
  border-image: linear-gradient(#212d47 0.02%, 123.81%);
}

.navbar.sticky-top {
  top: -100px;
  transition: 0.5s;
}

.navbar .navbar-brand {
  height: 75px;
}

.navbar-nav {
  margin-left: 40px;
}

.navbar .navbar-nav .nav-link {
  font-family: Arial, Helvetica, sans-serif;
  margin-right: 30px;
  font-size: 16px;
  padding: 25px 0;
  color: var(--primary);
  font-weight: 600;
  outline: none;
}

.button-nav {
  position: absolute;
  color: #fff;
  border: none;
  height: 40px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 17px;

  /* Degrade */
  text-align: center;

  background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
  border-radius: 8px;
}

.button-carrousel {
  /* position: absolute; */
  width: 256px;
  height: 48px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Azul */
  color: #212d47;
  background: #51fffa;
  border-radius: 8px;
  align-items: center !important;
}

.button-carrousel:hover {
  /* Azul */
  color: #51fffa;
  background: #212d47;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
  color: #45cdcf;
  color: #304db9;
}

/* .navbar .dropdown-toggle::after {
  border: none;
  content: '\f107';
  font-family: 'BebasNeue' !important;
  font-weight: 900;
  vertical-align: middle;
  margin-left: 8px;
} */

.nav-item.dropdown .nav-link::after {
  /* Seu estilo personalizado aqui */
  content: none; /* Para remover o ícone padrão */
}

@media (max-width: 991.98px) {
  .navbar .navbar-nav .nav-link {
    margin-right: 0;
    padding: 10px 0;
  }
  /*** Navbar ***/
  .navbar {
    background: white !important;
  }

  .navbar .navbar-nav {
    border-top: 1px solid #eeeeee;
  }
}

.textfot {
  font-size: 15px !important;
}

@media (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: block;
    border: none;
    margin-top: 0;
    top: 150%;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
  }

  .navbar .nav-item:hover .dropdown-menu {
    top: 100%;
    visibility: visible;
    transition: 0.5s;
    opacity: 1;
  }
}

.navbar .btn:hover {
  color: #ffffff !important;
  background: var(--primary) !important;
}

/*** Header ***/
.header-carousel .carousel-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  /* background: rgba(22, 22, 22, .7); */
}

@media (max-width: 768px) {
  .header-carousel .owl-carousel-item {
    position: relative;
    min-height: 65vh;
  }
  .formnews {
    justify-content: center !important;
    display: flex !important;
    align-items: center;
  }
  .buttonnews {
    justify-content: center !important;
    display: flex !important;
    align-items: center;
    margin-top: 10%;
  }

  .mobilee {
    margin: 0;
  }

  .header-carousel .owl-carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .header-carousel .owl-carousel-item h5,
  .header-carousel .owl-carousel-item p {
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  .header-carousel .owl-carousel-item h1 {
    font-size: 30px;
    font-weight: 600;
  }
}

.testimonials-carousel .carousel-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  /* background: rgba(22, 22, 22, .7); */
}

@media (max-width: 768px) {
  .testimonials-carousel .owl-carousel-item {
    position: relative;
    min-height: 500px;
  }

  .testimonials-carousel .owl-carousel-item img {
    width: 100% !important;
  }

  .testimonials-carousel .owl-carousel-item h5,
  .testimonials-carousel .owl-carousel-item p {
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  .testimonials-carousel .owl-carousel-item h1 {
    font-size: 30px;
    font-weight: 600;
  }
}

.testimonials-carousel .owl-nav {
  position: absolute;
  width: 200px;
  height: 45px;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}

.testimonials-carousel .owl-nav .owl-prev,
.testimonials-carousel .owl-nav .owl-next {
  width: 35px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #51fffa;
  background: transparent;
  /* border: 1px solid #51FFFA;
    border-radius: 45px; */
  font-size: 22px;
  transition: 0.5s;
}

.testimonials-carousel .owl-nav .owl-prev:hover,
.testimonials-carousel .owl-nav .owl-next:hover {
  background: var(--primary);
  border-color: var(--primary);
}

.testimonials-carousel {
  position: absolute;
  height: 45px;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonials-carousel {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  width: 40px;
  height: 8px;
  background: transparent;
  border: 1px solid #51fffa;
  border-radius: 15px;
  transition: 0.5s;
}

.testimonials-carousel1 {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  width: 40px;
  height: 8px;
  background: transparent;
  border: 1px solid #444444;
  border-radius: 15px;
  transition: 0.5s;
}

.testimonials-carousel2 {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  width: 40px;
  height: 8px;
  background: transparent;
  border: 1px solid #395ffb;
  border-radius: 15px;
  transition: 0.5s;
}

.header-carousel .owl-nav {
  position: absolute;
  width: 200px;
  height: 45px;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
  width: 35px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #51fffa;
  background: transparent;
  /* border: 1px solid #51FFFA;
    border-radius: 45px; */
  font-size: 22px;
  transition: 0.5s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
  background: var(--primary);
  border-color: var(--primary);
}

.header-carousel .owl-dots {
  position: absolute;
  height: 45px;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-carousel .owl-dot {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  width: 40px;
  height: 8px;
  background: transparent;
  border: 1px solid #51fffa;
  border-radius: 15px;
  transition: 0.5s;
}

.bg-marinho {
  background: #212d47;
}

.bg-ciano {
  background: rgb(33, 45, 71);
  background: linear-gradient(
    95deg,
    rgba(33, 45, 71, 1) 0%,
    rgba(0, 175, 178, 1) 42%,
    rgba(0, 173, 176, 1) 72%
  );
}

.bg-ciano1 {
  background: rgb(33, 45, 71);
  background: linear-gradient(
    95deg,
    rgba(33, 45, 71, 1) 0%,
    rgba(0, 175, 178, 1) 42%,
    rgba(0, 173, 176, 1) 72%
  );
}

.img-about {
  height: 650px;
}

.img-about-mobile {
  height: 380px;
  display: none;
}

.title-map {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  /* or 117% */

  /* Degrade */

  background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-map1 {
  margin-top: 15% !important;
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  /* or 117% */

  /* Degrade */

  background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-map {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;

  /* Azul marinho */

  color: #212d47;
}

.text-map1 {
  font-family: "Montserrat";
  width: 80%;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 25px;

  /* Azul marinho */

  color: #212d47;
}

@media (max-width: 991px) {
  .img-about {
    display: none;
  }

  .img-about-mobile {
    height: 300px;
    left: 180px;
    justify-content: center;
    display: flex;
    margin-bottom: 0;
  }

  .hvc {
    height: 350vh !important;
  }
}

@media (max-width: 767px) {
  .img-about-mobile {
    left: 100px;
  }
}

@media (max-width: 500px) {
  .img-about-mobile {
    left: 0;
  }
}

@media (max-width: 360px) {
  .img-about-mobile {
    left: 0;
    height: 250px;
    justify-content: center;
    display: flex;
    margin-bottom: 0;
  }
}

.text-metrics {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 64px;
  line-height: 56px;
  /* or 88% */

  text-align: center;

  /* Azul marinho */

  color: #ffffff;
}

.text-metrics-text {
  font-family: "BebasNeue";
  font-style: normal;
  /* display: inline-flex; */
  font-size: 24px;
  /* or 88% */
  white-space: nowrap;

  text-align: center;

  /* Azul marinho */

  color: #212d47;
}

.text-justify {
  text-align: justify;
}

.color-white {
  font-weight: bolder;
}

.title-about {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  /* or 117% */

  /* Branco */

  color: #ffffff;
}

.text-about {
  font-family: "Montserrat" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  color: #ebeff5 !important;
  /* Off */
}

.color-ciano {
  color: #51fffa;
}

/* .header-carousel .owl-dot::after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    top: 4px;
    left: 4px;
    background: #51FFFA;
    border-radius: 5px;
} */

.header-carousel .owl-dot.active {
  background: #51fffa;
  border-color: #51fffa;
}

.testimonials-carousel .owl-dot.active {
  background: #51fffa;
  border-color: #51fffa;
}

/* -------verp-------- */

.testimonials-carousel1 .owl-dot.active {
  background: #444444;
  border-color: #444444;
}

.testimonials-carousel2 .owl-dot.active {
  background: #395ffb;
  border-color: #395ffb;
}

.testimonials-carousel5 .owl-dot.active {
  background: #682181;
  border: 1px solid #682181 !important;
}

.page-header {
  background:
    linear-gradient(rgba(22, 22, 22, 0.7), rgba(22, 22, 22, 0.7)),
    url(../img/carousel-1.jpg) center center no-repeat;
  background-size: cover;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--light);
}

/*** About ***/
@media (min-width: 992px) {
  .container.about {
    max-width: 100% !important;
  }

  .about-text {
    padding-right: calc(((100% - 960px) / 2) + 0.75rem);
  }
}

@media (min-width: 1200px) {
  .about-text {
    padding-right: calc(((100% - 1140px) / 2) + 0.75rem);
  }
}

@media (min-width: 1400px) {
  .about-text {
    padding-right: calc(((100% - 1320px) / 2) + 0.75rem);
  }
}

/*** Service ***/
.service-row {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
}

.service-item {
  border-color: rgba(0, 0, 0, 0.03) !important;
}

.service-item .btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  background: var(--primary);
  border-radius: 38px;
  white-space: nowrap;
  overflow: hidden;
  transition: 0.5s;
}

.size-icon-nav {
  font-size: 24px;
  margin-left: 5px;
  text-align: center;
}

.service-item:hover .btn {
  width: 140px;
}

/*** Feature ***/
@media (min-width: 992px) {
  .container.feature {
    max-width: 100% !important;
  }

  .feature-text {
    padding-left: calc(((100% - 960px) / 2) + 0.75rem);
  }
}

@media (min-width: 1200px) {
  .feature-text {
    padding-left: calc(((100% - 1140px) / 2) + 0.75rem);
  }
}

@media (min-width: 1400px) {
  .feature-text {
    padding-left: calc(((100% - 1320px) / 2) + 0.75rem);
  }
}

/*** Project Portfolio ***/
#portfolio-flters li {
  display: inline-block;
  font-weight: 500;
  color: var(--dark);
  cursor: pointer;
  transition: 0.5s;
  border-bottom: 2px solid transparent;
}

#portfolio-flters li:hover,
#portfolio-flters li.active {
  color: var(--primary);
  border-color: var(--primary);
}

.portfolio-inner {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.07);
}

.portfolio-inner img {
  transition: 0.5s;
}

.portfolio-inner:hover img {
  transform: scale(1.1);
}

.portfolio-inner .portfolio-text {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -50px;
  opacity: 0;
  transition: 0.5s;
}

.portfolio-inner:hover .portfolio-text {
  bottom: 0;
  opacity: 1;
}

/*** Quote ***/
@media (min-width: 992px) {
  .container.quote {
    max-width: 100% !important;
  }

  .quote-text {
    padding-right: calc(((100% - 960px) / 2) + 0.75rem);
  }
}

@media (min-width: 1200px) {
  .quote-text {
    padding-right: calc(((100% - 1140px) / 2) + 0.75rem);
  }
}

@media (min-width: 1400px) {
  .quote-text {
    padding-right: calc(((100% - 1320px) / 2) + 0.75rem);
  }
}

/*** Team ***/
.team-item {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
}

.team-item img {
  transition: 0.5s;
}

.team-item:hover img {
  transform: scale(1.1);
}

.team-item .team-social {
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 22, 22, 0.7);
  opacity: 0;
  transition: 0.5s;
}

.team-item:hover .team-social {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 1;
}

.team-item .team-social .btn {
  opacity: 0;
}

.team-item:hover .team-social .btn {
  opacity: 1;
}

/*** Testimonial ***/
.testimonial-carousel {
  display: flex !important;
  flex-direction: column-reverse;
  max-width: 1000px; /* Largura máxima do carrossel */
  margin: 0 auto;
}

.testimonial-item {
  width: 100%; /* Define a largura de cada item do carrossel */
}

.testimonial-carousel .owl-dots {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.testimonial-carousel .owl-dots .owl-dot {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 5px;
  transition: 0.5s;
}

.testimonial-carousel .owl-dots .owl-dot.active {
  width: 100px;
  height: 100px;
}

.testimonial-carousel .owl-dots .owl-dot::after {
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  content: "\f10d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--primary);
  background: #ffffff;
  border-radius: 40px;
  transition: 0.5s;
  opacity: 0;
}

.testimonial-carousel .owl-dots .owl-dot.active::after {
  opacity: 1;
}

.testimonial-carousel .owl-dots .owl-dot img {
  border-radius: 60px;
  opacity: 0.4;
  transition: 0.5s;
}

.testimonial-carousel .owl-dots .owl-dot.active img {
  opacity: 1;
}

/*** Contact ***/
@media (min-width: 992px) {
  .container.contact {
    max-width: 100% !important;
  }

  .contact-text {
    padding-left: calc(((100% - 960px) / 2) + 0.75rem);
  }
}

@media (min-width: 1200px) {
  .contact-text {
    padding-left: calc(((100% - 1140px) / 2) + 0.75rem);
  }
}

@media (min-width: 1400px) {
  .contact-text {
    padding-left: calc(((100% - 1320px) / 2) + 0.75rem);
  }
}

@media (max-width: 768px) {
  .footer {
    background: url("../img/Rodapé2.png") left left;
    background-size: cover;
  }

  .text-light {
    justify-content: center;
    display: flex;
  }

  .linksuteis {
    justify-content: center;
    display: flex;
    text-align: center !important;
  }

  .imgfooter {
    display: none;
  }

  .img-footer {
    text-align: center;
  }
}

@media (max-width: 1000px) {
  .imgfooter {
    display: none;
  }
}

@media (min-width: 1001px) {
  .imgfooter2 {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 878px) {
  .linksuteis {
    justify-content: center;
    display: flex;
    text-align: center !important;
    font-size: 8px;
  }
}

@media (min-width: 768px) and (max-width: 878px) {
  .cardfinan {
    justify-content: center !important;
    display: flex !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .imgfooter2 {
    width: 50% !important;
  }
}

@media (min-width: 879px) and (max-width: 991px) {
  .linksuteis {
    justify-content: center;
    display: flex;
    text-align: center !important;
    font-size: 10px;
    white-space: nowrap;
  }

  .cardfooter {
    text-align: center !important;
  }
}

.footer .btn.btn-link {
  display: block;
  margin-bottom: 5px;
  padding: 0;

  color: #fff !important;
  font-weight: bolder;
}

/* .footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
} */

.footer .btn.btn-link:hover {
  letter-spacing: 0.3px;
  box-shadow: none;
}

.text-light {
  color: #f5f5f5 !important;
  font-family: BebasNeue;
}

.linksuteis {
  color: #fff !important;
  font-family: "Montserrat";
}

.form-control {
  font-family: "BebasNeue";
}

.mailtext {
  white-space: nowrap;
}

#pills-home-tab {
  background: #ffffff00;
  /* margin-right: 15px; */
  width: 200px;
  height: 64px;
  border: 2px solid #b5fccb;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 8px;
}

#pills-home-tab.nav-link.active {
  background: #a3ffbe;
}

#pills-profile-tab {
  background: #ffffff00;
  /* margin-right: 15px; */
  width: 200px;
  height: 64px;
  border: 2px solid #95e6fe;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 8px;
}

#pills-profile-tab.nav-link.active {
  background: #91e9ff;
}

#pills-contact-tab {
  background: #ffffff00;
  /* margin-right: 15px; */
  width: 200px;
  height: 64px;
  border: 2px solid #a3a5a8;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 8px;
}

#pills-contact-tab.nav-link.active {
  background: #b6b6b6;
}

#pills-home-tab2 {
  background: #ffffff00;
  /* margin-right: 15px; */
  width: 200px;
  height: 64px;
  border: 2px solid #7baafc;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 8px;
}

#pills-home-tab2.nav-link.active {
  background: #7baafc;
}

#pills-profile-tab3 {
  background: #ffffff00;

  width: 200px;
  height: 64px;
  border: 2px solid #682181;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 8px;
}

#pills-profile-tab3.nav-link.active {
  background: #6d24885b;
}

/* .tabs-names.active {
    color: rgb(255, 255, 255) !important; 
  }
   */
img {
  max-width: 100%;
  /* display: block; */
  object-fit: cover;
}
.group {
  position: relative;
  width: 100%;
  max-width: 535px;
  height: 375px;
}

.group img {
  position: absolute;
}

.group img.tela {
  top: 33px;
  left: 61px;
  z-index: 2;
}

.group img.mockup {
  z-index: 3;
}

@media (max-width: 767px) {
  .group img.tela {
    top: 10%; /* Ajuste de posição para dispositivos móveis */
    left: 0; /* Ajuste de posição para dispositivos móveis */
    width: 100%; /* Ajuste de largura para preencher a largura do contêiner pai */
    max-height: 50%; /* Reduzindo ainda mais a altura máxima para dispositivos móveis */
  }
}

.tabs-service {
  width: 50%;
  height: 680px;

  border: 3px solid #80c695;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .tabs-service {
    width: 100%;
    height: 1050px;
  }

  .tabs-service6 {
    margin: 0 !important;
    width: 100% !important;
  }
}

@media (min-width: 769px) and (max-width: 833px) {
  .tabs-service {
    width: 100%;
  }

  .tabs-service2 {
    width: 100% !important;
  }

  .tabs-service3 {
    width: 100% !important;
  }

  .tabs-service4 {
    width: 100% !important;
  }

  .tabs-service5 {
    width: 100% !important;
  }

  .tabs-service6 {
    width: 100% !important;
  }

  .tabs-img {
    width: 30% !important;
    left: 55%;
    padding-top: 35%;
  }
}

@media (min-width: 769px) and (max-width: 991px) {
  .tabs-service6 {
    width: 100% !important;
  }
}

@media (min-width: 834px) and (max-width: 1000px) {
  .tabs-service {
    width: 100%;
  }

  .tabs-service {
    width: 100% !important;
  }

  .tabs-service3 {
    width: 100% !important;
  }

  .tabs-service4 {
    width: 100% !important;
  }

  .tabs-img {
    width: 25% !important;

    left: 55%;
    padding-top: 25%;
  }
}

.tabs-img {
  margin-left: 30px;
  margin-top: 30px;
  width: 500px;
  position: absolute;

  /* height: 505.29px; */
}

.tabsite {
  margin-left: 9px !important;
}

@media (min-width: 993px) and (max-width: 1199px) {
  .tabs-img {
    width: 33%;
  }
}

@media (min-width: 1600px) {
  .tabs-img {
    width: 28% !important;
  }
}

@media (max-width: 768px) {
  .tabs-img {
    transform: translate(50%, 5%);
    width: 35% !important;
  }

  .title-tab {
    padding-top: 53%;
  }
}

.title-tab {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 48px;
  margin-left: 20px;
  margin-top: 20px;

  /* or 120% */

  /* Azul marinho */

  color: #212d47;
}

.text-tab {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  margin-left: 20px;
  margin-top: 20px;
  color: #212d47;
}

.sub-title-tab {
  font-family: "Montserrat";
  font-weight: 700;
  font-size: 16px;
  margin-left: 25px;
  line-height: 20px;

  /* Azul marinho */

  color: #212d47;
}

.sub-title-tab2 {
  font-family: "Montserrat";
  font-weight: normal;
  font-weight: 400;
  font-size: 16px;
  margin-left: 35px;
  line-height: 20px;

  /* Azul marinho */

  color: #212d47;
}

.button-service {
  position: absolute;
  width: 191px;
  margin-left: 35px;
  line-height: 20px;
  height: 40px;
  color: #fff;
  background: #80c695;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.tabs-service2 {
  height: 700px;

  border: 3px solid #4b8cc2;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .tabs-service2 {
    width: 100%;
    height: 1150px !important;
  }
}

@media (max-width: 475px) {
  .tabs-service2 {
    width: 100%;
    height: 740px;
  }
}

.button-service2 {
  position: absolute;
  width: 191px;
  margin-left: 35px;
  line-height: 20px;
  height: 40px;
  color: #fff;
  background: #4b8cc2;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.tabs-names {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  text-align: center;

  /* Azul marinho */

  color: #212d47;
}

/* .selecionado::active{
    color: #ff0000 !important;
} */

.tabs-service3 {
  width: 50%;
  height: 574px;

  border: 3px solid #5c5d5f;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .tabs-service3 {
    width: 100%;
    height: 840px;
  }
}

@media (max-width: 970px) {
  .tabs-service3 {
    width: 100%;
    height: 760px;
  }
}

.button-service3 {
  position: absolute;
  width: 191px;
  margin-left: 35px;
  line-height: 20px;
  height: 40px;
  color: #fff;
  background: #5c5d5f;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.tabs-service4 {
  width: 50%;
  height: 574px;

  border: 3px solid #395ffb;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .tabs-service4 {
    width: 100%;
    height: 840px;
  }
}

.button-service4 {
  position: absolute;
  width: 191px;
  margin-left: 35px;
  line-height: 20px;
  height: 40px;
  color: #fff;
  background: #395ffb;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.tabs-service5 {
  height: 574px;

  border: 3px solid #682181;
  border-radius: 8px;
}

.tabs-service6 {
  margin-top: 5%;
  margin-bottom: 5%;
  height: 426px;
  width: 577px;
  border: 3px solid #4b8cc2;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs-service7 {
  margin-top: 5%;
  margin-bottom: 5%;
  height: 536px;
  width: 577px;
  border: 3px solid #4b8cc2;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.v-erp-tab {
  border: 3px solid #5c5d5f;
}

.v-web-tab {
  border: 3px solid #682181;
}

.v-quality-tab {
  border: 3px solid #349999;
}

.v-atm-tab {
  border: 3px solid #395ffb;
}

@media (max-width: 768px) {
  .tabs-service5 {
    width: 100%;
    height: 800px;
  }
}

.button-service5 {
  position: absolute;
  width: 191px;
  margin-left: 35px;
  line-height: 20px;
  height: 40px;
  color: #fff;
  background: #682181;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.bg-contact {
  background: url("../img/Contatos6.png") no-repeat !important;
  background-size: cover !important;
}

.bg-contact1 {
  background: url("../verp/bgvector.png") no-repeat !important;
  background-size: cover !important;
}

.bg-contact2 {
  background: url("../verp/bgvector.png") no-repeat !important;
  background-size: cover !important;
}

.bg-contact3 {
  background: url("../vatm/contatosbg.png") no-repeat !important;
  background-size: cover !important;
}

.bg-contact4 {
  background: url("../vquality/bgforms.png") no-repeat !important;
  background-size: cover !important;
}

.bg-contact5 {
  background: url("../website/contatosbg.png") no-repeat !important;
  background-size: cover !important;
}

.title-diff {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;

  /* or 117% */

  text-align: center;

  /* Azul marinho */

  color: #444444;
}

.title-diff-atm {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;

  /* or 117% */

  text-align: center;

  /* Azul marinho */

  color: #395ffb;
}

.card-body {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 19px;
  color: #ffffff;
}

.card-diff {
  background: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  transition: all 0.3s ease;
}
.card-diff:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 127, 22, 0.15);
}

.img-diff {
  margin-top: 20px;
  margin-left: 20px;
  width: 56px;
  height: 56px;
}

.img-diff2 {
  margin-top: 20px;
  margin-left: 20px;
  width: 43px;
  height: 50px;
}

.card-title-diff {
  font-family: "BebasNeue";
  font-style: normal;
  margin-top: 15px;
  margin-left: 15px;

  font-weight: 400;
  font-size: 30px;
  line-height: 29px;

  /* Azul marinho */

  color: #212d47;
}

.text-diff {
  margin-top: 15px;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #212d47;
}

.button-diff {
  width: 256px;
  height: 40px;
  border: none;

  /* Degrade */
  color: #fff;
  background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.bg-testimonials {
  background: url("../img/bg-testimonials.png");
}

.bg-testimonials1 {
  background: #ebeff5;
}

.bg-testimonials2 {
  background: #ffffff;
}

.title-testimonial1 {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  /* or 117% */

  text-align: center;

  color: #2867b5;
}

.text-testimonial1 {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  margin-top: 20% !important;
  /* or 140% */

  /* Azul marinho */

  color: #212d47;
}

.title-testimonial {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  /* or 117% */

  text-align: center;

  /* Branco */

  color: #ffffff;

  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.img-testmonial {
  width: 100% !important;
}

.text-testimonial {
  /* position: absolute; */
  margin-top: 40px;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  /* or 140% */

  /* Off */

  color: #ebeff5;
}

.name-text-testimonial {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  font-weight: bolder;
  /* or 140% */

  /* Off */

  color: #212d47;
}

.bgsolucoes {
  background: url("../img/CTA.png") no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.contact {
  background: url(../img/Contatos1.png) center center no-repeat;
  background-size: cover;
}

.contact .php-email-form {
  margin-top: 80px;
  width: 100%;
  padding: 30px;
  background: linear-gradient(136.12deg, #212d47 22.9%, #51fffa 100%);
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
  border-radius: 24px 24px 0px 0px;
}

.forms-vclinic {
  background: #2867b5 !important;
}

.forms-verp {
  background: #444444 !important;
}

.forms-web {
  background: #682181 !important;
}

.forms-vquality {
  background: #349999 !important;
}

.forms-vatm {
  background: #395ffb !important;
}

#footer .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 50px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form .form-group {
  margin-bottom: 20px;
}

.card-faq {
  display: block;
  position: relative;
  border-bottom: 1px solid rgb(255, 255, 255);
}

.accordion {
  width: 100% !important;
}
.accordion-button {
  width: 100%;
}

.icon-show,
.icon-close {
  font-size: 24px;
  position: absolute;
  right: 0;
  top: 0;
}

.icon-show[aria-expanded="false"] {
  display: none !important;
}

.icon-close[aria-expanded="true"] {
  display: none !important;
}

@media (max-width: 768px) {
  .text-testimonial {
    /* position: absolute; */
    text-align: justify;
    margin-top: 0;
  }

  .text-testimonial1 {
    /* position: absolute; */
    text-align: justify;
    margin-top: 0 !important;
  }
}

.bg-faq {
  padding-top: 10% !important;
}

.bg-faq1 {
  padding-top: 10% !important;
  background: url(../img/grupo8.png) center center no-repeat;
  background-size: cover;
}

.bg-faq2 {
  padding-top: 10% !important;
  background: url(../verp/depoimentoss.png) center left no-repeat;
  background-size: cover;
}

.bg-faq4 {
  padding-top: 10% !important;
  background: url(../vatm/bgfaqaqualizado.png) center left no-repeat;
  background-size: cover;
}

.bg-faq6 {
  padding-top: 10% !important;
  background: url(../website/bgfaq3.png) center left no-repeat;
  background-size: cover;
}

.bg-faq5 {
  padding-top: 10% !important;
  background: url(../vquality/bgfaq.png) top left no-repeat;
  background-size: cover;
}

@media (max-width: 768px) {
  .bg-faq6 {
    background: url(../website/bgfaq3.png) top right no-repeat;
    background-size: cover;
  }

  .bg-faq4 {
    padding-top: 10% !important;
    background: url(../vatm/bgfaqaqualizado.png) top right no-repeat;
    background-size: cover;
  }

  .bg-faq2 {
    padding-top: 10% !important;
    background: url(../verp/depoimentoss.png) top right no-repeat;
    background-size: cover;
  }
}

/* @media(min-width: 1201px) {
    .bg-faq5 {
        padding-top: 10% !important;
        background: url(../vquality/duvidas1.png) top left no-repeat;
        background-size: cover;
    }
}

@media(max-width: 1200px) {
    .bg-faq5 {
        padding-top: 10% !important;
        background: url(../vquality/duvidass.png) top left no-repeat;
        background-size: cover;
    }
} */

@media (max-width: 768px) {
  .bg-faq5 {
    padding-top: 10% !important;
    background: url(../vquality/duvidas1.png) top right no-repeat;
    background-size: cover;
  }
}

@media (min-width: 1600px) {
  .bg-faq {
    padding-top: 20% !important;
  }
}

.title-faq {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  /* or 117% */

  text-align: center;

  /* Azul */

  color: #51fffa;
}

.title-faq1 {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  /* or 117% */

  text-align: center;

  /* Azul */

  color: #ffffff;
}

.img-faq {
  /* display: none; */
  width: 100%;
}

.h-section-faq {
  min-height: 400px;
}

.faq-text {
  color: #ffffff;
}

.faq-text:hover {
  color: #ffffff;
}

@media (max-width: 992px) {
  .h-section-faq {
    min-height: 200px;
  }
}

@media (max-width: 459px) {
  .h-section-faq {
    min-height: 150px;
  }
}

@media (max-width: 349px) {
  .h-section-faq {
    min-height: 110px;
  }
}

.button-faq {
  position: absolute;
  width: 256px;
  height: 40px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Degrade */
  bottom: -35%;
  left: 43%;
  z-index: 1;
  background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

@media (min-width: 1981px) and (max-width: 2300px) {
  .button-faq {
    position: absolute;
    width: 290px;
    height: 40px;
    color: #fff;
    font-size: 15px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 80%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (min-width: 1801px) and (max-width: 1980px) {
  .button-faq {
    position: absolute;
    width: 290px;
    height: 40px;
    color: #fff;
    font-size: 15px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 80%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (min-width: 1781px) and (max-width: 1800px) {
  .button-faq {
    position: absolute;
    width: 290px;
    height: 40px;
    color: #fff;
    font-size: 15px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 80%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (min-width: 1701px) and (max-width: 1780px) {
  .button-faq {
    position: absolute;
    width: 290px;
    height: 40px;
    color: #fff;
    font-size: 15px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 78%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (min-width: 1601px) and (max-width: 1700px) {
  .button-faq {
    position: absolute;
    width: 290px;
    height: 40px;
    color: #fff;
    font-size: 15px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 80%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (max-width: 1600px) {
  .button-faq {
    position: absolute;
    width: 250px;
    height: 37px;
    color: #fff;
    font-size: 15px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 80%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (min-width: 1280px) and (max-width: 1380px) {
  .button-faq {
    position: absolute;
    width: 200px;
    height: 34px;
    color: #fff;
    font-size: 13px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 70%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (min-width: 1200px) and (max-width: 1279px) {
  .button-faq {
    position: absolute;
    width: 198px;
    height: 34px;
    color: #fff;
    font-size: 13px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 68%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (min-width: 1180px) and (max-width: 1199px) {
  .button-faq {
    position: absolute;
    width: 198px;
    height: 34px;
    color: #fff;
    font-size: 13px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 58%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (min-width: 1135px) and (max-width: 1179px) {
  .button-faq {
    position: absolute;

    width: 188px;
    height: 33px;
    color: #fff;
    font-size: 13px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 60%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (min-width: 1078px) and (max-width: 1134px) {
  .button-faq {
    position: absolute;
    width: 188px;
    height: 33px;
    color: #fff;
    font-size: 13px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 60%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (min-width: 1050px) and (max-width: 1077px) {
  .button-faq {
    position: absolute;
    width: 188px;
    height: 33px;
    color: #fff;
    font-size: 12px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 59%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (min-width: 993px) and (max-width: 1049px) {
  .button-faq {
    position: absolute;
    width: 173px;
    height: 30px;
    color: #fff;
    font-size: 10px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 59%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .button-faq {
    position: absolute;
    width: 173px;
    height: 30px;
    color: #fff;
    font-size: 10px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 95%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (max-width: 992px) {
  .button-faq {
    position: absolute;
    width: 128px;
    height: 20px;
    color: #fff;
    font-size: 8px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 125%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (max-width: 767px) {
  .button-faq {
    position: absolute;
    width: 128px;
    height: 20px;
    color: #fff;
    font-size: 8px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 70%;
    left: 45%;
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (max-width: 522px) {
  .button-faq {
    position: absolute;
    width: 100px;
    height: 20px;
    color: #fff;
    font-size: 8px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 68%;
    left: 45%;
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (max-width: 484px) {
  .button-faq {
    position: absolute;
    width: 100px;
    height: 20px;
    color: #fff;
    font-size: 8px !important;
    text-align: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Degrade */
    top: 62%;
    left: 45%;
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (max-width: 460px) {
  .button-faq {
    position: absolute;
    width: 90px;
    height: 18px;
    color: #fff;
    font-size: 6px !important;
    text-align: center;
    border: none;
    /* Degrade */
    top: 60%;
    left: 45%;
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (max-width: 428px) {
  .button-faq {
    position: absolute;
    width: 110px;
    height: 18px;
    color: #fff;
    font-size: 6px !important;
    text-align: center !important;
    border: none;
    /* Degrade */
    top: 75%;
    left: 45%;
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (max-width: 392px) {
  .button-faq {
    position: absolute;
    width: 120px;
    height: 18px;
    color: #fff;
    font-size: 6px !important;
    text-align: center !important;
    border: none;
    /* Degrade */
    top: 69%;
    left: 43%;
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (max-width: 376px) {
  .button-faq {
    position: absolute;
    width: 110px;
    height: 18px;
    color: #fff;
    font-size: 6px !important;
    text-align: center !important;
    border: none;
    /* Degrade */
    top: 68%;
    left: 43%;
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (max-width: 357px) {
  .button-faq {
    position: absolute;
    width: 105px;
    height: 15px;
    color: #fff;
    font-size: 6px !important;
    text-align: center !important;
    border: none;
    /* Degrade */
    top: 64%;
    left: 43%;
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

@media (max-width: 349px) {
  .button-faq {
    position: absolute;
    width: 100px;
    height: 15px;
    color: #fff;
    font-size: 6px !important;
    text-align: center !important;
    border: none;
    /* Degrade */
    top: 85%;
    left: 43%;
    z-index: 1;
    background: linear-gradient(89.98deg, #212d47 0.02%, #51fffa 123.81%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }
}

/* ----v-clinic---- */

.button-carrousel1 {
  /* position: absolute; */
  width: 256px;
  height: 48px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Azul */
  color: #ffffff;
  background: #2867b5;
  border-radius: 8px;
  align-items: center !important;
}

.button-carrousel1:hover {
  /* Azul */
  color: #95bfff;
  background: #212d47;
}

.button-carrousel10 {
  /* position: absolute; */
  width: 256px;
  height: 48px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  /* Azul */
  color: #2867b5;
  background: #ffffff;
  border-radius: 8px;
  align-items: center !important;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease; /* Adicione transições para a cor do texto e sombreamento */
}

.button-carrousel10:hover {
  /* Azul */
  color: #ffffff;
  background: linear-gradient(to right, #2867b5, #95e6fe) !important;
}

.button-carrousel3 {
  /* position: absolute; */
  width: 256px;
  height: 48px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Azul */
  color: #349999;
  background: #ffffff;
  border-radius: 8px;
  align-items: center !important;
  box-shadow:
    rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  transition:
    background-color 0.7s ease,
    color 0.4s ease,
    box-shadow 0.7s ease;
}

.button-carrousel3:hover {
  color: #ffffff;
  background: linear-gradient(89.98deg, #42bdbd 0.02%, #e2e2e2 123.81%);
}

.button-carrousel31 {
  /* position: absolute; */
  width: 256px;
  height: 48px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Azul */
  color: #444444;
  background: #ffffff;
  border-radius: 8px;
  align-items: center !important;
  box-shadow:
    rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  transition:
    background-color 0.7s ease,
    color 0.4s ease,
    box-shadow 0.7s ease;
}

.button-carrousel31:hover {
  color: #ffffff;
  background: linear-gradient(89.98deg, #444444 0.02%, #e2e2e2 123.81%);
}

.button-carrousel4 {
  /* position: absolute; */
  width: 256px;
  height: 48px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Azul */
  color: #ffffff;
  background: #0015b5;
  border-radius: 8px;
  align-items: center !important;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.button-carrousel4:hover {
  /* Azul */
  color: #ffffff;
  background: linear-gradient(89.98deg, #0015b5 0.02%, #253eff 123.81%);
}

.button-carrousel5 {
  /* position: absolute; */
  width: 256px;
  height: 48px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Azul */
  color: #395ffb;
  background: #ffffff;
  border-radius: 8px;
  align-items: center !important;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition:
    background-color 0.7s ease,
    color 0.4s ease,
    box-shadow 0.7s ease;
}

.button-carrousel5:hover {
  /* Azul */
  color: #ffffff;
  background: linear-gradient(89.98deg, #0015b5 0.02%, #253eff 123.81%);
}

.button-carrousel6 {
  /* position: absolute; */
  width: 256px;
  height: 48px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Azul */
  color: #ffffff;
  background: #349999;
  border-radius: 8px;
  align-items: center !important;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.button-carrousel6:hover {
  /* Azul */
  color: #ffffff;
  background: linear-gradient(89.98deg, #349999 0.02%, #23bdbd 123.81%);
}

.buttonhome {
  padding-top: 25%;
}

.buttonhome1 {
  padding-top: 5%;
  justify-content: center;
  display: flex;
}

.cardfooter {
  text-align: center;
}

@media (max-width: 991px) {
  .dev {
    flex-direction: column-reverse;
  }

  .footer2 {
    background: #444444 !important;
    background-size: cover;
  }

  .footer3 {
    background: #395ffb !important;
    background-size: cover;
  }
}

@media (max-width: 1400px) {
  .buttonhome {
    padding-top: 5%;
  }

  .card1 {
    height: 100% !important;
  }
}

@media (max-width: 767px) {
  .imagens-services {
    display: block !important;
  }

  /* .desktopmockup {
    display: none !important;
  } */

  .img-about1 {
    width: 100% !important;
  }

  .bg-about-vclinic {
    padding-top: 10%;
  }

  .card1 {
    margin-left: 5%;
    margin-right: 5%;
  }

  .card {
    width: 180px !important;
  }
}

@media (min-width: 768px) {
  .card {
    width: 200px !important;
  }

  .abo {
    width: 30%;
  }
}

@media (min-width: 769px) {
  .desktopmockup {
    width: 130% !important;
  }
}

.text-diff1 {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 28px;
  color: #2867b5;
}

.text-diff2 {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 28px;
  color: #212d47;
}

.text-diff3 {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 28px;
  color: #395ffb;
}

.text-diff4 {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 28px;
  color: #349999;
}

.text-diff5 {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 28px;
  color: #349999;
}

.bg-about-vclinic {
  background: #ebeff5;
}

.title-about-vclinic {
  color: #2867b5;

  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
}

.title-about-verp {
  color: #444444;

  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
}

.title-website {
  color: #682181;
  text-align: left;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
}

.title-website1 {
  color: #682181;
  text-align: center;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
}

.titleserv {
  font-weight: 500;
  color: #682181;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  font-family: "BebasNeue";
  margin-top: 5%;
}

.titleserv1 {
  font-weight: 500;
  color: #682181;
  text-align: start;
  font-size: 24px;
  text-transform: uppercase;
  font-family: "BebasNeue";
  margin-top: 5%;
}

.text-website {
  color: #212d47;
  font-weight: 600;
}

.title-about-vatm {
  color: #395ffb;

  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
}

.text-about-vclinic {
  color: #000000;
  font-size: 20px;
}

.texto-about {
  padding-top: 3%;
  padding-left: 10%;
  padding-right: 10%;
}

.container1 {
  flex-wrap: wrap;
  justify-content: space-between;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.card {
  width: 100% !important;
  height: 64px;
  background-color: rgb(255, 255, 255);
  margin-bottom: 10px;
  filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.2));

  justify-content: center;
  display: flex;
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 29px;
  text-align: center;

  color: #5c5d5f;
}

.card1 {
  padding-left: 25px;
  padding-right: 25px;
  height: 360px;
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  margin-bottom: 10px;
  filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.2));
  /* H4 */
  justify-content: center;
  display: flex;
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
}

.img-services {
  display: inline-block;
  width: 58px;
  height: 58px;
  margin-right: 2%;
  margin-left: 2%;
}

.imagens-services {
  justify-content: space-between;
  display: flex;
  margin-top: 5%;

  flex-wrap: wrap;
}

.textoss {
  /* Parágrafo 2 */
  margin-top: 5px;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  text-align: center;

  /* Azul marinho */

  color: #212d47;
}

.image-container {
  position: relative;
  display: inline-block;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    360deg,
    #2867b53d 0%,
    rgba(40, 103, 181, 0) 119.08%
  );
  filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 8px;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.title1 {
  font-family: "BebasNeue";
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 28px;
  /* or 120% */
  color: #ffffff;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.text-suport {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;

  color: #ffffff;
}

.linha-personalizada {
  color: rgb(255, 255, 255);
  border: none;
  border-top: 2px dashed;
  margin: 20px 0;
}

.img-support {
  margin-top: 6%;
}

.text-suport1 {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;

  /* Branco */

  color: #ffffff;
}

.image-card {
  width: 300px;
}

.image-container {
  position: relative;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    360deg,
    #2867b52f 0%,
    rgba(40, 103, 181, 0) 119.08%
  );
  filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 8px;
  opacity: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s;
}

.overlay .title,
.overlay .description {
  margin: 0;
  padding: 25px;
  text-align: center;
  font-weight: 600;
}

.services_verp {
  border: 2px solid #ccc;
  width: 40%;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-bottom: auto;
  border-radius: 24px;
  position: absolute;
  z-index: 1;
}

.services_verp3 {
  border: 2px solid #ccc;
  width: 40%;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-bottom: auto;
  border-radius: 24px;
  position: absolute;
  z-index: 1;
}

.services_verp1 {
  border: 2px solid #ccc;
  width: 80%;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-bottom: auto;
  border-radius: 24px;
  position: absolute;
  z-index: 0;
}

.services_verp2 {
  border: 2px solid #ccc;
  width: 80%;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-bottom: auto;
  border-radius: 24px;

  position: absolute;
  z-index: 0;
}

@media (min-width: 992px) {
  .bgo {
    justify-content: space-between !important;
    display: flex;
  }
}

/* @media (min-width: 1200px){
    .services_verp {
        margin-top: 2%;
    }
}

@media (min-width: 650px){
    .services_verp {
        margin-top: 26%;
    }
}

@media (max-width: 768px){
    .services_verp {
        margin-top: 30%;
    }

} */

@media (min-width: 992px) and (max-width: 1175px) {
  .btnfont {
    font-size: 12px !important;
  }
}

@media (min-width: 280px) and (max-width: 400px) {
  .button-carrousel2 {
    width: 100% !important;
    height: 100% !important;
  }
}

@media (min-width: 280px) and (max-width: 300px) {
  .services_verp {
    margin-top: 155%;
    width: 50%;
  }

  .services_verp1 {
    margin-top: 165%;
    padding-top: 10%;
  }

  .services_verp3 {
    margin-top: 375%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 380%;
    padding-top: 15%;
  }

  .bg-grayverp1 {
    height: 220vh !important;
    background-color: #444444 !important;
  }

  .listitem {
    font-size: 18px !important;
  }
}

.services_verp1 {
  flex-wrap: wrap;
}

.title-about.listitem {
  width: 100%;
}

@media (min-width: 301px) and (max-width: 330px) {
  .services_verp {
    margin-top: 145%;
  }

  .services_verp1 {
    margin-top: 150%;
    padding-top: 10%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 18px !important;
  }

  .services_verp3 {
    margin-top: 343%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 350%;
    padding-top: 15%;
  }

  .bg-grayverp1 {
    height: 220vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 331px) and (max-width: 364px) {
  .services_verp {
    margin-top: 120%;
  }

  .services_verp1 {
    margin-top: 125%;
    padding-top: 10%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 18px !important;
  }

  .services_verp3 {
    margin-top: 273%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 280%;
    padding-top: 15%;
  }

  .bg-grayverp1 {
    height: 205vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 365px) and (max-width: 379px) {
  .services_verp {
    margin-top: 100%;
  }

  .services_verp1 {
    margin-top: 105%;
    padding-top: 10%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 18px !important;
  }

  .services_verp3 {
    margin-top: 243%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 250%;
    padding-top: 15%;
  }

  .bg-grayverp1 {
    height: 200vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 380px) and (max-width: 399px) {
  .services_verp {
    margin-top: 80%;
  }

  .services_verp1 {
    margin-top: 85%;
    padding-top: 10%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 18px !important;
  }

  .services_verp3 {
    margin-top: 223%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 230%;
    padding-top: 15%;
  }

  .bg-grayverp1 {
    height: 200vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 400px) and (max-width: 459px) {
  .services_verp {
    margin-top: 75%;
  }

  .services_verp1 {
    margin-top: 80%;
    padding-top: 10%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 18px !important;
  }

  .services_verp3 {
    margin-top: 200%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 205%;
    padding-top: 15%;
  }

  .bg-grayverp1 {
    height: 195vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 460px) and (max-width: 500px) {
  .services_verp {
    margin-top: 70%;
  }

  .services_verp1 {
    margin-top: 75%;
    padding-top: 10%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 18px !important;
  }

  .services_verp3 {
    margin-top: 175%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 180%;
    padding-top: 15%;
  }

  .bg-grayverp1 {
    height: 195vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 501px) and (max-width: 570px) {
  .services_verp {
    margin-top: 50%;
  }

  .services_verp1 {
    margin-top: 55%;
    padding-top: 5%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 18px !important;
  }

  .services_verp3 {
    margin-top: 140%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 145%;
    padding-top: 8%;
  }

  .bg-grayverp1 {
    height: 170vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 571px) and (max-width: 627px) {
  .services_verp {
    margin-top: 38%;
  }

  .services_verp1 {
    margin-top: 43%;
    padding-top: 5%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 18px !important;
  }

  .services_verp3 {
    margin-top: 125%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 130%;
    padding-top: 15%;
  }

  .bg-grayverp1 {
    height: 175vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 628px) and (max-width: 768px) {
  .services_verp {
    margin-top: 35%;
  }

  .services_verp1 {
    margin-top: 38%;
    padding-top: 5%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 18px !important;
  }

  .services_verp3 {
    margin-top: 115%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 118%;
    padding-top: 5%;
  }

  .bg-grayverp1 {
    height: 175vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 769px) and (max-width: 810px) {
  .services_verp {
    margin-top: 30%;
  }

  .services_verp1 {
    margin-top: 33%;
    padding-top: 3%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 20px !important;
  }

  .services_verp3 {
    margin-top: 105%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 108%;
    padding-top: 5%;
  }

  .bg-grayverp1 {
    height: 175vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 811px) and (max-width: 870px) {
  .services_verp {
    margin-top: 30%;
  }

  .services_verp1 {
    margin-top: 33%;
    padding-top: 3%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 20px !important;
  }

  .services_verp3 {
    margin-top: 95%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 98%;
    padding-top: 5%;
  }

  .bg-grayverp1 {
    height: 175vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 871px) and (max-width: 991px) {
  .services_verp {
    margin-top: 25%;
  }

  .services_verp1 {
    margin-top: 30%;
    padding-top: 3%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 20px !important;
    white-space: nowrap;
    margin-right: 3%;
  }

  .services_verp3 {
    margin-top: 85%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 88%;
    padding-top: 5%;
    width: 85%;
  }

  .bg-grayverp1 {
    height: 175vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 992px) and (max-width: 1000px) {
  .services_verp {
    margin-top: 20%;
  }

  .services_verp1 {
    margin-top: 23%;
    padding-top: 3%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 20px !important;
    white-space: nowrap;
    margin-right: 3%;
  }

  .services_verp3 {
    margin-top: 55%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 58%;
    padding-top: 5%;
    width: 85%;
  }

  .bg-grayverp1 {
    height: 115vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 1001px) and (max-width: 1200px) {
  .services_verp {
    margin-top: 20%;
  }

  .services_verp1 {
    margin-top: 23%;
    padding-top: 3%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 20px !important;
    white-space: nowrap;
    margin-right: 4%;
  }

  .services_verp3 {
    margin-top: 55%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 58%;
    padding-top: 5%;
    width: 85%;
  }

  .bg-grayverp1 {
    height: 115vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 1201px) and (max-width: 1300px) {
  .services_verp {
    margin-top: 18%;
  }

  .services_verp1 {
    margin-top: 20%;
    padding-top: 3%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 20px !important;
    white-space: nowrap;
    margin-right: 4%;
  }

  .services_verp3 {
    margin-top: 48%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 52%;
    padding-top: 5%;
    width: 85%;
  }

  .bg-grayverp1 {
    height: 115vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 1301px) and (max-width: 1400px) {
  .services_verp {
    margin-top: 15%;
  }

  .services_verp1 {
    margin-top: 18%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 20px !important;
    white-space: nowrap;
    margin-right: 4%;
  }

  .services_verp3 {
    margin-top: 40%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 43%;
    padding-top: 5%;
    width: 85%;
  }

  .bg-grayverp1 {
    height: 155vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 1401px) and (max-width: 1500px) {
  .services_verp {
    margin-top: 15%;
  }

  .services_verp1 {
    margin-top: 18%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 20px !important;
    white-space: nowrap;
    margin-right: 4%;
  }

  .services_verp3 {
    margin-top: 40%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 43%;
    padding-top: 5%;
    width: 85%;
  }

  .bg-grayverp1 {
    height: 205vh !important;
    background-color: #444444 !important;
  }
}

@media (min-width: 1501px) and (max-width: 2000px) {
  .services_verp {
    margin-top: 10%;
  }

  .services_verp1 {
    margin-top: 12%;
    flex-wrap: wrap !important;
  }

  .listitem {
    font-size: 20px !important;
    white-space: nowrap;
    margin-right: 4%;
  }

  .services_verp3 {
    margin-top: 33%;
    width: 50%;
  }

  .services_verp2 {
    margin-top: 35%;
    padding-top: 2%;
    width: 85%;
  }

  .bg-grayverp1 {
    height: 110vh !important;
    background-color: #444444 !important;
  }
}

.listitem {
  display: inline-block;
  font-size: 24px;
}

.title-verp {
  color: #ffffff;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-top: 3%;
}

.title-verp1 {
  color: #ffffff;
  align-items: center;
  justify-content: center;

  margin-top: 3%;
}

/* .bg-grayverp {
    height: 100vh;
} */

.bg-grayverp1 {
  height: 100vh;
}

.description {
  margin-top: 15% !important;
  left: 50%;
}

.image-container:hover .overlay {
  opacity: 1;
}

.title-recurse {
  font-size: 15px;
}

.image-container:hover .image-overlay {
  opacity: 1;
}

.image-overlay p {
  margin: 0;
  padding: 10px;
}

/* ------v-clinic end ------ */

/* ------------v-erp----------- */

.button-carrousel2 {
  /* position: absolute; */
  width: 256px;
  height: 48px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Azul */
  color: #ffffff;
  background: linear-gradient(89.98deg, #444444 123.81%, #949494 50%);
  border-radius: 8px;
  align-items: center !important;
}

.button-carrousel2:hover {
  /* Azul */
  color: #ffffff;
  background: linear-gradient(89.98deg, #444444 0.02%, #a1a1a1 123.81%);
}

.button-carrousel7 {
  /* position: absolute; */
  width: 256px;
  height: 48px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Azul */
  color: #ffffff;
  background: linear-gradient(89.98deg, #ffffff 123.81%, #e4e4e4 50%);
  border-radius: 8px;
  align-items: center !important;
}

.button-carrousel7:hover {
  /* Azul */
  color: #ffffff;
  background: linear-gradient(89.98deg, #ffffff 0.02%, #f1f0f0 123.81%);
}

.button-carrousel8 {
  /* position: absolute; */
  width: 256px;
  height: 48px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Azul */
  color: #ffffff;
  background: linear-gradient(89.98deg, #682181 123.81%, #ae38da 50%);
  border-radius: 8px;
  align-items: center !important;
}

.button-carrousel8:hover {
  /* Azul */
  color: #ffffff;
  background: linear-gradient(89.98deg, #682181 0.02%, #b73be4 123.81%);
}

.button-carrousel9 {
  /* position: absolute; */
  width: 256px;
  height: 48px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Azul */
  color: #682181;
  background: linear-gradient(89.98deg, #ffffff 123.81%, #ffffff 50%);
  border-radius: 8px;
  align-items: center !important;
}

.button-carrousel9:hover {
  /* Azul */
  color: #682181;
  background: linear-gradient(89.98deg, #ffffff 0.05%, #682181 123.81%);
}

.img-serviço {
  transition: transform 0.3s ease;
}

.img-serviço:hover {
  transform: scale(1.2);
}

.button-nav2 {
  position: absolute;
  color: #fff;
  border: none;
  height: 40px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Degrade */
  text-align: center;

  background: linear-gradient(89.98deg, #444444 0.02%, #a1a1a1 123.81%);
  border-radius: 8px;
}

.button-nav3 {
  position: absolute;
  color: #fff;
  border: none;
  height: 40px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Degrade */
  text-align: center;

  background: linear-gradient(89.98deg, #349999 0.02%, #119292 123.81%);
  border-radius: 8px;
}

.button-nav3:hover {
  background: linear-gradient(to right, #349999, #12c5c5);
}

.button-nav4 {
  position: absolute;
  color: #fff;
  border: none;
  height: 40px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Degrade */
  text-align: center;

  background: linear-gradient(89.98deg, #0015b5 0.02%, #0015b5 123.81%);
  border-radius: 8px;
}

.button-nav4:hover {
  background: linear-gradient(to right, #0015b5, #132df3);
}

.button-nav5 {
  position: absolute;
  color: #fff;
  border: none;
  height: 40px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Degrade */
  text-align: center;

  background: linear-gradient(89.98deg, #682181 0.02%, #682181 123.81%);
  border-radius: 8px;
}

.button-nav5:hover {
  background: linear-gradient(to right, #682181, #682181);
}

.button-nav6 {
  position: absolute;
  color: #fff;
  border: none;
  height: 40px;
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  /* Degrade */
  text-align: center;

  background: linear-gradient(89.98deg, #4b8cc2 0.02%, #95e6fe 123.81%);
  border-radius: 8px;
  transition:
    background-color 0.7s ease,
    color 0.4s ease,
    box-shadow 0.7s ease;
}

.button-nav6 :hover {
  background: linear-gradient(to right, #4b8cc2, #95e6fe) !important;
}

/*** Roadmap ***/

.roadmap-carousel {
  position: relative;
}

.roadmap-carousel::before {
  position: absolute;
  content: "";
  height: 0;
  width: 100%;
  top: 20px;
  left: 0;
}

.roadmap-carousel .roadmap-item .roadmap-point {
  position: absolute;
  width: 65px;
  height: 65px;
  top: 22px;
  left: 43%;
  margin-left: -15px;
  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;
}

.roadmap-carousel .roadmap-item {
  position: relative;
  padding-top: 140px;
  padding-bottom: 20px;
  margin-bottom: 40px;
  margin-top: 40px;
  text-align: center;
  border: 2px solid #444444;
  border-radius: 20px;
  box-shadow: 0px 3px 8px 2px rgb(0 0 0 / 15%);
}

.roadmap-carousel .roadmap-item::before {
  position: absolute;
  content: "";
  width: 0;
  height: 115px;
  top: 0;
  left: 50%;
}

/* -----------cases---------- */

.roadmap-carousel .roadmap-item1 .roadmap-point {
  position: absolute;
  width: 65px;
  height: 65px;
  top: 22px;
  left: 43%;
  margin-left: -15px;
  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;
}

.roadmap-carousel .roadmap-item1 {
  position: relative;
  padding-top: 140px;
  padding-bottom: 20px;
  margin-bottom: 40px;
  margin-top: 40px;
  text-align: center;
}

.roadmap-carousel .roadmap-item1::before {
  position: absolute;
  content: "";
  width: 0;
  height: 115px;
  top: 0;
  left: 50%;
}

.roadmap-carousel .owl-nav {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.roadmap-carousel .owl-nav .owl-prev,
.roadmap-carousel .owl-nav .owl-next {
  margin: 0 12px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  font-size: 22px;
  color: var(--light);
  background: #444444;
  transition: 0.5s;
}

.roadmap-carousell .owl-nav .owl-prev,
.roadmap-carousell .owl-nav .owl-next {
  margin: 0 12px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  font-size: 22px;
  color: var(--light);
  background: #682181 !important;
  transition: 0.5s;
}

.roadmap-carousel .owl-nav .owl-prev:hover,
.roadmap-carousel .owl-nav .owl-next:hover {
  color: var(--primary);
  background: var(--dark);
}

.text-road {
  font-family: "BebasNeue";
  font-size: 18px;
  font-weight: 100 !important;
  color: #444444;
}

.web {
  background: url(../verp/verpbg.png) center center no-repeat;
  background-size: cover;
}

.web1 {
  background: url(../vquality/bgteste.png) center center no-repeat;
  background-size: cover;
}

.web2 {
  background: #ffffff;
  background-size: cover;
}

/* -------v-quality--------- */

.titlevquality {
  color: #212d47;
  font-weight: 500;
}

.textvquality {
  color: #212d47;
  font-weight: 500;
}

.title-about-vquality {
  color: #349999;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
}

.title-about-vquality1 {
  color: #349999;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
}

.text-box {
  font-size: 16px;
  text-align: center;
}

.title-box-d {
  padding-bottom: 1.8rem;
  margin-bottom: 1rem;
  position: relative;
}

.title-box-d .title-d {
  font-weight: 600;
  font-size: 2rem;
}

.title-box-d .title-d:after {
  content: "";
  position: absolute;
  width: 70px;
  height: 4px;
  background-color: #049c6a;
  bottom: 20px;
  left: 0;
}

.box-collapse .title-box-d {
  top: 30px;
  left: 60px;
  opacity: 0;
  transition: all 1s ease;
  transition-delay: 0.3s;
}

.boxImage {
  width: 250px !important;
  height: 180px;
  padding-top: 140px;
  padding-bottom: 20px;
  margin-bottom: 40px;
  margin-top: 40px;
  text-align: center;
  border: 2px solid #349999;
  border-radius: 20px;
  box-shadow: 0px 2px 8px 2px rgb(0 0 0 / 15%);
}

.boxImage {
  padding: 20px;
  background: #f7f5f533;
}

.boxImage:hover {
  transform: scale(1.1);
  transition: 0.6s;
}

.imgbox {
  width: 80px;
  height: 70px;
}

.text-road1 {
  font-family: "BebasNeue";
  font-size: 18px;
  font-weight: 100 !important;
  color: #349999;
}

.boxT {
  height: 220px !important;
  flex-wrap: wrap;
}

/* ----------website--------- */

.lista {
  list-style: none;
  padding: 0;
}

.lista li:before {
  content: "";
  display: inline-block;
  width: 16px;
  /* largura da imagem */
  height: 16px;
  /* altura da imagem */
  background-image: url("../website/Vector.png");
  background-size: cover;
  margin-right: 5px;
  /* espaçamento entre o ícone e o texto */
}

.list-item {
  font-family: Montserrat;
  color: #212d47;
  font-size: 16px;
  margin-top: 2%;
  font-weight: 800;
}

@media (min-width: 992px) {
  .divscards {
    width: 14%;
  }
}

.bgwebsite {
  background: url("../website/background2.png") center center !important;
  background-size: cover !important;
}

.bgwebsite1 {
  background: url("../website/background2.png") center center !important;
  background-size: cover !important;
}

.imgparceiros {
  filter: brightness(0) invert(1);

  transition: all 0.4s ease-in-out;
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 20px;
}

.imgparceiros:hover {
  filter: none;
  transform: scale(1.1);
}

.titleparceiros {
  font-family: "BebasNeue";
  font-weight: normal;
  font-weight: 400;
  font-size: 16px;
}

.imgparceiros {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.parceiros-list {
  list-style: none;
  justify-content: center !important;
  padding: 5;
  margin: 0;
}

.parceiros-list li {
  width: 100%;
  float: left;
  padding: 0;
  margin-bottom: 10px;
}

@media (min-width: 576px) {
  .parceiros-list li {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .parceiros-list li {
    width: 33.33%;
  }

  .imgparceiros {
    width: 12%;
  }
}

@media (min-width: 992px) {
  .parceiros-list li {
    width: 25%;
  }

  .img-fluid1 {
    max-width: 75%;
    height: auto;
  }

  .txtprc {
    width: 15%;
    margin-right: 3%;
  }
}

@media (max-width: 768px) {
  .txtprc {
    width: 100%;
  }

  .imgparceiros {
    width: 34%;
  }
}

@media (max-width: 991px) {
  .img-fluid1 {
    max-width: 65%;
    height: auto;
  }
}

.textop {
  color: #ffffff;
  text-align: left;
}

.txtprc {
  color: #fff !important;
}

svg {
  width: 2.25em;
  transform-origin: center;
  animation: rotate4 2s linear infinite;
}

circle {
  fill: none;
  stroke: hsl(0, 0%, 100%);
  stroke-width: 2;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash4 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dashoffset: -125px;
  }
}

.texd {
  display: inline-block;
}

@media (max-width: 767px) {
  .texd {
    display: block;
    margin-bottom: 10px; /* Ajuste o valor conforme necessário */
  }

  .socials {
    flex-direction: column-reverse;
  }
}

.counterpd {
  margin: auto;
}

svg {
  width: 2.25em;
  transform-origin: center;
  animation: rotate4 2s linear infinite;
}

circle {
  fill: none;
  stroke: hsl(0, 0%, 100%);
  stroke-width: 2;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash4 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dashoffset: -125px;
  }
}

.iconf {
  width: 30px;
}

.cardquality {
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  border-radius: 10px 10px 10px 10px;
  padding: 15%;
  height: 350px;
}

.bg-whitee {
  background: rgb(234, 234, 234);
  background: -moz-linear-gradient(
    180deg,
    rgba(234, 234, 234, 1) 6%,
    rgba(235, 239, 245, 1) 40%,
    rgba(255, 255, 255, 1) 100%
  );
}

.buttontexto {
  font-family: "BebasNeue";
  text-transform: uppercase;
  font-size: 20px;
  margin-top: 3%;
  color: #212d47;
}

.buttontexto:hover {
  color: #fff;
}

.btntextocard {
  margin-top: 1%;
  height: 40px;
  color: #fff;
  font-size: 17px;
}

.accordion-button {
  font-size: 19px;
}

.vertical-line {
  border-left: 1px solid #ccc;
  height: 100%;
  text-align: center;
  justify-content: center;
  display: flex;
}

.accordion-item {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px; /* Adicione um espaçamento inferior opcional */
}

.accordion-body {
  overflow: auto; /* Adiciona uma barra de rolagem caso o conteúdo seja muito longo */
  max-height: 200px; /* Define uma altura máxima para o conteúdo */
}

.testimonial-item img {
  border-radius: 50%; /* Arredonda a imagem */
  display: block; /* Garante que a imagem seja exibida como um bloco */
  margin: auto; /* Centraliza a imagem horizontalmente */
}

.imgstyle {
  width: 80px !important;
  height: 80px;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.jumping-image {
  animation: jump 2s infinite;
}

.bgnews {
  background: linear-gradient(136.12deg, #212d47 22.9%, #51fffa 100%);
}

/* Estilo Moderno para Dropdown */
.dropdown {
  position: relative;
  display: inline-block;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.dropdown-toggle {
  transition: all 0.3s ease;
  padding: 10px 15px;
  color: #2c3e50;
  font-weight: 500;
  position: relative;
}

.dropdown-toggle:hover {
  color: #3498db;
}

.dropdown-toggle::after {
  content: "";
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-toggle::after {
  transform: rotate(180deg);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 350px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.dropdown-content a {
  color: #34495e;
  padding: 12px 20px;
  margin-right: 10px;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 0.95em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.dropdown-content a i {
  margin-right: 12px;
  color: #3498db;
  width: 20px;
  text-align: center;
}

.dropdown-content a:last-child {
  border-bottom: none;
}

.dropdown-content a:hover {
  background-color: #f8f9fa;
  color: #2980b9;
  transform: translateX(5px);
}
small {
  font-size: 10px !important;
}
.bg-primary {
  background: #00305a !important;
}

.text-primary {
  color: #00305a !important;
}
.text-secudary {
  color: #45cedd !important;
}
* Efeitos Hover Básicos */ .social-icon {
  transition: all 0.3s ease;
  transform: scale(1);
}

.social-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Cores específicas para cada rede */
.linkedin:hover {
  background-color: #0077b5 !important;
}

.facebook:hover {
  background-color: #3b5998 !important;
}

.instagram:hover {
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  ) !important;
}

/* Todos os ícones ficam brancos no hover */
.social-icon:hover small {
  color: white !important;
}

.social-icon:hover {
  animation: pulse 0.5s infinite alternate;
}
@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.15);
  }
}

/* Base Styles */
.contact-section {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.section-header {
  margin-bottom: 40px;
}

.section-title {
  font-size: 2.2rem;
  color: #2867b5;
  margin-bottom: 15px;
  font-weight: 700;
}

.section-subtitle {
  font-size: 1.1rem;
  color: #4a5568;
}

/* Form Styles */
.modern-contact-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.form-row {
  display: flex;
  gap: 20px;
}

.input-group {
  position: relative;
  flex: 1;
}

.floating-label {
  position: relative;
  height: 60px;
}

.floating-label input,
.floating-label textarea {
  width: 100%;
  height: 100%;
  padding: 20px 15px 5px 45px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background-color: #fff;
}

.floating-label textarea {
  padding-top: 25px;
  min-height: 120px;
  resize: vertical;
}

.floating-label label {
  position: absolute;
  top: 20px;
  left: 45px;
  color: #718096;
  transition: all 0.3s ease;
  pointer-events: none;
  font-size: 1rem;
}

.floating-label .input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #cbd5e0;
  transition: all 0.3s ease;
}

/* Floating Label Effect */
.floating-label input:focus,
.floating-label input:not(:placeholder-shown),
.floating-label textarea:focus,
.floating-label textarea:not(:placeholder-shown) {
  border-color: #058b2d;
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 103, 181, 0.1);
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:focus + label,
.floating-label textarea:not(:placeholder-shown) + label {
  top: 8px;
  left: 45px;
  font-size: 0.8rem;
  color: #058b2d;
}

.floating-label input:focus ~ .input-icon,
.floating-label input:not(:placeholder-shown) ~ .input-icon,
.floating-label textarea:focus ~ .input-icon,
.floating-label textarea:not(:placeholder-shown) ~ .input-icon {
  color: #058b2d;
}

/* Submit Button */
.submit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  background-color: #058b2d;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.submit-btn:hover {
  background-color: #058b2d;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(40, 103, 181, 0.3);
}

.btn-text {
  transition: all 0.3s ease;
}

.btn-icon {
  margin-left: 10px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateX(-10px);
}

.submit-btn:hover .btn-icon {
  opacity: 1;
  transform: translateX(0);
}

.btn-loader {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-loader svg {
  width: 100%;
  height: 100%;
  animation: rotate 1s linear infinite;
}

.btn-loader circle {
  stroke: white;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 60;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* Loading State */
.submit-btn.loading .btn-text {
  transform: translateX(10px);
}

.submit-btn.loading .btn-icon {
  opacity: 0;
  transform: translateX(10px);
}

.submit-btn.loading .btn-loader {
  opacity: 1;
}

/* Contact Info Section */
.contact-info-container {
  /* background: linear-gradient(135deg, #2867b5 0%, #1e4b8b 100%); */
  border-radius: 16px;
  padding: 50px;
  height: 100%;
  color: #058b2d;
}

.contact-info-title {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 700;
  color: #058b2d;
}

.contact-info-text {
  font-size: 1.1rem;
  margin-bottom: 40px;
  opacity: 0.9;
  line-height: 1.6;
}

.contact-features {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Responsive Design */
@media (max-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-info-container {
    padding: 40px;
  }
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 25px;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .contact-info-title {
    font-size: 1.6rem;
  }
  .banner_mobile {
    margin-top: 180px !important;
  }
}

.benefits-image {
  border-radius: 0px 100px;
  padding: 50px;
  background-color: white;
}
.btn-menu-primary {
  color: white;
  background: #058b2d !important;
  padding: 5px 15px !important;
  border-radius: 10px;
}
.btn-menu-primary:hover {
  background: rgb(43, 89, 140) !important;
  color: white;
}
.bg-v-chatt {
  background-image: linear-gradient(
    to right,
    rgb(43, 89, 140),
    #058b2d
  ) !important;
}

/* Estilos personalizados para a seção About */
.text-gradient-primary {
  background: linear-gradient(90deg, #2867b5 0%, #4a90e2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, #2867b5 0%, #4a90e2 100%);
}

.bg-primary-soft {
  background-color: rgba(40, 103, 181, 0.1);
}

.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.card:hover .icon-wrapper {
  background-color: #2867b5 !important;
}

.card:hover .icon-wrapper i {
  color: white !important;
}

.bg-light-blue {
  background-color: #d3e8fa;
}
.bg-secoes {
  background-color: #f3faff !important;
}
.bg-light-red {
  background-color: #fad3d3;
}
.bg-light-green {
  background-color: #d7fad3;
}
.bg-primary {
  background: #385cf2 !important;
}

@media (max-width: 768px) {
  .display-4 {
    font-size: 2.5rem;
  }
}
.text-secondary {
  color: #171717 !important;
}
.text-muted {
  color: #171717 !important;
}
/* Estilos para a seção de vantagens */
.bg-light-primary {
  background-color: #f0f7ff;
}

.bg-primary-soft {
  background-color: rgba(40, 103, 181, 0.1);
}

.bg-success-soft {
  background-color: rgba(40, 167, 69, 0.1);
}

.bg-warning-soft {
  background-color: rgba(255, 193, 7, 0.1);
}

.bg-info-soft {
  background-color: rgba(23, 162, 184, 0.1);
}

.bg-purple-soft {
  background-color: rgba(111, 66, 193, 0.1);
}

.bg-orange-soft {
  background-color: rgba(253, 126, 20, 0.1);
}

.bg-gradient-primary {
  background: linear-gradient(135deg, #2867b5 0%, #4a90e2 100%);
}

.text-gradient-primary {
  background: linear-gradient(90deg, #2867b5 0%, #4a90e2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cards de vantagens */
.feature-card {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(40, 103, 181, 0.2);
}

/* Ícones circulares */
.feature-icon-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon-circle {
  transform: scale(1.1);
}

/* Lista de benefícios */
.feature-benefits li span {
  color: #495057;
  font-size: 0.95rem;
}

/* CTA Card */
.cta-card {
  position: relative;
  overflow: hidden;
}

.cta-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.cta-card::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -30%;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

/* Espaçamentos */
.py-6 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-lg-8 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.mb-6 {
  margin-bottom: 4rem;
}

.mb-7 {
  margin-bottom: 5rem;
}

/* Responsividade */
@media (max-width: 768px) {
  .display-4 {
    font-size: 2.5rem;
  }

  .feature-card {
    padding: 1.5rem;
  }

  .cta-card {
    padding: 2rem 1.5rem !important;
  }
}

@media (max-width: 576px) {
  .feature-icon-circle {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .btn-lg {
    padding: 0.75rem 1.5rem;
  }
}

/* Overlay preto na imagem */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 1rem 1rem 0 0;
  z-index: 1;
}

.solution-card:hover .image-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
}

/* Conteúdo sobre a imagem */
.image-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.solution-card:hover .image-content {
  opacity: 1;
  transform: translateY(0);
}

/* Badge ajustado para hover */
.solution-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  z-index: 3;
  transition: transform 0.3s ease;
}

.solution-card:hover .solution-badge {
  transform: scale(1.1);
}

/* Imagem com zoom sutil */
.solution-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  border-radius: 1rem 1rem 0 0;
}

.solution-card:hover .solution-img {
  transform: scale(1.05);
}

/* Ajuste no container da imagem */
.solution-image-wrapper {
  position: relative;
  height: 80px;
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
}

/* Ajuste no conteúdo abaixo da imagem */
.solution-content {
  height: calc(100% - 200px);
  display: flex;
  flex-direction: column;
}

/* Opcional: Efeito de destaque no card inteiro */
.solution-card {
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.solution-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  border-color: rgba(40, 103, 181, 0.3);
}

/* Responsividade para a imagem */
@media (max-width: 992px) {
  .solution-image-wrapper {
    height: 180px;
  }

  .solution-content {
    height: calc(100% - 180px);
  }
}

@media (max-width: 576px) {
  .solution-image-wrapper {
    height: 160px;
  }

  .solution-content {
    height: calc(100% - 160px);
  }

  .image-content {
    padding: 1rem;
  }

  .image-content h3 {
    font-size: 1.1rem;
  }

  .image-content p {
    font-size: 0.8rem;
  }
}

/* Estilos para a Seção de Cases de Sucesso */
.success-cases {
  padding: 80px 0;
}

.case-card {
  background: white;
  border-radius: 16px;
  border: 1px solid goldenrod;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 127, 22, 0.08);
  transition: all 0.3s ease;
  height: 100%;
  margin-bottom: 30px;
}

.case-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 127, 22, 0.15);
}

.case-header {
  background: linear-gradient(135deg, #0E2EB7 50%, goldenrod 100%);
  padding: 25px;
  color: white;
  position: relative;
  height: 200px;
}

.case-header h3 {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.case-header .specialty {
  font-size: 0.9rem;
  opacity: 0.9;
}

.case-logo {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 100px;
  background: white;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.case-logo img {
  max-width: 100%;
  max-height: 100%;
}

.case-content {
  padding: 30px;
}

.case-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 25px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #395ffb;
  line-height: 1;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.85rem;
  color: #4a5568;
  font-weight: 500;
}

.case-description {
  margin-bottom: 25px;
}

.case-description p {
  color: #171717;
  line-height: 1.6;
  margin-bottom: 15px;
  font-weight: 600;
}

.case-description ul {
  list-style: none;
  padding-left: 0;
}

.case-description li {
  color: #171717;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.case-description li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: rgb(43, 89, 140);
  font-weight: bold;
}

.case-testimonial {
  background: #f8fafc;
  border-left: 4px solid #395ffb;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}
.bg-banner-functions {
  background-image: linear-gradient(to right, #395ffb22, #fff);
  background: F0F8FF;
}
.bg-banner-functions-inverse {
  background-image: linear-gradient(to right, #fff, #395ffb22);
  background: F0F8FF;
}
.footer-heading {
  color: #395ffb;
}
.text-color {
  color: #171717;
}
/* Estilos para o Footer */
.footer {
  padding-top: 80px;
}

.footer-heading {
  color: #212d47;
  font-weight: 700;
  font-size: 1.1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #2867b5;
  margin-bottom: 1.5rem;
}

/* Links do Footer */
.footer-link-item {
  display: flex;
  align-items: center;
  color: #495057;
  text-decoration: none;
  padding: 0.5rem 0;
  transition: all 0.3s ease;
  font-weight: 500;
}

.footer-link-item:hover {
  color: #2867b5;
  transform: translateX(5px);
}

.footer-link-item i {
  width: 20px;
  text-align: center;
}

/* Itens de Contato */
.contact-item {
  margin-bottom: 0.75rem;
}

.contact-icon {
  width: 20px;
  text-align: center;
}

.footer-link {
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #2867b5 !important;
}

/* Horário de Funcionamento */
.hours-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.hours-item:last-child {
  border-bottom: none;
}

/* Ícones Sociais */
.social-icon {
  transition: all 0.3s ease;
  width: 45px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-icon:hover {
  transform: translateY(-3px);
}

.social-icon.linkedin:hover {
  background-color: #0077b5 !important;
}

.social-icon.facebook:hover {
  background-color: #1877f2 !important;
}

.social-icon.instagram:hover {
  background: linear-gradient(
    45deg,
    #405de6,
    #5851db,
    #833ab4,
    #c13584,
    #e1306c,
    #fd1d1d
  ) !important;
}

.social-icon.whatsapp:hover {
  background-color: #25d366 !important;
}

/* Newsletter */
.newsletter .form-control {
  border-color: #dee2e6;
  border-right: none;
}

.newsletter .form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(40, 103, 181, 0.25);
}

.newsletter .btn {
  border-color: #2867b5;
}

/* Responsividade */
@media (max-width: 768px) {
  .footer-heading {
    font-size: 1rem;
  }

  .social-icon {
    width: 40px;
    height: 40px;
    padding: 0.75rem !important;
  }

  .business-hours,
  .contact-info {
    margin-bottom: 2rem;
  }
}

/* Efeito nos links de copyright */
footer.text-muted.small:hover {
  color: #2867b5 !important;
}

/* JavaScript para ano atual */
#current-year {
  font-weight: 600;
}
.copyright {
  height: 50px;
  display: flex;
  align-items: center;
}
.banner {
  /* background: #2867b5; */
  background: #0e2eb7;
  padding: 100px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-main {
  background: white;
  color: #2867b5 !important;
  border-color: #2867b5;
  padding: 10px;
  border-radius: 20px;
}
.btn-main:hover {
  background: #049c6a;
  border-color: #049c6a;
  color: white !important ;
}
.lead-text {
  font-size: 14px;
}
.card {
  border-radius: 30px;
  box-shadow: 0px;
}
.text-gradient-primary {
  background: linear-gradient(90deg, #2867b5 0%, #4a90e2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-primary-soft {
  background-color: rgba(40, 103, 181, 0.1);
}

/* Cards de funcionalidades */
.feature-card-simple {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature-card-simple:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border-color: rgba(40, 103, 181, 0.2);
}

/* Ícones */
.feature-icon-simple {
  width: 60px;
  height: 60px;
  background: rgba(40, 103, 181, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.feature-card-simple:hover .feature-icon-simple {
  transform: scale(1.1);
}

/* Botões WhatsApp */
.btn-outline-primary {
  border-color: #2867b5;
  color: #2867b5;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background-color: #2867b5;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(40, 103, 181, 0.2);
}

.btn-outline-primary .fab {
  transition: transform 0.3s ease;
}

.btn-outline-primary:hover .fab {
  transform: scale(1.2);
}

/* Botão principal WhatsApp */
.btn-primary {
  background: linear-gradient(90deg, #2867b5 0%, #4a90e2 100%);
  border: none;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(40, 103, 181, 0.3);
}

/* Espaçamentos */
.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-lg-7 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.mb-6 {
  margin-bottom: 4rem;
}

.mt-6 {
  margin-top: 4rem;
}

/* Responsividade */
@media (max-width: 768px) {
  .display-5 {
    font-size: 2.2rem;
  }

  .feature-card-simple {
    padding: 1.5rem;
  }

  .feature-icon-simple {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 576px) {
  .lead {
    font-size: 1.1rem;
  }

  .feature-card-simple {
    padding: 1.25rem;
  }
}
.testimonial-text {
  font-size: 14px;
  color: #171717;
  font-weight: 600;
}
.bg-icons {
  background: #2867b5;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  background: white;
  position: fixed;
  inset: 0;
  z-index: 9999;
  transition:
    opacity 0.6s ease-out,
    visibility 0.6s ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-container {
  text-align: center;
  /* margin-bottom: -40px; */
}

.loading-text {
  font-size: 14px;
  color: var(--text-color, #fff);
  text-align: center;
}

.dots-container {
  position: relative;
  height: 13px;
  width: 65px;
  margin: 15px auto 0;
}

/* Dots */
#preloader .dot {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  background-color: var(--accent-color, #2867b5);
  border-radius: 50%;
}

/* Correção das animações */
#preloader .dot:nth-child(1) {
  left: 0px;
  animation: animate-preloader-1 0.6s infinite;
}

#preloader .dot:nth-child(2) {
  left: 0px;
  animation: animate-preloader-2 0.6s infinite;
}

#preloader .dot:nth-child(3) {
  left: 24px;
  animation: animate-preloader-2 0.6s infinite;
}

#preloader .dot:nth-child(4) {
  left: 48px;
  animation: animate-preloader-3 0.6s infinite;
}

/* Keyframes */
@keyframes animate-preloader-1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes animate-preloader-2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

@keyframes animate-preloader-3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

/* Ocultar preloader quando o body ganhar a classe .loaded */
.loaded #preloader {
  opacity: 0;
  visibility: hidden;
}

/* Estilos ORIGINAIS do card (mantidos) */
.feature-card-simple {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.card-content-wrapper {
  position: relative;
  z-index: 2;
}

.feature-icon-simple {
  width: 60px;
  height: 60px;
  background: rgba(40, 103, 181, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-outline-primary {
  border-color: #2867b5;
  color: #2867b5;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background-color: #2867b5;
  color: white;
  transform: translateY(-2px);
}

/* ESTILOS APENAS PARA O HOVER (NOVOS) */
.feature-card-simple::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  border-radius: 1rem;
}

.feature-card-simple::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  border-radius: 1rem;
}

/* Aplicar imagens de fundo específicas */
.feature-card-simple[data-bg-image]::before {
  background-image: var(--bg-image-url);
}

/* Hover: mostrar imagem e overlay */
.feature-card-simple:hover::before,
.feature-card-simple:hover::after {
  opacity: 1;
}

/* Hover: manter conteúdo original, apenas mudar cores para branco */
.feature-card-simple:hover .card-content-wrapper h3,
.feature-card-simple:hover .card-content-wrapper p,
.feature-card-simple:hover .card-content-wrapper .feature-icon-simple i {
  color: white !important;
}

.feature-card-simple:hover .card-content-wrapper p {
  opacity: 0.9;
}

.feature-card-simple:hover .feature-icon-simple {
  background: rgba(255, 255, 255, 0.1);
}

.feature-card-simple:hover .btn-outline-primary {
  border-color: white;
  color: white;
  background-color: transparent;
}

.feature-card-simple:hover .btn-outline-primary:hover {
  background-color: white;
  color: #2867b5;
  border-color: white;
}

/* Efeito de elevação no hover */
.feature-card-simple:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Solução definitiva: usar o atributo data-bg-image diretamente */
.feature-card-simple[data-bg-image="../img/Agenda-Medica-Inteligente.jpg"]::before {
  background-image: url("../img/Agenda-Medica-Inteligente.jpg");
}

.feature-card-simple[data-bg-image="../img/Telemedicina-Completa.jpg"]::before {
  background-image: url("../img/Telemedicina-Completa.jpg");
}

.feature-card-simple[data-bg-image="../img/Gestao-de-Consultas.jpg"]::before {
  background-image: url("../img/Gestao-de-Consultas.jpg");
}

.feature-card-simple[data-bg-image="../img/Acesso-Multiplataforma.jpg"]::before {
  background-image: url("../img/Acesso-Multiplataforma.jpg");
}

.feature-card-simple[data-bg-image="../img/Gestao-Financeira.jpg"]::before {
  background-image: url("../img/Gestao-Financeira.jpg");
}

.feature-card-simple[data-bg-image="../img/Relatorios-Avancados.jpg"]::before {
  background-image: url("../img/Relatorios-Avancados.jpg");
}

.feature-card-simple[data-bg-image="../img/gestao-de-convenio.png"]::before {
  background-image: url("../img/gestao-de-convenio.png");
}

.feature-card-simple[data-bg-image="../img/Prontuario-Eletronico.jpg"]::before {
  background-image: url("../img/Prontuario-Eletronico.jpg");
}

.feature-card-simple[data-bg-image="../img/Dashboard-Dinamico.jpg"]::before {
  background-image: url("../img/Dashboard-Dinamico.jpg");
}

/* Para as imagens do Unsplash (mantenha essas se ainda estiver usando) */
.feature-card-simple[data-bg-image*="unsplash.com"]::before {
  background-image: var(--bg-image-url);
}

/* Responsividade */
@media (max-width: 768px) {
  .feature-card-simple {
    padding: 1.5rem;
  }

  .feature-icon-simple {
    width: 50px;
    height: 50px;
  }
}
.desktopmockup {
  border-radius: 100px !important;
}
h6 {
  font-size: 18px;
}
.text-muted {
  font-size: 16px;
}
.font-size {
  font-size: 20px;
}
.font-check {
  font-size: 16px;
}

/* Estilos para a seção FAQ */
.bg-light {
  background-color: #f8fafc !important;
}

.text-gradient-primary {
  background: linear-gradient(90deg, #2867b5 0%, #4a90e2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-primary-soft {
  background-color: rgba(40, 103, 181, 0.1);
}

/* FAQ Accordion */
.faq-item {
  border-radius: 0.75rem;
  overflow: hidden;
}
.faq-answer p {
  color: #000000;
}
.faq-answer span {
  color: #000000;
}

.faq-question {
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background-color: rgba(40, 103, 181, 0.05);
}

.faq-question[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

.faq-question .fa-chevron-down {
  transition: transform 0.3s ease;
}

.faq-icon {
  width: 40px;
  height: 40px;
  background: rgba(40, 103, 181, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* FAQ Answer */
.faq-answer {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  margin-top: -4px;
}

/* Badges */
.badge.bg-success.bg-opacity-10 {
  background-color: rgba(40, 167, 69, 0.1) !important;
  border: 1px solid rgba(40, 167, 69, 0.2);
}

/* Efeitos de hover */
.faq-question:hover h5 {
  color: #2867b5;
}

/* Espaçamentos */
.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-lg-7 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Responsividade */
@media (max-width: 992px) {
  .display-5 {
    font-size: 2.5rem;
  }

  .pe-lg-4 {
    padding-right: 0 !important;
    margin-bottom: 3rem;
  }
}

@media (max-width: 768px) {
  .faq-question h5 {
    font-size: 1rem;
  }

  .faq-icon {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }

  .faq-question,
  .faq-answer {
    padding: 1.25rem !important;
  }
}

/* Animação suave para o collapse */
.collapse {
  transition: all 0.3s ease;
}

/* Estatísticas */
.bg-white.rounded-4 {
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Botão WhatsApp */
.btn-primary {
  background: linear-gradient(90deg, #2867b5 0%, #4a90e2 100%);
  border: none;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(40, 103, 181, 0.3);
}
.text-box {
  font-size: 18px;
}
.subtitle {
  font-size: 24px;
}
.box-cta {
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
/* .box-border{
  border-width: 50px;
  border-style: solid;
  border-image: linear-gradient(to right, #212d47, #0E2EB7) 1;
  border-image: linear-gradient(#212d47 0.02%, 123.81%);
} */
.nld-chatbot .nld-shown-slide {
  bottom: 50px !important;
}
@media (max-width: 768px) {
  .mobilee {
    width: 100% !important;
  }
  .banner {
    padding: 20px !important;
  }
  .desktopmockup {
    transform: scale(1);
    padding-top: 40px;
  }
  .translate-middle {
    width: 260px;
    transform: translate(-35%, 0%) !important;
  }
  .row > * {
    margin-top: 0px;
  }
  .mobile-row {
    flex-direction: column-reverse !important;
  }
}
.audio-gif {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Container principal do CTA */
.cta-modern {
  background: white;
  border-radius: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Efeito de brilho sutil */
.cta-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(40, 103, 181, 0.3), 
    transparent
  );
}

/* Badge destacado */
.cta-badge {
  display: inline-block;
  background: linear-gradient(90deg, #2867b5, #4a90e2);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 2rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(40, 103, 181, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(40, 103, 181, 0);
  }
}

/* Título com gradiente */
.text-gradient-primary {
  background: linear-gradient(90deg, #2867b5 0%, #4a90e2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Container do botão */
.cta-button-wrapper {
  display: inline-block;
  position: relative;
  margin: 1rem 0;
}

/* Botão moderno */
.cta-button {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(90deg, #2867b5 0%, #4a90e2 100%);
  color: white;
  text-decoration: none;
  padding: 1.25rem 2rem;
  border-radius: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: none;
  min-width: 320px;
}

/* Efeito de brilho no botão */
.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.7s ease;
}

.cta-button:hover::before {
  left: 100%;
}

/* Ícone do WhatsApp */
.cta-icon {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

/* Texto do botão */
.cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  flex-grow: 1;
}

.cta-main-text {
  font-size: 1.1rem;
  font-weight: 700;
}

.cta-sub-text {
  font-size: 0.85rem;
  opacity: 0.9;
  font-weight: 400;
}

/* Seta do botão */
.cta-arrow {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

/* Efeitos hover no botão */
.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(40, 103, 181, 0.3);
}

.cta-button:hover .cta-icon {
  transform: scale(1.2);
}

.cta-button:hover .cta-arrow {
  transform: translateX(5px);
}

/* Garantia */
.cta-modern .text-muted.small {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Responsividade */
@media (max-width: 768px) {
  .cta-modern {
    padding: 2rem 1.5rem !important;
  }
  
  .cta-button {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 1.5rem;
    min-width: auto;
    width: 100%;
    max-width: 300px;
  }
  
  .cta-text {
    text-align: center;
    align-items: center;
  }
  
  .cta-arrow {
    display: none;
  }
  
  .h2 {
    font-size: 1.75rem;
  }
  
  .lead {
    font-size: 1.1rem;
  }
}

/* Efeito de flutuação suave */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Adicione esta classe se quiser o efeito de flutuação */
.cta-modern {
  animation: float 6s ease-in-out infinite;
}