/* style.css - Updated based on mockups */

/* --- Global Reset & Base Styles --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    color: #3a3a3a; /* Slightly adjusted dark grey for text */
    background-color: #fcfaf7; /* Creamy off-white from mockups */
    overflow-x: hidden; /* Prevent horizontal scroll from blobs */
    position: relative; /* For positioning background blobs */
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.75em;
    font-weight: 600;
    line-height: 1.2;
    color: #3d3d3d; /* Dark charcoal for headings, consistent with mockups */
}

h1 { font-size: 2.8em; } /* Will adjust per component if needed */
h2 { font-size: 2.2em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.2em; }

p {
    margin-bottom: 1em;
}

a {
    color: #4A5568; /* Darker, more muted link color, can be overridden by buttons */
    text-decoration: none;
}

a:hover {
    color: #2D3748; /* Slightly darker on hover */
    text-decoration: none; /* Removing underline by default, buttons will have own style */
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Utility Classes --- */
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative; /* Ensure container content is above blobs */
    z-index: 2;
}

.text-center {
    text-align: center;
}

/* --- Background Blob Shapes (New) --- */
.background-blob {
    position: absolute;
    border-radius: 50% 60% 40% 70% / 60% 40% 70% 50%; /* Organic shape */
    opacity: 0.15; /* Soft and subtle */
    z-index: 0; /* Behind content */
    animation: slowMorph 15s infinite alternate ease-in-out;
}

.blob-peach {
    background-color: #FFDAB9; /* Soft peach */
    width: 40vw;
    height: 40vw;
    top: 5%;
    left: -10%;
}

.blob-teal {
    background-color: #A0D2DB; /* Soft teal */
    width: 35vw;
    height: 35vw;
    bottom: 10%;
    right: -15%;
    animation-delay: -5s;
}

.blob-lavender {
    background-color: #E6E6FA; /* Soft lavender */
    width: 30vw;
    height: 30vw;
    top: 20%;
    right: -5%;
    animation-delay: -10s;
}


@keyframes slowMorph {
    0% {
        border-radius: 50% 60% 40% 70% / 60% 40% 70% 50%;
        transform: scale(1) rotate(0deg);
    }
    50% {
        border-radius: 40% 70% 50% 60% / 70% 50% 60% 40%;
        transform: scale(1.05) rotate(5deg);
    }
    100% {
        border-radius: 50% 60% 40% 70% / 60% 40% 70% 50%;
        transform: scale(1) rotate(0deg);
    }
}


/* --- Site Header --- */
.site-header {
    background-color: rgba(255, 255, 255, 0.85); /* Slightly transparent white for modern feel */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    padding: 1em 0;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: 1.6em; /* Adjusted size */
    font-weight: 700; /* Bolder */
    color: #3d3d3d; /* Dark charcoal */
    text-decoration: none;
    display: flex; /* For subtitle alignment */
    flex-direction: column; /* Stack main title and subtitle */
    line-height: 1.1;
}
.logo .logo-subtitle { /* New style for "NANNY" */
    font-size: 0.6em; /* Smaller */
    font-weight: 500;
    color: #555; /* Slightly lighter */
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


.main-navigation ul {
    display: flex;
    gap: 2em; /* Increased spacing */
}

.main-navigation a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    padding: 0.5em 0;
    position: relative;
    transition: color 0.3s ease;
}

.main-navigation a.active,
.main-navigation a:hover {
    color: #3d3d3d; /* Dark charcoal for hover/active */
}

/* Removing underline effect, mockups are cleaner */
.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Position slightly below for a modern feel */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #3d3d3d; /* Dark charcoal */
    transition: width 0.3s ease;
}

.main-navigation a:hover::after,
.main-navigation a.active::after {
    width: 60%; /* Underline doesn't span full width for subtle effect */
}

/* Placeholder for header icons */
.header-icons {
    display: flex;
    align-items: center;
    gap: 1em;
}
.header-icons a {
    color: #555;
    font-size: 1.2em; /* Adjust if using icon fonts */
}
.header-icons a:hover {
    color: #3d3d3d;
}


