*{
margin:0;
padding:0;
box-sizing;
font-family:'Poppins',sans-serif;
}

body{
background:#050816;
color;
overflow-x;
}

.timeline-section{
position;
min-height:100vh;
padding:120px 8%;
overflow;

background: radial-gradient(circle at top left, rgba(0,255,255,.12), transparent 35%), radial-gradient(circle at bottom right, rgba(139,92,246,.15), transparent 35%), #050816;

}

/* =====================
STARS
===================== */

.timeline-section::before{

content:""; position:absolute; inset:0; background-image: radial-gradient( white 1px, transparent 1px ); background-size:70px 70px; opacity:.12; animation: starsMove 50s linear infinite;

}

/* =====================
CONTAINER
===================== */

.container{
max-width:1200px;
margin;
position;
z-index:2;
}

/* =====================
HEADER
===================== */

.section-header{
text-align;
margin-bottom:80px;
}

.section-tag{

color:#00ffff; letter-spacing:4px; font-size:14px; font-weight:600;

}

.section-header h1{

font-size:3rem; margin-top:15px; margin-bottom:15px;

}

.section-header p{

color:#cbd5e1; line-height:1.8;

}

/* =====================
TIMELINE
===================== */

.timeline{

position:relative; max-width:900px; margin:auto;

}

.timeline::before{

content:""; position:absolute; left:50%; top:0; width:3px; height:100%; transform: translateX(-50%); background: linear-gradient( #00ffff, #8b5cf6 );

}

/* =====================
ITEM
===================== */

.timeline-item{

position:relative; width:50%; padding:20px 40px; margin-bottom:50px;

}

.timeline-item(odd){

left:0; text-align:right;

}

.timeline-item(even){

left:50%;

}

/* =====================
DOT
===================== */

.timeline-dot{

position:absolute; top:35px; width:20px; height:20px; border-radius:50%; background:#00ffff; box-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0,255,255,.5); z-index:2;

}

.timeline-item(odd)
.timeline-dot{

right:-10px;

}

.timeline-item(even)
.timeline-dot{

left:-10px;

}

/* =====================
CONTENT
===================== */

.timeline-content{

background: rgba(255,255,255,.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius:20px; padding:25px; transition:.4s;

}

.timeline-content{

transform: translateY(-8px); box-shadow: 0 0 30px rgba(0,255,255,.25);

}

.year{

display:inline-block; color:#00ffff; font-weight:700; margin-bottom:10px;

}

.timeline-content h3{

margin-bottom:10px; color:white;

}

.timeline-content p{

color:#cbd5e1; line-height:1.8;

}

/* =====================
ANIMATION
===================== */

@keyframes starsMove{

from{ transform:translateY(0); } to{ transform:translateY(150px); }

}

/* =====================
MOBILE
===================== */

@media(max-width:768px){

.timeline::before{ left:20px; } .timeline-item{ width:100%; left:0 !important; text-align:left !important; padding-left:60px; padding-right:0; } .timeline-dot{ left:10px !important; right:auto !important; } .section-header h1{ font-size:2rem; }

}