.faqs_section {
padding: 8rem 0;
background: rgb(242,242,242);
background: linear-gradient(106deg, rgba(242,242,242,1) 0%, rgba(255,255,255,1) 100%);
& .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
& .sub_title_wrapper {
margin-bottom: 2rem;
display: flex;
justify-content: center;
& span {
font-size: 1.8rem;
color: var(--secondary);
text-transform: uppercase;
}
}
& .title_wrapper {
text-align: center;
margin-bottom: 3rem;    
& h2 {
font-size: 120px;
text-transform: uppercase;
margin: 0;
background: linear-gradient(106deg, #C4C4C4 85%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
}
& .faq_image_wrapper {
display: flex;
justify-content: center;
position: relative;
margin-top: -85px;
z-index: 1;
margin-bottom: 3rem;
}
& .faqs_wrapper_outer {
max-width: 900px;
margin: 0 auto;
}
& .faqs_wrapper {
background: #fff;
border-radius: 10px;
padding: 2rem;
& .faq_item {
margin-bottom: 2rem;
overflow: hidden;
transition: all 0.3s ease;
border-bottom: 1px solid #D9D9D9;
&:last-child {
border-bottom: none;
}
&:hover {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
& .faq_question {
padding: 2rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
& h3 {
font-size: 1.8rem;
color: var(--primary);
margin: 0;
padding-right: 2rem;
line-height: 1.2;
}
& .toggle_icon {
position: relative;
width: 24px;
height: 24px;
& .plus,
& .minus {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--primary);
transition: all 0.3s ease;
}
& .plus {
width: 16px;
height: 2px;
}
& .minus {
width: 2px;
height: 16px;
}
}
}
& .faq_answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background: #F9FAFB;
& .answer_content {
padding: 0 2rem 2rem;
color: var(--text);
font-size: 1.6rem;
line-height: 1.6;
& p:last-child {
margin-bottom: 0;
}
}
}
&.active {
& .faq_question {
background: #F9FAFB;
& .toggle_icon {
& .minus {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
}
}
& .faq_answer {
max-height: 1000px;
}
}
}
}
@media (max-width: 1024px) {
padding: 6rem 0;
& .title_wrapper h2 {
font-size: 3.2rem;
}
& .description_wrapper p {
font-size: 1.6rem;
}
& .faqs_wrapper .faq_item .faq_question h3 {
font-size: 2rem!important;
}
& .faq_image_wrapper {
margin-top: 0;
}
}
@media (max-width: 767px) {
padding: 4rem 0;
& .title_wrapper h2 {
font-size: 2.8rem;
}
& .container {
padding: 0 1.5rem;
}
}
@media (max-width: 400px) {
& .sub_title_wrapper span {
text-align: center;
}
}
}.rich_text_section {
overflow: hidden;
& .container {
position: relative;
z-index: 2;
& .section_inner {
width: 100%;
& .text_area {
width: 100%;
& h2, & h3, & h4, & h5 {
margin: 0 0 3rem;
& span {
color: var(--primary);
font-size: inherit;
font-weight: inherit;
}
}
& p {
& a {
color: var(--white);
}
}
}
& ul {
& li {
color: var(--white);
}
}
& .call_to_action_buttons {
width: 100%;
margin: 4rem 0 0;
}
}
}
& .bg_pattern {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
& svg {
width: 32%;
& circle {
width: 100%;
fill: #2a0e22;
}
}
}
}