/*
 * Custom Branding Styles for Ivy League Global
 *
 * This file applies the client's brand colors (#053125 - dark green, #FFFFFF - white)
 * to key elements of the website for a cohesive look and improved text visibility.
 */
/* --- Visual Comfort & Readability Enhancements --- */

/* 1. Softer Background & More Readable Body Text */
body {
    background-color: #fcfcfc; /* A very gentle off-white instead of stark white */
    color: #333333; /* Good, strong grey for body text */
}

p {
    font-size: 1.1rem; /* Increase base paragraph font size */
    line-height: 1.7; /* Increase line spacing for easier reading */
    margin-bottom: 1.25rem; /* Consistent spacing after paragraphs */
}

/* 2. Softer White Text on Dark Backgrounds (Reduces Glare) */
#header,
.footer,
.call-to-action,
.experience-badge,
.hero .hero-image-wrapper .stat-card {
    color: #f7f7f7; /* A softer off-white instead of pure #FFFFFF */
}

    #header .sitename,
    #header .navmenu ul li a,
    #header .mobile-nav-toggle,
    .footer p, .footer h4, .footer a,
    .call-to-action h2, .call-to-action p, .call-to-action .btn-outline,
    .experience-badge span,
    .hero .hero-image-wrapper .stat-card div {
        color: #f7f7f7 !important; /* Important to override more specific rules */
    }

        /* Ensure white background on CTA hover is also slightly off-white */
        .call-to-action .btn-outline:hover {
            background-color: #f7f7f7 !important;
        }


/* 3. More Prominent and Spaced-Out Headings */
h1, h2, h3, h4, h5, h6 {
    color: #053125; /* Your excellent brand green */
    font-weight: 700; /* Ensure headings are consistently bold */
    margin-bottom: 1rem; /* Add space below all headings */
}

/* 4. Clearer, More Elegant Links */
a {
    color: var(--accent-color); /* Your dark green for links */
    text-decoration: underline;
    text-decoration-color: rgba(5, 49, 37, 0.3); /* Underline is subtle */
    text-underline-offset: 3px;
    transition: all 0.3s ease;
}

    a:hover {
        text-decoration-color: var(--accent-color); /* Underline becomes solid on hover */
    }

/* 5. More "Breathing Room" Between Sections */
section, .section {
    padding: 80px 0; /* Increased from 60px to give content more space */
}
/* --- General Text Visibility --- */


/* Override Bootstrap's default accent color if it's still present */
:root {
    --accent-color: #053125; /* Ensure accent color is dark green */
}
/* --- Header Styling --- */

/* ... (your existing #header styles) ... */

/* Container for the logo text and slogan */

/* ... (your existing #header styles) ... */
/* Container for the logo text and slogan */
.header .logo .logo-text-container {
    margin-left: 10px;
    line-height: 1;
    position: relative; /* Enables vertical adjustment */
    top: 3px; /* Nudges the text block down by 3 pixels */
}

/* Style for the main logo text (h1) */
.header .logo h1 {
    font-size: 32px; /* Increased from 28px */
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    padding: 0;
    font-family: var(--heading-font);
}

/* Style for the slogan (span) */
.header .logo .slogan {
    display: block;
    font-size: 13px; /* Increased from 12px */
    font-weight: 400;
    color: #ffffff;
    opacity: 0.8;
    letter-spacing: 1px;
    margin-top: 4px;
}
/* --- Header Styling --- */

#header {
    background-color: #053125; /* Dark green from logo */
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    padding: 20px 0; /* Increased padding for the larger logo */
}

    #header .sitename,
    #header .navmenu ul li a,
    #header .mobile-nav-toggle {
        color: #FFFFFF; /* White text for contrast on dark green background */
    }

        /* Active and hover states for navigation links */
        #header .navmenu ul li a.active,
        #header .navmenu ul li a:hover {
            color: #f0f0f0; /* Slightly off-white for hover/active effect */
        }