/* --- Hero Section --- */
.hero-section {
    background-color: transparent; /* Blobs will show through */
    color: #3d3d3d;
    padding: 5em 0; /* Increased padding */
    text-align: center;
    position: relative; /* For z-indexing if needed */
}

.hero-visual-placeholder,
.profile-image-container { /* More generic class for profile images */
    width: 400px;
    height: 400px;
    border-radius: 50%; /* For a circular photo */
    margin: 0 auto 2em auto;
    overflow: hidden; /* Ensure image stays circular */
    border: 5px solid #fff; /* White border as in mockups */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Softer, more prominent shadow */
}
.hero-visual-placeholder img,
.profile-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-section h1 {
    color: #3d3d3d;
    margin-bottom: 0.5em;
    font-size: 3.2em; /* Larger hero heading */
    font-weight: 700;
}

.hero-section .sub-headline {
    font-size: 1.3em; /* Larger sub-headline */
    margin-bottom: 2em; /* More space before CTA */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #555;
}

/* --- Call to Action Buttons --- */
.cta-button {
    display: inline-block;
    padding: 0.9em 2.2em; /* Slightly larger padding */
    border-radius: 30px; /* More rounded corners */
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    border: none; /* Remove border for primary */
    cursor: pointer;
}

.cta-button.primary-cta {
    background-color: #3d3d3d; /* Dark charcoal/navy from mockups */
    color: #fff;
}

.cta-button.primary-cta:hover {
    background-color: #2c2c2c; /* Slightly darker shade on hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
    text-decoration: none;
}

.cta-button.secondary-cta {
    background-color: #fff; /* White background for secondary */
    color: #3d3d3d; /* Dark text */
    border: 2px solid #3d3d3d; /* Dark border */
}

.cta-button.secondary-cta:hover {
    background-color: #f7f7f7; /* Very light grey on hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    text-decoration: none;
}

/* --- General Section Styling --- */
section {
    padding: 4em 0; /* Increased default padding */
    position: relative; /* For z-indexing if needed for blobs */
    z-index: 1;
}

/* Removing alternating background, relying on blobs or specific section backgrounds */
section:nth-of-type(even):not(.hero-section):not(.secondary-cta-section):not(.testimonial-snippet-section) {
    background-color: transparent;
}
/* Example of a section with a specific subtle background if blobs aren't enough */
.subtle-bg-section {
    background-color: rgba(240, 240, 240, 0.3); /* Very subtle grey */
}


section h2 {
    text-align: center;
    margin-bottom: 1.5em;
    font-size: 2.5em; /* Larger section titles */
}

.text-link {
    display: inline-block;
    margin-top: 1em;
    font-weight: bold;
    color: #4A5568; /* Muted link color */
}
.text-link:hover {
    color: #2D3748;
    text-decoration: underline;
}

/* --- Brief Intro Section --- */
.brief-intro-section {
    text-align: center;
}
.brief-intro-section p {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1em; /* Slightly larger */
    color: #555;
}


/* --- Key Highlights / Card Styling (General) --- */
.highlights-grid,
.services-teaser-grid, /* Applying similar card styles */
.qualifications-list,
.testimonial-grid, /* Applying similar card styles */
.pillars-grid,
.service-offerings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5em; /* Increased gap */
}

.highlight-item, /* Base card style */
.service-teaser-item,
.qualification-item,
.testimonial-card,
.pillar-item,
.service-offering-card,
.content-card { /* New generic card for about me page */
    background-color: #fff;
    padding: 2em; /* Increased padding */
    border-radius: 12px; /* Softer, larger rounded corners */
    box-shadow: 0 5px 20px rgba(0,0,0,0.07); /* Softer shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none; /* Removing default borders for cleaner look */
    display: flex;
    flex-direction: column;
    text-align: center; /* Default for cards, can be overridden */
}

.highlight-item:hover,
.service-teaser-item:hover,
.qualification-item:hover,
.testimonial-card:hover,
.pillar-item:hover,
.service-offering-card:hover,
.content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.card-image-top { /* For cards with an image at the top */
    width: 100%;
    height: 180px; /* Adjust as needed */
    object-fit: cover;
    border-radius: 12px 12px 0 0; /* Rounded top corners */
    margin-bottom: 1.5em;
}
.card-profile-image { /* For circular profile images within cards */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1.5em auto;
    border: 3px solid #f0f0f0;
}


