/*Start header section*/
.page-faq .header-section {
    background-image: url(../media/faq-header-bg.png);
    background-position-y: bottom;
    background-position-x: center;
    background-size: cover;
    position: relative;
    z-index: 999;
    height: 950px;
}
.page-faq .header-section .container {
    padding: 250px 120px 120px 120px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 44px;
    position: relative;
    z-index: 9999;
}
.page-faq .header-section:before {
    background-image: url(../media/about-header-decoration-1.png);
    width: 52%;
    height: 883px;
    top: 0;
    left: 0;
}
.page-faq .header-section:after {
    background-image: url(../media/about-header-decoration-2.png);
    width: 17%;
    height: 397px;
    bottom: 0;
    right: 0;
}
.page-faq .header-section:before, .page-faq .header-section:after {
    content: '';
    position: absolute;
    background-repeat: repeat;
    object-fit: contain;
    background-position: center;
    z-index: 999;
}

.page-faq .background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 883px;
    background-image: url(../media/faq-header-bg.png);
    background-size: cover;
}

.page-faq .background::before{
    content: '';
    position: absolute;
    background-repeat: repeat;
    object-fit: contain;
    background-position: center;
    z-index: 999;
    background-image: url(../media/about-header-decoration-1.png);
    width: 48%;
    height: 100%;
    top: 0;
    left: 0;
}

.faq-section {
    margin-top: -560px;
}
/*End header section*/


/*Start faq section*/
.page-faq .faq-section .container{
    padding: 170px 118px 106px 118px;
    position: relative;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 128px 0;
}

.page-faq .faq-section .container .faq-wrapper .navigation{
    width: 100%;
    padding: 75px 24px 72px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px 0;
    position: absolute;
    left: 0;
    height: max-content;

}

.page-faq .faq-section .container .faq-wrapper .navigation li{
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
    color: #98968B;
    padding: 5px 12px;
    border: solid 1px transparent;
    transition: all 0.5s ease;
}

.page-faq .faq-section .container .faq-wrapper .navigation li:hover{
    cursor: pointer;
    color: #F1F0EB;
}

.page-faq .faq-section .container .faq-wrapper .navigation li.active-question{
    color: #F1F0EB;
    background-color: #99C35A;
    border-radius: 4px;
}

.page-faq .faq-section .container .faq-wrapper .navigation li.active-question:hover{
    cursor: pointer;
    color: #99C35A;
    background-color: transparent;
    border: solid 1px #99C35A;
}

.page-faq .faq-section .container .faq-wrapper .title-xs{
    margin: 52px 0 24px 0;
    text-transform: uppercase;
}

.page-faq .faq-section .container .answers-wrapper-list{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 32px 64px 32px 64px;
    transition: height 0.3s ease;
    overflow-y: hidden;
    height: auto;
}

.page-faq .faq-section .container .answers-wrapper-list .list li:last-child{
    border: none;
}

.page-faq .faq-section .container .answers-wrapper-list .list li{
    width: 100%;
    border-bottom:solid 1px #333934;
    padding: 40px 0;
}

.page-faq .faq-section .container .answers-wrapper-list .list li .question-wrapper{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0 16px;
    cursor: pointer;
}

.page-faq .faq-section .container .answers-wrapper-list .list li .question-wrapper::before{
    content: '';
    background-image: url(../media/plus.svg);
    height: 24px;
    width: 24px;
    min-width: 24px;
    transition: all 0.5s ease;
}

.page-faq .faq-section .container .answers-wrapper-list .list li .question{
    font-family: Kaisei Tokumin, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 125%;
    color: #FAFAF8;
}

.page-faq .faq-section .container .answers-wrapper-list .list li .answer{
    height: 0;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
    color: #98968B;
    transition: all 0.5s ease;
    padding-left: 42px;
}

.page-faq .faq-section .container .answers-wrapper-list .list li .answer ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px 0;
}

