/* ============================================= PDQ Painting – FAQ Accordion Styles Add this CSS to your existing stylesheet or link this file in each page's============================================= */ .faq-section { padding: 60px 0; background: #f5f5f5; } .faq-section .faq-title { text-align: center; font-size: 26px; font-weight: 700; color: #333; margin-bottom: 10px; } .faq-section .faq-subtitle { text-align: center; color: #666; margin-bottom: 36px; font-size: 15px; } .faq-accordion { max-width: 860px; margin: 0 auto; } .faq-accordion .faq-item { background: #fff; border: 1px solid #dde2e8; border-radius: 5px; margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.2s ease; } .faq-accordion .faq-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); } .faq-accordion .faq-question { width: 100%; background: none; border: none; padding: 18px 50px 18px 20px; text-align: left; font-size: 15px; font-weight: 600; color: #222; cursor: pointer; position: relative; line-height: 1.5; display: block; } .faq-accordion .faq-question::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: #4774ba; transition: transform 0.3s ease, content 0.1s; line-height: 1; } .faq-accordion .faq-item.active .faq-question { color: #4774ba; } .faq-accordion .faq-item.active .faq-question::after { content: '\2212'; } .faq-accordion .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .faq-accordion .faq-item.active .faq-answer { max-height: 600px; } .faq-accordion .faq-answer-inner { padding: 0 20px 20px 20px; color: #555; font-size: 14px; line-height: 1.75; border-top: 1px solid #eee; } .faq-accordion .faq-answer-inner p { margin: 12px 0 0; }