/* Estilização geral */
html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
body {
    font-family: Arial, sans-serif;
    margin: 0; /* Remove margens padrão do body */
    width: 100%; /* Garante que o body ocupe 100% da largura */
    height: 100%; /* Garante que o body ocupe 100% da altura */
    padding: 0;
    text-align: center;
    background: url('https://afrastelecom.com.br/uploads/fundo.png') no-repeat center center fixed;
    background-size: cover;
    color: #333;
    

}

/* Header fixo */
header {
    background-color: #e4e4e6;
    color: rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    border-bottom: 4px solid #008080;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    height: 80px; /* Tamanho fixo do header */
}

/* Ajuste no main */
main {
    padding-top: 80px; /* Ajuste para o espaço do header fixo */
    position: relative; /* Adicionado para evitar sobreposição */
}

/* Estilo do menu no desktop */
header nav {
    display: flex; /* Exibe os itens do menu na horizontal */
    gap: 20px; /* Espaço entre os itens */
}

header nav ul {
    display: flex;
    gap: 20px; /* Espaço entre os itens de menu */
    padding: 0;
    margin: 0;
    list-style: none;
}

header nav a {
    color: #333;
    text-decoration: none;
    font-size: 1.2em;
}

header nav a:hover {
    color: #008080;
}
@media (min-width: 769px) {
    header nav {
        margin-right: 250px; /* Ajuste para trazer o menu mais para o lado */
    }
}

/* Logo */
.logo img {
    max-width: 280px; /* Largura máxima do logo */
}

/* Esconder o menu hamburguer no desktop */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
}
/* Responsividade - Celular */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Empilha logo e menu no celular */
        height: auto; /* Ajusta a altura do header para celular */
        padding: 15px;
    }

    header nav {
        display: none; /* Esconde o menu por padrão */
        flex-direction: column; /* Organiza os itens verticalmente */
        width: 100%;
        text-align: center;
        background-color: #e4e4e6; /* Cor de fundo para destacar o menu */
        position: absolute;
        top: 80px; /* Ajusta abaixo do header fixo */
        left: 0;
        padding: 10px 0;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    }

    header nav.active {
        display: flex; /* Exibe o menu quando a classe active é adicionada */
    }

    header nav ul {
        flex-direction: column; /* Alinha os itens na vertical */
        gap: 10px; /* Espaço entre os itens */
    }

    header nav ul li {
        width: 100%;
        padding: 10px 0;
    }

    header nav a {
        display: block;
        width: 100%;
        padding: 10px;
        font-size: 1.2em;
        color: #333;
        text-decoration: none;
    }

    header nav a:hover {
        background-color: #008080;
        color: white;
    }
}
    /* Logo */
    .logo {
        display: flex;
        align-items: center;
        margin-right: 20px; /* Espaçamento entre o logo e o menu */
    }
    .logo img {
        max-width: 280px; /* Largura máxima do logo */
        }
    /* Hero Section */   
    .hero-section h {
        color:rgb(0, 0, 0);
        font-size: 1em;
        margin-bottom: 10px;
    }
            
    /* Hero Section */
    .hero-section {
        padding: 80px 20px;
        margin-bottom: 20px;
        text-align: center;
    }
            
    .hero-section h1 {
        font-size: 1.8em; /* Reduzi de 2em para 1.8em */
    }
            
    .hero-section h2 {
        font-size: 1.5em; /* Reduzi de 1.7em para 1.5em */
    }
            
    .hero-section h3 {
        font-size: 1.2em; /* Reduzi de 1.4em para 1.2em */
        font-weight: normal; /* Deixa o texto mais leve */
        color: #444; /* Tom mais suave */
    }

    .hero-section p {
        font-size: 1.1em;
        color: #555;
    }

/* card3 para os card Nossas soluções */
    /* Container para centralizar os cards */
.card-container {
    display: flex;
    justify-content: center; /* Centraliza os cards na página */
    gap: 20px; /* Espaço entre os cards */
    flex-wrap: wrap; /* Garante que os cards se ajustem no celular */
    margin-top: 20px;
}

/* Ajuste do card */
.card3 {
    width: 35%; /* Largura dos cards */
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    background-color: #07AFAD;
    text-align: center;
    padding: 20px;
}

/* Hover dos cards */
.card3:hover {
    transform: scale(1.05);
}

/* Estilo para o texto dentro do card */
.card3 * { /* Aplica o estilo a todos os elementos dentro do card */
    color: white; /* Define a cor do texto como branco */
}

