/* FONTES */
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap);
body,
html {
  overflow-x: hidden;
  width: 100%;
  font-family: "Roboto", sans-serif;
}
.layout-wrapper {
  margin-top: 60px;
}

/* HEADER NAVBAR */
.navbar {
  font-family: "Poppins", sans-serif;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.08);
}

.container {
  max-width: 1400px;
}

.navbar-toggler {
  border: none;
  background: transparent;
}

.navbar-nav .nav-link {
  color: #495057;
  font-size: 16px;
  font-weight: 400;
  padding: 14px !important;
  transition: all 0.3s ease-in-out;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
  color: #bf9999;
}

.btn.btn-primary {
  background-color: #bf9999;
  border: none;
  font-size: 0.8125rem;
  font-weight: 400;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: #ac8484;
}

/* section 0 - boas vindas */

.new-section-container {
  padding: 0px;
  background-color: #fff; /* Example: use a clean background */
  border: 1px solid #e0e0e0; /* Borda sutil */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
/* New Section Styling */
.new-section-template {
  height: 500px; /* Fixed height for the entire section */
  overflow: hidden; /* Ensures content doesn't spill over */
}

/* Styles for the text container */
.new-section-template .text-container {
  padding-left: 2rem;
  padding-right: 2rem;
}

.btn-custom {
  background-color: #e5e1d8;
  border: 1px solid #e5e1d8;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.btn-custom:hover {
  background-color: #cecbc6;
  border: 1px solid #cecbc6;
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
  .new-section-template {
    height: auto; /* Height becomes automatic on mobile for better usability */
  }
}

/* SECTION 1 - CARROSSEL */
.carousel-section {
  background-color: #e5e1d8;
  border: 1px solid #e0e0e0; /* Borda sutil */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.carousel-content {
  padding-right: 50px;
}
.carousel-illustration img {
  max-height: 450px; /* Define a altura máxima da imagem */
  width: auto; /* Garante que a largura se ajuste proporcionalmente */
}
.carousel-indicators [data-bs-target] {
  background-color: #ac8484;
}
/* Para garantir a responsividade em telas menores */
@media (max-width: 768px) {
  .carousel-illustration img {
    max-height: 250px; /* Reduz a altura máxima em telas pequenas */
  }
}
/* SECTION 1 - CARROSSEL */

/* SECTION 2 - SERVIÇOS */
.service-section {
  background-color: #f8f9fa; /* Um cinza bem claro para o fundo da seção */
}

.service-card {
  min-height: 260px; /* Define a altura mínima de 260px */
  background-color: #ffffff; /* Fundo branco para os cards */
  border: 1px solid #e0e0e0; /* Borda sutil */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.service-card:hover {
  transform: translateY(-5px); /* Efeito de "subir" no hover */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Sombra mais forte no hover */
}

/* Estilo para os ícones */
.service-icon {
  width: 60px; /* Tamanho do ícone */
  height: 60px;
}

/* Cores do texto */
.service-card h3 {
  color: #495057; /* Cor do texto do título */
}

.service-card p {
  color: #868e96; /* Cor do texto da descrição */
}
.text-icon-card {
  color: #8eaba9 !important;
}
/* SECTION 2 - FIM */
/* SECTION 3 - BPO */
.text-bpo {
  color: #ac8484;
}

/* Estilo para o botão verde */
.btn-custom-green {
  background-color: #8eaba9;
  border-color: #8eaba9;
  color: #fff;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-custom-green:hover {
  background-color: #7f9997;
  border-color: #7f9997;
  color: #fff;
}
.service-card-bpo {
  min-height: 300px; /* Define a altura mínima de 260px */
  background-color: #ffffff; /* Fundo branco para os cards */
  border: 1px solid #e0e0e0; /* Borda sutil */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
/* section 4
 */
.bpo-features-section .row {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
/* SECTION 5 - CTA */
.cta-card {
  background-color: #e5e1d8; /* Fundo branco do card */
  border: 1px solid #e0e0e0;
  padding: 3rem; /* Espaçamento interno */
}

.btn-cta {
  background-color: #8eaba9; /* Cor do botão, pode usar a do seu header */
  border-color: #8eaba9;
  color: #ffffff;
  padding: 1rem 2.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.btn-cta:hover {
  background-color: #176a73;
  border-color: #176a73;
}
/* FOOTER */
#main-footer {
  background-color: #ac8484;
}
#main-footer a {
  transition: color 0.3s ease;
}

#main-footer a:hover {
  color: #ac8484;
}

.social-icon-circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d8d8d8;
  border-radius: 50%;
  color: #d8d8d8;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.social-icon-circle:hover {
  background-color: #c7a6a6;
  border-color: #c7a6a6;
}

