/* css/style.css */ /* css/style.css */ :root { /* New "Dark Slate" Professional Theme */ --primary-color: #43c4a2; /* A vibrant teal for accents */ --primary-color-dark: #3aa88c; /* A darker teal for hover */ --dark-color: #2c3e50; /* Dark Slate Blue for header/footer */ --dark-color-light: #34495e; /* Slightly lighter slate for hover */ --light-color: #f8f9fa; /* Very light grey for alternate sections */ --text-color: #34495e; /* Body text color */ --text-muted: #8492a6; /* Muted grey */ --white-color: #ffffff; --border-color: #e5e7eb; --border-radius: 0.5rem; --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); --box-shadow-light: 0 2px 6px rgba(0, 0, 0, 0.06); --font-family-sans-serif: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* IMPORTANT: Ensure you have the Poppins font linked in your HTML */ /* */ /* Basic Reset & Body Styling */ * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-family-sans-serif); line-height: 1.6; color: var(--text-color); background-color: var(--white-color); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; /* Safeguard against horizontal scroll */ } main { flex-grow: 1; } .container { width: 100%; max-width: 1200px; /* Slightly wider for modern look */ margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } a { color: var(--primary-color); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--primary-color-dark); text-decoration: none; /* Often cleaner to remove underline on hover for modern sites */ } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.75rem; font-weight: 600; line-height: 1.3; color: var(--dark-color); } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } p { margin-bottom: 1rem; } ul, ol { margin-bottom: 1rem; padding-left: 20px; } /* === BUTTON HOVER FIX === */ .btn { display: inline-block; padding: 0.75rem 1.75rem; font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; border-radius: var(--border-radius); cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; border: 1px solid transparent; } .btn:hover { transform: translateY(-2px); /* Subtle lift effect */ text-decoration: none; } .btn-primary { background-color: var(--primary-color); color: var(--white-color); border-color: var(--primary-color); } .btn-primary:hover { background-color: var(--primary-color-dark); border-color: var(--primary-color-dark); color: var(--white-color); /* Text color remains white */ } /* ... other button styles ... */ /* Basic Reset */ * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; /* Base font size */ scroll-behavior: smooth; } body { font-family: var(--font-family-sans-serif); line-height: 1.6; color: var(--text-color); background-color: var(--body-bg); display: flex; flex-direction: column; min-height: 100vh; /* Ensures footer sticks to bottom if page content is short */ } main { flex-grow: 1; /* Allows main content to expand and push footer down */ } .container { width: 100%; max-width: 1140px; /* Common max-width for content */ margin: 0 auto; padding: 0 15px; } a { color: var(--primary-color); text-decoration: none; } a:hover { text-decoration: underline; color: darken(var(--primary-color), 10%); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.75rem; font-weight: 500; line-height: 1.2; } h1 { font-size: 2.5rem; } /* Approx 40px */ h2 { font-size: 2rem; } /* Approx 32px */ h3 { font-size: 1.75rem; } /* Approx 28px */ h4 { font-size: 1.5rem; } /* Approx 24px */ p { margin-bottom: 1rem; } ul, ol { list-style-position: inside; margin-bottom: 1rem; } /* Utility Classes */ .btn { display: inline-block; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: var(--border-radius); cursor: pointer; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; border: 1px solid transparent; } .btn-primary { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); } .btn-primary:hover { background-color: darken(var(--primary-color), 10%); border-color: darken(var(--primary-color), 10%); color: #fff; text-decoration: none; } .alt-bg { background-color: var(--section-alt-bg); /* padding-top: 40px; */ /* Added padding for sections with this background */ padding-bottom: 40px; } .home-section { /* Common padding for sections on the homepage */ padding: 40px 0; } .section-intro { max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 2rem; font-size: 1.1rem; color: var(--text-muted); } /* css/faq.css */ #faq-section { /* Styles for the overall section if needed, inherits from .home-section */ background-color: var(--section-alt-bg); /* Use an alternate background to stand out */ } #faq-section h2 { /* text-align: center; */ margin-bottom: 2rem; } .faq-container { /* max-width: 800px; */ margin: 0 auto; } .faq-item { background-color: var(--white-color, #fff); border-radius: var(--border-radius); margin-bottom: 0.75rem; border: 1px solid var(--border-color, #e0e0e0); box-shadow: var(--box-shadow-light); transition: margin 0.3s ease; } .faq-item[open] { margin-bottom: 1.5rem; /* Add more space below when an item is open */ } .faq-question { padding: 1.25rem 1.5rem; font-size: 1.1rem; font-weight: 500; /* Semibold for the question */ cursor: pointer; list-style: none; /* Removes the default triangle/marker */ display: flex; justify-content: space-between; align-items: center; color: var(--dark-color); } .faq-question::-webkit-details-marker { display: none; /* Hides the default marker in WebKit browsers (Chrome, Safari) */ } /* Custom Icon for Open/Close State */ .faq-question::after { content: '\f078'; /* Font Awesome chevron-down icon */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.9em; color: var(--primary-color); transition: transform 0.3s ease; } .faq-item[open] .faq-question::after { transform: rotate(180deg); /* Rotate icon when open */ } .faq-answer { padding: 0 1.5rem 1.25rem 1.5rem; color: var(--text-muted); line-height: 1.7; border-top: 1px solid var(--border-color, #e0e0e0); } .faq-answer p { margin-bottom: 0; /* Reset default paragraph margin */ } .faq-answer a { font-weight: 500; /* Make links in answers stand out a bit */ text-decoration: underline; } .faq-answer a:hover { color: var(--primary-color); }