:root {

    --primary-color: #FFA500;        /* Laranja principal */

    --accent-color: #ff6600;         /* Laranja mais intenso */

    --dark-color: #222;              /* Fundo escuro */

    --light-color: #fff;             /* Branco */

    --secondary-color: #f4f4f4;      /* Cinza claro */

    --text-dark: #2c3e50;            /* Texto escuro */

    --transition: all 0.3s ease;



    /* Custom colors for footer/dark sections */

    --preto: #111111;

    --cinza-escuro: #1a1a1a;

    --destaque: #444444;

    --texto-claro: #e0e0e0;

}



/* Universal Styles */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Poppins', sans-serif;

}



html {

    scroll-behavior: smooth;

}



body {

    line-height: 1.6;

    color: #333;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



a {

    text-decoration: none;

    color: inherit;

    transition: color 0.3s ease;

}



a:hover {

    text-decoration: none;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



section {

    padding: 60px 0;

    background-color: var(--light-color); /* Default light background */

}



.section.dark-bg {

    background-color: var(--dark-color);

    color: var(--light-color);

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 15px;

}



/* Titles */

h1, h2, h3 {

    text-align: center;

    font-weight: 700;

    color: var(--text-dark);

    margin-bottom: 2rem;

}



h1 { font-size: 3rem; }

h2 { font-size: 2.5rem; }

h3 { font-size: 2rem; }



.titulo-centralizado {

    text-align: center;

    font-size: 2.5rem;

    margin-bottom: 2rem;

    color: var(--text-dark);

}



.section-title {

    text-align: center;

    font-size: 2.8rem;

    color: var(--text-dark);

    margin-bottom: 3.5rem;

    position: relative;

    padding-bottom: 15px;

}



.section-title i {

    color: var(--primary-color);

    margin-right: 15px;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 80px;

    height: 4px;

    background-color: var(--accent-color);

    border-radius: 2px;

}



/* CTA Button - Global Style */

.cta-button {

    display: inline-block;

    background-color: var(--primary-color);

    padding: 15px 30px;

    color: white;

    text-decoration: none;

    border-radius: 8px;

    font-size: 1.1rem;

    margin-top: 30px;

    transition: background-color 0.3s ease, transform 0.3s ease;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    font-weight: 600;

}



.cta-button:hover {

    background-color: var(--accent-color);

    transform: translateY(-3px);

    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);

}



/* HEADER */

.header {

    background: var(--dark-color);

    padding: 1rem 2rem;

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: 0 2px 10px rgba(0,0,0,0.3);

}



.navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1400px; /* Wider navbar */

    margin: 0 auto;

}



.logo img {

    max-height: 120px; /* Slightly smaller logo */

    width: auto;

    display: block;

}



.nav-links {

    list-style: none;

    display: flex;

    gap: 1.8rem; /* Adjusted gap */

    margin-left: 20px; /* Space from logo */

}



.nav-links li a {

    text-decoration: none;

    color: var(--light-color);

    font-weight: bold;

    transition: color 0.3s ease;

}



.nav-links li a:hover {

    color: var(--primary-color);

}