/* ... (the rest of your header styles) ... */

/* --- Hero Section Styling --- */
/* Change hero section background to white and text to black */
#hero { /* Target the specific hero section ID */
    background-color: #FFFFFF; /* White background for hero */
    color: #333333; /* Default dark grey for text in hero section */
}

    #hero h1 {
        color: #053125; /* Dark green for headline on white background */
    }

        #hero h1 .highlight {
            color: #053125; /* Changed to dark green for highlight */
            font-weight: 700;
        }

    /* Increased specificity and !important for hero lead paragraph */
    #hero p.lead {
        color: #333333 !important; /* Dark grey for lead paragraph on white background */
        font-weight: 800 !important; /* Increased boldness */
        font-size: 1.25rem !important; /* Increased font size */
    }

    /* Increased specificity and !important for hero features list items */
    #hero .hero-features li {
        color: #333333 !important; /* Dark grey for features on white background */
        font-weight: 600 !important; /* Increased boldness */
        font-size: 1.15rem !important; /* Increased font size */
    }

        #hero .hero-features li i {
            color: #053125 !important; /* Dark green for check icons on white background */
        }


.hero .hero-tag {
    color: #FFFFFF; /* White text for the tag */
    background-color: #053125; /* Dark green background for hero tag */
    border-radius: 50px;
    padding: 8px 20px; /* Increased padding */
    display: inline-flex;
    align-items: center;
    font-weight: 700; /* Increased boldness */
    font-size: 1.1rem; /* Increased font size */
    margin-bottom: 20px;
}

    .hero .hero-tag i {
        color: #FFFFFF; /* White icon */
        margin-right: 10px; /* Increased margin */
        font-size: 1.2rem; /* Increased icon size */
    }

    /* Explicitly target the span inside hero-tag for maximum visibility */
    .hero .hero-tag span {
        color: #FFFFFF !important; /* Ensure text is white */
        font-weight: 900 !important; /* Make it very bold */
        font-size: 1.2rem !important; /* Make it larger */
    }

.hero .hero-image-wrapper .stat-card {
    background-color: #053125; /* Dark green background for stat cards */
    color: #FFFFFF; /* White text for all content in stat cards */
    padding: 1.2rem; /* Slightly increased padding */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* More prominent shadow */
}

    .hero .hero-image-wrapper .stat-card .stat-value {
        color: #FFFFFF; /* Ensure stat value is white */
        font-size: 1.6rem; /* Slightly increased font size */
        font-weight: 800; /* Increased boldness */
    }

    .hero .hero-image-wrapper .stat-card .stat-label {
        color: #FFFFFF; /* Ensure stat label is white */
        font-size: 0.95rem; /* Slightly increased font size */
        font-weight: 600; /* Increased boldness */
    }

    .hero .hero-image-wrapper .stat-card .stat-icon {
        color: #A8DADC; /* Lighter green for the icon */
        font-size: 1.4rem; /* Slightly increased icon size */
    }

/* Style for the WhatsApp button text in hero section - Increased specificity and !important */
.hero .hero-cta .btn-link {
    color: #053125 !important; /* Dark green for the link text */
    font-weight: 900 !important; /* Make it very bold */
    font-size: 1.2rem !important; /* Increase font size */
    text-decoration: none !important; /* Ensure no underline by default */
}

    .hero .hero-cta .btn-link:hover {
        color: #A8DADC !important; /* Lighter green on hover */
        text-decoration: underline !important; /* Add underline on hover for better UX */
    }


/* --- About Section Styling (Feature Boxes, Progress Bars) --- */
.about .lead {
    color: #333333; /* Darker grey for lead paragraph in About section for better visibility */
    font-weight: 500; /* Slightly bolder for improved readability */
}

