/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* FAQ */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ 

.faq {
    margin: 50px 0;
}

.faq-accordion {
    margin-bottom: 4px;
}

.hb_faq_wrapper {
    padding-bottom: 20px;
}

.hb_faq_wrapper input[type="checkbox"] {
    display: none;
}

.hb_faq_wrapper label {
    display: block;
    background-color: rgba(220,220,220,0.4);
    padding: 0.75rem 30px;
    cursor: pointer;
    padding-right: 84px;
    position: relative;
    border-radius: 24px;
    transition: color 0.3s ease;
}

.hb_faq_wrapper label:hover {
    color: #9BAB9A;
}

.hb_faq_wrapper label::before {
    content: "";
    background-image: url('data:image/svg+xml,<svg fill="none" height="25" viewBox="0 0 25 25" width="25" xmlns="http://www.w3.org/2000/svg"><path d="m6.30566 9.07227 6.00004 6.00003 6-6.00003" stroke="%239bab9a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>');
    background-size: cover;
    height: 34px;
    width: 36px;
    position: absolute;
    right: 30px;
    transform: translateY(-50%);
    top: 50%;
    transition: all 0.4s ease;
}

.hb_faq_wrapper .faq-title {
    display: flex;
    justify-content: start;
    align-items: center;
}

.hb_faq_wrapper .faq-title svg {
    height: 24px;
    width: 24px;
    margin-right: 24px;
    color: #9BAB9A;
    flex-shrink: 0;
}
  
.hb_faq_wrapper .faq-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

.hb_faq_wrapper .faq-content div {
    padding: 30px;
}

.hb_faq_wrapper .faq-content ul:last-of-type {
    margin-bottom: 0;
}
  
  
.hb_faq_wrapper input[type="checkbox"]:checked + label::before {
    transform: translateY(-50%) rotate(180deg);
}

.hb_faq_wrapper input[type="checkbox"]:checked + label + .faq-content {
    max-height: 2500px;
    transition: all 0.8s ease;
    opacity: 100%;
}

.hb_faq_wrapper input[type="checkbox"]:checked + label {
    color: #9BAB9A;
}