.social-donation {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.social-icons {

    display: flex;

    gap: 0.8rem;

}



.social-icons a {

    color: var(--light-color);

    font-size: 1.5rem;

    transition: color 0.3s ease, transform 0.3s ease;

}



.social-icons a:hover {

    color: var(--primary-color);

    transform: scale(1.1);

}



.btn-doacao { /* This is the header button */

    background: var(--primary-color);

    color: var(--dark-color);

    padding: 0.8rem 1.2rem; /* Slightly larger padding */

    border-radius: 5px;

    font-weight: bold;

    text-decoration: none;

    transition: background 0.3s ease;

    font-size: 0.95rem;

}



.btn-doacao:hover {

    background: var(--light-color);

    color: var(--primary-color); /* Change text color on hover */

}



/* Menu Mobile */

.menu-mobile {

    display: none;

    font-size: 1.8rem;

    color: var(--light-color);

    cursor: pointer;

}



/* In your style.css */



.hero-content h1, .hero-content p {

    font-family: 'Montserrat', sans-serif;

    color: white;

    text-shadow: 2px 2px 8px rgba(0,0,0,0.7); /* Add some shadow for readability */

    /* Remove overflow: hidden; and white-space: nowrap; from here */

    /* These will be controlled by the animation's fill-mode */

}



/* Adjust the animation properties specifically for the typing effect */

.hero-content h1 {

    font-size: 3.5rem;

    margin-bottom: 20px;

    animation: typing-h1 2s steps(40) forwards, blink-caret .75s step-end infinite; /* Shorter animation for h1 */

    white-space: nowrap; /* Keep for typing effect */

    overflow: hidden;    /* Keep for typing effect */

    width: 0;            /* Initial width for animation */

}



.hero-content p {

    font-size: 1.5rem;

    margin-top: 10px;

    animation: typing-p 2.5s steps(30) 2s forwards, blink-caret .75s step-end infinite; /* Delayed start for p, adjust delay as needed */

    white-space: nowrap; /* Keep for typing effect */

    overflow: hidden;    /* Keep for typing effect */

    width: 0;            /* Initial width for animation */

}



/* New keyframes for clarity and independent control */

@keyframes typing-h1 {

    from { width: 0 }

    to { width: 100% }

}



@keyframes typing-p {

    from { width: 0 }

    to { width: 100% }

}



@keyframes blink-caret {

    from, to { border-color: transparent }

    50% { border-color: rgba(255,255,255,.75) }

}



/* Ensure text is visible immediately if JS/CSS fails or on initial render */

/* This will be overridden by the animation, but acts as a fallback */

.hero-content h1:not([style*="animation-name"]),

.hero-content p:not([style*="animation-name"]) {

    width: auto;

    white-space: normal;

    overflow: visible;

}



/* Media Queries for smaller screens */

@media (max-width: 768px) {

    .hero-content h1 {

        font-size: 2.5rem; /* Adjust for smaller screens */

    }

    .hero-content p {

        font-size: 1.2rem; /* Adjust for smaller screens */

    }

}



@media (max-width: 576px) {

    .hero-content h1 {

        font-size: 2rem;

    }

    .hero-content p {

        font-size: 1rem;

    }

}



/* HERO SECTION */

.hero {

    position: relative;

    width: 100%;

    height: 100vh;

    overflow: hidden;

}



.hero-carousel {

    width: 100%;

    height: 100%;

}



.hero-carousel .swiper-slide {

    display: flex;

    align-items: center;

    justify-content: center;

}



.hero-carousel .swiper-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 1;

}



.hero-content {

    position: relative;

    z-index: 2;

    color: white;

    text-align: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.4); /* Semi-transparent background for readability */

    border-radius: 10px;

    max-width: 800px;

}



.hero-content h1, .hero-content p {

    font-family: 'Montserrat', sans-serif; /* Modern, clean font */

    overflow: hidden;

    white-space: nowrap;

    border-right: .15em solid rgba(255,255,255,.75);

    animation: typing 4s steps(40) 1s forwards, blink-caret .75s step-end infinite;

    font-size: 3.5rem;

    margin-bottom: 20px;

    color: white; /* Ensure text color is white */

}



.hero-content p {

    font-size: 1.5rem;

    margin-top: 10px;

    animation: typing 3s steps(30) 5s forwards, blink-caret .75s step-end infinite; /* Delayed animation */

}



@keyframes typing {

    from { width: 0 }

    to { width: 100% }

}



@keyframes blink-caret {

    from, to { border-color: transparent }

    50% { border-color: rgba(255,255,255,.75) }

}



/* Fallback for no banners */

.hero-fallback {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100%;

    background: linear-gradient(135deg, var(--dark-color), #444);

    color: white;

    text-align: center;

}



/* ABOUT SECTION */

.sobre-section {

    padding: 4rem 1rem;

    background: var(--secondary-color);

}



.sobre-content {

    max-width: 1200px;

    margin: 0 auto;

}



.sobre-header {

    text-align: center;

    margin-bottom: 3rem;

}



.sobre-titulo-principal {

    font-size: 2.5rem;

    color: var(--text-dark);

    margin-bottom: 0.5rem;

    position: relative;

}



.sobre-titulo-principal::after {

    content: '';

    display: block;

    width: 60px;

    height: 3px;

    background: var(--primary-color);

    margin: 1rem auto;

}



.sobre-subtitulo {

    font-size: 1.5rem;

    color: #7f8c8d;

    font-weight: 400;

}



.estatisticas-container {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

    justify-content: center;

    margin-bottom: 4rem;

    padding: 0 1rem;

}



.estatistica-card {

    background: var(--light-color);

    padding: 2.5rem 2rem;

    border-radius: 12px;

    box-shadow: 0 6px 15px rgba(0,0,0,0.08);

    text-align: center;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-bottom: 4px solid var(--primary-color);

}



.estatistica-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 12px 25px rgba(0,0,0,0.15);

}



