/* Importando a fonte poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/* Importando a fonte novecento */
@import url(https://db.onlinewebfonts.com/c/c2988552206031b82497c4a05a393759?family=Novecento+WideMedium);

@font-face {
    font-family: "Novecento WideMedium";
    src: url("https://db.onlinewebfonts.com/t/c2988552206031b82497c4a05a393759.eot");
    src: url("https://db.onlinewebfonts.com/t/c2988552206031b82497c4a05a393759.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/c2988552206031b82497c4a05a393759.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/c2988552206031b82497c4a05a393759.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/c2988552206031b82497c4a05a393759.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/c2988552206031b82497c4a05a393759.svg#Novecento WideMedium")format("svg");
}

/* Reset e box-sizing */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Estilos gerais */
body {
    font-family: "Novecento WideMedium";
    position: relative; /* Adiciona position relative ao body */
    background: linear-gradient(to right, #11b411, #005200); /* Gradiente aplicado diretamente ao body */
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    z-index: 0; /* Garante que o body fique atrás dos pseudo-elementos */
}

body::before,
body::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%; /* Ajuste a largura conforme necessário */
    height: calc(100% - 100vh);
    background-image: url('../../assets/padrao1.png'); /* Caminho relativo à imagem de fundo */
    background-repeat: repeat-y; /* A imagem se repete apenas verticalmente */
    background-size: auto; /* Mantém o tamanho original da imagem */
    z-index: -1; /* Coloca os pseudo-elementos atrás do conteúdo do body */
    opacity: .5;
}

body::before {
    top: 100vh;
    left: 0; /* Posiciona o primeiro pseudo-elemento no lado esquerdo */
}

body::after {
    right: 0; /* Posiciona o segundo pseudo-elemento no lado direito */
    transform: scaleX(-1);
    top: 100vh;
}

.container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    height: 100%;
    margin: 0;
}

/* Estilos da HOME */
.home-main {
    padding-top: 5rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 5.5rem;
}

.home-content-box {
    background-color: white;
    position: relative;
    width: calc(100% - 400px);
    min-width: 300px;
    height: calc(100vh - 5rem); /* 37rem */
    margin-bottom: 10px;
    overflow: hidden;
}

.home-carousel {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.home-carousel-inner {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in-out;
}

.home-carousel-item {
    flex: 0 0 100%;
    height: 100%;
    object-fit: cover;
    width: 100%;
    transform: translateX(0);
}

.home-carousel-item-hidden {
    transform: translateX(-100%);
}

.home-carousel-item-active {
    transform: translateX(0);
}

.home-right-box {
    background-color: white;
    height: calc(100vh - 5rem);
    width: 25rem;
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
}

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

.home-title {
    font-size: 1.875rem;
    font-weight: normal;
    color: #005200;
    margin-bottom: 0.125rem;
    margin-top: 1.2rem;
    font-family: "Novecento WideMedium";
}

.home-body-text {
    font-size: 1.125rem;
    color: #000000;
    line-height: 1.4;
    margin-bottom: 0.3125rem;
    margin-top: 1rem;
    font-family: "Novecento WideMedium";
}

.home-line-image {
    max-width: 80%;
    max-height: 80%;
    display: block;
    margin-bottom: 0.4rem;
    margin-top: 0rem;
    pointer-events: none;
}

.home-budget-content {
    margin-top: -1rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.home-budget-button {
    width: 11.5rem;
    margin-top: 1rem;
    height: 4.375rem;
    border: none;
    border-radius: 5px;
    transition: all 0.3s;
    cursor: pointer;
    background: #088208;
    font-size: 1.2rem;
    color: white;
    z-index: 99;
    font-family: "Novecento WideMedium";
    align-self: center;
    transition: transform 0.2s ease;
}

.home-budget-button:hover {
    background: #08c208;
    transform: scale(1.1);
}

.home-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem;
    font-family: "Novecento WideMedium";
}

/* #region Header */
header {
    background: linear-gradient(to right, #008300, #003d00);
    width: 100%;
    height: 5rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.container-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    height: 100%;
    margin: 0;
}

.logo-area {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.logo img {
    height: 3.5rem;
}

.logo-text {
    color: white;
    font-size: 1.8rem;
    margin-left: 1rem;
    font-family: "Novecento WideMedium";
}

.nav {
    margin-left: 10px;
    display: flex;
    justify-content: center;
}

.nav ul {
    display: flex;
}

.nav ul li {
    margin-left: 1.5rem;
}

.nav ul li a {
    text-decoration: none;
    color: white;
    font-size: .9rem;
    transition: color 0.3s;
    font-family: "Novecento WideMedium";
}

.nav ul li a:hover {
    color: #ffff06;
}

.header-contacts {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: .9rem;
    margin-right: 1rem;
    width: 170px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.header-contacts button {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 5px;
    background-color: #006200;
    transition: 0.3s;
    cursor: pointer;
}

.header-contacts-icon {
    width: auto;
    height: 26px;
}

.header-contacts button:hover {
    background-color: #009200;
    transform: scale(1.1);
}

/* Media Queries do Header */

/* Media Query -2: ... - 419px*/
@media (max-width: 419px) {

    /* Estilos do Header */
    header {
        height: 2.5rem;
    }

    .container-header {
        margin: 0;
        padding: 0;
        justify-content: space-between;
    }

    .header-contacts {
        display: none;
    }

    .logo-area {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 0;
        width: fit-content;
    }

    .logo img {
        height: 30.4px;
        width: 28.99px;
        margin-right: .5rem;
        padding-top: .1rem;
    }

    .logo-text {
        margin: 0;
        font-size: 1rem;
        padding: 0;
        white-space: nowrap;
    }

    .nav ul li a {
        display: none;
    }

    .header-contact {
        height: 3rem;
    }

    .contact-icon {
        max-height: 3rem;
    }
}

/* Media Query -1: 419px - 677px*/
@media (min-width: 419px) and (max-width: 677px) {

    /* Estilos do Header */
    header {
        height: 2.5rem;
    }

    .container-header {
        margin: 0;
        padding: 0;
        justify-content: space-between;
    }

    .header-contacts {
        display: none;
    }

    .logo-area {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 0;
        width: fit-content;
    }

    .logo img {
        height: 30.4px;
        width: 28.99px;
        margin-right: .5rem;
        padding-top: .1rem;
    }

    .logo-text {
        margin: 0;
        font-size: 1rem;
        padding: 0;
        white-space: nowrap;
    }

    .nav ul li a {
        display: none;
    }

    .header-contact {
        height: 3rem;
    }

    .contact-icon {
        max-height: 3rem;
    }
}

/* Media Query 0: 678px - 849px */
@media (min-width: 678px) and (max-width: 849px) {

    /* Estilos do Header */
    header {
        height: 5rem;
    }

    .container-header {
        justify-content: space-between;
    }

    .header-contacts {
        display: none;
    }

    .logo-area {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 0;
        width: fit-content;
    }

    .logo img {
        margin: .5rem;
    }

    .logo-text {
        margin: 0;
        font-size: 1.5rem;
        white-space: nowrap;
    }

    .nav ul li a {
        display: none;
    }

    .header-contact {
        height: 3rem;
    }

    .contact-icon {
        max-height: 3rem;
    }
}

/* Media Query 1 (Telefone XS - Tablet L): 850px - 1023px */
@media (min-width: 850px) and (max-width: 1023px) {

    /* Estilos do Header */
    header {
        height: 5rem;
    }

    .container-header {
        justify-content: space-between;
    }

    .logo-area {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 0;
        width: fit-content;
    }

    .logo img {
        margin: .5rem;
    }

    .logo-text {
        margin: 0;
        font-size: 1.5rem;
        white-space: nowrap;
    }

    .nav ul li a {
        display: none;
    }

    .header-contact {
        height: 3rem;
    }

    .contact-icon {
        max-height: 3rem;
    }
}

/* Media Query 2 (PC XS e Tablets XL): 1024px - 1389px */
@media (min-width: 1024px) and (max-width: 1389px) {

    /* Estilos do Header */
    header {
        height: 5rem;
    }

    .container-header {
        justify-content: space-between;
    }

    .logo-area {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 0;
        width: fit-content;
    }

    .logo img {
        margin: .5rem;
    }

    .logo-text {
        margin: 0;
        font-size: 1.5rem;
        white-space: nowrap;
    }

    /* Menu de Navegação */
    .secondary-menu-toggle {
        width: 2.5rem;
        height: 2.5rem;
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        margin-left: 1rem;
    }

    .nav ul li a {
        display: none;
    }

    .header-contact {
        height: 3rem;
    }

    .contact-icon {
        max-height: 3rem;
    }
}

/* Media Query 3 (PC S - PC XL): 1390px - ... */
@media (min-width: 1390px) {
    /* Estilos do Header */
    header {
        height: 5rem;
    }

    .logo img {
        height: 3.15rem;
    }

    .logo-text {
        font-size: 1.8rem;
    }

    .nav ul li a {
        font-size: .9rem;
    }

    .header-contact {
        height: 3rem;
    }

    .contact-icon {
        max-height: 3rem;
    }
}

/*#endregion*/

/* Estilos dos Produtos */
#produtos {
    position: relative; /* Necessário para que o z-index dos filhos funcione */
    z-index: -100; /* Garante que a seção fique acima do quadrado branco */
}

.products-background {
    position: absolute;
    top: 0; /* Ajuste conforme necessário para posicionar verticalmente */
    left: 50%;
    transform: translateX(-50%);
    width: 60rem;
    height: 100rem;
    background-color: white;
    border-radius: 5px;
    z-index: -1; /* Garante que fique atrás dos outros elementos */
}

.products-background-son {
    justify-self: center;
    width: 54rem; /* Mantém a largura fixa em telas maiores */
    height: 4rem;
    border-radius: 5px;
    background: white;
}

.products-apresentation-text{
    text-align: center;
    padding-top: 1.5%;
    color: #005200;
    font-size: 1.7rem;;
}

.margin-title-carousels {
    height: 7.25rem;
}

.products-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}

.products-arrows-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1035px;
    top: 125px;
    margin-bottom: 15px;
    position: relative;
    padding: 0 15px;
}

.products-carousel-arrow.products-prev {
    position: absolute;
    left: 0;
}

.products-carousel-arrow.products-next {
    right: 0px;
    position: absolute;
}

.hidden {
    display: none;
}

.products-carousel-container {
    display: flex;
    align-items: center;
    width: 930px;
    overflow: hidden;
    position: relative;
}

.products-carousel-track {
    display: flex;
    will-change: transform;
    transition: transform 0.5s ease-in-out;
    margin-bottom: .5rem;
}

.products-carousel-item {
    width: 300px;
    height: 225px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    overflow: hidden;
}

.products-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.2s ease;
}

