.services-card {
   display: none;
   border-radius: 16px;
   background-color: #fff;
   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
   padding: 20px;
}
 .services-card.active {
   display: block;
}
 .services-card__title {
   color: #000;
   font-size: 18px;
   font-weight: 600;
   line-height: 26px;
   letter-spacing: -0.18px;
}
 .services-card__text {
   color: #757575;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: -0.14px;
   margin-top: 12px;
}
 .services-card__row {
   display: grid;
   gap: 16px;
   margin-top: 16px;
}
 .services-card__info-title {
   color: #000;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: -0.14px;
}
 .services-card__info-text {
   color: #000;
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
   letter-spacing: -0.32px;
   margin-top: 4px;
}
 .services-card__tags {
   margin-top: 16px;
   padding-top: 16px;
   border-top: 1px solid #dcdcdc;
}
 .services-card__tags-title {
   color: #000;
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
   letter-spacing: -0.16px;
}
 ul.services-card__tags-list {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 16px;
}
 .services-card__tags-item a.services-card__tags-link, .services-card__tags-item span {
   display: block;
   color: #275894;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   letter-spacing: -0.14px;
   border-radius: 8px;
   background-color: rgba(39, 88, 148, 0.10);
   text-decoration: none;
   padding: 4px 8px;
}
 .services-card__btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   color: #fff;
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
   padding: 12px 24px;
   border-radius: 12px;
   background-color: #000;
   margin-top: 16px;
   transition: 0.3s color, 0.3s background-color;
}
 .services-card__btn svg {
   width: 24px;
   height: 24px;
   fill: #fff;
}
 .services-card__btn:hover {
   background-color: #275894;
}
 @media screen and (min-width: 992px) {
   .services-card {
     padding: 32px;
  }
   .services-card__title {
     font-size: 20px;
     line-height: 28px;
     letter-spacing: -0.4px;
  }
   .services-card__row {
     grid-template-columns: 1fr 1fr;
     margin-top: 24px;
  }
   .services-card__tags {
     margin-top: 24px;
     padding-top: 24px;
  }
   .services-card__btn {
     margin-top: 24px;
  }
}
 
 .services {
   padding: 20px 0;
   background-color: #f9f9f9;
}
 .services__title {
   margin-top: 16px;
}
 .services__grid {
   display: grid;
   gap: 16px;
   margin-top: 20px;
}
 .services__tabs {
   display: flex;
   gap: 16px;
   overflow-y: auto;
   counter-set: count;
}
 .services__tab-item {
   display: flex;
   align-items: center;
   gap: 8px;
   color: #272829;
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
   letter-spacing: -0.16px;
   white-space: nowrap;
   padding: 8px 16px;
   border-radius: 12px;
   counter-increment: count;
   cursor: pointer;
   transition: 0.3s color, 0.3s background-color, 0.3s box-shadow;
}
 .services__tab-item::before {
   content: counter(count,decimal-leading-zero);
   color: #272829;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
   letter-spacing: -0.16px;
   transition: 0.3s color;
}
 .services__tab-item.active {
   color: #fff;
   box-shadow: 0 4px 8px 0 rgba(39, 88, 148, 0.16);
   padding-left: 48px;
   background-color: #275894;
   background-image: url(/wp-content/themes/gas/build/images/icons/icon-arrow-right-alt-1.svg);
   background-size: 24px;
   background-repeat: no-repeat;
   background-position: left 16px center;
}
 .services__tab-item.active::before {
   color: #fff;
}
 @media screen and (min-width: 992px) {
   .services {
     padding: 32px 0;
  }
   .services__title {
     text-align: center;
     margin-top: 24px;
  }
   .services__grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     margin-top: 48px;
  }
   .services__tabs {
     flex-direction: column;
     gap: 16px;
     overflow-y: unset;
     max-width: 400px;
  }
   .services__tab-item {
     gap: 16px;
     font-size: 24px;
     line-height: 32px;
     letter-spacing: -0.48px;
     padding: 12px 24px 12px 64px;
     border-radius: 16px;
  }
   .services__tab-item::before {
     font-size: 24px;
     line-height: 32px;
     letter-spacing: -0.48px;
  }
   .services__tab-item.active {
     padding-left: 64px;
     background-size: 32px;
     background-repeat: no-repeat;
     background-position: left 24px center;
  }
}