.estatistica-icon {

    font-size: 3rem;

    color: var(--accent-color);

    margin-bottom: 1.2rem;

}



.estatistica-numero {

    font-size: 2.8rem;

    color: var(--text-dark);

    margin: 0.5rem 0;

    font-weight: 700;

}



.estatistica-label {

    color: #555;

    font-size: 1.1rem;

    margin: 0;

}



.sobre-main {

    display: flex;

    gap: 3rem;

    align-items: center;

    margin-bottom: 4rem;

    flex-wrap: wrap; /* Allow wrapping on smaller screens */

    justify-content: center;

}



.sobre-texto {

    flex: 1;

    min-width: 300px; /* Ensure text block doesn't shrink too much */

}



.sobre-descricao {

    font-size: 1.1rem;

    line-height: 1.8;

    color: #34495e;

    margin-bottom: 2rem;

}



.sobre-texto-destaque {

    background: #eaf1f7; /* Lighter background for highlight */

    padding: 2rem;

    border-radius: 8px;

    border-left: 5px solid var(--accent-color); /* Stronger accent line */

    color: #34495e;

    font-style: italic;

}



.sobre-imagem-container {

    flex: 1;

    max-width: 500px; /* Max width for image container */

}



.sobre-imagem {

    width: 100%;

    border-radius: 10px;

    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Stronger shadow */

}



@keyframes float {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-15px); }

}



.flutuante {

    animation: float 3s ease-in-out infinite;

}



.sobre-video-container {

    max-width: 900px; /* Max width for video */

    margin: 0 auto;

}



.sobre-video {

    width: 100%;

    height: 500px;

    border: none;

    border-radius: 10px;

    box-shadow: 0 10px 20px rgba(0,0,0,0.15);

}



/* LEADERSHIP SECTION */

.lideres {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 2rem;

    justify-content: center;

    margin-top: 3rem;

    padding: 0 1rem;

}



