/* ================= SECTION ================= */

.experience {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 120px 9%;
}

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

.container {
max-width: 1100px;
margin: auto;
text-align: center;
}

/* ================= HEADING ================= */

.section-heading {
font-size: clamp(2.6rem, 5vw, 4rem);
margin-bottom: 18px;

background: linear-gradient(
90deg,
#fff,
#a3c9a8,
#6f8f72,
#fff
);

background-size: 200%;
background-clip: text;
color: transparent;

animation: headingGlow 8s linear infinite;

text-shadow:
0 0 10px rgba(163,201,168,.4),
0 0 40px rgba(47,93,80,.7);
}

@keyframes headingGlow {
0% { background-position: 0%; }
100% { background-position: 200%; }
}

.section-subtext {
color: #bbb;
margin-bottom: 60px;
}

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

.timeline {
position: relative;
max-width: 900px;
margin: auto;
}

/* LINE */

.timeline::before {
content: "";
position: absolute;
left: 50%;
width: 3px;
height: 100%;

background: linear-gradient(180deg,#2f5d50,#6f8f72);

box-shadow:
0 0 20px #2f5d50,
0 0 40px rgba(111,143,114,.6);
}

/* ================= ITEMS ================= */

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

opacity: 0;
transform: translateY(60px);
transition: 0.5s ease;
}

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

/* LEFT */

.timeline-item:nth-child(odd) {
left: 0;
text-align: right;
}

/* RIGHT */

.timeline-item:nth-child(even) {
left: 50%;
}

/* ================= ICON ================= */

.timeline-icon {
position: absolute;
top: 30px;
right: -22px;

width: 50px;
height: 50px;

background: #6f8f72;
border-radius: 50%;

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

color: #0f1a17;

box-shadow:
0 0 20px #6f8f72,
0 0 40px rgba(111,143,114,.7);
}

.timeline-item:nth-child(even) .timeline-icon {
left: -22px;
}

/* ================= CARD ================= */

.timeline-content {
position: relative;
overflow: hidden;

background: rgba(255,255,255,0.05);

border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;

padding: 25px;

backdrop-filter: blur(10px);

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

transition: 0.3s ease;
}

/* LIGHT SWEEP */

.timeline-content::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;

background: linear-gradient(
120deg,
transparent,
rgba(111,143,114,0.2),
transparent
);

transition: 0.6s;
}

.timeline-content:hover::before {
left: 100%;
}

/* HOVER */

.timeline-content:hover {
transform: translateY(-8px) scale(1.03);

background: rgba(111,143,114,0.15);

box-shadow:
0 0 25px rgba(111,143,114,.5),
0 20px 60px rgba(0,0,0,0.9);
}

/* ================= TEXT ================= */

.timeline-content h2 {
font-size: 1.8rem;
margin-bottom: 5px;
}

.timeline-content h3 {
color: #aaa;
margin-bottom: 5px;
}

.timeline-content span {
color: #6f8f72;
display: block;
margin-bottom: 10px;
}

.timeline-content p {
color: #c7c7c7;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {

.timeline::before {
left: 20px;
}

.timeline-item {
width: 100%;
padding-left: 50px;
text-align: left;
left: 0 !important;
}

.timeline-icon {
left: 0;
}

}