body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}

.timeline_section {
max-width: 1420px;
margin: 0 auto;
padding: 40px;
}

.timeline_block {
display: flex;
justify-content: space-between;
align-items: flex-start;
}

.timeline_col {
width: 45%;
}

.headline-tl{
max-width:565px;
}

.headline-tl h3 {
font-size: 60px;
color: #021C33;
font-weight: bold;
margin-bottom: 20px;
}

.headline-tl p {
font-size: 18px;
color: #083155;
line-height: 1.6;
}

.timeline_col.timeline {
position: relative;
padding-left: 60px;
width:50%;
}

.timeline_col.timeline::before {
content: '';
position: absolute;
left: 30px;
top: 0;
bottom: 0;
width: 5px;
background-color: #1d3557;
border-radius: 60px;
}

.timeline_event {
position: relative;
background: #ffffff;
border-radius: 20px;
padding: 50px 32px;
margin: 20px 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
max-width: 400px;
transition: background-color 0.3s ease, color 0.3s ease;
margin-left: 50px;
margin-bottom: 68px;
}

.timeline_event:hover {
background-color: #083155;
color: #ffffff;
background-image: url(../images/Mask-group-2.webp);
}

.timeline_event .year {
font-size: 48px;
color: #1D236C;
font-family: 'Futura Md BT';
}

.timeline_event:hover .year {
color: #ffffff;
}

.timeline_event .description,
.timeline_event p{
margin-top: 20px;
font-size: 22px;
line-height: 28px;
color: #000000;
font-family: 'Futura Md BT';
}

.timeline_event:hover .description,
.timeline_event:hover p{
color: #ffffff;
}

.timeline_event li{
font-size: 12px;
color: #1D236C;
font-family: 'Futura Md BT';
text-align: -webkit-left;
}

.timeline_event::before {
content: '';
position: absolute;
left: -91px;
top: 45%;
width: 26px;
height: 26px;
background-color: #1d3557;
border-radius: 50%;
border: 1px solid #1d3557;
transition: background-color 0.3s ease;
}

.timeline_event:hover::before {
background-color: #C8D7E0;
border: 2px solid #ffffff;
left: -92px;
}
.addedbrands{
font-size:11px !important;
opacity:0.5;
font-family: 'Futura Md BT';
margin-bottom:15px;
}
.timeline_event:hover .addedbrands {
opacity: 0.5;
}

.timeline_event ul {
list-style-type: disc;
padding-left: 20px;
color: #1D236C;
column-count: 2; /* แบ่งให้แสดงสองคอลัมน์ */
column-gap: 20px; /* ช่องว่างระหว่างคอลัมน์ */
}

.timeline_event:hover ul li {
color: #ffffff;
}

.timeline_event li {
font-size: 12px;
line-height: 16px;
font-family: 'Futura Md BT';
}
.timeline_event:nth-child(1)::before {
top: -11%;
}
.timeline_event .addedbrands {
font-family: "Inter", sans-serif;
}

/* Responsive Styles */
@media (max-width: 1100px) {
.timeline_block {
flex-direction: column;
align-items: center;
}

.timeline_col,
.timeline_col.timeline{
width: 100%;
max-width: 600px;
text-align: center;
padding-left: 0;
place-items: center;
}
.timeline_col.timeline{
margin-top:120px;
}

.headline-tl h3 {
font-size: 48px;
}

.headline-tl p {
font-size: 16px;
}

.timeline_col.timeline::before {
left: 50%;
transform: translateX(-50%);
}

.timeline_event {
margin-left: 0;
width: 100%;
max-width: 500px;
}

.timeline_event::before {
left: 50%;
transform: translateX(-50%);
}
.timeline_event:nth-child(1){
margin-top: 85px;
}
.timeline_event li {
justify-self: left;
}
.timeline_event::before {
top: -40%;
display:none;
left: 50%;
}
.timeline_event:nth-child(1)::before {
display: block; /* หรือ flex ตามลักษณะการจัดวาง */
}
.timeline_event:hover::before {
left: 50%;
}
.timeline_event:nth-child(1)::before {
top: -40%;
}
}