.lider {

    text-align: center;

    background: var(--light-color);

    padding: 1.8rem;

    border-radius: 12px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.lider:hover {

    transform: translateY(-8px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

}



.lider img {

    width: 130px;

    height: 130px;

    border-radius: 50%;

    object-fit: cover;

    border: 4px solid var(--primary-color);

    margin-bottom: 1.5rem;

    transition: border-color 0.3s ease;

}



.lider:hover img {

    border-color: var(--accent-color);

}



.lider h3 {

    font-size: 1.35rem;

    color: var(--text-dark);

    margin-bottom: 0.6rem;

    font-weight: 600;

}



.lider p {

    font-size: 0.95rem;

    color: #777;

}



/* TESTIMONIALS SECTION */

.depoimentos-section {

    background: linear-gradient(to right, #2a2a2a, #1a1a1a);

    padding: 5rem 1rem;

    color: white;

    overflow: hidden;

}



.depoimentos-titulo {

    text-align: center;

    font-size: 3rem;

    margin-bottom: 4rem;

    color: white;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);

}



.carrossel-container {

    position: relative;

    max-width: 1000px;

    margin: 0 auto;

    overflow: hidden;

}



.carrossel-wrapper {

    display: flex;

    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.carrossel-item {

    min-width: 100%;

    box-sizing: border-box;

    padding: 0 1rem;

}



.depoimentos-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 2.5rem;

    justify-content: center;

}



.depoimento-card {

    background: #3a3a3a;

    padding: 2.5rem;

    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.4);

    border-top: 5px solid var(--primary-color);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.depoimento-header {

    display: flex;

    align-items: center;

    margin-bottom: 1.8rem;

}



.depoimento-avatar {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    margin-right: 1.2rem;

    object-fit: cover;

    border: 3px solid white;

}



.depoimento-info {

    flex-grow: 1;

}



.depoimento-nome {

    margin: 0;

    color: var(--light-color);

    font-size: 1.4rem;

    font-weight: 600;

}



.depoimento-descricao {

    margin: 0.4rem 0 0;

    color: #bbb;

    font-size: 1rem;

}



.depoimento-texto {

    margin-top: 1.5rem;

    color: #eee;

    line-height: 1.7;

    font-style: italic;

    font-size: 1.05rem;

}



.carrossel-controle {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(255,255,255,0.15);

    border: none;

    color: white;

    font-size: 2.5rem;

    padding: 1rem 1.5rem;

    cursor: pointer;

    transition: all 0.3s ease;

    border-radius: 50%;

    z-index: 10; /* Ensure controls are above slides */

}



.carrossel-controle:hover {

    background: var(--primary-color);

    transform: translateY(-50%) scale(1.05);

}



.prev {

    left: 1rem;

}



.next {

    right: 1rem;

}



.carrossel-indicadores {

    position: static;

    transform: none;

    justify-content: center;

    margin-top: 3rem;

    display: flex; /* Ensure flex for dots */

    gap: 0.8rem;

}



.indicador {

    width: 15px;

    height: 15px;

    border-radius: 50%;

    border: none;

    background: rgba(255,255,255,0.4);

    cursor: pointer;

    transition: all 0.3s ease;

}



.indicador.active {

    background: var(--primary-color);

    transform: scale(1.3);

}



/* EVENTS CAROUSEL SECTION */

.events-carousel-section {

    padding: 4rem 0;

    background-color: var(--secondary-color);

}



.events-carousel {

    position: relative;

    max-width: 1200px;

    margin: 0 auto;

    overflow: hidden;

}



.events-container {

    display: flex;

    transition: transform 0.5s ease;

}



.events-slide {

    min-width: 100%;

    display: none; /* Hidden by default */

}



.events-slide.active {

    display: block; /* Show active slide */

}



.events-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

    padding: 0 1rem;

    max-width: 1200px;

    margin: 0 auto;

}



.event-card {

    background: var(--light-color);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 6px 20px rgba(0,0,0,0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-bottom: 5px solid var(--primary-color);

}



.event-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 12px 30px rgba(0,0,0,0.2);

}



.event-image {

    position: relative;

    height: 220px;

    overflow: hidden;

}



.event-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.event-image:hover img {

    transform: scale(1.1);

}



.church-badge {

    position: absolute;

    left: 15px;

    bottom: 15px;

    background: rgba(0, 0, 0, 0.7);

    color: white;

    padding: 6px 14px;

    border-radius: 25px;

    font-size: 0.9rem;

    font-weight: 600;

    letter-spacing: 0.5px;

}



.event-info {

    padding: 1.5rem;

    color: var(--text-dark);

}



.event-date {

    color: var(--primary-color);

    margin: 0 0 0.8rem;

    font-size: 1rem;

    font-weight: 600;

}



.event-title {

    margin: 0 0 1.2rem;

    font-size: 1.4rem;

    min-height: 2.8em;

    font-weight: 700;

    color: var(--text-dark);

}



.carousel-prev, .carousel-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: var(--dark-color);

    color: white;

    border: none;

    padding: 12px 18px;

    cursor: pointer;

    font-size: 1.8rem;

    border-radius: 50%;

    box-shadow: 0 4px 10px rgba(0,0,0,0.3);

    transition: background 0.3s ease, transform 0.3s ease;

    z-index: 10;

}



.carousel-prev:hover, .carousel-next:hover {

    background: var(--primary-color);

    transform: translateY(-50%) scale(1.05);

}



.carousel-prev {

    left: 10px;

}



.carousel-next {

    right: 10px;

}



.carousel-dots {

    position: absolute;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 8px;

}



.carousel-dot {

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: rgba(0,0,0,0.3);

    cursor: pointer;

    border: 2px solid transparent;

    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;

}



.carousel-dot.active {

    background: var(--primary-color);

    border-color: white;

    transform: scale(1.1);

}



/* UPCOMING EVENTS SECTION (eventos-section) */

.eventos-section {

    padding: 50px 0;

    background-color: #f8f8f8; /* Light background */

}



.eventos-container {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;

}



.evento-card {

    background-color: #fff;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    width: 320px; /* Slightly wider card */

    overflow: hidden;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.evento-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

}



.evento-imagem {

    width: 100%;

    height: 200px;

    object-fit: cover;

}



.evento-info {

    padding: 15px;

}



.evento-titulo {

    font-size: 1.5rem;

    font-weight: bold;

    color: #333;

    margin-bottom: 10px;

    min-height: 2.5em; /* Ensure consistent height */

}



.evento-descricao {

    font-size: 1rem;

    color: #666;

    margin: 10px 0;

    min-height: 3em; /* Consistent height for description */

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 3; /* Limit to 3 lines */

    -webkit-box-orient: vertical;

}



.evento-data {

    font-size: 0.9rem;

    color: #999;

    margin-bottom: 15px;

}



