/* General Styles */
body {
    font-family: 'Amiko', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #333;
}

h4 {
    color: #A2A2A2;
    font-weight: 400;
}

.courses-timeline {
    max-width: 800px; /* Centered and constrained width */
    margin: 50px auto; /* Center on the page */
    text-align: center; /* Center-align the text */
}

.courses-timeline h1 {
    font-size: 32px;
    margin-bottom: 30px;
    color: #926F78;
}

/* Timeline Container */
.timeline {
    position: relative;
    padding: 20px 0;
    border-left: 3px solid #926F78; /* Vertical line for the timeline */
    margin: 0 auto;
    text-align: left; /* Align text for a clean timeline */
}

/* Timeline Item */
.timeline-item {
    margin: 20px 0;
    position: relative;
}

.timeline-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 20px;
    height: 20px;
    background-color: #926F78; /* Circle color */
    border-radius: 50%;
    border: 3px solid #fff;
    z-index: 1;
}

/* Timeline Content */
.timeline-content {
    margin-left: 30px; /* Space between the timeline and the text */
    background-color: #fff; /* Card-like background for each item */
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.timeline-content h2 {
    margin: 0;
    font-size: 20px;
    color: #9F8189;
}

.timeline-content ul {
    margin: 10px 0 0;
    padding: 0;
    list-style-type: disc;
    padding-left: 20px; /* Indentation for list items */
    color: #666;
}

.timeline-content li {
    margin-bottom: 5px;
}

a {
    color: #9F8189;
    text-decoration: none;
    font-weight: bold;
}
  
a:hover {
    color: #F3ABB6;
    transition: ease-in 0.3s;
}