@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@600;700&display=swap');

/* Custom styles will go here */

/* Define Color Palette as CSS Variables */
:root {
    --primary-color: #2a628f; /* Muted Blue */
    --secondary-color: #F28C28; /* Warm Orange */
    --light-gray: #f8f9fa;
    --dark-text: #212529;
}

body {
    /* Add padding to the top of the body to offset the fixed navbar */
    padding-top: 70px; /* Adjust this value if navbar height changes */
    font-family: 'Lato', sans-serif; /* Apply Lato to body */
    color: var(--dark-text);
}

#home {
    min-height: 100vh; /* Make section at least full viewport height */
    display: flex;
    align-items: center; /* Vertically center the inner container */
    padding-top: 70px;  /* Add padding roughly equal to fixed navbar height + small buffer */
    padding-bottom: 20px; /* Optional: Add some bottom padding */
    margin-bottom: 0 !important; /* Override Bootstrap margin if needed */
    /* Ensure hero text color is applied correctly over overlay */
    position: relative; /* Ensure z-index context is established if needed */
    z-index: 2; /* Make sure content is above the ::before overlay */
}

#home .btn-primary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

#home .btn-primary:hover {
    background-color: #d97a20; /* Darker Orange */
    border-color: #d97a20;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bolder headings */
    color: var(--primary-color); /* Use Teal for headings */
}

h2 {
    margin-bottom: 1.5rem; /* Add slightly more space below main section headings */
    text-align: center; /* Center section headings */
}

/* Links & Buttons */
a {
    color: var(--primary-color);
    text-decoration: none; /* Remove default underline */
}

a:hover {
    color: darken(var(--primary-color), 10%); /* Slightly darken on hover - may need JS or direct hex */
     color: #1e4a70; /* Darker Muted Blue for hover */
    text-decoration: underline;
}

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

.btn-primary:hover {
    background-color: #1e4a70; /* Darker Muted Blue */
    border-color: #1e4a70;
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

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

/* Custom Accent Button */
.btn-accent {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white; /* White text for contrast on orange */
}

.btn-accent:hover {
    background-color: #d97a20; /* Darker Orange */
    border-color: #d97a20;
    color: white;
}

/* Cards */
.card {
    border: none; /* Remove default card border for a cleaner look */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add a subtle shadow */
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition */
    height: 100%; /* Ensure cards in a row take up full height if needed (e.g. for equal button alignment) */
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* Increase shadow on hover */
    transform: translateY(-5px); /* Slightly lift card on hover */
}

.card-img-top {
    height: 220px; /* Fixed height for card images */
    object-fit: cover; /* Cover the area, maintain aspect ratio, crop excess */
    width: 100%; /* Ensure image takes full width of card header */
}

/* Navbar Adjustments */
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
    color: var(--primary-color); /* Teal for active link */
    font-weight: bold;
}

/* Partner Logos */
.partner-logo {
    height: 60px; /* Fixed height for partner logos */
    width: auto; /* Allow width to adjust based on aspect ratio */
    object-fit: contain; /* Ensure entire logo is visible, scaled down if needed */
    vertical-align: middle; /* Helps align logos if heights vary slightly in practice */
}

/* Footer Styling */
footer {
    background-color: #e9ecef; /* Subtle grey background */
}

/* CSS for Horizontal Scroll Section */
/* Remove old horizontal scroll CSS */
/*.horizontal-scroll-wrapper {*/
/*    overflow-x: auto; */
/*    padding-bottom: 1rem; */
/*}*/
/*.project-card-scroll {*/
/*    width: 90%; */
/*    flex-shrink: 0; */
/*}*/
/*@media (min-width: 768px) { .project-card-scroll { width: 45%; } }*/
/*@media (min-width: 992px) { .project-card-scroll { width: 31%; } }*/

/* New Project Display Styles */
#project-display {
    min-height: 250px; /* Ensure it has some height initially */
    text-align: center; /* Center the title/description below image */
    padding: 1rem 0; /* Adjust padding (removed side padding, kept vertical) */
    /* Remove background/border */
    /* border: 1px solid #dee2e6; */
    /* background-color: #f8f9fa; */
    margin-bottom: 1.5rem; /* Adjust margin */
}

#project-display-image {
    object-fit: cover;
    max-width: 700px; /* Optional: Limit max width */
    width: 100%; /* Ensure image scales down with container */
    display: block; /* Needed for margin auto centering */
    margin: 0 auto 1.5rem auto; /* Center block image and add bottom margin */
    border-radius: 0.375rem; /* Match Bootstrap's default rounding */
}

