.findLookingHeading {
font-family: "acumin-pro-wide", sans-serif;
font-weight: 900;
margin-bottom: 2.5rem;
color: #00B1E7;
}
.servicesWrapper {
display: flex;
gap: 20px;
flex-wrap: wrap;  }
.servicesContainer {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 12px;
box-shadow: 5px 5px 20px 0 rgba(37,24,29,.1);
box-sizing: border-box;
height: fit-content;
width: calc(33.3333333% - 2.5%);
margin: 0 0 0%;
}
.servicesHeading {
padding: 24px 18px;
font-weight: 700;
font-family: "quicksand", sans-serif!important;
margin: 0!important;
}
.servicesOptionsList {
list-style-type: none;
padding: 0 0 18px 0!important;
}
.servicesOptionsList li {
padding-left: 18px!important;
padding-right: 18px!important;
line-height: 40px;
font-family: "quicksand", sans-serif!important;
}
.serviceHref {
color: black!important;
text-decoration: none;
font-weight: 600;
}
.serviceHref:hover {
text-decoration: underline!important;
color: black!important;
}
.serviceHref::after {
content: "";
position: relative;
display: inline-block;
background: url(https://coverme123.com/wp-content/uploads/2023/07/arrowRight.svg) no-repeat center center;
height: 16px;
width: 16px;
background-size: 12px 12px;
vertical-align: middle;
margin: 0 4px;
top: auto;
right: auto;
}
@media (max-width: 767px) {
.findLookingHeading {
font-size: 32px!important;
}
}
@media (max-width: 1027px) {
.servicesContainer {
width: 100%;
}
.servicesHeading {
padding: 16px 18px;
position: relative;
margin-bottom: 0;
}
.servicesOptionsList {
display: none; 
}
.servicesHeading {
cursor: pointer; 
}
.servicesHeading::before {
content: "";
position: absolute;
display: inline-block;
background: url(https://coverme123.com/wp-content/uploads/2023/10/finalX.svg) no-repeat center center;
height: 24px;
width: 24px;
background-size: 18px 18px;
vertical-align: middle;
margin: 0 4px;
top: 24px;
right: 18px;
opacity: 0;
}
.servicesHeading::after {
content: "";
position: absolute;
display: inline-block;
background: url(https://coverme123.com/wp-content/uploads/2023/10/plusBlack.svg) no-repeat center center;
height: 24px;
width: 24px;
background-size: 24px 24px;
vertical-align: middle;
margin: 0 4px;
top: 24px;
right: 18px;
opacity: 1;
}
.serviceHref {
width: 100%;
display: block;
position: relative;
}
.serviceHref::after {
right: 5px;
top: 10px;
position: absolute;
height: 16px;
width: 16px;
background-size: 15px 15px;
}
.servicesOptionsList li {
line-height: 45px;
}
}
.servicesHeading.plus-animate-in::before {
animation-name: plusSpinOut;
animation-delay: 0s;
animation-duration: .5s;
animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.servicesHeading.plus-animate-in::after {
animation-name: plusSpinIn;
animation-delay: 0s;
animation-duration: .5s;
animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
} @keyframes plusSpinIn {
0% {
opacity: 1;
transform: rotate(180deg);
}
to {
opacity: 0;
transform: rotate(360deg);
}
}
@keyframes plusSpinOut {
0% {
opacity: 0;
transform: rotate(360deg);
}
to {
opacity: 1;
transform: rotate(720deg);
}
}
.servicesHeading.plus-animate-out::before {
animation-name: plusComeBack;
animation-delay: 0s;
animation-duration: .5s;
animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.servicesHeading.plus-animate-out::after {
animation-name: xGoAway;
animation-delay: 0s;
animation-duration: .5s;
animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
} @keyframes plusComeBack {
0% {
opacity: 1;
transform: rotate(-180deg);
}
to {
opacity: 0;
transform: rotate(-360deg);
}
}
@keyframes xGoAway {
0% {
opacity: 0;
transform: rotate(-360deg);
}
to {
opacity: 1;
transform: rotate(-720deg);
}
}