/* Variáveis */
body, html {
  font-family: "Sarabun", sans-serif;
}


:root {
  /* Cores */
  --color-primary: #004650;
  --color-secondary: #D5FC48;
  --color-neutral-1: #152022;
  --color-neutral-2: #7F898B;
  --color-neutral-3: #B0B0B0;
  --color-neutral-4: #EDEDED;
  --color-neutral-5: #FFFFFF;

  /* Fontes */
  --font-base: 'Sarabun', sans-serif;
}

/*
* Default Css
*/

/* Fonte padrão do projeto */
body {
font-family: var(--font-base);
}

/* Fontes utilitárias */
.font-base {
font-family: var(--font-base);
}

/* Text colors */
.text-primary  { color: var(--color-primary); }
.text-secondary  { color: var(--color-secondary); }
.text-neutral-1  { color: var(--color-neutral-1); }
.text-neutral-2  { color: var(--color-neutral-2); }
.text-neutral-3  { color: var(--color-neutral-3); }
.text-neutral-4  { color: var(--color-neutral-4); }
.text-neutral-5  { color: var(--color-neutral-5); }

/* Background colors */
.bg-primary  { background-color: var(--color-primary); }
.bg-secondary  { background-color: var(--color-secondary); }
.bg-neutral-1  { background-color: var(--color-neutral-1); }
.bg-neutral-2  { background-color: var(--color-neutral-2); }
.bg-neutral-3  { background-color: var(--color-neutral-3); }
.bg-neutral-4  { background-color: var(--color-neutral-4); }
.bg-neutral-5  { background-color: var(--color-neutral-5); }

/* Border color */
.border-primary  { border-color: var(--color-primary); }
.border-secondary  { border-color: var(--color-secondary); }
.border-neutral-1  { border-color: var(--color-neutral-1); }
.border-neutral-2  { border-color: var(--color-neutral-2); }
.border-neutral-3  { border-color: var(--color-neutral-3); }
.border-neutral-4  { border-color: var(--color-neutral-4); }
.border-neutral-5  { border-color: var(--color-neutral-5); }

/* Botão base */
.btn {
  padding: 16px 24px;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  border-radius: 0.5rem;
  cursor: pointer;
  transition-duration: 0.3s;
}
.btn:hover {
  transition-duration: 0.3s;
}
.btn:focus {
  transition-duration: 0.3s;
}
.btn:disabled {
  color: var(--color-neutral-3);
  background-color: var(--color-neutral-5);
  transition-duration: 0.3s;
}

