/* General Styles */
:root {
    --verde-principal: #306B18;
    --verde-hover: #3D8820;
    --marrom-vermelho: #8B2703;
    --marrom-hover: #6B1D02;
    --bege-claro: #F5D0A9;
    --fundo-claro: #F5EEE1;
    --branco: #FFFFFF;
    --preto: #000000;
    --cinza-texto: #718096;
    --cinza-texto-alt: #6B7280;
    --laranja-stats: #F5A623;
    --container-width: 1140px;
}

body {
    font-family: sans-serif;
    margin: 0;
    padding-top: 60px; /* Adjust based on navbar height */
    line-height: 1.6;
    color: var(--cinza-texto);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 {
    margin-bottom: 1rem;
}

h2 {
    font-size: 2.25rem; /* 36px */
    text-align: center;
    margin-bottom: 2.5rem; /* mb-10 */
}

h3 {
    font-size: 1.5rem; /* 24px */
    margin-bottom: 0.5rem; /* mb-2 */
}

a {
    text-decoration: none;
    color: var(--verde-principal);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

section {
    padding: 5rem 0; /* py-20 */
}

.text-center {
    text-align: center;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--marrom-vermelho);
    color: var(--bege-claro);
}

.btn-primary:hover {
    background-color: var(--marrom-hover);
}

.btn i {
    margin-left: 8px;
}

/* Navigation */
#navbar {
    background-color: var(--verde-principal);
    color: var(--bege-claro);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 0;
    height: 60px; /* Fixed height */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

#navbar .logo {
    color: var(--bege-claro);
    font-weight: bold;
    font-size: 1.5rem;
}

#navbar ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

#navbar ul li {
    margin-left: 20px;
}

#navbar ul li a {
    color: var(--bege-claro);
    padding: 5px 10px;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 3px;
}

#navbar ul li a:hover {
    color: var(--branco);
    background-color: var(--verde-hover);
}

/* Hero Section */
#hero {
    height: 100vh;
    background: url('images/banner.png') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--branco);
    position: relative;
    padding: 0 20px; /* Add padding for content */
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Overlay */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

#hero h1 {
    font-size: 3.75rem; /* 60px */
    margin-bottom: 1rem;
}

#hero p {
    font-size: 1.5rem; /* 24px */
    margin-bottom: 2rem;
}

/* Statistics Section */
#stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding-top: 2rem; /* py-8 */
    padding-bottom: 2rem;
    background-color: var(--branco);
}

.stat-item {
    background-color: var(--branco);
    padding: 1.5rem 1rem; /* p-6 */
    text-align: center;
    border-top: 4px solid; /* Placeholder, color set inline */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Assign border colors based on inline style */
.stat-item:nth-child(1), .stat-item:nth-child(3) {
    border-top-color: var(--verde-principal);
}
.stat-item:nth-child(2), .stat-item:nth-child(4) {
    border-top-color: var(--laranja-stats);
}

.stat-value {
    font-size: 3rem; /* 48px */
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--cinza-texto-alt);
    font-size: 1rem;
}

/* About Section */
#sobre {
    background-color: var(--fundo-claro);
}

#sobre h2 {
    color: var(--marrom-vermelho);
}

.tabs {
    max-width: 700px; /* Adjust as needed */
    margin: 0 auto 2.5rem auto; /* mb-10 mx-auto */
}

.tab-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    overflow: hidden;
}

.tab-button {
    flex-grow: 1;
    padding: 1rem;
    background-color: #EAEAEA;
    color: var(--cinza-texto);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tab-button i {
    margin-right: 8px;
}

.tab-button.active {
    background-color: var(--verde-principal);
    color: var(--bege-claro);
}

.tab-content {
    display: none;
    background-color: var(--branco);
    padding: 2.5rem; /* p-10 */
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.tab-content.active {
    display: block;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem; /* gap-12 */
    align-items: center;
}

.info-text p {
    margin-bottom: 1.5rem; /* mb-6 */
}

.icon-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem; /* mb-6 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Simulate inline with grid */
    gap: 1rem 1rem; /* space-between and gap */
}

.icon-list li {
    display: flex;
    align-items: center;
}

.icon-list i {
    color: var(--marrom-vermelho);
    font-size: 1.25rem; /* 20px */
    margin-right: 8px;
}

.info-image img {
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem; /* gap-3 */
}

.gallery-grid img {
    width: 100%;
    height: 150px; /* Adjust height as needed or use aspect-ratio */
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer; /* Add pointer for lightbox indication */
    transition: transform 0.3s ease;
}

.gallery-grid img:hover {
    transform: scale(1.05);
}

.gallery-caption {
    text-align: center;
    color: var(--cinza-texto-alt);
    margin-top: 2rem; /* mt-8 */
    margin-bottom: 1rem; /* mb-4 */
}

/* Entities Section */
#entidades {
    background-color: var(--branco);
}