.evento-link {

    display: inline-block;

    padding: 8px 18px;

    background-color: var(--primary-color);

    color: white;

    border-radius: 5px;

    font-weight: bold;

    transition: background-color 0.3s ease;

}



.evento-link:hover {

    background-color: var(--accent-color);

}





/* GALLERY SECTION */

.galeria-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 30px;

    padding: 2.5rem;

    max-width: 1200px;

    margin: 0 auto;

}



.galeria-card {

    position: relative;

    border-radius: 15px;

    overflow: hidden;

    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

}



.galeria-card:hover {

    transform: translateY(-10px) scale(1.03);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);

}



.image-container {

    position: relative;

    padding-top: 75%; /* Aspect ratio 4:3 */

    background: #333;

}



.galeria-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.galeria-card:hover .galeria-image {

    transform: scale(1.08);

}



.galeria-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));

    opacity: 0;

    transition: opacity 0.4s ease;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding-bottom: 2rem;

}



.galeria-card:hover .galeria-overlay {

    opacity: 1;

}



.overlay-content {

    text-align: center;

    color: white;

    padding: 1rem;

    transform: translateY(20px);

    transition: transform 0.4s ease;

}



.galeria-card:hover .overlay-content {

    transform: translateY(0);

}



.overlay-icon {

    font-size: 2.2rem;

    margin-bottom: 0.8rem;

    color: var(--primary-color);

}



.image-title {

    font-size: 1.3rem;

    margin: 0;

    font-weight: 700;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);

}



/* ACTIVITIES SECTION */

.atividades-section {

    padding: 5rem 1rem;

    max-width: 1200px;

    margin: 0 auto;

    background-color: var(--light-color);

}



.atividades-header {

    text-align: center;

    margin-bottom: 4rem;

}



.section-subtitle {

    color: var(--primary-color);

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 0.8rem;

    font-weight: 600;

}



.section-title span {

    color: var(--accent-color);

}



.atividades-grid {

    display: grid;

    gap: 2rem;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    padding: 0 1rem;

}



.atividade-card {

    background: #fff;

    border-radius: 15px;

    padding: 2.5rem;

    text-align: center;

    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    border: 1px solid #e0e0e0;

    box-shadow: 0 5px 15px rgba(0,0,0,0.05);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

}



.atividade-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 30px rgba(255, 165, 0, 0.2); /* Using rgba with primary color */

    border-color: var(--primary-color);

}



.atividade-icon {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background: rgba(255, 165, 0, 0.1); /* Lighter primary color background */

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 2rem;

}



.atividade-icon i {

    font-size: 2.5rem;

    color: var(--primary-color);

}



.atividade-card h3 {

    color: var(--text-dark);

    margin: 0 0 1rem 0;

    font-size: 1.5rem;

    line-height: 1.3;

    font-weight: 700;

}



.atividade-card p {

    color: #777;

    font-size: 1rem;

    line-height: 1.7;

    margin: 0;

    flex-grow: 1;

}



/* DONATION MODAL */

.modal {

    display: none;

    position: fixed;

    z-index: 1000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */

    padding-top: 50px;

    backdrop-filter: blur(5px); /* Add blur effect */

}



.modal-content {

    background-color: #fff;

    margin: 5% auto;

    padding: 2rem;

    border-radius: 12px;

    width: 90%;

    max-width: 550px; /* Slightly wider */

    position: relative;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    text-align: center; /* Center content */

}



.modal-content h2 {

    color: var(--primary-color);

    margin-bottom: 1.5rem;

    font-size: 2rem;

}



.modal-content p {

    color: #555;

    margin-bottom: 1.5rem;

}



.close {

    position: absolute;

    top: 15px;

    right: 25px;

    font-size: 2rem;

    color: #aaa;

    cursor: pointer;

    transition: color 0.3s ease;

}



.close:hover,

.close:focus {

    color: var(--dark-color);

}



.qr-code {

    width: 100%;

    max-width: 250px; /* Larger QR code */

    margin: 1.5rem auto; /* Center with auto margins */

    border: 1px solid #eee;

    padding: 5px;

    background: #fff;

}



.modal-content h3 {

    color: var(--text-dark);

    margin-top: 1.5rem;

    margin-bottom: 1rem;

    font-size: 1.3rem;

}



