/**
* Template Name: OnePage
* Template URL: https://bootstrapmade.com/onepage-multipurpose-bootstrap-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts 
200: Extra light (para textos leves ou subtítulos).
400: Regular (para textos padrão).
700: Bold (para títulos ou elementos destacados).
*/

:root {
  --default-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: 'DM Sans', sans-serif; /* Fonte para títulos */
  --nav-font: 'DM Sans', sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #243746; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #243746; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #837FBB; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}


/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #243746;  /* The default color of the main navmenu links */
  --nav-hover-color: #4aaed0; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #243746; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #4aaed0; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f6fafd;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

.accent-background {
  --background-color: #837FBB;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --accent-color: #ffffff;
  --surface-color: #4aaed0;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
html, body {
  background: white; /* ou a cor do seu layout */
  min-height: 100%;
  overscroll-behavior: contain;
}

body {
  color: var(--default-color);
  background-color: #eaf6fb; /* Cor base próxima do SVG */
  background-image: url('../img/bg.svg');
  background-repeat: repeat-y; /* Repete na altura */
  background-position: center top; /* Centraliza no topo */
  background-size: 100% auto; /* Largura total, altura proporcional */
  font-family: var(--default-font);
  min-height: 100vh; /* Garante que o fundo cubra toda a altura da tela */
  overscroll-behavior-y: contain;
}


a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-weight: 700; /* Bold */
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/* Email Form Messages
------------------------------*/
.email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: email-form-loading 1s linear infinite;
}

@keyframes email-form-loading {
  0% {
    transform: rotate(0deg);
  }

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  height: 120px;
  overflow: hidden; /* Evita que conteúdo extra ultrapasse */
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 80px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 400;
  color: var(--heading-color);
}


@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }


  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  border-color: var(--contrast-color);
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 992px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 18px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 991px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background: rgba(255, 255, 255, 0.93);
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 80px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 16px;
  color: var(--accent-color);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: 700;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 4px;
  font-size: 13px;
}

.footer .credits a {
  color: color-mix(in srgb, var(--contrast-color), transparent 30%);
}


.footer .logo img {
  width: 70px;              /* Tamanho ideal do logo */
  height: 70px;
  object-fit: contain;
  display: block;
}

.footer-manifesto {
  margin: 20px 0;
  line-height: 1.5;
  display: block;            /* Remove flex e alinhamento vertical */
  min-height: unset;         /* Remove altura mínima */
}

.copyright a {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.copyright a:hover,
.copyright a:focus {
  color: #e0e0e0 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

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

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 120px 0;
  text-align: center;
  position: relative;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 76px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
  max-width: 800px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: lowercase;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 120px);
  overflow: hidden;
  display: flex; /* Ativa o Flexbox */
  flex-direction: column; /* Organiza os elementos em coluna */
  justify-content: center; /* Centraliza os elementos na vertical */

}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero-video-bg {
  position: absolute;
  top: 0px; 
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.8; /* ajuste para mais ou menos transparência */
  
}

.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero > .container {
  position: relative;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h1 {
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
}

.hero .subtitle {
  font-size: 20px;
  color: #243746;
  opacity: 0.85;
  margin-top: 30px;
  margin-bottom: 0;
  max-width: 600px;
}

.hero .btn-get-started {
  background: rgba(0, 0, 0, 0.05); /* Fundo semi-transparente */
  color: var(--contrast-color); /* Mantém o texto branco */
  border: 2px solid var(--contrast-color); /* Borda para destacar */
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 15px 30px;
  border-radius: 8px;
  transition: 0.5s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px; 

}

.hero .btn-get-started i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.5s;
}

.hero .btn-get-started:hover {
  background: var(--surface-color);
  color: var(--accent-color);
}

.hero .btn-get-started:hover i {
  transform: translate(5px, 0);
}

@media (max-width: 575px) {
  .hero {
    padding: 10px;
  }

  .hero h1 {
    font-size: 32px;
  }
  .hero h1 br {
    display: none;
  }
}

/*--------------------------------------------------------------
# Manifest Section
--------------------------------------------------------------*/
.manifest {
    background: rgba(255, 255, 255, 0.85);
    padding: 20px 0;
}

