.contact {

    position: relative;

    overflow: hidden;
}

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

.contact-bg {

    position: absolute;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(0, 206, 201, .16),
            transparent 70%);

    right: -220px;
    top: -220px;

    pointer-events: none;
}

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

.contact-top-text {

    max-width: 850px;

    margin-bottom: 55px;
}

.contact-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;
}

.contact-top-text h2 {

    font-size: 42px;

    line-height: 1.4;

    color: var(--text);
}

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

.contact-wrapper {

    display: grid;

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

    gap: 26px;
}

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

.contact-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 22px;

    padding: 30px;

    border-radius: 32px;

    text-decoration: none;

    overflow: hidden;

    background:
        var(--glass-bg);

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

    backdrop-filter: blur(25px);

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

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

.contact-card::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

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

    top: -110px;
    left: -110px;

    opacity: 0;

    transition: .45s ease;
}

.contact-card:hover::before {

    opacity: 1;
}

.contact-card:hover {

    transform:
        translateY(-12px);

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

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

.contact-icon {

    width: 78px;
    height: 78px;

    border-radius: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    position: relative;

    z-index: 2;
}

.contact-icon i {

    font-size: 32px;

    color: white;
}

.whatsapp .contact-icon {

    background:
        linear-gradient(135deg,
            #22c55e,
            #16a34a);
}

.email .contact-icon {

    background:
        linear-gradient(135deg,
            #6366f1,
            #8b5cf6);
}

.github .contact-icon {

    background:
        linear-gradient(135deg,
            #111827,
            #374151);
}

.linkedin .contact-icon {

    background:
        linear-gradient(135deg,
            #0ea5e9,
            #2563eb);
}

/* ====================== */
/* INFO */
/* ====================== */

.contact-info {

    flex: 1;

    position: relative;

    z-index: 2;
}

.contact-info h3 {

    font-size: 24px;

    margin-bottom: 10px;

    color: var(--text);
}

.contact-info p {

    color: var(--text-secondary);

    line-height: 1.8;

    font-size: 14px;
}

/* ====================== */
/* ARROW */
/* ====================== */

.contact-arrow {

    width: 56px;
    height: 56px;

    border-radius: 18px;

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

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

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text);

    transition:
        transform .35s ease,
        background .35s ease;

    position: relative;

    z-index: 2;
}

.contact-card:hover .contact-arrow {

    transform:
        rotate(-8deg) scale(1.08);

    background:
        rgba(255, 255, 255, .12);
}

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

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

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

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

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

[data-theme="light"] .contact-arrow {

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

[data-theme="light"] .github .contact-icon {

    background:
        linear-gradient(135deg,
            #1f2937,
            #4b5563);
}

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

@media(max-width:768px) {

    .contact-top-text {

        margin-bottom: 40px;
    }

    .contact-top-text h2 {

        font-size: 30px;

        line-height: 1.5;
    }

    .contact-wrapper {

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .contact-card {

        padding: 24px;

        border-radius: 28px;

        gap: 18px;
    }

    .contact-icon {

        width: 68px;
        height: 68px;

        border-radius: 20px;
    }

    .contact-icon i {

        font-size: 28px;
    }

    .contact-info h3 {

        font-size: 21px;
    }

    .contact-info p {

        font-size: 13px;

        line-height: 1.8;
    }

    .contact-arrow {

        width: 48px;
        height: 48px;

        border-radius: 16px;
    }
}