/*=====================================
  ESTILOS GLOBAIS E REUSÁVEIS
=======================================*/

/* Importação da fonte do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    background-color: #f4f7f6;
    color: #000000;
    line-height: 1.6; /* Espaçamento de linha para melhor leitura */
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3 { color: #8b8b8b; }
section {
    padding: 60px 0;
}
.cta-button {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s;
}
.cta-button:hover { background-color: #0056b3; }
.secondary-button {
    display: inline-block;
    background-color: transparent;
    border: 2px solid #007bff;
    color: #007bff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s;
}
.secondary-button:hover {
    background-color: #007bff;
    color: #fff;
}

/*=====================================
  CABEÇALHO E NAVEGAÇÃO
=======================================*/
.main-header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-logo img { height: 50px; }
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.main-nav li a {
    text-decoration: none;
    color: #333;
    padding: 15px 20px;
    display: block;
    transition: color 0.3s;
}
.main-nav li a:hover { color: #007bff; }
.main-nav .current a {
    font-weight: 600;
    color: #007bff;
}
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}
.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: transform 0.3s;
}
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }


/*=====================================
  ESTILOS DA PÁGINA DE INÍCIO
=======================================*/

.home-hero-section {
    background: 
        /* Camada de cor escura para garantir que o texto branco seja visível */
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
        
        /* A URL da sua imagem de fundo */
        url('imagens/Gemini_Generated_Image_56u3fb56u3fb56u3.png') no-repeat center center/cover;
        
    color: #fff;
    text-align: center;
    padding: 150px 20px;
}
.home-hero-section h1 { font-size: 3em; margin: 0 0 10px; }
.home-hero-section p { font-size: 1.2em; max-width: 700px; margin: 0 auto 30px; }
.apoiadores-hero-section {
    background:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('imagens/fundo-apoiadores.png') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 100px 20px;
}
.about-section {
    text-align: center;
    background-color: #fff;
}
.about-section h2 { font-size: 2em; margin-bottom: 20px; }
.featured-section {
    background-color: #f4f7f6;
    text-align: center;
}
.featured-section h2 { font-size: 2em; margin-bottom: 40px; }
.featured-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}
.featured-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    max-width: 450px;
    text-align: left;
}
.featured-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.featured-card h3 {
    padding: 0 20px;
    font-size: 1.2em;
}
.featured-card p {
    padding: 0 20px;
    font-size: 0.9em;
    color: #555;
}
.learn-more {
    display: inline-block;
    padding: 0 20px 20px;
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
}
.final-cta-section {
    background-color: #007bff;
    color: #fff;
    text-align: center;
}
.final-cta-section h2 {
    color: #fff;
    font-size: 2em;
    margin-bottom: 20px;
}

