/* About Us Section */ .about-us { padding: 80px 0 100px; background: white; } .about-card { background: linear-gradient(135deg, var(--lavender) 0%, var(--light-blue) 100%); border-radius: 30px; padding: 60px; text-align: center; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.05); } .about-pill { display: inline-block; padding: 5px 20px; border: 2px solid var(--pill-blue); border-radius: 20px; color: var(--pill-blue); font-weight: 700; font-size: 18px; margin-bottom: 20px; } .about-title { font-size: 55px; font-weight: 800; color: #142A70; margin-bottom: 20px; line-height: 1.2; } .about-title .brush-text { font-family: var(--font-brush); font-size: 64px; color: var(--brush-red-2); font-weight: 700; } .quote { font-family: var(--font-quote); font-style: italic; font-size: 21px; color: #4A4A4A; margin-bottom: 25px; } .body-text { font-size: 18px; font-weight: 400; color: #444444; margin-bottom: 40px; } /* Page scroll is frozen while the mobile drawer is open. `!important` beats the `overflow-x-hidden` utility already on , which has the same specificity. */ body.menu-open { overflow: hidden !important; } .about-illustrations { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } /* Footer brush headline */ footer .brush-text { font-family: var(--font-brush); font-weight: 700; display: inline-block; }