@import url('inline-font1_1'); :root { --primary-color: #007bff; /* A vibrant blue */ --secondary-color: #6c757d; /* Muted gray */ --background-color: #f8f9fa; /* Light gray background */ --text-color: #343a40; /* Dark gray text */ --heading-color: #1a2930; /* Darker blue/charcoal for headings */ --accent-color: #ffc107; /* Yellow for accents */ --link-color: #0056b3; /* Darker blue for links */ --button-bg-color: #28a745; /* Green for CTA buttons */ --button-text-color: #ffffff; } body { font-family: 'Roboto', sans-serif; line-height: 1.7; color: var(--text-color); background-color: var(--background-color); margin: 0; padding: 0; font-size: 17px; /* Slightly larger base font for readability */ } .container { max-width: 900px; /* Optimal width for single-column readability */ margin: 0 auto; padding: 20px; } header { background-color: var(--heading-color); color: #ffffff; padding: 40px 20px; text-align: center; border-bottom: 5px solid var(--accent-color); } header h1 { font-family: 'Montserrat', sans-serif; font-size: 3.2em; margin: 0; font-weight: 700; letter-spacing: -1px; } header p { font-size: 1.4em; margin-top: 10px; opacity: 0.9; } h2, h3, h4 { font-family: 'Montserrat', sans-serif; color: var(--heading-color); margin-top: 40px; margin-bottom: 20px; font-weight: 600; } h2 { font-size: 2.5em; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; } h3 { font-size: 1.9em; color: var(--primary-color); } h4 { font-size: 1.5em; } p { margin-bottom: 1.2em; } ul { list-style-type: disc; /* Changed from 'none' to 'disc' for better readability */ padding-left: 20px; /* Added padding for list items */ margin-bottom: 1.2em; } li { margin-bottom: 0.8em; } a { color: var(--link-color); text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; color: var(--primary-color); } .cta-button { display: inline-block; background-color: var(--button-bg-color); color: var(--button-text-color) !important; /* Important to override link color */ padding: 15px 30px; font-size: 1.2em; font-weight: bold; text-decoration: none; border-radius: 8px; transition: background-color 0.3s ease, transform 0.2s ease; text-align: center; margin-top: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .cta-button:hover { background-color: #218838; /* Darker green */ transform: translateY(-2px); text-decoration: none; } img.responsive-image { width: 100%; max-width: 700px; /* Ensures image doesn't exceed container width too much */ height: auto; display: block; margin: 30px auto; border-radius: 8px; box-shadow: 0 6px 12px rgba(0,0,0,0.15); } .image-caption { text-align: center; font-style: italic; color: var(--secondary-color); margin-top: -15px; margin-bottom: 30px; font-size: 0.95em; } .faq-item { background-color: #ffffff; padding: 20px; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 5px solid var(--accent-color); } .faq-item h4 { margin-top: 0; color: var(--heading-color); } .testimonial { background-color: #e9ecef; /* Light gray for testimonials */ padding: 25px; margin-bottom: 20px; border-radius: 8px; border-left: 5px solid var(--primary-color); font-style: italic; } .testimonial p:last-child { margin-bottom: 0; } .testimonial .author { text-align: right; font-weight: bold; font-style: normal; margin-top: 10px; color: var(--text-color); } .highlight { color: var(--primary-color); font-weight: bold; } .section-intro { font-size: 1.15em; color: var(--secondary-color); margin-bottom: 30px; text-align: center; } .alternative-item { margin-bottom: 10px; } .alternative-item strong { color: var(--heading-color); } /* Responsive adjustments */ @media (max-width: 768px) { body { font-size: 16px; } header h1 { font-size: 2.5em; } header p { font-size: 1.2em; } h2 { font-size: 2em; } h3 { font-size: 1.6em; } .container { padding: 15px; } .cta-button { font-size: 1.1em; padding: 12px 25px; } } @media (max-width: 480px) { header h1 { font-size: 2em; } header p { font-size: 1em; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; } }