html {
  scroll-behavior: smooth;
}
:root{
    --cor-principal:  #556B2F;
    --cor-secundaria: #EFF5D2;
    --cor-tres: #C6D870;
    --cor-quatro: #8fa31e;
    --cor-texto: #767474;
    --cor-texto-branco: #fff
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Open Sans' , sans-serif;
}
h1, h2, h3{
  font-family: 'Russo One', sans-serif;
  letter-spacing: 0.2rem;
}


.container{
    background-color: var(--cor-principal);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 4rem;
    padding-right: 4rem;
}

.nav-bar ul{
    display: flex;
    flex-direction:row;
    list-style: none;
    gap: 52px;
}

.nav-bar ul li a{
  color: var(--cor-texto-branco);
  text-decoration: none;  
  padding: 5px;
  border-radius: 5px;
  transition: color 0.3s ease;
  position: relative; 

}

.nav-bar ul li a::after {
    content: ''; 
    position: absolute;
    width: 100%;
    height: 2px; 
    background-color: var(--cor-secundaria); 
    
    bottom: 0;
    left: 0;
    
    transform: scaleX(0); 
    transform-origin: center; 
    transition: transform 0.3s ease-out; 
}


.nav-bar ul li a:hover::after {
    transform: scaleX(1);
}


.nav-bar ul li a:hover{
  color: var(--cor-secundaria); 
  cursor: pointer;
  padding: 5px;
  border-radius: 5%;
}


.button-contact {
  --arrow-width: 10px;
  --arrow-stroke: 2px;
  box-sizing: border-box;
  border: 0;
  border-radius: 20px;
  color: var(--cor-principal);
  padding: 1em 1.8em;
  background: var(--cor-texto-branco);
  display: flex;
  transition: 0.2s background;
  align-items: center;
  gap: 0.6em;
  font-weight: bold;
  text-decoration: none;

}

.button-contact .arrow-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-contact .arrow {
  margin-top: 1px;
  width: var(--arrow-width);
  background: var(--cor-texto-branco);
  height: var(--arrow-stroke);
  position: relative;
  transition: 0.2s;
}

.button-contact .arrow::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: solid var(--cor-principal);
  border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;
  display: inline-block;
  top: -3px;
  right: 3px;
  transition: 0.2s;
  padding: 3px;
  transform: rotate(-45deg);
}
.button-contact:hover {
  background-color: var(--cor-secundaria);
}
.button-contact:hover .arrow {
  background: var(--cor-principal);
}
.button-contact:hover .arrow:before {
  right: 0;
}



.home{
    min-height:  100vh;
    display: flex;
    justify-content: space-between;
}

.home-left{
    
    flex: 1;
    align-items: flex-start;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding-left: 4.5rem;
    
}

.home-left h1{
    color: var(--cor-principal);
    font-size: 3.55rem;
 
}

.home-left p{
    color: var(--cor-texto);
    font-size: 1.55rem;
    
    padding-top: 1.25rem;
    padding-bottom: 2.25rem;

}


.home-right{
    
    background-color: #fff;
    flex: 1;

}

