.faq{
    padding: clamp(40px, 8vw, 80px) 0;
    background: var(--colors-grey-light-2);

    &__list{
        display: grid;
        gap: 20px;
    }

    .faq-item{

        background: var(--colors-white);
        padding: 20px clamp(15px, 4vw, 40px);
        cursor: pointer;

        &__top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: clamp(12px, 2.4vw, 24px);
        }

        &__title{
            font-family: var(--font-family);
            font-weight: 700;
            font-size: clamp(18px, 2.933vw, 24px);
            line-height: 140%;
            letter-spacing: 0.01em;
            color: var(--colors-default);
            transition: 0.33s;
        }
    
        &__icon{
            svg{
                transition: 0.23s;
                path{
                    transition: 0.23s;
                }
            }

            @include sm-mobile {
                svg{
                    width: 38px;
                    height: 38px;
                }
            }
        }
    
    
        &__content{
            font-family: var(--font-family);
            font-weight: 400;
            font-size: clamp(16px, 2.267vw, 18px);
            line-height: 140%;
            letter-spacing: 0.01em;
            color: var(--colors-default);
            padding-top: 20px;
            display: none;
        }

        &.active{
            .faq-item__title{
                font-size: clamp(20px, 3.333vw, 30px);
            }
            .faq-item__icon{
                svg{
                    fill: var(--colors-primary);
                    path{
                        stroke: #fff;

                        &:nth-child(2){
                            opacity: 0;
                        }
                    }
                }
            }
        }

    }

}




.havequestion{
    padding: clamp(40px, 8vw, 80px) 0;

    &__box{
        display: flex;
        gap: clamp(20px, 5.333vw, 60px);
        align-items: center;
    }

    &__main{
        width: 40%;
        min-width: 400px;
        p{
            font-family: var(--font-family);
            font-weight: 400;
            font-size: clamp(16px, 2.4vw, 20px);
            line-height: 140%;
            letter-spacing: 0.01em;
            color: var(--colors-default);
            padding: 10px 0;
        }
    }

    &__title{
        font-family: var(--font-family);
        font-weight: 700;
        font-size: clamp(24px, 4.267vw, 40px);
        line-height: 140%;
        letter-spacing: 0.01em;
        color: var(--colors-default);
        padding: 10px 0;
    }


    &__form{
        width: 60%;
        background: var(--colors-grey-light-2);
        padding: 0 40px;
        padding-bottom: clamp(15px, 3.067vw, 30px);
    }

    @include tablet{
        &__box{
            flex-direction: column;
        }

        &__main{
            width: 100%;
            min-width: 100%;
        }

        &__form{
            width: 100%;
            padding-left: 15px;
            padding-right: 15px;

            .main-form{
                max-width: 100%;
            }

            .main-form__title{
                text-align: left;
            }
        }
    }
}

.form-group-v2{
    grid-template-columns: 100%;

}