@font-face {
    font-family: gotham;
    src: url(fonts/Gotham-Bold.otf);
}

body {
    margin: 0;
    padding: 0;
    font-family: gotham, sans-serif;
    overflow-y: auto;
}

.navigation-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    background-color: #004aad;
    padding: 10px 20px;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: center;
    justify-content: space-between;
    align-items: center;
}

.navigation-bar ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.navigation-bar li {
    margin: 0;
}

.navigation-bar a {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Gotham Bold', sans-serif;
    font-size: 18px;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.navigation-bar a:hover {
    background-color: #ffcc00;
    color: #004aad;
}

.menu-icon {
    display: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

/* Responsividade */
@media (max-width: 768px) {
    .navigation-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .menu-icon {
        display: block;
    }

    .navigation-bar ul {
        display: none;
        /* Esconde o menu inicialmente */
        flex-direction: column;
        /* Alinha os itens em coluna */
        width: 100%;
        background-color: #004aad;
        padding: 60px 0;
    }

    .navigation-bar.active ul {
        display: flex;
        /* Mostra o menu quando ativo */
    }

    .navigation-bar li {
        width: 100%;
        text-align: left;
        padding: 10px 0;
    }

    .navigation-bar a {
        display: block;
        width: 100%;
        padding: 15px;
    }
}



html {
    scroll-behavior: smooth;
}

.whatsapp-button {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: white;
}

.whatsapp-button img {
    width: 35px;
    height: 35px;
}

.whatsapp-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}



/* Seção Inicial */
.section-inicial {
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    width: 100%;
    /* Garante que ocupe 100% da largura da tela */
    height: 100vh;
    background: radial-gradient(circle, #5de0e6 0%, #004aad 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Evita que elementos extras causem scroll */
    margin: 0;
    /* Remove qualquer margem */
    padding: 0;
    /* Remove qualquer padding */
}

/* Flocos de Neve */
.snowflakes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* Garante que ocupe toda a largura da tela */
    height: 100vh;
    /* Garante que ocupe toda a altura da tela */
    background-image: url(assets/snowflakes.png);
    background-size: contain;
    background-repeat: repeat;
    pointer-events: none;
    /* Não interfere nos cliques */
    z-index: 0;
    /* Fica atrás dos outros elementos */
}


/* Logo */
.logo-inicio {
    max-width: 650px;
    /* Limita o tamanho máximo da logo */
    width: 90%;
    /* Faz a logo ocupar 90% da largura disponível */
    height: auto;
    /* Mantém a proporção da imagem */
    z-index: 1;
    /* Garante que a logo fique acima dos flocos de neve */
}

.logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Ajusta a imagem sem distorções */
}

/* Responsividade */
@media (max-width: 768px) {
    .section-inicial {
        justify-content: center;
        padding: 20px;
        /* Espaço interno para dispositivos pequenos */
    }

    .logo-inicio {
        width: 200px;
        /* Aumenta o limite máximo da logo */
    }

    .snowflakes {
        background-size: cover;
        /* Faz os flocos preencherem a tela no mobile */
        opacity: 0.5;
        /* Reduz a opacidade no mobile */
    }
}



/* Seção principal */
.section-armazem {
    display: flex;
    flex-direction: row;
    /* Layout lado a lado no desktop */
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    /* Previne elementos flutuantes */
}

