#experience{

padding:150px 0;

}

.section-heading{

font-size:56px;

margin-bottom:80px;

}

.timeline{

position:relative;

margin-left:25px;

}

.timeline::before{

content:"";

position:absolute;

left:12px;

top:0;

bottom:0;

width:2px;

background:rgba(255,255,255,.08);

}

.timeline-item{

display:flex;

gap:40px;

margin-bottom:80px;

position:relative;

}

.timeline-dot{

width:26px;

height:26px;

border-radius:50%;

background:linear-gradient(135deg,#5B8CFF,#8B5CF6);

box-shadow:0 0 30px rgba(91,140,255,.45);

flex-shrink:0;

z-index:2;

}

.experience-card{

flex:1;

padding:40px;

transition:.35s;

}

.experience-card:hover{

transform:translateY(-8px);

box-shadow:0 30px 80px rgba(0,0,0,.35);

}

.experience-header{

display:flex;

justify-content:space-between;

align-items:flex-start;

margin-bottom:25px;

}

.experience-header h3{

font-size:34px;

}

.period{

color:var(--muted);

}

.chips{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:30px;

}

.chips span{

padding:8px 16px;

border-radius:999px;

background:rgba(91,140,255,.12);

border:1px solid rgba(91,140,255,.3);

font-size:14px;

}

.experience-card ul{

padding-left:22px;

}

.experience-card li{

margin-bottom:14px;

color:var(--muted);

line-height:1.7;

}

@media(max-width:900px){

.experience-header{

flex-direction:column;

gap:10px;

}

.timeline-item{

gap:20px;

}

.section-heading{

font-size:42px;

}

}