.products-carousel-item img:hover{
    transform: scale(1.1);
}

.products-carousel-item:last-child {
    margin-right: 0;
}

.products-carousel-arrow {
    font-size: 36px;
    background: none;
    border: none;
    cursor: pointer;
    user-select: none;
    width: 45px;
    height: 60px;
    transition: transform 0.2s ease;
}

.products-carousel-arrow:hover {
    transform: scale(1.1);
}

.products-carousel-arrow:active {
    transform: scale(0.9);
}

.products-carousel-arrow img {
    width: 100%;
    height: 100%;
}

.products-carousel-arrow.products-next img {
    transform: scaleX(-1);
}

h1 {
    color: white;
    font-weight: normal;
    background: linear-gradient(to right, #098709, #087D08); 
    margin-bottom: 5px;
    border-radius: 5px;
    padding: .5rem;
}

.products-separator {
    width: 100%;
    height: 5px;
    position:relative;
    bottom: 1.9rem; /* Centralizar com os títulos */
    background: linear-gradient(to right, #11b411, #005200);
    z-index: -2; /* Ficará embaixo dos títulos */
}

/* Estilos para a imagem ampliada */
.expanded-image {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000; /* Certifique-se de que a imagem fique acima de outros elementos */
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

/* Estilos para o fundo escurecido */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999; /* Abaixo da imagem, mas acima do resto */
    display: none; /* Inicialmente oculto */
}

/* Adicionando cursor pointer para as imagens do carrossel */
.products-carousel-item img {
    cursor: pointer;
}

/* Estilos da seção Etapas do Processo */
#processo {
    background-color: white;
    height: 30rem;
    width: 100%;
    margin-top: 9.4rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-family: "Novecento WideMedium";
}

#processo .content {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#processo::before,
#processo::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, #005200, #11b411);
}

#processo::before {
    top: 0px;
}

#processo::after {
    bottom: 0px;
}

.process-title {
    margin-top: 5rem;
    font-size: 50px;
    font-family: "Novecento WideMedium";
}

.process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 5rem;
    margin-top: 75px;
    position: relative;
    z-index: 0;
}

.process-card {
    position: relative;
    width: 200px;
    height: 300px;
    background-color: white;
    border: 2px solid #005200;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;
}



.process-card::after {
    content: attr(data-step);
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 60px;
    color: black;
    font-family: "Novecento WideMedium";
    z-index: -1;
}

