/* style.css */
:root {
    --background: #e6e9ef;
    --text-color: #333333;
    --question-color: #3a7bd5;
    --answer-color: #555555;
    --shadow-light: #ffffff;
    --shadow-dark: #bec3c9;
}

body {
    background-color: var(--background);
}

.faq-title {
    color: var(--text-color);
    font-size: 24px;
    text-align: center;
    margin-bottom: 30px;
    padding: 15px;
    border-radius: 10px;
    background: var(--background);
    box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
}

.faq-section {
    padding: 20px;
}

.faq-item {
    margin-bottom: 25px;
    border-radius: 15px;
    background: var(--background);
    box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    overflow: hidden;
}

.faq-question {
    padding: 20px;
    margin: 0; /* Reset margin for h3 */
    font-size: 18px; /* Adjust font size as needed */
    font-weight: bold;
    color: var(--question-color);
    background: linear-gradient(145deg, #f0f3f9, #d8dbe1);
}

.faq-answer {
    padding: 20px;
    color: var(--answer-color);
    background: linear-gradient(145deg, #ebeef4, #e1e4ea);
}

.faq-answer p {
    margin: 0; /* Reset margin for paragraph */
}

.faq-question, .faq-answer {
    transition: all 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: 8px 8px 15px var(--shadow-dark), -8px -8px 15px var(--shadow-light);
}

.faq-item:hover .faq-question {
    color: #2c62a8;
}

.faq-item:hover .faq-answer {
    color: #444444;
}