.feature-box {
    background-color: #FFFFFF;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
}

    .feature-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .feature-box .icon-container {
        background-color: #053125; /* Dark green icon background */
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px auto;
    }

        .feature-box .icon-container i {
            color: #FFFFFF; /* White icon */
            font-size: 30px;
        }

    .feature-box h4 {
        color: #053125; /* Dark green heading */
        font-weight: 600;
        margin-bottom: 15px;
    }

    .feature-box p {
        color: #333333; /* Darker grey for body text in feature boxes */
        font-weight: 600; /* Increased boldness for improved readability */
        font-size: 1.05rem; /* Slightly increased font size */
    }

.about-content-box p { /* General paragraphs within about-content-box */
    color: #333333; /* Darker grey for better visibility */
    font-weight: 600; /* Increased font weight */
    font-size: 1.1rem; /* Increased font size */
}

.about-content-box .progress-title,
.about-content-box .progress-percent {
    color: #053125; /* Dark green for progress text */
    font-weight: 600;
}

.about-content-box .progress-bar {
    background-color: #053125; /* Dark green for progress bar fill */
}

.experience-badge {
    background-color: #053125; /* Dark green background */
    color: #FFFFFF; /* White text */
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: flex; /* Ensure flexbox for centering */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    text-align: center; /* Ensure text is centered */
    width: 140px; /* Increased width and height to give more room */
    height: 140px;
    overflow: hidden; /* Ensure overflow is hidden */
}

    .experience-badge .years {
        font-size: 1.2rem !important; /* Adjusted font size to fit "Proven" */
        font-weight: 700 !important;
        line-height: 1.1 !important;
        margin-bottom: 0.1rem !important;
        white-space: normal !important; /* Allow text to wrap */
    }

    .experience-badge .text {
        font-size: 0.6rem !important; /* Adjusted font size for secondary text */
        text-align: center;
        max-width: 110px;
        line-height: 1.2;
        white-space: normal !important; /* Allow text to wrap */
    }

/* --- Stats Section Styling --- */
.stats.light-background {
    background-color: #f8f8f8; /* Light background for stats section */
}

.stats-overview p { /* Text in the stats overview section */
    color: #333333; /* Darker grey for better visibility */
    font-weight: 600; /* Increased boldness */
    font-size: 1.1rem; /* Increased font size */
}

.stats-card {
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Spacing between cards */
}

    .stats-card .stats-icon {
        background-color: #053125; /* Dark green icon background */
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        flex-shrink: 0;
    }

        .stats-card .stats-icon i {
            color: #FFFFFF; /* White icon */
            font-size: 24px;
        }

    .stats-card .stats-number {
        color: #053125; /* Dark green for numbers */
        font-size: 32px;
        font-weight: 700;
    }

        .stats-card .stats-number .plus {
            font-size: 24px;
        }

    .stats-card p {
        color: #000000 !important; /* Changed to black for maximum visibility */
        font-weight: 900 !important; /* Already maximum boldness */
        font-size: 1.3rem !important; /* Further increased font size */
        margin-bottom: 0;
    }

/* --- Services Section Styling --- */
.services .section-title h2,
.services .section-title p {
    color: #053125; /* Dark green for section titles */
}

.services-headline .services-subtitle {
    color: #555555; /* Dark grey for subtitle */
    font-weight: 500;
}

.services-headline .services-title {
    color: #053125; /* Dark green for main title */
}

.services-description p {
    color: #555555; /* Dark grey for description */
}

.service-card {
    background-color: #FFFFFF;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
    height: 100%; /* Ensure cards have equal height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .service-card .service-icon {
        background-color: #053125; /* Dark green icon background */
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px auto;
    }

        .service-card .service-icon i {
            color: #FFFFFF; /* White icon */
            font-size: 36px;
        }

    .service-card h3 a {
        color: #053125; /* Dark green for service title links */
        text-decoration: none;
        font-weight: 600;
    }

        .service-card h3 a:hover {
            color: #A8DADC; /* Lighter green for hover */
        }

    .service-card p {
        color: #333333; /* Darker grey for service description for better visibility */
        font-weight: 500; /* Slightly increased font weight */
        font-size: 1.05rem; /* Increased font size */
    }