.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.card-title {
    font-size: 1.1em;
    color: #005200;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 10px;
    font-family: "Novecento WideMedium";
}

.card-text {
    font-size: 0.9em;
    color: #005200;
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-family: "Novecento WideMedium";
}

/* Estilos da seção Por que nos escolher */
.choose-us-section {
    padding: 20px;
    margin-top: 5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    font-family: "Novecento WideMedium";
}

.choose-us-section .content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    max-width: 1200px;
}

.choose-us-text-wrapper {
    flex: 1;
    margin-right: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.choose-us-title {
    font-size: 48px;
    font-weight: normal;
    color: white;
    margin-bottom: 1rem;
    margin-top: 0;
    text-align: center;
    font-family: "Novecento WideMedium";
}

.choose-us-line {
    width: 470px;
    height: 3px;
    background-color: #ffff06;
    align-self: center;
}

.choose-us-card-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
}

.choose-us-card {
    background-color: #005200;
    border-radius: 5px;
    padding: 20px;
    height: 37.4rem;
    width: 100%;
    max-width: 450px;
    position: relative;
}

.choose-us-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    position: relative;
}

.choose-us-item::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 20px;
    transform: translateX(-50%);
    height: calc(100% - 16px);
    width: 3px;
    background-color: #ffff06;
    z-index: 1;
}

.choose-us-item:last-child::before {
    height: calc(100% - 21px);
}

.choose-us-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    z-index: 2;
    position: relative;
}

.choose-us-text {
    color: white;
    line-height: 1.5;
    text-align: left;
    flex: 1;
    font-size: 17px;
    margin: 0;
}

/* Global footer styles */
footer {
    width: 100%;
    background-color: #005200;
    color: white;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4.7rem;
    font-size: 17px;
}

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

.footer-text {
    line-height: 1.5;
    margin-bottom: 0;
    font-family: "Novecento WideMedium";
    margin-top: 0;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 3px;
}

.footer-social-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 17px;
    font-family: "Novecento WideMedium";
}

.footer-social-icon {
    width: 20px;
    height: auto;
    margin-right: 5px;
}

.footer-copyright {
    /* ... suas outras propriedades ... */
    font-family: Arial, sans-serif; /* Define a fonte como Arial */
    text-align: center; /* Centraliza o texto (opcional, mas comum em footers) */
    font-size: 0.8rem; /* Ajuste o tamanho da fonte conforme necessário */
    margin: 1.5rem 0 -1rem; /* Ajuste as margens conforme necessário */
}

/* Media Queries */

/* Media Query -2: 320px - 420px*/
@media (min-width: 320px) and (max-width: 420px) {
    body::before,
    body::after {
        display: none;
    }

    .container{
        margin: 0;
        padding: 0;
        justify-content: space-between; /* Adicionado para melhor distribuição */
    }

    /* Menu de Navegação */
    .secondary-menu-toggle {
        width: 2.5rem;
        height: 2.5rem;
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        margin: 0;
    }

    .secondary-menu-icon {
        width: 1.2rem;
        height: auto;
        transition: 0.2s ease; /* Animação de entrada e saída */
    }

    .secondary-menu-icon:hover {
        transform: scale(1.1);
    }

    .secondary-menu {
        position: fixed;
        top: 0;
        left: -100%; /* Começa fora da tela */
        width: 20rem;
        height: 21rem;
        border-radius: 0 0 1rem 0;
        background-color: white;
        z-index: 10001; /* Acima do header */
        transition: left 0.2s ease; /* Animação de entrada e saída */
        overflow-y: hidden;
    }

    .secondary-menu.active {
        left: 0; /* Move para a tela quando ativo */
    }

    .secondary-menu ul {
        padding: 1rem;
    }

    .secondary-menu ul li {
        margin-bottom: 1rem;
        border-bottom: 1px solid #ccc; /* Linha separadora */
        padding-bottom: 1rem;
    }

    .secondary-menu ul li a {
        text-decoration: none;
        color: #005200; /* Cor do texto do menu */
        font-size: 1rem;
        font-family: "Novecento WideMedium";
        display: block;
    }

    .secondary-menu ul li a:hover {
        color: #009200;
    }

    /* Adição de Estilos para os Contatos do Menu Secundário */
    .secondary-menu-contacts {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 0 3rem 0rem 3rem;
    margin-top: -.5rem;
    }

    .secondary-menu-contacts a {
    display: flex;
    }

    .secondary-menu-contacts-icon {
    width: 2rem;
    height: auto;
    }

    /* Estilos da HOME */
    .home-main {
        flex-direction: column; /* Altera o layout para coluna */
        align-items: center; /* Centraliza os elementos horizontalmente */
        padding-top: 2.5rem;
        margin-bottom: 4rem;
    }

    .home-right-box {
        position: relative; /* Altera o posicionamento para relativo */
        height: 50%;
        width: 100%;
        padding: 1.2rem .5rem;
    }

    .home-content-box {
        height: 50vh;
        width: 100%;
        margin: 0;
    }

    .home-text-content {
        padding: .625rem;
        word-break: break-word;
        margin-top: -.7rem;
    }

    .home-title {
        font-size: 1.7rem;
    }

    .home-body-text {
        font-size: 1rem;
    }

    .home-line-image {
        margin-top: .6rem;
    }

    /* Estilos dos Produtos */

    .products-background {
        background-color: #00000000; /* Invisível */
        width: 100%;
        height: 100rem;
    }
    
    .products-background-son{
        width: 100svw;
        height: 5rem;
    }
    
    .products-apresentation-text{
        padding-top: 2%;
        font-size: .65rem;
        line-height: 2rem;
    }

    .products-arrows-container {
        display: none;
    }

    .products-carousel-container {
        display: flex;
        justify-content: flex-start;
        padding-left: 0.4rem; /* Adiciona espaçamento da margem esquerda da tela */
        width: 100%;
    }

    .products-carousel-track {
        width: auto; /* Garante que ele ocupe o espaço necessário */
        margin-bottom: 0rem;
    }

    .products-carousel-item {
        width: 16.15rem;
        height: 12rem;
        padding: 0 .05rem 0 .05rem;
    }

    h1 {
        font-size: 1rem;
        color: #005200;
        background: white;
    }

    .products-separator {
        background: white;
        bottom: 1.6rem;
    }

    /* Estilos da seção Etapas do Processo */
    #processo {
        margin-top: 5rem;
        height: 130rem;
    }

    .process-title {
        font-size: 1.5rem;
        font-weight: normal;
        color: #005200;
        margin-top: 3.3rem;
        margin-bottom: -2.5rem;
    }

    .process-steps {
        max-width: 60rem;
        margin-top: 4rem;
        margin-bottom: 2rem;
        display: flex;
        flex-wrap: wrap; /* Adicionado para quebrar em linhas */
        justify-content: center;
    }

    .process-card {
        margin-top: 5rem;
        width: 12rem;
        height: 15rem;
        border-radius: 5px;
        margin-left: 9px;
        margin-right: 9px;
    }

    .process-card::after {
        top: -3rem;
        font-size: 2.3rem;
        color: white;
        background: #005200;
        padding: 1rem;
        padding-top: .1rem;
        width: 4rem;
        border-radius: 5px;
    }

    .card-content {
        padding-top: 0rem;
    }

    .card-title {
        font-size: .9rem;
    }

    .card-text {
        font-size: .7rem;
    }

    /* Estilos da seção Por que nos escolher */
    .choose-us-section {
        padding: 0;
    }    

    .choose-us-section .content {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }

    .choose-us-text-wrapper {
        margin: 0 0 1rem 0;
        width: 100%;
    }

    .choose-us-card-wrapper {
        width: 70%;
    }

    .choose-us-title {
        font-size: 1.6rem;
    }

    .choose-us-card {
        padding: 20px;
        width: 95%;
        height: auto;
    }

    .choose-us-item {
        padding-top: 1rem;
    }

    .choose-us-icon {
        width:  2.188rem;
        height: 2.188rem;
    }

    .choose-us-text {
        font-size: .7rem;
    }

    .choose-us-line {
        width: 20rem;
    }

    .choose-us-item::before {
        left: 1.1rem;
        height: calc(100% - 31px);
    }

    .choose-us-item:last-child::before {
        left: 1.1rem;
        height: calc(100% - 38px);
    }

    /* Estilos do Footer */
    footer {
        font-size: .7rem;
    }

    .footer-social-icon {
        width: 1.12rem;
    }

    .footer-text, .footer-social-link, .footer-copyright {
        font-size: .7rem;
    }

    .footer-social {
        gap: 1.12rem;
    }

    footer {
        padding: 1 0;
    }
}