/*=====================================
  ESTILOS DA PÁGINA DE APOIADORES
=======================================*/
.apoiadores-hero-section {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('imagens/fundo-apoiadores.png') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 100px 20px;
}
.apoiadores-hero-section h1 { font-size: 3em; margin: 0; }
.apoiadores-hero-section p { font-size: 1.2em; max-width: 600px; margin: 10px auto; }
.supporters-section { padding: 50px 20px; text-align: center; }
.supporters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.supporter-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}
.home-hero-section {
    /* Camada de cor escura para garantir que o texto branco seja visível */
    background: 
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
        
        /* A URL da sua imagem de fundo */
        url('URL_DA_IMAGEM_DE_FUNDO.jpg') no-repeat fixed center center/cover;
        
    /* A linha que faz a mágica: 'fixed' */
    background-attachment: fixed;

    color: #fff;
    text-align: center;
    padding: 150px 20px;
}
.supporter-item:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.supporter-item img {
    width: 100%;
    max-width: 150px;
    height: auto;
    margin-bottom: 15px;
    filter: grayscale(100%);
    transition: filter 0.3s;
}
.supporter-item:hover img { filter: grayscale(0%); }
.supporter-item h3 { font-size: 1.1em; margin-top: 0; }
.supporter-item p { font-size: 0.9em; color: #777; }
.testimonials-section {
    background-color: #eef2f5;
    padding: 50px 20px;
    text-align: center;
}
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.testimonial-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.testimonial-card blockquote { font-style: italic; margin: 0 0 10px; line-height: 1.6; }
.testimonial-card cite { display: block; margin-top: 10px; font-weight: 600; }
.cta-section { text-align: center; }


/*=====================================
  RESPONSIVIDADE (MOBILE)
=======================================*/
@media (max-width: 768px) {
    /* Estilos do header */
    .main-header {
        flex-wrap: wrap;
        padding: 10px 20px;
    }
    .main-nav {
        display: none;
        width: 100%;
    }
    .main-nav.active {
        display: block;
    }
    .main-nav ul {
        flex-direction: column;
        text-align: center;
        background-color: #fff;
    }
    .menu-toggle {
        display: block;
    }

    /* Estilos da Home */
    /*=====================================
  ESTILOS DA PÁGINA DE INÍCIO
=======================================*/

.home-hero-section {
    background: 
        /* Camada de cor escura para garantir que o texto branco seja visível */
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
        
        /* A URL da sua imagem de fundo */
        url('imagens/fundo-apoiadores.png') no-repeat center center/cover;
        
    color: #fff;
    text-align: center;
    padding: 150px 20px;
}
    .home-hero-section h1 { font-size: 2em; }
    .featured-grid { flex-direction: column; align-items: center; }
}
/*=====================================
  ESTILOS ESPECÍFICOS PARA O VÍDEO
=======================================*/

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    margin-bottom: 15px;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Garante que o container do card do vídeo não tenha padding vertical desnecessário */
.featured-card.video-card {
    padding-top: 0;
}
.featured-card.video-card h3, .featured-card.video-card p, .featured-card.video-card a {
    padding-left: 20px;
    padding-right: 20px;
}

.featured-card.video-card p {
    margin-top: 0;
}
/* Estilo para deixar apenas o card do vídeo maior */
.featured-video-card {
    max-width: 600px; /* Ou o tamanho que preferir */
}
/*=====================================
  CABEÇALHO - ESTILOS ADICIONAIS
=======================================*/

.main-header .header-logo a {
    display: flex; /* Alinha a imagem e o texto lado a lado */
    align-items: center; /* Centraliza a imagem e o texto verticalmente */
    text-decoration: none; /* Remove o sublinhado do link */
    color: #333; /* Define a cor do texto */
    font-size: 1.5em; /* Define o tamanho da fonte */
    font-weight: 600; /* Define a espessura da fonte */
}

.main-header .header-logo a img {
    height: 50px; /* Mantém a altura da logo */
    margin-right: 10px; /* Adiciona um espaço entre a logo e o texto */
}

/* Opcional: Estilo para a cor do texto no header */
.main-header .header-logo a span {
    color: #333; /* Cor do texto "ESMOV" */
}
/*=====================================
  ESTILOS DA PÁGINA DE INÍCIO
=======================================*/

.home-hero-section {
    background: 
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
        url('imagens/Gemini_Generated_Image_56u3fb56u3fb56u3.png') no-repeat fixed center center/cover;
    
    /* A linha que faz a mágica: 'fixed' */
    background-attachment: fixed;

    color: #fff;
    text-align: center;
    padding: 150px 20px;
}
/* Remove o sublinhado de todos os links na seção de apoiadores */
.supporters-section a {
    text-decoration: none;
    color: inherit; /* Mantém a cor do texto do elemento pai (para que a cor do nome da empresa continue #333) */
}
/*=====================================
  RODAPÉ (FOOTER)
=======================================*/
.main-footer {
    background-color: #222;
    color: #fff;
    padding: 40px 20px;
    font-size: 0.9em;
}
.footer-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}
.footer-grid h3 {
    color: #fff;
    font-size: 1.2em;
    margin-bottom: 15px;
}
.footer-grid p {
    margin: 0;
    max-width: 300px;
}
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}
.footer-links li a:hover {
    color: #007bff;
}
.social-icons a {
    text-decoration: none; /* Remove a linha */
}
.social-icons a img {
    height: 24px;
    margin-right: 15px;
    filter: brightness(0) invert(1); /* Deixa os ícones brancos */
    transition: transform 0.3s;
}
.social-icons a:hover img {
    transform: scale(1.1);
}
/* Estilo para telas menores */
@media (max-width: 768px) {
    .footer-grid {
        flex-direction: column;
        text-align: center;
    }
    .footer-info, .footer-links, .footer-social {
        width: 100%;
        margin-bottom: 20px;
    }
}
.large-social-icons {
  display: flex;
  justify-content: center; /* Centers the icons horizontally */
  align-items: center; /* Aligns the icons vertically in the middle */
  gap: 20px; /* Adjust the spacing between icons */
  margin-top: 20px; /* Adds some space above the icons */
}