/* Coluna esquerda - Texto e logo */
.coluna-esquerda {
    flex: 1;
    background: radial-gradient(circle, #5de0e6 0%, #004aad 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centraliza verticalmente */
    align-items: center;
    /* Centraliza horizontalmente */
    padding: 40px;
    color: white;
    text-align: left;
    position: relative;
    /* Necessário para o posicionamento correto do logo */
}

.coluna-esquerda .texto {
    margin-bottom: 200px;
    /* Espaçamento fixo entre o texto e o logo */
}

.coluna-esquerda .texto h1 {
    font-family: 'Gotham Bold', sans-serif;
    font-size: 2.5rem;
    line-height: 1.4;
    /* Espaçamento entre linhas */
    margin-bottom: 50px;
    /* Espaçamento abaixo do texto */
    line-height: 0.5;
}

.coluna-esquerda .logo-pequeno img {
    width: 100px;
    /* Tamanho do logo */
    height: auto;
    margin-top: 0;
    /* Zera a margem superior */
    position: relative;
    /* Garante que o logo não afete o texto */
}

/* Coluna direita - Imagem */
.coluna-direita {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
    /* Fundo neutro */
    overflow: hidden;
    /* Remove bordas flutuantes */
}

.coluna-direita img {
    width: 100%;
    /* Imagem ocupa a largura total */
    height: 100%;
    /* Imagem ocupa a altura total */
    object-fit: cover;
    /* Preenche o espaço sem distorção */
}

/* Responsividade */
@media (max-width: 768px) {

    /* Seção principal */
    .section-armazem {
        display: flex;
        flex-direction: column;
        /* Layout de coluna no mobile */
        min-height: auto;
        /* Altura adaptável ao conteúdo */
    }

    /* Coluna esquerda - Texto e logo */
    .coluna-esquerda {
        padding: 20px;
        /* Ajuste do padding no mobile */
        justify-content: flex-start;
        /* Mantém os itens no topo */
        align-items: center;
        /* Centraliza o conteúdo */
    }

    .coluna-esquerda .texto {
        padding-top: 100px;
        /* Aumenta o espaço superior para descer o texto */
        margin-bottom: 30px;
        /* Ajuste o espaçamento do texto */
        width: 100%;
        /* Garante que o texto ocupe toda a largura */
        text-align: left;
        /* Centraliza o texto */
    }

    .coluna-esquerda .texto h1 {
        font-family: 'Gotham Bold', sans-serif;
        font-size: 1.3rem;
        /* Tamanho menor para dispositivos móveis */
        line-height: 1.4;
        margin-bottom: 20px;
        /* Espaçamento ajustado para o logo */
    }

    .coluna-esquerda .logo-pequeno {
        margin-top: 20px;
        /* Ajuste o espaço entre o logo e o texto */
        display: flex;
        justify-content: center;
    }

    .coluna-esquerda .logo-pequeno img {
        width: 80px;
        height: auto;
    }

    /* Coluna direita - Imagem */
    .coluna-direita {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f4f4f4;
        /* Fundo neutro */
        overflow: hidden;
    }

    .coluna-direita img {
        width: 100%;
        /* Imagem ocupa a largura total */
        height: auto;
        /* Imagem ajustada ao tamanho */
        object-fit: cover;
        /* Preenche o espaço sem distorção */
    }
}





/* Seção "Quem Somos" */
.section-quem-somos {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: radial-gradient(circle, #5de0e6 0%, #004aad 100%);
    overflow: hidden;
    /* Evita que qualquer conteúdo ultrapasse a seção */
}

/* Coluna esquerda - Imagem */
.section-quem-somos .coluna-esquerda {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Garante que a imagem se ajuste ao container */
    padding: 0;
    /* Remove qualquer padding que possa causar a borda */
    margin: 0;
    /* Remove margem para evitar que a imagem tenha bordas indesejadas */
}

/* Imagem da coluna esquerda */
.section-quem-somos .coluna-esquerda img {
    width: 100%;
    /* Faz a imagem ocupar 100% da largura */
    height: 100%;
    /* Faz a imagem ocupar 100% da altura */
    object-fit: cover;
    /* Garante que a imagem cubra o espaço sem distorção */
    margin: 0;
    /* Remove qualquer margem ao redor da imagem */
    padding: 0;
    /* Remove qualquer padding da imagem */
}

/* Coluna direita - Texto */
.section-quem-somos .coluna-direita {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Alinha o texto à direita */
    padding: 25px;
    color: #ffffff;
    text-align: right;
    /* Alinha o texto à direita */
    background: radial-gradient(circle, #5de0e6 0%, #004aad 100%);
    box-sizing: border-box;
    /* Garante que o padding não sobreponha o conteúdo */
    margin-right: 0;
    /* Remove qualquer margem à direita */
    margin-left: 0;
    /* Remove qualquer margem à esquerda */
    border: none;
    /* Garante que não haja borda */
}

/* Cabeçalho */
.section-quem-somos .coluna-direita h1 {
    font-family: 'Gotham Bold', sans-serif;
    font-size: 60px;
    color: #ffcc00;
    margin: 0 0 20px 0;
    text-align: right;
    width: 90%;
}

/* Parágrafo */
.section-quem-somos .coluna-direita p {
    font-family: 'Gotham Regular', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #ffffff;
    text-align: right;
    margin: 0;
    width: 90%;
}

/* Negrito para o texto */
.section-quem-somos .coluna-direita p .bold {
    font-family: 'Gotham Bold', sans-serif;
    font-weight: bold;
    color: #ffffff;
}

/* Responsividade para dispositivos menores */
@media (max-width: 768px) {
    .section-quem-somos {
        flex-direction: column;
        /* Layout de coluna no mobile */
        min-height: auto;
        /* Altura adaptável ao conteúdo */
    }

    /* Coluna esquerda (Imagem) */
    .section-quem-somos .coluna-esquerda {
        flex: 1;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        width: 100%;
        /* Ajusta a largura da imagem */
        height: 250px;
        /* Limita a altura da imagem no mobile */
    }

    .section-quem-somos .coluna-esquerda img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Garante que a imagem cubra o espaço sem distorção */
        margin: 0;
        /* Remove qualquer margem da imagem */
        padding: 0;
        /* Remove qualquer padding da imagem */
    }

    /* Coluna direita (Texto) */
    .section-quem-somos .coluna-direita {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        /* Alinha o texto ao centro */
        padding: 20px;
        color: #ffffff;
        text-align: center;
        /* Centraliza o texto no mobile */
        margin-right: 0;
        /* Remove a margem direita no mobile */
        margin-left: 0;
        /* Remove a margem esquerda no mobile */
    }

    .section-quem-somos .coluna-direita h1 {
        font-size: 2rem;
        /* Ajusta o tamanho da fonte para mobile */
        margin: 10px 0;
        text-align: center;
    }

    .section-quem-somos .coluna-direita p {
        font-size: 1rem;
        /* Ajusta o tamanho da fonte para mobile */
        line-height: 1.5;
        text-align: center;
        /* Centraliza o parágrafo */
    }
}



.section-produtos {
    min-height: 100vh;
    background: radial-gradient(circle, #5de0e6 0%, #004aad 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
    color: white;
}

.conteudo-centralizado h1 {
    font-family: 'Gotham Regular', sans-serif;
    font-size: 40px;
    color: white;
    text-align: center;
    margin: 50px 0 10px 0;
}

.conteudo-centralizado h2 {
    font-family: 'Gotham Regular', sans-serif;
    font-size: 40px;
    color: #ffcc00;
    text-align: center;
    margin: 10px 0 30px 0;
}

.container-icones {
    display: flex;
    justify-content: center;
    /* Alinha os itens no centro */
    align-items: center;
    gap: 30px;
    margin: 30px 0;
    flex-wrap: wrap;
    /* Permite quebrar a linha se necessário */
    justify-content: center;
    /* Centraliza os itens */
    width: 100%;
    /* Garante que o container ocupe toda a largura */
}

/* Estilo para os itens */
.item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    border: 4px solid white;
    border-radius: 20px;
    text-align: center;
    flex-shrink: 0;
}

.item .icone {
    width: 80px;
    height: 80px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 10px;
}

.item p {
    font-family: 'Gotham', sans-serif;
    font-size: 20px;
    color: #ffcc00;
    margin: 0;
}

.texto-final p {
    font-family: 'Gotham Regular', sans-serif;
    font-size: 50px;
    color: #ffcc00;
    text-align: center;
    margin: 20px 0 0 0;
}

/* Mobile */
@media (max-width: 768px) {
    .container-icones {
        overflow-x: auto;
        /* Habilita a rolagem horizontal */
        display: flex;
        gap: 10px;
        padding-bottom: 10px;
        /* Garante que a rolagem não se sobreponha */
        justify-content: center;
        /* Alinha ao centro no mobile */
    }

    .item {
        width: 130px;
        /* Ajusta o tamanho para telas menores */
        height: 130px;
    }
}



.section-nossos-servicos {
    display: flex;
    min-height: 100vh;
    box-sizing: border-box;
    height: 100vh;
    background: radial-gradient(circle, #5de0e6 0%, #004aad 100%);
    /* Aplica o mesmo fundo */
}

.section-nossos-servicos .coluna-esquerda {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Garante que a imagem se ajuste ao container */
}

.section-nossos-servicos .coluna-esquerda img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Garante que a imagem ocupe toda a área sem distorção */
}

.section-nossos-servicos .coluna-direita {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Alinha o conteúdo à esquerda */
    padding: 20px;
    color: #ffffff;
    text-align: right;
    /* Alinha o texto à direita */
    background: radial-gradient(circle, #5de0e6 0%, #004aad 100%);
    /* Aplica o mesmo fundo */
}

.section-nossos-servicos .coluna-direita h1 {
    font-family: 'Gotham Bold', sans-serif;
    font-size: 60px;
    color: #ffcc00;
    margin: 0 0 20px 0;
    text-align: right;
    width: 90%;
    /* Ajusta largura do texto */
}

.section-nossos-servicos .coluna-direita p {
    font-family: 'Gotham Regular', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #ffffff;
    text-align: right;
    margin: 0;
    width: 90%;
    /* Ajusta largura do texto */
}

.section-nossos-servicos .coluna-direita p .bold {
    font-family: 'Gotham Bold', sans-serif;
    font-weight: bold;
    color: #ffffff;
    /* Mesmo tom de branco */
}

/* Responsividade */
@media (max-width: 768px) {
    .section-nossos-servicos {
        flex-direction: column;
        /* Alinha as colunas na vertical no mobile */
    }

    .section-nossos-servicos .coluna-esquerda,
    .section-nossos-servicos .coluna-direita {
        flex: 1 1 auto;
        /* Garante que ambas as colunas tenham a mesma largura */
    }

    .section-nossos-servicos .coluna-direita {
        text-align: left;
        /* No mobile, alinha o texto à esquerda */
    }

    .section-nossos-servicos .coluna-direita h1 {
        font-size: 40px;
        /* Ajuste para tamanhos menores no mobile */
    }

    .section-nossos-servicos .coluna-direita p {
        font-size: 16px;
        /* Ajuste para tamanhos menores no mobile */
    }
}



.section-servicos-2 {
    background-color: white;
    padding: 60px 20px;
    text-align: center;
    color: #004aad;
}

.section-servicos-2 h1 {
    font-family: 'Gotham Bold', sans-serif;
    font-size: 60px;
    color: #004aad;
    margin-bottom: 40px;
}

.container-servicos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* faz as 3 colunas */
    gap: 80px;
    justify-items: center;
    /* Alinha os itens no centro */
    margin-top: 40px;
}

.servico-item {
    text-align: center;
    color: #004aad;
}

.icone {
    width: 90x;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 20px;
}

.servico-item h2 {
    font-family: 'Gotham Bold', sans-serif;
    font-size: 30px;
    color: #004aad;
    margin-bottom: 10px;
}

.servico-item p {
    font-family: 'Gotham Regular', sans-serif;
    font-size: 20px;
    color: black;
    line-height: 1.5;
    text-align: center;
}

.servico-item strong {
    font-family: 'Gotham Bold', sans-serif;
    color: black;
    /*Negrito*/
}

@media screen and (max-width: 768px) {
    .container-servicos {
        grid-template-columns: 1fr;
        /* Para telas menores, 1 coluna */
        gap: 20px;
    }
}



/* Estilo para a seção de rodovias */
.section-rodovias {
    position: relative;
    padding: 50px 20px;
    background: radial-gradient(circle, #5de0e6 0%, #004aad 100%);
    text-align: center;
    color: #ffffff;
}

.section-rodovias h1 {
    font-size: 60px;
    color: #ffcc00;
    margin-bottom: 30px;
    font-family: 'Gotham Bold', sans-serif;
}

/* Layout da área de conteúdo */
.content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* Mapa */
.map-container {
    flex: 1;
    max-width: 60%;
    height: 500px;
    border: 2px solid #ffcc00;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    min-height: 300px;
    display: block;
    margin-bottom: 20px;
    /* Espaçamento entre o mapa e outros elementos */
}

#map {
    width: 100%;
    height: 100%;
    min-height: 100px;
    /* Altura mínima do mapa */
}

/* Contêiner de texto */
.text-container {
    flex: 1;
    max-width: 35%;
    text-align: center;
    font-size: 18.3px;
}

.text-container p {
    margin-bottom: 20px;
    font-size: 20px;
    color: #ffffff;
}

/* Logo */
.logo-container {
    text-align: center;
    margin-bottom: 10px;
}

.logo {
    max-width: 30%;
    height: auto;
}

/* Estilo da tabela */
.info-table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* 3 colunas no desktop */
    gap: 20px;
    margin-top: 20px;
    text-align: left;
}

/* Alinhamento das colunas da tabela */
.info-table .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Alinhamento dos textos da tabela */
.info-table p {
    margin: 5px 0;
    font-size: 20px;
    color: #ffffff;
    white-space: nowrap;
    /* Impede quebras nas rodovias */
}

/* Responsividade para telas médias (Mobile) */
@media (max-width: 768px) {
    .section-rodovias {
        padding: 50px 10px;
    }

    .content-wrapper {
        flex-direction: column;
        align-items: center;
    }

    /* Ajustes no mapa */
    .map-container {
        .map-container {
            display: none;
            /* Oculta o mapa */
        }

    }

    #map {
        height: 100%;
        min-height: 250px;
    }

    /* Ajuste na coluna de texto */
    .text-container {
        max-width: 90%;
        text-align: left;
    }

    /* Tabela no mobile com 3 colunas */
    .info-table {
        grid-template-columns: 1fr 1fr 1fr;
        /* 3 colunas */
        gap: 10px;
        width: 100%;
        /* Garante que a tabela ocupe 100% da largura */
    }

    .info-table .column {
        display: block;
        width: 100%;
        /* Garante que as colunas ocupem toda a largura disponível */
    }

    .info-table p {
        font-size: 18px;
        margin: 5px 0;
        white-space: normal;
        /* Permite quebra de linha nas colunas */
    }
}