.modal-content form {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.modal-content form label {

    text-align: left; /* Align labels to left */

    color: #444;

    font-weight: 600;

    margin-bottom: 0.2rem;

}



.modal-content form input {

    padding: 0.8rem;

    font-size: 1rem;

    border-radius: 6px;

    border: 1px solid #ddd;

    width: 100%;

}



.btn-doacao-form { /* Distinct class for form button */

    background-color: var(--primary-color);

    color: white;

    padding: 1rem;

    font-size: 1.1rem;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    transition: background-color 0.3s ease, transform 0.3s ease;

    margin-top: 1rem;

    font-weight: 600;

}



.btn-doacao-form:hover {

    background-color: var(--accent-color);

    transform: translateY(-2px);

}





/* CONTACT SECTION */

.contato-container {

    display: grid;

    grid-template-columns: 1.2fr 1.8fr;

    gap: 3.5rem;

    max-width: 1200px;

    margin: 0 auto;

    padding: 3rem;

    background: #2a2a2a;

    border-radius: 20px;

    box-shadow: 0 10px 40px rgba(0,0,0,0.5);

}



.contato-info {

    background: #333;

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

    padding: 2rem;

}



.info-box h3 {

    color: var(--primary-color);

    font-size: 1.6rem;

    margin-bottom: 2rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    font-weight: 700;

}



.contato-mapa {

    height: 350px;

    border-radius: 10px;

    overflow: hidden;

    margin-bottom: 2.5rem;

    border: 2px solid var(--destaque);

}



.info-details p {

    color: #ddd;

    display: flex;

    align-items: center;

    gap: 1.2rem;

    margin: 1.2rem 0;

    font-size: 1rem;

}



.info-details i {

    color: var(--primary-color);

    font-size: 1.2rem;

}



.contato-form {

    background: #333;

    border-radius: 15px;

    padding: 3rem;

    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

}



.form-header {

    margin-bottom: 2.5rem;

    text-align: center;

}



.form-header h3 {

    color: var(--light-color);

    font-size: 2.2rem;

    margin-bottom: 0.8rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    font-weight: 700;

}



.form-header p {

    color: #bbb;

    font-size: 1rem;

}



.form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.8rem;

}



.form-group {

    position: relative;

}



.form-group input,

.form-group textarea {

    width: 100%;

    padding: 15px 20px;

    border-radius: 8px;

    border: 1px solid #555;

    background-color: #444;

    color: white;

    font-size: 1rem;

    transition: border-color 0.3s ease, box-shadow 0.3s ease;

}



.form-group input::placeholder,

.form-group textarea::placeholder {

    color: #999;

}



.form-group input:focus,

.form-group textarea:focus {

    border-color: var(--primary-color);

    outline: none;

    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.3);

}



.icon-input i {

    position: absolute;

    left: 20px;

    top: 50%;

    transform: translateY(-50%);

    color: #999;

    font-size: 1.1rem;

}



.icon-input input,

.icon-input textarea {

    padding-left: 50px;

}



textarea {

    resize: vertical;

    min-height: 120px;

}



.full-width {

    grid-column: 1 / -1;

}



.btn-enviar {

    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));

    color: white;

    padding: 15px 30px;

    border: none;

    border-radius: 8px;

    font-size: 1.1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}



.btn-enviar:hover {

    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.3);

}



/* FOOTER */

.site-footer {

    background: var(--preto);

    color: var(--texto-claro);

    padding: 40px 0 0;

    position: relative;

    border-top: 3px solid var(--destaque);

}



.footer-content {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 40px;

}



.footer-section {

    margin-bottom: 30px;

}



.logo-section {

    text-align: center;

}



.logo-img {

    width: 150px;

    height: auto;

    margin-bottom: 15px;

    filter: brightness(0) invert(1); /* Makes logo white if it's dark */

}



.footer-description {

    font-size: 1.1em;

    color: var(--texto-claro);

    margin-top: 10px;

}



.footer-title {

    color: var(--texto-claro);

    font-size: 1.3em;

    margin-bottom: 20px;

    padding-bottom: 10px;

    border-bottom: 2px solid var(--destaque);

}



.contact-item {

    margin: 15px 0;

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--texto-claro);

}



.contact-item i {

    color: var(--primary-color); /* Contact icons in primary color */

    width: 20px;

    text-align: center;

    opacity: 0.8;

}



.social-links {

    margin-top: 25px;

    display: flex;

    gap: 15px;

    justify-content: center; /* Center social icons in footer */

}



