body { font-family: 'Inter', sans-serif; background-color: #fefefe; color: #000000; } /* WCAG Reflow Protection */ html, body { overflow-x: hidden; max-width: 100%; } GLOBAL FOCUS STYLE :focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; border-radius: 6px; /* transition: outline 0.15s ease; */ } /* ================= SKIP LINK ================= */ /* ================= SKIP LINK FOCUS (HIGH CONTRAST) ================= */ .skip-link:focus, .skip-link:focus-visible { outline: 3px solid #7e25c7; outline-offset: 4px; background: #000000; color: #ffffff; } .skip-link { position: absolute; top: -70px; left: 42%; transform: translateX(-50%); background: #000; color: #fff; padding: 11px 7px; text-decoration: none; z-index: 9999; border-radius: 6px; font-weight: 600; transition: top 0.3s ease; } .skip-link:focus { top: 15px; } /* =============================== NAVBAR BRAND ALIGNMENT ================================= */ .brand-wrapper { display: flex; align-items: center; /* vertical alignment */ text-decoration: none; } /* LOGO */ .brand-logo { height: 48px; width: auto; object-fit: contain; margin-right: 14px; } /* TEXT CONTAINER */ .brand { display: flex; flex-direction: column; justify-content: center; line-height: 1; } /* TITLE */ .brand-title { font-family: 'Inter', sans-serif; font-weight: 700; /* Regular */ font-size: 24px; color: #7e25c7; margin: 0; letter-spacing: 0.2px; text-transform: uppercase; } /* SUBTITLE */ .brand-subtitle { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15px; color: #161d2b; margin: 3px 0 0; } /* NAVBAR HEIGHT BALANCE */ .navbar { align-items: center; } .nav-link { color: #161d2b !important; font-weight: 500; } .nav-link:hover { color: #7e25c7 !important; } /* keyboard focus */ .nav-link:focus-visible { outline: 0; box-shadow: 0 0 0 .15rem #000; } /* ================= BUTTON FIX ================= */ .btn-purple { background-color: #7e25c7 !important; color: #fff !important; border: none; } .btn-purple:focus-visible { outline: 2px solid #24355a; outline-offset: 3px; } .btn-purple:hover, .btn-purple:focus { background-color: #7e25c7 !important; color: #fff !important; } /* ================= HERO ================= */ .hero { min-height: 85vh; background: linear-gradient( to right, #fefefe 60%, rgba(126, 37, 199, 0.05) 100% ); } .hero-heading { font-size: 64px; line-height: 1.1; } .navbar-toggler { border: none; } .navbar-toggler:focus { box-shadow: none; } /* Accessible focus for menu button */ .navbar-toggler:focus-visible { outline: 3px solid #7e25c7; outline-offset: 3px; border-radius: 6px; } /* remove only mouse focus */ .navbar-toggler:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* ================= FONTS ================= */ /* Make sure this is added in your : */ /* ================= SOLUTIONS SECTION ================= */ .solutions-section { background-color: #fefefe; padding-top: 80px; padding-bottom: 80px; } /* Section Heading */ .section-title { font-family: 'Barlow', sans-serif; font-weight: 500; /* Medium */ font-size: 40px; line-height: 1.2; color: #000000; } /* Subtitle */ .section-subtitle { font-family: 'Open Sans', sans-serif; font-weight: 400; /* Regular */ font-size: 16px; color: #161d2b; max-width: 600px; } /* ================= SERVICE CARD ================= */ .service-card { background-color: #ffffff; padding: 32px; border-radius: 16px; border: 1px solid #eeeeee; transition: all 0.3s ease; height: 100%; } /* Hover Effect */ .service-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05); transform: translateY(-4px); } /* Accessible Focus (keyboard users) */ .service-card:focus-within { outline: 3px solid #370c5a; outline-offset: 4px; } /* ================= ICON ================= */ .icon-wrapper { width: 60px; height: 60px; background-color: rgba(126, 37, 199, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .icon-wrapper img { width: 62px; height: 60px; } /* ================= SERVICE TITLE ================= */ .service-title { font-family: 'Open Sans', sans-serif; font-weight: 600; /* Semibold */ font-size: 18px; color: #000000; margin-bottom: 12px; } /* Description Text */ .service-card p { font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 14px; color: #5f6368; margin-bottom: 0; line-height: 1.6; } /* ================= EXPLORE LINK ================= */ .explore-link { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 16px; color: #7e25c7; text-decoration: none; transition: 0.2s ease; } /* Hover + Focus */ .explore-link:hover, .explore-link:focus { text-decoration: underline; color: #000; } /* Visible focus for keyboard users */ .explore-link:focus { outline: 2px solid #7e25c7; outline-offset: 4px; } /* ================= SECTION ================= */ .guidelines-section { background-color: #f3f4f6; padding: 100px 0; } /* Main Heading */ .guidelines-title { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 48px; color: #161d2b; margin-bottom: 18px; } /* Subtitle */ .guidelines-subtitle { font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 18px; color: #161d2b; max-width: 760px; margin-bottom: 40px; } /* Small Heading */ .guidelines-small-title { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 22px; color: #161d2b; margin-bottom: 30px; } /* ================= CARD ================= */ .cert-box { background-color: #f7f3fb; border: 1px solid #e6d9f7; border-radius: 16px; padding: 35px 20px; text-align: center; height: 100%; transition: border-color 0.2s ease; } /* Hover (Very subtle like image) */ .cert-box:hover { border-color: #7e25c7; } /* Icon */ .cert-box img { width: 85px; height: auto; margin-bottom: 18px; } /* Text */ .cert-box p { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 15px; color: #161d2b; margin: 0; } /* Focus Accessibility */ .cert-box:focus-within { outline: 3px solid #7e25c7; outline-offset: 4px; } /* Grid Layout */ .trusted-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } /* Card Style */ .card { display: flex; align-items: center; gap: 12px; background: #ffffff; padding: 16px 18px; border-radius: 12px; border: 1px solid #e5e7eb; height: 60px; /* Same height */ box-sizing: border-box; transition: 0.2s ease; } .card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } /* Icon */ .icon { width: 22px; height: 22px; object-fit: contain; } /* Text */ .card span { font-size: 14px; font-weight: 500; color: #161d2b; } /* ================= SECTION ================= */ .trusted-section { background: #f3f4f6; padding: 100px 0; } /* Rounded Inner Panel */ .trusted-wrapper { background: #e9eaed; border-radius: 28px; padding: 70px 45px; text-align: center; } /* Heading */ .trusted-title { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 28px; color: #161d2b; margin-bottom: 40px; } /* ================= GRID (5 PERFECT COLUMNS) ================= */ .trusted-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 32px; /* vertical / horizontal spacing */ align-items: stretch; } /* ================= ITEM ================= */ .trusted-item { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; /* padding: 16px 20px; */ width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 3px; text-align: left; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 12px; color: #161d2b; min-height: 60px; height: 100%; transition: border-color 0.2s ease; } .trusted-item span { display: block; text-align: left; line-height: 1.3; } /* Subtle hover like image */ .trusted-item:hover { border-color: #7e25c7; } /* Icon */ .trusted-item img { width: 18px; height: 18px; flex-shrink: 0; } /* Accessibility Focus */ .trusted-item:focus-within { outline: 3px solid #7e25c7; outline-offset: 3px; } /* ================================ Section Heading ================================ */ /* SECTION HEADER */ .section-header { text-align: center; margin: 0 auto 60px; } /* TITLE */ .section-title { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 40px; color: #111827; margin-bottom: 12px; } /* SUBTITLE — CENTERED BLOCK */ .section-subtitle { font-family: 'Open Sans', sans-serif; font-size: 18px; color: #6b7280; max-width: 720px; /* ✅ controls line width */ margin: 0 auto; /* ✅ centers horizontally */ line-height: 1.6; } /* ================================ Process Cards ================================ */ .process-wrapper { position: relative; margin-top: 60px; } .process-line { position: absolute; top: 78px; left: 8%; right: 8%; height: 2px; background: #e9d5ff; z-index: 0; } .process-card { position: relative; background: #ffffff; border: 2px solid #e9d5ff; border-radius: 20px; padding: 60px 30px 40px; text-align: center; height: 100%; z-index: 1; transition: 0.3s ease; } .process-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(124, 58, 237, 0.08); } .step-number { position: absolute; top: -18px; left: -12px; width: 38px; height: 38px; background: #7e25c7; color: #fff; font-weight: 600; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .process-icon { width: 59px; height: 59px; background: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; } .process-icon-img { width: 70px; height: 70px; object-fit: contain; } .process-card-title { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 20px; margin-bottom: 15px; color: #111827; } .process-text { font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 1.7; color: #6b7280; } /* ================================ Support Box ================================ */ .support-box { padding: 17px 50px; background: #ffffff; border: 5px solid #fefefe; border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05); } .support-icon { width: 148px; height: 46px; } .support-title { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 22px; margin-bottom: 10px; color: #111827; } .process-btn { background: linear-gradient(90deg, #7e25c7, #7e25c7); color: #fff; padding: 14px 32px; border-radius: 40px; font-weight: 600; border: none; transition: 0.3s ease; } .process-btn:focus-visible { outline: 2px solid #182030; outline-offset: 3px; } .process-btn:hover, .process-btn:focus { background: #7e25c7; color: #fff; } a:focus { outline: 3px solid #370c5a; outline-offset: 3px; } /* =============================== Accessibility Section =================================*/ .accessibility-section { background: #fefefe; padding: 100px 0; } /* Image Styling */ .image-wrapper { border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); } .accessibility-img { width: 100%; height: auto; display: block; } /* Content Area */ .accessibility-content { padding-left: 10px; } .accessibility-title { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 40px; color: #111827; margin-bottom: 20px; } .accessibility-description { font-family: 'Open Sans', sans-serif; font-size: 17px; line-height: 1.8; color: #6b7280; margin-bottom: 30px; max-width: 520px; } /* List Styling */ .accessibility-list { list-style: none; padding: 0; margin: 0 0 40px 0; } .accessibility-list li { display: flex; align-items: center; gap: 14px; font-family: 'Open Sans', sans-serif; font-size: 14px; color: #374151; margin-bottom: 18px; } /* Check Icon Circle */ .check-icon { width: 28px; height: 28px; background: #f3e8ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .check-img { width: 27px; height: 24px; object-fit: contain; } /* Button */ .accessibility-btn { background: #7e25c7; color: #ffffff; padding: 14px 34px; border-radius: 40px; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 16px; border: none; transition: all 0.3s ease; } .accessibility-btn:focus-visible { outline: 2px solid #1c2b4a; outline-offset: 3px; } .accessibility-btn:hover, .accessibility-btn:focus { background: #7e25c7; color: #ffffff; } /* Accessibility Focus */ a:focus { outline: 3px solid #000000; outline-offset: 3px; } /* FORM SECTION */ .cta-section { background: #f3f2f7; padding: 100px 0; } .help-info{ color: #fefefe; } /* Heading */ .section-header { max-width: 850px; margin: 0 auto 60px; } .cta-title { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 42px; color: #111827; } .cta-subtitle { font-family: 'Open Sans', sans-serif; font-size: 18px; color: #6b7280; margin-top: 15px; } /* FORM CARD */ .form-card { background: #fff; padding: 40px; border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.06); } .form-title { font-family: 'Barlow', sans-serif; font-weight: 600; margin-bottom: 25px; } .form-label { font-size: 14px; font-weight: 500; } .form-control, .form-select { border-radius: 10px; padding: 12px 15px; font-size: 14px; border: 1px solid #000000; } .form-control:focus, .form-select:focus { border-color: #110d14; box-shadow: none !important; outline: 2px solid #000; outline-offset: 3px; } /* Submit Button */ /* Submit button - prevent text color change */ .submit-btn, .submit-btn:hover, .submit-btn:focus, .submit-btn:active, .submit-btn:focus-visible { background-color: #7e25c7; color: #ffffff !important; /* force text color */ border-color: #7e25c7; text-decoration: none; cursor: pointer } button i,a i { transition: transform 0.3s ease-in-out; } button:hover i,a:hover i { transform: translateX(8px); } .submit-btn { background: #7e25c7; color: #fff; padding: 14px; border-radius: 40px; font-weight: 600; border: none; } .submit-btn:hover { background: #7e25c7; } .submit-btn:focus-visible { outline: 2px solid #24355a; outline-offset: 3px; } /* RIGHT SIDE CARD */ .next-card { background: #fff; padding: 30px; border-radius: 18px; box-shadow: 0 15px 40px rgba(0,0,0,0.05); margin-bottom: 25px; } .next-title { font-family: 'Barlow', sans-serif; font-weight: 600; margin-bottom: 20px; } .next-list { list-style: none; padding: 0; } .next-list li { display: flex; align-items: center; margin-bottom: 15px; font-size: 15px; color: #374151; } .next-list span { width: 28px; height: 28px; background: #f3e8ff; color: #7e25c7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-weight: 600; } /* IMAGE */ .cta-image-wrapper { border-radius: 18px; overflow: hidden; margin-bottom: 25px; box-shadow: 0 15px 40px rgba(0,0,0,0.05); } .cta-image { width: 100%; display: block; } /* HELP BOX */ .help-box { background: linear-gradient(135deg, #7e25c7, #7e25c7); color: #fff; padding: 30px; border-radius: 18px; } .help-box h4 { font-weight: 600; margin-bottom: 10px; } .help-contact { margin-top: 10px; font-size: 14px; } .help-contact { color: #fefefe; } /* FOOTER */ .site-footer { background: #161d2b; color: #cbd5e1; padding: 70px 0 30px; font-family: 'Open Sans', sans-serif; } /* GRID */ .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 60px; } /* LOGO */ /* ================= FOOTER BRAND ================= */ .footer-brand { display: flex; align-items: center; /* CENTER vertically (important fix) */ gap: 14px; } /* LOGO BOX */ .footer-logo img { width: 48px; /* exact visual size */ height: 48px; object-fit: contain; display: block; } /* TEXT BLOCK */ .footer-brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 0.2; } /* COMPANY NAME */ .footer-company-name { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 16px; color: #ffffff; letter-spacing: 0.3px; } /* TAGLINE */ .footer-tagline { font-family: 'Open Sans', sans-serif; font-size: 14px; color: #a1a9b8; /* grey tone from image */ margin: 3px 0 0 0; } /* DESCRIPTION */ .footer-desc { color: #9aa4b2; font-size: 14px; line-height: 1.7; max-width: 260px; } /* SOCIAL ICONS */ .social-icons { margin-top: 20px; display: flex; gap: 14px; } .social-icons a { width: 36px; height: 36px; background: #1f2937; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s; } .social-icons a:hover { background: #7c3aed; } .social-icons img { width: 39px; } /* COLUMN TITLES */ .footer-col h4 { color: #ffffff; font-size: 16px; font-weight: 600; margin-bottom: 18px; font-family: 'Barlow', sans-serif; } /* LINKS */ .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin-bottom: 12px; } .footer-col ul li:hover, .footer-bottom p:hover, .footer-links a:hover{ text-decoration: underline; } .footer-col ul li a { color: #fff; text-decoration: none; font-size: 14px; transition: 0.3s; } .footer-col ul li a:hover { color: #ffffff; } /* CONTACT TEXT */ .footer-col p { margin-bottom: 10px; font-size: 14px; color: #fff; } /* DIVIDER */ .footer-divider { height: 1px; background: #fff; margin: 25px 0 25px; } /* BOTTOM AREA */ .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .footer-bottom p { font-size: 13px; color: #fff; } .footer-col h2 {font-size:1.2rem; color:#fff; margin-bottom:15px} /* BOTTOM LINKS */ .footer-links { display: flex; gap: 25px; } .footer-links a { font-size: 13px; color: #fff; text-decoration: none; transition: 0.3s; } .footer-links a:hover { color: #ffffff; } .footer-address a { color: #ffffff; } /* =============================== FOOTER FOCUS FIX (Dark Background) ================================= */ footer a:focus-visible, footer button:focus-visible, footer input:focus-visible, footer textarea:focus-visible, footer select:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; border-radius: 6px; } footer a:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; box-shadow: 0 0 0 2px #000000; } /* RESPONSIVE */ @media (max-width: 992px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .footer-bottom { flex-direction: column; gap: 15px; text-align: center; } } @media (max-width: 576px) { .footer-grid { grid-template-columns: 1fr; } } /* Responsive */ @media (max-width: 991px) { .cta-title { font-size: 32px; } .form-card { padding: 30px; } } /* ================= RESPONSIVE ================= */ /* ====================================================== GLOBAL RESPONSIVE IMPROVEMENTS (WCAG Friendly) Place at END of styles.css ====================================================== */ /* Prevent layout overflow everywhere */ img, video { max-width: 100%; height: auto; } .container { width: 100%; } /* ====================================================== LARGE LAPTOPS (≤1200px) ====================================================== */ @media (max-width: 1200px) { .hero-heading { font-size: 52px; } .section-title, .accessibility-title, .guidelines-title { font-size: 36px; } .trusted-grid { grid-template-columns: repeat(3, 1fr); } } /* ====================================================== TABLETS (≤992px) ====================================================== */ @media (max-width: 992px) { /* HERO */ .hero { min-height: auto; padding: 70px 0; text-align: center; } .hero-heading { font-size: 42px; line-height: 1.2; } /* SECTION SPACING */ .solutions-section, .guidelines-section, .accessibility-section, .cta-section, .trusted-section { padding: 70px 0; } /* HEADINGS */ .section-title { font-size: 30px; } /* ACCESSIBILITY LAYOUT */ .accessibility-content { padding-left: 0; margin-top: 40px; text-align: center; } .accessibility-description { margin-left: auto; margin-right: auto; } /* PROCESS LINE HIDE */ .process-line { display: none; } .process-card { margin-bottom: 30px; } /* FOOTER */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } /* ====================================================== TABLET SMALL (≤768px) ====================================================== */ @media (max-width: 768px) { /* NAVBAR BRAND SCALE */ .brand-logo { height: 40px; } .brand-title { font-size: 20px; } .brand-subtitle { font-size: 13px; } /* GRID STACKING */ .trusted-grid { grid-template-columns: repeat(2, 1fr); } /* SERVICE CARDS */ .service-card { padding: 24px; } /* ICON SIZE */ .icon-wrapper { width: 52px; height: 52px; } /* TITLES */ .section-title { font-size: 26px; } .cta-title { font-size: 28px; } /* FORMS */ .form-card { padding: 25px; } } /* ====================================================== MOBILE (≤576px) ====================================================== */ @media (max-width: 576px) { /* GLOBAL TEXT */ body { font-size: 15px; } /* HERO */ .hero-heading { font-size: 32px; } /* SECTION TITLES */ .section-title, .accessibility-title { font-size: 24px; } .section-subtitle, .cta-subtitle { font-size: 16px; } /* CARDS FULL WIDTH */ .row > [class*="col-"] { margin-bottom: 20px; } /* TRUSTED GRID SINGLE COLUMN */ .trusted-grid { grid-template-columns: 1fr; } /* TRUSTED CARD ALIGNMENT */ .trusted-item { justify-content: flex-start; min-height: auto; } /* PROCESS */ .process-card { padding: 45px 20px 30px; } /* SUPPORT BOX */ .support-box { padding: 25px; } /* FOOTER STACK */ .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } .trusted-item { display: flow; } } /* ================= SOLUTIONS CARDS ================= */ .solution-card { background: #ffffff; border: 1px solid #eeeeee; border-radius: 16px; padding: 32px; transition: 0.3s ease; height: 100%; display: flex; flex-direction: column; } .solution-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.06); } /* keyboard accessibility */ .solution-card:focus-within { outline: 3px solid #7e25c7; outline-offset: 4px; } /* TITLE */ .solution-title { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 20px; color: #111827; margin-bottom: 12px; } /* TEXT */ .solution-card p { font-family: 'Open Sans', sans-serif; font-size: 15px; color: #6b7280; line-height: 1.7; flex-grow: 1; } /* LINK BUTTON STYLE */ .solution-link { font-family: 'Barlow', sans-serif; font-weight: 500; text-decoration: none; color: #7e25c7; margin-top: 18px; display: inline-block; } .solution-link:hover, .solution-link:focus-visible { text-decoration: underline; outline: none; } /* ================= REMEDIATION ================= */ .remediation-card { background: #ffffff; border: 1px solid #eeeeee; border-radius: 16px; padding: 30px; transition: 0.3s ease; } .remediation-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); } .remediation-card:focus-within { outline: 3px solid #7e25c7; outline-offset: 4px; } .remediation-card h3 { font-family: 'Barlow', sans-serif; font-size: 20px; margin-bottom: 10px; color: #111827; } .remediation-card p { font-family: 'Open Sans', sans-serif; color: #6b7280; } /* ================= GUIDELINES PAGE ================= */ .guideline-card { background: #f7f3fb; border: 1px solid #e6d9f7; border-radius: 16px; padding: 28px; height: 100%; transition: 0.25s ease; } .guideline-card:hover { border-color: #7e25c7; } .guideline-card:focus-within { outline: 3px solid #7e25c7; outline-offset: 4px; } .guideline-card h3 { font-family: 'Barlow', sans-serif; font-size: 20px; margin-bottom: 12px; } /* ================= ABOUT ================= */ .about-content h2 { font-family: 'Barlow', sans-serif; font-size: 24px; margin-top: 20px; color: #111827; } .about-content p, .about-content li { font-family: 'Open Sans', sans-serif; color: #6b7280; line-height: 1.7; } .about-content ul { padding-left: 18px; } /* for form validation */ /* Error message text */ .error { color: #b00020; font-size: 14px; margin-top: 4px; min-height: 18px; /* keeps layout stable */ } /* Invalid field highlight */ input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border: 2px solid #b00020; outline: none; } /* Focus state for accessibility */ input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.25); } /* ====================================================== SMALL PHONES (≤360px) ====================================================== */ @media (max-width: 576px) { .trusted-item { font-size: 14px; /* slightly bigger for readability */ padding: 14px 16px; gap: 10px; display:flex; } } @media (max-width: 360px) { .hero-heading { font-size: 26px; } .section-title { font-size: 22px; } .service-card { padding: 20px; } } @media (max-width: 991px) { .accessibility-section { padding: 70px 0; } .accessibility-title { font-size: 32px; } .accessibility-content { padding-left: 0; } } @media (max-width: 1200px) { .trusted-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .trusted-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 992px) { .section-title { font-size: 32px; } .hero-heading { font-size: 42px; } } @media (max-width: 992px) { } /* Responsive */ @media (max-width: 991px) { .process-line { display: none; } .process-card { margin-bottom: 30px; } .support-box { padding: 30px; } }