/* Geral */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;

   
		
}

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

h1,
h2,
h3 {
    font-weight: 700;
    margin-bottom: 1rem;
    color: #2c3e50;
}

p {
    margin-bottom: 1.5rem;
    color: #555;
}

a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #2980b9;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #3498db;
    color: #fff;
    border-radius: 0px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #2980b9;
}

/* Header */
header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

header .logo img {
    height: 50px;
}

/* Estilos para o menu-wrapper (adicionado) */
header nav .menu-wrapper {
    display: flex;
    /* Garante que o menu-wrapper ocupe a largura total disponível */
    flex-grow: 1;
    /* Permite que o menu-wrapper expanda para preencher o espaço */
    justify-content: flex-end;
    /* Alinha os itens à direita */
}

header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

header nav ul li {
    margin-left: 20px;
}

header nav ul li:first-child {
    margin-left: 0;
}

header nav ul li a {
    color: #2c3e50;
    font-weight: 600;
    display: block;
    padding: 10px 0;
}

/* Language Button */
header nav ul li button {
    background: none;
    border: none;
    color: #2c3e50;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.3s ease;
}

header nav ul li button:hover {
    color: #3498db;
}

/* Estilos para o menu toggle (hambúrguer) */
.menu-toggle {
    background: none;
    border: none;
    color: #2c3e50;
    cursor: pointer;
    font-size: 1.5rem;
    display: none;
    /* Escondido por padrão em telas maiores */
}

/* Hero Section */
#hero {
    background: url("back.png") no-repeat center center;
    background-color: #ecf0f1;
    padding: 80px 0;
    background-size: cover
    /* Reduzindo o padding */
}

#hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#hero .hero-content {
    flex: 1;
    padding-right: 20px;
}

#hero .hero-content h1 {
    font-size: 2.5rem;
    /* Reduzindo o tamanho da fonte */
}

#hero .hero-content p {
    font-size: 1.1rem;
    /* Reduzindo o tamanho da fonte */
}

#hero .hero-image {
    flex: 1;
    text-align: center;
}

#hero .hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Sobre Nós */
#sobre {
    padding: 60px 0;
    /* Reduzindo o padding */
}

#sobre .container {
    text-align: center;
}

/* Serviços */
#servicos {
    background-color: #fff;
    padding: 60px 0;
    /* Reduzindo o padding */
}

#servicos .container {
    text-align: center;
}

#servicos .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
    /* Reduzindo a margem superior */
}

#servicos .card {
    background-color: #f9f9f9;
    padding: 20px;
    /* Reduzindo o padding */
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

#servicos .card:hover {
    transform: translateY(-5px);
}

#servicos .card i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #3498db;
}

/* Diferenciais */
#diferenciais {
    padding: 60px 0;
    /* Reduzindo o padding */
}

#diferenciais .container {
    text-align: left;
}

#diferenciais ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#diferenciais li {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    /* Reduzindo a margem inferior */
}

#diferenciais li i {
    color: #3498db;
    font-size: 1.5rem;
    margin-right: 0.8rem;
    /* Reduzindo a margem direita */
}

/* Contato */
#contato {
    background-color: #fff;
    padding: 60px 0;
    /* Reduzindo o padding */
}

#contato .container {
    text-align: center;
}

#contato form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Reduzindo o gap */
}

#contato input,
#contato textarea {
    padding: 12px;
    /* Reduzindo o padding */
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
}

#contato button {
    padding: 12px 24px;
    /* Reduzindo o padding */
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    /* Reduzindo o tamanho da fonte */
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#contato button:hover {
    background-color: #2980b9;
}

/* Footer */
footer {
    background-color: #2c3e50;
    color: #fff;
    padding: 20px 0;
    /* Reduzindo o padding */
    text-align: center;
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .social-links a {
    color: #fff;
    font-size: 1.5rem;
    margin: 0 8px;
    /* Reduzindo a margem */
}

/* Floating WhatsApp Button */
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: #fff;
    padding: 12px;
    /* Reduzindo o padding */
    border-radius: 50%;
    font-size: 20px;
    /* Reduzindo o tamanho da fonte */
    text-decoration: none;
    z-index: 100;
    transition: background-color 0.3s ease;
}

.whatsapp-button:hover {
    background-color: #128c7e;
}

/* Hidden class for language toggle */
.hidden {
    display: none !important;
}

/* Media Queries para Responsividade */
@media (max-width: 768px) {
    header {
        position: static;
        /* Remove o posicionamento fixo */
    }

    header .container {
        flex-direction: row;
        /* Mantém os itens em linha */
        align-items: center;
        /* Alinha verticalmente */
        position: relative;
        /* Importante para o posicionamento absoluto do menu */
    }

    header .logo {
        margin-bottom: 0;
        /* Remove a margem inferior */
    }

    /* Mostra o menu toggle (hambúrguer) */
    .menu-toggle {
        display: block;
    }

    /* Esconde o menu-wrapper por padrão */
    header nav .menu-wrapper {
        display: none;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 100%;
        /* Posiciona abaixo do header */
        left: 0;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 10;
    }

    /* Estilos para o menu-wrapper quando ativo */
    header nav .menu-wrapper.active {
        display: block;
    }

    header nav ul


/* Bandeiras no seletor de idioma */
header nav ul li button img {
    width: 20px;
    height: auto;
    vertical-align: middle;
}
}