/* Health Insurance Page V3 CSS */ :root { --color-primary: #003e7d; /* A vibrant, modern blue */ --color-primary-dark: #012c57; --color-text-heading: #1D2939; /* Dark, almost black for headings */ --color-text-body: #475467; /* Softer grey for body text */ --color-text-caption: #667085; --color-background: #FFFFFF; --color-background-alt: #F9FAFB; --color-border: #EAECF0; --font-primary: 'Inter', sans-serif; /* Recommended: Include in your */ } body.page-health-v3 { background-color: var(--color-background); font-family: var(--font-primary); color: var(--color-text-body); } /* Typography & General Styles */ .section-heading { color: var(--color-text-heading); font-weight: 800; font-size: 2.75rem; letter-spacing: -0.02em; margin-bottom: 1rem; } .section-subheading { color: var(--color-text-body); font-size: 1.125rem; line-height: 1.6; max-width: 650px; margin-left: auto; margin-right: auto; } /* Hero Section */ .hero-section { padding: 7rem 0; background-color: var(--color-background); } .hero-subheading { color: var(--color-primary); font-weight: 600; margin-bottom: 1rem; } .hero-heading { color: var(--color-text-heading); font-weight: 800; font-size: 4rem; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 1.5rem; } .hero-text { font-size: 1.25rem; color: var(--color-text-body); max-width: 680px; margin: 0 auto 2.5rem auto; } .btn-hero-cta { background-color: var(--color-primary); border-color: var(--color-primary); font-weight: 600; padding: 1rem 2rem; border-radius: 8px; font-size: 1.1rem; transition: all 0.2s ease-in-out; } .btn-hero-cta:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 82, 255, 0.2); } .hero-cta-caption { margin-top: 0.75rem; color: var(--color-text-caption); font-size: 0.875rem; } /* Comparison Section */ .comparison-section { padding: 6rem 0; background-color: var(--color-background-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .comparison-card { background: var(--color-background); border: 1px solid var(--color-border); border-radius: 12px; padding: 2.5rem; height: 100%; box-shadow: 0 1px 2px rgba(29, 41, 57, 0.05); } .comparison-card .card-title { color: var(--color-text-heading); font-weight: 700; font-size: 1.5rem; } .comparison-card .card-subtitle { color: var(--color-text-caption); margin-bottom: 2rem; } .comparison-list { list-style: none; padding-left: 0; } .comparison-list li { position: relative; padding-left: 28px; margin-bottom: 1rem; font-size: 1rem; line-height: 1.5; } .comparison-list li::before { content: '\f058'; /* Font Awesome check-circle solid */ font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 0; top: 2px; font-size: 1.1rem; color: var(--color-primary); } .comparison-list.list-no li::before { content: '\f057'; /* Font Awesome times-circle solid */ color: var(--color-text-caption); } /* Features Section */ .features-section { padding: 7rem 0; } .feature-image-card { background-color: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 8px 16px -4px rgba(29, 41, 57, 0.06), 0 20px 40px -8px rgba(29, 41, 57, 0.1); } .features-section .section-heading, .features-section .section-subheading { text-align: left; margin-left: 0; margin-right: 0; margin-bottom: 2rem; } .feature-item { display: flex; align-items: flex-start; gap: 1.25rem; margin-top: 2rem; } .feature-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 8px; background-color: var(--color-background-alt); color: var(--color-primary); display: grid; place-items: center; font-size: 1.25rem; } .feature-title { font-size: 1.125rem; font-weight: 600; color: var(--color-text-heading); margin-bottom: 0.25rem; } .feature-text p { color: var(--color-text-body); margin-bottom: 0; line-height: 1.6; } /* Responsive Adjustments */ @media (max-width: 991.98px) { .hero-heading { font-size: 3rem; } .section-heading { font-size: 2.25rem; } .hero-section, .comparison-section, .features-section { padding: 5rem 0; } .features-section .section-heading, .features-section .section-subheading { text-align: center; } .feature-image-card { margin-bottom: 3rem; } } @media (max-width: 767.98px) { .hero-heading { font-size: 2.5rem; } .hero-text { font-size: 1.125rem; } }