/* Ajuste para telas menores */
@media (max-width: 768px) {
    .card-container {
        flex-direction: column; /* Empilha os cards no celular */
        align-items: center;
    }

    .card3 {
        width: 90%; /* Ocupa quase toda a largura da tela no celular */
    }
}

    /* Container2 referente a Sobre Nós */ 

    .container2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #E4E4E6;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .left {
        text-align: right;
        padding-right: 20px;
        border-right: 5px solid #0047ab;
        flex: 1;
    }
    
    .left h1, .right h1 {
        color: #2dd4bf;
        font-size: 32px;
        font-weight: bold;
        margin: 0;
    }
    
    .left p {
        color: #444;
        margin-top: 10px;
        text-decoration: underline;
    }
    
    .right {
        padding-left: 20px;
        text-align: left;
        flex: 2;
    }
    
    .right h2 {
        color: #2dd4bf;
        font-size: 28px;
        font-weight: bold;
    }
    
    .right p {
        color: #444;
        text-align: center;
        font-size: 14px;
        line-height: 1.6;
    }
    
    /* Responsividade */
    @media (max-width: 768px) { /* Ajuste para telas menores que 768px (tablets/celulares) */
        .container2 {
            flex-direction: column; /* Alinha os elementos verticalmente */
            align-items: center; /* Centraliza horizontalmente */
            padding: 10px; /* Reduz o padding */
        }
    
        .left {
            text-align: center; /* Centraliza o texto à esquerda */
            padding-right: 0;
            border-right: none; /* Remove a borda */
            padding-bottom: 10px; /* Adiciona espaço abaixo */
            flex: 1; /* Garante que ocupe a largura total */
        }
    
        .left h1, .right h1, .right h2{
            font-size: 24px; /* Diminui o tamanho da fonte */
        }
    
        .right {
            text-align: center; /* Centraliza o texto à direita */
            padding-left: 0;
            padding-top: 10px; /* Adiciona espaço acima */
            flex: 1; /* Garante que ocupe a largura total */
        }
    
        .right p {
            text-align: center; /* Centraliza o texto do parágrafo */
            font-size: 12px; /* Diminui o tamanho da fonte */
        }
    }
    
    
    @media (max-width: 480px) { /* Ajuste para telas menores que 480px (celulares menores) */
        .left h1, .right h1, .right h2{
            font-size: 20px; /* Diminui ainda mais o tamanho da fonte */
        }
    
        .right p {
            font-size: 10px; /* Diminui ainda mais o tamanho da fonte */
        }
    }

    /* Localização e contato */
    /* Estilos para a seção de localização e contato */
#localizacao {
    background-color: #E4E4E6; /* Cor de fundo da seção */
    padding: 40px; /* Espaçamento interno da seção */
    min-height: 100vh;
}
#contato {
    background-color: #E4E4E6; /* Cor de fundo da seção */
    padding: 40px; /* Espaçamento interno da seção */
    min-height: 100vh;
}

/* Estilos para o contêiner principal */
.conteudo-localizacao {
    display: flex; /* Alinha os elementos lado a lado */
    align-items: flex-start; /* Alinha os itens ao topo */
    gap: 40px; /* Espaçamento entre os elementos */
}

/* Estilos para a div da esquerda (localização e contato) */
.esquerda {
    flex: 1; /* Ocupa metade da largura */
}

/* Estilos para os títulos */
.esquerda h2 {
    color: #333; /* Cor do título */
    margin-bottom: 20px;
}

/* Estilos para os detalhes de endereço e horário */
.endereco,
.horario {
    margin-bottom: 20px;
}

.endereco h3,
.horario h3 {
    color: #555; /* Cor do subtítulo */
    margin-bottom: 10px;
}

.endereco p,
.horario p {
    color: #777; /* Cor do texto */
}

/* Estilos para o formulário de contato */
.contato {
    margin-top: 40px; /* Espaçamento acima do formulário */
}

.contato label {
    display: block; /* Rótulo em cima do campo */
    margin-bottom: 5px;
    color: #555;
}

.contato input,
.contato textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
}

.contato textarea {
    height: 120px;
}

.contato button {
    background-color: #07AFAD; /* Cor do botão */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.contato button:hover {
    background-color: #07AFAD; /* Cor do botão ao passar o mouse */
}

/* Estilos para a div da direita (mapa) */
.direita {
    flex: 1; /* Ocupa metade da largura */
}

