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

.experience{
    padding:50px 8%;
}

.experience-timeline{
    max-width:1200px;
    margin:auto;
}

.year-badge{
    display:flex;
    justify-content:center;
    margin:70px 0 35px;
}

.year-badge span{
    background:var(--hover);
    color:var(--sage);
    padding:10px 24px;
    border-radius:999px;
    font-weight:600;
    font-family:'Outfit',sans-serif;
}

.experience-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    margin-bottom:40px;
}

.experience-card{
    padding:32px;
    border-radius:30px;
    transition:.35s ease;
    position:relative;
    overflow:hidden;
}

.experience-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(
90deg,
var(--rose),
var(--sage)
);

}

.experience-card:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 55px rgba(151,161,59,.12);
}

.card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    margin-bottom:18px;
}

/*==========================
Job Title
==========================*/

.job-title{

display:flex;

align-items:center;

gap:14px;

}

.job-icon{

width:52px;

height:52px;

border-radius:16px;

background:var(--hover);

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

transition:.35s;

}

.job-icon svg{

width:24px;

height:24px;

color:var(--sage);

}

.experience-card:hover .job-icon{

background:var(--blush);

transform:rotate(-8deg);

}

.job-title h3{

margin:0;

font-size:24px;

line-height:1.3;

color:var(--text);

}

.card-top h3{
    font-size:24px;
    color:var(--text);
    line-height:1.3;
}

/*==========================
Company Name
==========================*/

.company-name{

    font-family:'Outfit',sans-serif;

    font-size:17px;

    font-weight:500;

    color:var(--sage);

    letter-spacing:.4px;

    margin:12px 0 10px;

}

.experience-card:hover .company-name{

    color:var(--rose);

}


.date{
    font-size:14px;
    color:var(--light-text);
    margin-bottom:20px;
    font-style:italic;
}

.experience-card ul{
    padding-left:20px;
}

.experience-card li{
    margin-bottom:12px;
    line-height:1.7;
    color:var(--light-text);
}

.tag{
    padding:7px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.tag.project{
    background:#E8F3D8;
    color:#6B7B28;
}

.tag.writing{
    background:#F8E4EC;
    color:#B95E84;
}

.tag.seo{
    background:#DCECEF;
    color:#5E8A90;
}

@media(max-width:768px){

    .experience{
        padding:100px 7%;
    }

    .card-top{
        flex-direction:column;
    }

}