/* TLO Foundation Brand Styles */

:root {
    --tlo-peach: #FEC9A7;
    --tlo-mint: #A5F8CE;
    --tlo-blue: #C5EBFE;
    --tlo-pink: #F197C0;
    --tlo-purple: #B49FDC;

    --tlo-text-dark: #333333; /* Primary text color */
    --tlo-text-medium: #555555; /* For less emphasis text */
    --tlo-text-light: #FFFFFF;
    --tlo-bg-white: #FFFFFF;
    --tlo-bg-light-peach: #FEF7F2;
    --tlo-bg-light-gray: #F9F9F9;

    /* === FONT === */
    --tlo-font-primary: 'Montserrat', sans-serif;
}

body {
    font-family: var(--tlo-font-primary);
    color: var(--tlo-text-dark);
    background-color: var(--tlo-bg-white);
    font-weight: 400; /* Default body font weight */
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tlo-font-primary);
    color: var(--tlo-text-dark);
    font-weight: 700; /* Bolder for headings */
    margin-top: 0;
    margin-bottom: 0.75rem; /* Consistent heading margin */
    line-height: 1.3;
}

h1 { font-size: 2.8rem; font-weight: 700;} /* Example: slightly larger */
h2 { font-size: 2.2rem; font-weight: 600;}
h3 { font-size: 1.8rem; font-weight: 600;}
h4 { font-size: 1.5rem; font-weight: 500;}
h5 { font-size: 1.25rem; font-weight: 600;} /* Increased weight for section sub-titles */
h6 { font-size: 1rem; font-weight: 500;}

p {
    margin-bottom: 1rem;
    font-weight: 400;
}

.lead {
    font-size: 1.25rem;
    font-weight: 400; /* Standard lead paragraph weight */
}

a {
    color: var(--tlo-peach); /* Brand color for links */
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: #e9b895; /* Darker peach on hover */
    text-decoration: underline;
}


/* --- Component Styling --- */

section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Hero Carousel */
#heroCarousel .carousel-item {
    height: 550px; /* Adjusted height */
}
#heroCarousel .carousel-item > div {
    background-color: rgba(0, 0, 0, 0.45); /* Slightly darker overlay */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* Ensure vertical centering and stacking */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}
#heroCarousel .carousel-item h1 {
    color: var(--tlo-text-light);
    font-size: 3.2rem; /* Slightly larger */
    font-weight: 700;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
    margin-bottom: 0.75rem;
}
#heroCarousel .carousel-item p.lead {
    color: var(--tlo-text-light);
    font-size: 1.6rem; /* Slightly larger */
    margin-bottom: 1.75rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    max-width: 700px; /* Constrain width for readability */
    font-weight: 400;
}
#heroCarousel .btn-tlo-hero {
    background-color: var(--tlo-peach);
    border-color: var(--tlo-peach);
    color: var(--tlo-text-dark);
    padding: 0.85rem 1.8rem;
    font-size: 1.15rem;
    font-weight: 600; /* Bolder button text */
    text-transform: uppercase; /* Optional: make button text uppercase */
    letter-spacing: 0.5px;   /* Optional: slight letter spacing */
    border-radius: 5px; /* Slightly rounded buttons */
}
#heroCarousel .btn-tlo-hero:hover {
    background-color: #e9b895;
    border-color: #e9b895;
    color: var(--tlo-text-dark);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0,0,0,0.3);
  border-radius: 50%;
  padding: 15px;
}


/* Section Backgrounds */
.bg-tlo-light-section {
    background-color: var(--tlo-bg-light-peach);
}

/* Text Colors */
.text-tlo-peach { color: var(--tlo-peach) !important; }
.text-tlo-mint { color: var(--tlo-mint) !important; }
.text-tlo-blue { color: var(--tlo-blue) !important; }
.text-tlo-pink { color: var(--tlo-pink) !important; }
.text-tlo-purple { color: var(--tlo-purple) !important; }
.text-tlo-dark { color: var(--tlo-text-dark) !important; }
.text-tlo-medium { color: var(--tlo-text-medium) !important; } /* Bootstrap's .text-muted equivalent */