/* Container com largura fixa até 960px */
.manifest .container {
  max-width: 960px;
  margin: 0 auto; /* Centraliza o container */
}

/* Distribuir os 3 elementos igualmente */
.manifest .row {
  display: flex;
  justify-content: space-between; /* Espaçamento igual entre os elementos */
 

}

.manifest .col-lg-3 {
  width: 320px; /* Define uma largura fixa */
  flex: 0 0 auto; /* Permite que a largura fixa seja aplicada */
  max-width: none; /* Remove o limite de largura */
}

.manifest img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.manifest p {
  margin: 10px 0 0 0;
  font-size: 22px;
}

.manifest .icon-box {
  display: flex;
  margin: 20px;
  flex-direction: column;
  align-items: flex-start;    /* Alinha à esquerda */
  justify-content: flex-start;/* Alinha ao topo */
  padding-top: 48px;          /* Ajuste para descer o conteúdo */
  padding-left: 44px;         /* Ajuste para afastar da borda esquerda */
  padding-right: 84px;        /* Opcional, para não colar na direita */
  padding-bottom: 32px;       /* Opcional, para não colar embaixo */
  position: relative;
  overflow: hidden;
  
  transition: all 0.3s ease-in-out;
  /* Remova o border-radius se quiser o recorte exato do SVG */
  border-radius: 0;
  z-index: 1;
  height: 300px; /* Ajuste a altura conforme necessário */
  width: 300px; /* Ajuste a largura conforme necessário */


  /* Máscara SVG */
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 338 352"><path fill="white" d="M319.824 196.607C325.339 189.169 339.493 180.74 325.339 159.315C311.046 137.679 219.452 79.0789 195.033 66.0243C170.606 52.9623 84.724 8.78638 51.8033 6.66645C18.8826 4.55382 17.0031 53.0425 12.603 77.7676C8.20286 102.5 2.46232 183.494 10.8546 254.77C19.2469 326.046 31.8862 346.466 40.0308 349.023C48.1827 351.58 64.7924 353.605 97.7786 340.9C225.149 291.88 310.915 209.276 319.817 196.6"/></svg>');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 338 352"><path fill="white" d="M319.824 196.607C325.339 189.169 339.493 180.74 325.339 159.315C311.046 137.679 219.452 79.0789 195.033 66.0243C170.606 52.9623 84.724 8.78638 51.8033 6.66645C18.8826 4.55382 17.0031 53.0425 12.603 77.7676C8.20286 102.5 2.46232 183.494 10.8546 254.77C19.2469 326.046 31.8862 346.466 40.0308 349.023C48.1827 351.58 64.7924 353.605 97.7786 340.9C225.149 291.88 310.915 209.276 319.817 196.6"/></svg>');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.manifest .icon-box .title {
  font-weight: 700;
  font-size: 20px;
  color: white;
}

.manifest .icon-box .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.manifest .icon-box .description {
  font-size: 16px;
  line-height: 20px;
  margin-top: 0;
  color: white;
}

.manifest .icon-box .icon {
  margin-bottom: 20px;
  padding-top: 10px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  font-size: 36px;
  line-height: 1;
  color: var(--accent-color);
}

.manifest .icon-box-purple {
  background: rgba(131, 127, 187, 0.8); /* #837FBB */
}

.manifest .icon-box-blue {
  background: rgba(108, 173, 205, 0.7) /* #4AAED0 */
  
}

.manifest .icon-box-green {
  background: rgba(132, 193, 183, 0.8); /* #84C1B7 */
}

.manifest .icon-box-purple .icon i {
  color: #9DDCF9; /* azul */
} 

.manifest .icon-box-green .icon i {
  color: #fff; 
}

.manifest .icon-box-blue .icon i {
  color: #837FBB;
}


/* Responsividade extra para telas menores */
@media (max-width: 991px) {
  .manifest .icon-box {
    padding: 24px 10px;
  }
  .manifest .icon-box .icon {
    font-size: 22px;
  }
  .manifest .icon-box .title {
    font-size: 15px;
  }
  .manifest .icon-box .description {
    font-size: 12px;
  }
}

