/* ===========================================================
   EXPERIENCE
=========================================================== */

.experience-section {
    position: relative;
    padding: 6rem 0;
}

.experience-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

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

.experience-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3rem;
}

.experience-title {
    margin: 1rem 0;
}

.experience-subtitle {
    opacity: .8;
    line-height: 1.8;
}

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

.experience-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-left: 4rem;
}

.experience-timeline::before{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:18px;

    width:2px;

    border-radius:999px;

    background:linear-gradient(
            to bottom,
            rgba(72,157,255,.85) 0%,
            rgba(72,157,255,.45) 50%,
            rgba(72,157,255,.10) 100%
    );

}

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

.experience-card {
    position: relative;
    transition:
            transform .35s ease,
            border-color .35s ease,
            box-shadow .35s ease;
}

.experience-card:hover{

    transform:translateY(-8px);

    border-color:rgba(72,157,255,.45);

    box-shadow:
            0 15px 40px rgba(0,0,0,.35),
            0 0 25px rgba(72,157,255,.12);

}

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

.timeline-dot{

    position:absolute;

    left:-3.45rem;

    top:2rem;

    width:20px;

    height:20px;

    border-radius:50%;

    background:var(--color-accent);

    border:4px solid var(--color-background);

    box-shadow:
            0 0 0 6px rgba(72,157,255,.12),
            0 0 28px rgba(72,157,255,.35);

    transition:
            transform .3s ease,
            box-shadow .3s ease;
}

.experience-card:hover .timeline-dot{

    transform:scale(1.15);

    box-shadow:
            0 0 0 8px rgba(72,157,255,.18),
            0 0 36px rgba(72,157,255,.5);

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

.experience-content {
    padding:2.5rem;
}

.experience-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;

    margin-bottom: .9rem;

    font-size: .9rem;
    color: var(--color-text-muted);
}

.experience-period {
    color: var(--color-accent);
    font-weight: 600;
}

.experience-location {
    opacity: .8;
}

.experience-content h3{

    margin:0;

    font-size:2rem;

    font-weight:700;

    line-height:1.2;

}

.experience-role{

    display:block;

    margin-top:.5rem;

    margin-bottom:1.5rem;

    font-size:1.05rem;

    color:var(--color-text-muted);

    font-weight:500;

}

.experience-content p{

    margin-bottom:2rem;

    line-height:1.9;

    color:var(--color-text-secondary);

}

/* ===========================================================
   HIGHLIGHTS
=========================================================== */

.experience-highlights {
    display: grid;
    gap: .85rem;

    padding-left: 1.2rem;
}

.experience-highlights li {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

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

@media (max-width: 768px) {

    .experience-timeline {
        padding-left: 1.8rem;
    }

    .timeline-dot {
        left: -2.25rem;
    }

    .experience-content {
        padding: 1.6rem;
    }

}