:root {
    --cao-blue: #00588b;
    --cao-brown: #8c5c29;
    --light-bg: #f8f9fa;
    --text-color: #333;
    --cao-blue-dark: #003e63;
}

html { scroll-behavior: smooth; }
body { font-family: 'Lora', serif; color: var(--text-color); line-height: 1.7; margin: 0; padding-top: 76px; }

.navbar { background-color: var(--cao-blue) !important; }

/* Hero Carousel */
.carousel-item {
    position: relative;
    height: 80vh;
}

/* Full overlay for the hero section */
.carousel-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 1;
}

.carousel-item img {
    height: 80vh;
    object-fit: cover;
    animation: zoom 10s infinite alternate;
}

.carousel-caption {
    z-index: 2; /* Ensure text sits on top of overlay */
    bottom: 25%;
}

@keyframes zoom {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* UI Elements */
.img-wrapper { position: relative; width: 100%; overflow: hidden; border-radius: 8px; background-color: #eee; }
.img-fit { width: 100%; display: block; object-fit: contain; transition: transform 0.3s ease; }
.card-img-wrapper { height: 300px; display: flex; align-items: center; justify-content: center; }
.card-img-wrapper img { object-fit: cover; height: 100%; }

.btn-cao { background-color: var(--cao-brown); color: white; padding: 12px 30px; border-radius: 30px; text-decoration: none; transition: 0.3s; display: inline-block; }
.btn-cao:hover { background-color: #6a4620; color: white; }

.btn-hero-donate { 
    background-color: var(--cao-blue) !important; 
    border: 2px solid var(--cao-blue) !important; 
    color: white !important; 
    padding: 12px 30px; 
    border-radius: 30px; 
    transition: 0.3s; 
}
.btn-hero-donate:hover { 
    background-color: var(--cao-blue-dark) !important; 
    border-color: var(--cao-blue-dark) !important; 
    color: white !important; 
}

.section { padding: 80px 0; }
.card { border: none; transition: 0.3s; }
.card:hover { transform: translateY(-5px); }

/* Fixed Hero Content */
.hero-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Allows clicking through to carousel controls */
}

.hero-content-overlay .container {
    pointer-events: auto; /* Re-enables interaction for buttons */
}

/* Show controls only on hover */
.carousel-hover-control {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#heroCarousel:hover .carousel-hover-control {
    opacity: 1;
}