/* Media Query -1: 420px - 678px*/
@media (min-width: 420px) and (max-width: 678px) {
    body::before,
    body::after {
        display: none;
    }

    .container{
        margin: 0;
        padding: 0;
        justify-content: space-between; /* Adicionado para melhor distribuição */
    }

    /* Menu de Navegação */
    .secondary-menu-toggle {
        width: 2.5rem;
        height: 2.5rem;
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        margin: 0;
    }

    .secondary-menu-icon {
        width: 1.2rem;
        height: auto;
        transition: 0.2s ease; /* Animação de entrada e saída */
    }

    .secondary-menu-icon:hover {
        transform: scale(1.1);
    }

    .secondary-menu {
        position: fixed;
        top: 0;
        left: -100%; /* Começa fora da tela */
        width: 20rem;
        height: 21rem;
        border-radius: 0 0 1rem 0;
        background-color: white;
        z-index: 10001; /* Acima do header */
        transition: left 0.2s ease; /* Animação de entrada e saída */
        overflow-y: hidden;
    }

    .secondary-menu.active {
        left: 0; /* Move para a tela quando ativo */
    }

    .secondary-menu ul {
        padding: 1rem;
    }

    .secondary-menu ul li {
        margin-bottom: 1rem;
        border-bottom: 1px solid #ccc; /* Linha separadora */
        padding-bottom: 1rem;
    }

    .secondary-menu ul li a {
        text-decoration: none;
        color: #005200; /* Cor do texto do menu */
        font-size: 1rem;
        font-family: "Novecento WideMedium";
        display: block;
    }

    .secondary-menu ul li a:hover {
        color: #009200;
    }

    /* Adição de Estilos para os Contatos do Menu Secundário */
    .secondary-menu-contacts {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 0 3rem 0rem 3rem;
    margin-top: -.5rem;
    }

    .secondary-menu-contacts a {
    display: flex;
    }

    .secondary-menu-contacts-icon {
    width: 2rem;
    height: auto;
    }

    /* Estilos da HOME */
    .home-main {
        flex-direction: column; /* Altera o layout para coluna */
        align-items: center; /* Centraliza os elementos horizontalmente */
        padding-top: 2.5rem;
        margin-bottom: 4rem;
    }

    .home-right-box {
        position: relative; /* Altera o posicionamento para relativo */
        height: 50%;
        width: 100%;
        padding: 1.2rem .5rem;
    }

    .home-content-box {
        height: 50vh;
        width: 100%;
        margin: 0;
    }

    .home-text-content {
        padding: .625rem;
        word-break: break-word;
        margin-top: -.7rem;
    }

    .home-title {
        font-size: 1.7rem;
    }

    .home-body-text {
        font-size: 1rem;
    }

    .home-line-image {
        margin-top: .6rem;
    }

    /* Estilos dos Produtos */

    .products-background {
        background-color: #00000000; /* Invisível */
        width: 100%;
        height: 100rem;
    }
    
    .products-background-son{
        width: 100svw;
        height: 5rem;
    }
    
    .products-apresentation-text{
        padding-top: 2%;
        font-size: .8rem;
        line-height: 2rem;
    }

    .products-arrows-container {
        display: none;
    }

    .products-carousel-container {
        display: flex;
        justify-content: flex-start;
        padding-left: 0.4rem; /* Adiciona espaçamento da margem esquerda da tela */
        width: 100%;
    }

    .products-carousel-track {
        width: auto; /* Garante que ele ocupe o espaço necessário */
        margin-bottom: 0rem;
    }

    .products-carousel-item {
        width: 16.15rem;
        height: 12rem;
        padding: 0 .05rem 0 .05rem;
    }

    h1 {
        font-size: 1rem;
        color: #005200;
        background: white;
    }

    .products-separator {
        background: white;
        bottom: 1.6rem;
    }

    /* Estilos da seção Etapas do Processo */
    #processo {
        margin-top: 5rem;
        height: 71rem;
        }

    .process-title {
        font-size: 1.5rem;
        font-weight: normal;
        color: #005200;
        margin-top: 3.3rem;
        margin-bottom: -2.5rem;
    }

    .process-steps {
        max-width: 60rem;
        margin-top: 4rem;
        margin-bottom: 2rem;
        display: flex;
        flex-wrap: wrap; /* Adicionado para quebrar em linhas */
        justify-content: center;
    }

    .process-card {
        margin-top: 5rem;
        width: 12rem;
        height: 15rem;
        border-radius: 5px;
        margin-left: 9px;
        margin-right: 9px;
    }

    .process-card::after {
        top: -3rem;
        font-size: 2.3rem;
        color: white;
        background: #005200;
        padding: 1rem;
        padding-top: .1rem;
        width: 4rem;
        border-radius: 5px;
    }

    .card-content {
        padding-top: 0rem;
    }

    .card-title {
        font-size: .9rem;
    }

    .card-text {
        font-size: .7rem;
    }

    /* Estilos da seção Por que nos escolher */
    .choose-us-section {
        padding: 0;
    }

    .choose-us-section .content {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }

    .choose-us-text-wrapper {
        margin: 0 0 1rem 0;
        width: 25rem;
    }

    .choose-us-card-wrapper {
        width: 70%;
    }

    .choose-us-title {
        font-size: 1.6rem;
    }

    .choose-us-card {
        padding: 20px;
        width: 95%;
        height: auto;
    }

    .choose-us-item {
        padding-top: 1rem;
    }

    .choose-us-icon {
        width:  2.188rem;
        height: 2.188rem;
    }

    .choose-us-text {
        font-size: .7rem;
    }

    .choose-us-line {
        width: 20rem;
    }

    .choose-us-item::before {
        left: 5%;
    }

    /* Estilos do Footer */
    footer {
        font-size: .7rem;
    }

    .footer-social-icon {
        width: 1.12rem;
    }

    .footer-text, .footer-social-link, .footer-copyright {
        font-size: .7rem;
    }

    .footer-social {
        gap: 1.12rem;
    }

    footer {
        padding: 1 0;
    }
}

