.faq-container {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
position: relative;
text-align: center;
}
.accordion {
font-size: 1rem;
margin: 0 auto;
border-radius: 5px;
}
.accordion .accordion__item {
position: relative;
padding-bottom: 38px;
margin-bottom: 53px;
}
.accordion .accordion-header {
font-family: "Amiri", serif;
font-size: 25px;
line-height: 32px;
color: #707070;
text-align: center;
background: 0 0;
padding: 0 120px 20px;
display: block;
cursor: pointer;
}
.accordion .accordion-body {
background: #fcfcfc;
color: #353535;
display: none;
}
.accordion .accordion-body .accordion-body__contents {
font-family: "Amiri", serif;
text-align: center;
color: #43a4ef;
font-size: 25px;
line-height: 32px;
margin-bottom: 25px;
font-weight: 400;
}
.accordion-header, .accordion-body {
background: white;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item {
position: relative;
}
.accordion__item:after {
content: "";
position: absolute;
width: 45% !important;
height: 1px;
display: block;
bottom: 0px;
left: 0;
background: #707070;
}
.accordion__item:before {
content: "";
position: absolute;
width: 45% !important;
height: 1px;
display: block;
bottom: 0px;
right: 0;
background: #707070;
}
.accordion__item > .accordion-header:after {
width: 5px;
height: 43px;
display: block;
content: "";
position: absolute;
left: 50%;
bottom: -22px;
margin-left: -3px;
background: #43a4ef;
transition: 0.4s;
transform: rotate(0deg);
}
.accordion__item > .accordion-header:before {
height: 5px;
width: 43px;
display: block;
content: "";
position: absolute;
left: 50%;
bottom: -3px;
margin-left: -23px;
background: #43a4ef;
transform: rotate(0deg);
transition: 0.4s;
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-135deg);
}
.accordion__item.active > .accordion-header:before {
transform: rotate(-135deg);
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: #353535;
}
@media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}
@media screen and (max-width: 991px) {
.accordion__item:before{
width: 30% !important;
right: 10%;
}
.accordion__item:after{
width: 30% !important;
left: 10%;
}
}
@media screen and (max-width: 768px) {
.accordion .accordion-header{
font-size: 18px;
}
.accordion .accordion-header{
padding: 0;
}
.accordion .accordion-body .accordion-body__contents{
font-size: 18px;
}
}
.accordion__item > .accordion-header span:before {
height: 5px;
width: 100%;
display: block;
content: "";
position: absolute;
left: 50%;
bottom: -3px;
margin-left: -23px;
}
.accordion__item > .accordion-header span:after {
height: 43px;
width: 100%;
display: block;
content: "";
position: absolute;
right: 50%;
bottom: -3px;
margin-left: -3px;
}