.snowflakes {
    background-size: cover;
    /* Faz os flocos preencherem a tela no mobile */
    opacity: 0.5;
    /* Reduz a opacidade no mobile */
}

/* Ajustes para telas muito pequenas */
@media (max-width: 480px) {
    .section-rodovias {
        padding: 30px 10px;
    }

    /* Ajustes no mapa para telas pequenas */
    .map-container {
        display: none;
        /* Oculta o mapa */
    }

    #map {
        height: 100%;
    }

    .text-container {
        max-width: 90%;
        font-size: 16px;
    }

    /* Ajustes na tabela para telas muito pequenas */
    .info-table {
        grid-template-columns: 1fr 1fr;
        /* 2 colunas */
        gap: 10px;
    }

    .info-table p {
        margin: 5px 0;
        font-size: 16px;
    }
}

/* Garantir que o mapa tenha altura correta no mobile */
@media (max-width: 768px) {
    .map-container {
        max-width: 100%;
        height: 300px;
        min-height: 300px;
        margin-bottom: 20px;
    }

    #map {
        width: 100%;
        height: 100%;
    }
}

/* Ajustes na tabela para garantir 3 colunas no mobile */
.info-table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* 3 colunas no desktop */
    gap: 20px;
    margin-top: 20px;
    text-align: left;
    width: 100%;
    /* Garantir que a tabela ocupe toda a largura */
}