.large-social-icons a {
  text-decoration: none; /* Removes underline from links */
  display: inline-block; /* Allows for sizing and margins */
}

.large-social-icons a img {
 width: 50px !important;
 height: 50px !important;
 transition: transform 0.3s ease-in-out;
}

.large-social-icons a img:hover {
  transform: scale(1.1); /* Slightly enlarges the icon on hover */
}

/*=====================================
  ESTILOS DA PÁGINA SOBRE NÓS
=======================================*/

.about-hero-section {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('URL_DA_IMAGEM_DE_FUNDO_SOBRE.jpg') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 100px 20px;
}
.about-hero-section h1 {
    font-size: 3em;
    margin: 0;
}
.about-hero-section p {
    font-size: 1.2em;
    max-width: 600px;
    margin: 10px auto;
}
.about-mission-section {
    background-color: #fff;
    padding: 60px 0;
    text-align: center;
}
.mission-vision-card {
    background-color: #f4f7f6;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}
.about-values-section {
    background-color: #f4f7f6;
    padding: 60px 0;
    text-align: center;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.value-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.about-team-section {
    background-color: #fff;
    padding: 60px 0;
    text-align: center;
}
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.team-member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 3px solid #007bff;
}
/*=====================================
  ESTILOS DA SEÇÃO DE CHAMADA PARA AÇÃO
=======================================*/

.final-cta-section {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('URL_DA_IMAGEM_DE_FUNDO_CTA.jpg') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}

.final-cta-section h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.final-cta-section p {
    font-size: 1.1em;
    max-width: 700px;
    margin: 0 auto 30px;
    line-height: 1.8;
}

.final-cta-button {
    display: inline-block;
    background-color: #007bff; /* Azul vibrante para o botão */
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.final-cta-button:hover {
    background-color: #0056b3;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/*=====================================
  ESTILOS DA PÁGINA DE CONTATO
=======================================*/
.contact-section {
    padding: 60px 0;
    text-align: center;
    background-color: #f4f7f6;
}
.contact-section h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
}
.contact-subtitle {
    font-size: 1.1em;
    max-width: 600px;
    margin: 0 auto 40px;
}
.contact-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}
.contact-info-card, .contact-form-card {
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 500px;
    text-align: left;
}
.contact-info-card h3, .contact-form-card h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
}
.contact-info-card p {
    font-size: 1em;
    line-height: 1.6;
}
.contact-info-card a {
    color: #007bff;
    text-decoration: none;
}
.contact-form-card form {
    display: flex;
    flex-direction: column;
}
.contact-form-card label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #555;
}
.contact-form-card input, .contact-form-card textarea {
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1em;
}
.contact-form-card input:focus, .contact-form-card textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.contact-form-card button {
    cursor: pointer;
    border: none;
}
/*=====================================
  ESTILOS DO FORMULÁRIO DE APOIADORES
=======================================*/
.support-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}
.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    cursor: pointer;
}
.checkbox-container input {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}
.checkbox-container label {
    cursor: pointer;
    font-weight: 600;
}
.support-cta-button {
    display: inline-block;
    background-color: transparent;
    border: 2px solid #007bff;
    color: #007bff;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.support-cta-button:hover {
    background-color: #007bff;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}