/* VARIAVEIS */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css');
:root {
    --cor-primaria: #FAFAFA;
    --cor-secundaria: #FFE166;
    --cor-terciaria: #334e3f;
    --cor-texto: rgba(2,180,96);
    --cor-branca: #FFFFFF;
    --cor-extra: #969F9E;}
:root {
    --fonte-primaria: 'Anton', sans-serif;
    --fonte-secundaria: "DM Sans", sans-serif;}
/*
  /$$$$$$                /$$$$$$$  					                              /$$$$$$           
 /$$__  $$              | $$__  $$      				                         /$$__  $$ 
| $$  \__/ /$$  /$$$$$$ | $$  \ $$ /$$$$$$  /$$    /$$ /$$$$$$   /$$$$$$ | $$  \__/
|  $$$$$$ |__/ /$$__  $$| $$$$$$$//$$__  $$|  $$  /$$//$$__  $$ |____  $$|  $$$$$$
 \____  $$ /$$| $$  \__/| $$____/| $$  \ $$ \  $$/$$/| $$  \ $$  /$$$$$$$ \____  $$
 /$$  \ $$| $$| $$      | $$     | $$  | $$  \  $$$/ | $$  | $$ /$$__  $$ \____  $$
|  $$$$$$/| $$| $$      | $$     |  $$$$$$/   \  $/  |  $$$$$$/|  $$$$$$$|  $$$$$$/
 \______/ | $$|__/      |__/      \______/     \_/    \______/  \_______/ \______/ 
     /$$  | $$                                                                     
    |  $$$$$$/                                                                     
     \______/                                                                      
*/
/* RESET-GERAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;}
a {
    text-decoration: none;}
ul {
    list-style-type: none;}
body {
    font-size: 16px;
    font-family: var(--fonte-primaria);
    line-height: 1.6;
    background-color: var(--cor-branca);
    color: #333;}
.container {
    margin: 0 auto;}
button {
    font-family: var(--fonte-primaria), sans-serif;
    margin: 10px;}
/* ANIMATION - SCROLL EFFECTS */
#quem-somos .container .content .equipe {animation: imgEquipe;animation-timeline: view(auto auto);}
@Keyframes imgEquipe {
    0% {
        opacity: 0;
        filter: blur(30px);
        transform: translateY(300px);}
    40%,
    60% {
        opacity: 1;
        filter: blur(0px);
        transform: translateX(0px);}
    100% {
        opacity: 0;
        filter: blur(0px);
        transform: translateY(-300px);}}
#quem-somos .content .coluna p {animation: colunaP;animation-timeline: view(auto auto);}
@Keyframes colunaP {
    0% {
        opacity: 0;
        filter: blur(300px);
        transform: translateX(0px);}
    25%,
    75% {
        opacity: 1;
        filter: blur(0px);
        transform: translateX(0px);}
    100% {
        opacity: 0;
        filter: blur(0px);
        transform: translate(50px);}}
#servicos .container {animation: tituloServicos;animation-timeline: view(auto auto);}
@Keyframes tituloServicos {
    0% {
        opacity: 0;
        filter: blur(30px);
        transform: translateY(300px);}
    30%,
    60% {
        opacity: 1;
        filter: blur(0px);
        transform: translateX(0px);}
    100% {
        opacity: 0;
        filter: blur(0px);
        transform: translateY(-300px);}}
#servicos .container .legenda {animation: legendaServicos;animation-timeline: view(auto auto);}
@Keyframes legendaServicos {
    0% {
        opacity: 0;
        filter: blur(30px);
        transform: translateY(300px);}
    30%,
    60% {
        opacity: 1;
        filter: blur(0px);
        transform: translateX(0px);}
    100% {
        opacity: 0;
        filter: blur(0px);
        transform: translateY(-300px);}}
#principios .container {animation: tituloPrincipios;animation-timeline: view(auto auto);}
@Keyframes tituloPrincipios {
    0% {
        opacity: 0;
        filter: blur(30px);
        transform: translateY(300px);}
    30%,
    60% {
        opacity: 1;
        filter: blur(0px);
        transform: translateX(0px);}
    100% {
        opacity: 0;
        filter: blur(0px);
        transform: translateY(-300px);}}
#contato .container {animation: containerColuna;animation-timeline: view(auto auto);}
@Keyframes containerColuna {
    0% {
        opacity: 0;
        filter: blur(30px);
        transform: translateY(300px);}
    30%,
    60% {
        opacity: 1;
        filter: blur(0px);
        transform: translateX(0px);}
    100% {
        opacity: 0;
        filter: blur(0px);
        transform: translateY(-300px);}}
/* MENU */
.menu-icon {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: none;
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 2;}
.home-no-menu {
    display: none;}
.menu-logo {
    display: none;}
.nav-links img {
    width: 10%;}
.menu-logo.visible {
    opacity: 0;
    pointer-events: auto;}
.nav-links {
    display: flex;}
.nav-links li {
    margin-left: 20px;}
.nav-links li:last-child {
    display: flex;
    margin-top: auto;
    margin-bottom: 30px;}
.nav-links a {
    color: var(--cor-branca);
    transition: color 0.3s ease;}
.nav-links a:hover {
    color: var(--cor-secundaria);}
@media (max-width: 780px) {
    .home-no-menu,
    .menu-icon,
    .menu-logo {
        display: block;}
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 40%;
        height: 75%;
        border: 2px solid var(--cor-secundaria);
        background-color: var(--cor-terciaria);
        border-radius: 0px 0px 0px 80px;
        border-color: var(--cor-terciaria) var(--cor-terciaria) var(--cor-secundaria) var(--cor-secundaria);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 60px;
        transition: right 0.3s ease-in-out;
        z-index: 1;}
    .nav-links .regular-only {
        display: none;}
    .nav-links.active {
        right: 0;}
    .nav-links li:not(:last-child) {
        margin: 15px 0;
        border-bottom: 1px solid whitesmoke;
        width: 80%;
        margin-left: 24px;}}
