.experience{

    padding:120opx 0;

    background:var(--background-color);

}

.experience .container{

    max-width:1990px;

    margin:auto;

}

.experience-container{

    display:flex;

    justify-content:center;

    margin-top:70px;

}

.experience-card{

    width:100%;

    max-width:900px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    padding:50px;

    backdrop-filter:blur(18px);

    transition:.4s ease;

    position:relative;

    overflow:hidden;

}

.experience-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,
    #3b82f6,
    #60a5fa);

}

.experience-card:hover{

    transform:translateY(-10px);

    border-color:rgba(59,130,246,.4);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}


.experience-header{

    margin-bottom:30px;

}

.experience-date{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 18px;

    background:rgba(59,130,246,.12);

    border-radius:50px;

    color:var(--primary-color);

    font-weight:600;

    margin-bottom:20px;

}

.experience-header h3{

    font-size:2rem;

    color:var(--white);

    margin-bottom:10px;

}

.experience-header h4{

    color:var(--primary-color);

    font-size:1.25rem;

    font-weight:600;

}



.experience-body p{

    color:var(--text-secondary);

    line-height:1.9;

    margin-bottom:35px;

    font-size:1rem;

}


.experience-body h5{

    font-size:1.2rem;

    color:var(--white);

    margin-bottom:20px;

}


.experience-list{

    list-style:none;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:40px;

}

.experience-list li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:var(--text-secondary);

    line-height:1.7;

}

.experience-list i{

    color:#22c55e;

    margin-top:3px;

    font-size:1rem;

}


.experience-skills{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:40px;

}

.experience-skills span{

    padding:10px 20px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:var(--white);

    font-size:.9rem;

    transition:.3s;

}

.experience-skills span:hover{

    background:rgba(59,130,246,.15);

    border-color:rgba(59,130,246,.35);

    transform:translateY(-3px);

}
.experience-actions{

    text-align:center;

}

.certificate-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 34px;

    border-radius:14px;

    background:linear-gradient(135deg,
    #2563eb,
    #3b82f6);

    color:#fff;

    font-weight:600;

    text-decoration:none;

    transition:.35s ease;

}

.certificate-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(37,99,235,.35);

}

.certificate-btn i{

    font-size:1.1rem;

}


@media(max-width:768px){

    .experience{

        padding:90px 0;

    }

    .experience-card{

        padding:30px;

    }

    .experience-header h3{

        font-size:1.6rem;

    }

    .experience-header h4{

        font-size:1.1rem;

    }

    .experience-list{

        grid-template-columns:1fr;

    }

    .experience-skills{

        gap:10px;

    }

    .experience-skills span{

        font-size:.85rem;

        padding:8px 16px;

    }

    .certificate-btn{

        width:100%;

        justify-content:center;

    }

}