.terms-hero-section {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

.terms-hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><pattern id="grain" width="100" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="5" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="20" cy="10" r="0.3" fill="rgba(255,255,255,0.1)"/><circle cx="30" cy="15" r="0.4" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="3" r="0.6" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="8" r="0.2" fill="rgba(255,255,255,0.1)"/><circle cx="60" cy="12" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="70" cy="18" r="0.3" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="6" r="0.4" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="14" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="20" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 991px) {
    .terms-hero-section {
        padding: 120px 0 60px 0;
    }
}

@media (max-width: 768px) {
    .terms-hero-section {
        padding: 100px 0 50px 0;
    }
}