/* Media Query 0: 678px - 850px */
@media (min-width: 678px) and (max-width: 850px) {
    body::before,
    body::after {
        display: none;
    }

    .container{
        justify-content: space-between;
    }

    /* Menu de Navegação */
    .secondary-menu-toggle {
        width: 2.5rem;
        height: 2.5rem;
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        margin-left: 1rem;
    }

    .secondary-menu-icon {
        width: 100%;
        height: auto;
        transition: 0.2s ease; /* Animação de entrada e saída */
    }

    .secondary-menu-icon:hover {
        transform: scale(1.1);
    }

    .secondary-menu {
        position: fixed;
        top: 0;
        left: -50%; /* Começa fora da tela */
        width: 20rem;
        height: 21rem;
        border-radius: 0 0 1rem 0;
        background-color: white;
        z-index: 10001; /* Acima do header */
        transition: left 0.2s ease; /* Animação de entrada e saída */
        overflow-y: hidden;
    }

    .secondary-menu.active {
        left: 0; /* Move para a tela quando ativo */
    }

    .secondary-menu ul {
        padding: 1rem;
    }

    .secondary-menu ul li {
        margin-bottom: 1rem;
        border-bottom: 1px solid #ccc; /* Linha separadora */
        padding-bottom: 1rem;
    }

    .secondary-menu ul li a {
        text-decoration: none;
        color: #005200; /* Cor do texto do menu */
        font-size: 1rem;
        font-family: "Novecento WideMedium";
        display: block;
    }

    .secondary-menu ul li a:hover {
        color: #009200;
    }

    /* Adição de Estilos para os Contatos do Menu Secundário */
    .secondary-menu-contacts {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 0 3rem 0rem 3rem;
    margin-top: -.5rem;
    }

    .secondary-menu-contacts a {
    display: flex;
    }

    .secondary-menu-contacts-icon {
    width: 2rem;
    height: auto;
    }

    /* Estilos da HOME */
    .home-main {
        margin-bottom: 4rem;
        flex-direction: column; /* Altera o layout para coluna */
        align-items: center; /* Centraliza os elementos horizontalmente */
    }

    .home-right-box {
        position: relative; /* Altera o posicionamento para relativo */
        height: 50%;
        width: 100%;
        padding: 1.2rem .5rem;
    }

    .home-content-box {
        height: 50vh;
        width: 100%;
        margin: 0;
    }

    .home-text-content {
        padding: .625rem;
        word-break: break-word;
        margin-top: -.7rem;
    }

    .home-title {
        font-size: 1.7rem;
    }

    .home-body-text {
        font-size: 1rem;
    }

    .home-line-image {
        margin-top: .6rem;
    }

    /* Estilos dos Produtos */

    .products-background {
        background-color: #00000000; /* Invisível */
        width: 100%;
        height: 100rem;
    }
    
    .products-background-son{
        width: 100svw;
        height: 5rem;
    }
    
    .products-apresentation-text{
        padding-top: 1%;
        font-size: 1.2rem;
        line-height: 2rem;
    }

    .products-arrows-container {
        display: none;
    }

    .products-carousel-container {
        display: flex;
        justify-content: flex-start;
        padding-left: 0.4rem; /* Adiciona espaçamento da margem esquerda da tela */
        width: 100%;
    }

    .products-carousel-track {
        width: auto; /* Garante que ele ocupe o espaço necessário */
        margin-bottom: 0rem;
    }

    .products-carousel-item {
        width: 16.15rem;
        height: 12rem;
        padding: 0 .05rem 0 .05rem;
    }

    h1 {
        font-size: 1rem;
        color: #005200;
        background: white;
    }

    .products-separator {
        background: white;
        bottom: 1.6rem;
    }

    /* Estilos da seção Etapas do Processo */
    #processo {
        margin-top: 5rem;
        height: 51.8rem; 
    }

    .process-title {
        font-size: 1.5rem;
        font-weight: normal;
        color: #005200;
        margin-top: 3.3rem;
        margin-bottom: -2.5rem;
    }

    .process-steps {
        max-width: 60rem;
        margin-top: 4rem;
        margin-bottom: 2rem;
        display: flex;
        flex-wrap: wrap; /* Adicionado para quebrar em linhas */
        justify-content: center;
    }

    .process-card {
        margin-top: 5rem;
        width: 13rem;
        height: 15rem;
        border-radius: 5px;
        margin-left: 9px;
        margin-right: 9px;
    }

    .process-card::after {
        top: -3rem;
        font-size: 2.3rem;
        color: white;
        background: #005200;
        padding: 1rem;
        padding-top: .1rem;
        width: 4rem;
        border-radius: 5px;
    }

    .card-content {
        padding-top: 0rem;
    }

    .card-title {
        font-size: .9rem;
    }

    .card-text {
        font-size: .7rem;
    }

    /* Estilos da seção Por que nos escolher */

    .choose-us-section {
        padding: 0;
    }
    
    .choose-us-section .content {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
    }

    .choose-us-text-wrapper {
        margin: 0 0 1rem 0;
        width: 25rem;
    }

    .choose-us-card-wrapper {
        width: 70%;
    }

    .choose-us-title {
        font-size: 1.6rem;
    }

    .choose-us-card {
        padding: 20px;
        width: 95%;
        height: auto;
    }

    .choose-us-item {
        padding-top: 1rem;
    }

    .choose-us-icon {
        width:  2.188rem;
        height: 2.188rem;
    }

    .choose-us-text {
        font-size: .7rem;
    }

    .choose-us-line {
        width: 20rem;
    }

    .choose-us-item::before {
        left: 5%;
    }

    /* Estilos do Footer */
    footer {
        font-size: .7rem;
    }

    .footer-social-icon {
        width: 1.12rem;
    }

    .footer-text, .footer-social-link, .footer-copyright {
        font-size: .7rem;
    }

    .footer-social {
        gap: 1.12rem;
    }

    footer {
        padding: 1 0;
    }
}

