.app {
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    background: linear-gradient(135deg,#ddeeff 10%,#ffeedd 90%);
}
.faq-container {
    max-width: 600px;
    margin: auto;
}
.faq {
    background: linear-gradient(135deg,#cfe3f7 10%,#ebcdb0 90%);
    border: 1px solid #ddeeff;
    overflow: hidden;
    padding: 30px;
    margin: 20px;
    position: relative;
    border-radius: 18px;
    color: #066ed6;
    transition: all .2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.faq-title {
    margin:0 40px 0 0;
}
.faq-text {
    margin: 10px 0;
    display: none;
}
.faq-icon {
    width: 25px;
    height: 25px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 20px;
    cursor: pointer;
    background-image: url("https://eveningwater.com/my-web-projects/js/70/images/arrow_down.svg");
    background-repeat: no-repeat;
    background-size: cover;
}
.faq.active {
    background: linear-gradient(135deg,#f2f3f4 10%,#ffffff 90%);
    box-shadow: 1px 4px 6px rgba(0,0,0,.5),
                0 6px 5px rgba(0,0,0,.4);
}
.faq.active::before,.faq.active::after {
    content:"\f075";
    font-family: 'Font Awesome 5 Free';
    color: #2396ef;
    left: 20px;
    top: 20px;
    opacity: .2;
    font-size: 7.3rem;
    z-index: 0;
    position: absolute;
}
.faq.active::before {
    top: -5px;
    left: -30px;
    color: #dd5955;
    transform: rotateY(180deg);
}
.faq.active .faq-text {
    display: block;
}
.faq.active .faq-icon{
    background-image: url("https://eveningwater.com/my-web-projects/js/70/images/close.svg");
}