ze-gw/static/assets/scss/_accrodion.scss

.faq-one {
    padding: 0 0 120px;
    position: relative;

    &__bg {
        position: absolute;
        bottom: 4%;
        right: 0;
    }
    .container {
        position: relative;
        @media (min-width: 992px) {
            max-width: 920px;
        }
    }
}

.faq-accrodion {

    .accrodion {
        position: relative;
        transition: all .4s ease;

        &:before {
            content: '';
            position: absolute;
            top: -2px;
            bottom: -2px;
            left: 0px;
            right: 0px;
            border-radius: 7px;
            transform: scaleX(0);
            background-image: linear-gradient(0deg, #ff4eb5 0%, #ffa065 100%);
            transition: transform .4s ease;
        }


        +.accrodion {
            margin-top: 20px;
        }

        &.active {
            box-shadow: 0px 20px 60px 0px rgba(244, 151, 190, 0.3);
            .accrodion-inner {
                margin: 0 2px;
            }

            &:before {
                transform: scaleX(1);
            }

            .accrodion-title:before {
                content: '\f068';
                color: #ff4eb5;
            }

            .accrodion-title {
                padding-bottom: 0;
            }

            .accrodion-title h4 {
                color: #ff4eb5;
            }
        }

        .accrodion-inner {
            background-color: #fff;
            padding: 32px 0;
            border-style: solid;
            border-width: 1px;
            border-color: rgb(239, 239, 239);
            border-radius: 7px;
            position: relative;
            transition: all .4s ease;

        }

        .accrodion-title {

            padding: 0px 40px;
            cursor: pointer;
            position: relative;
            transition: all .4s ease;



            @media(max-width: 375px) {
                padding-right: 50px;
            }

            &:before {
                content: '\f067';
                font-family: 'FontAwesome';
                font-size: 14px;
                color: $thm-black;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 50%;
                right: 40px;
                transform: translateY(-50%);
            }

            h4 {
                margin: 0;
                color: $thm-black;
                font-size: 18px;
                font-weight: 500;

                @media(max-width: 375px) {
                    line-height: 1.4em;
                }
            }
        }

        .accrodion-content {


            .inner {
                padding: 0 40px;
                padding-top: 25px;
                padding-bottom: 0px;
            }

            p {
                margin: 0;
                color: #74727a;
                font-size: 16px;
                line-height: 30px;
            }
        }
    }

}