.btn-primary {
  color: var(--color-primary);
  background-color: var(--color-secondary);
}
.btn-primary:hover {
  color: var(--color-neutral-5);
  background-color: var(--color-primary);
}
.btn-primary:focus {
  color: var(--color-neutral-5);
  background-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.btn-secondary {
  color: var(--color-neutral-5);
  background-color: var(--color-primary);
}
.btn-secondary:hover {
  color: var(--color-primary);
  background-color: var(--color-secondary);
}
.btn-secondary:focus {
  color: var(--color-primary);
  background-color: var(--color-secondary);
  box-shadow: 0 0 0 2px var(--color-secondary);
}

.container {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

html, body {
  scroll-behavior: smooth;
}

/*
* Fim - Default Css
*/

/*
* animação carrossel infinito
*/
.slider {
  height: 100px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slide-track {
  display: flex;
  width: calc((270px * 30) + (70px * 30));
  animation: scroll 30s linear infinite;
}

.slide {
  height: 100px;
  width: 270px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 70px;
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-50%);
  }
}
/*
* Fim - animação carrossel infinito
*/

/*
* Input flutuante
*/
.label-float {
  position: relative;
  padding-top: 0px;
}

.label-float input,
.label-float select,
.label-float textarea {
  outline: none !important;
  font-size: 16px;
  transition: all 0.1s linear;
  -webkit-appearance: none;
}

.label-float input::placeholder,
.label-float select::placeholder,
.label-float textarea::placeholder {
  color: transparent !important;
}

.label-float label {
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
  transition: all 0.1s linear;
  background-color: white;
  padding: 0 5px;
  box-sizing: border-box;
}

.label-float input:focus + label,
.label-float input:not(:placeholder-shown) + label {
  font-size: 12px;
  top: 0px;
}
/*
* Fim - Input flutuante
*/

/*
* Animação dos cards
*/
@keyframes slide-in-left {
from {
  transform: translateX(-200px);
  opacity: 0;
}
to {
  transform: translateX(0);
  opacity: 1;
}
}

@keyframes slide-in-right {
from {
  transform: translateX(400px);
  opacity: 0;
}
to {
  transform: translateX(0);
  opacity: 1;
}
}
.animate-slide-in-left {
animation: slide-in-left 5s ease-out forwards;
}

.animate-slide-in-right {
animation: slide-in-right 5s ease-out forwards;
}
.scroll-line {
  transform: translateX(0);
  transition: transform 0.1s ease-out;
}

/*
* Animação dos cards
*/


.gradient-box {
  border-radius: 16px;
  border: 1px solid #EBEBEB;
  background: linear-gradient(136deg, #EFEFEF 16.25%, #FFF 138.02%);
}

.gradient-spacer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -0.1%, #FFF 99.9%);
}

#swiper-1 .swiper-button-prev,
#swiper-1 .swiper-button-next,
#text-with-columns-swiper-pag-and-btn .swiper-button-prev,
#text-with-columns-swiper-pag-and-btn .swiper-button-next,
#reviews-swiper-pag-and-btn .swiper-button-prev,
#reviews-swiper-pag-and-btn .swiper-button-next,
#swiper-2 .swiper-button-prev,
#swiper-2 .swiper-button-next {
  position: relative;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  top: unset;
  bottom: unset;
  margin-top: unset;
  right: unset;
  left: unset;
}
#swiper-1 .swiper-button-prev::after,
#swiper-1 .swiper-button-next::after,
#text-with-columns-swiper-pag-and-btn .swiper-button-prev::after,
#text-with-columns-swiper-pag-and-btn .swiper-button-next::after,
#reviews-swiper-pag-and-btn .swiper-button-prev::after,
#reviews-swiper-pag-and-btn .swiper-button-next::after,
#swiper-2 .swiper-button-prev::after,
#swiper-2 .swiper-button-next::after {
  display: none;
}
#swiper-1 .swiper-pagination,
#text-with-columns-swiper-pag-and-btn .swiper-pagination,
#reviews-swiper-pag-and-btn .swiper-pagination,
#swiper-2 .swiper-pagination {
  position: relative;
  width: fit-content;
  top: unset;
  bottom: unset;
  width: fit-content;
}
#swiper-1 .swiper-pagination-bullet,
#text-with-columns-swiper-pag-and-btn .swiper-pagination-bullet,
#reviews-swiper-pag-and-btn .swiper-pagination-bullet,
#swiper-2 .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
}
.swiper-pagination-bullet-active {
  background-color: var(--color-neutral-1) !important;
}

.title {
font-size: 24px;
font-weight: 600;
line-height: 1.25;
}

.text {
font-size: 16px;
font-weight: 400;
line-height: 1.625;
}

/* Mobile grande: ≥390px */
@media (min-width: 390px) {
.title {
  font-size: 28px;
}
.btn {
  font-size: 16px;
}
}

/* Tablet: ≥824px */
@media (min-width: 824px) {
.title {
  font-size: 32px;
}
.text {
  font-size: 20px;
}
.btn {
  padding: 20px 28px;
  font-size: 18px;
}
}

/* Desktop pequeno: ≥1280px */
@media (min-width: 1280px) {
/* .title {
  font-size: 40px;
} */
/* .text {
  font-size: 24px;
} */
 .btn {
      padding: 24px 32px;
      font-size: 20px;
 }
}

