/* ------------------- MISSION & VISION ------------------- */ .mv-section { padding: 70px 20px; background: #ffffff; color: #000000; } .mv-container { max-width: 1000px; margin: auto; } /* Title */ .mv-title { font-size: 2.6rem; font-weight: 700; margin-bottom: 24px; text-align: left; position: relative; } .mv-title::after { content: ""; width: 70px; height: 3px; background: #1f6feb; position: absolute; left: 0; bottom: -8px; border-radius: 3px; } /* Cards */ .mv-cards { display: flex; gap: 28px; margin-top: 30px; flex-wrap: wrap; } /* Individual card */ .mv-card { flex: 1 1 45%; background: #f9fbff; display: flex; gap: 18px; align-items: flex-start; padding: 22px; border-radius: 12px; box-shadow: 0 8px 18px rgba(31, 111, 235, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .mv-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(31, 111, 235, 0.15); } /* Icon */ .mv-icon { font-size: 32px; color: #1f6feb; margin-top: 4px; flex-shrink: 0; } /* Text container */ .mv-text { text-align: left; } /* Card title */ .mv-card-title { font-size: 1.4rem; font-weight: 600; margin-bottom: 8px; color: #000000; } /* Card description */ .mv-card-desc { font-size: 1rem; line-height: 1.6; color: #333333; } /* Responsive */ @media (max-width: 800px) { .mv-card { flex: 1 1 100%; } .mv-title { font-size: 2.3rem; } } @media (max-width: 480px) { .mv-title { font-size: 2rem; } .mv-card-title { font-size: 1.25rem; } .mv-card-desc { font-size: 0.95rem; } }