.x-main.full .faqs-main-wrapper,
.post-type-archive-product .faqs-main-wrapper {
background-color: #ffffff;
padding: 50px 30px;
}
.faqs-main-wrapper {
margin-top: 40px;
margin-bottom: 30px;
}
.x-main.full .faqs-container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
body:not(.home) .x-main.full .faqs-container,
.post-type-archive-product .faqs-container {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.faq-title {
margin-top: 0 !important;
}
.faq-wrapper {
margin-top: 40px;
}
.faq:not(:last-child) {
margin-bottom: 20px;
}
.faq-question {
position: relative;
display: flex;
align-items: center;
font-size: 18px;
font-weight: 600;
background: rgb(125, 198, 95);
color: #ffffff;
padding: 15px 25px;
margin: 0;
cursor: pointer;
}
.faq:not(.active) .faq-question::before {
content: "";
width: 19px;
position: absolute;
border-top: 3px solid #ffffff;
transition: all .5s ease-in-out;
transform: rotate(90deg);
top: calc(50% - 20px / 2 + 9px);
right: 32px;
}
.faq .faq-question::after {
content: "";
height: 20px;
position: absolute;
right: 40px;
border-left: 3px solid #ffffff;
transition: all .5s ease-in-out;
transform: rotate(-90deg);
opacity: 1;
}
.faq-question span {
max-width: calc(100% - 30px);
}
.faq-answer {
padding: 25px;
margin: 0;
}
.faq-answer p {
margin-bottom: 15px;
}
.faq-answer > *:last-child {
margin-bottom: 0;
}
.faq .faq-answer-wrapper {
background: #ffffff;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}
.faq.active .faq-answer-wrapper {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}
@media (min-width: 769px) {
.x-main.full .faqs-main-wrapper {
padding-left: 4.7em;
padding-right: 4.7em;
}
}
@media (max-width: 544px) {
.faqs-main-wrapper {
margin-top: 30px;
}
.faq:not(:last-child) {
margin-bottom: 15px;
}
.faq-question {
font-size: 1.25rem;
padding: 15px 20px;
}
.faq:not(.active) .faq-question::before {
width: 14px;
top: calc(50% - 20px / 2 + 9px);
right: 22.5px;
}
.faq .faq-question::after {
height: 15px;
right: 28px;
}
.faq-question span {
max-width: calc(100% - 25px);
}
.faq-answer {
padding: 20px;
}
}