/* Header */
header {
  background: transparent;
  color: var(--cor-primaria);
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: background 0.3s ease;}
header .container {
  background-color: #123829d2;
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  text-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  overflow: hidden;}
header .logo {
  margin-top: 13px;}
header .logo img {
  width: 60%;}
header nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;}
header nav ul li a {
  color: var(--cor-primaria);
  font-family: var(--fonte-primaria), sans-serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 1px;}
/* Container principal do carrossel */
.carousel-container {
  position: relative; /* Necessário para posicionar botões e conteúdo */
  overflow: hidden; /* Esconde as imagens que estão fora da visualização */
  width: 100%;
  /* Altura ajustada para ser mais responsiva ou baseada em view-height */
  height: 60vh; 
  max-height: 800px; }
/* Faixa que contém todos os slides */
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out; /* Adiciona a animação de slide */
  width: 100%;
  height: 100%; }
/* Item individual do slide */
.carousel-slide {
  min-width: 100%; /* Cada slide ocupa a largura total do container */
  height: 100%;
  position: relative;
  /* Para que slides invisíveis não fiquem na frente */
  display: none; }
.carousel-slide.current-slide {
  display: block; } /* Apenas o slide atual é visível (controlado pelo JS) */
/* Imagem dentro do slide */
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; } /* Garante que a imagem preencha o slide sem distorcer */
/* Conteúdo sobreposto - Mantido para o H1 */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white; /* Certifique-se de que o texto seja legível */
  z-index: 10; }
/* Botões de navegação */
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 20;
  font-size: 24px;
  line-height: 1; }
.carousel-button.prev {
  left: 10px; }
.carousel-button.next {
  right: 10px; }
/* Indicadores de navegação (Dots) */
.carousel-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20; }
.carousel-indicator {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  padding: 0; }
.carousel-indicator.current-slide {
  background-color: white; }
/* Estilo para a nova seção CTA de Venda de Plantas */
.cta-plantas {
  background-color: #e6f7e6; /* Um verde claro suave para destacar */
  padding: 40px 20px;
  text-align: center; }
