/* EXPERIENCE SECTION */

.experience{

min-height:100vh;
padding:140px 9% 80px;

background:rgba(0,0,0,0.65);
backdrop-filter:blur(4px);

}


.container{

max-width:1100px;
margin:auto;
text-align:center;

}


/* TITLE */

.section-heading{

font-size:5rem;
color:white;
margin-bottom:10px;

}

.section-subtext{

color:#aaa;
font-size:1.6rem;
margin-bottom:60px;

}


/* TIMELINE */

.timeline{

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

}

.timeline::before{

content:"";
position:absolute;
left:50%;
top:0;

width:2px;
height:100%;

background:#b74b4b;

}


/* TIMELINE ITEM */

.timeline-item{

position:relative;
width:50%;
padding:30px;

}

.timeline-item{
position:relative;
width:50%;
padding:30px;

/* animation starting state */
opacity:0;
transform:translateY(60px);
transition:all .8s ease;
}

.timeline-item.show{
opacity:1;
transform:translateY(0);
}


/* LEFT SIDE */

.timeline-item:nth-child(odd){

left:0;
text-align:right;

}

/* RIGHT SIDE */

.timeline-item:nth-child(even){

left:50%;

}


/* ICON */

.timeline-icon{

position:absolute;
top:30px;
right:-20px;

width:40px;
height:40px;

background:#b74b4b;
border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

color:black;
font-size:18px;

}

.timeline-item:nth-child(even) .timeline-icon{

left:-20px;

}


/* CONTENT */

.timeline-content{

background:#0a0a0a;
border:1px solid rgba(255,255,255,0.08);

padding:25px;
border-radius:15px;

transition:0.3s;

}


.timeline-content:hover{

border-color:#b74b4b;
transform:translateY(-5px);

box-shadow:0 10px 30px rgba(0,0,0,0.5);

}


.timeline-content h2{

font-size:2rem;
margin-bottom:5px;

}

.timeline-content h3{

font-size:1.4rem;
color:#aaa;

}

.timeline-content span{

display:block;
font-size:1.2rem;
color:#b74b4b;
margin-bottom:10px;

}

.timeline-content p{

font-size:1.4rem;
color:#bbb;

}


/* MOBILE */

@media(max-width:768px){

.timeline::before{

left:20px;

}

.timeline-item{

width:100%;
padding-left:50px;
padding-right:10px;

left:0 !important;
text-align:left;

}

.timeline-icon{

left:0;
right:auto;

}


}