/* about.css */


#about {
    max-width: 1200px;
    margin: 0 auto;
}

#about h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
:root{
    --bg-color:#0d1119;
    --surface-color:lightgray;
    --text-color:#f0f6fc;
    --secondary-text:yellow;
    --accent-color:#58a6ff;
    --border-color:red;
    --border-radius:12px;
}

/* ===========================
   Education Timeline
=========================== */
   /* background-color: red; */
#education{
    margin-top:4rem;
}

#education h2{
    font-size:2rem;
    color:var(--accent-color);
    margin-bottom:2rem;
}

.timeline{
    position:relative;
    padding-left:40px;
}

.timeline::before{

    content:"";
    position:absolute;

    left:12px;
    top:0;
    bottom:0;

    width:3px;

    background:var(--border-color);

}

.timeline-item{

    position:relative;

    margin-bottom:2rem;

}

.timeline-dot{

    position:absolute;

    left:-35px;
    top:22px;

    width:18px;
    height:18px;

    background:var(--accent-color);

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

    border-radius:50%;
}

.education-card{

    background:var(--surface-color);

    border:1px solid var(--border-color);

    border-radius:var(--border-radius);

    padding:1.5rem;

    transition:.3s;
}

.education-card:hover{

    border-color:var(--accent-color);

    transform:translateY(-4px);

}

.year{

    display:inline-block;

    color:var(--accent-color);

    font-weight:700;

    margin-bottom:.7rem;

}

.education-card h3{

    margin-bottom:.3rem;

}

.education-card h4{

    color:var(--secondary-text);

    margin-bottom:.5rem;

    font-weight:500;

}

.education-card p{

    color:var(--secondary-text);

    margin-bottom:.8rem;

}

.education-card ul{

    padding-left:18px;

}

.education-card li{

    color:var(--secondary-text);

    margin-bottom:.35rem;

}

@media(max-width:768px){

    .timeline{

        padding-left:25px;

    }

    .timeline-dot{

        left:-19px;

        width:14px;
        height:14px;

    }

    .education-card{

        padding:1.2rem;

    }

}