.social-icon-circle i {
  font-size: 1.1rem;
  /* Adicionando um pequeno ajuste negativo para centralizar */
  margin-left: -2px;
}
.text-footer {
  text-decoration: none !important;
  color: #bf9999;
}
.text-footer-title {
  color: #d8d8d8 !important;
  font-weight: 400;
}
@media (max-width: 767.98px) {
  .text-center.text-md-start {
    text-align: center !important;
  }
}
.text-footer-small {
  font-size: 0.85rem;
  color: #d8d8d8 !important;
}

/* CONTACT SECTION */

/* Título e subtítulo */
.contact-title {
  color: #bf9999; /* Laranja da imagem */
}

/* Card principal */
.contact-card {
  background-color: #fff;
  border: none;
  border-radius: 3rem; /* Borda arredondada do card */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Garante que as bordas arredondadas internas funcionem */
}

/* Lado esquerdo do card (Informações de contato) */
.contact-info-card {
  background-color: #8eaba9; /* Azul escuro da imagem */
  border-radius: 3rem 0 0 3rem; /* Borda arredondada só no canto esquerdo */
  color: #fff;
  position: relative;
  z-index: 1; /* Garante que o conteúdo fique por cima do background */
}

/* Opcional: Adiciona um gradiente ou forma sutil para o fundo do div preto */
.contact-info-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Substituído por um gradiente sutil para evitar problemas de SVG data-uri */
  background: radial-gradient(
      circle at 10% 80%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 40%
    );
  opacity: 1; /* Aumenta a opacidade para garantir visibilidade */
  z-index: -1; /* Fica atrás do conteúdo do card */
  border-radius: inherit; /* Herda o border-radius para não sair do div */
}

.contact-info-card .contact-icon {
  font-size: 1.2rem;
}

.contact-info-card .social-icons a {
  color: #fff;
  font-size: 1.5rem;
  transition: color 0.3s;
}

.contact-info-card .social-icons a:hover {
  color: #bf9999;
}

/* Estilos do formulário */
.contact-form-control {
  border: 1px solid #ced4da;
  border-radius: 1;
  box-shadow: none !important;
}

.contact-form-control:focus {
  border-color: #8eaba9;
}

.form-check-input {
  border-color: #ced4da;
}

.form-check-input:checked {
  background-color: #8eaba9;
  border-color: #8eaba9;
}

/* Botão de envio */
.contact-btn {
  background-color: #121f37;
  color: #fff;
  border-radius: 2rem;
  padding: 0.75rem 2.5rem;
  transition: background-color 0.3s;
  /* Adiciona margem à direita para separar do ícone */
  margin-right: 15px;
}

.contact-btn:hover {
  background-color: #1a2c4e;
  color: #fff;
}

/* Ícone do avião de papel */
.paper-plane-icon {
  font-size: 1.8rem; /* Tamanho do ícone */
  color: #ced4da; /* Cor cinza claro, como na imagem original */
  transform: rotate(45deg); /* Rotaciona para imitar um avião de papel */
  position: absolute; /* Posição absoluta para o alinhamento */
  right: 15px; /* Ajusta a posição à direita */
  bottom: 1rem; /* Alinha com a parte inferior do botão */
  line-height: 1; /* Garante que o ícone não adicione altura extra */
}

/* Media Queries para ajustar o layout em telas menores */
@media (max-width: 991.98px) {
  .contact-info-card {
    border-radius: 3rem 3rem 0 0 !important;
  }
}

/* SERVICES */
thead th {
  background-color: #e5e1d8 !important;
  color: #000 !important;
  text-align: left;
  vertical-align: middle;
}

.btn-toggle {
  background: none;
  border: none;
  float: right;
  color: #8eaba9;
  font-size: 1.2rem;
  padding: 0;
}

.btn-toggle:focus {
  outline: none;
  box-shadow: none;
}
.toggle-icon {
  cursor: pointer;
  margin-left: 8px;
  font-size: 1rem;
}
.btn-toggle .bi {
  transition: transform 0.3s ease;
}

.btn-toggle.collapsed .bi {
  transform: rotate(-90deg);
}

.collapse-row td {
  background-color: #f9f9f9;
}
.cm-table {
  border: 1px solid #1f818c;
}