/* Media Query 1 (Telefone XS - Tablet L): 850px - 1024px */
@media (min-width: 850px) and (max-width: 1024px) {
    body::before,
    body::after {
        display: none;
    }

    .container{
        justify-content: space-between;
    }

    /* Menu de Navegação */
    .secondary-menu-toggle {
        width: 2.5rem;
        height: 2.5rem;
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        margin-left: 1rem;
    }

    .secondary-menu-icon {
        width: 100%;
        height: auto;
        transition: 0.2s ease; /* Animação de entrada e saída */
    }

    .secondary-menu-icon:hover {
        transform: scale(1.1);
    }

    .secondary-menu {
        position: fixed;
        top: 0;
        left: -50%; /* Começa fora da tela */
        width: 20rem;
        height: 21rem;
        border-radius: 0 0 1rem 0;
        background-color: white;
        z-index: 10001; /* Acima do header */
        transition: left 0.2s ease; /* Animação de entrada e saída */
        overflow-y: hidden;
    }

    .secondary-menu.active {
        left: 0; /* Move para a tela quando ativo */
    }

    .secondary-menu ul {
        padding: 1rem;
    }

    .secondary-menu ul li {
        margin-bottom: 1rem;
        border-bottom: 1px solid #ccc; /* Linha separadora */
        padding-bottom: 1rem;
    }

    .secondary-menu ul li a {
        text-decoration: none;
        color: #005200; /* Cor do texto do menu */
        font-size: 1rem;
        font-family: "Novecento WideMedium";
        display: block;
    }

    .secondary-menu ul li a:hover {
        color: #009200;
    }

    /* Adição de Estilos para os Contatos do Menu Secundário */
    .secondary-menu-contacts {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 0 3rem 0rem 3rem;
    margin-top: -.5rem;
    }

    .secondary-menu-contacts a {
    display: flex;
    }

    .secondary-menu-contacts-icon {
    width: 2rem;
    height: auto;
    }

    /* Estilos da HOME */
    .home-main {
        margin-bottom: 4rem;
        flex-direction: column; /* Altera o layout para coluna */
        align-items: center; /* Centraliza os elementos horizontalmente */
    }

    .home-right-box {
        position: relative; /* Altera o posicionamento para relativo */
        height: 50%;
        width: 100%;
        padding: 1.2rem .5rem;
    }

    .home-content-box {
        height: 50vh;
        width: 100%;
        margin: 0;
    }

    .home-text-content {
        padding: .625rem;
        word-break: break-word;
        margin-top: -.7rem;
    }

    .home-title {
        font-size: 1.3rem;
    }

    .home-body-text {
        font-size: 1rem;
        padding: 0 3rem;
    }

    .home-line-image {
        margin-top: .6rem;
        padding: 0 3rem;
    }

    /* Estilos dos Produtos */

    .products-background {
        background-color: #00000000; /* Invisível */
        width: 100%;
        height: 100rem;
    }
    
    .products-background-son{
        width: 100svw;
        height: 5rem;
    }
    
    .products-apresentation-text{
        padding-top: 1.5%;
        font-size: 1.5rem;;
    }

    .products-arrows-container {
        display: none;
    }

    .products-carousel-container {
        display: flex;
        justify-content: flex-start;
        padding-left: 0.4rem; /* Adiciona espaçamento da margem esquerda da tela */
        width: 100%;
    }

    .products-carousel-track {
        width: auto; /* Garante que ele ocupe o espaço necessário */
        margin-bottom: 0rem;
    }

    .products-carousel-item {
        width: 16.15rem;
        height: 12rem;
        padding: 0 .05rem 0 .05rem;
    }

    .products-carousel-item {
        width: 16.15rem;
        height: 12rem;
        padding: 0 .05rem 0 .05rem;
    }

    h1 {
        font-size: 1.5rem;
        color: #005200;
        background: white;
        margin-top: .6rem;
    }

    .products-separator {
        background: white;
    }

    /* Estilos da seção Etapas do projeto */

    #processo {
        margin-top: 5rem;
    }

    /* Estilos da seção Por que nos escolher */
    
    .choose-us-section {
        padding: 0;
    }

    .choose-us-section .content {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .choose-us-text-wrapper {
        width: 45%;
        margin-right: 2.5rem;
    }

    .choose-us-card-wrapper {
        width: 50%;
    }

    .choose-us-title {
        font-size: 1.8rem;
    }

    .choose-us-card {
        padding: 20px;
        width: 95%;
        height: auto;
    }

    .choose-us-item {
        padding-top: 1rem;
    }

    .choose-us-icon {
        width:  2.188rem;
        height: 2.188rem;
    }

    .choose-us-text {
        padding-top: .1rem;
        font-size: .7rem;
    }

    .choose-us-line {
        width: 23rem;
    }

    .choose-us-item::before {
        left: 5%;
    }

    /* Estilos do Footer */
    footer {
        font-size: .8rem;
    }

    .footer-social-icon {
        width: 1.12rem;
    }

    .footer-text, .footer-social-link, .footer-copyright {
        font-size: .8rem;
    }

    .footer-social {
        gap: 1.12rem;
    }

    footer {
        padding: 1 0;
    }
}

