/* ================================================================= The Eco Works — Credentials Block Styles File: credentials.css INSTALLATION: 1. Upload this file into your /css/ folder 2. Add to index.html after services.css: ================================================================= */ /* ── Section label ───────────────────────────────────────────── */ .credentials-block { clear: both; padding: 32px 0 8px 0; border-top: 1px solid #e8e8e8; margin-top: 28px; font-family: 'Century Gothic', sans-serif; width: 100%; float: left; } .credentials-label { font: normal normal bold 11px/1em 'Century Gothic', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #888888; margin-bottom: 18px; text-align: left; } /* ── Card grid ───────────────────────────────────────────────── */ .credentials-grid { display: flex; flex-wrap: wrap; gap: 12px; } /* ── Individual credential card ──────────────────────────────── */ .credential-card { display: flex; align-items: center; gap: 12px; background: #ffffff; border: 1px solid #ddeee7; border-radius: 12px; padding: 12px 18px 12px 12px; flex: 1 1 180px; max-width: 240px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .credential-card:hover { border-color: #1D9E75; box-shadow: 0 4px 16px rgba(29, 158, 117, 0.1); } /* ── Initials circle ─────────────────────────────────────────── */ .credential-initials { width: 42px; height: 42px; border-radius: 50%; background-color: #e1f5ee; color: #0F6E56; font: normal normal bold 14px/42px 'Century Gothic', sans-serif; text-align: center; flex-shrink: 0; } /* ── Card text ───────────────────────────────────────────────── */ .credential-text { display: flex; flex-direction: column; gap: 2px; } .credential-title { font: normal normal bold 13px/18px 'Century Gothic', sans-serif; color: #1a3a2a; margin: 0; text-align: left; } .credential-sub { font: normal normal normal 11px/16px 'Century Gothic', sans-serif; color: #7a9a88; margin: 0; text-align: left; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 767px) { .credential-card { flex: 1 1 140px; max-width: 100%; } .credentials-block { padding: 24px 0 8px 0; } }