.image-container {
  width: 100%; 
  height: 100%;
  background-image: url('/assets/imagefundohome2.png');
  background-size: cover;
  background-position: left;
 

  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

.home-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-button {
  width: 50%;
  border: 0;
  border-radius: 20px;
  color: var(--cor-texto-branco);
  padding: 1em 1.8em;
  background: var(--cor-principal);
  display: flex;
  transition: 0.2s background;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-decoration: none;

  transition: transform 0.3s ease, background-color 0.3s ease;
}

.home-button:hover {
  background-color: var(--cor-secundaria);
  color: var(--cor-principal);

  transform: translateY(-3px);
}

/*  animações */

@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.home-left h1,
.home-left p,
.home-left .home-button {
  animation: fadeInSlideUp 0.6s ease-out forwards;
  opacity: 0;
}


.home-left h1 {
  animation-delay: 0.2s;
}

.home-left p {
  animation-delay: 0.4s;
}

.home-left .home-button {
  animation-delay: 0.6s;
}



.about{
    padding: 2rem 4rem;
   
}
.about-title{
  text-align: center; 
  max-width: 800px;   
  margin: 0 auto;     
  padding-top: 2rem;
  margin-bottom: 2rem; 
}


.about h2{
    color: var(--cor-principal);
    font-size: 3.55rem;
    margin-bottom: 0.75rem;
}

.about h2::after{
  content: ''; 
  display: block; 
  width: 80px; 
  height: 3px; 
  background-color: var(--cor-secundaria); 
  margin: 1rem auto 0; 
  border-radius: 2px;
}

.about p{
    color: var(--cor-texto);
    font-size: 1.55rem;
    line-height: 1.6;
    
}

.about-cards{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding-top: 2rem;
    grid-auto-rows: 1fr;

}


.card{
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   background-color: var(--cor-secundaria);
   padding: 2rem;
   border-radius: 1rem;
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
   transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {

  transform: translateY(-10px);

  
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.card i {
  font-size: 2rem; 
  color: var(--cor-texto);
  margin-top: 0.25rem; 
}

.card h3{
    color: var(--cor-principal);
    font-size: 1.30rem;

    
}

.card p {
    color: var(--cor-texto);
    font-size: 1.25rem;
}



.services{
  padding: 2rem 4rem;
  
}


.services-title{
  color: var(--cor-principal);
  
  text-align: center;
  margin: 0 auto;     
  margin-bottom: 3.125rem; 
  font-size: 3.55rem;
  padding-top: 2rem;
  letter-spacing: 2px;
}

.services-options{
  display: flex; 
  gap: 50px;   
  padding: 20px;
  justify-content: space-around;
}

.options {
  flex-basis: 20rem;
  max-width: 25rem;
  background-color: var(--cor-texto-branco);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.10); 
  border-radius: 12px;
  text-align: center;
  overflow: hidden; 
  
  display: flex;
  flex-direction: column;
  
  border: 1.5px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease
}

.options:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.12);
    border-color: var(--cor-secundaria);
}




.card-image {
  height: 220px; 
  width: 100%;
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
}


.options h4 {
  color: var(--cor-principal);
  font-size: 1.8rem;
  font-family: 'Hanken Grotesk', sans-serif;  text-align: start;
  font-weight: 700;
  padding: 0 20px;
  padding-top: 20px;
  padding-bottom: 20px;

  min-height: 50px
}


.options p {
  text-align: justify;
  color: var(--cor-texto); 
  font-size: 1rem;
  line-height: 1.7; 
  padding: 0 20px;

  flex-grow: 1; 
}

.options a {
  display: block;
  background-color: var(--cor-principal); 
  color: var(--cor-texto-branco); 
  text-decoration: none; 
  font-weight: bold;
  font-size: 1rem;


  padding: 20px 20px;
  margin: 30px; 
  border-radius: 50px; 
  
  transition: background-color 0.3s ease, color 0.3s ease;
}


.options:hover {
    transform: none; 
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.20);
}

.options:hover a {
  
  background-color: var(--cor-secundaria); 
  color: var(--cor-principal);
}






.projects-section {
    background-color: var(--cor-principal);
    padding: 50px 0 50px 0; 
    text-align: center;
    color: var(--cor-texto-branco);
    width: 100%;
    min-height: 100vh; /* Usar min-height para evitar corte de conteúdo */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
}

.header-container {
    margin-bottom: 0px; 
    padding: 0 20px;
}

.header-container h2 {
    font-size: 3.55em; 
    margin-bottom: 10px; 
    text-transform: uppercase;
    font-weight: bold;
    color: var(--cor-secundaria);
}

.header-container p {
    max-width: 800px;
    margin: 0 auto 20px auto; 
    line-height: 1.6;
    font-size: 1.25em; 
    color: var(--cor-texto-branco);
    text-align: justify;
}

.gallery-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1800px; 
    margin: 0 auto;
    position: relative;
    flex-grow: 1;
}


.projects-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 20px 4vw; 
    box-sizing: border-box; 
}


.projects-grid {
    display: flex;
    transition: transform 0.5s ease-in-out;
    align-items: center; 
    gap: 20px; 
}