.social-icon {

    color: var(--texto-claro);

    font-size: 1.8em; /* Larger social icons */

    transition: var(--transition);

    opacity: 0.8;

}



.social-icon:hover {

    color: var(--primary-color);

    opacity: 1;

    transform: translateY(-3px);

}



/* Horários de Cultos in Footer */

.cultos-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.culto-item {

    background: var(--cinza-escuro);

    padding: 15px;

    border-radius: 5px;

    display: grid;

    grid-template-columns: 1fr auto; /* Day on left, time/name on right */

    gap: 8px;

    align-items: center;

}



.culto-dia {

    font-weight: 600;

    grid-column: 1 / 3; /* Spans across both columns */

    color: var(--primary-color); /* Day in primary color */

    font-size: 1em;

}



.culto-hora {

    color: var(--texto-claro);

    font-size: 0.9em;

    opacity: 0.9;

}



.culto-nome {

    color: var(--texto-claro);

    font-size: 0.85em;

    opacity: 0.8;

    text-align: right;

}





.footer-bottom {

    background: var(--cinza-escuro);

    padding: 25px 20px;

    margin-top: 50px;

}



.copyright {

    max-width: 1200px;

    margin: 0 auto;

    text-align: center;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.copyright p {

    margin: 0;

    font-size: 0.9em;

    opacity: 0.8;

}



.footer-links {

    display: flex;

    justify-content: center;

    gap: 25px;

    flex-wrap: wrap;

    margin-top: 10px;

}



.footer-links a {

    color: var(--texto-claro);

    text-decoration: none;

    font-size: 0.85em;

    transition: var(--transition);

    opacity: 0.8;

}



.footer-links a:hover {

    color: white;

    opacity: 1;

}



/* COOKIE ALERT */

.alerta {

    background-color: #060d54;

    color: #FFF;

    padding: 15px;

    font-family: Arial;

    text-align: center;

    position: fixed;

    bottom: 0;

    width: 100%;

    opacity: 0.95; /* Slightly less opaque */

    z-index: 1000; /* High z-index */

    display: flex; /* Use flex for alignment */

    justify-content: center;

    align-items: center;

    flex-wrap: wrap; /* Allow wrapping on small screens */

    gap: 15px; /* Space between text and button */

}



.alerta.hide {

    display: none !important;

}



.link-alerta {

    color: #f2f2f2;

    text-decoration: underline;

    transition: color 0.3s ease;

}



.link-alerta:hover {

    color: #FFF;

}



.botao-aceitar {

    background-color: var(--primary-color); /* Use primary color */

    color: white; /* White text */

    padding: 8px 15px; /* Adjust padding */

    margin-left: 15px;

    border-radius: 5px;

    border: none;

    cursor: pointer;

    font-weight: bold;

    transition: background-color 0.3s ease;

}



.botao-aceitar:hover {

    background-color: var(--accent-color);

}



/* WHATSAPP FLOATING BUTTON */

.icon {

    position: fixed;

    bottom: 60px;

    left: 30px; /* Aligned to the left */

    font-size: 30px;

    background-color: #01e675;

    color: #ffffff;

    border-radius: 50%;

    padding: 3px;

    width: 55px; /* Slightly larger button */

    height: 55px;

    display: flex; /* Use flexbox for centering icon */

    align-items: center;

    justify-content: center;

    text-decoration: none;

    z-index: 999; /* Below modal */

    box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* Softer shadow */

    animation: tremor 0.8s infinite alternate; /* Smoother tremor */

}



.icon:hover {

    background-color: #029e3b; /* Darker green on hover */

    color: #fff;

    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4); /* More pronounced shadow */

    animation: none; /* Stop tremor on hover */

}



@keyframes tremor {

    0% { transform: translateX(0) rotate(-2deg); }

    50% { transform: translateX(5px) rotate(2deg); }

    100% { transform: translateX(0) rotate(-2deg); }

}



/* BACK TO TOP BUTTON */

.back-to-top {

    position: fixed;

    bottom: 30px;

    right: 30px;

    background: var(--primary-color);

    color: white;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

    z-index: 1000;

    box-shadow: 0 3px 10px rgba(0,0,0,0.2);

    font-size: 1.5rem;

}



.back-to-top.show {

    opacity: 1;

    visibility: visible;

}



.back-to-top:hover {

    background: var(--accent-color);

    transform: translateY(-3px);

    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

}



/* RESPONSIVE DESIGN */

