/* ==========================================================================
   Terms & Privacy Policy page — theme
   Same modern shell as disclaimer.php (headernew.php, Bootstrap 5, the
   teal/orange re-skin via @import), reusing images/about.png as the hero
   the same way disclaimer.php does — this page's old carousel hero used
   the same image.
   ========================================================================== */
@import url("procurement-sourcing-intelligence.css");

.rep_content {
    padding: 40px 0 60px;
}

/* ---------- Hero banner ---------- */
.terms-hero .report_heading,
.terms-hero .mob_report_heading {
    position: relative;
    background-color: #17484a;
    background-image: linear-gradient(rgba(23, 72, 74, .55), rgba(23, 72, 74, .55)), url('../images/about.png');
    background-size: cover;
    background-position: center;
    padding: 70px 30px;
}

.terms-hero .report_heading h1,
.terms-hero .mob_report_heading h1 {
    line-height: normal;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* ---------- Policy content ---------- */
.terms-card {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    padding: 40px 44px;
}

.terms-card h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #17484a;
    text-align: center;
    margin-bottom: 20px;
}

.terms-card h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #17484a;
    margin: 28px 0 12px;
}

.terms-card p,
.terms-card li {
    font-size: 16px;
    line-height: 1.8;
    color: #46545c;
}

.terms-card li {
    margin-bottom: 8px;
}

.terms-card a {
    color: #17484a;
    font-weight: 600;
}

/* Two-column layout: term label on the left, definition on the right,
   side by side — dt/dd pairs auto-place into a 2-col grid, one row per
   pair, instead of the browser's default stacked dt-above-dd rendering. */
.terms-definitions {
    display: grid;
    grid-template-columns: 200px 1fr;
    row-gap: 22px;
    column-gap: 24px;
}

.terms-definitions dt {
    font-family: 'Poppins', sans-serif;
    color: #17484a;
    font-weight: 600;
}

.terms-definitions dd {
    margin: 0;
    color: #46545c;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .terms-card {
        padding: 28px 22px;
    }
    /* .terms-definitions' fixed "200px 1fr" desktop columns left almost no
       room for the dd text on a narrow screen — and a bare "1fr" grid
       track has no shrink floor of its own (like flex's min-width:auto,
       a grid track defaults to its content's min-content width), so the
       dd text was forcing the grid itself wider than the viewport instead
       of wrapping into that squeezed space. Stacking dt above dd here
       removes the fixed 200px column entirely, which both fixes the
       overflow and reads better than a squeezed 2-column layout would
       have anyway. */
    .terms-definitions {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
    .terms-definitions dd {
        margin-bottom: 14px;
    }
}