/* Custom styles for typography and transitions */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f7fafc; /* Light gray background for the main content */
    color: #1a202c; /* Dark gray for text */
}

/* Applying the elegant serif font to specific elements */
.font-serif-elegant {
    font-family: 'Cormorant Garamond', serif;
}

/* --- Header Styles --- */
header {
    color: #fff; /* Initial text color for header */
    transition: background-color 0.5s ease, box-shadow 0.5s ease, padding 0.5s ease, color 0.5s ease;
}

/* Class to be added on scroll */
header.scrolled {
    background-color: rgba(255, 255, 255, 1);
    color: #111;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* --- Hero Section Styles --- */
#faq-hero {
    height: 40vh; /* Set height to 40% of the viewport height */
    background-image: url('../images/Interior\ 2.jpeg');
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Dark overlay for better text readability */
#faq-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

/* --- FAQ Accordion Styles --- */
.faq-item .answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    padding-top: 0;
    padding-bottom: 0;
}

.faq-item.active .answer {
    max-height: 200px; /* Adjust as needed for your content length */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.faq-item .icon {
    transition: transform 0.3s ease;
}

.faq-item.active .icon {
    transform: rotate(45deg);
}