.project-item {
    position: relative;
    
    width: calc((100% - 40px) / 3);
    flex-shrink: 0; 
    height: 450px; 
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

.project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    color: #fff;
    padding: 40px 15px 40px 15px; 
    opacity: 0;
    transition: opacity 0.4s ease;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 8px;
    box-sizing: border-box; 
    display: flex;
    justify-content: center; 
    align-items: center;      
}

.project-item:hover {
    z-index: 10;
    transform: scale(1.2);
}

.project-item:hover .overlay {
    opacity: 1;
}

.arrow {
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    color: #4A5C36;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.arrow:hover {
    background-color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.left-arrow { left: 25px; }
.right-arrow { right: 25px; }



.feedback-section {
  padding: 3.125rem 1.25rem;
}

.feedback-title {
  color: var(--cor-principal);
  font-size: 3.55rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

.feedback-bubble-wrapper {
  max-width: 60rem; 
  margin: 0 auto 3.75rem auto;
  position: relative;
}

.feedback-bubble {
  background-color: var(--cor-secundaria);
  border-radius: 0.5rem;
  padding: 2.5rem; /* 40px */
  box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.08);
  position: relative; 
  min-height: 15rem;
}

.quote-icon {
  font-size: 3.5rem;
  color: var(--cor-principal);
  position: absolute;
  top: 1.25rem;
  left: 1.875rem;
  line-height: 1;
}

.feedback-text {
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: justify;
  color: var(--cor-texto);
  margin: 0;
  padding-left: 3rem; 
}

.bubble-tail {
  position: absolute;
  bottom: -0.625rem; 
  width: 1.25rem; 
  height: 1.25rem; 
  background-color: var(--cor-secundaria);
  transform: rotate(45deg);
  border-radius: 0 0.125rem 0 0;
  transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}

.feedback-persons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem; 
}

.person-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}


.person-item.active {
  opacity: 1;
}

.person-item img {
  width: 4rem; 
  height: 4rem; 
  border-radius: 50%;
  border: 0.15rem solid transparent;
  transition: border-color 0.3s ease;
  flex-shrink: 0;
  object-fit: cover; 

}

#person-1 img{
  object-position: 45% 60%; /* Centraliza na horizontal, e foca em 25% a partir do topo */
}
#person-2 img{
  object-position: 55% 60%; /* Centraliza na horizontal, e foca em 25% a partir do topo */
}

.person-item.active img {
  border-color: var(--cor-principal);
}

.person-details {
  display: none; 
  text-align: left;
  margin-left: 1rem;
}

.person-item.active .person-details {
  display: block;
}

.person-name {
  font-weight: 700;
  color: var(--cor-principal);
}

.person-home {
  font-size: 0.9375rem;
  color: var(--cor-texto);
}




.contact {
  
    background-color: var(--cor-texto-branco); /* Um fundo levemente cinza para a seção toda */
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-container {
    max-width: 1100px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 30px; 
    align-items: stretch; 

}


.contact-title {
    width: 100%; 
    text-align: center;
    margin-bottom: 2rem;
}

.contact-title h2 {
    font-size: 3.5rem;
    color: var(--cor-principal);
   
}

.contact-title p {
    font-size: 1.55rem;
    color: var(--cor-texto);
    line-height: 1;
}


.contact-esquerda {
    flex: 1; 
    min-width: 300px; 

}

.contact-esquerda form {
    height: 100%; 
    display: flex;
    flex-direction: column;

    
    
}

.campo-form {
    position: relative; 
    margin-bottom: 20px; 
}

.contact-esquerda input{
   height: 4rem;
}
.contact-esquerda input,
.contact-esquerda textarea {
    width: 100%;
    padding:30px 15px 15px; 
    border: none;
    background-color: var(--cor-secundaria); /* Sua cor de fundo verde-claro */
    border-radius: 15px;
    font-size: 1rem;
    font-weight: bold;
    color: var(--cor-texto);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    resize: none;
}

.contact-esquerda input:focus,
.contact-esquerda textarea:focus {
    outline: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--cor-principal);
    color: black;
    font-weight:lighter;
}


.campo-form label {
    position: absolute; 
    left: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: var(--cor-texto);
    background-color: transparent; 
    padding: 0 5px;
    transition: all 0.2s ease-in-out; 
    pointer-events: none; 
}


.contact-esquerda input:focus + label,
.contact-esquerda input:not(:placeholder-shown) + label,
.contact-esquerda textarea:focus + label,
.contact-esquerda textarea:not(:placeholder-shown) + label {
    top: 0; 
    transform: translateY(-50%); 
    font-size: 1rem; 
    color: var(--cor-principal);
    font-weight: bold;
    background-color: transparent 
}


/* Estilo do Botão */
.contact-esquerda button {
    width: 100%;
    padding: 15px;
    border: none;
    background-color: var(--cor-principal); 
    color: var(--cor-texto-branco);
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
  
}

.contact-esquerda button:hover {
    background-color: #4a5734; 
    transform: translateY(-2px); 
}


.contact-right {
    background-color: var(--cor-secundaria);
    border-radius: 15px;
    padding: 40px; 

    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); 
}


.contact-right h2 {
    text-align: left; /* Garante o alinhamento à esquerda */
    font-size: 1.8rem;
    color: var(--cor-principal);
    margin-bottom: 35px; 
}

.contato-item {
    display: flex;
    align-items: center; 
    margin-bottom: 30px; 
}

.contato-item .icone {
    font-size: 28px;
    color: var(--cor-principal); 
    margin-right: 20px; 
    min-width: 30px; 
}

.texto-contato {
    line-height: 1.4; 
    margin: 0;
    color: var(--cor-texto);
    font-size: 0.9em;
    margin-bottom: 4px;
}

.titulo-contato {
    margin: 0;
    font-weight: bold;
    color: var(--cor-principal);
    font-size: 1rem;
    margin-bottom: 4px;
}


.texto-contato a {
    text-decoration: none;
    color:var(--cor-texto);
    font-size: 1rem;
    font-weight: 550;
}


.redes-sociais {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 5rem;
}

.redes-sociais h3 {
    color: var(--cor-principal);
    font-size: 1.25rem;
}

.icones-sociais {
    display: flex;
    
}