.cta-plantas .container {
  max-width: 1000px;
  margin: 0 auto; }
.cta-plantas h2 {
  color: #004d00; /* Um verde mais escuro, relacionado à natureza */
  margin-bottom: 10px;
  font-size: 2em; } /* Tamanho da fonte grande para o título */
.cta-plantas p {
  color: #333;
  margin-bottom: 25px;
  font-size: 1.1em; }
/* Estilo para o botão de CTA */
.cta-button {
  display: inline-block;
  background-color: #5cb85c; /* Cor de botão primária (Verde) */
  color: white;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 5px;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.cta-button:hover {
  background-color: #4cae4c; } /* Escurece um pouco ao passar o mouse */
/* Hero Section */
.hero {
  position: relative;
  width: 100%;
  height: 85vh;
  overflow: hidden;}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(60%);
  position: relative;}
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--cor-primaria);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;}
.hero-content h1 {
  font-family: var(--fonte-primaria), sans-serif;
  font-size: 5rem;
  font-weight: 400;
  text-align: center;
  line-height: 130%;
  margin: 5% 1% 1% 2%;}
/* Parceiros */
.parceiros {
  background-color: #616161; }
/* animacao */
.slider {
  overflow-x: hidden;
  width: 100%;
  border: 2px solid #616161;;
  height: var(--height);
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 10% 90%,
    transparent,); }
.slider .list {
  display: flex;
  width: 100%;
  min-width: calc(var(--width) * var(--quantity));
  position: relative; }
.slider .list .item {
  width: var(--width);
  height: var(--height);
  position: absolute;
  left: 100%;
  animation: autoRun 9s linear infinite;
  transition: filter  0.5s;
  animation-delay: calc( (9s / var(--quantity)) * (var(--position) - 1) )!important; }
.slider .list .item img {
  width: 100%;
  height: 70px;
  object-fit: cover; }
@keyframes autoRun {
  from {
    left: 100%;
  }
  to {
    left: calc(var(--width) * -1 );
  } }
.slider:hover .item {
  animation-play-state: paused!important;
  filter: grayscale(1); }
.slider .item:hover {
  filter: grayscale(0); }
.slider[reverse="true"] .item {
  width: var(--width);
  height: var(--height);
  animation: reversePlay 12s linear infinite;
  animation-delay: calc( (12s / var(--quantity)) * (var(--position) + 1) )!important; }
.slider[reverse="true"] .list .item img {
  width: 100%;
  height: 200px;
  object-fit: cover; }
@keyframes reversePlay {
  from {
    left: calc(var(--width) * -1 );
  }
  to {
    left: 100%;
  } }
/* Quem Somos */
#quem-somos .container {
  padding: 80px 20px;
  text-align: center;}
#quem-somos h2 {
  font-family: var(--fonte-primaria), sans-serif;
  font-size: 4rem;
  font-weight: 400;
  color: var(--cor-terciaria);
  line-height: 5rem;
  width: 80%;
  margin: 0 auto;}
.highlight {
  color: var(--cor-secundaria);}
#quem-somos .content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6rem;
  margin-top: 40px;
  padding: 0 15%;}
#quem-somos .equipe {
  width: 50%;
  border-radius: 10px;}
#quem-somos p {
  font-size: 1.1rem;
  font-weight: 400;
  font-family: var(--fonte-secundaria);}
#quem-somos .coluna {
  display: flex;
  flex-direction: column;
  gap: 30px;}
#quem-somos .coluna .seta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 2rem;
  min-width: 270px;}
.seta-imagem {
  display: flex;
  align-items: center;
  justify-content: center;}
#quem-somos .seta a {
  text-decoration: none;
  color: var(--cor-secundaria);}
/* Serviços */
#servicos h2 {
  background: var(--cor-terciaria);
  color: var(--cor-primaria);
  padding: 80px 20px;
  text-align: center;
  font-family: var(--fonte-primaria), sans-serif;
  font-size: 5rem;
  margin-bottom: 30px;
  font-weight: 300;}