/* Media Query 2 (PC XS e Tablets XL): 1024px - 1390px */
@media (min-width: 1024px) and (max-width: 1390px) {
    body::before,
    body::after {
        display: none;
    }

    .container{
        justify-content: space-between;
    }

    /* Menu de Navegação */
    .secondary-menu-toggle {
        width: 2.5rem;
        height: 2.5rem;
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        margin-left: 1rem;
    }

    .secondary-menu-icon {
        width: 100%;
        height: auto;
        transition: 0.2s ease; /* Animação de entrada e saída */
    }

    .secondary-menu-icon:hover {
        transform: scale(1.1);
    }

    .secondary-menu {
        position: fixed;
        top: 0;
        left: -50%; /* Começa fora da tela */
        width: 20rem;
        height: 21rem;
        border-radius: 0 0 1rem 0;
        background-color: white;
        z-index: 10001; /* Acima do header */
        transition: left 0.2s ease; /* Animação de entrada e saída */
        overflow-y: hidden;
    }

    .secondary-menu.active {
        left: 0; /* Move para a tela quando ativo */
    }

    .secondary-menu ul {
        padding: 1rem;
    }

    .secondary-menu ul li {
        margin-bottom: 1rem;
        border-bottom: 1px solid #ccc; /* Linha separadora */
        padding-bottom: 1rem;
    }

    .secondary-menu ul li a {
        text-decoration: none;
        color: #005200; /* Cor do texto do menu */
        font-size: 1rem;
        font-family: "Novecento WideMedium";
        display: block;
    }

    .secondary-menu ul li a:hover {
        color: #009200;
    }

    /* Adição de Estilos para os Contatos do Menu Secundário */
    .secondary-menu-contacts {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 0 3rem 0rem 3rem;
    margin-top: -.5rem;
    }

    .secondary-menu-contacts a {
    display: flex;
    }

    .secondary-menu-contacts-icon {
    width: 2rem;
    height: auto;
    }

    /* Estilos da HOME */
    .home-main {
        margin-bottom: 5rem;
    }

    .home-right-box {
        height: calc(100vh - 5rem);
        width: 22.5rem;
    }

    .home-content-box {
        height: calc(100vh - 5rem);
        width: calc(100% - 22.5rem);
    }

    .home-text-content {
        padding: .625rem;
        word-break: break-word;
        margin-top: -.7rem;
    }

    .home-title {
        font-size: 1.5rem;
    }

    .home-body-text {
        font-size: .8rem;
    }

    .home-line-image {
        margin-top: .6rem;
    }


    /* Estilos dos Produtos */
    .products-arrows-container {
        width: 58.2rem;
        margin-bottom: .85rem;
        top: 6.875rem;
    }

    .products-carousel-container {
        width: 52.3rem;
    }

    .products-carousel-item {
        width: 16.875rem;
        height: 12.656rem;
        margin-right: .815rem;
    }

    .products-carousel-arrow {
        width: 2.531rem;
        height: 3.375rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    /* Estilos da seção Por que nos escolher */
    .choose-us-section .content {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .choose-us-text-wrapper {
        width: 45%;
        margin-right: 2.5rem;
    }

    .choose-us-card-wrapper {
        width: 50%;
    }

    .choose-us-title {
        font-size: 2.3rem;
    }

    .choose-us-card {
        padding: 20px;
        width: 95%;
        height: auto;
    }

    .choose-us-item {
        padding-top: 1rem;
    }

    .choose-us-icon {
        width:  2.188rem;
        height: 2.188rem;
    }

    .choose-us-text {
        padding-top: .1rem;
        font-size: .8rem;
    }

    .choose-us-line {
        width: 28rem;
    }

    .choose-us-item::before {
        left: 5%;
    }

    /* Estilos do Footer */
    footer {
        font-size: .8rem;
    }

    .footer-social-icon {
        width: 1.12rem;
    }

    .footer-text, .footer-social-link, .footer-copyright {
        font-size: .8rem;
    }

    .footer-social {
        gap: 1.12rem;
    }

    footer {
        padding: 1 0;
    }
}

/* Media Query 2.5 (correção pra incluir notebooks no background de padrão): 1390px - 1400px */
@media (min-width: 1390px) and (max-width: 1400px) {
    body::before,
    body::after {
        background-image: url('../../assets/padrao2.png'); /* Caminho relativo à imagem de fundo */
    }
}

/* Media Query 3 (PC S - PC XL): 1390px - ... */
@media (min-width: 1390px) {

    .secondary-menu-toggle, .secondary-menu{
        display: none;
    }

    /* Estilos da HOME */
    .home-main {
        padding-top: 5rem;
    }

    .home-right-box {
        height: calc(100vh - 5rem);
        width: 22.5rem;
    }

    .home-content-box {
        height: calc(100vh - 5rem);
        width: calc(100% - 22.5rem);
    }

    .home-text-content {
        padding: .625rem;
        word-break: break-word;
        margin-top: -.7rem;
    }

    .home-title {
        font-size: 1.5rem;
    }

    .home-body-text {
        font-size: .8rem;
    }

    .home-line-image {
        margin-top: .6rem;
    }

    /* Estilos da seção Etapas do Processo */
    #processo {
        height: 31.8rem;
        /* padding: 0 14%;  THIS IS THE WAY!!!!!!!!!! */

        }

    .process-title {
        font-size: 1.7rem;
        font-weight: normal;
        color: #005200;
        margin-top: 3.3rem;
        margin-bottom: -2.5rem;
    }

    .process-steps {
        margin-top: 3rem;
        margin-bottom: 2rem;
        display: flex;
        flex-wrap: wrap; /* Adicionado para quebrar em linhas */
        justify-content: center;
    }

    .process-card {
        margin-top: 5rem;
        width: 14rem;
        height: 16rem;
        border-radius: 5px;
        margin-left: 9px;
        margin-right: 9px;
    }

    .process-card::after {
        top: -3rem;
        font-size: 2.3rem;
        color: white;
        background: #005200;
        padding: 1rem;
        padding-top: .1rem;
        width: 4rem;
        border-radius: 5px;
    }

    .card-content {
        padding-top: .9rem;
    }

    .card-title {
        font-size: .9rem;
    }

    .card-text {
        font-size: .8rem;
    }

    /* Estilos dos Produtos */
    .products-arrows-container {
        width: 58.2rem;
        margin-bottom: .85rem;
        top: 6.875rem;
    }

    .products-carousel-container {
        width: 52.3rem;
    }

    .products-carousel-item {
        width: 16.875rem;
        height: 12.656rem;
        margin-right: .815rem;
    }

    .products-carousel-arrow {
        width: 2.531rem;
        height: 3.375rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    /* Estilos da seção Por que nos escolher */
    .choose-us-section .content {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .choose-us-text-wrapper {
        width: 45%;
        margin-right: 2.5rem;
    }

    .choose-us-card-wrapper {
        width: 50%;
    }

    .choose-us-title {
        font-size: 2.3rem;
    }

    .choose-us-card {
        padding: 20px;
        width: 95%;
        height: auto;
    }

    .choose-us-item {
        padding-top: 1rem;
    }

    .choose-us-icon {
        width:  2.188rem;
        height: 2.188rem;
    }

    .choose-us-text {
        font-size: .8rem;
    }

    .choose-us-line {
        width: 28rem;
    }

    .choose-us-item::before {
        left: 5%;
    }

    /* Estilos do Footer */
    footer {
        font-size: .8rem;
    }

    .footer-social-icon {
        width: 1.12rem;
    }

    .footer-text, .footer-social-link, .footer-copyright {
        font-size: .8rem;
    }

    .footer-social {
        gap: 1.12rem;
    }

    footer {
        padding: 1 0;
    }
}





/* Media Queries para sessões específica */

/* Esp. Media Query 1 (Sessão de "Etapas do projeto" para PC S e Tablets XL): 1024px - 1530px */
@media (max-width: 1530px) {

    /* Estilos da seção Etapas do Processo */
    #processo {
        height: 51.8rem;
        /* padding: 0 14%;  THIS IS THE WAY!!!!!!!!!! */
        }

    .process-title {
        font-size: 1.7rem;
        font-weight: normal;
        color: #005200;
        margin-top: 3.3rem;
        margin-bottom: -2.5rem;
    }

    .process-steps {
        max-width: 60rem;
        margin-top: 3rem;
        margin-bottom: 2rem;
        display: flex;
        flex-wrap: wrap; /* Adicionado para quebrar em linhas */
        justify-content: center;
    }

    .process-card {
        margin-top: 5rem;
        width: 14rem;
        height: 16rem;
        border-radius: 5px;
        margin-left: 9px;
        margin-right: 9px;
    }

    .process-card::after {
        top: -3rem;
        font-size: 2.3rem;
        color: white;
        background: #005200;
        padding: 1rem;
        padding-top: .1rem;
        width: 4rem;
        border-radius: 5px;
    }

    .card-content {
        padding-top: .9rem;
    }

    .card-title {
        font-size: .9rem;
    }

    .card-text {
        font-size: .8rem;
    }
}

/* Esp. Media Query 2 (Sessão de "Etapas do projeto"): 484px - 725px */
@media (min-width: 484px) and (max-width: 725px) {
    #processo {
        height: 73rem;
    }
}

/* Esp. Media Query 2 (Sessão de "Etapas do projeto"): ... - 483px */
@media (max-width: 483px) {
    #processo {
        height: 135rem;
    }
}


































