:root {
    --primary-color: #BFE2F7;
    --secondary-color: #FF8A8C;
    --third-color: #C2D986;
    --fourth-color: #FFEAA9;
    --orange-color: #FFAE6C;
    --brown-color: #C0936C;
    --primary-color-background: #c2d98636;
    --secondary-color-background: #C2D98627;
    --third-color-background: #c2d98696;
    --fourth-color-background: #BFE2F727;

}

.card{
    border: none;
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Comfortaa", serif;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, table, th, td, figure, figcaption, blockquote, pre, form, fieldset, legend, input, textarea, button {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Comfortaa", serif;
    line-height: 1.6;
    color: #333;/* Adiciona espaço para compensar a Navbar fixa */
    overflow-x: hidden;
    padding-top: 70px; /* Ajuste este valor conforme a altura da sua navbar */

}

/* Navbar */
.navbar {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1030;
    background-color: #fff;
    background-repeat: no-repeat;
    padding: 1rem;
}

.navbar-brand {
    font-weight: bold;
    color: #007bff !important;
}

.navbar-nav .nav-link {
    color: #555 !important;
}

.navbar-nav .nav-link:hover {
    color: #007bff !important;
    text-decoration: underline;
}

/* Footer */
footer {
    background-color: #f8f9fa;
    color: #555;
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid #ddd;
}

footer p {
    margin: 0;
    font-size: 0.9rem;
}

/* Botões */
.btn-primary {
    background-color: #007bff;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #0056b3;
}

h1, h2, h3 {
    color: #333;
}

/* Formulários */
input, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input:focus, textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Imagens */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

#first-logo {
    width: 8%;
    height: 8%;
    background-color: #0000003b;
    border-radius: 10%;
    padding: 1%;
}

/* Classes personalizadas */
.text-center {
    text-align: center;
}


/* Botões Fixos no Canto Inferior Direito */
.fixed-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    z-index: 9999;
}

.fixed-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    padding: 10px;
    font-size: 23px;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.fixed-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}


/* Seção de Funcionários */
.team-section {
    background-color: #f8f9fa;
    padding-bottom: 3%;
    padding-top: 5%;

    @media (min-width: 768px) {
        padding-top: 1%;
    }
}

.team-section h2 {
    font-size: 2.5rem;
    color: #333;
}

.team-section .card {
    border-radius: 20px;
}


/* Estilo para as imagens */
.team-section .card-img-top {
    height: 250px; /* Altura fixa para todas as imagens */
    object-fit: cover; /* Mantém a proporção e centraliza o conteúdo */
    width: 100%; 
    border-radius: 15px;
}


/* Seção de Localização */
#localizacao {
    background-color: #f8f9fa;
}

#localizacao h2 {
    font-size: 2rem;
    color: #333;
}

#localizacao p {
    font-size: 1rem;
    color: #666;
}

#map {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Seção Fale Conosco */
#fale-conosco {
    background-color: #f8f9fa;
}

#fale-conosco h2 {
    font-size: 2rem;
    color: #333;
}

#fale-conosco p {
    font-size: 1rem;
    color: #666;
}

#fale-conosco .btn {
    width: 180px;
    padding: 10px;
    font-size: 1.2rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#fale-conosco .btn i {
    font-size: 1.5rem;
}

#fale-conosco .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Navbar fixa */
.navbar {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1030;
}

/* Seção de Serviços */
#servicos {
    background-color: #f8f9fa;
}

#servicos h2 {
    font-size: 2.5rem;
    color: #333;
}

#servicos .service-card {
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    border-radius: 15px;
}


#servicos .service-card i {
    transition: color 0.3s ease;
}

#servicos p {
    font-size: 0.9rem;
    color: #666;
}

#sobre-nos {
    position: relative;
    overflow: hidden;
    padding: 10vh 0;
    background-color: white;
}
.sobre-nos{
    padding-top: 2rem;
    margin-top: 0;
}

#sobre-nos .container {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    padding: 10vh;
    background-color: var(--third-color-background);
}

@media (max-width: 768px) {
    #sobre-nos .container {
        padding: 5vh;
    }
}

.wave {
    display: block;
    width: 100%;
    height: auto;
    position: static;
    bottom: 0;
    left: 0;
    background-color: #f8f9fa;
}

.sobre-nos p{
    margin-bottom:0;
}

#banner-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 400px;
    background-color: var(--third-color);
}

#banner-section::before,
#banner-section::after {
    content: '';
    position: absolute;
    background-color: #c2d9863f; /* Ajuste a cor conforme necessário */
    border-radius: 50%;
    z-index: 0;
}

#banner-section::before {
    width: 200px; /* Ajuste o tamanho conforme necessário */
    height: 200px; /* Ajuste o tamanho conforme necessário */
    top: -100px;
    left: -100px;
}

#banner-section::after {
    width: 500px; /* Ajuste o tamanho conforme necessário */
    height: 500px; /* Ajuste o tamanho conforme necessário */
    top: -300px;
    left: 55%;
    transform: translateX(-50%);
}
#banner-section .overlay {
    position: relative;
    z-index: 1;
    padding: 20px;
}

