/* === Optional Clauses Table (outer container) === */
.clauses-table {
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
    border-collapse: separate;
    border-spacing: 0 20px;   /* vertical gap between rows */
}

/* === Left-hand-side TD (title + prompt) === */
.clauses-td-lhs {
    width: 50%;
    padding-right: 10px;
    vertical-align: top;
}

/* === Right-hand-side TD (full clause text) === */
.clauses-td-rhs {
    width: 50%;
    padding-left: 10px;
    vertical-align: top;
}

/* === Inner card wrapper (apply to the <div> inside each <td>) === */
.clauses-card {
    background: #0a3069;
    color: white;
    padding: 20px;
    border-radius: 12px;
    height: 100%;           /* makes cards same height in pair */
}

/* Optional: make sure yellow titles stand out */
.clauses-card h3 {
    color: #FFFF00;
    margin-top: 0;
}

/* Optional: mobile stacking (one column per row) */
@media (max-width: 768px) {
    .clauses-td-lhs,
    .clauses-td-rhs {
        display: block;
        width: 100%;
        padding: 0;
    }
    
    .clauses-td-lhs .clauses-card {
        border-radius: 12px 12px 0 0;
    }
    
    .clauses-td-rhs .clauses-card {
        border-radius: 0 0 12px 12px;
    }
}
/* === Inner card wrapper (apply to the <div> inside each <td>) === */
.clauses-coming-soon {
    background: white;
    border: 3px solid #0a3069;
    padding: 20px;
    border-radius: 12px;
    height: 100%;           /* makes cards same height in pair */
}

.img-coming-soon {
Height: 157px;
Width: auto;
}