.service-action .read-more-btn {
    color: #053125; /* Dark green for read more button */
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .service-action .read-more-btn:hover {
        color: #A8DADC; /* Lighter green on hover */
    }

/* --- Call To Action Section Styling --- */
.call-to-action.dark-background {
    background-color: #053125; /* Dark green background */
    color: #FFFFFF; /* White text */
}

.call-to-action h2,
.call-to-action p {
    color: #FFFFFF; /* White text for CTA content */
}

.call-to-action .btn-primary {
    background-color: #A8DADC; /* Lighter green for primary CTA button */
    border-color: #A8DADC;
    color: #053125; /* Dark green text on lighter button */
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

    .call-to-action .btn-primary:hover {
        background-color: #90C2C4; /* Slightly darker lighter green on hover */
        border-color: #90C2C4;
    }

.call-to-action .btn-outline {
    background: transparent;
    border: 2px solid #FFFFFF; /* White border */
    color: #FFFFFF; /* White text */
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 50px;
    margin-left: 15px;
    transition: all 0.3s ease;
}

    .call-to-action .btn-outline:hover {
        background-color: #FFFFFF; /* White background on hover */
        color: #053125; /* Dark green text on hover */
    }

/* --- Team Section Styling --- */
.team .section-title h2,
.team .section-title p {
    color: #053125; /* Dark green for section titles */
}

.member-card {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 30px;
    text-align: center;
}

    .member-card.full-bio {
        text-align: left; /* Override for full bio layout */
    }

    .member-card h3 {
        color: #053125; /* Dark green for name */
        font-weight: 700;
        margin-bottom: 0.5rem; /* Adds a bit of space below the name */
    }

    .member-card span {
        color: #555555; /* Dark grey for title */
        font-size: 15px;
    }

    .member-card .member-bio p {
        color: #333333; /* Darker grey for bio text for better visibility */
        font-weight: 400; /* Standard font weight */
    }

    .member-card .member-bio h4 {
        color: #053125; /* Dark green for subheadings in bio */
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .member-card .member-bio ul {
        list-style: none;
        padding: 0;
    }

        .member-card .member-bio ul li {
            color: #333333; /* Darker grey for list items for better visibility */
            font-weight: 400; /* Standard font weight */
            margin-bottom: 8px;
            display: flex;
            align-items: flex-start;
        }

            .member-card .member-bio ul li i {
                color: #053125; /* Dark green for check icons */
                margin-right: 10px;
                font-size: 18px;
                line-height: 1.5; /* Align icon with text */
            }

    .member-card .member-social a {
        color: #053125; /* Dark green icons */
        margin: 0 5px;
        font-size: 20px;
        transition: color 0.3s ease;
    }

        .member-card .member-social a:hover {
            color: #A8DADC; /* Lighter green on hover */
        }

/* --- Contact Section Styling --- */
.contact .section-title h2,
.contact .section-title p {
    color: #053125; /* Dark green for section titles */
}

.contact-main-wrapper {
    display: flex; /* Use flexbox to control layout */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 30px; /* Consistent gap */
    justify-content: center; /* Center content when map is removed */
}

.contact-content {
    flex: 1; /* Allow contact content to grow */
    min-width: 300px; /* Ensure it doesn't get too small */
}

.contact-cards-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 576px) {
    .contact-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.contact-card {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 25px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0; /* Remove individual margin-bottom as gap handles it */
}

    .contact-card .icon-box {
        background-color: #053125; /* Dark green icon background */
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        flex-shrink: 0;
    }

        .contact-card .icon-box i {
            color: #FFFFFF; /* White icon */
            font-size: 24px;
        }

    .contact-card .contact-text h4 {
        color: #053125; /* Dark green heading */
        margin-bottom: 5px;
        font-weight: 600; /* Make headings bolder */
    }

    .contact-card .contact-text p {
        color: #333333; /* Darker grey for contact text for better visibility */
        margin-bottom: 0;
        font-size: 15px;
    }

.contact-form-container {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 30px;
}

    .contact-form-container h3 {
        color: #053125; /* Dark green heading */
        margin-bottom: 15px;
    }

    .contact-form-container p {
        color: #555555; /* Dark grey for form description */
        margin-bottom: 25px;
    }

    .contact-form-container .form-control {
        border: 1px solid #ced4da;
        border-radius: 5px;
        padding: 10px 15px;
        color: #333333; /* Dark text for input */
    }

        .contact-form-container .form-control::placeholder {
            color: #888888; /* Lighter placeholder text */
        }

    .contact-form-container .form-submit button {
        background-color: #053125; /* Dark green submit button */
        color: #FFFFFF; /* White text */
        border: none;
        padding: 12px 30px;
        border-radius: 50px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        .contact-form-container .form-submit button:hover {
            background-color: #A8DADC; /* Lighter green on hover */
            color: #053125; /* Dark green text on hover */
        }

    .contact-form-container .form-submit .social-links a {
        color: #053125; /* Dark green social icons */
        margin-left: 15px;
        font-size: 20px;
        transition: color 0.3s ease;
    }

        .contact-form-container .form-submit .social-links a:hover {
            color: #A8DADC; /* Lighter green on hover */
        }

/* --- Testimonials Section Styling --- */
.testimonials .section-title h2,
.testimonials .section-title p {
    color: #053125; /* Dark green for section titles */
}

.testimonial-item {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Ensure cards have equal height */
}

    .testimonial-item .stars i {
        color: #FFD700; /* Gold color for stars */
        margin-right: 2px;
    }

    .testimonial-item p {
        font-style: italic;
        color: #333333; /* Darker grey for testimonial text for better visibility */
        margin-bottom: 20px;
        font-weight: 500; /* Slightly bolder */
    }

    .testimonial-item .testimonial-author {
        display: flex;
        align-items: center;
    }

        .testimonial-item .testimonial-author img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 15px;
            border: 3px solid #A8DADC; /* Lighter green border around avatar */
        }

        .testimonial-item .testimonial-author h5 {
            color: #053125; /* Dark green for author name */
            font-weight: 700; /* Make name bolder */
            margin-bottom: 5px;
        }

        .testimonial-item .testimonial-author span {
            color: #555555; /* Darker grey for author title/location */
            font-size: 14px;
        }

    .testimonial-item .quote-icon {
        color: #A8DADC; /* Lighter green for quote icon */
        font-size: 40px;
        opacity: 0.2;
        position: absolute;
        bottom: 20px;
        right: 20px;
    }

/* --- Breadcrumbs Styling (for About page, but included here for consistency) --- */
.breadcrumbs {
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    position: relative;
    color: #FFFFFF; /* White text on breadcrumbs background */
}

    .breadcrumbs::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(5, 49, 37, 0.7); /* Dark green overlay for readability */
        z-index: 1;
    }

    .breadcrumbs .container {
        position: relative;
        z-index: 2;
    }

    .breadcrumbs h1 {
        color: #FFFFFF; /* White heading */
        font-size: 36px;
        font-weight: 700;
    }

    .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 16px;
        color: #FFFFFF; /* White text for breadcrumb links */
    }

        .breadcrumbs ol li + li::before {
            padding-left: 10px;
            color: #FFFFFF;
            content: "/";
        }

        .breadcrumbs ol li a {
            color: #A8DADC; /* Lighter green for links */
            text-decoration: none;
            transition: 0.3s;
        }

            .breadcrumbs ol li a:hover {
                text-decoration: underline;
            }

/* --- How We Work Section Styling --- */
.how-we-work .section-title h2,
.how-we-work .section-title p {
    color: #053125; /* Dark green for section titles */
}

.step-item {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 30px;
    margin-bottom: 30px; /* Spacing between steps */
    display: flex;
    align-items: flex-start;
    transition: all 0.3s ease;
}

    .step-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .step-item .step-icon {
        background-color: #053125; /* Dark green icon background */
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        flex-shrink: 0;
    }

        .step-item .step-icon i {
            color: #FFFFFF; /* White icon */
            font-size: 24px;
        }

    .step-item .step-info .step-number {
        color: #053125; /* Changed to dark green for better visibility */
        font-weight: 700; /* Increased boldness */
        font-size: 1.1rem; /* Increased font size */
        display: block;
        margin-bottom: 5px;
    }

    .step-item .step-info h3 {
        color: #053125; /* Dark green heading */
        font-weight: 700;
        margin-bottom: 10px;
    }

    .step-item .step-info p {
        color: #333333; /* Darker grey for description in step items for better visibility */
        font-weight: 700; /* Increased boldness to make it very prominent */
        font-size: 1.2rem; /* Further increased font size */
        margin-bottom: 0;
    }




/* --- Team Section Styling --- */

/* This is the rectangular container for the image */
.team .member-card .member-image {
    width: 100%; /* Make the container's width responsive */
    height: 400px; /* Set a fixed height for the rectangle */
    margin: 0 auto 20px auto; /* Center the container and add space below */
    border-radius: 12px; /* Optional: Adds rounded corners to the rectangle */
    overflow: hidden;
    background-color: #f5f5f5; /* A light background for any empty space */
    border: 1px solid #e0e0e0; /* Optional: A subtle border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

    /* This is the actual <img> tag inside the container */
    .team .member-card .member-image img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* **CRITICAL:** Scales the image to fit without cropping. */
        object-position: center; /* Ensures the image is centered. */
        transition: transform 0.3s ease;
    }

.team .member-card:hover .member-image img {
    transform: scale(1.05); /* Optional: Adds a slight zoom effect on hover */
}

/* --- Team Section Text Visibility & Font Size --- */

/* Style for the Name (h3) */
.team .member-card .member-info h3 {
    font-size: 1.6rem; /* Increased font size */
    font-weight: 700;
    margin-bottom: 0.5rem; /* Adds a bit of space below the name */
    color: #053125; /* Ensures the dark green brand color */
}

/* Style for the Title (span) */
.team .member-card .member-info span {
    font-size: 1rem; /* Increased font size from 15px */
    font-weight: 500;
    color: #444444; /* Slightly darker grey for better visibility */
    display: block; /* Ensures it takes its own line and respects margin */
    margin-bottom: 1rem; /* Adds space between title and bio */
}

/* Style for the Biography Text (p) */
.team .member-card .member-info .member-bio p {
    font-size: 1rem; /* Increased font size */
    line-height: 1.6; /* Improves readability */
    color: #333333;
}

/* Style for the "Read Michael's full story" link */
.team .member-card .member-info .member-bio a {
    font-weight: 600;
    color: var(--accent-color); /* Uses your brand's dark green */
    transition: all 0.3s ease;
}

    .team .member-card .member-info .member-bio a:hover {
        color: #A8DADC; /* Lighter green on hover */
        text-decoration: underline;
    }
/* --- About Page Specific Styles --- */

/* General Typography for About Page Sections */
#about-intro p,
#michael-bio .member-info p {
    font-size: 1.1rem; /* Larger font size for all paragraphs */
    line-height: 1.7; /* Increased line spacing for readability */
    color: #333333;
    margin-bottom: 1rem;
}

