.experience {

    position: relative;

    overflow: hidden;
}

/* ====================== */
/* BG */
/* ====================== */

.experience-bg {

    position: absolute;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(108, 92, 231, .18),
            transparent 70%);

    left: -220px;
    bottom: -220px;

    pointer-events: none;
}

/* ====================== */
/* TOP */
/* ====================== */

.exp-top-text {

    margin-bottom: 55px;

    max-width: 850px;
}

.exp-top-text span {

    display: inline-flex;

    padding: 12px 18px;

    border-radius: 999px;

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

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

    color: var(--secondary);

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 24px;
}

.exp-top-text h2 {

    font-size: 44px;

    line-height: 1.3;

    color: var(--text);
}

/* ====================== */
/* WRAPPER */
/* ====================== */

.exp-wrapper {

    display: grid;

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

    gap: 28px;
}

/* ====================== */
/* CARD */
/* ====================== */

.exp-card {

    position: relative;

    padding: 40px 35px;

    border-radius: 34px;

    background:
        var(--glass-bg);

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

    backdrop-filter: blur(30px);

    overflow: hidden;

    transition:
        transform .5s cubic-bezier(.19, 1, .22, 1),
        box-shadow .5s ease,
        border .5s ease;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .1);
}

.exp-card::before {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 255, 255, .14),
            transparent);

    top: -120px;
    left: -120px;

    opacity: 0;

    transition: .45s ease;
}

.exp-card:hover::before{

    opacity: 1;
}

.exp-card:hover{

    transform:
        translateY(-14px);

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

    box-shadow:
        0 35px 65px rgba(108, 92, 231, .22);
}

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

.exp-icon {

    width: 74px;
    height: 74px;

    border-radius: 24px;

    background:
        linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 28px;

    box-shadow:
        0 18px 35px rgba(108, 92, 231, .28);
}

.exp-icon i {

    font-size: 28px;

    color: white;
}

/* ====================== */
/* NUMBER */
/* ====================== */

.exp-number {

    font-size: 68px;

    font-weight: 800;

    line-height: 1;

    margin-bottom: 22px;

    background:
        linear-gradient(to right,
            var(--text),
            var(--text-muted));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}

.exp-text {

    font-size: 44px;
}

/* ====================== */
/* TEXT */
/* ====================== */

.exp-card h3 {

    font-size: 26px;

    margin-bottom: 16px;

    color: var(--text);
}

.exp-card p {

    color: var(--text-secondary);

    line-height: 2;

    font-size: 15px;
}

/* ====================== */
/* LIGHT */
/* ====================== */

[data-theme="light"] .exp-card {

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .05);
}

[data-theme="light"] .exp-top-text span {

    background:
        rgba(0, 0, 0, .03);
}

/* ====================== */
/* MOBILE */
/* ====================== */

@media(max-width:992px) {

    .exp-wrapper {

        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .exp-top-text {

        margin-bottom: 40px;
    }

    .exp-top-text h2 {

        font-size: 30px;

        line-height: 1.4;
    }

    .exp-card {

        padding: 30px 24px;

        border-radius: 28px;
    }

    .exp-icon {

        width: 62px;
        height: 62px;

        border-radius: 20px;

        margin-bottom: 22px;
    }

    .exp-icon i {

        font-size: 24px;
    }

    .exp-number {

        font-size: 52px;

        margin-bottom: 18px;
    }

    .exp-text {

        font-size: 34px;
    }

    .exp-card h3 {

        font-size: 22px;
    }

    .exp-card p {

        font-size: 14px;

        line-height: 1.9;
    }
}