.hero-full {
     position: relative;
     width: 100vw;
     left: 50%;
     margin-left: -50vw;
     height: 100vh;
     /* altura do hero */
     display: flex;
     align-items: center;
     color: white;
     text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
     background: url('https://www.revendakailash.gabrielbasan.com.br/tpl/kailashLandingPage/BANNER CAPA.jpg') center/cover no-repeat;
 }

 .hero-full::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.55);
     z-index: 0;
 }

 .hero-form select {
     color: #000000;
     /* texto preto */
     background-color: #ffffff;
     /* mantém fundo branco */
     border: 1px solid #ccc;
     /* mesma borda dos inputs */
     border-radius: 4px;
     /* arredondamento igual aos inputs */
     padding: 4px 6px;
     /* mesmo padding dos inputs */
     font-size: 0.85rem;
     /* tamanho de fonte consistente */
 }


 .hero-form {
     position: relative;
     z-index: 1;
     width: 400px;
     /* mais largo horizontalmente */
     padding-left: 100px;
     /* margem da esquerda */
     display: flex;
     flex-direction: column;
 }

 .hero-form h2 {
     font-size: 4rem;
 }

 .hero-form h2 {
     font-size: 1.8rem;
     margin-bottom: 15px;
     white-space: nowrap;
 }


 .hero-form img {
     width: 300px;
     margin-bottom: 50px;
     filter: brightness(0) invert(1);
 }

 .hero-form h2 {
     font-size: 1.8rem;
     margin-bottom: 15px;
     white-space: nowrap;
     /* mantém em uma linha */
 }

 .hero-form form {
     display: flex;
     flex-direction: column;
     gap: 0;
     /* remove o espaço padrão */
 }

 .hero-form input,
 .hero-form select {
     width: 100%;
     padding: 4px 6px;
     /* menos padding vertical */
     border-radius: 4px;
     border: 1px solid #ccc;
     font-size: 0.85rem;
     /* fonte menor */
     margin-bottom: 6px;
     /* espaçamento mínimo entre campos */
 }

 .hero-form small {
     margin-top: 50px;
     font-size: 1.2rem;
     white-space: nowrap;
 }

 .hero-form button {
     font-weight: 600;
     padding: 8px 20px;
     border: none;
     border-radius: 0.375rem;
     background-color: #ffffff;
     color: #4a5c4d;
     /* mesmo verde do tema */
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
     transition: all 0.3s ease;
 }

 .hero-form button:hover {
     background-color: #f1f1f1;
     transform: translateY(-2px);
 }



 /* ================= FULL WIDTH SECTIONS ================= */
 .full-width-section {
     width: 100vw;
     position: relative;
     left: 50%;
     margin-left: -50vw;
 }

 .row-inner {
     width: 100%;
     margin: 0;
 }

 .container-inner {
     max-width: 1140px;
     margin: 0 auto;
     padding: 0 15px;
 }

 /* ================= GENERAL STYLING ================= */
 .py-5 {
     padding-top: 3rem !important;
     padding-bottom: 3rem !important;
 }

 .img-fluid {
     max-width: 100%;
     height: auto;
 }

 .text-center {
     text-align: center;
 }

 .position-relative {
     position: relative;
 }

 .position-absolute {
     position: absolute;
 }

 .top-50 {
     top: 50%;
 }

 .start-50 {
     left: 50%;
 }

 .translate-middle {
     transform: translate(-50%, -50%);
 }

 .text-white {
     color: white;
 }

 .bg-light {
     background-color: #f8f9fa !important;
 }

 .bg-green {
     background-color: #63674f;
     color: white;
 }

 #valores-section .img-fluid {
     width: 170px;
     height: auto;
     border-top-left-radius: 85px;
     border-top-right-radius: 85px;
     box-shadow: 10px 0 20px #63674f66;
 }

 #valores-section p {
     font-weight: 600;
     margin: 0;
     color: #63674f;
     font-size: 1.4rem;
 }


 /* SEÇÃO ÚNICA */
 .secaoUnica {
     position: relative;
     overflow: hidden;
 }

 .secaoUnica-text {
     position: relative;
     transform: translate(60px, -30px);
     /* move tudo visualmente: direita e cima */
     padding-right: 40px;
     /* evita colar no meio da imagem */
 }

 .secaoUnica h1 {
     font-size: 3rem;
     margin-bottom: 40px;
     /* aumenta o gap entre o h1 e o p */
 }

 .secaoUnica p {
     font-size: 2rem;
     color: #8b8f6f;
     line-height: 1.5;
     margin-bottom: 20px;
 }

 .secaoUnica h3 {
     font-size: 2rem;
     margin-top: 40px;
 }

 .secaoUnica-icones {
     max-width: 450px;
     margin-top: 15px;
 }

 .secaoUnica-img img {
     object-fit: cover;
     width: 100%;
     height: 100%;
 }



 /* SEÇÃO 1 */

 .secao1-img {
     border-top-right-radius: 50px;
     border-bottom-right-radius: 50px;
     box-shadow: 8px 8px 30px rgba(0, 0, 0, 0);
 }

 .secao1-text {
     margin-right: 60px;
 }

 .secao1 {
     background-color: #ffffff;
 }

 .secao1-text h1 {
     font-weight: 900;
     line-height: 1.3;
     font-size: 3.9rem;
     color: #000000;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
 }

 .secao1-text p {
     color: #63674f;
     font-size: 1.6rem;
 }

 /* SEÇÃO 2 */
 .secao2 {
     margin-top: -25px;
     position: relative;
 }

 .secao2-text {
     border-top-right-radius: 50px;
     border-bottom-right-radius: 50px;
     padding: 40px 60px 40px 80px;
     /* top right bottom left */
     background-color: #ffffff;
     position: absolute;
     top: 0;
     left: 0;
     /* encostado na lateral esquerda */
     height: 100%;
     width: calc(100% + 40px);
     /* sobreposição sobre a imagem */
     z-index: 2;
 }

 .secao2-text h1 {
     font-weight: 900;
     line-height: 1.3;
     font-size: 3.9rem;
     color: #000000;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
 }

 .secao2-text p {
     color: #63674f;
     font-size: 1.6rem;
 }

 .secao2-img {
     box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.45);
     border-radius: 0;
 }




 /* SEÇÃO 3 VIDEO YOUTUBE */
 .secao3 .col-12 {
     padding: 0 40px;
 }

 .secao3 .video-container {
     box-shadow: 8px 8px 25px rgba(0, 0, 0, 0.45);
     overflow: hidden;
     width: 90%;
     margin: 0 auto;
     background-color: #000;
     /* evita borda branca atrás do vídeo */
     border-radius: 12px;
 }

 .secao3 .video-container iframe {
     width: 100%;
     height: 500px;
     border: none;
     display: block;
     /* remove espaços brancos causados por linha inline */
 }



 /* SEÇÃO 4 FAIXA VERDE */

 .secao4 {
     background-color: #63674f;
     color: white;
 }

 .secao4 h1 {
     height: max-content;
     font-size: 3rem;
     font-weight: 700;
 }

 .secao4 p {
     font-size: 1.7rem;
     margin-bottom: 25px;
 }

 .secao4-btn {
     background-color: white;
     color: #63674f;
     font-weight: 600;
     padding: 12px 30px;
     border: none;
     font-size: 1.8rem;
     transition: all 0.3s ease;
 }

 .secao4-btn:hover {
     background-color: #f0f0f0;
 }

 /* SEÇÃO 5 - Espaçamento e sombras nas imagens */
 /* Override para col-md-6 que também tem p-0 */
 .full-width-section.secao5 .col-md-6.p-0 {
     padding-left: 30px !important;
     padding-right: 30px !important;
 }

 /* Mesma sombra para as imagens */
 .full-width-section.secao5 .col-md-6.p-0 img {
     display: block;
     width: 100%;
     height: auto;
     border-radius: 20px;
     box-shadow: 10px 0 30px rgba(0, 0, 0, 0.18);
 }



 /* Efeito suave ao passar o mouse */
 .full-width-section.secao5 img:hover {
     transform: scale(1.02);
     box-shadow: 0 0 35px rgba(0, 0, 0, 0.25);
 }

 /* SEÇÃO 5 - Texto e botão posicionados */
 .full-width-section.secao5 .texto-top-left {
     position: absolute;
     top: 70px;
     /* antes 30px → mais para baixo */
     left: 70px;
     /* antes 40px → mais para a direita */
     color: #fff;
     text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
 }

 .full-width-section.secao5 .texto-top-left h4 {
     font-size: 1.8rem;
     font-weight: 600;
     line-height: 1.4;
 }

 .full-width-section.secao5 .botao-bottom-left {
     position: absolute;
     bottom: 50px;
     /* antes 30px → mais para cima */
     left: 60px;
     /* antes 40px → mais para a direita */
 }

 .full-width-section.secao5 button {
     font-weight: 600;
     padding: 8px 20px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }




 /* SEÇÃO 6 - Missão e Visão */
 .full-width-section.secao6 .col-md-6 h3 {
     text-align: center;
     font-size: 2.9rem;
     /* 🔹 destaque maior */
     font-weight: 900;
     margin-bottom: 15px;
     /* 🔹 menos espaço abaixo do título */
 }

 .secao6-img {
     width: 35px;
     vertical-align: middle;
     margin-left: 10px;
 }

 .full-width-section.secao6 .col-md-6 p {
     text-align: justify;
     text-justify: inter-word;
     line-height: 1.5;
     /* 🔹 linhas mais próximas */
     max-width: 73%;
     margin: 0 auto;
     /* centraliza dentro da coluna */
     color: #63674f;
     font-size: 1.4rem;
 }

 /* Ajusta alinhamento lateral dos títulos para simetria */
 .full-width-section.secao6 .col-md-6:first-child h3 {
     position: relative;
     left: 80px;
     /* Coluna 1 (Missão) deslocada para direita */
 }

 .full-width-section.secao6 .col-md-6:last-child h3 {
     position: relative;
     left: -80px;
     /* Coluna 2 (Visão) deslocada para esquerda */
 }



 /* SEÇÃO 7 - Nossos Valores */
 .full-width-section.secao7 h3 {
     font-size: 2.9rem;
     /* 🔹 mesmo tamanho da seção 6 */
     font-weight: 900;
     text-align: center;
     color: #000;
     margin-bottom: 0;
 }

 .full-width-section.secao7 h3 img {
     width: 35px;
     vertical-align: middle;
     margin-left: 10px;
 }


 /* SEÇÃO 9 - Duas imagens lado a lado */
 .full-width-section.secao9 .row {
     position: relative;
 }

 /* Ajuste base das imagens */
 .full-width-section.secao9 .col-md-6 {
     position: relative;
     display: flex;
 }

 .full-width-section.secao9 .col-md-6 img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Imagem da esquerda com borda branca sobreposta */
 .full-width-section.secao9 .col-md-6:first-child img {
     position: relative;
     z-index: 2;
     border-top-right-radius: 60px;
     border-bottom-right-radius: 60px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
 }

 /* Borda falsa (sobreposta) à direita */
 .full-width-section.secao9 .col-md-6:first-child::after {
     content: "";
     position: absolute;
     top: 0;
     right: -40px;
     /* move a borda para fora da imagem */
     width: 40px;
     height: 100%;
     background: #fff;
     border-top-right-radius: 60px;
     border-bottom-right-radius: 60px;
     z-index: 3;
     /* fica acima da imagem */
 }

 .full-width-section.secao9 .col-md-6:last-child img {
     position: relative;
     z-index: 1;
 }





 /* SEÇÃ0 10 */
 .secao10 h3 {
     font-weight: 900;
     font-size: 2.8rem;
     color: #63674f;
 }

 /* SEÇÃO 11 */
 .secao11 {
     background-color: #fff;
     /* opcional */
 }

 .secao11 .icones-compromissos {
     display: block;
     margin: 0 auto;
     width: 80%;
     /* controla o tamanho responsivo */
     max-width: 500px;
     /* limita o tamanho máximo */
     height: auto;
     filter: invert(42%) sepia(9%) saturate(521%) hue-rotate(42deg) brightness(91%) contrast(84%);
     /* O filtro acima simula a cor #63674f para SVGs externos */
 }

 /* Caso o SVG seja inline (copiado dentro do HTML), pode usar fill direto: */
 /*
  .secao11 svg path {
    fill: #63674f !important;
  }
  */

 /* SEÇÃO 12 */
 .secao12 {
     width: 100vw;
     height: 100px;
     background-color: #656751;
     position: relative;
     overflow: hidden;
 }

 .secao12-img {
     height: 90px;
     width: auto;
     opacity: 0.8;
 }

 .secao12 .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: transparent;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 3;
 }

 .btn-loja {
     background-color: #fff;
     color: #6a6a58;
     padding: 8px 20px;
     border-radius: 3px;
     text-decoration: none;
     font-weight: 500;
     font-size: 14px;
     transition: all 0.3s ease;
     z-index: 4;
 }

 .btn-loja:hover {
     background-color: #656751;
     color: #fff;
 }

 .secao12 .container-fluid {
     position: relative;
     z-index: 2;
 }

 /* ================= RESPONSIVIDADE MOBILE ================= */
 @media (max-width: 768px) {

     .hero-form {
         width: 90%;
         /* ocupa quase toda a tela */
         max-width: 400px;
         /* limita o tamanho no tablet */
         padding-left: 0;
         /* remove o padding-left fixo */
         padding-right: 0;
         /* remove padding excessivo */
         margin: 0 auto;
         /* centraliza horizontalmente */
         align-items: center;
         /* centraliza conteúdo dentro do flex */
         text-align: center;
         /* centraliza texto */
     }

     .hero-form select {
         color: #000000;
         /* texto preto */
         background-color: #ffffff;
         /* mantém fundo branco */
         border: 1px solid #ccc;
         /* mesma borda dos inputs */
         border-radius: 4px;
         /* arredondamento igual aos inputs */
         padding: 4px 6px;
         /* mesmo padding dos inputs */
         font-size: 0.85rem;
         /* tamanho de fonte consistente */
     }


     .hero-form img {
         width: 180px;
         /* reduz tamanho da logo */
         margin-bottom: 30px;
     }

     .hero-form h2 {
         font-size: 1.4rem;
         white-space: normal;
         /* permite quebra de linha */
         margin-bottom: 20px;
     }

     .hero-form form {
         width: 100%;
         /* ocupa toda largura disponível */
         display: flex;
         flex-direction: column;
         gap: 10px;
         /* espaçamento entre campos */
     }

     .hero-form input,
     .hero-form select {
         font-size: 1rem;
         padding: 8px;
         margin-bottom: 0;
         /* gap do form já controla espaço */
     }

     .hero-form button {
         background-color: #4a5c4d;
         /* verde Kailash */
         color: #fff;
         border: none;
         border-radius: 4px;
         padding: 8px 20px;
         font-size: 0.9rem;
         font-weight: 600;
         cursor: pointer;
         margin-top: 20px;
         transition: all 0.3s ease;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
     }

     /* Efeito hover */
     .hero-form button:hover {
         background-color: #5e7a62;
         /* tom de verde mais claro ao passar o mouse */
         transform: translateY(-2px);
     }


     .hero-form small {
         display: block;
         font-size: 1rem;
         margin-top: 15px;
     }

     /* Remove scroll horizontal global */
     body,
     html {
         overflow-x: hidden;
     }

     .secaoUnica {
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .secaoUnica-text {
         transform: none;
         /* remove deslocamento do desktop */
         padding: 20px;
         /* adiciona um espaçamento confortável */
         width: 90%;
         /* ocupa quase toda a tela */
     }

     .secaoUnica h1 {
         font-size: 2rem;
         margin-bottom: 20px;
     }

     .secaoUnica p {
         font-size: 1.2rem;
         margin-bottom: 15px;
         line-height: 1.4;
     }

     .secaoUnica h3 {
         font-size: 1.5rem;
         margin-top: 25px;
     }

     .secaoUnica-icones {
         max-width: 300px;
         margin-top: 10px;
     }

     .secaoUnica-img {
         width: 100%;
         margin-top: 20px;
         /* distancia entre o texto e a imagem */
     }

     .secaoUnica-img img {
         width: 100%;
         height: auto;
         /* mantém proporção da imagem */
         object-fit: cover;
     }


     /* Seção 1 e 2: empilha imagem e texto */
     .secao1 .row-inner {
         display: flex !important;
         flex-direction: column !important;
         /* coluna empilhada */
         flex-wrap: nowrap;
         align-items: center;
         justify-content: flex-start;
         gap: 20px;
         /* espaçamento entre imagem e texto */
     }

     /* Colunas ocupam 100% da largura */
     .secao1 .col-md-6 {
         width: 100% !important;
         padding: 0 10px !important;
         /* pequeno espaçamento lateral */
     }

     /* Imagem ocupa toda largura da coluna */
     .secao1-img {
         width: 100% !important;
         height: auto;
         border-radius: 0;
         box-shadow: none;
     }

     /* Texto centralizado abaixo da imagem */
     .secao1-text {
         width: 100% !important;
         text-align: center;
         margin: 0 !important;
         padding: 10px 0 !important;
     }

     /* Ajuste de tamanho do título e parágrafo para mobile */
     .secao1-text h1 {
         font-size: 2.5rem;
         line-height: 1.3;
     }

     .secao1-text p {
         font-size: 1.5rem;
     }


     /* Seção 2 mobile: empilha imagem e texto corretamente */
     .secao2 .row-inner {
         display: flex !important;
         flex-direction: column !important;
         /* empilha vertical */
         align-items: flex-start;
         /* alinha conteúdo à esquerda */
         gap: 15px;
     }

     .secao2 .col-md-6 {
         width: 100% !important;
         padding: 0 10px !important;
     }

     .secao2-img {
         width: 100% !important;
         height: auto;
         border-radius: 0;
         box-shadow: none;
     }

     .secao2-text {
         position: static !important;
         /* remove absolute */
         width: 100% !important;
         text-align: left;
         /* texto alinhado à esquerda */
         margin: 0 !important;
         padding: 20px 10px !important;
         border-radius: 0;
         /* remove bordas arredondadas */
         box-shadow: none;
         /* remove sombra */
         background: none !important;
         /* remove sobreposição branca */
     }

     .secao2-text h1 {
         font-size: 2.5rem;
         line-height: 1.3;
         text-align: left;
     }

     .secao2-text p {
         font-size: 1.5rem;
         line-height: 1.;
         text-align: left;
     }

     /* Seção 3 */
     .secao3 .video-container {
         width: 100%;
         padding: 0 10px;
     }

     /* Seção 5 */
     .full-width-section.secao5 .texto-top-left,
     .full-width-section.secao5 .botao-bottom-left,
     .full-width-section.secao5 img,
     .full-width-section.secao5 button {
         max-width: 100%;
         box-sizing: border-box;
     }

     /* ================= RESPONSIVIDADE MOBILE - SEÇÃO 5 ================= */


     /* Texto mais para cima */
     .full-width-section.secao5 .texto-top-left {
         top: 20px !important;
         /* move o texto para mais cima */
         left: 40px !important;
         /* mantém margem lateral menor */
         font-size: 1.4rem;
         /* opcional: reduz fonte no mobile */
     }

     /* Ajusta h4 dentro do texto */
     .full-width-section.secao5 .texto-top-left h4 {
         font-size: 1.2rem !important;
         line-height: 1.2 !important;
     }

     /* Botão mais para baixo */
     .full-width-section.secao5 .botao-bottom-left {
         bottom: 20px !important;
         /* move o botão mais para baixo */
         left: 40px !important;
         /* mantém alinhamento lateral */
     }

     /* Ajusta tamanho do botão no mobile */
     .full-width-section.secao5 button {
         font-size: 0.9rem !important;
         padding: 6px 12px !important;
     }




     /* ================= SEÇÃO 6 - FORÇA COLUNAS LADO A LADO ================= */
     .full-width-section.secao6 .col-md-6 h3,
     .full-width-section.secao6 .col-md-6 p {
         text-align: center !important;
         margin-left: 0 !important;
         margin-right: 0 !important;
     }

     .full-width-section.secao6 .col-md-6:first-child h3,
     .full-width-section.secao6 .col-md-6:last-child h3 {
         left: 0 !important;
         /* remove deslocamento lateral */
         position: relative;
     }

     .full-width-section.secao6 .col-md-6 p {
         max-width: 100%;
         margin: 0 auto;
         line-height: 1.6;
         font-size: 1.2rem;
     }

     /* 🔹 Mantém a imagem na mesma linha do título */
     .full-width-section.secao6 .col-md-6 h3 {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         /* espaçamento entre texto e imagem */
         width: 100%;
         /* garante centralização */
     }

     .secao6-img {
         width: 30px;
         /* levemente menor no mobile */
         margin: 0;
         /* remove margens laterais */
         vertical-align: middle;
     }




     /* ================= SEÇÃO 9 ================= */
     .full-width-section.secao9 .row {
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         gap: 0;
         width: 100%;
         box-sizing: border-box;
     }

     .full-width-section.secao9 .col-md-6 {
         flex: 0 0 auto;
         width: 45%;
         position: relative;
     }

     /* Remove sobreposição e borda branca */
     .full-width-section.secao9 .col-md-6:first-child {
         z-index: 1;
         /* volta ao padrão */
         margin-right: 0;
         /* sem sobreposição */
     }

     .full-width-section.secao9 .col-md-6:first-child img,
     .full-width-section.secao9 .col-md-6:last-child img {
         width: 100%;
         height: auto;
         object-fit: cover;
         border-radius: 8px;
         border: none;
         /* remove borda branca */
         box-shadow: none;
         display: block;
     }

     /* Remove pseudo-elemento (se existia efeito visual) */
     .full-width-section.secao9 .col-md-6:first-child::after {
         content: none !important;
         display: none !important;
     }


     /* ================= SEÇÃO 12 ================= */
     .secao12 .row {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         align-items: center;
         gap: 30px;
         /* mantém espaçamento entre imagens */
         margin: 0;
         /* remove margem negativa */
         padding: 0 10px;
         /* evita scroll e mantém espaçamento lateral */
     }

     .secao12 .col-auto {
         flex: 0 0 auto;
         display: flex;
         justify-content: center;
     }

     .secao12-img {
         height: 60px;
         width: auto;
         display: block;
         margin: -6px 10px;
         /* 20px de gap total */
         margin-left: -90px;
     }

     .btn-loja {
         font-size: 0.9rem;
         padding: 6px 12px;
     }
 }