#servicos p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  font-family: var(--fonte-secundaria);}
#servicos img {
  width: 40%;
  object-fit: cover;
  border-radius: 10px;}
#servicos h3 {
  color: var(--cor-terciaria);
  font-size: 3rem;}
#servicos .esquerda,
#servicos .direita {
  padding: 5% 5%;
  margin: 5% auto;}
#servicos .titulo-esquerda,
#servicos .titulo-direita {
  width: 100%;}
#servicos .esquerda .conteudo-esquerda .titulo-esquerda,
#servicos .direita .conteudo-direita .titulo-direita {
  margin-bottom: 5%;}
#servicos .esquerda {
  background-color: var(--cor-branca);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10%;}
#servicos .esquerda .conteudo-esquerda {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;}
#servicos .esquerda .conteudo-esquerda .titulo-esquerda {
  display: flex;
  align-items: center;
  gap: 5%;
  font-size: 3rem;}
#servicos .numeros {
  display: flex;
  color: var(--cor-secundaria);
  border: 2px solid var(--cor-secundaria);
  align-items: center;
  justify-content: center;
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
  max-height: 100px;
  border-radius: 50%;}
#servicos .direita {
  background-color: var(--cor-primaria);
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  gap: 10%;}
#servicos .direita .conteudo-direita {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;}
#servicos .direita .conteudo-direita .titulo-direita {
  display: flex;
  align-items: center;
  gap: 5%;
  font-size: 3rem;}
/* Princípios */
#principios {
  background: var(--cor-terciaria);
  color: var(--cor-primaria);
  padding: 80px 20px;
  text-align: center;}
#principios h2 {
  font-family: var(--fonte-primaria), sans-serif;
  font-size: 5rem;
  margin-bottom: 30px;
  font-weight: 300;}
#principios p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  font-family: var(--fonte-secundaria);}
#principios .principios-list {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  gap: 20px;}
#principios .principios-list div {
  padding: 0 30px;
  background: #163b2d;
  padding: 20px;
  border-radius: 10px;
  width: 30%;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}
#principios h3 {
  color: var(--cor-secundaria);
  font-family: var(--fonte-primaria), sans-serif;
  margin-bottom: 15px;
  font-size: 3rem;
  font-weight: 300;}
/* CONTATO */
#contato {
  background: var(--cor-extra);
  color: var(--cor-primaria);
  padding: 80px 20px;
  text-align: center;}
#contato h2 {
  font-family: var(--fonte-primaria), sans-serif;
  font-size: 5rem;
  margin-bottom: 30px;
  font-weight: 300;}
#contato p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  font-family: var(--fonte-secundaria);
  color: var(--cor-primaria);}
#contato .container {
  text-decoration: none;
  font-family: var(--fonte-secundaria), sans-serif;}
#contato .container a {
  text-decoration: none;
  color: var(--cor-primaria);}
/* Seção Final */
.final {
  position: relative;
  text-align: center;
  color: var(--cor-terciaria);}
.final .background-final {
  width: 100%;
  object-fit: cover;
  object-position: center;}
.container-final {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
  text-align: center;}
.final-content {
  width: 100%;
  background: var(--cor-branca);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 5%;}
.final-content button {
  background: var(--cor-terciaria);
  border: none;
  margin-top: -100px;
  padding: 15px 40px;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 30px;
  transition: background 0.3s;}
.final-content button a {
  color: var(--cor-primaria);}
.final-content button:hover {
  background: var(--cor-texto);
  color: var(--cor-primaria);}
.final-content button a:hover {
  color: var(--cor-secundaria);}
/* Seção Avaliação do Google */
#avaliacao .final-content {
  width: 75%;
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;
  margin-bottom: 5%;
  margin-top: -15px;
  padding: 15px 40px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.3s;}
#avaliacao .final-content a {
  color: var(--cor-terciaria);}
#avaliacao .final-content :hover {
  background: var(--cor-texto);
  color: var(--cor-secundaria);}
/* Footer */
footer {
  background: var(--cor-terciaria);
  color: var(--cor-primaria);
  display: flex;}
