/* ===== FAQ Page ===== */
.faq-container {
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 3rem;
}

.faq-sidebar {
   position: sticky;
   top: 100px;
   height: fit-content;
}

.faq-categories {
   background-color: white;
   border-radius: var(--border-radius-lg);
   padding: 1.5rem;
   box-shadow: var(--box-shadow);
   margin-bottom: 2rem;
}

.faq-categories h3 {
   font-size: 1.125rem;
   margin-bottom: 1rem;
   padding-bottom: 0.75rem;
   border-bottom: 1px solid var(--gray-200);
}

.faq-categories ul {
   list-style: none;
}

.faq-categories li {
   margin-bottom: 0.5rem;
}

.faq-categories a {
   display: block;
   padding: 0.5rem;
   color: var(--gray-700);
   border-radius: var(--border-radius);
   transition: var(--transition);
}

.faq-categories a:hover,
.faq-categories a.active {
   background-color: var(--gray-100);
   color: var(--primary-color);
}

.faq-contact {
   background-color: white;
   border-radius: var(--border-radius-lg);
   padding: 1.5rem;
   box-shadow: var(--box-shadow);
   text-align: center;
}

.faq-contact h3 {
   font-size: 1.125rem;
   margin-bottom: 1rem;
}

.faq-contact p {
   color: var(--gray-600);
   margin-bottom: 1.5rem;
}

.faq-intro {
   margin-bottom: 2rem;
}

.faq-accordion {
   margin-bottom: 3rem;
}

.faq-category-title {
   font-size: 1.5rem;
   margin-bottom: 1.5rem;
   padding-bottom: 0.75rem;
   border-bottom: 1px solid var(--gray-200);
}

.faq-item {
   background-color: white;
   border-radius: var(--border-radius);
   margin-bottom: 1rem;
   box-shadow: var(--box-shadow);
   overflow: hidden;
}

.faq-question {
   width: 100%;
   padding: 1.5rem;
   background: none;
   border: none;
   text-align: left;
   font-weight: 500;
   font-size: 1.125rem;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: var(--transition);
}

.faq-question:hover {
   background-color: var(--gray-50);
}

.faq-question i {
   color: var(--gray-500);
   transition: var(--transition);
}

.faq-item.active .faq-question i {
   transform: rotate(180deg);
}

.faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
}

.faq-answer>p {
   padding: 0 1.5rem 1.5rem;
   color: var(--gray-700);
}

.faq-item.active .faq-answer {
   max-height: 500px;
}