/* Service Expanding */
a[aria-expanded=true] .fa-plus {
 display: none;
}
a[aria-expanded=false] .fa-minus {
 display: none;
}

/* Service Adjustments */
.popularservice {
 color: #fff;
 font-size: 12px;
 text-transform: uppercase;
 text-shadow: none;
 text-align: center;
 line-height: 14px;
 border-radius: 50%;
 width: 75px;
 height: 75px;
 position: absolute;
 top: -3px;
 right: 1px;
 display: inline-block;
 z-index: 20;
 background-color: #F5A800;
}
.popularservicetext {
 line-height: 1.5;
 color: #fff;
 font-size: 11px;
 font-weight: bold;
 top: 50%;
 position: absolute;
 left: 0;
 width: 100%;
 cursor: text;
 -webkit-transform: translateY(-54%);
 -moz-transform: translateY(-54%);
 transform: translateY(-54%);
}

.faq-container {
 border: 1px solid #ddd;
 margin: 10px;
 border-radius: 5px;
 overflow: hidden;
}

.faq-question {
 padding: 10px;
 background-color: #DFDFDF;
 cursor: pointer;
 font-weight: 900;
 display: flex; /* Maintaining display as flex */
 align-items: center; /* This will vertically align the icon and the text in the middle */
 justify-content: center;/* This will horizontally align the icon and text in the middle of their container */
}

.faq-answer {
 padding: 20px;
background-color: #FFFFFF;
 display: none; /* Hidden by default */
}

/* For the first FAQ which is visible by default */
[data-status="open"] + .faq-answer {
 display: block;
}


.faq-icon {
 margin-right: 10px;
 color: #F5A800;
 font-size: 30px;
 line-height: 1; /* This can help ensure that the icon's container is only as tall as the icon itself. */
}