/* Nexlotech Page Builder CSS - Post ID: 972 - Gen: 2025-12-27 06:58:27 */ /* Module: faq-accordion */ /* Layout */ .faq-accordion-section { padding: 60px 0; } /* Header */ .faq-accordion-section .faq-main-title { font-weight: 800; font-size: 2rem; margin-bottom: 0.5rem; } .faq-accordion-section .faq-subtitle { color: #666; margin-bottom: 3rem; font-size: 1rem; } /* Accordion Container */ .faq-accordion-section .accordion { border: 1px solid #eee; border-radius: 12px; background: #fff; overflow: hidden; margin-bottom: 40px; } .faq-accordion-section .accordion-item { border: none; border-bottom: 1px solid #eee; } .faq-accordion-section .accordion-item:last-child { border-bottom: none; } .faq-accordion-section .accordion-button { font-weight: 700; color: #111; background: transparent; box-shadow: none; padding: 1.25rem; font-size: 1.05rem; } .faq-accordion-section .accordion-button:not(.collapsed) { color: var(--faq-active-color, #6cce74); background: transparent; box-shadow: none; } /* Custom Chevron Color */ .faq-accordion-section .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .faq-accordion-section .accordion-button:not(.collapsed)::after { /* We can't easily use CSS variable inside data URI, but we can filter it or use mask. For now, sticking to the static dynamic approach or maybe use a filter for the active color? Actually, the simplest way to support dynamic color in SVG background is mask-image with background-color. Let's switch to mask-image for the active chevron so it takes the variable color. */ background-image: none !important; -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--faq-active-color, #6cce74) !important; } .faq-accordion-section .accordion-body { padding: 0 1.25rem 1.25rem 1.25rem; color: #555; line-height: 1.6; font-size: 0.95rem; } /* CTA Banner */ .faq-accordion-section .faq-cta-box { background-color: #f4f5f7; border-radius: 12px; padding: 30px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .faq-accordion-section .faq-cta-title { font-weight: 700; margin-bottom: 5px; color: #111; } .faq-accordion-section .faq-cta-text { color: #555; margin: 0; } .faq-accordion-section .btn-faq-cta { background-color: var(--faq-active-color, #6cce74); color: #fff; border: none; padding: 12px 30px; border-radius: 50px; font-weight: 600; transition: opacity 0.3s; white-space: nowrap; } .faq-accordion-section .btn-faq-cta:hover { opacity: 0.9; color: #fff; }