@charset "utf-8";
        body {
            margin: 0;
            background-color: #e3e3db; 
        }

        .hero {
            height: 600px;
            display: flex;
            align-items: center;
            justify-content: flex-end; 
            padding: 0 10%;
            color: black;
            position: relative;
            overflow: hidden;
            background-color: #000; 
        }

        .hero-slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .slide.active { opacity: 1; }

        .hero-wave {
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            line-height: 0;
            z-index: 5;
        }

        .hero-wave svg {
            display: block;
            width: 100%;
            height: 270px; 
            fill: #E1E1D8;
        }

.hero-content {
    position: relative;
    z-index: 100;
    max-width: 2000px; 
    width: 100%;
    margin-top: 3px;
    text-align: right; 
    padding-right: 2%; 
}

.pop-out-text {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 155px;
    
    margin-right: -40px; 
    display: inline-block;

    opacity: 0;
    transform: scale(0.5);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pop-out-text.show {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.faq-item.active .faq-answer {
    max-height: 1000px; 
    padding-bottom: 20px;
    transition: max-height 0.5s ease-in; 
}

@media (max-width: 1024px) {
    .hero-content { 
        text-align: center; 
        padding-right: 0; 
        max-width: 100%;
    }
    .pop-out-text { 
        margin-right: 0 !important; 
        margin-bottom: 50px; 
    }
}

        .faq-section {
            background-image: url('../image/FAQ Page/image2.png');
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            padding: 20px 10% 80px 10%;
            position: relative;
        }

        .faq-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 40px;
            font-family: 'Lora', serif;
            font-weight: 700;
            font-style: italic;
        }

        .faq-container {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .faq-item {
            border-bottom: 1px solid #000000;
            margin-bottom: 10px;
        }

        .faq-question {
            width: 100%;
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            background: none;
            border: none;
            text-align: left;
            font-family: 'Gentium Plus', serif;
            font-size: 1.2rem;
            font-style: italic;
            font-weight: 700;
            transition: color 0.3s ease;
        }

        .faq-question:hover {
            color: #CF1111;
        }

        .faq-question i {
            font-size: 0.8rem;
            transition: transform 0.3s ease;
        }

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

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease;
            font-family: 'Gentium Plus', serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1.1rem;
            line-height: 1.6;
            color: #000000;
        }

        .faq-answer p, .faq-answer ul li {
            position: relative;
            padding-left: 20px;
            list-style: none;
            margin-bottom: 5px;
        }

        .faq-answer p::before, .faq-answer ul li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: #000000;
            font-weight: bold;
        }

        .faq-answer ul {
            padding: 0;
            margin: 0;
        }

        .faq-item.active .faq-answer {
            max-height: 400px;
            padding-bottom: 20px;
        }