/* Para mobile, ajustar as colunas para 3 */
@media (max-width: 768px) {
    .info-table {
        grid-template-columns: repeat(3, 1fr);
        /* 3 colunas igualmente distribuídas */
        gap: 10px;
        width: 100%;
        /* A tabela ocupará 100% da largura */
    }

    /* Ajustar o conteúdo das colunas para evitar quebra */
    .info-table .column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .info-table p {
        font-size: 18px;
        margin: 5px 0;
        white-space: normal;
        /* Permitir quebras de linha para o conteúdo */
    }
}

@media (max-width: 480px) {
    .info-table {
        grid-template-columns: repeat(3, 1fr);
        /* 3 colunas para telas pequenas */
        gap: 10px;
    }

    .info-table p {
        font-size: 16px;
    }
}



/* Estilo para a seção de regiões nas proximidades */
.section-regioes {
    position: relative;
    padding: 50px 20px;
    background: #ffffff;
    text-align: center;
    color: white;
}

.section-regioes h1 {
    font-family: 'Gotham Bold', sans-serif;
    font-size: 50px;
    color: #004aad;
    /* Cor do título */
    text-transform: uppercase;
    margin-bottom: 20px;
    /* Aumentei um pouco o espaçamento abaixo */
}

/* Estilo do contêiner de imagem */
.image-container {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    /* Espaçamento abaixo da imagem */
}