footer nav ul li a {
  color: var(--cor-primaria);
  font-size: 1rem;}
footer .logo-footer img {
  width: 20%;}
footer .container-footer {
  display: flex;
  width: 100vw;
  justify-content: space-between;
  margin: 0 5%;}
footer .container-externo-social {
  display: flex;
  flex-direction: column;
  gap: 9%;
  margin: 5% 0;}
footer .social-media {
  display: flex;
  gap: 35px;}
footer .container-interno {
  display: flex;
  align-items: center;
  margin-left: 10px;}
footer .social-media .social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;}
footer .direitos-reservados {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 25px;
  padding: 5% 10% 5% 3%;
  border-left: 1px solid rgba(0, 0, 0, 0.5);}
footer .direitos-reservados p {
  color: var(--cor-extra);
  font-family: var(--fonte-secundaria);}
footer .direitos-reservados a:hover {
  color: var(--cor-secundaria);}
footer .menu-footer {
  display: flex;
  flex-direction: column;
  gap: 15px;}
footer .social-media a {
  color: var(--cor-primaria);}
footer p {
  font-size: 0.9rem;}
footer a {
  color: var(--cor-secundaria);}
.endereco-telefone-footer {
  padding-right: 20px;
  font-family: var(--fonte-secundaria);
  margin-left: 10px;}
.whatsapp {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 105px;
  right: 7px;
  gap: 20px;
  font-family: var(--fonte-secundaria);
  color: #000;
  z-index: 1000;}
.texto-wpp {
  display: none;
  padding: 5px 20px;
  background-color: var(--cor-primaria);
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  border-radius: 50px;
  position: relative;
  z-index: 2;}
.texto-wpp::after {
  display: none;
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid var(--cor-primaria);
  z-index: 1;}
.botao-wpp {
  padding: 4px 14px;
  background-color: #49E670;
  border-radius: 200%;
  cursor: pointer;
  color: #fff;
  font-size: 2.5rem;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  transition: transform 0.2s ease;}
.botao-wpp a {
  color: #fff;}
.whatsapp:hover .texto-wpp, .whatsapp:hover .texto-wpp::after  {
  display: block;}
.botao-up {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 20px;
  right: 10px;
  gap: 20px;
  z-index: 1000;
  padding: -0.5px;
  cursor: pointer;
  font-size: 3.5rem;
  transition: transform 0.2s ease;}
.botao-up a {
  color: #49E670;}
/* RESPONVIVO */
@media (max-width: 1080px) {
    .hero-content h1 {
        font-size: 3.75rem;
        line-height: 4.5rem;}
    #quem-somos h2 {
        width: 90%;}
    #quem-somos .equipe {
        width: 69%;}}
@media (max-width: 768px) {
    header nav ul {
        flex-direction: column;
        align-items: center;
        gap: 15px;}
    .hero-content h1 {
        font-size: 3.5rem;
        line-height: 4rem;}
    #quem-somos .equipe {
        width: 80%;}
    #quem-somos .content {
        flex-direction: column;}
    #quem-somos h2 {
        width: 70%;
        font-size: 2rem;
        line-height: 3rem;}
    #servicos h2 {
        font-size: 3.5rem;}  
    #servicos .legenda-servicos {
        font-size: 1.2rem;} 
    #servicos .esquerda,
    #servicos .direita {
        flex-direction: column;
        gap: 30px;}
    #servicos .esquerda .conteudo-esquerda,
    #servicos .direita .conteudo-direita {
        flex-wrap: wrap;}
    #servicos img {
        width: 70%;}
    #principios h2 {
        font-size: 3.5rem;}
    #principios .legenda-principios {
        font-size: 1.2rem;}
    #principios .principios-list {
        flex-direction: column;
        gap: 30px;}
    #principios .principios-list div {
        width: 100%;}
    #contato h2 {
        font-size: 3.5rem;}  
    #contato .legenda-contato {
        font-size: 1.2rem;}
    #contato .content {
        flex-direction: column;}
    #contato img {
        width: 70%;}
    .final-content h2 {
        font-size: 1.8rem;}
    .parceiros img {
        width: 100px;}
    footer .logo-footer img {
        width: 20%;}
    footer .social-media {
        gap: 15px;}
    footer .social-media .social-icons .icone {
        font-size: 2rem;}}