.social-icon {

    width: 35px;
    height: 35px;
    display: block;

  
    background-color: var(--cor-texto); 

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

   
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.social-icon:hover {
    background-color: var(--cor-principal); /* Sua cor verde principal */
    transform: scale(1.1);
}




.instagram-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3e%3cpath d='M320.3 205C256.8 204.8 205.2 256.2 205 319.7C204.8 383.2 256.2 434.8 319.7 435C383.2 435.2 434.8 383.8 435 320.3C435.2 256.8 383.8 205.2 320.3 205zM319.7 245.4C360.9 245.2 394.4 278.5 394.6 319.7C394.8 360.9 361.5 394.4 320.3 394.6C279.1 394.8 245.6 361.5 245.4 320.3C245.2 279.1 278.5 245.6 319.7 245.4zM413.1 200.3C413.1 185.5 425.1 173.5 439.9 173.5C454.7 173.5 466.7 185.5 466.7 200.3C466.7 215.1 454.7 227.1 439.9 227.1C425.1 227.1 413.1 215.1 413.1 200.3zM542.8 227.5C541.1 191.6 532.9 159.8 506.6 133.6C480.4 107.4 448.6 99.2 412.7 97.4C375.7 95.3 264.8 95.3 227.8 97.4C192 99.1 160.2 107.3 133.9 133.5C107.6 159.7 99.5 191.5 97.7 227.4C95.6 264.4 95.6 375.3 97.7 412.3C99.4 448.2 107.6 480 133.9 506.2C160.2 532.4 191.9 540.6 227.8 542.4C264.8 544.5 375.7 544.5 412.7 542.4C448.6 540.7 480.4 532.5 506.6 506.2C532.8 480 541 448.2 542.8 412.3C544.9 375.3 544.9 264.5 542.8 227.5zM495 452C487.2 471.6 472.1 486.7 452.4 494.6C422.9 506.3 352.9 503.6 320.3 503.6C287.7 503.6 217.6 506.2 188.2 494.6C168.6 486.8 153.5 471.7 145.6 452C133.9 422.5 136.6 352.5 136.6 319.9C136.6 287.3 134 217.2 145.6 187.8C153.4 168.2 168.5 153.1 188.2 145.2C217.7 133.5 287.7 136.2 320.3 136.2C352.9 136.2 423 133.6 452.4 145.2C472 153 487.1 168.1 495 187.8C506.7 217.3 504 287.3 504 319.9C504 352.5 506.7 422.6 495 452z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3e%3cpath d='M320.3 205C256.8 204.8 205.2 256.2 205 319.7C204.8 383.2 256.2 434.8 319.7 435C383.2 435.2 434.8 383.8 435 320.3C435.2 256.8 383.8 205.2 320.3 205zM319.7 245.4C360.9 245.2 394.4 278.5 394.6 319.7C394.8 360.9 361.5 394.4 320.3 394.6C279.1 394.8 245.6 361.5 245.4 320.3C245.2 279.1 278.5 245.6 319.7 245.4zM413.1 200.3C413.1 185.5 425.1 173.5 439.9 173.5C454.7 173.5 466.7 185.5 466.7 200.3C466.7 215.1 454.7 227.1 439.9 227.1C425.1 227.1 413.1 215.1 413.1 200.3zM542.8 227.5C541.1 191.6 532.9 159.8 506.6 133.6C480.4 107.4 448.6 99.2 412.7 97.4C375.7 95.3 264.8 95.3 227.8 97.4C192 99.1 160.2 107.3 133.9 133.5C107.6 159.7 99.5 191.5 97.7 227.4C95.6 264.4 95.6 375.3 97.7 412.3C99.4 448.2 107.6 480 133.9 506.2C160.2 532.4 191.9 540.6 227.8 542.4C264.8 544.5 375.7 544.5 412.7 542.4C448.6 540.7 480.4 532.5 506.6 506.2C532.8 480 541 448.2 542.8 412.3C544.9 375.3 544.9 264.5 542.8 227.5zM495 452C487.2 471.6 472.1 486.7 452.4 494.6C422.9 506.3 352.9 503.6 320.3 503.6C287.7 503.6 217.6 506.2 188.2 494.6C168.6 486.8 153.5 471.7 145.6 452C133.9 422.5 136.6 352.5 136.6 319.9C136.6 287.3 134 217.2 145.6 187.8C153.4 168.2 168.5 153.1 188.2 145.2C217.7 133.5 287.7 136.2 320.3 136.2C352.9 136.2 423 133.6 452.4 145.2C472 153 487.1 168.1 495 187.8C506.7 217.3 504 287.3 504 319.9C504 352.5 506.7 422.6 495 452z'/%3e%3c/svg%3e");
}

