/* New section styles for airev.pk homepage. Add this file's link tag to AFTER css/style.css, or merge these rules into your existing style.css. Colors/spacing are guesses matched to the existing menu-icon palette and card patterns already used on course.airev.pk — adjust the CSS variables below to match your real tokens. */ .section-lead { max-width: 640px; margin: 0.75rem auto 0; opacity: 0.8; } .split-card { height: 100%; padding: 2rem; border-radius: 16px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .split-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); } .split-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 1.5rem; margin-bottom: 1rem; } .split-list { list-style: none; padding: 0; margin: 1rem 0 1.5rem; } .split-list li { padding: 0.35rem 0; padding-left: 1.5rem; position: relative; } .split-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--bs-primary, #2563eb); font-weight: 700; } .cta-band { padding: 4rem 0; background: linear-gradient(135deg, #1e3a8a, #ea580c); } .cta-band .section-title { color: #fff; } /* Honeypot field — hidden from real users, left open for bots */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Mobile fix: hero content was touching the left edge on small screens. Forces safe side padding regardless of what style.css sets for #hero .container at narrow widths. */ @media (max-width: 767.98px) { #hero .hero-content, #hero .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } }