/* ============================================================ SERVICES SECTION v3 — about_us_services_v3.css Add this after about_us_ver2.css in your . All selectors are scoped to .how-to-setup3 so nothing leaks. ============================================================ */ /* ── Grid container ─────────────────────────────────────────── */ .how-to-setup3 .srv-grid { align-self: stretch; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; /* Outer green tile — keeps the existing brand feel */ background-color: #f0faf0; border-radius: 24px; padding: 24px; border: 1px solid #d4edd4; } /* ── Base card ───────────────────────────────────────────────── */ .how-to-setup3 .srv-card { background: #fff; border: 1px solid #e0f0e0; border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; position: relative; box-shadow: 0 4px 20px rgba(0, 139, 0, 0.06); transition: transform 0.18s ease, box-shadow 0.18s ease; overflow: hidden; } .how-to-setup3 .srv-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0, 139, 0, 0.13); } /* ── Full-width variants ─────────────────────────────────────── */ .how-to-setup3 .srv-featured, .how-to-setup3 .srv-wide { grid-column: span 2; } /* Featured: horizontal layout */ .how-to-setup3 .srv-featured { flex-direction: row; align-items: flex-start; gap: 28px; background: linear-gradient(135deg, #f6fdf6 0%, #edfaed 100%); border-color: #c4e8c4; } .how-to-setup3 .srv-featured .srv-icon-wrap { flex-shrink: 0; background: #fff; } .how-to-setup3 .srv-featured-body { flex: 1; display: flex; flex-direction: column; gap: 8px; } /* Wide card: horizontal layout */ .how-to-setup3 .srv-wide { flex-direction: row; align-items: center; gap: 24px; } .how-to-setup3 .srv-wide-body { flex: 1; display: flex; flex-direction: column; gap: 8px; } /* ── Icon wrapper ────────────────────────────────────────────── */ .how-to-setup3 .srv-icon-wrap { width: 52px; height: 52px; border-radius: 14px; background: #f0faf0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .how-to-setup3 .srv-icon-wrap svg { width: 26px; height: 26px; } /* ── Tag pill ────────────────────────────────────────────────── */ .how-to-setup3 .srv-tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #008b00; background: #edfaed; border-radius: 20px; padding: 3px 10px; width: fit-content; font-family: Inter, sans-serif; } /* ── Card title ──────────────────────────────────────────────── */ .how-to-setup3 .srv-title { font-family: Manrope, sans-serif; font-size: 19px; font-weight: 600; color: #000319; letter-spacing: -0.03em; line-height: 1.2; margin: 0; } /* ── Card description ────────────────────────────────────────── */ .how-to-setup3 .srv-desc { font-size: 13.5px; line-height: 1.55; color: #000319; opacity: 0.62; margin: 0; font-family: Inter, sans-serif; flex: 1; } /* ── Feature pills row ───────────────────────────────────────── */ .how-to-setup3 .srv-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .how-to-setup3 .srv-pill { font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 20px; background: rgba(0, 139, 0, 0.08); color: #006600; border: 1px solid #c4e8c4; font-family: Inter, sans-serif; } /* ── Arrow link ──────────────────────────────────────────────── */ .how-to-setup3 .srv-arrow { position: absolute; bottom: 22px; right: 22px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #d4edd4; display: flex; align-items: center; justify-content: center; color: #008b00; text-decoration: none; transition: background 0.18s, border-color 0.18s, color 0.18s; } .how-to-setup3 .srv-arrow svg { width: 13px; height: 13px; } .how-to-setup3 .srv-card:hover .srv-arrow { background: #008b00; border-color: #008b00; color: #fff; } /* Static arrow for row-layout cards (not absolute) */ .how-to-setup3 .srv-arrow--static { position: static; flex-shrink: 0; } /* ── CTA row ─────────────────────────────────────────────────── */ .how-to-setup3 .srv-cta-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } /* Reuse existing .services-cta-btn from about_us_ver2.css */ .how-to-setup3 .srv-cta-soft { font-size: 14px; font-weight: 500; color: #000319; opacity: 0.55; text-decoration: underline; text-underline-offset: 3px; font-family: Inter, sans-serif; transition: opacity 0.15s; } .how-to-setup3 .srv-cta-soft:hover { opacity: 0.85; } /* ============================================================ RESPONSIVE OVERRIDES ============================================================ */ /* Laptop */ @media (max-width: 1200px) { .how-to-setup3 .srv-grid { gap: 14px; padding: 20px; } .how-to-setup3 .srv-title { font-size: 17px; } .how-to-setup3 .srv-desc { font-size: 13px; } } /* iPad Pro */ @media (max-width: 1024px) { .how-to-setup3 .srv-icon-wrap { width: 44px; height: 44px; } .how-to-setup3 .srv-icon-wrap svg { width: 22px; height: 22px; } .how-to-setup3 .srv-title { font-size: 16px; } .how-to-setup3 .srv-desc { font-size: 12.5px; } .how-to-setup3 .srv-featured { gap: 20px; } } /* Tablet — stack to single column */ @media (max-width: 768px) { .how-to-setup3 .srv-grid { grid-template-columns: 1fr; padding: 14px; gap: 12px; } .how-to-setup3 .srv-featured, .how-to-setup3 .srv-wide { grid-column: span 1; flex-direction: column; } .how-to-setup3 .srv-featured { gap: 16px; } .how-to-setup3 .srv-wide { gap: 16px; } .how-to-setup3 .srv-arrow--static { align-self: flex-start; } .how-to-setup3 .srv-title { font-size: 17px; } .how-to-setup3 .srv-desc { font-size: 13.5px; } } /* Mobile */ @media (max-width: 480px) { .how-to-setup3 .srv-grid { padding: 12px; gap: 10px; } .how-to-setup3 .srv-card { padding: 20px 16px; } .how-to-setup3 .srv-cta-row { flex-direction: column; gap: 12px; } .how-to-setup3 .services-cta-btn { width: 100%; justify-content: center; } .how-to-setup3 .srv-title { font-size: 16px; } .how-to-setup3 .srv-desc { font-size: 13px; } .how-to-setup3 .srv-pill { font-size: 10px; } }