/* Buttons */
.btn { /* General button styling for consistency */
    font-family: var(--tlo-font-primary);
    font-weight: 500; /* Default button weight */
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-tlo-primary {
    background-color: var(--tlo-peach);
    border-color: var(--tlo-peach);
    color: var(--tlo-text-dark);
}
.btn-tlo-primary:hover, .btn-tlo-primary:focus {
    background-color: #e9b895;
    border-color: #e9b895;
    color: var(--tlo-text-dark);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-outline-tlo-primary {
    color: var(--tlo-peach);
    border-color: var(--tlo-peach);
}
.btn-outline-tlo-primary:hover, .btn-outline-tlo-primary:focus {
    background-color: var(--tlo-peach);
    color: var(--tlo-text-dark);
}

.btn-tlo-secondary {
    background-color: var(--tlo-mint);
    border-color: var(--tlo-mint);
    color: var(--tlo-text-dark);
}
.btn-tlo-secondary:hover, .btn-tlo-secondary:focus {
    background-color: #8ddcb3;
    border-color: #8ddcb3;
    color: var(--tlo-text-dark);
}

.btn-outline-tlo-secondary {
    color: var(--tlo-mint);
    border-color: var(--tlo-mint);
}
.btn-outline-tlo-secondary:hover, .btn-outline-tlo-secondary:focus {
    background-color: var(--tlo-mint);
    color: var(--tlo-text-dark);
}

.btn-outline-tlo-dark {
    color: var(--tlo-text-dark);
    border-color: var(--tlo-text-dark);
}
.btn-outline-tlo-dark:hover, .btn-outline-tlo-dark:focus {
    background-color: var(--tlo-text-dark);
    color: var(--tlo-text-light);
}
.btn-lg { /* For larger CTA buttons */
    padding: 0.85rem 1.8rem;
    font-size: 1.1rem;
}
.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
}


/* Specific Section Styling */

/* What We Do Section */
.section-what-we-do i {
    margin-bottom: 1rem;
    font-size: 2.8rem; /* fa-3x adjusted */
}
.section-what-we-do h5 {
    font-weight: 600;
    font-size: 1.3rem; /* Slightly larger for emphasis */
    margin-bottom: 0.5rem;
}
.section-what-we-do p {
    color: var(--tlo-text-medium); /* Use medium gray for paragraph text */
    font-size: 0.95rem;
}


/* Our Impact Section */
.section-our-impact h3 {
    font-weight: 700;
    font-size: 2.8rem; /* Larger impact numbers */
    margin-bottom: 0.25rem;
}
.section-our-impact p {
    font-size: 1.05rem;
    color: var(--tlo-text-medium);
    font-weight: 500;
}

/* Gallery Preview */
.section-gallery .img-fluid {
    border: 3px solid var(--tlo-bg-light-peach);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section-gallery .img-fluid:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* Testimonials */
.section-testimonials .testimonial-card {
    background-color: var(--tlo-bg-white);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
    border: 1px solid #eee; /* Subtle border */
    border-radius: 8px; /* more rounded */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
}
.section-testimonials .testimonial-card p { /* The quote itself */
    font-style: italic;
    color: var(--tlo-text-medium);
    font-size: 1rem;
    line-height: 1.7;
}
.section-testimonials .testimonial-card strong { /* Name */
    color: var(--tlo-text-dark);
    font-weight: 600;
}
.section-testimonials .testimonial-card small { /* Role */
    font-weight: 400;
    color: #777;
}

/* Events */
.section-events .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eaeaea; /* Consistent card border */
    border-radius: 8px;
}
.section-events .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.12);
}
.section-events .card-title {
    color: var(--tlo-peach);
    font-weight: 600;
    font-size: 1.3rem; /* Match other subheadings */
}
.section-events .card-text {
    font-size: 0.9rem;
    color: var(--tlo-text-medium);
}
.section-events .card-body .text-muted { /* For date etc */
    font-size: 0.85rem;
}


/* Call To Action */
.section-cta h2 {
    font-weight: 700;
    font-size: 2.4rem; /* Prominent CTA heading */
}
.section-cta p.lead {
    font-weight: 400;
    color: var(--tlo-text-medium);
}
.section-cta .btn {
    margin-top: 0.5rem;
    font-weight: 600; /* Bolder CTA buttons */
}


/* Utility */
.shadow-soft {
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.07) !important;
}

.text-muted { /* Override Bootstrap's default text-muted if needed */
    color: var(--tlo-text-medium) !important;
}

/* Make sure form elements also inherit the font */
input, textarea, select, button {
    font-family: var(--tlo-font-primary);
}





/* =================================== */
/*      ABOUT US PAGE STYLES           */
/* =================================== */

/* --- General Section Styling for About Page --- */
.section-about-founder,
.section-vision-mission,
.section-team,
.section-get-involved-cta {
    /* Global padding should be handled by 'section' tag or a general utility class.
       If not, uncomment and adjust:
    padding-top: 4rem;
    padding-bottom: 4rem;
    */
}

/* If using a specific light background for some sections on this page */
/* This class should be in your global CSS if used elsewhere */
/*
.bg-tlo-light-section {
    background-color: var(--tlo-bg-light-peach);
}
*/

/* --- Section: About Founder --- */
.section-about-founder .display-5 { /* "About TLO Foundation" Heading */
    color: var(--tlo-text-dark); /* Or a specific brand heading color */
}

.section-about-founder .founder-image {
    border-radius: 0.75rem; /* Bootstrap's .rounded-3 is 0.5rem, this is a bit more */
    /* box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1); /* Bootstrap's .shadow-lg */
    border: 5px solid var(--tlo-bg-white); /* White border to lift it from bg-tlo-light-section */
    max-width: 100%; /* Ensure it's responsive */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .section-about-founder .founder-image {
        max-width: 350px; /* Max width on medium screens and up */
    }
}

.section-about-founder .founder-name { /* "Our Passionate Founder" subheading */
    color: var(--tlo-peach);
    font-weight: 700; /* Or your standard h3 weight */
    font-size: 1.75rem; /* Adjust as needed */
}

.section-about-founder .lh-lg { /* Paragraphs describing founder */
    color: var(--tlo-text-medium);
    font-size: 1.05rem; /* Slightly larger for readability */
    line-height: 1.8;   /* More spacing */
}

/* --- Section: Vision & Mission --- */
.section-vision-mission h3 { /* "Our Vision", "Our Mission" */
    font-weight: 600; /* Or your standard h3 weight */
    color: var(--tlo-text-dark);
}

