/* --- MILESTONE VARIABLES --- */
.milestone-section-wrapper {
    /* Scoped variables to avoid global conflicts */
    --milestone-green: #52a552;
    --milestone-black: #000;
    --milestone-bg: #f9f9f9;

    background-color: var(--milestone-bg);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--milestone-black);
    width: 100%;
    overflow: hidden;
    /* Contains the timeline lines */
}

/* Ensure box-sizing doesn't break layout */
.milestone-section-wrapper * {
    box-sizing: border-box;
}

/* --- HEADER --- */
.milestone-header {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
}

.milestone-main-title {
    /* For font size, refer to the global.css for the different header elements. */
    /* font-size: 2.5rem; */
    color: var(--milestone-green);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

.milestone-main-title::after {
    content: "";
    width: 60px;
    height: 4px;
    background: var(--milestone-black);
    display: block;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* --- TIMELINE CONTAINER --- */
.milestone-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 100px;
}

.milestone-intro-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: #444;
    /* Slightly softer black for readability */
    line-height: 1.8;
    font-weight: 400;
}

/* The Vertical Line */
.milestone-timeline::after {
    content: "";
    position: absolute;
    width: 4px;
    background-color: var(--milestone-green);
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 1;
    /* margin-left: -2px; */
    border-radius: 2px;
}

/* --- TIMELINE ITEM (CONTAINER) --- */
.milestone-container {
    padding: 10px 40px;
    position: relative;
    background-color: transparent;
    width: 50%;
    opacity: 0;
    /* Hidden initially */
    transform: translateY(50px);
    transition: all 0.8s ease-out;
    z-index: 2;
}

/* Left & Right positioning */
.milestone-left {
    left: 0;
}

.milestone-right {
    left: 50%;
}

/* DOTS styles */
.milestone-left-pointer {
    position: absolute;
    top: 5px;
    /* Should have been half but due to timeline alignment issue */
    right: -17px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    z-index: 2;
    background-color: var(--milestone-green);
    transition: background 0.3s;
}

.milestone-container:hover .milestone-left-pointer {
    background-color: var(--milestone-black);
}

.milestone-right-pointer {
    position: absolute;
    top: 5px;
    /* Should have been half but due to timeline alignment issue */
    left: -13px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    z-index: 2;
    background-color: var(--milestone-green);
    transition: background 0.3s;
}

.milestone-container:hover .milestone-right-pointer {
    background-color: var(--milestone-black);
}



/* The Dots on the Line */
/* .milestone-container::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: #fff;
    border: 4px solid var(--milestone-green);
    top: 25px;
    border-radius: 50%;
    z-index: 1;
    transition: background 0.3s;
} */

/* .milestone-right::after {
    left: -10px;
} */

/* .milestone-container:hover::after {
    background-color: var(--milestone-black);
} */

/* --- CONTENT CARD --- */
.milestone-content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-top: 5px solid var(--milestone-green);
    transition: transform 0.3s ease;
}

.milestone-container:hover .milestone-content {
    transform: translateY(-5px);
}

/* Typography inside cards */
.milestone-date-badge {
    display: inline-block;
    background-color: var(--milestone-black);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.milestone-title {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    color: var(--milestone-green);
    line-height: 1.3;
}

.milestone-text {
    font-size: 1rem;
    color: #333;
    margin: 0 0 10px 0;
}

/* Animation Class (Added by JS) */
.milestone-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media screen and (max-width: 768px) {

    /* Remove the alignment of 50% from right for right side */
    .milestone-right {
        left: 0%;
    }

    /* Move line to the left */
    .milestone-timeline::after {
        left: 31px;
    }

    /* Make containers full width */
    .milestone-container {
        width: 100%;
        /* padding-left: 70px; */
        /* padding-right: 25px; */
    }

    /* Fix pointers/dots for left alignment */
    .milestone-left-pointer {
        position: absolute;
        top: 15px;
        /* Should have been half but due to timeline alignment issue */
        left: -2px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        z-index: 2;
        background-color: var(--milestone-green);
        transition: background 0.3s;
    }

    .milestone-container:hover .milestone-left-pointer {
        background-color: var(--milestone-black);
    }

    .milestone-right-pointer {
        position: absolute;
        top: 15px;
        /* Should have been half but due to timeline alignment issue */
        left: -2px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        z-index: 2;
        background-color: var(--milestone-green);
        transition: background 0.3s;
    }

    .milestone-container:hover .milestone-right-pointer {
        background-color: var(--milestone-black);
    }



    /* .milestone-container::after {
        left: 21px;
    } */

    /* .milestone-left::after,
    .milestone-right::after {
        left: 21px;
    }

    .milestone-right {
        left: 0%;
    } */

    .milestone-intro-text {
        font-size: 1rem;
        padding: 0 10px;
    }
}