:root { --text-color: #7C7C7C; --active--color: #FF671D; --heading-text-color: #686058; --panel-content-color: #444444; }

img {max-width: 100%; height: auto;}

#faq .bread-cum { margin-bottom: 6.5rem; }

/* Heading Section */
/* #faq .heading { color: #686058; font-size: 60px; font-weight: 700; line-height: 84px; margin-top: 50px; } */
#faq .heading { color: #000000; font-size: 60px; font-weight: 700; line-height: 84px; margin-top: 50px; } /* rebranding */
    .heading-image-general { width: 30%; padding-top: 2.5rem; }
    /* .heading-image-host { width: 20%; padding-top: 2.5rem; } */
    .heading-image-host,
    .heading-image-general,
    .heading-image-guest { width: 35%; padding-top: 2.5rem; } /* rebranding */
    /* .heading-image-guest { width: 35%; padding-top: 2.5rem; } */
    .heading-image-general img,
    .heading-image-host img,
    .heading-image-guest img {
        width: 100%;
        /* height: 80px; */
        height: auto;
    } /* rebranding */

.faq-hero {
    background-color: #000;
    color: #fff;
}

.faq-hero .hero-container {
    padding: 30px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.faq-hero img {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

.faq-hero h1 {
    font-size: 60px;
    font-weight: bold;
}

.faq-hero article {
    justify-self: center;
    align-self: center;
    width: 50%;
}

/* Accordion Section */
.custom-accordion {
    padding: 0.7rem 0;
    background-color: white;
    /* color: #444444; */
    color: #000000; /* rebranding */
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

    .custom-accordion-item { border-bottom: 1px solid #e2e2e2; }
    .custom-accordion-item a { color: #53f; text-decoration: none; background-color: transparent; }
    .custom-accordion-group { margin-bottom: 10rem; margin-top: 1rem; }
    .custom-accordion-group > div:nth-child(n + 2) { margin-top: 0.6rem; }
    .custom-accordion-group .active,
    .custom-accordion:hover {color: var(--active--color);}
    .custom-accordion:before {
        content: url('../../images/arrow.png') ;
        font-size: 10px;
        color: #777;
        float: right;
        transition: all 0.3s;
        transform: rotate(0deg);
    }
    .custom-accordion-group .active:before {transform: rotate(180deg)}
    /* .custom-accordion-group button.toggle-more-content { border: none; background-color: transparent; color: var(--text-color); margin-top: 2.7rem; } */
    .custom-accordion-group button.toggle-more-content { border: none; background-color: transparent; color: #000000; margin-top: 2.7rem; } /* rebranding */
    .custom-accordion-group button.toggle-more-content:hover { color: var(--text-color); background-color: white; border-color: rgba(111, 82, 255, 0.5) }
    .custom-accordion-group button.toggle-more-content:focus {-webkit-box-shadow: 0 0 0 .2rem rgba(111,82,255,.5); box-shadow: 0 0 0 .2rem rgba(111,82,255,.5);}

    #faq .panel {
        /*margin-bottom: 1.5rem;*/
        padding: 0.4rem 0;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
    }
    #faq .panel-content {
        width: 95%;
        font-size: 100%;
        font-weight: 100;
        line-height: 1.8;
        text-align: justify-all;
        color: var(--panel-content-color);
    }

/* End Hero Image */
#faq-end-hero-image {
    background-color: #000000;
    padding: 20px 0;
    min-height: 330px;
    width: 100%;
    /* background-image: url('../../images/faq-endsection-medium.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 600px; */
}

#faq-end-hero-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

/* Responsiveness */
@media (max-width: 991px) {
    #faq .bread-cum { margin-top: 10px; margin-bottom: 10px; }
    #faq .custom-accordion-group { margin-bottom: 57px; }
}

@media (max-width: 776px) {
    .faq-hero .hero-container {
        grid-template-columns: 1fr;
    }

    .faq-hero h1 {
        font-size: 50px;
    }

    .faq-hero article {
        text-align: center;
        place-self: center center;
    }
}

@media (max-width: 768px) {
    .custom-accordion-group { margin-bottom: 2rem; }
}

@media (min-width: 769px) and (max-width: 991px) {
    .heading-image-general { width: 55%; }
    .heading-image-host { width: 35%; }
    .heading-image-guest { width: 55%; }

    /*.custom-accordion-item button { width: 90%; }*/
}

@media (min-width: 992px) and (max-width: 1199px) {
    .heading-image-general { width: 40%; }
    .heading-image-host { width: 25%; }
    .heading-image-guest { width: 35%; }
}

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}