/* FAQ Page - Mobile First */

.faq-hero {
    padding: 100px 20px 60px;
    background: linear-gradient(135deg, #1a3a6b 0%, #2c5aa0 60%, #1a3a6b 100%);
    color: white;
    text-align: center;
    min-height: 40vh;
    display: flex;
    align-items: center;
}
.faq-hero .container { width: 100%; max-width: 800px; margin: 0 auto; }
.faq-hero h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: 12px; }
.faq-hero p { font-size: 1rem; opacity: 0.85; }

.faq-content { padding: 50px 20px; background: #f8f9fa; }
.faq-content .container { max-width: 900px; margin: 0 auto; }

.faq-list { display: flex; flex-direction: column; gap: 15px; }

.faq-item {
    background: white;
    padding: 25px 20px;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    border-left: 4px solid #2c5aa0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.faq-item:nth-child(even) { border-left-color: #ff6b35; }
.faq-item:hover { transform: translateX(5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.faq-item h3 { font-size: 1rem; color: #2c5aa0; margin-bottom: 10px; font-weight: 600; }
.faq-item:nth-child(even) h3 { color: #ff6b35; }
.faq-item p { color: #555; font-size: 0.9rem; line-height: 1.7; margin: 0; }

@media (min-width: 768px) {
    .faq-hero h1 { font-size: 2.2rem; }
    .faq-content { padding: 80px 20px; }
    .faq-item h3 { font-size: 1.1rem; }
    .faq-item p { font-size: 0.95rem; }
}