/* Estilos para a imagem ampliada */
.expanded-image {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000; /* Certifique-se de que a imagem fique acima de outros elementos */
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

/* Estilos para o fundo escurecido */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999; /* Abaixo da imagem, mas acima do resto */
    display: none; /* Inicialmente oculto */
}


























.carousel-dots {
    position: absolute;
    bottom: 20px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px; /* Adjust spacing between dots */
}

.carousel-dot {
    width: 12px; /* Adjust size */
    height: 12px; /* Adjust size */
    border-radius: 50%;
    background-color: white;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.carousel-dot:hover {
    opacity: 1;
}


























#avaliacoes{
    justify-self: center;
}

:root {
    --item-width: 300px;           /* Largura do card */
    --item-height: 220px;          /* Altura do card */
    --item-margin: 15px;           /* Espaçamento entre cards */
    --visible-items: 3;            /* Cards visíveis */
    --arrow-size: 2rem;            /* Tamanho das setas */
    --transition-duration: .5s;   /* Duração da transição */
  }

.avaliations-title {
    font-family: "Novecento WideMedium";
    font-size: 2.3rem;         /* Large font size */
    color: white;           /* Green color */
    margin-top: 4rem;
    margin-bottom: 3rem;      /* Space below the title */
    text-align: center;
    background: #00000000;
}
  
  .carousel-wrapper {
    max-width: 1200px;
    width: 100%;
    text-align: center;
  }
  
  /* Controles do carrossel */
  .carousel-controls-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }
  
  /* Container do carrossel */
  .carousel-container {
    position: relative;
    overflow: hidden;
    width: calc(var(--visible-items) * var(--item-width) + (var(--visible-items) - 1) * var(--item-margin));
    border-radius: 5px;
  }
  
  /* Track do carrossel */
  .carousel-track {
    display: flex;
    transition: transform var(--transition-duration) ease-in-out;
  }
  
  /* Card do carrossel */
  .carousel-item {
    flex: 0 0 var(--item-width);
    height: var(--item-height);
    margin-right: var(--item-margin);
    border-radius: 4px;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
  }
  
  .carousel-item:last-child {
    margin-right: 0;
  }
  
  /* Cabeçalho do card */
  .item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: white;
  }
  
  /* Foto de perfil */
  .profile-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  
  /* Informações do cliente */
  .client-info {
    flex-grow: 1;
    margin-left: 10px;
    text-align: left;
  }
  
  .client-name {
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 0px;
  }
  
  /* Ícone do Google */
  .google-icon {
    width: 30px;
    height: 30px;
  }
  
  /* Seção de avaliação */
  .rating {
    display: flex;
    gap: 2px;
    margin-top: -5px;
  }
  
  .star {
    font-size: 1.5rem;
    color: #989898;
    cursor: default;
  }
  
  .star.rated {
    color: gold;
  }
  
  /* Container do comentário: altura fixa de 6 linhas (120px), alinhado à esquerda */
  .comment-wrapper {
    padding: 0 10px 10px;
    height: 130px; /* 6 linhas com line-height de 20px */
    line-height: 20px;
    overflow: hidden;
    text-align: left;
    color: #333;
    background-color: white;
    position: relative;
  }
  
  /* Conteúdo do comentário */
  .comment-content {
    height: 100%;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
    font-size: 13px;
  }
  
  .comment-wrapper.expanded .comment-content::-webkit-scrollbar {
    width: 3px;
  }
  .comment-wrapper.expanded .comment-content::-webkit-scrollbar-thumb {
    background-color: #666; /* Barra de scroll mais escura */
    border-radius: 1px;
  }
  .comment-wrapper.expanded .comment-content::-webkit-scrollbar-track {
    background: transparent;
  }
  .comment-wrapper.expanded .comment-content::-webkit-scrollbar-button {
    display: none;
  }
  
  /* Link "Leia mais" */
  .read-more {
    cursor: pointer;
    font-weight: bold;
    color: #333;
  }
  
  /* Estilos personalizados para os botões de seta */
  .carousel-arrow {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s;
  }
  
  .carousel-arrow:hover {
    transform: scale(1.1);
  }
  
  .carousel-arrow:active {
    transform: scale(0.9);
  }
  
  .carousel-arrow img {
    width: 2rem;
    height: 3.375rem;
    transition: transform 0.2s ease;
  }
  
  .carousel-arrow.next img {
    transform: scaleX(-1);
  }