#about-intro h3,
#michael-bio .member-info h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Styling for "Our Story" & "Our Mission" boxes */
.about-box {
    background-color: #f8f9fa; /* Light background to separate content */
    padding: 30px;
    border-radius: 10px;
    height: 100%;
    border-left: 4px solid var(--accent-color); /* Brand accent border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

    .about-box .icon {
        font-size: 2.5rem;
        color: var(--accent-color);
        margin-bottom: 15px;
        display: block;
    }

/* Michael's Bio Section Styles */
#michael-bio .member-card.full-bio .member-image {
    width: 250px; /* Larger image for the bio page */
    height: 250px;
    margin: 0 auto; /* Ensure it's centered */
}

    #michael-bio .member-card.full-bio .member-image img {
        object-position: center 20%; /* Prioritizes the top part of the image */
    }

#michael-bio .member-info h3 {
    font-size: 2.2rem;
}

#michael-bio .member-info span {
    font-size: 1.1rem;
    font-style: italic;
    color: #555555;
}

#michael-bio .member-info h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef; /* Underline to separate sections */
}

/* Improved Styling for Credentials List */
#michael-bio .credentials-list {
    list-style: none;
    padding-left: 0;
}

    #michael-bio .credentials-list li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
        font-size: 1.05rem;
    }

        #michael-bio .credentials-list li i {
            color: var(--accent-color);
            font-size: 1.2rem;
            margin-right: 12px;
            line-height: 1.5; /* Aligns icon with text better */
        }

        #michael-bio .credentials-list li a {
            font-weight: 600;
        }

