/* Previne barra de rolagem horizontal */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    overflow-x: hidden;
    /* Desativa a rolagem horizontal */
    width: 100%;
}

/* Estilo geral do cabeçalho */
header .container-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Alinha verticalmente os itens no centro */
    padding: 20px;
    background-color: rgb(16, 49, 67);
    /* Azul especificado pelo usuário */
}

/* Logo */
.logo img {
    height: 10vh;
}

/* Menu */
nav {
    display: flex;
    gap: 20px;
    /* Ajuste a distância entre os itens do menu */
    order: 2;
    /* Coloca o menu depois da logo */
    align-items: center;
    /* Centraliza o menu verticalmente */
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

/* Links do menu */
nav ul li {
    display: inline;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #FFD700;
    /* Dourado */
}

/* Estilização da imagem no canto direito do menu */
.menu-image {
    margin-left: 10px;
    /* Reduzi o espaçamento entre o menu e a imagem */
}

.menu-image img {
    height: 50%;
    /* Ajusta a altura para 50%, mas pode ser alterado conforme necessário */
    max-height: 80px;
    /* Define uma altura máxima para a imagem */
    width: auto;
    object-fit: contain;
    /* Garante que a imagem seja redimensionada sem distorção */
}

/* Ajuste de ordem no header */
header>.logo {
    order: 1;
    /* Garante que a logo venha antes */
}

header>nav {
    order: 2;
    /* Garante que o menu venha depois da logo */
}

header>.menu-image {
    order: 3;
    /* Garante que a imagem venha no final, ou seja, do lado direito */
}

section {
    background: linear-gradient(to right, #001F3F, #004F6D, #001F3F);
    /* Gradiente mais próximo do tom do header */
    padding: 20px;
    color: white;
}

/* Estilo do slider */
.slider {
    position: relative;
    width: 98%;
    height: 40vh;
    margin: 2% auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
}

.slide img {
    width: 100%;
    height: 40vh;
    /* A imagem vai cobrir o espaço sem distorcer, cortando o excesso */
    display: block;
}

/* Botões de navegação do slider */
.prev,
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Seção de Serviços */
#servicos {
    text-align: center;
    padding: 50px 0;
    background-color: #002F4B;
    /* Azul escuro intermediário */
}

#servicos h2 {
    font-size: 2.5em;
    margin-bottom: 50px;
    color: #CCCCCC;
}

/* Layout dos cards */
.cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* Cards */
.card {
    width: 350px;
    min-height: 500px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background: #003F6B;
    /* Azul mais claro que o fundo */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    transition: transform 0.3s ease, background 0.3s;
    color: white;
}

.card:hover {
    transform: translateY(-10px);
    background: #005F8A;
    /* Azul um pouco mais claro no hover */
}

/* Imagem do Card */
.card-image {
    width: 200px;
    height: 200px;
    background-color: white;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

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

/* Conteúdo do Card */
.card-content {
    text-align: center;
}

.card-content h3 {
    font-size: 1.5em;
    color: #FFD700;
    /* Dourado para destaque */
    margin-bottom: 10px;
}

.card-content p {
    font-size: 1em;
    color: #EEE;
    padding: 0 10px;
}

/* Seção de Sobre Nós */
#sobre {
    text-align: center;
    padding: 50px 0;
    background-color: #002F4B;
    /* Azul escuro intermediário */
}

#sobre h2 {
    font-size: 2.5em;
    margin-bottom: 50px;
    color: #CCCCCC;
}

/* Card de fundo com a imagem */
.sobre-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 98%;
    height: 80vh;
    /* Altura maior para a imagem */
    background-color: transparent;
    padding: 20px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-wrap: wrap;
}

/* Imagem de fundo no canto esquerdo */
.sobre-imagem {
    flex: 1;
    position: relative;
}

.sobre-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(50%);
    /* Diminui o brilho da imagem para deixar opaca */
}

/* Texto dentro do card */
.sobre-texto {
    position: absolute;
    right: 2%;
    /* Alinha o texto à direita */
    color: white;
    text-align: left;
    z-index: 1;
    padding: 20px;
    font-family: Arial, sans-serif;
    max-width: 60%;
    /* Limita o tamanho do texto */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
    /* Dá um efeito de sombra no texto */
    font-size: 1.2vw;
}

/* Footer */
footer {
    display: flex;
    flex-direction: column;
    background-color: #002F4B;
    /* Fundo do footer */
    color: #fff;
    padding: 30px;
}

/* Container do conteúdo do footer */
.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 20px;
}

/* Seção de Contato (lado direito) */
.footer-right {
    flex: 1;
    /* A seção de contato ocupa o restante do espaço */
    text-align: left;
    background-color: #002F4B;
    /* Garantir que o fundo seja transparente */
}

/* Seção de Parceiros (lado esquerdo) */
.footer-left {
    flex: 0.6;
    /* Reduz a largura da seção de parceiros para 60% */
    text-align: center;
    background-color: #002F4B;
    /* Garantir que o fundo seja transparente */
}

.parceiros-container {
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
    flex-wrap: wrap;
}

