/* =========================================================
   ABOUT SECTION CSS
========================================================= */

.about-section {
    font-family: "Poppins", "Noto Sans Devanagari", sans-serif;
}


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

.about-card {
    transition: all 0.3s ease;
}

.about-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
}


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

.about-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 14px;

    background: #ecfdf5;

    font-size: 24px;

    border: 1px solid #d1fae5;
}


/* ================= MEMBER TAG ================= */

.member-tag {
    display: inline-flex;

    align-items: center;

    padding: 8px 13px;

    border-radius: 999px;

    background: #f0fdf4;

    color: #166534;

    border: 1px solid #bbf7d0;

    font-size: 14px;

    font-weight: 600;
}


/* ================= REGISTRATION TABLE ================= */

.registration-label {
    width: 38%;

    padding: 14px 16px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    color: #334155;

    font-weight: 700;

    font-size: 14px;
}


.registration-value {
    padding: 14px 16px;

    border: 1px solid #e2e8f0;

    color: #475569;

    font-size: 14px;

    font-weight: 500;
}


/* ================= DOCUMENT BUTTON ================= */

.document-btn {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 16px;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    background: #ffffff;

    color: #334155;

    font-size: 14px;

    font-weight: 600;

    text-align: left;

    cursor: pointer;

    transition: all 0.25s ease;
}


.document-btn:hover {
    background: #ecfdf5;

    border-color: #86efac;

    color: #166534;

    transform: translateY(-2px);
}


/* ================= MODAL ================= */

.modal-box {
    animation: modalOpen 0.25s ease-out;
}


@keyframes modalOpen {

    from {
        opacity: 0;

        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;

        transform: scale(1) translateY(0);
    }

}


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

@media (max-width: 640px) {

    .registration-label,
    .registration-value {
        padding: 11px 12px;

        font-size: 13px;
    }

    .about-icon {
        width: 46px;

        height: 46px;

        font-size: 21px;
    }

    .document-btn {
        padding: 13px;
    }

}