/* --- Global & Utility Styles --- */

/* Centers and styles the separator line */
.underline {
    height: 4px;
    background-color: #007bff; /* Use your brand's primary color */
    margin-top: 5px;
    margin-bottom: 20px;
}

/* Style the primary button class (assuming btn-green is your primary CTA) */
.btn-green {
    background-color: #38761d; /* Example Darker Green Color */
    border-color: #38761d;
    color: white !important;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-green:hover {
    background-color: #2b5c17; /* Darker green on hover */
    border-color: #2b5c17;
    transform: translateY(-2px);
    color: white; /* Ensure text color remains white on hover */
}

/* Ensure the link inside the button inherits the button's style */
.btn-green a {
    color: inherit;
    text-decoration: none;
}

/* Make the green section background prominent */
.bg-green {
    background-color: #38761d !important; /* Example Darker Green - Adjust to your brand color */
}

/* CSS for the CTA button to make it visually pop */
.pulse-effect {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* Back to Top Button Styling */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Hidden by default */
    padding: 10px 15px;
    border-radius: 50%;
    z-index: 1000;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.back-to-top:hover {
    opacity: 1;
}

/* --- Header & Footer Polish --- */

/* Style for the logo image in the header and footer */
.logo-img {
    height: 45px; /* Consistent size */
    width: auto;
}

/* Header Nav Link Hover Effect */
.nav-link.hover-underline {
    position: relative;
    transition: color 0.3s ease;
}

.nav-link.hover-underline:hover {
    color: #ffc107 !important; /* Change link color to warning/yellow on hover */
}

/* Footer Link Hover Effect */
.footer a.hover-light {
    transition: color 0.2s ease-in-out;
}

.footer a.hover-light:hover {
    color: #ffc107 !important; /* Change to your highlight color */
}

/* Optional: Subtle scale-up effect for social icons */
.social-icons a.hover-scale {
    transition: transform 0.2s ease-in-out;
}

.social-icons a.hover-scale:hover {
    transform: scale(1.1); /* Slightly scales up the icon on hover */
    color: #ffc107 !important;
}

/* Make sure the icons in the Contact Info column use the brand color */
.col-md-4 i.fas {
    color: #ffc107; /* Ensures consistent warning color for the icons */
}

/* Adjust contact text size */
.footer .small {
    font-size: 0.9rem;
}

/* --- Homepage/Section Polish --- */

/* Hover effect for team member cards */
.team-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px); /* Lifts the card slightly */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Stronger shadow on hover */
}

/* Hover effect for news cards */
.news-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card-hover:hover {
    transform: translateY(-5px); /* Lifts the card slightly */
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; /* Stronger shadow for emphasis */
}

/* Style for the "Read More" button line in news cards */
.btn-outline-success {
    color: #38761d; /* Uses your primary green color */
}

.btn-outline-success:hover {
    color: #ffc107 !important; /* Changes text color to warning/yellow on hover */
}

/* Hover effect for gallery previews on homepage */
.gallery-thumb-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.gallery-thumb-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

.gallery-img {
    transition: transform 0.5s ease;
}

.gallery-thumb-hover:hover .gallery-img {
    transform: scale(1.05); /* Zoom slightly on hover */
}


/* --- Gallery Page Polish (Our-Pictures.php) --- */

/* Hover effect for gallery tiles */
.photo-tile-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-tile-hover:hover {
    transform: scale(1.03); /* Slight zoom on hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3) !important;
}

.gallery-thumbnail {
    /* Ensure the image scales smoothly within the container */
    transition: transform 0.5s ease;
}

.photo-tile-hover:hover .gallery-thumbnail {
    transform: scale(1.1); /* Slight zoom effect on the image */
}


.btn-success {
  background-color: #198754;
  border: none;
  transition: 0.3s;
}
.btn-success:hover {
  background-color: #145c32;
  transform: scale(1.05);
}


<style>
/* Custom CSS for the main slider to enhance captions and fix height */
.hero-slide {
    /* Use 700px as a reliable maximum height */
    max-height: 700px; 
    /* Use a viewport height as a minimum for small screens or default */
    min-height: 50vh;
    /* Important: Set height to auto so the container adjusts to the image height */
    height: auto; 
    position: relative;
    overflow: hidden;
}

.hero-slide .slide-img {
    /* This ensures the image always fills the width of its container */
    width: 100%;
    /* Let the image's height be determined naturally by its aspect ratio 
       *or* by the object-fit property applied below. */
    height: 100%; 
    
    /* Ensure the image covers the designated max-height area */
    object-fit: cover; 
    
    /* Re-apply the desired height constraints directly to the image */
    max-height: 700px; /* Match the container's max-height */
    min-height: 50vh; /* Match the container's min-height */

    filter: brightness(0.7); 
}

/* ... rest of the CSS ... */
</style>