/* Item de Parceiro */
.parceiro-item {
    flex: 1;
    max-width: 20%;
    /* Limita a largura das imagens */
    min-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parceiro-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.contato-info ul {
    list-style: none;
    padding: 0;
}

.contato-info li {
    font-size: 1.1rem;
    margin: 10px 0;
}

.contato-info a {
    color: #25D366;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.whatsapp-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

/* Texto de direitos autorais */
.footer-center {
    text-align: center;
    /* Centraliza o texto */
    margin-top: 20px;
}

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

    /* Footer */
    footer {
        display: flex;
        flex-direction: column;
        background-color: #002F4B;
        width: 100%;
        /* Fundo do footer */
        color: #fff;
        padding: 30px;
    }

    /* Texto de direitos autorais */
    .footer-center {
        text-align: center;
        /* Centraliza o texto */
        margin-top: 20px;
    }

    .footer-content {
        flex-direction: column;
        /* Em telas pequenas, as seções ficam uma embaixo da outra */
    }

    .footer-left,
    .footer-right {
        flex: 1;
        /* Cada seção ocupa toda a largura em telas pequenas */
        text-align: center;
        background-color: #002F4B;
    }


}

/* Responsividade para telas pequenas */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        width: 100%;
    }

    /* Ajuste do header */
    header .container-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 10px 0;
    }

    .menu-image img {
        height: 12vh;
        max-width: 100%;
    }

    /* Logo */
    .logo img {
        height: 8vh;
        /* Ajuste a altura do logo */
        max-width: 100%;
        /* Garante que o logo não ultrapasse a largura */
    }

    /* Menu de navegação */
    nav ul {
        display: flex;
        /* Alinha os itens verticalmente */
        gap: 5px;
        /* Reduz o espaçamento */
        width: 100%;
        padding: 0;
        justify-content: center;
        text-align: center;
    }

    nav ul li {
        list-style-type: none;
        /* Remove a bolinha do item da lista */
        display: inline-block;
        /* Exibe os itens ao lado */
    }

    nav ul li a {
        font-size: 16px;
        /* Ajuste no tamanho da fonte */
        text-decoration: none;
        /* Remove sublinhado */
        color: #fff;
        /* Cor do texto */
        display: block;
        /* Garante que o link ocupe toda a largura do item */
        padding: 10px;
        /* Espaçamento interno */
    }

    /* Ajustar containers de cartões */
    .cards-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        padding: 10px;
    }
    .footer-right  a{
        flex: 1;
        /* Cada seção ocupa toda a largura em telas pequenas */
        text-align: center;
        justify-content: center;
        background-color: #002F4B;
    }
}


/* Responsividade SOBRE */
@media ((min-width: 565px) and (max-width: 767px)) {
   
    .sobre-card {
        height: 70vh;
    }

    .sobre-texto h2 {
        font-size: 1.5rem;
    }

    .sobre-texto p {
        font-size: 0.9rem;
        line-height: 1.8;
        /* Aumenta o espaçamento entre as linhas */
        margin-bottom: 10px;
        /* Adiciona margem inferior para separar do próximo elemento */
    }


    /* Remover imagem na seção "Sobre Nós" em telas pequenas */
    .sobre-imagem {
        display: none;
    }

    /* Ajustar o texto para maior largura */
    .sobre-texto {
        max-width: 100%;
        /* Aumenta a largura do texto */
        padding: 15px;
        text-align: center;
        /* Centraliza o texto */
    }
}

/* Responsividade SOBRE */
@media ((min-width: 485px) and (max-width: 564px)) {
    .menu-image img {
        height: 0vh;
        max-width: 0%;
    }
    .sobre-texto h2 {
        font-size: 1.5rem;
    }

    .sobre-texto p {
        font-size: 0.9rem;
        line-height: 1.8;
        /* Aumenta o espaçamento entre as linhas */
        margin-bottom: 10px;
        /* Adiciona margem inferior para separar do próximo elemento */
    }


    /* Remover imagem na seção "Sobre Nós" em telas pequenas */
    .sobre-imagem {
        display: none;
    }

    /* Ajustar o texto para maior largura */
    .sobre-texto {
        max-width: 100%;
        /* Aumenta a largura do texto */
        padding: 15px;
        text-align: center;
        /* Centraliza o texto */
    }
}

@media (max-width: 484px) {
    .menu-image img {
        height: 0vh;
        max-width: 0%;
    }
    .sobre-card {
        height: 90vh;
    }

    .sobre-texto h2 {
        font-size: 1.2rem;
    }

    .sobre-texto p {
        font-size: 0.8rem;
        line-height: 1.8;
        /* Aumenta o espaçamento entre as linhas */
        margin-bottom: 10px;
        /* Adiciona margem inferior para separar do próximo elemento */
    }


    /* Remover imagem na seção "Sobre Nós" em telas pequenas */
    .sobre-imagem {
        display: none;
    }

    /* Ajustar o texto para maior largura */
    .sobre-texto {
        max-width: 100%;
        /* Aumenta a largura do texto */
        padding: 15px;
        text-align: center;
        /* Centraliza o texto */
    }
    /* Menu de navegação */
    nav ul {
        display: flex;
        flex-direction: column;
        /* Alinha os itens verticalmente */
        gap: 0px;
        /* Reduz o espaçamento */
        width: 100%;
        padding: 0;
        justify-content: center;
        text-align: center;
    }
}

/* Responsividade para telas pequenas slide */
@media (max-width: 768px) {
    .slider {
        position: relative;
        width: 100%;
        height: 20vh;
        margin: 2% auto;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .slides img {
        width: 100%;
        /* A imagem ocupa toda a largura do slide */
        height: 20vh;
        /* A imagem ocupa toda a altura do slide */
        object-fit: cover;
        /* A imagem vai cobrir o espaço sem distorção */
        object-position: center;
        /* Centraliza a imagem dentro do slide */
    }
}