#project-display-title {
    font-size: 1.75rem; /* Slightly larger title */
    margin-bottom: 1rem; /* Adjust margin */
}

.horizontal-scroll-wrapper {
     overflow-x: auto;
     padding-bottom: 1rem; /* Space for scrollbar */
     background-color: #f8f9fa; /* Light background for the scroller area */
     padding-top: 1rem; /* Increased top padding */
     padding-left: 1rem; /* Add padding inside scroll area */
     padding-right: 1rem;
     border-top: 1px solid #dee2e6; /* Add top border */
     border-radius: 0.375rem; /* Optional rounding */
}

.project-thumbnail-row {
    /* Add spacing between thumbnail cards if needed */
    /* gap: 1rem; */
}

.project-thumbnail-col {
    padding-left: 5px;
    padding-right: 5px;
}

.project-thumbnail-card {
    width: 150px; /* Fixed width for thumbnails */
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid transparent; /* Base border */
    transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.project-thumbnail-card:hover {
    transform: translateY(-3px);
}

.project-thumbnail-img {
    height: 100px; /* Fixed height for thumbnail images */
    object-fit: cover;
}

.project-thumbnail-title {
    font-size: 0.8rem; /* Smaller font size for title */
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Style for the selected thumbnail */
.project-thumbnail-card.active-thumbnail {
    border-color: var(--primary-color); /* Use primary color for border */
    transform: scale(1.05);
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* Increase shadow on hover */
    transform: translateY(-5px); /* Slightly lift card on hover */
}

/* Impact Section Styling */
#our-impact h3 {
    color: var(--primary-color); /* Make stats numbers primary color */
}

/* Testimonial Section */
.testimonial-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

/* Style for the selected thumbnail */

/* Get Involved Section Icons */
#get-involved .card-body i {
    color: var(--primary-color); /* Make icons primary color */
}

/* Testimonial Section */

/* Hero Section Background */
.hero-background {
    position: relative; /* Needed for pseudo-element positioning */
    /* Use the image from the images folder */
    background-image: url('../images/bg.jpeg'); 
    background-color: #f8f9fa; /* Fallback color */
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Parallax effect */
    z-index: 1; /* Ensure content is above pseudo-element */
}

/* Add overlay for better text contrast with fixed background */
.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    z-index: -1; /* Place overlay behind content */
}

/* Make sure the inner container doesn't try to flex */
#home > .container {
    /* No flex properties needed here, standard block layout */
}

/* Ensure Hero content is white for contrast */
#home h1,
#home p,
#home a.btn {
    color: white; /* Make hero text white */
}

/* Specific override for the button to ensure visibility and style */
#home .btn-primary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white; /* Ensure button text is white */
}

#home .btn-primary:hover {
    background-color: #d97a20; /* Darker Orange */
    border-color: #d97a20;
    color: white;
}

/* Custom Toast Styling */
#formSuccessToast {
    border-radius: 0.5rem; /* Match typical Bootstrap rounding */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Slightly enhanced shadow */
    border: none; /* Remove default border */
    border-left: 5px solid #198754; /* Change border color to success green */
    background-color: white; /* Set overall background to white */
}

#formSuccessToast .toast-header {
    /* Remove background and ensure text is dark */
    background-color: transparent; 
    color: var(--dark-text); /* Use default dark text color */
    border-top-left-radius: calc(0.5rem - 1px); /* Match parent rounding */
    border-top-right-radius: calc(0.5rem - 1px);
    border-bottom: 1px solid #dee2e6; /* Add subtle separator */
    /* Ensure items are vertically centered if needed */
    /* align-items: center; */ /* Uncomment if vertical alignment looks off */
}

/* Color the icon and title specifically */
#formSuccessToast .toast-header i,
#formSuccessToast .toast-header strong {
    /* Change text color to success green */
    color: #198754;
}

#formSuccessToast .toast-header .btn-close {
    /* Reset filter to make it dark */
    filter: none; 
    /* Add a slight margin if needed for spacing from edge */
    /* margin-inline-start: 0.5rem; */
}

#formSuccessToast .toast-body {
    background-color: transparent; /* Inherit white from parent */
    color: #212529; /* Standard dark text */
    /* Remove bottom rounding if header has border */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Adjust primary color if needed */
/* If your primary/accent color is different, replace var(--bs-primary) */
/* For example: */
/* #formSuccessToast .toast-header { background-color: #YOUR_COLOR_CODE; } */

/* Navbar Logo Styling */
.navbar-brand .navbar-logo {
    max-height: 40px; /* Adjust this value based on your navbar's height */
    width: auto;      /* Maintain aspect ratio */
    vertical-align: middle; /* Ensure it aligns nicely with text */
}