.page-faq .faq-section .container .answers-wrapper-list .list li .answer ul li{
    border: none;
    padding: 0;
    list-style: disc;
}

.page-faq .faq-section .container .answers-wrapper-list .list li.open-question .answer{
    height: max-content;
    margin-top: 24px;
}

.page-faq .faq-section .container .answers-wrapper-list .list li.open-question .question{
    color: #99C35A;
}

.page-faq .faq-section .container .answers-wrapper-list .list li.open-question .question-wrapper::before{
    background-image: url(../media/minus.svg);
}

.page-faq .custom-select{
    display: none;
}
/*End faq section*/
.faq-wrapper {
    display: flex;
    background-color: #1D1F1D;
}

.page-faq .main {
    height: max-content;
    border-left: solid 1px #333934;
}

.page-faq .side {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    max-width: 315px;
    width: 100%;
    min-width: 315px;
    height: 370px;
}
.page-faq .answer a {
    display: inline;
}

@media (max-width: 1280px) {
    /*Start faq section*/
    .page-faq .faq-section .container{
        padding: 170px 79px 106px 79px;
    }
    /*End faq section*/
}

@media (max-width: 992px) {
    /*Start faq section*/
    .page-faq .faq-section .container{
        padding: 125px 21px 0 21px;
        gap: 73px 0;
    }

    .page-faq .faq-section .container .faq-wrapper{
        /*padding-left: 0;*/
        flex-direction: column;
    }

    .page-faq .faq-section .container .faq-wrapper .navigation{
       display: none;
    }

    .page-faq .side{
        max-width: 100%;
        height: max-content;
        top: 52px;
        background-color: #1D1F1D;
    }

    .page-faq .faq-section .container .answers-wrapper-list{
        padding: 23px;
    }

    .page-faq .custom-select{
        display: flex;
        width: 100%;
        font-size: 14px;
        font-weight: 700;
        line-height: 130%;
        letter-spacing: 5.6px;
        text-transform: uppercase;
        color: #98968B;
        border-bottom: solid 1px #333934;
        padding: 14px 24px 6px 24px;
        position: relative;
    }

    .page-faq .custom-select .select-options{
        position: absolute;
        background-color: #1D1F1D;
        top: 100%;
        left: 0;
        padding: 24px;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px 0;
        width: 100%;
    }

    .page-faq .custom-select .select-trigger{
        background-image: url(../media/arrow-down.svg);
        background-repeat: no-repeat;
        background-position-y: center;
        background-position-x: 100%;
        width: 100%;
    }

    /*.page-faq .faq-section .container .answers-wrapper-list .active-category .title-xs{*/
    /*    display: none;*/
    /*}*/
    /*End faq section*/
}

@media (max-width: 576px) {
    /*Start faq section*/
    .page-faq .background{
        background-image: url(../media/faq-bg-mobile.jpg);
    }

    .page-faq .header-section .container
    {
        padding: 250px 120px 120px 15px;
    }
    .page-faq .background::before{
        display: none;
    }

    .page-faq .faq-section .container .answers-wrapper-list .list li .question{
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
    }

    .page-faq .faq-section .container .answers-wrapper-list .list{
        margin-bottom: 16px;
    }

    .page-faq .faq-section .container .faq-wrapper .title-xs{
        margin-bottom: 0;
        max-width: 89%;
        line-height: 130%;
        color: #98968B;

    }

    .page-faq .faq-section .container{
        padding: 125px 8px 0 8px;
    }

    .page-faq .faq-section .container .answers-wrapper-list .list li .answer{
        font-size: 14px;
        line-height: 150%;
    }

    .page-faq .faq-section .container .answers-wrapper-list{
        padding-bottom: 34px;
    }

    .page-faq .faq-section .container .text-content{
        padding: 0 12px;
    }

    .page-faq .map-section .container{
        padding: 0 5px;
    }
    /*End faq section*/
}

@media (max-width: 340px) {
    .page-faq .faq-section .container .text-content .title-xl{
        font-size: 48px;
    }
}