.whatsapp-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3e%3cpath d='M476.9 161.1C435 119.1 379.2 96 319.9 96C197.5 96 97.9 195.6 97.9 318C97.9 357.1 108.1 395.3 127.5 429L96 544L213.7 513.1C246.1 530.8 282.6 540.1 319.8 540.1L319.9 540.1C442.2 540.1 544 440.5 544 318.1C544 258.8 518.8 203.1 476.9 161.1zM319.9 502.7C286.7 502.7 254.2 493.8 225.9 477L219.2 473L149.4 491.3L168 423.2L163.6 416.2C145.1 386.8 135.4 352.9 135.4 318C135.4 216.3 218.2 133.5 320 133.5C369.3 133.5 415.6 152.7 450.4 187.6C485.2 222.5 506.6 268.8 506.5 318.1C506.5 419.9 421.6 502.7 319.9 502.7zM421.1 364.5C415.6 361.7 388.3 348.3 383.2 346.5C378.1 344.6 374.4 343.7 370.7 349.3C367 354.9 356.4 367.3 353.1 371.1C349.9 374.8 346.6 375.3 341.1 372.5C308.5 356.2 287.1 343.4 265.6 306.5C259.9 296.7 271.3 297.4 281.9 276.2C283.7 272.5 282.8 269.3 281.4 266.5C280 263.7 268.9 236.4 264.3 225.3C259.8 214.5 255.2 216 251.8 215.8C248.6 215.6 244.9 215.6 241.2 215.6C237.5 215.6 231.5 217 226.4 222.5C221.3 228.1 207 241.5 207 268.8C207 296.1 226.9 322.5 229.6 326.2C232.4 329.9 268.7 385.9 324.4 410C359.6 425.2 373.4 426.5 391 423.9C401.7 422.3 423.8 410.5 428.4 397.5C433 384.5 433 373.4 431.6 371.1C430.3 368.6 426.6 367.2 421.1 364.5z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3e%3cpath d='M476.9 161.1C435 119.1 379.2 96 319.9 96C197.5 96 97.9 195.6 97.9 318C97.9 357.1 108.1 395.3 127.5 429L96 544L213.7 513.1C246.1 530.8 282.6 540.1 319.8 540.1L319.9 540.1C442.2 540.1 544 440.5 544 318.1C544 258.8 518.8 203.1 476.9 161.1zM319.9 502.7C286.7 502.7 254.2 493.8 225.9 477L219.2 473L149.4 491.3L168 423.2L163.6 416.2C145.1 386.8 135.4 352.9 135.4 318C135.4 216.3 218.2 133.5 320 133.5C369.3 133.5 415.6 152.7 450.4 187.6C485.2 222.5 506.6 268.8 506.5 318.1C506.5 419.9 421.6 502.7 319.9 502.7zM421.1 364.5C415.6 361.7 388.3 348.3 383.2 346.5C378.1 344.6 374.4 343.7 370.7 349.3C367 354.9 356.4 367.3 353.1 371.1C349.9 374.8 346.6 375.3 341.1 372.5C308.5 356.2 287.1 343.4 265.6 306.5C259.9 296.7 271.3 297.4 281.9 276.2C283.7 272.5 282.8 269.3 281.4 266.5C280 263.7 268.9 236.4 264.3 225.3C259.8 214.5 255.2 216 251.8 215.8C248.6 215.6 244.9 215.6 241.2 215.6C237.5 215.6 231.5 217 226.4 222.5C221.3 228.1 207 241.5 207 268.8C207 296.1 226.9 322.5 229.6 326.2C232.4 329.9 268.7 385.9 324.4 410C359.6 425.2 373.4 426.5 391 423.9C401.7 422.3 423.8 410.5 428.4 397.5C433 384.5 433 373.4 431.6 371.1C430.3 368.6 426.6 367.2 421.1 364.5z'/%3e%3c/svg%3e");
}

.site-footer {
    background-color: var(--cor-principal); /* Seu tom de verde principal */
    color: var(--cor-texto-branco); /* Cor do texto, um branco suave */
    padding: 40px 20px;

}

.footer-container {
    max-width: 1100px;
    margin: 0 auto; /* Centraliza o conteúdo na página */
}

/* --- Seção de Cima (Logo e Navegação) --- */
.footer-top {
    display: flex;
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center;    /* Alinha os itens verticalmente */
    padding-bottom: 30px;
    margin-bottom: 30px;
    /* Linha sutil para separar as seções */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-logo img {
    height: 80px; /* Ajuste a altura do logo conforme necessário */
}

.footer-divider {
    width: 1px; /* Espessura da linha */
    height: 100px; /* Altura da linha */
    background-color: rgba(255, 255, 255, 0.3);
    margin: 0 50px; /* Espaçamento nas laterais do divisor */
}

/* --- Navegação do Rodapé --- */
.footer-nav ul {
    list-style: none; /* Remove as bolinhas da lista */
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: 10px; /* Espaço entre os links */
}

.footer-nav a {
    color: var(--cor-texto-branco);
    text-decoration: none; /* Remove o sublinhado */
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--cor-texto-branco); /* Um branco mais vivo ao passar o mouse */
}

/* --- Seção de Baixo (Copyright) --- */
.footer-bottom {
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7); /* Cor um pouco mais suave para o copyright */
}

/* --- Responsividade para Telas Pequenas (Celulares) --- */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column; /* Empilha os itens verticalmente */
        border-bottom: none; /* Remove a borda no mobile */
    }

    .footer-divider {
        display: none; /* Esconde o divisor vertical */
    }

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

    .footer-nav {
        text-align: center; /* Centraliza os links de navegação */
        margin-bottom: 30px;
        padding-bottom: 30px;
        width: 100%;
        /* Adiciona a borda aqui para separar do copyright no mobile */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
}












@media (max-width: 768px) {
    .contact-container {
        flex-direction: column; 
    }

    .contact-title h2 {
        font-size: 1.8rem;
    }
}