:root {
    --faq-accordion-button: linear-gradient(270deg, #061535 0%, #00115D 100%);
    --faq-accordion-border: 1px solid var(--Colours_brand-Blue_green, #003D7B);
}

.faq-head h3 {
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    color: var(--main-page-text-color);
    margin-bottom: 2.25rem;
}

.faq-head p {
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    color: var(--main-page-text-color);
    margin-bottom: 20px;
}

#faq-image .light-img {
    display: none;
}

/*#faq-image {   
    background-size: cover;
    background-position: center;
    
}*/

#faq-image img {
    margin-left: 8.125rem;
    width: 42.7vw;
  
}

#accordionFAQ {
    margin-top: 1.75rem;
    margin-left: 0.5rem;
    margin-right: 8.125rem;
}

.accordion-item {
    background-color: transparent;
    border-radius: 8px;
}

    .accordion-item:first-of-type .accordion-button {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .accordion-item:last-of-type .accordion-button.collapsed{
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

.accordion-body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--main-page-text-color);
}

.accordion-button {
    justify-content: space-between;
    opacity: 1;
    border-radius: 8px;
    border-width: 1px;
    padding: 20px;
    background: var(--faq-accordion-button);
    border: var(--faq-accordion-border);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--main-page-text-color);
}


    /* Прибираємо синій контур фокуса */
    .accordion-button:focus {
        box-shadow: none;
        border-color: transparent;
    }

    /* Прибираємо синій фон та колір тексту для активного стану, але залишаємо білий колір для іконки */
    .accordion-button:not(.collapsed) {
        color: var(--main-page-text-color);
        background-color: transparent;
        box-shadow: none;
        border: var(--faq-accordion-border);
    }

        /* Прибираємо синій фон та колір тексту при наведенні, але залишаємо білий колір для іконки */
        .accordion-button:not(.collapsed):hover {
            color: var(--main-page-text-color);
            background-color: transparent;
        }

    /* Стилі для іконки-трикутничка */
    .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        transform: rotate(0deg); /* Трикутник спрямований вниз у згорнутому стані */
    }

    /* Поворот стрілки, коли акордіон активний */
    .accordion-button:not(.collapsed)::after {
        transform: rotate(180deg); /* Трикутник спрямований вгору в розгорнутому стані */
    }

.faq-accordion-item{
    margin-top:-5px;
}


@media(max-width: 768px) {
    .faq-head{
        padding: 0 1.25rem 0 1.25rem;
    }

    .faq-head h3{
        font-weight: 600;
        font-family: 'Inter', sans-serif;
        font-size: 20px;
        line-height: 120%;
        margin-bottom: 1rem;
    }

    .faq-head p{
        font-weight: 400;
        font-size: 16px;
    }

    #faq-image img{
/*        width: 353px;*/
        height: 375px;
        width:100%;
        margin-left:0px;
    }

    #accordionFAQ{
        margin-top: 24px;
        margin-left: 1.25rem;
        margin-right: 0;
    }

    .accordion-button span{
        width: 285px;
    }
}