.faq {
position: relative;
z-index: 2;
}
@media screen and (max-width: 780px) {
.faq__title {
margin-bottom: 30px;
}
}
.faq__items {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-left: -15px;
margin-right: -15px;
margin-bottom: -20px;
}
@media screen and (max-width: 960px) {
.faq__items {
margin-left: 0;
margin-right: 0;
flex-direction: column;
}
}
.faq__item {
position: relative;
width: calc(50% - 30px);
margin-left: 15px;
margin-right: 15px;
margin-bottom: 20px;
background: #F2F5F8;
border-radius: 10px;
}
@media screen and (max-width: 960px) {
.faq__item {
margin-left: 0;
margin-right: 0;
width: 100%;
}
}
.faq__item-btn {
padding: 13px 20px;
width: 100%;
border: none;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: background 0.3s;
text-align: left;
background: transparent;
}
@media screen and (max-width: 780px) {
.faq__item-btn {
padding: 13px 20px;
}
}
.faq__item-btn:hover .faq__item-btn-icon {
background: #1C427F;
}
.faq__item-btn:active .faq__item-btn-icon {
background: #1C427F;
}
.faq__item-btn-text {
color: #292E35;
font-size: 20px;
font-weight: 700;
}
@media screen and (max-width: 960px) {
.faq__item-btn-text {
font-size: 16px;
}
}
@media screen and (max-width: 560px) {
.faq__item-btn-text {
font-size: 14px;
}
}
.faq__item-btn-icon {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 10px;
background: #7A95C0;
position: relative;
flex-shrink: 0;
margin-left: 20px;
transition: background 0.3s;
}
.faq__item-btn-icon::before, .faq__item-btn-icon::after {
display: block;
content: "";
width: 11px;
height: 3px;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s;
}
.faq__item-btn-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.faq__item-btn.active .faq__item-btn-icon {
background: #F03444;
}
.faq__item-btn.active .faq__item-btn-icon::before {
transform: translate(-50%, -50%) rotate(-180deg);
}
.faq__item-btn.active .faq__item-btn-icon::after {
transform: translate(-50%, -50%) rotate(0deg);
opacity: 0;
}
.faq__item-text {
border-top: 0;
font-size: 18px;
line-height: 140%;
transition: opacity 0.3s, top 0.3s;
padding: 17px 20px 37px;
display: none;
}
@media screen and (max-width: 780px) {
.faq__item-text {
font-size: 16px;
}
}
@media screen and (max-width: 560px) {
.faq__item-text {
font-size: 14px;
}
}
.faq__item--question {
background: transparent;
}
.faq__item-question-btn {
width: 100%;
font-size: 20px;
line-height: 25px;
font-weight: 500;
padding: 20px 30px;
border-radius: 10px;
}
.faq__item-question-btn:hover {
background: rgb(122, 149, 192);
}
.faq__btn {
width: 100%;
max-width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 20px;
font-weight: 500;
padding: 20px 30px;
}
@media screen and (max-width: 560px) {
.faq__btn {
padding: 15px 20px;
font-size: 16px;
}
}
.faq__btn-wrapper {
text-align: center;
display: none;
}
@media screen and (max-width: 780px) {
.faq__btn-wrapper {
display: block;
margin-top: 30px;
}
}