/* Styling for the final quote box */
#michael-bio .quote-box {
    margin-top: 1.5rem;
    padding: 20px;
    background-color: #f8f9fa;
    border-left: 4px solid var(--accent-color);
    border-radius: 4px;
}

    #michael-bio .quote-box p {
        font-size: 1.2rem !important;
        font-weight: 600;
        font-style: italic;
        margin: 0;
    }
/* --- Services Page Styles --- */

/* Styling for the Service Cards */
.service-item-detail {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    height: 100%;
    border: 1px solid #e9ecef;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
}

    .service-item-detail:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .service-item-detail .icon-box {
        width: 60px;
        height: 60px;
        background: color-mix(in srgb, var(--accent-color), transparent 90%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px auto;
    }

        .service-item-detail .icon-box i {
            color: var(--accent-color);
            font-size: 28px;
        }

    .service-item-detail h3 {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 20px;
    }

    /* Improves List Readability */
    .service-item-detail ul {
        list-style: none;
        padding: 0;
    }

        .service-item-detail ul li {
            padding-bottom: 15px;
            display: flex;
            align-items: flex-start;
            font-size: 1.1rem; /* Increased from 1.05rem */
            font-weight: 500; /* Added for better visibility */
            line-height: 1.6;
        }

            .service-item-detail ul li i {
                font-size: 20px;
                margin-right: 12px;
                color: var(--accent-color);
                line-height: 1.5;
            }

/* Pricing & CTA Section Styling */
.pricing-section {
    background-color: #f8f9fa;
    padding: 40px;
    border-radius: 10px;
    border-top: 4px solid var(--accent-color);
}

    .pricing-section h3 {
        font-weight: 700;
    }

/* Mobile Navigation adjustments */
@media (max-width: 1199px) {
    /* Set background of the entire mobile menu overlay */
    .mobile-nav-active .navmenu {
        background: rgba(5, 49, 37, 0.95) !important; /* Dark green, slightly transparent */
    }

    /* Color of the mobile navigation links */
    .navmenu a,
    .navmenu a:focus {
        color: #FFFFFF !important; /* White text for all menu items */
    }

        /* Color of the icons within mobile navigation links */
        .navmenu a i,
        .navmenu a:focus i {
            color: #FFFFFF !important; /* White icons */
            background-color: transparent !important; /* Ensure background is transparent if not needed */
        }

        /* Active/hover state for mobile navigation links */
        .navmenu a:hover,
        .navmenu .active,
        .navmenu .active:focus {
            color: #A8DADC !important; /* Lighter green on hover/active */
        }

    /* Background of dropdowns in mobile menu (if applicable) */
    .navmenu .dropdown ul {
        background-color: rgba(255, 255, 255, 0.1) !important; /* Slightly transparent white for sub-menus */
    }
}