.direita iframe {
    width: 100%; /* Largura total do mapa */
    height: 450px; /* Altura do mapa */
    border: 0; /* Remove a borda do mapa */
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .conteudo-localizacao {
        flex-direction: column; /* Alinha os elementos verticalmente */
        gap: 20px; /* Espaçamento entre os elementos */
    }

    .esquerda,
    .direita {
        flex: 1; /* Ocupa toda a largura */
    }

    .direita iframe {
        height: 300px; /* Altura do mapa em telas menores */
    }
}
.container3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    background: url('https://afrastelecom.com.br/uploads/sigatel3.jpg') no-repeat center center fixed;
    background-size: cover;
    padding: 20px;
    font-family: sans-serif;
    height: 100vh;
    overflow: hidden;
}

@media (max-width: 768px) {
    .container3 {
        background: #000; /* Fundo preto */
    }
}

/* ... (resto do seu CSS) ... */

/* ... (resto do seu CSS) ... */

.titulo {
    text-align: center;
    margin-bottom: 20px;
    color: white;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%; /* Garante que os cards ocupem a largura total do container */
}

.card3:hover {
    transform: scale(1.05);
}

.card3-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.card3 img {
    width: 50px;
    margin-bottom: 10px;
}

.card3 h3,
.card3 p {
    color: white;
}

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

/* Responsividade */
@media (max-width: 768px) { /* Para telas menores que 768px (tablets/celulares) */
    .card3 {
        width: 48%; /* Dois cards por linha em telas menores */
    }

    .cards {
        gap: 10px; /* Espaçamento menor entre os cards */
    }

    .card3-content {
        padding: 15px; /* Padding menor dentro dos cards */
    }

    .card3 img {
        width: 40px; /* Imagem menor */
        margin-bottom: 5px;
    }

    .card3 h3 {
        font-size: 1.2em; /* Tamanho da fonte menor */
    }

    .card3 p {
        font-size: 0.9em; /* Tamanho da fonte menor */
    }
}

@media (max-width: 480px) { /* Para telas menores que 480px (celulares menores) */
    .card3 {
        width: 95%; /* Um card por linha em celulares */
    }

    .cards {
        gap: 5px; /* Espaçamento ainda menor */
    }

    .card3-content {
        padding: 10px; /* Padding ainda menor */
    }

    .card3 h3 {
        font-size: 1em; /* Tamanho da fonte ainda menor */
    }

    .card3 p {
        font-size: 0.8em; /* Tamanho da fonte ainda menor */
    }
}
/* Footer */
footer {
    background-color: rgb(0, 0, 0);
    color: #fff;
    padding: 15px;
    font-size: 0.8em;
    text-align: center;
    width: 100%;
    position: relative;
}

/* Responsividade */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: center;
        height: auto;
        padding: 15px;
    }

    header nav {
        width: 100%;
        text-align: center;
    }

    header nav ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Ajusta o espaçamento para telas menores */
    main {
        padding-top: 120px; /* Ajustando para telas menores */
    }

    footer {
        padding: 10px;
        font-size: 0.7em;
    }
}
    .container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    }
    .nossa-historia, .servicos, .contato2, .newsletter {
        width: 20%;
        margin-bottom: 20px;
        }
    h3 {
            font-size: 1.2em;
            margin-bottom: 10px;
            }
     ul {
            list-style: none;
            padding: 0;
            }
    li a {
            color: #fff;
             text-decoration: none;
        }
        /* Direitos reservados */
        .direitos-reservados {
        text-align: center;
        margin-top: 20px;
        }
        
        /* Suavização do scroll */
        html {
        scroll-behavior: smooth;
        }
        #nossa-historia {
        text-align: center; /* Centraliza o título */
        margin-top: 0; /* Remove qualquer margem extra */
        }
        .content {
            flex: 1; /* O conteúdo de texto ocupa o máximo de espaço disponível */
            color: white; /* Cor do texto para garantir o contraste */
            max-width: 600px; /* Limita a largura do texto para que ele não fique muito largo */
            }
            
            .image img {
            max-width: 100%;
            height: auto;
            max-width: 400px; /* Ajuste o tamanho máximo da imagem */
            border-radius: 8px; /* Bordas arredondadas para a imagem */
            }
            .container2 {
            display: flex;
            align-items: center;
            justify-content: space-between; 
            background: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            
            }
            .left {
            text-align: right;
            padding-right: 20px;
            border-right: 5px solid #0047ab;
            flex: 1;
            }
            .left h1, .right h1 {
            color: #2dd4bf;
            font-size: 32px;
            font-weight: bold;
            margin: 0;
            }
            .left p {
            color: #444;
            margin-top: 10px;
            text-decoration: underline;
            }
            .right {
            padding-left: 20px;
            text-align: left;
            flex: 2;
            
            }
            .right h2 {
            color: #2dd4bf;
            font-size: 28px;
            font-weight: bold;
            }
            .right p {
            color: #444;
            text-align: center;
            font-size: 14px;
            line-height: 1.6;
            }