.icon-placeholder,
.card-icon { /* Updated icon style */
    width: 60px;
    height: 60px;
    background-color: transparent; /* No background for simple icons */
    color: #3d3d3d; /* Icon color */
    border-radius: 50%;
    margin: 0 auto 1em auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em; /* Larger icons, assuming font icons */
    /* For SVG/img icons, adjust size and remove font-size */
}
/* Example: if using <img> for icons */
.card-icon img {
    width: 40px;
    height: 40px;
}


.highlight-item h3,
.pillar-item h3 {
    font-size: 1.3em;
    margin-bottom: 0.5em;
    color: #3d3d3d;
}
.service-teaser-item h4,
.service-offering-card h4 {
    font-size: 1.2em; /* Adjusted */
    color: #3d3d3d;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.qualification-item h3 {
    font-size: 1.25em;
    color: #4A5568; /* Muted accent for these subheadings */
    margin-bottom: 0.5em;
}


/* --- Testimonial Snippet Section --- */
.testimonial-snippet-section {
    background-color: #4A5568; /* Muted dark color for emphasis */
    color: #fff;
    text-align: center;
}
.testimonial-snippet-section h2 { color: #fff; }
.testimonial-snippet-section blockquote {
    font-size: 1.3em; font-style: italic; max-width: 700px; margin: 0 auto 1em auto; position: relative; padding: 0 2em;
}
.testimonial-snippet-section blockquote::before,
.testimonial-snippet-section blockquote::after {
    content: '"'; font-size: 3em; position: absolute; color: rgba(255,255,255,0.3); /* More subtle quotes */
}
.testimonial-snippet-section blockquote::before { top: -0.2em; left: 0; }
.testimonial-snippet-section blockquote::after { bottom: -0.4em; right: 0; }
.testimonial-snippet-section cite { font-style: normal; font-weight: bold; display: block; font-size: 1em; }
.testimonial-snippet-section .text-link { color: #fff; }


/* --- Secondary CTA Section --- */
.secondary-cta-section {
    text-align: center;
    background-color: rgba(252, 250, 247, 0.7); /* Very light version of body bg */
}

/* --- Site Footer --- */
.site-footer {
    background-color: #3d3d3d; /* Dark charcoal */
    color: #bdc3c7;
    padding: 3em 0; /* Increased padding */
    text-align: center;
    font-size: 0.9em;
    position: relative;
    z-index: 5; /* Ensure footer is above any stray blobs */
}
.site-footer a { color: #ecf0f1; }
.site-footer a:hover { color: #fff; }
.footer-links, .quick-contact { margin-bottom: 1em; }
.footer-links a { margin: 0 0.75em; }
.quick-contact p { margin-bottom: 0.3em; }
.copyright { margin-top: 1.5em; font-size: 0.85em; color: #95a5a6; }


/* --- Page Title Section (for About, Services etc.) --- */
.page-title-section {
    background-color: transparent; /* Use blobs or keep clean */
    padding: 3em 0; /* Increased padding */
    text-align: center;
    border-bottom: 1px solid #eee; /* Subtle separator */
}
.page-title-section h1 {
    color: #3d3d3d;
    margin-bottom: 0;
    font-size: 2.8em; /* Prominent page titles */
}

/* --- About Me Page Specific Styles --- */
/* Content with Image Layout (for Journey, Personal Touch, "Positive Client Engaging") */
.content-with-image { /* This can be used for the "Positive Client engaging" cards */
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Vertically center content */
    gap: 3em; /* Increased gap */
    text-align: left; /* Override card default center */
}
.content-with-image .image-area { /* Renamed for clarity */
    flex: 1 1 300px;
    min-width: 250px;
}
.content-with-image .image-area img {
    border-radius: 12px; /* Match card radius */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 100%;
    /* For circular images in this layout, add a modifier class or target specific img */
}
.content-with-image .image-area img.circular-image {
    border-radius: 50%;
    width: 250px; /* Or adjust as needed */
    height: 250px; /* Or adjust as needed */
    object-fit: cover;
    margin: 0 auto; /* If it's smaller than the column */
}

.content-with-image .text-content {
    flex: 1.5 1 400px; /* Text takes a bit more space */
}
.content-with-image.reverse-layout { flex-direction: row-reverse; }

/* About Philosophy Section */
.about-philosophy-section { background-color: rgba(249,249,249,0.5); } /* Subtle bg */
.about-philosophy-section ul { list-style: none; padding-left: 0; }
.about-philosophy-section ul li {
    background-color: #fff; padding: 1em 1.5em; margin-bottom: 1em;
    border-left: 4px solid #FFDAB9; /* Peach accent */
    border-radius: 0 8px 8px 0; /* Softer radius */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Commitment Section */
.about-commitment-section { background-color: rgba(234, 242, 248, 0.5); text-align: center; }
.about-commitment-section p { max-width: 800px; margin-left: auto; margin-right: auto; }


/* --- My Approach & Services Page Specific Styles --- */
/* Approach Feature Section (Top of services.jpg) */
.approach-feature-section {
    /* Uses general section padding */
    background-color: transparent; /* Rely on blobs */
}
.approach-feature-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3em;
}
.approach-image-column {
    flex: 1 1 45%; /* Image takes up nearly half */
    position: relative; /* For potential organic shape mask */
}
.approach-image-column img {
    width: 100%;
    border-radius: 15px; /* Softly rounded */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    /* Organic shape mask would be complex, potentially an SVG mask or ::before/::after element */
}
.approach-text-column {
    flex: 1 1 50%; /* Text takes the other half */
    padding-left: 2em; /* Space from image if on right */
}
.approach-feature-layout.image-left .approach-text-column {
    padding-left: 0;
    padding-right: 2em;
}


/* Service Offerings Section */
/* .service-offerings-grid and .service-offering-card use general card styles */
.service-offering-card {
    background-color: #fff; /* Mockups show white cards */
    text-align: left; /* Override card default */
}
.service-offering-card .card-icon { /* Icons in service cards */
    margin-bottom: 1em;
    margin-left: 0; /* Align left if card text is left */
    /* Adjust color/size as needed */
}


/* Always Expect Section */
.always-expect-section { background-color: rgba(249,249,249,0.5); }
.expectations-list { list-style: none; padding-left: 0; max-width: 700px; margin: 0 auto; }
.expectations-list li {
    background-color: #fff; padding: 0.8em 1.2em; margin-bottom: 0.8em;
    border-left: 4px solid #A0D2DB; /* Teal accent */
    border-radius: 0 6px 6px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.06); font-weight: 500;
}

/* Important Note Section */
.important-note-text {
    background-color: #fff9e1; /* Soft yellow for attention */
    border: 1px solid #ffecb3;
    color: #544929;
    padding: 1.5em; /* More padding */
    border-radius: 8px; text-align: center; max-width: 700px; margin: 0 auto;
}
.important-note-text strong { color: #c77700; }


/* --- Testimonials Page Specific Styles --- */
/* .testimonial-grid and .testimonial-card use general card styles */
.testimonial-card .testimonial-image-placeholder,
.testimonial-card .card-profile-image { /* For testimonial author images */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1.5em auto;
    /* border: 3px solid #fff; */ /* Already in .card-profile-image */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
}
.testimonial-card .testimonial-image-placeholder img,
.testimonial-card .card-profile-image img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

.testimonial-content { text-align: center; }
.testimonial-content blockquote { margin-bottom: 1em; position: relative; }
.testimonial-content .quote-text {
    font-size: 1.1em; font-style: italic; color: #444; line-height: 1.6;
}
/* Using simpler quotes, or you can style ::before/::after as in original CSS if preferred */
.testimonial-content blockquote::before,
.testimonial-content blockquote::after { display: none; } /* Simpler look from mockups */

.testimonial-content .attribution {
    font-size: 0.95em; font-weight: bold; color: #3d3d3d; margin-top: 1em; display: block;
}


/* --- Contact Page Specific Styles --- */
.contact-layout-container {
    display: grid;
    grid-template-columns: 2fr 1.2fr; /* Form takes more space */
    gap: 3em;
}
.contact-form-container h2, .direct-contact-info h2 { margin-bottom: 1em; color: #3d3d3d; }
.form-group { margin-bottom: 1.5em; }
.form-group label { display: block; margin-bottom: 0.5em; font-weight: bold; color: #444; font-size: 0.95em; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%; padding: 0.9em 1.1em; /* Slightly more padding */
    border: 1px solid #ccc; border-radius: 8px; /* Softer radius */
    font-family: inherit; font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff; /* Ensure form fields are white */
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none; border-color: #A0D2DB; /* Teal accent for focus */
    box-shadow: 0 0 0 3px rgba(160, 210, 219, 0.3);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-submit-button { /* Uses .cta-button.primary-cta */ width: auto; padding: 0.9em 2.5em; }

.direct-contact-info {
    background-color: #f7fafd; /* Very light blue/grey, distinct */
    padding: 2.5em; /* More padding */
    border-radius: 12px;
    /* border: 1px solid #ddeeff; */ /* Removing border for cleaner look */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.direct-contact-info h3 {
    font-size: 1.2em; color: #4A5568; margin-top: 1.5em; margin-bottom: 0.6em;
    border-bottom: 1px solid #e0e7f0; padding-bottom: 0.3em;
}
.direct-contact-info h3:first-of-type { margin-top: 0; }
.direct-contact-info p { margin-bottom: 0.8em; font-size: 0.95em; line-height: 1.5; color: #555; }
.direct-contact-info p strong { color: #3d3d3d; }


/* Service Area Map */
.service-area-reminder iframe {
    width: 360px; /* 60% of original 600px width */
    height: 270px; /* 60% of original 450px height */
    max-width: 100%; /* Ensures responsiveness */
    display: block; /* Centers the iframe */
    margin: 1em auto;
}

/* --- Basic Responsiveness (Mobile First Considerations) --- */
@media (max-width: 992px) {
    .contact-layout-container { grid-template-columns: 1fr; }
    .direct-contact-info { margin-top: 2.5em; }
    .approach-feature-layout { flex-direction: column; }
    .approach-text-column { padding-left: 0; margin-top: 2em; }
    .approach-feature-layout.image-left .approach-text-column { padding-right: 0; }

    .background-blob { /* Make blobs smaller on smaller screens */
        width: 50vw;
        height: 50vw;
    }
    .blob-peach { left: -20%; }
    .blob-teal { right: -25%; }
}


@media (max-width: 768px) {
    h1 { font-size: 2.2em; }
    h2 { font-size: 1.8em; }
    section h2 { font-size: 2em; }
    .page-title-section h1 { font-size: 2.2em; }
    .hero-section h1 { font-size: 2.5em; }
    .hero-section .sub-headline { font-size: 1.1em; }


    .header-container {
        flex-direction: column;
        gap: 1em;
    }
    .main-navigation { width: 100%; }
    .main-navigation ul {
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        width: 100%;
    }
    .main-navigation a {
        padding: 0.8em 1em; /* Make tap targets larger */
        display: block;
        text-align: center;
        width: 100%;
    }
    .main-navigation a::after { display: none; } /* Simplify nav underline on mobile */
    .header-icons { justify-content: center; margin-top: 0.5em;}


    .hero-section { padding: 3em 0; }
    .hero-visual-placeholder, .profile-image-container { width: 150px; height: 150px; }

    .highlights-grid, .services-teaser-grid, .qualifications-list, .testimonial-grid, .pillars-grid, .service-offerings-grid {
        grid-template-columns: 1fr; /* Stack items on smaller screens */
        gap: 1.5em;
    }
    .highlight-item, .service-teaser-item, .qualification-item, .testimonial-card, .pillar-item, .service-offering-card, .content-card {
        padding: 1.5em; /* Adjust padding */
    }

    section { padding: 2.5em 0; } /* Slightly reduced section padding */

    .content-with-image,
    .content-with-image.reverse-layout {
        flex-direction: column;
    }
    .content-with-image .image-area img {
        margin-bottom: 1.5em;
    }
    .content-with-image .image-area img.circular-image {
        width: 180px;
        height: 180px;
        object-fit: cover; /* This will scale the image to cover the container while maintaining its aspect ratio */
        object-position: center 35%; /* This will shift the image's vertical position up */
    }

    .testimonial-card .testimonial-image-placeholder,
    .testimonial-card .card-profile-image {
        width: 70px; height: 70px;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group select,
    .form-group textarea {
        padding: 0.8em 1em;
    }

    .background-blob { /* Further reduce or hide blobs on very small screens if they become too distracting */
        width: 70vw;
        height: 70vw;
        opacity: 0.1;
    }
    .blob-peach { top: 2%; left: -30%; }
    .blob-teal { bottom: 5%; right: -35%; }
    .blob-lavender { display: none; } /* Hide one blob on mobile to reduce clutter */
}

/* --- NEW ZIGZAG TIMELINE SECTION --- */
.zigzag-timeline-section {
    padding: 4em 0;
}

.history-intro {
    max-width: 700px;
    margin: 0 auto 3em auto;
    color: #555;
}

.timeline-zigzag-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 2em auto;
    padding: 40px 0;
}

/* The main connecting line */
.timeline-zigzag-container::after {
    content: '';
    position: absolute;
    width: 3px;
    background-color: #ddd;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px;
}

.timeline-zigzag-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
    margin-bottom: 50px; /* Add space between items */
}

/* Position items to the left and right */
.timeline-zigzag-item:nth-child(odd) {
    left: 0;
}

.timeline-zigzag-item:nth-child(even) {
    left: 50%;
}

.timeline-milestone {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* Align milestones to the right for odd items */
.timeline-zigzag-item:nth-child(odd) .timeline-milestone {
    right: -30px;
}

/* Align milestones to the left for even items */
.timeline-zigzag-item:nth-child(even) .timeline-milestone {
    left: -30px;
}

.milestone-number {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: white;
    border: 3px solid #007bff;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.2em;
    color: #007bff;
}

.milestone-date {
    text-align: center;
    font-weight: bold;
    color: #555;
    margin-top: 10px;
    width: 120px;
    margin-left: -30px;
}

/* The colored "phase" bubbles */
.timeline-bubble {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-radius: 50px;
    color: white;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.bubble-blue {
    background-color: #007bff; /* Main blue color from example */
}

.bubble-red {
    background-color: #dc3545; /* Main red color from example */
}

.bubble-icon {
    font-size: 1.8em;
    margin-right: 15px;
}

.bubble-title {
    font-size: 1.2em;
    font-weight: bold;
}

/* The content box with bullet points */
.timeline-content-box {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    position: relative;
}

.timeline-content-box ul {
    padding-left: 20px;
    list-style: disc;
}

.timeline-content-box li {
    margin-bottom: 0.5em;
    color: #444;
}

/* --- RESPONSIVENESS FOR ZIGZAG TIMELINE --- */
@media screen and (max-width: 900px) {
    .timeline-zigzag-container::after {
        left: 31px; /* Move the line to the left */
    }

    .timeline-zigzag-item {
        width: 100%;
        padding-left: 80px;
        padding-right: 25px;
    }

    .timeline-zigzag-item:nth-child(odd),
    .timeline-zigzag-item:nth-child(even) {
        left: 0; /* Stack all items on the left */
    }

    .timeline-milestone {
        left: 0px;
        top: 0; /* Align to the top of the item */
        transform: none; /* Remove vertical centering */
    }

    .milestone-date {
        position: static;
        text-align: center;
        width: 60px; /* Match the width of the dot */
        margin-top: 8px; /* Add space below the dot */
        font-size: 0.8em;
        font-weight: bold;
        line-height: 1.2;
        color: #555;
    }

    .timeline-zigzag-item {
        margin-bottom: 50px;
        padding-top: 50px;
    }
    .timeline-zigzag-item:last-child {
        margin-bottom: 0;
    }

    .timeline-bubble {
        position: absolute;
        top: -25px; /* Position bubble above the content */
        left: 80px;
    }
}