#banner-section h1 {
    font-size: 2.5rem;
    font-weight: 900;
    color: #333;
}

#banner-section h2 {
    font-size: 1.5rem;
    color: #666;
}

.carousel-item img {
    height: 500px; /* Defina a altura desejada */
    object-fit: contain; /* Para garantir que a imagem cubra toda a área */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #007bff; /* Substitua pelo código da sua cor primária */
    border-radius: 50%;
    padding: 10px;
}

.carousel-control-prev-icon {
    background-image: none; /* Remove o ícone padrão */
}

.carousel-control-next-icon {
    background-image: none; /* Remove o ícone padrão */
}

.carousel-control-prev-icon::after {
    content: '\f053'; /* Código do ícone de seta para a esquerda do Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: white;
}

.carousel-control-next-icon::after {
    content: '\f054'; /* Código do ícone de seta para a direita do Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: white;
}

#diferenciais{
    width: 100%;
    background-color: #ffc4c5;
    padding-top: 2%;
    border-top: 1px solid var(--secondary-color);
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);

}
#objetivo{
    width: 100%;
    background-color: #ffc4c5;
}

#diferenciais h3{
    color: #333;
    font-size: 2rem;
    text-align: center;
    padding: 2rem 0;
}

.objetivos{
    margin-top: 2%;
}

#banner {
    background-color: #f8f9fa;
    border-bottom: 2px solid var(--third-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 50px 0;
}

.banner-title {
    font-size: 2rem;
    font-weight: bold;
}

.banner-subtitle {
    font-size: 1.25rem;
    color: #6c757d;
}

.img-fluid {
    max-width: 100%;
    height: auto;
    object-fit: cover; /* Adicione esta linha */
}

.image-container {
    position: relative;
}

.main-image {
    border-radius: 50%;
    position: relative;
    z-index: 1;
    width: 50vh; /* Adicione esta linha */
    height: 100%; /* Adicione esta linha */
}


.image-container::before,
.image-container::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}

.image-container::before {
    width: 100px; /* Ajuste o tamanho conforme necessário */
    height: 100px; /* Ajuste o tamanho conforme necessário */
    top: 0%;
    left: 10%;
    background-color: var(--primary-color);
}

.image-container::after {
    width: 150px; /* Ajuste o tamanho conforme necessário */
    height: 150px; /* Ajuste o tamanho conforme necessário */
    top: 30%;
    right: -3%;
    background-color: var(--secondary-color);
}

.accordion {
    max-width: 600px; /* Ajuste o tamanho conforme necessário */
    margin: 0 auto; /* Centraliza o acordeão */
}
.accordion-button {
    background-color: transparent; /* Fundo transparente */
    color: var(--text-muted); /* Texto cinza */
    border-bottom: 1px solid var(--secondary-color); /* Borda verde */
}
.accordion-button:not(.collapsed) {
    background-color: transparent; /* Fundo transparente */
    border-bottom: 1px solid var(--secondary-color); /* Borda verde */
}

.accordion-button:focus {
    box-shadow: none; /* Remove a sombra ao focar */
}

.accordion-item{
    background-color: transparent;
    border: none;
}


.card-flip > div {
    backface-visibility: hidden;
    transition: transform 300ms;
    transition-timing-function: linear;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
  }
  
  .card-front {
    transform: rotateY(0deg);
  }
  
  .card-back {
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
  }
  
  .card-flip:hover .card-front {
    transform: rotateY(-180deg);
  }
    
  .card-flip:hover .card-back {
    transform: rotateY(0deg);
  }

  .card-body-front{
    color: #333;
  }

 .card-body-front{
      /* Adicione seus estilos aqui */
      background-color: #fff;
      color: #343a40;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    border-radius: 15px;
  }

  .btn-outline-secondary{
    color: #333;;
    border-color: #333;;
  }

  .card-body-back {
    display: flex;
    background-color: var(--secondary-color);
    justify-content: center;
    font-size: 1.2rem;
    align-items: center;
    border-radius: 15px;
    height: 100%; /* Certifique-se de que o elemento pai tenha uma altura definida */
}

.card-body-front .btn {
    align-self: center;
}

.service-card i {
    color: var(--secondary-color); /* Cor primária */
}

.carousel-control-prev, .carousel-control-next {
    width: 5%;
}
.carousel-item img {
    border-radius: 15px;
}
@media (max-width: 768px) {
    .carousel-control-prev, .carousel-control-next {
        display: none;
    }
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: var(--secondary-color);
    padding: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#galeria{
    margin-bottom: 3rem;
}

.fixed-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

/* WhatsApp flutuante - redondo */
.fixed-buttons{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.fixed-buttons a.btn{
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  border-radius: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.25) !important;
}

.fixed-buttons a.btn i{
  font-size: 28px !important;
  margin: 0 !important;
}

.fixed-buttons a.btn:hover{
  transform: scale(1.08);
}