.about-page { background-color: #fff; text-align: center; color: #333; } .about-hero img { width: 100%; height: auto; display: block; } .section-label { letter-spacing: 5px; font-size: 2.5rem; margin-top: 50px; font-weight: 300; } .short-hr { width: 40px; margin: 30px auto; border: 0; border-top: 1px solid #ddd; } .main-quote { font-family: 'Georgia', serif; font-style: italic; font-size: 2.2rem; max-width: 800px; margin: 0 auto; line-height: 1.3; color: #222; } /* Two Column Layout */ .about-description { display: flex; gap: 40px; text-align: left; margin: 50px 0; font-size: 0.95rem; color: #555; } .about-description .col { flex: 1; } .about-description p { margin-bottom: 20px; } /* Mid Image */ .mid-banner { margin: 60px 0; } /* Pillars Grid */ .pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; text-align: left; margin-bottom: 80px; } .pillar h4 { font-size: 1rem; letter-spacing: 2px; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .pillar h4 i { font-size: 1.2rem; color: #333; } .pillar p { font-size: 0.85rem; line-height: 1.8; color: #666; } /* --- Responsive --- */ @media (max-width: 768px) { .about-description { flex-direction: column; } .main-quote { font-size: 1.5rem; padding: 0 20px; } .pillars-grid { grid-template-columns: 1fr; } }.responsive-img{ max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }