.faqcontainer:before {
content:'';
position: absolute;
width: calc(100% - 30px);
height: 100%;
margin: 0;
left: 15px;
background-color: transparent;
top: 0px;
box-shadow: 0px 20px 40px #52616b;
opacity: 0.2;  
z-index: -1;
transition: ease-in-out 0.6s all;
}
.faqcontainer:hover.faqcontainer:before {
box-shadow: 0px 40px 90px #52616b;
}
.faqul {
list-style: none; 
margin:0;
padding: 0;
background-color: white;
border-radius: 3px;
}
.accordionTitle {
padding-bottom: 20px; 
padding-top: 20px; 
position: relative;
margin: 0;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.8px;
color: var(--title-color);
transition: ease-in-out 0.2s all;
cursor: pointer;
}
.accordionTitle:hover {
padding-left: 25px;
} .accordionTitle:before,
.accordionTitle:after {
content:'';
position: absolute;
height: 2px;
border-radius: 50px;
transition: ease-in-out 0.6s all;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.accordionTitle:before {
width: 100%;
background-color: #e2e9ee;
}
.accordionTitle:after {
background-image: linear-gradient(90deg, #52616b, #e2e9ee);
width: 0%;
}
.accordionTitle:hover::after {
width: 100%;
} .accordionTitleActive:after {
content:'';
position: absolute;
height: 2px;
border-radius: 50px;
transition: ease-in-out 0.6s all;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.accordionTitleActive:after {
background-image: linear-gradient(90deg, #52616b, #e2e9ee);
width: 100%;
} .accIcon {
float: right;
width: 30px;
height: 30px;
display: flex;
margin-top: -3px;
align-items: center;
justify-content: center;
}
.accIcon:before,
.accIcon:after {
content:'';
position: absolute;
border-radius: 50px;
background-color: #e2e9ee;
transition: ease 0.3s all;
}
.accIcon:before {
width: 2px;
height: 20px;
}
.accIcon:after {
width: 20px;
height: 2px;
}
.accordionTitle:hover .accIcon:before,
.accordionTitle:hover .accIcon:after {
background-color: #52616b;
}
.accIcon.anime.accIcon:before {
transform: rotate(90deg);
} .accordionFAQ .item .text {
opacity: 0;
height: 0;
padding: 0px 20px;
position: relative;
line-height: 24px;
font-size: 16px;
font-weight: 200;
transition: all 0.6s cubic-bezier(.42,.2,.08,1);
overflow: hidden;
background-color: #f0f5f9;
letter-spacing: 0.5px;
} .accordionFAQ .item .text.show {
opacity: 1;
height: auto;
padding: 25px 20px;
position: relative;
z-index: 0;
border-radius: 0px 0px 3px 3px;
}
@media (min-width: 220px) and (max-width: 480px) {
.accordionFAQ{
margin-left:20px;
margin-right:20px;
}
}