/* Ajuste na imagem para garantir que ela fique responsiva */
.image-container img {
    width: 100%;
    /* Faz a imagem ocupar toda a largura do contêiner */
    height: auto;
    max-width: 800px;
    /* Tamanho máximo da imagem */
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .section-regioes h1 {
        font-size: 40px;
        /* Tamanho do título reduzido em telas menores */
    }

    .image-container img {
        max-width: 90%;
        /* A imagem ocupa 90% da largura da tela */
    }
}

@media (max-width: 480px) {
    .section-regioes h1 {
        font-size: 30px;
        /* Tamanho do título ainda menor em dispositivos muito pequenos */
    }

    .image-container img {
        max-width: 100%;
        /* A imagem ocupa toda a largura da tela */
    }
}



/* Estilo para a seção de controle de temperatura */
.section-controle-temperatura {
    position: relative;
    padding: 50px 20px;
    background: #ffffff;
    text-align: center;
    color: #004aad;
}

.section-controle-temperatura h1 {
    font-family: 'Gotham Bold', sans-serif;
    font-size: 40px;
    text-transform: uppercase;
    color: #004aad;
    margin-bottom: 20px;
}

.section-controle-temperatura p {
    font-family: 'Gotham Regular', sans-serif;
    font-size: 19px;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.section-controle-temperatura .bold {
    font-family: 'Gotham Bold', sans-serif;
    font-weight: bold;
}

.image-container-temperatura {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
}

.image-container-temperatura img {
    max-width: 80%;
    height: auto;
    width: 1000px;
    height: 550px;
    border-radius: 15px;
}

/* Esconder a imagem em dispositivos móveis */
@media (max-width: 768px) {
    .image-container-temperatura {
        display: none;
    }
}



.section-principais-clientes {
    display: flex;
    flex-wrap: wrap;
    /* Permite que os elementos quebrem para uma nova linha */
    align-items: stretch;
    width: 100%;
    min-height: 500px;
    position: relative;
}

.content-wrapper-principais-clientes {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.logos-container-principais-clientes {
    flex: 1;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 50px 20px;
    order: 1;
    /* Logos aparecem por último no mobile */
}

.logos-container-principais-clientes .logo {
    max-width: 45%;
    height: auto;
}

.text-container-principais-clientes {
    flex: 1;
    background: radial-gradient(circle, #5de0e6 0%, #004aad 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Garante que o texto fique alinhado à esquerda */
    padding: 50px;
    position: relative;
    order: 0;
    /* Garante que o texto apareça antes no mobile */
}

.text-container-principais-clientes h1 {
    font-family: 'Gotham Bold', sans-serif;
    font-size: 50px;
    margin-bottom: 20px;
    color: #ffcc00;
    text-align: left;
    /* Alinha o título à esquerda */
}

.text-container-principais-clientes p {
    font-family: 'Gotham Regular', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    color: #ffffff;
    text-align: left;
    /* Alinha o texto à esquerda */
}

.text-container-principais-clientes .bold {
    font-family: 'Gotham Bold', sans-serif;
    font-weight: bold;
    color: #ffffff;
}

.text-container-principais-clientes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('assets/snowflakes.png');
    background-size: cover;
    opacity: 0.2;
    z-index: 0;
    /* Fundo atrás de tudo */
}

.text-container-principais-clientes * {
    position: relative;
    z-index: 1;
    /* Conteúdo acima do fundo */
}

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    .section-principais-clientes {
        flex-direction: column;
        /* Muda para layout vertical */
    }

    .logos-container-principais-clientes {
        flex: 1 1 100%;
        justify-content: space-around;
        flex-wrap: wrap;
        /* Permite que as logos quebrem para a linha */

        gap: 10px;
    }

    .logos-container-principais-clientes .logo {
        max-width: 40%;
        /* Ajusta o tamanho das logos no mobile */
    }

    .text-container-principais-clientes {
        flex: 1 1 100%;
        padding: 30px;
        order: 0;
        /* Garante que o texto apareça primeiro */
    }
}



.section-contato {
    display: flex;
    flex-wrap: wrap;
    /* Permite que os elementos se ajustem em telas menores */
    justify-content: center;
    align-items: flex-start;
    padding: 50px 20px;
    background: radial-gradient(circle, #5de0e6 0%, #004aad 100%);
    color: #ffffff;
    gap: 40px;
}

.left-container {
    flex: 1;
    max-width: 100%;
    /* Garante que ocupe a largura total */
    text-align: left;
    font-family: 'Gotham Regular', sans-serif;
    margin-top: 30px;
    word-wrap: break-word;
    /* Garante que o texto longo quebre dentro da tela */
}

.left-container h1 {
    font-size: 50px;
    font-family: 'Gotham Bold', sans-serif;
    color: #ffcc00;
    margin-bottom: 30px;
}

.left-container p {
    font-size: 25px;
    margin-bottom: 20px;
    word-wrap: break-word;
    /* Quebra as palavras para que não saiam da tela */
    word-break: break-all;
    /* Força quebra de linha em palavras longas */
}

.right-container {
    flex: 1;
    max-width: 30%;
    /* Reduz a largura máxima do contêiner */
    background: #ffffff;
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    margin: 10px;
    /* Centraliza o contêiner na tela */
}

.right-container-h3 {
    font-size: 15px;
    font-family: 'Gotham Bold', sans-serif;
    color: #004aad;
}

.right-container .logo {
    width: 200px;
    margin-bottom: 20px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    /* Centraliza os itens no eixo vertical */
    align-items: left;
    /* Centraliza os itens no eixo horizontal */
}

/* Rótulos e inputs */
.contact-form label {
    font-family: 'Gotham Regular', sans-serif;
    font-size: 18px;
    color: #004aad;
    text-align: left;
    width: 100%;
    /* Garante que os rótulos e inputs ocupem toda a largura */
}

/* Input e Textarea */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #004aad;
    border-radius: 8px;
    font-family: 'Gotham Regular', sans-serif;
    font-size: 16px;
    max-width: 500px;
    /* Limita a largura máxima em dispositivos móveis */
}

/* Botão de Envio */
.contact-form button {
    background: #004aad;
    color: #ffffff;
    font-family: 'Gotham Bold', sans-serif;
    font-size: 18px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
    max-width: 500px;
    /* Limita a largura do botão também */
}

/* Botão de Envio em Hover */
.contact-form button:hover {
    background: #ffcc00;
    color: #004aad;
}

/* Ajuste de responsividade */
@media (max-width: 768px) {
    .right-container {
        max-width: 100%;
        padding: 20px;
    }

    .contact-form {
        width: 100%;
        gap: 15px;
        /* Reduz o espaço entre os campos em telas menores */
    }

    .left-container p {
        font-size: 14.5px;
        margin-bottom: 20px;
        word-wrap: break-word;
        /* Quebra as palavras para que não saiam da tela */
        word-break: break-all;
        /* Força quebra de linha em palavras longas */
    }

    .right-container-h3 {
        font-size: 14px;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form button {
        max-width: 90%;
    }
}





a {
    text-decoration: none;
    color: inherit;
}

/*
** BARRA DE ROLAGEM
*/

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #209aeb;
}

::-webkit-scrollbar-thumb {
    background: #0e89db;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0572bb;
}

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-thumb {
        background: #0e89db;
    }
}

/*
** NAVEGAÇÃO
*/

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.navbar a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    transition: background-color 0.3s, color 0.3s;
}

.navbar a:hover {
    background-color: #575757;
    border-radius: 4px;
}

.navbar .logo {
    font-size: 24px;
    font-weight: bold;
}

.navbar .nav-links {
    display: flex;
    gap: 10px;
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar .nav-links {
        flex-direction: column;
        width: 100%;
    }

    .navbar a {
        text-align: left;
        width: 100%;
    }
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("assets/snowflakes.png");
    background-repeat: repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 9999;
}

.footer {
    background-color: #2c3e50;
    color: #ecf0f1;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.5;
}

.footer a {
    color: #1abc9c;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer p {
    margin: 0;
}

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