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

.experience-list{
    display:flex;
    flex-direction:column;
    gap:26px;
}

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

.experience-item{
    display:flex;
    gap:24px;
    background:var(--second-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius);
    padding:30px;
    transition:var(--transition);
}

.experience-item:hover{
    border-color:var(--primary-color);
    box-shadow:var(--shadow);
}

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

.experience-icon{
    flex-shrink:0;
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(56,189,248,.12);
    color:var(--primary-color);
    font-size:22px;
}

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

.experience-content h3{
    font-size:19px;
    margin-bottom:4px;
}

.experience-org{
    display:inline-block;
    color:var(--primary-color);
    font-weight:600;
    font-size:13.5px;
    margin-bottom:14px;
}

.experience-content p{
    font-size:14.5px;
    margin-bottom:16px;
}

.experience-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.experience-tags span{
    padding:5px 13px;
    background:var(--bg-color);
    border:1px solid var(--border-color);
    border-radius:50px;
    font-size:12px;
    color:var(--primary-color);
    font-weight:500;
}

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

@media(max-width:600px){

    .experience-item{
        flex-direction:column;
    }

}