@media (min-width: 640px) {
  .manifest .icon-box:hover {
    transform: scale(1.08);
  }

  .manifest .icon-box:hover .title a {
    color: var(--accent-color);
  }
}

.manifest-mobile {
  padding: 10px 15px 25px 15px;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  background: rgba(108, 173, 205, 0.88); /* #6CADCD com 85% de opacidade */
}

.services .section-title h2 ,
.services .section-title p {
  color: white;
}

.service-item {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px 0 rgba(36, 55, 70, 0.18);
  height: 330px;
  padding: 20px 20px;
  text-align: center;
  transition: 0.3s;
  border-radius: 12px;
  perspective: 1000px; /* Define a perspectiva para o efeito 3D */
  position: relative;
  cursor: pointer; /* Adiciona o estilo de cursor de clique */
}

.services .service-item .icon {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  position: relative;
}

.services .service-item .icon i {
  position: absolute;
  top: 50%;
  left: 42%; /* ajuste de 50% para 42% para mover para a esquerda */
  transform: translate(-50%, -50%);
  font-size: 36px;
  transition: 0.5s;
  z-index: 2;
}

.services .service-item .icon svg {
  position: absolute;
  top: 0;
  left: 0;
}

.services .service-item .icon svg path {
  transition: 0.5s;
  fill: color-mix(in srgb, var(--default-color), transparent 95%);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 25px 0 15px 0;
  font-size: 20px;
}

.services .service-item p {
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 0;
}

.services .service-item:hover {
  box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.1);
}


.services .service-item.item-green i {
  color: #84C1B7;
}

.services .service-item.item-green:hover .icon i {
  color: #fff;
}

.services .service-item.item-green:hover .icon path {
  fill: #84C1B7;
}

.services .service-item.item-blue i {
  color: #4aaed0;
}

.services .service-item.item-blue:hover .icon i {
  color: #fff;
}

.services .service-item.item-blue:hover .icon path {
  fill: #4aaed0;
}

.services .service-item.item-purple i {
  color: #837FBB;
}

.services .service-item.item-purple:hover .icon i {
  color: #fff;
}

.services .service-item.item-purple:hover .icon path {
  fill: #837FBB;
}

.services .service-item.item-black i {
  color: #243746;
}

.services .service-item.item-black:hover .icon i {
  color: #fff;
}

.services .service-item.item-black:hover .icon path {
  fill: #243746;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d; /* Ativa o efeito 3D */
}

.service-item.flipped .flip-card-inner {
  transform: rotateY(180deg); /* Gira o card ao clicar */
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Esconde o lado oposto */
}

.flip-card-front {
  z-index: 2; /* Garante que a frente fique por cima */
}

.flip-card-front .content {
  height: 100%;
  display: flex;
  flex-direction: column;
  
}

.ver-mais, .voltar {
  position: relative;
  overflow: hidden;
  margin-top: auto;  
  align-self: flex-end;
  text-decoration: none;
  font-weight: 600;
  color: #4aaed0;
}

.ver-mais:hover, .voltar:hover {
  color:  rgba(74,174,208,0.7);
  text-decoration: none;
}


.flip-card-back {
  transform: rotateY(180deg); /* Define o verso do card */
  display: flex;
  flex-direction: column;
}

.flip-card-back .content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flip-card-back ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;         /* Alinha o texto à esquerda */
  width: 100%;              /* Ocupa toda a largura do container */
}

.flip-card-back ul li {
  padding-bottom: 5px;
  display: flex;
  align-items: flex-start;      /* Alinha o ícone ao topo do texto */
  font-size: 16px;
  color: var(--default-color);
  text-align: left;
  justify-content: flex-start;
}

.flip-card-back ul i {
  font-size: 20px;
  padding-right: 10px;
  color: var(--accent-color);
}


@media (max-width: 575px) {
  .service-item {
    margin: 0 20px;
    height: 310px;
  }
}

/*--------------------------------------------------------------
# Process Section
--------------------------------------------------------------*/

.process {
  background: rgba(255, 255, 255, 0.9);
}

