/* Certificate wrapper */
.responsive-card {
    width: 800px; /* Desktop size */
    max-width: 95%; /* Shrink on smaller screens */
    margin: 16px auto;
    background: #fff;
    border: 2px solid #1b3a54; /* ✅ Keep border */
    box-shadow: 0 0 0 2px #fff inset;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    color: #1b1b1b;
    box-sizing: border-box;
}

/* Flex section for table + image */
.responsive-flex {
    display: flex;
    gap: 18px;
    padding: 12px 18px 18px;
    flex-wrap: wrap; /* ✅ Wrap on mobile */
}

/* Left side (table) */
.responsive-table {
    flex: 1 1 400px; /* Grow but not smaller than 400px */
    min-width: 260px;
}

/* Right side (image/signature) */
.responsive-image {
    width: 220px;
    max-width: 100%;
    flex: 1 1 200px;
}

/* Table formatting */
.responsive-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
}

.responsive-table td {
    padding: 6px;
    vertical-align: top;
}

/* Title */
.responsive-title {
    text-align: center;
    font-weight: 800;
    font-size: 24px;
    color: #3b2d2d;
    padding: 10px 16px 4px;
}

/* ✅ Mobile tweaks */
@media (max-width: 768px) {
    .responsive-card {
        width: 100%; /* Fit screen but keep margin */
        margin: 8px auto;
        padding: 8px;
    }

    .responsive-flex {
        flex-direction: column; /* Stack vertically */
        gap: 14px;
    }

    .responsive-title {
        font-size: 18px;
    }

    .responsive-table table {
        font-size: 15px;
    }
}