@media (max-width:700px) {
    .final-content button {
        margin-top: -70px;}}
@media (max-width:500px) {
    .final-content button {
        padding: 10px 20px;
        margin-top: -50px;}
    footer .logo-footer img {
        width: 20%;}}
@media (max-width:455px) {
    .hero-content h1 {
        font-size: 3rem;
        line-height: 3.5rem;}
    #servicos img {
        width: 100%;}
    #servicos .numeros {
        width: 80%;
        min-width: 85px;
        max-width: 85px;
        max-height: 85px;
        min-height: 85px;}
    #principios h2 {
        font-size: 3rem;}
    .final-content button {
        margin-top: -40px;
        padding: 10px 30px;
        font-size: 1rem;}}
@media (max-width:375px) {
    #servicos h2, #principios h2 {
        font-size: 2.75rem;}
    footer .logo-footer img {
        width: 20%;}}
@media (max-width:345px) {
    .hero-content h1 {
        font-size: 2.5rem;
        line-height: 3.5rem;}
    #quem-somos h2 {
        font-size: 2rem;
        line-height: 3rem;
        width: 100%;}
    #quem-somos .equipe {
        width: 100%;}
    #servicos .esquerda .conteudo-esquerda .titulo-esquerda h3,
    #servicos .direita .conteudo-direita .titulo-direita h3 {
        gap: 10px;
        font-size: 2rem;
        margin: 20px 0;
        align-self: center;}
    #principios h2 {
        font-size: 2.25rem;}
    .final-content button {
        padding: 10px 15px;
        font-size: 1rem;}
    footer .social-media .social-icons .icone {
        font-size: 1.2rem;}
    footer p {
        font-size: 1rem;}
    footer .logo-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5%;}
    footer .logo-footer img {
        width: 20%;}
    footer .container-interno {
        justify-content: left;
        margin-left: 0;}
    footer .social-media {
        flex-direction: row;
        display: flex;
        justify-content: left;
        align-items: center;}
    .endereco-telefone-footer {
        flex-direction: row;
        flex-wrap: wrap;
        display: flex;
        justify-content: left;
        align-items: center;}
    footer .direitos-reservados {
        border-left: 0px;
        border-top: 1px solid rgba(0, 0, 0, 0.5);
        padding: 4%;
        align-items: center;}
    footer .menu-footer {
        flex-direction: row;
        flex-wrap: wrap;}
    .menu-footer {
        display: flex;
        flex-wrap: wrap;}
    .menu-footer li {
        flex: 1 1 calc(50% - 10px);
        aspect-ratio: 4;
        display: flex;
        align-items: center;
        justify-content: center;}}
/* Estilos Específicos da Galeria de Plantas */
.galeria-plantas {
  padding: 60px 20px;
  text-align: center; }
.galeria-plantas h2 {
  color: #004d00;
  font-size: 2.5em;
  margin-bottom: 10px; }
.galeria-plantas .subtitulo {
  font-size: 1.2em;
  color: #666;
  margin-bottom: 40px; }
/* Configuração do Grid para a Galeria */
.grid-plantas {
  display: grid;
  /* 3 colunas em telas grandes, ajustando para 2 em telas médias e 1 em telas pequenas */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 50px; }
.item-planta {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 10px #0000000d;
  transition: transform 0.3s ease; }
.item-planta:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); }
.item-planta img {
  width: 100%;
  height: 200px; /* Altura fixa para manter o layout consistente */
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 15px; }
.item-planta h3 {
  font-size: 1.5em;
  color: #333;
  margin-bottom: 5px; }
.item-planta .descricao-planta {
  color: #777;
  font-size: 0.9em;
  margin-bottom: 10px; }
.item-planta .preco {
  font-size: 1.4em;
  font-weight: bold;
  color: #5cb85c; /* Destaque verde para o preço */
  margin-bottom: 15px; }