#entidades h2 {
    color: var(--verde-principal);
    margin-bottom: 3rem; /* mb-12 */
}

.entities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem; /* gap-8 */
}

.entity-card {
    background-color: var(--fundo-claro);
    border: 2px solid var(--marrom-vermelho);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    overflow: hidden; /* To contain image border radius */
    text-align: center;
    transition: transform 0.3s ease;
}

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

.entity-card img {
    width: 100%;
    height: 180px; /* Adjust height as needed */
    object-fit: contain; /* Use contain to show full logo */
    padding: 1rem; /* Add padding around logo */
    background-color: var(--branco); /* White background for logos */
    /* No border-radius needed if image fits within padding */
    margin-bottom: 1rem; /* mb-4 */
}

.entity-card h3 {
    color: var(--marrom-vermelho);
    padding: 0 1.5rem; /* px-6 */
    margin-bottom: 0.5rem; /* mb-2 */
}

.entity-card p {
    padding: 0 1.5rem 1.5rem; /* px-6 pb-6 */
    color: var(--cinza-texto);
    font-size: 0.9rem;
}

/* Sponsors Section */
#patrocinadores {
    background-color: var(--fundo-claro);
}

#patrocinadores h2 {
    color: var(--verde-principal);
    margin-bottom: 3rem; /* mb-12 */
}

.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem; /* gap-8 */
}

.sponsor-item {
    background-color: var(--branco);
    border: 2px solid var(--verde-principal);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    padding: 2rem; /* p-8 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px; /* Ensure items have some height */
    transition: transform 0.3s ease;
}

.sponsor-item:hover {
    transform: translateY(-5px);
}

.sponsor-item img {
    max-height: 80px; /* Limit logo height */
    width: auto;
    object-fit: contain;
}

.sponsor-item.placeholder {
    color: var(--cinza-texto-alt);
    font-style: italic;
}

/* Donor Section */
#seja-doador {
    background-color: var(--verde-principal);
    color: var(--bege-claro);
}

.icon-large {
    font-size: 4rem; /* 64px */
    margin-bottom: 1.5rem; /* mb-6 */
}

#seja-doador h2 {
    color: var(--bege-claro);
    margin-bottom: 1.5rem; /* mb-6 */
}

.donor-text {
    font-size: 1.25rem; /* 20px */
    max-width: 768px; /* max-w-2xl */
    margin: 0 auto 2rem auto; /* mb-8 mx-auto */
}

#seja-doador .btn-primary {
    background-color: var(--marrom-vermelho); /* Keep button style consistent */
}

#seja-doador .btn-primary:hover {
    background-color: var(--marrom-hover);
}

/* Footer */
footer {
    background-color: var(--marrom-vermelho);
    color: var(--bege-claro);
    padding: 3rem 0; /* py-12 */
}

footer h3 {
    color: var(--bege-claro);
    margin-bottom: 1rem; /* mb-4 */
}

footer p {
    margin-bottom: 1.5rem; /* mb-6 */
}

.social-icons a {
    color: var(--bege-claro);
    font-size: 1.5rem; /* Adjust size */
    margin: 0 0.75rem; /* space-x-4 / 2 */
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: var(--branco);
}

.copyright {
    font-size: 0.875rem; /* text-sm */
    opacity: 0.8;
    margin-top: 1.5rem; /* mt-6 */
    margin-bottom: 0;
}

/* --- Responsive Styles --- */

@media (max-width: 992px) {
    :root {
        --container-width: 960px;
    }
    #stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .entities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sponsors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --container-width: 720px;
    }
    body {
        padding-top: 50px; /* Adjust for smaller navbar */
    }
    #navbar {
        height: 50px;
    }
    #navbar .container {
        flex-direction: column;
        height: auto;
        padding-bottom: 5px; /* Space for links */
    }
    #navbar .logo {
        margin-bottom: 5px;
    }
    #navbar ul {
        justify-content: center;
        width: 100%;
    }
    #navbar ul li {
        margin: 0 10px;
    }
    #hero h1 {
        font-size: 2.5rem; /* 40px */
    }
    #hero p {
        font-size: 1.25rem; /* 20px */
    }
    h2 {
        font-size: 1.8rem;
    }
    .info-grid {
        grid-template-columns: 1fr;
    }
    .info-image {
        margin-top: 2rem;
    }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .entities-grid {
        grid-template-columns: 1fr;
    }
    .sponsors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    :root {
        --container-width: 100%;
    }
    #navbar ul li {
        margin: 0 5px;
    }
    #navbar ul li a {
        padding: 3px 5px;
        font-size: 0.9rem;
    }
    #hero h1 {
        font-size: 2rem; /* 32px */
    }
    #hero p {
        font-size: 1.1rem; /* 18px */
    }
    #stats {
        grid-template-columns: 1fr;
    }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* Keep 2 columns for gallery on small screens */
    }
    .sponsors-grid {
        grid-template-columns: 1fr;
    }
    .icon-list {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}