@font-face {
    font-family: Grandiosity-Regular;
    src: url('Grandiosity-Regular.ttf');
}

body {
    font-family: Grandiosity-Regular;
    font-size: 22px;
    background-color: #111a35;
    color: rgb(255, 255, 255);
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 60px;
    color: white;
}

h2{
    font-size: 40px;
}

.bg-white {
    background-color: white; /* Fundo branco */
    color:rgb(0, 0, 0) ;
}


.custom-header {
    background-image: url(''); /* Substitua 'URL_DA_IMAGEM' pela URL da sua imagem */
    background-color: #111a35;
    background-size: cover; /* Faz a imagem cobrir toda a área do header */
    background-position: center; /* Centraliza a imagem */
    position: relative; /* Permite posicionar elementos filhos, se necessário */
}

.custom-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Adiciona um efeito de escurecimento */
    z-index: 1; /* Garante que o fundo esteja atrás do texto */
}

.custom-header h1,
.custom-header p,
.custom-header a {
    position: relative; /* Necessário para garantir que o texto fique acima do fundo */
    z-index: 2; /* O texto deve estar acima do fundo e do pseudo-elemento */
}

header {
    background: url('https://via.placeholder.com/1920x400') no-repeat center center;
    background-size: cover;
    height: 400px; /* Ajuste a altura do header */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Sombra para o cabeçalho */
}

.card {
    margin-bottom: 20px;
    background-color: #111a35;
    padding: 20px; /* Adicionando um padding */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Sombra nos cards */
}

blockquote {
    border-left: 5px solid #007bff;
    padding-left: 15px;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.1); /* Fundo sutil para o bloco de citações */
    border-radius: 4px; /* Cantos arredondados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra nas citações */
}

/* Adicionando sombra nas seções */
section {
    box-shadow: none;
    border-radius: 8px; /* Cantos arredondados nas seções */
    padding: 20px; /* Espaçamento interno nas seções */
    background-color: #111a35; /* Cor de fundo das seções */
}

.map-responsive {
    position: relative;
    overflow: hidden;
    padding-top: 30%; /* Proporção 16:9 */
    height: 0;
    margin: 0 auto; /* Centraliza o contêiner */
    perspective: 1000px; /* Adiciona perspectiva */
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    transform: translateZ(0); /* Inicia o efeito 3D */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra para o efeito 3D */
    transition: transform 0.3s;
}

.map-responsive iframe:hover {
    transform: scale(1.05) translateZ(10px); /* Efeito de aumento ao passar o mouse */
}

/* Ajuste a altura do mapa em telas menores */
@media (max-width: 768px) {
    .map-responsive {
        padding-top: 75%; /* Proporção maior para telas menores */
    }
}


.custom-footer {
    background-color: white;
    color: black !important; /* Substitua pelo código da cor desejada */
    font-size: 15px;
    padding: 10px; /* Padding para o rodapé */
}

#servicos {
    background-color: white !important; /* Cor desejada */
}


.highlighted-image {
    position: relative;
    overflow: hidden;
    margin: 20px auto; /* Centraliza a imagem */
    width: 100%; /* Ajuste conforme necessário */
    max-width: 300px; /* Largura máxima */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Sombra para destaque */
    animation: pulse 3s infinite; /* Animação */
}
#profissionais {
    background-color: white !important; /* Fundo claro para a seção */
    padding: 40px 0; /* Espaçamento interno */
    color: black !important;
}

#profissionais h2 {
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}

#profissionais p {
    font-size: 18px; /* Tamanho da fonte do parágrafo */
    color: #333; /* Cor do texto */
}



.highlighted-image img {
    width: 100%;
    height: auto; /* Mantém a proporção da imagem */
    transition: transform 0.3s ease; /* Transição suave */
}

.highlighted-image:hover img {
    transform: scale(1.05); /* Aumenta a imagem ao passar o mouse */
}

.sobre-section {
    background-color: white; /* Fundo branco */
    color: rgb(0, 0, 0);
    padding: 20px; /* Espaçamento interno */
}

.servicos-section {
    background-color: rgb(255, 250, 250); /* Cor desejada */
    padding: 20px; /* Espaçamento interno */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra nas seções, exceto sobre */
    border-radius: 8px; /* Cantos arredondados */
}

/* Remover a sombra da seção de serviços se estiver imediatamente após a seção de sobre */
.sobre-section + .servicos-section {
    box-shadow: none; /* Remove a sombra apenas entre Sobre e Serviços */
}

/* Remover bordas arredondadas das seções */
#sobre,
#servicos,
#profissionais {
    border-radius: 0; /* Remove bordas arredondadas */
}

#contato {
    background-color: white !important; /* Cor de fundo */
    padding: 0px 0; /* Ajuste o padding conforme necessário */
    box-shadow: none;
    color: black !important;
    border-radius: 0; /* Remove bordas arredondadas */
}

.social-icons {
    margin-top: 20px;
}

.social-icon {
    margin: 0 15px;
    font-size: 30px; /* Ajuste o tamanho do ícone */
    color: black; /* Cor dos ícones */
    transition: color 0.3s;
}

.social-icon:hover {
    color: #002349; /* Cor ao passar o mouse */
}



@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02); /* Leve aumento na animação */
    }
}


/* Media Queries para responsividade */
@media (max-width: 768px) {
    body {
        font-size: 18px; /* Reduzindo o tamanho da fonte em telas menores */
    }
    
    h1 {
        font-size: 40px; /* Tamanho da fonte do cabeçalho menor */
    }

    .card {
        padding: 15px; /* Menos padding em telas menores */
    }
}

@media (max-width: 480px) {
    body {
        font-size: 16px; /* Aumentando a responsividade */
    }
    
    h1 {
        font-size: 30px; /* Tamanho do cabeçalho ainda menor */
    }

    .card {
        padding: 10px; /* Menos padding em telas muito pequenas */
    }
}