/* Botão de Compra no WhatsApp */
.botao-whatsapp {
  display: block;
  background-color: #25d366; /* Cor do WhatsApp */
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.3s ease; }
.botao-whatsapp:hover {
  background-color: #1aae4d; }
/* CTA de Contato Final da Galeria */
.cta-contato-galeria p {
  font-size: 1.1em;
  margin-bottom: 15px; }
.cta-contato-button {
  display: inline-block;
  background-color: #004d00; /* Verde escuro */
  color: white;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 5px;
  transition: background-color 0.3s ease; }
.cta-contato-button:hover {
  background-color: #003300;
  color: var(--cor-secundaria);}
/* Garante que o conteúdo seja centralizado e com fundo semi-transparente para legibilidade */
#destaques-carrossel .hero-content {
  background: rgba(0, 0, 0, 0.4); /* Fundo preto semi-transparente */
  padding: 20px 40px;
  border-radius: 8px;
  max-width: 80%; /* Limita a largura do bloco de texto */
  color: white; }
.destaque-titulo {
  font-size: 2.5em;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 700; }
.destaque-texto {
  font-size: 1.5em;
  margin-bottom: 20px; }
/* Estilo para o Botão de Chamada para Ação (CTA) no Carrossel */
.cta-carrossel {
  display: inline-block;
  background-color: #5cb85c; /* Verde primário */
  color: white;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 5px;
  font-size: 1.1em;
  transition: background-color 0.3s ease; }
.cta-carrossel:hover {
  background-color: #4cae4c; }
/* ===  ESTILOS PARA A SEÇÃO DE VÍDEO (DICAS) ==== */
  .container-video {
      /* Espaçamento e fundo para destacar a seção */
      padding: 60px 0;
      text-align: center;
      background-color: #f8f8f8; /* Cor de fundo suave */
  }
  /* Estilo para a Headline do Vídeo */
  .headline-video {
      font-size: 2.5em;
      color: #333;
      margin-bottom: 10px;
      font-weight: 700;   }
  /* Estilo para o Sub-título da Headline */
  .headline-video span.sub-headline {
      display: block;
      font-size: 0.7em; 
      color: #5cb85c; /* Cor verde para destaque */
      font-weight: 400;
      margin-top: 5px;   }
  /* Wrapper principal do vídeo para centralização e sombra */
  .video-wrapper {
      max-width: 700px; /* Limita a largura máxima do player */
      margin: 30px auto 0; /* Centraliza horizontalmente */
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
      border-radius: 8px;
      overflow: hidden; /* Garante cantos arredondados */
  }
  /* O elemento VIDEO em si */
  .video-jardim {
      width: 100%;
      height: 80%;
      display: block;   }
  /* Container do botão de Chamada para Ação abaixo do vídeo */
  .cta-video-bottom {
      padding: 20px;
      background-color: #ffffff;
      border-top: 1px solid #eee; /* Linha sutil de separação */
  }
  .cta-video-bottom p {
      font-size: 1.1em;
      margin-bottom: 15px;
      color: #555;   }
  /* Estilo do Botão Principal (WhatsApp) */
  .cta-principal-video {
      display: inline-flex;
      align-items: center;
      background-color: #25D366; /* Verde WhatsApp */
      color: var(--cor-branca);
      text-decoration: none;
      padding: 12px 30px;
      border-radius: 50px; /* Botão arredondado */
      font-size: 1.1em;
      transition: background-color 0.3s ease;
      text-transform: uppercase; }
  .cta-principal-video:hover {
      background-color: #128C7E;
      color: var(--cor-secundaria); }
  .cta-principal-video i {
      margin-right: 8px;
      font-size: 1.2em; }
  /* Responsividade Básica */
  @media (max-width: 768px) {
      .headline-video {
          font-size: 1.8em; }
      .headline-video span.sub-headline {
          font-size: 0.8em; }
      .cta-principal-video {
          width: 90%; /* Ocupa quase a largura total em telas menores */
          justify-content: center; }
  }