.about-hero { padding: 60px 0; background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%); text-align: center; }
.about-hero h1 { font-size: 2.2rem; font-weight: 800; color: #1a1a2e; margin-bottom: 16px; }
.about-hero p { margin: 0 auto; }
.about-content { padding: 60px 0; background: #fff; }
.about-content .container { max-width: 820px; }
.about-card { background: #f8fafc; border-radius: 14px; padding: 32px 36px; margin-bottom: 24px; border-left: 4px solid #2cc671; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.2s, box-shadow 0.2s; }
.about-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.about-card h2 { font-size: 1.35rem; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; }
.about-card p { font-size: 1rem; color: #555; line-height: 1.8; margin: 0; }
.about-contact { background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%); border-radius: 14px; padding: 32px 36px; margin-top: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.about-contact h2 { font-size: 1.35rem; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; }
.about-contact ul { list-style: none; padding: 0; margin: 0; }
.about-contact ul li { padding: 8px 0; font-size: 1rem; color: #555; }
.about-contact ul li i { width: 22px; color: #2cc671; margin-right: 8px; }
@media (max-width: 768px) {
    .about-hero { padding: 40px 0; }
    .about-hero h1 { font-size: 1.8rem; }
    .about-content { padding: 40px 0; }
    .about-card, .about-contact { padding: 24px 20px; }
}