/* Desktop grande: ≥1728px */
@media (min-width: 1728px) {
.title {
  font-size: 48px;
}
.text {
  font-size: 24px;
}
}

:root {
    --primary: #004650;
    --secondary: #D5FC48;
    --neutral-1: #152022;
    --neutral-2: #7F898B;
    --neutral-3: #B0B0B0;
    --neutral-4: #EFEFEF;
    --neutral-5: #FFFFFF;
    --red-1: #FB6E6E;
    --red-2: #FFEEEE;
    --yellow: #FFC300;
    --chat: #202A2C;
}

/* === Background Colors === */
.bg-primary     { background-color: var(--primary); }
.bg-secondary   { background-color: var(--secondary); }
.bg-neutral-1   { background-color: var(--neutral-1); }
.bg-neutral-2   { background-color: var(--neutral-2); }
.bg-neutral-3   { background-color: var(--neutral-3); }
.bg-neutral-4   { background-color: var(--neutral-4); }
.bg-neutral-5   { background-color: var(--neutral-5); }
.bg-red-1       { background-color: var(--red-1); }
.bg-red-2       { background-color: var(--red-2); }
.bg-yellow      { background-color: var(--yellow); }
.bg-chat      { background-color: var(--chat); }

/* === Text Colors === */
.text-primary   { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-neutral-1 { color: var(--neutral-1); }
.text-neutral-2 { color: var(--neutral-2); }
.text-neutral-3 { color: var(--neutral-3); }
.text-neutral-4 { color: var(--neutral-4); }
.text-neutral-5 { color: var(--neutral-5); }
.text-red-1     { color: var(--red-1); }
.text-red-2     { color: var(--red-2); }
.text-yellow    { color: var(--yellow); }

/* === Border Colors === */
.border-primary   { border-color: var(--primary); }
.border-secondary { border-color: var(--secondary); }
.border-neutral-1 { border-color: var(--neutral-1); }
.border-neutral-2 { border-color: var(--neutral-2); }
.border-neutral-3 { border-color: var(--neutral-3); }
.border-neutral-4 { border-color: var(--neutral-4); }
.border-neutral-5 { border-color: var(--neutral-5); }
.border-red-1     { border-color: var(--red-1); }
.border-red-2     { border-color: var(--red-2); }
.border-yellow    { border-color: var(--yellow); }

.bt {
    padding: 16px;
    border-radius: 16px;
    font-size: 16px;
    gap: 16px;
    font-weight: 500;
    line-height: 140%;
}
.bt-primary {
    background-color: var(--primary);
    color: var(--secondary);
}
.bt-secondary {
    background-color: var(--secondary);
    color: var(--primary);
}

.bg-gradient {
    background: var(--Efeito, radial-gradient(58.5% 46.31% at 50% 48.31%, var(--primary) 0%, var(--neutral-1) 100%));
}
/* Fim Variáveis */

/* Removendo scroll */
body, .custom-container-body {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Internet Explorer 10+ */
  overflow: auto;
}

body::-webkit-scrollbar, .custom-container-body::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, Edge */
}
/* Fim Removendo scroll */

/* teste */

.sticky-section {
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    z-index: 1;
}

.section-1 {
    background: #1a1a1a;
    z-index: 1;
}
.section-2 {
    background: #333;
    z-index: 2;
}
.section-3 {
    background: #555;
    z-index: 3;
}
.section-3 {
    background: #555;
    z-index: 3;
}
/* Fim teste */

.custom-container {
    width: 100%;
    max-width: calc(1648px - 80px);
    padding-right: 20px;
    padding-left: 20px;
    margin: 0 auto;
}
.card-with-gradient-stroke {
  border: 1px solid transparent;
  background: linear-gradient(var(--neutral-1), var(--neutral-1)) padding-box,
              linear-gradient(180deg, rgba(34, 36, 37, 0.20) 16.35%, rgba(127, 137, 139, 0.20) 100%) border-box;
}

