/* ======================== */
/* ===== Timeline CSS ===== */
/* ======================== */

/* Base Styles for Timelines */
.custom-desktop-timeline,
.custom-mobile-timeline {
    box-sizing: border-box;
}

.custom-desktop-timeline h3,
.custom-mobile-timeline h3 {
    margin-top: 0;
}

.custom-desktop-timeline p,
.custom-mobile-timeline p {
    margin-bottom: 0;
}

/* ======================== */
/* ===== Desktop Timeline CSS ===== */
/* ======================== */

/* Desktop Timeline Container */
.custom-desktop-timeline {
    position: relative;
    padding: 40px 0;
    margin: 40px auto;
    width: 80%;
    max-width: 1200px; /* Optional: Set a max-width for better control */
}

/* Desktop Timeline Items */
.custom-desktop-timeline .desktop-timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
    position: relative;
}

/* Desktop Timeline Date */
.custom-desktop-timeline .desktop-timeline-date {
    font-size: 24px;
    font-weight: bold;
    color: #8b807a;
    position: relative;
    margin-left: 200px;
    margin-right: 200px;
    display: inline-block;
    white-space: nowrap;
}

/* Centered Badge (Circle) */
.custom-desktop-timeline .desktop-timeline-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; /* Circle size */
    height: 60px;
    background-color: #c5a668;
    border-radius: 50%;
    z-index: 1;
}

/* Vertical Grey Line Between Circles */
.custom-desktop-timeline .desktop-timeline-item::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: #d3d3d3;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    height: 300px;
    z-index: 0;
}

.custom-desktop-timeline .desktop-timeline-item:last-child::after {
    display: none;
}

/* Horizontal Yellow Line Connecting Title to the Circle */
.custom-desktop-timeline .desktop-timeline-item.left .desktop-timeline-date::after {
    content: '';
    position: absolute;
    height: 2px;
    background-color: #c5a668;
    top: 50%;
    left: calc(100% + 10px); /* Start after date */
    transform: translateY(-50%);
    width: calc(100% - 10px); /* Dynamic width for all lines except the first */
    z-index: -1;
}

.custom-desktop-timeline .desktop-timeline-item.right .desktop-timeline-date::before {
    content: '';
    position: absolute;
    height: 2px;
    background-color: #c5a668;
    top: 50%;
    right: calc(100% + 10px); /* Start after date */
    transform: translateY(-50%);
    width: calc(100% - 10px); /* Dynamic width for all lines except the first */
    z-index: -1;
}

/* Styling for the First Item (Shorter Yellow Line) */
.custom-desktop-timeline .desktop-timeline-item:first-child.left .desktop-timeline-date::after,
.custom-desktop-timeline .desktop-timeline-item:first-child.right .desktop-timeline-date::before {
    width: 50px; /* Fixed width for the first item */
}

/* Styling for Left-Aligned Items */
.custom-desktop-timeline .desktop-timeline-item.left .desktop-timeline-date {
    order: 1;
    margin-right: 50px;
}

.custom-desktop-timeline .desktop-timeline-item.left .desktop-timeline-content {
    order: 2;
    margin-left: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 45%;
}

/* Styling for Right-Aligned Items */
.custom-desktop-timeline .desktop-timeline-item.right .desktop-timeline-date {
    order: 2;
    margin-left: 50px;
}

.custom-desktop-timeline .desktop-timeline-item.right .desktop-timeline-content {
    order: 1;
    margin-right: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 45%;
}

/* ======================== */
/* ===== Mobile Timeline CSS ===== */
/* ======================== */

/* Mobile Timeline Container */
.custom-mobile-timeline {
    position: relative;
    padding: 20px 0;
    margin: 20px auto;
    width: 100%;
    max-width: none;
}

/* Mobile Timeline Items */
.custom-mobile-timeline .mobile-timeline-item {
    display: block; /* Ensure items stack vertically */
    text-align: center; /* Center text */
    margin-bottom: 30px; /* Space between items */
    position: relative; /* Reset positioning */
}

/* Mobile Timeline Date */
.custom-mobile-timeline .mobile-timeline-date {
    margin-bottom: 10px; /* Add space below the date */
    font-size: 1.2em; /* Larger font for readability */
    color: #8b807a; /* Consistent color */
}

/* Mobile Timeline Content */
.custom-mobile-timeline .mobile-timeline-content {
    width: 90%; /* Stretch horizontally */
    padding: 15px; /* Adequate padding */
    background-color: #fff; /* White background for contrast */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    margin: 0 auto; /* Center the card */
    text-align: left; /* Left-align text for readability */
}

/* Typography Adjustments */
.custom-mobile-timeline .mobile-timeline-content h3 {
    font-size: 1.4em; /* Larger headings */
    margin-bottom: 8px; /* Reduced margin for compactness */
}

.custom-mobile-timeline .mobile-timeline-content p {
    font-size: 1em; /* Standard paragraph size */
    line-height: 1.5; /* Improved line spacing */
}

/* Remove Dots and Lines (if any) */
.custom-mobile-timeline .mobile-timeline-item::before,
.custom-mobile-timeline .mobile-timeline-item::after,
.custom-mobile-timeline .mobile-timeline-date::before,
.custom-mobile-timeline .mobile-timeline-date::after {
    display: none;
}