.section-vision-mission p.lead {
    color: var(--tlo-text-medium);
    font-size: 1.2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Section: Meet Our Team --- */
.section-team .display-6 { /* "Meet Our Dedicated Team" Heading */
    color: var(--tlo-text-dark);
}

.team-member-card {
    background-color: var(--tlo-bg-white);
    border: 1px solid #e9ecef; /* Softer border, similar to Bootstrap card */
    border-radius: 0.75rem; /* Consistent rounding */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); /* Bootstrap .shadow-sm */
}

.team-member-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.12) !important;
}

.team-member-img-container {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--tlo-peach);
    /* margin: -50px auto 15px auto; /* For "overlap" effect if card has padding-top */
    /* For non-overlap, simpler margin: */
    margin-left: auto;
    margin-right: auto;
    /* margin-top: 1.5rem; /* if .card has no top padding for img */
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.team-member-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member-card .card-body {
    padding-top: 1rem; /* Adjust if image container is inside card-body */
}

.team-member-name { /* Name of the team member */
    font-weight: 600;
    color: var(--tlo-text-dark);
    font-size: 1.15rem;
}

.team-member-position { /* Position/Role of team member */
    font-weight: 500;
    color: var(--tlo-peach) !important; /* !important if overridden by .card-text */
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.team-member-bio { /* Biography */
    font-size: 0.875rem;
    color: var(--tlo-text-medium);
    line-height: 1.6;
    min-height: 50px; /* Or remove if dynamic height is preferred */
}

/* --- Section: Get Involved CTA (About Page) --- */
.section-get-involved-cta h3 { /* "Get Involved" */
    font-weight: 600;
    color: var(--tlo-text-dark);
}

.section-get-involved-cta p.lead {
    color: var(--tlo-text-medium);
    font-size: 1.15rem;
    margin-bottom: 1.5rem; /* Bootstrap default mb-4 is 1.5rem */
}

/* Button styles (.btn-tlo-primary, .btn-outline-tlo-secondary, .btn-lg)
   should be defined globally in your style.css */


/* --- Responsive Adjustments for About Page --- */
@media (max-width: 767.98px) {
    .section-about-founder .text-md-start {
        text-align: center !important; /* Ensure founder text is centered on mobile */
    }
    .section-about-founder .founder-name {
        font-size: 1.5rem; /* Adjust heading size for mobile */
    }

    .section-vision-mission p.lead,
    .section-get-involved-cta p.lead {
        font-size: 1.1rem; /* Slightly smaller lead text on mobile */
    }

    /* Team cards stacking and sizing */
    .section-team .col-md-4.col-sm-6 { /* Target the specific column classes used */
        max-width: 280px; /* Control max width of team cards on small screens */
        margin-left: auto;
        margin-right: auto;
    }

    /* Stack CTA buttons on mobile if not already handled by Bootstrap's ms-md-3 */
    .section-get-involved-cta .btn + .btn { /* If buttons are direct siblings */
        /* margin-left: 0 !important; /* Handled by .mt-3 .mt-md-0 in HTML */
    }
}

@media (max-width: 575.98px) {
    .section-about-founder .display-5 {
        font-size: 2rem; /* Smaller main heading on xs screens */
    }
    .section-vision-mission h3,
    .section-get-involved-cta h3 {
        font-size: 1.5rem; /* Smaller h3 on xs screens */
    }
    .section-team .display-6 {
        font-size: 1.75rem; /* Smaller team heading on xs screens */
    }
}

 
-------------------

/* ... (your existing CSS variables and styles) ... */

/* Navbar Styling */
.tlo-navbar {
    font-family: var(--tlo-font-primary); /* Apply Montserrat to navbar */
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.tlo-navbar .navbar-brand img {
    max-height: 45px; /* Ensure logo respects max height */
}

.tlo-navbar .nav-link {
    color: var(--tlo-text-dark) !important; /* Dark text for nav links */
    font-weight: 500; /* Medium weight for nav links */
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    transition: color 0.3s ease;
}

.tlo-navbar .nav-link:hover,
.tlo-navbar .nav-link.active { /* Style for active link */
    color: var(--tlo-peach) !important; /* Brand peach color on hover/active */
}

/* Styling for the Login button in the navbar if you need specific overrides */
.tlo-navbar .nav-item .btn-tlo-primary {
    font-weight: 600; /* Make login button text slightly bolder */
    /* padding-top: 0.4rem;
    padding-bottom: 0.4rem; Ensure btn-sm provides adequate padding */
}

/* Navbar toggler icon color (if default is hard to see on white) */
/*
.tlo-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(51, 51, 51, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.tlo-navbar .navbar-toggler {
    border-color: rgba(51, 51, 51, 0.1);
}
*/

/* ... (rest of your style.css) ... */

---------------

/* =================================== */
/*            FOOTER STYLES            */
/* =================================== */

.footer-tlo { /* Add this class to your footer element: <footer class="footer-tlo bg-dark ..."> */
    background-color: var(--tlo-text-dark) !important; /* Using your --tlo-text-dark for a deep, rich dark */
    color: #adb5bd; /* A light gray for primary footer text, softer than pure white */
    font-family: var(--tlo-font-primary); /* Ensure Montserrat font */
    font-size: 0.9rem; /* Slightly smaller base font size for footer */
    padding-top: 3.5rem; /* pt-5 equivalent */
    padding-bottom: 1.5rem; /* pb-3 equivalent */
    /* margin-top: 3rem; /* mt-5 equivalent - handle margin via Bootstrap or specific page needs */
}

.footer-tlo h5 {
    color: var(--tlo-bg-white); /* Brighter white for headings */
    font-weight: 600; /* Montserrat Semi-Bold */
    margin-bottom: 1rem;
    font-size: 1.1rem;
    text-transform: uppercase; /* Optional: uppercase for headings */
    letter-spacing: 0.5px;   /* Optional: slight letter spacing */
}

.footer-tlo p {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.footer-tlo .list-unstyled li {
    margin-bottom: 0.5rem;
}

.footer-tlo .list-unstyled a,
.footer-tlo .contact-info p a { /* For email/phone links if any */
    color: #ced4da; /* Slightly brighter than base text for links */
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-tlo .list-unstyled a:hover,
.footer-tlo .contact-info p a:hover {
    color: var(--tlo-peach) !important; /* Brand peach color on hover */
    padding-left: 5px; /* Subtle indent effect on hover */
}

.footer-tlo .contact-info i.fas,
.footer-tlo .contact-info i.fab {
    color: var(--tlo-peach); /* Brand peach for icons */
    margin-right: 0.75rem;
    width: 20px; /* Ensure consistent icon spacing */
    text-align: center;
}

.footer-tlo .social-icons a {
    color: #ced4da; /* Icons start with a light gray */
    font-size: 1.3rem; /* Larger social icons */
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block; /* Allows transform */
}

.footer-tlo .social-icons a:hover {
    color: var(--tlo-peach) !important; /* Brand peach on hover */
    transform: translateY(-3px); /* Slight lift effect */
}
.footer-tlo .social-icons a:not(:last-child) {
    margin-right: 1rem; /* Bootstrap's me-3 is 1rem */
}


.footer-tlo hr {
    border-top-color: rgba(255, 255, 255, 0.15); /* Softer horizontal rule */
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

.footer-tlo .copyright-text {
    color: #868e96; /* Darker gray for copyright, less prominent */
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 0; /* mb-0 */
}

/* Responsive adjustments for footer if needed */
@media (max-width: 767.98px) {
    .footer-tlo {
        text-align: center; /* Center align content on smaller screens */
    }
    .footer-tlo .col-md-4 { /* Bootstrap class for columns */
        margin-bottom: 2rem; /* mb-3 is 1rem, increase for better spacing */
    }
    .footer-tlo .contact-info i.fas,
    .footer-tlo .contact-info i.fab {
        /* margin-right: 0.5rem; /* Slightly less margin if needed */
    }
    .footer-tlo .social-icons {
        margin-top: 0.5rem; /* Add some space above social icons when centered */
    }
}

----------------------
 /* login */

 body.login-page-tlo {
        font-family: var(--tlo-font-primary);
        background-color: var(--tlo-bg-light-peach); /* Light peach background */
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 1.5rem 0; /* Add some padding for smaller viewports */
    }

    .login-container-tlo {
        max-width: 420px; /* Slightly wider */
        width: 100%;
        margin: auto; /* Centers the container if flex alignment isn't enough */
    }

    .login-card-tlo {
        background-color: var(--tlo-bg-white);
        border: none; /* Remove default card border */
        border-radius: 10px; /* More rounded corners */
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); /* Softer, more spread shadow */
        padding: 1rem; /* Inner padding for card body */
    }
    
    .login-card-tlo .card-body {
        padding: 1.5rem; /* Bootstrap's p-3 is 1rem, increase for more space */
    }

    .login-card-tlo .login-header {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    .login-card-tlo .login-header img {
        max-height: 60px; /* Adjust logo size as needed */
        margin-bottom: 0.75rem;
    }
    .login-card-tlo .login-header h3 {
        font-weight: 600;
        color: var(--tlo-text-dark);
        font-size: 1.75rem; /* Slightly larger */
    }
    .login-card-tlo .login-header .emoji {
        font-size: 1.5rem; /* Control emoji size if needed */
        vertical-align: middle;
    }


    .form-control {
        font-family: var(--tlo-font-primary);
        border-radius: 6px; /* Consistent rounded inputs */
        border: 1px solid #ced4da;
        padding: 0.65rem 0.75rem; /* Adjust padding for better feel */
    }
    .form-control:focus {
        border-color: var(--tlo-peach);
        box-shadow: 0 0 0 0.25rem rgba(254, 201, 167, 0.35); /* Peach focus ring */
    }
    .form-label, label { /* Target both for consistency */
        font-weight: 500;
        color: var(--tlo-text-medium);
        margin-bottom: 0.3rem; /* Smaller margin for labels */
    }
    .input-group .btn-outline-secondary {
        border-color: #ced4da;
    }
    .input-group .btn-outline-secondary:hover,
    .input-group .btn-outline-secondary:focus {
        background-color: #f8f9fa; /* Light hover for eye icon */
        border-color: #adb5bd;
    }

    .form-check-input:checked {
        background-color: var(--tlo-peach);
        border-color: var(--tlo-peach);
    }
    .form-check-label {
        font-size: 0.9rem;
        color: var(--tlo-text-medium);
    }

    .btn-login-tlo {
        background-color: var(--tlo-peach);
        border-color: var(--tlo-peach);
        color: var(--tlo-text-dark); /* Dark text on peach for contrast */
        font-weight: 600;
        padding: 0.75rem 1.5rem; /* Larger button padding */
        border-radius: 6px;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .btn-login-tlo:hover {
        background-color: #e9b895; /* Darker peach */
        border-color: #e9b895;
        color: var(--tlo-text-dark);
    }

    .login-links-tlo {
        text-align: center;
        margin-top: 1.5rem;
        font-size: 0.9rem;
    }
    .login-links-tlo a {
        color: var(--tlo-peach);
        text-decoration: none;
        font-weight: 500;
    }
    .login-links-tlo a:hover {
        text-decoration: underline;
        color: #e9b895; /* Darker peach on hover */
    }

    .alert {
        border-radius: 6px;
        font-size: 0.9rem;
    }

    ------------------
    /* register */

    body.register-page-tlo {
        font-family: var(--tlo-font-primary);
        background-color: var(--tlo-bg-light-peach);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 1.5rem 0;
    }

    .register-container-tlo {
        max-width: 480px; /* Slightly wider for more fields */
        width: 100%;
        margin: auto;
    }

    .register-card-tlo {
        background-color: var(--tlo-bg-white);
        border: none;
        border-radius: 10px;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
        padding: 1rem;
    }
    
    .register-card-tlo .card-body {
        padding: 1.5rem;
    }

    .register-card-tlo .register-header {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    .register-card-tlo .register-header img {
        max-height: 60px;
        margin-bottom: 0.75rem;
    }
    .register-card-tlo .register-header h3 {
        font-weight: 600;
        color: var(--tlo-text-dark);
        font-size: 1.75rem;
    }
     .register-card-tlo .register-header .emoji {
        font-size: 1.5rem;
        vertical-align: middle;
    }

    .form-control {
        font-family: var(--tlo-font-primary);
        border-radius: 6px;
        border: 1px solid #ced4da;
        padding: 0.65rem 0.75rem;
    }
    .form-control:focus {
        border-color: var(--tlo-peach);
        box-shadow: 0 0 0 0.25rem rgba(254, 201, 167, 0.35);
    }
    .form-label, label {
        font-weight: 500;
        color: var(--tlo-text-medium);
        margin-bottom: 0.3rem;
    }
     .input-group .btn-outline-secondary { /* For password toggle */
        border-color: #ced4da;
    }
    .input-group .btn-outline-secondary:hover,
    .input-group .btn-outline-secondary:focus {
        background-color: #f8f9fa;
        border-color: #adb5bd;
    }


    .btn-register-tlo {
        background-color: var(--tlo-peach);
        border-color: var(--tlo-peach);
        color: var(--tlo-text-dark);
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        border-radius: 6px;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .btn-register-tlo:hover {
        background-color: #e9b895;
        border-color: #e9b895;
        color: var(--tlo-text-dark);
    }

    .register-links-tlo {
        text-align: center;
        margin-top: 1.5rem;
        font-size: 0.9rem;
    }
    .register-links-tlo a {
        color: var(--tlo-peach);
        text-decoration: none;
        font-weight: 500;
    }
    .register-links-tlo a:hover {
        text-decoration: underline;
        color: #e9b895;
    }

    .alert {
        border-radius: 6px;
        font-size: 0.9rem;
    }
    .alert a { /* Style links inside alerts */
        font-weight: bold;
        color: inherit; /* Inherit alert text color */
        text-decoration: underline;
    }


    ------------------
    /* =================================== */
/*        CONTACT PAGE STYLES          */
/* =================================== */

/* --- Section: Contact Form --- */
.section-contact-form {
    /* bg-tlo-light-section class applied in HTML */
}
.section-contact-form .display-5 { /* "Get in Touch" Heading */
    color: var(--tlo-text-dark); /* Or specific brand heading color */
}
.section-contact-form .lead.text-tlo-medium {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Styling for the form itself */
.contact-form-tlo .form-control,
.contact-form-tlo .form-select {
    font-family: var(--tlo-font-primary); /* Ensure Montserrat */
    border-radius: 0.375rem; /* Bootstrap's default rounded */
    border: 1px solid #ced4da; /* Standard Bootstrap border */
    padding: 0.75rem 1rem; /* form-control-lg padding */
    font-size: 1rem; /* form-control-lg font-size */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.contact-form-tlo .form-control:focus,
.contact-form-tlo .form-select:focus {
    border-color: var(--tlo-peach); /* Brand peach border on focus */
    box-shadow: 0 0 0 0.25rem rgba(var(--tlo-peach-rgb), 0.35); /* Brand peach shadow on focus - see note below */
    /* Note: You'll need to define --tlo-peach-rgb in :root if you haven't.
       Example: --tlo-peach-rgb: 254, 201, 167; (for #FEC9A7)
    */
}
/* If you don't want to define --tlo-peach-rgb, use a simpler solid shadow: */
/*
.contact-form-tlo .form-control:focus,
.contact-form-tlo .form-select:focus {
    border-color: var(--tlo-peach);
    box-shadow: 0 0 5px var(--tlo-peach);
}
*/

.contact-form-tlo .form-control::placeholder {
    color: #6c757d; /* Standard placeholder color */
    opacity: 1;
}

.contact-form-tlo .form-select {
    color: #495057; /* Default select text color */
}
.contact-form-tlo .form-select option[value=""] {
    color: #6c757d; /* Placeholder option color */
}


/* Submit button styling is handled by global .btn-tlo-primary and .btn-lg */
.contact-form-tlo .btn-tlo-primary {
    font-weight: 600; /* Ensure button text is sufficiently bold */
}

/* Alert styling (success/error messages) */
.section-contact-form .alert {
    font-family: var(--tlo-font-primary);
    font-weight: 500;
    border-left-width: 5px;
}
.section-contact-form .alert-success {
    border-left-color: #198754; /* Bootstrap success green */
    /* background-color: #d1e7dd;
    color: #0f5132; */
}
.section-contact-form .alert-danger {
    border-left-color: #dc3545; /* Bootstrap danger red */
    /* background-color: #f8d7da;
    color: #842029; */
}
.section-contact-form .alert .btn-close {
    transition: transform 0.2s ease;
}
.section-contact-form .alert .btn-close:hover {
    transform: scale(1.1);
}


/* --- Section: Office Info --- */
.section-office-info {
    /* bg-white applied in HTML */
}
.section-office-info h3 { /* "Our Office" Heading */
    font-weight: 600; /* fw-semibold */
    color: var(--tlo-text-dark);
}
.section-office-info .contact-details-tlo p {
    font-size: 1.1rem; /* fs-5 equivalent for contact details */
    color: var(--tlo-text-medium);
    margin-bottom: 0.5rem; /* mb-2 equivalent */
}
.section-office-info .contact-details-tlo strong {
    color: var(--tlo-text-dark) !important; /* Ensure strong tag is dark */
    font-weight: 500; /* Make "Location:", "Email:" less bold than main heading */
}
.link-tlo-peach { /* Custom class for links in this section */
    color: var(--tlo-peach);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}
.link-tlo-peach:hover {
    color: #e9b895; /* Darker peach */
    text-decoration: underline;
}


/* --- Responsive Adjustments for Contact Page --- */
@media (max-width: 767.98px) {
    .section-contact-form .display-5 {
        font-size: 2.2rem; /* Adjust heading size for mobile */
    }
    .section-contact-form .lead.text-tlo-medium {
        font-size: 1.05rem; /* Adjust lead text size */
    }
    .contact-form-tlo .form-control-lg, /* Ensure consistent sizing */
    .contact-form-tlo .form-select-lg {
        font-size: 0.95rem;
        padding: 0.65rem 0.9rem;
    }
}

----------
:root {
    /* ... your other variables ... */
    --tlo-peach: #FEC9A7;
    --tlo-peach-rgb: 254, 201, 167; /* RGB values for #FEC9A7 */
}

-----------

/* =================================== */
/*        GALLERY PAGE STYLES          */
/* =================================== */

.section-gallery-page .display-5 { /* "Our Gallery" Heading */
    color: var(--tlo-text-dark);
}

/* --- Filter Form Styling --- */
.filter-form-tlo .form-select-lg,
.filter-form-tlo .form-control-lg {
    font-family: var(--tlo-font-primary);
    border-radius: 0.375rem; /* Bootstrap default */
    border: 1px solid #ced4da;
    font-size: 1rem; /* Bootstrap .form-control-lg default */
    padding: 0.75rem 1rem; /* Bootstrap .form-control-lg default */
}
.filter-form-tlo .form-select-lg:focus,
.filter-form-tlo .form-control-lg:focus {
    border-color: var(--tlo-peach);
    box-shadow: 0 0 0 0.25rem rgba(var(--tlo-peach-rgb), 0.35); /* Define --tlo-peach-rgb in :root */
}
/* Apply button style is global .btn-tlo-primary .btn-lg */

/* --- Gallery Group Styling --- */
.gallery-group {
    border-bottom: 1px solid #e9ecef; /* Separator for groups */
    padding-bottom: 2.5rem;
}
.gallery-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.gallery-group-header {
    /* text-align: center; /* Optional: center group headers */
}

.gallery-group-name {
    font-weight: 600;
    color: var(--tlo-text-dark);
    font-size: 1.75rem; /* Prominent album name */
}

.gallery-group-meta {
    font-size: 0.95rem;
}
.gallery-group-meta i.fas { /* Calendar icon */
    font-size: 0.9em;
}

.gallery-group-description {
    font-size: 1rem;
    line-height: 1.7;
}

/* --- Gallery Item (Image) Styling --- */
.gallery-item .gallery-figure {
    margin-bottom: 0; /* Reset figure margin */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-item .gallery-figure:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
}

.gallery-thumbnail {
    width: 100%;
    height: 200px; /* Fixed height for thumbnails, adjust as needed */
    object-fit: cover; /* Crop image to fit, maintaining aspect ratio */
    display: block; /* Remove any extra space below img */
    border: 1px solid #dee2e6; /* Bootstrap .border */
}

.gallery-image-link {
    position: relative; /* For overlay positioning */
}

.gallery-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--tlo-peach-rgb), 0.5); /* Semi-transparent peach overlay */
    /* Or a dark overlay: background-color: rgba(0, 0, 0, 0.4); */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gallery-image-link:hover .gallery-image-overlay {
    opacity: 1;
}
.gallery-image-overlay i.fas { /* Search icon */
    font-size: 2.5rem;
    color: var(--tlo-bg-white); /* White icon on peach overlay */
    /* Or if dark overlay: color: var(--tlo-peach); */
}

.gallery-caption {
    font-size: 0.85rem;
    background-color: #f8f9fa; /* Light background for caption */
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* --- Gallery Modal Styling --- */
.gallery-modal .modal-dialog {
    max-width: 90%; /* Allow modal to be wider */
}
@media (min-width: 992px) { /* modal-xl takes effect from lg breakpoint */
    .gallery-modal .modal-dialog.modal-xl {
        max-width: 1140px; /* Bootstrap's .modal-xl max-width */
    }
}

.gallery-modal .modal-content {
    background-color: rgba(0,0,0,0.85); /* Dark semi-transparent background for modal content */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.5);
}
.gallery-modal .modal-header .btn-close-white {
    font-size: 1rem;
    padding: 0.75rem;
    opacity: 0.8;
}
.gallery-modal .modal-header .btn-close-white:hover {
    opacity: 1;
}

.gallery-modal .modal-body img {
    max-height: 85vh; /* Prevent image from being too tall */
    object-fit: contain; /* Ensure whole image is visible */
}
.gallery-modal .modal-caption {
    /* Positioned with style attr in HTML for simplicity or can be done here */
}

/* --- Load More Button Styling --- */
/* Handled by global .btn-outline-tlo-primary and .btn-lg */
.section-gallery-page .btn-outline-tlo-primary i.fas {
    font-size: 0.9em;
    vertical-align: middle;
}


/* --- Responsive Adjustments for Gallery Page --- */
@media (max-width: 767.98px) {
    .section-gallery-page .display-5 {
        font-size: 2.2rem;
    }
    .filter-form-tlo .col-md-3, .filter-form-tlo .col-md-5, .filter-form-tlo .col-md-4 {
        margin-bottom: 0.75rem; /* Add space between filter elements when stacked */
    }
    .filter-form-tlo .btn-lg {
        font-size: 1rem; /* Slightly smaller button text on mobile */
    }
    .gallery-group-name {
        font-size: 1.5rem;
    }
    .gallery-thumbnail {
        height: 150px; /* Smaller thumbnail height on mobile */
    }
}

-----------

/* =================================== */
/*       VOLUNTEER PAGE STYLES         */
/* =================================== */

/* --- Section: Volunteer Form / Thank You --- */
.section-volunteer-form {
    /* bg-tlo-light-section or bg-white applied in HTML */
}
.section-volunteer-form .display-5 { /* "Become a Volunteer" Heading */
    color: var(--tlo-text-dark);
}
.section-volunteer-form .lead.text-tlo-medium {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Styling for the form itself */
.volunteer-form-tlo .form-control-lg,
.volunteer-form-tlo .form-select-lg {
    font-family: var(--tlo-font-primary);
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.volunteer-form-tlo .form-control-lg:focus,
.volunteer-form-tlo .form-select-lg:focus {
    border-color: var(--tlo-peach);
    box-shadow: 0 0 0 0.25rem rgba(var(--tlo-peach-rgb), 0.35); /* Define --tlo-peach-rgb in :root */
}
.volunteer-form-tlo .form-control-lg::placeholder {
    color: #6c757d;
    opacity: 1;
}
.volunteer-form-tlo .form-select-lg option[value=""] {
    color: #6c757d;
}
/* Submit button styling is global .btn-tlo-primary .btn-lg */
.volunteer-form-tlo .btn-tlo-primary {
    font-weight: 600;
}

/* Thank You / Error Message Styling */
.volunteer-thank-you-message,
.volunteer-error-message {
    border-top: 5px solid var(--tlo-mint); /* Mint accent for success */
    /* For error, this will be overridden if needed */
}
.volunteer-error-message {
    border-top-color: #dc3545; /* Red accent for error */
}

.volunteer-thank-you-message .icon-success i,
.volunteer-error-message .icon-error i {
    display: inline-block;
    padding: 15px;
    border-radius: 50%;
    background-color: #e9f7ef; /* Light mint for success icon bg */
    /* Color for icon itself is text-tlo-mint or text-danger */
}
.volunteer-error-message .icon-error i {
    background-color: #f8d7da; /* Light red for error icon bg */
}

.volunteer-thank-you-message .display-6,
.volunteer-error-message .display-6 {
    color: var(--tlo-text-dark);
}
.volunteer-thank-you-message hr,
.volunteer-error-message hr {
    border-top-color: rgba(0,0,0,0.1);
}
/* Buttons in thank you/error message use global styles */


/* --- Section: Volunteer Impact --- */
.section-volunteer-impact {
    /* bg-white applied in HTML */
}
.section-volunteer-impact h3 { /* "Volunteer Impact" Heading */
    font-weight: 600; /* fw-semibold */
    color: var(--tlo-text-dark);
}
.section-volunteer-impact h3 i.fas { /* Globe icon */
    font-size: 0.9em;
}
.section-volunteer-impact p.lead.text-tlo-medium,
.section-volunteer-impact p.text-tlo-medium {
    font-size: 1.1rem; /* Slightly larger for impact paragraphs */
    line-height: 1.8;
}

/* --- Responsive Adjustments for Volunteer Page --- */
@media (max-width: 767.98px) {
    .section-volunteer-form .display-5 {
        font-size: 2rem;
    }
    .volunteer-thank-you-message .display-6,
    .volunteer-error-message .display-6 {
        font-size: 1.75rem;
    }
    .volunteer-form-tlo .form-control-lg,
    .volunteer-form-tlo .form-select-lg {
        font-size: 0.95rem;
        padding: 0.65rem 0.9rem;
    }
    .section-volunteer-impact p.lead.text-tlo-medium,
    .section-volunteer-impact p.text-tlo-medium {
        font-size: 1rem;
    }
}
---------
/* =================================== */
/*         DONATE PAGE STYLES          */
/* =================================== */

/* --- Section: Donate Form --- */
.section-donate-form {
    /* bg-tlo-light-section class applied in HTML */
}
.section-donate-form .display-5 { /* "Support Our Mission" Heading */
    color: var(--tlo-text-dark);
}
.section-donate-form .lead.text-tlo-medium {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Donation Form Container and Form Elements */
.donation-form-container {
    border-top: 5px solid var(--tlo-peach); /* Brand accent on top of form box */
}
.donation-form-container h4 { /* "Make a Secure Donation" Subheading */
    font-weight: 600; /* More emphasis */
}

.donation-form-tlo .form-label-tlo {
    font-family: var(--tlo-font-primary);
    font-weight: 500; /* Slightly bolder labels */
    color: var(--tlo-text-dark);
    margin-bottom: 0.3rem; /* Adjust spacing */
    font-size: 0.95rem;
}

.donation-form-tlo .form-control-lg {
    font-family: var(--tlo-font-primary);
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.donation-form-tlo .form-control-lg:focus {
    border-color: var(--tlo-peach);
    box-shadow: 0 0 0 0.25rem rgba(var(--tlo-peach-rgb), 0.35); /* Define --tlo-peach-rgb in :root */
}
.donation-form-tlo .form-control-lg::placeholder {
    color: #6c757d;
    opacity: 1;
}

/* Input group for amount */
.donation-form-tlo .input-group-text {
    font-family: var(--tlo-font-primary);
    font-size: 1rem; /* Match form-control-lg */
    font-weight: 500;
    background-color: #e9ecef; /* Standard Bootstrap input group bg */
    border: 1px solid #ced4da;
    border-right: 0; /* Remove right border for seamless look */
    color: var(--tlo-text-medium);
}
.donation-form-tlo .input-group .form-control-lg {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.donation-form-tlo .input-group:focus-within .input-group-text { /* Highlight on focus */
    border-color: var(--tlo-peach);
    /* Optional: box-shadow to match input field (might be too much) */
    /* box-shadow: 0 0 0 0.25rem rgba(var(--tlo-peach-rgb), 0.35); */
}


/* Donate Button styling is global .btn-tlo-primary .btn-lg */
.donation-form-tlo .btn-tlo-primary {
    font-weight: 600;
    text-transform: uppercase; /* Make button text more prominent */
    letter-spacing: 0.5px;
}
.donation-form-tlo .btn-tlo-primary i.fas {
    font-size: 0.9em;
    vertical-align: middle; /* Better alignment for icon */
}

/* Alert styling (success/error messages) - (Copied from contact/volunteer if consistent) */
.section-donate-form .alert {
    font-family: var(--tlo-font-primary);
    font-weight: 500;
    border-left-width: 5px;
}
.section-donate-form .alert-success {
    border-left-color: var(--tlo-mint); /* Using mint for success confirmation */
    background-color: #e9f7ef; /* Lighter mint for background */
    color: #0f5132; /* Darker green text */
}
.section-donate-form .alert-danger {
    border-left-color: #dc3545;
    background-color: #f8d7da;
    color: #842029;
}

/* --- Section: Donation Impact --- */
.section-donation-impact {
    /* bg-white applied in HTML */
}
.section-donation-impact h3 {
    font-weight: 600;
    color: var(--tlo-text-dark);
}
.section-donation-impact h3 i.fas {
    font-size: 0.9em;
}
.section-donation-impact p.lead.text-tlo-medium,
.section-donation-impact p.text-tlo-medium {
    font-size: 1.1rem;
    line-height: 1.8;
}
.section-donation-impact .link-tlo-peach { /* Defined in previous CSS for contact page, reusable here */
    /* Ensure it's defined or copy from contact.css if not global */
}
.section-donation-impact .fw-medium { /* Bootstrap class for font-weight: 500 */
    font-weight: 500 !important;
}


/* --- Responsive Adjustments for Donate Page --- */
@media (max-width: 767.98px) {
    .section-donate-form .display-5 {
        font-size: 2rem;
    }
    .donation-form-container {
        padding: 1.5rem !important; /* Adjust padding on mobile */
    }
    .donation-form-tlo .form-control-lg {
        font-size: 0.95rem;
        padding: 0.65rem 0.9rem;
    }
    .donation-form-tlo .input-group-text {
        font-size: 0.95rem;
        padding: 0.65rem 0.75rem;
    }
    .donation-form-tlo .btn-lg {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
        font-size: 1rem;
    }
    .section-donation-impact p.lead.text-tlo-medium,
    .section-donation-impact p.text-tlo-medium {
        font-size: 1rem;
    }
}