[data-fade], [data-fade-seq] {
    opacity: 0;
    transform: translateY(5rem);
    transition: all 0.7s ease;
}
[data-fade].fade-in, .fade-in-seq {
    opacity: 1;
    transform: translateY(0);
}
.tab {
    color: var(--neutral-2);
    transition-duration: .3s;
}
.tab:hover {
    color: var(--secondary);
    opacity: 0.3;
    transition-duration: .3s;
}
.tab:checked {
    color: var(--secondary);
    transition-duration: .3ss;
}

/* Swiper style */
#depoiments-swiper .swiper-button-prev,
#depoiments-swiper .swiper-button-next {
    position: relative;
    background: transparent;
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    top: unset;
    bottom: unset;
    margin-top: unset;
    right: unset;
    left: unset;
}
#depoiments-swiper .swiper-button-prev:after,
#depoiments-swiper .swiper-button-next:after{
    display: none;
}
#depoiments-swiper .swiper-pagination {
    position: relative;
    width: fit-content;
    top: unset;
    bottom: unset;
    width: fit-content;
}
#depoiments-swiper .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    background-color: var(--neutral-2);
}
#depoiments-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--secondary);
}

/* Fim Swiper style */

.bg-message-chat {
    border-radius: 16px;
    background: var(--fundo, linear-gradient(136deg, rgba(239, 239, 239, 0.05) 16.25%, rgba(255, 255, 255, 0.05) 138.02%));
    color: var(--neutral-3);
    font-size: 14px;
    font-weight: 500;
    padding: 16px;
    max-width: 70%;
    word-break: break-word;
}
@media (min-width: 834px) {
    .bg-message-chat {
        font-size: 20px;
        font-weight: 500;
        padding: 32px;
    }
}
.bg-chat-shadow {
    width: 100%;
    height: 164px;
    background: linear-gradient(180deg, #152022 0%, rgba(21, 32, 34, 0.00) 78.91%);
}

/* teste tabs */
.custom-tab-bar {
    display: flex;
    width: 100%;
    gap: 8px;
}
.custom-tab {
    position: relative;
    padding: 16px 20px;
    border-radius: 16px;
    height: fit-content;
    background-color: #FFFFFF50;
    color: var(--neutral-2);
    flex: 1 1 0%;
    text-align: center;
    /* transition-duration: .3s; */
    z-index: 50;
}
.custom-tab:hover {
    background-color: #FFFFFF90;
    /* transition-duration: .3s; */
}
.custom-tab.active {
  /* padding-bottom: calc(16px + 8px); */
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    background-color: #FFFFFF;
    color: var(--primary);
    /* transition-duration: .3s; */
    z-index: 48;
}
.custom-tab.active::after,
.custom-tab.active::before {
    content: "";
    position: absolute;
    bottom: -8px;
    width: 48px;
    height: 48px;
    background: var(--neutral-4);
    /* background: #000000; */
    border-radius: 50%;
    z-index: 50;
}
.custom-tab.active::after {
    right: -48px;
}
.custom-tab.active::before {
    left: -48px;
}
.custom-tab.active:first-child::before {
  border-radius: 0;
}
.custom-tab.active:last-child::after {
  border-radius: 0;
}

.custom-tab-content {
    background-color: #FFF;
    padding: 20px;
    border-radius: 0 16px 16px 16px;
    margin-top: 8px;
}
/* quando tab 1 ativa (left-most) */
.custom-tab-content.tab-first {
  border-radius: 0 16px 16px 16px;
}

/* quando tab N (middle) ativa */
.custom-tab-content.tab-middle {
  border-radius: 16px;
}

/* quando tab last ativa (right-most) */
.custom-tab-content.tab-last {
  border-radius: 16px 0 16px 16px;
}

.content-panel {
  display: none;
}

.content-panel.active {
  display: block;
}
.custom-tab.active span {
    position: absolute;
    bottom: -8px;
    left: -24px;
    right: -24px;
    height: 24px;
    background: white;
}