.process .faq-container .faq-item {
  position: relative;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 12px;
  min-height: 64px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.process .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.process .faq-container .faq-item:hover,
.process .faq-container .faq-item:focus-within {
  box-shadow: 0 6px 16px rgba(36, 55, 70, 0.2);
  border-color: rgba(36, 55, 70, 0.25);
}

.process .faq-container .faq-item.bg-purple:hover,
.process .faq-container .faq-item.bg-purple:focus-within {
  background: #837fbb !important;
}

.process .faq-container .faq-item.bg-green:hover,
.process .faq-container .faq-item.bg-green:focus-within {
  background: #84c1b7 !important;
}

.process .faq-container .faq-item.bg-blue:hover,
.process .faq-container .faq-item.bg-blue:focus-within {
  background: #4aaed0 !important;
}

.process .faq-container .faq-item.bg-black:hover,
.process .faq-container .faq-item.bg-black:focus-within {
  background: #243746 !important;
}


.process .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 20px;
  margin: 0 30px 0 0;
  display: flex;
  align-items: center;
  color: inherit;
  pointer-events: none;
}

.process .faq-container .faq-item h3 .num {
  color: var(--accent-color);
  padding-right: 5px;
}

.process .faq-container .faq-item .faq-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.3s, opacity 0.3s;
  color: inherit;
}

.process .faq-container .faq-item .faq-content p {
  margin: 10px;
  color: inherit;
}

.process .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 20px;
  transition: 0.3s;
  pointer-events: none;
}

.process .faq-container .faq-active {
  
  color: #fff;
}

.process .faq-container .faq-active h3 {
  color: #fff;
}

.process .faq-container .faq-active .faq-content {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
  padding-top: 10px;
}

.process .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: #fff;
}

.process .bg-purple { background: rgba(131,127,187,0.8); }
.process .bg-green  { background: rgba(132,193,183,0.8); }
.process .bg-blue   { background: rgba(74,174,208,0.8); }
.process .bg-black  { background: rgba(36,55,70,0.8)!important; }

.process .faq-container .faq-item h3 i {
  font-size: 1.5em;      /* aumenta o tamanho do ícone */
  margin-right: 12px;    /* espaçamento entre o ícone e o texto */
  vertical-align: middle;
  line-height: 1;
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding: 60px 0;
  position: relative;
  clip-path: inset(0);
  background: rgba(131, 127, 187, 0.9); 
}

.call-to-action h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 8px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--surface-color);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  background: rgba(255, 255, 255, 0.93);
}

.about ul {
  list-style: none;
  padding: 0;
}

.about ul li {
  padding-bottom: 5px;
  display: flex;
  align-items: center;
}

.about ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.about .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px 28px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.about .read-more:hover i {
  transform: translate(5px, 0);
}

.icon-destaque {
  color: #4aaed0;
  font-size: 50px;
}

.destaque {
  color: #4aaed0;
}

.about .section-title {
  padding-bottom: 10px;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.93);
  border-top: 1px solid #243746;  
  border-bottom: 1px solid #243746;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 90%;
  transition: 0.3s;
  opacity: 0.5;
  filter: grayscale(100);
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.1);
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  background: rgba(255, 255, 255, 0.93);
}
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .email-form {
  height: 100%;
}

.contact .email-form input[type=text],
.contact .email-form input[type=email],
.contact .email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .email-form input[type=text]:focus,
.contact .email-form input[type=email]:focus,
.contact .email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .email-form input[type=text]::placeholder,
.contact .email-form input[type=email]::placeholder,
.contact .email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 8px;
}

.contact .email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@media (min-width: 768px) {
  .w-md-auto {
    width: auto !important;
  }
}

/*--------------------------------------------------------------
# Section Divider
--------------------------------------------------------------*/
.section-divider {
  width: 100%;
  height: 0;
  background: rgba(255, 255, 255, 0.93);
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  margin: 0;
}

.section-bg {
  background: rgba(255, 255, 255, 0.93);
}

.grecaptcha-badge {
  bottom: 70px !important; /* Ajuste a altura conforme necessário */
  /* visibility: hidden; */
}