@media (max-width: 992px) {

    .navbar {

        flex-wrap: wrap; /* Allow navbar items to wrap */

        justify-content: center;

    }

    .logo {

        margin-right: 0;

        margin-bottom: 1rem;

    }

    .nav-links, .social-donation {

        display: none; /* Hide for mobile menu */

    }

    .menu-mobile {

        display: block;

        position: absolute;

        right: 15px;

        top: 50%;

        transform: translateY(-50%);

    }



    /* Hero Section */

    .hero-content h1 {

        font-size: 2.5rem;

    }

    .hero-content p {

        font-size: 1.2rem;

    }



    /* About Section */

    .sobre-main {

        flex-direction: column;

        text-align: center;

    }

    .sobre-imagem-container {

        order: -1; /* Move image above text on mobile */

    }

    .estatisticas-container {

        grid-template-columns: 1fr;

    }

    .sobre-video {

        height: 300px;

    }



    /* Leadership Section */

    .lideres {

        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    }



    /* Testimonials */

    .depoimentos-grid {

        grid-template-columns: 1fr;

    }

    .carrossel-controle {

        font-size: 2rem;

        padding: 0.8rem 1.2rem;

    }



    /* Events */

    .events-grid {

        grid-template-columns: 1fr;

    }



    /* Gallery */

    .galeria-grid {

        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

        gap: 20px;

        padding: 1.5rem;

    }



    /* Activities */

    .atividades-grid {

        grid-template-columns: 1fr;

        padding: 0;

    }

    .section-title {

        font-size: 2.2rem;

    }

    .atividade-card {

        padding: 2rem;

    }



    /* Contact */

    .contato-container {

        grid-template-columns: 1fr;

        gap: 2.5rem;

        padding: 2rem;

    }

    .contato-mapa {

        height: 300px;

    }

    .form-grid {

        grid-template-columns: 1fr;

    }

    .contato-info, .contato-form {

        padding: 2rem;

    }



    /* Footer */

    .footer-content {

        grid-template-columns: 1fr;

        gap: 40px;

        text-align: center;

    }

    .contact-item, .social-links {

        justify-content: center;

    }

    .culto-item {

        grid-template-columns: 1fr; /* Stack day, hour, name */

        text-align: center;

    }

    .culto-nome {

        text-align: center;

    }

}



@media (max-width: 576px) {

    h1 { font-size: 2.5rem; }

    h2 { font-size: 2rem; }

    h3 { font-size: 1.8rem; }



    .hero-content h1 {

        font-size: 2rem;

    }

    .hero-content p {

        font-size: 1rem;

    }

    .cta-button {

        padding: 12px 25px;

        font-size: 1rem;

    }

    .sobre-titulo-principal {

        font-size: 2rem;

    }

    .sobre-subtitulo {

        font-size: 1.2rem;

    }

    .estatistica-numero {

        font-size: 2.2rem;

    }

    .estatistica-label {

        font-size: 1rem;

    }

    .sobre-video {

        height: 200px;

    }

    .depoimentos-titulo {

        font-size: 2rem;

    }

    .depoimento-card {

        padding: 1.5rem;

    }

    .depoimento-nome {

        font-size: 1.2rem;

    }

    .depoimento-texto {

        font-size: 0.95rem;

    }

    .section-title {

        font-size: 1.8rem;

    }

    .event-title {

        font-size: 1.2rem;

    }

    .evento-titulo {

        font-size: 1.3rem;

    }

    .galeria-grid {

        grid-template-columns: 1fr;

        padding: 1rem;

    }

    .image-title {

        font-size: 1rem;

    }

    .atividades-section .section-title {

        font-size: 1.8rem;

    }

    .atividade-card h3 {

        font-size: 1.3rem;

    }

    .contato-form {

        padding: 1.5rem;

    }

    .form-header h3 {

        font-size: 1.8rem;

    }

    .modal-content {

        padding: 1.5rem;

    }

    .modal-content h2 {

        font-size: 1.8rem;

    }

    .qr-code {

        max-width: 200px;

    }

    .icon {

        bottom: 20px;

        left: 20px;

        width: 45px;

        height: 45px;

        font-size: 24px;

    }

    .icon .fab { /* Adjust if needed */

        padding-top: 0;

    }

    .back-to-top {

        bottom: 20px;

        right: 20px;

        width: 40px;

        height: 40px;

        font-size: 1.3rem;

    }

    .alerta {

        flex-direction: column;

        gap: 10px;

    }

    .botao-aceitar {

        margin-left: 0;

    }

}