/* =====================================================
   EXPERIENCE & EDUCATION
===================================================== */
.experience-section {
    padding: 50px 0 60px;
    border-top: 1px solid var(--border);
    background: #030d1c;
}

/* =====================================================
MAIN TOP GRID
DEVELOPMENT JOURNEY + PROFESSIONAL EXPERIENCE
===================================================== */
.journey-experience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    margin-top: 5px;
}

/* =====================================================
COLUMN TITLE
===================================================== */
.column-title {
    color: white;
    font-size: 11px;
    margin-bottom: 17px;
}

/* =====================================================
DEVELOPMENT JOURNEY
===================================================== */
.development-column {
    padding-right: 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* =====================================================
TIMELINE GRID
===================================================== */
.timeline-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    row-gap: 24px;
}

/* =====================================================
TIMELINE ITEM
===================================================== */
.timeline-item {
    position: relative;
    padding-left: 18px;
}

/* =====================================================
TIMELINE LINE
===================================================== */
.timeline-item::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 5px;
    bottom: -24px;
    width: 1px;
    background: rgba(255, 255, 255, 0.14);
}

/* =====================================================
STOP LINE AT LAST ROW
===================================================== */
.timeline-item:nth-last-child(-n+2)::before {
bottom: 5px;
}

/* =====================================================
TIMELINE DOT
===================================================== */
.timeline-dot {
    position: absolute;
    left: -19px;
    top: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue);
    border: 2px solid #17345d;
    box-shadow:
        0 0 0 2px rgba(22, 119, 255, 0.08);
    z-index: 2;
}

/* =====================================================
TIMELINE DATE
===================================================== */
.timeline-date {
    display: block;
    color: #709fe0;
    font-size: 8px;
    margin-bottom: 3px;
}

/* =====================================================
TIMELINE TITLE
===================================================== */
.timeline-content h4 {
    color: white;
    font-size: 9.5px;
    margin-bottom: 3px;
}

/* =====================================================
TIMELINE DESCRIPTION
===================================================== */
.timeline-content p {
    color: #9faaba;
    font-size: 8px;
    line-height: 1.65;
    max-width: 360px;
}

/* =====================================================
PROFESSIONAL EXPERIENCE
===================================================== */
.professional-column {
    padding-left: 0;
}

/* =====================================================
EXPERIENCE CARD
===================================================== */
.experience-card {
    padding: 17px;
    margin-bottom: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(20, 34, 55, 0.96),
            rgba(11, 25, 43, 0.96)
        );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
}

/* =====================================================
EXPERIENCE CARD TOP
===================================================== */
.experience-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

/* COMPANY */
.experience-date {
    color: #709fe0;
    font-size: 8px;
    font-weight: 600;
}

/* ROLE */
.experience-type {
    color: #8495ac;
    font-size: 7px;
    text-align: right;
}

/* =====================================================
EXPERIENCE TITLE
===================================================== */
.experience-card h4 {
    color: white;
    font-size: 10px;
    margin-bottom: 6px;
}

/* =====================================================
EXPERIENCE DESCRIPTION
===================================================== */
.experience-card p {
    color: #aab5c4;
    font-size: 8px;
    line-height: 1.7;
    margin-bottom: 10px;
}

/* =====================================================
EXPERIENCE TAGS
===================================================== */
.experience-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.experience-tags span {
    display: inline-block;
    padding: 3px 6px;
    color: #8eb7ef;
    background: rgba(22, 119, 255, 0.08);
    border: 1px solid rgba(22, 119, 255, 0.12);
    border-radius: 3px;
    font-size: 7px;
}

.experience-link {
    display: inline-block;
    color: #709fe0;
    font-size: 7px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.experience-link:hover {
    color: var(--blue);
}






/* =====================================================
EDUCATION
===================================================== */
.education-section {
    margin-top: 35px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* =====================================================
EDUCATION CARD
===================================================== */
.education-card {
    position: relative;
    min-height: 125px;
    padding: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(20, 34, 55, 0.96),
            rgba(11, 25, 43, 0.96)
        );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    overflow: hidden;
}

/* =====================================================
EDUCATION DATE
===================================================== */
.education-date {
    display: block;
    color: #709fe0;
    font-size: 8px;
    margin-bottom: 5px;
}

/* =====================================================
EDUCATION TITLE
===================================================== */
.education-card h4 {
    color: white;
    font-size: 10px;
    max-width: 400px;
    margin-bottom: 5px;
}

/* =====================================================
EDUCATION DESCRIPTION
===================================================== */
.education-card p {
    color: #aab5c4;
    font-size: 8px;
    line-height: 1.7;
}

/* =====================================================
INSTITUTION
===================================================== */
.education-card .institution {
    color: #d3dbe5;
    margin-bottom: 2px;
}

/* =====================================================
GRADUATION ICON
===================================================== */
.graduation-icon {
position: absolute;
right: 30px;
bottom: 18px;
color: rgba(75, 130, 218, 0.65);
font-size: 43px;
}

/* =====================================================
TABLET / MOBILE
===================================================== */
@media (max-width: 750px) {

    /* ================================================
    MAIN GRID
    ================================================ */
    .journey-experience-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    /* ================================================
    DEVELOPMENT COLUMN
    ================================================ */
    .development-column {
        padding-right: 0;
        padding-bottom: 30px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* ================================================
    TIMELINE
    ================================================ */
    .timeline-grid {
        grid-template-columns: 1fr;
        row-gap: 19px;
    }

    /* ================================================
    MOBILE TIMELINE LINE
    ================================================ */
    .timeline-item::before {
        bottom: -19px;
    }

    .timeline-item:nth-last-child(-n+2)::before {
        bottom: -19px;
    }

    .timeline-item:last-child::before {
        bottom: 5px;
    }

    /* ================================================
    EXPERIENCE
    ================================================ */
    .experience-card {
        margin-bottom: 15px;
    }

    /* ================================================
    EDUCATION
    ================================================ */
    .education-section {
        margin-top: 30px;
        padding-top: 25px;
    }

}

/* =====================================================
SMALL MOBILE
===================================================== */
@media (max-width: 500px) {

    .experience-section {
        padding: 45px 0;
    }

    .experience-card-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .experience-type {
        text-align: left;
    }

    .education-card {
        min-height: 150px;
    }

    .graduation-icon {
        right: 20px;
        bottom: 15px;
        font-size: 35px;
    }

}