.our-services {
  --color-background: rgba(32, 40, 45, 1);
  --color-foreground: rgba(255, 255, 255, 1);
  --color-foreground-heading: rgba(255, 255, 255, 1);
  --color-foreground-subheading: rgba(242, 242, 242, 1);
  --color-background-subheading: rgba(255, 255, 255, 0);
  --color-border-subheading-bg: rgba(255, 255, 255, 0.3);
  --color-secondary-button-hover-border: rgba(255, 255, 255, 0.3);
  background: var(--color-background);
  overflow: hidden;
}

.our-services-2 {
  --color-background: rgba(228, 226, 239, 0);
  --color-foreground: rgba(28, 37, 57, 1);
  --color-foreground-heading: rgba(28, 37, 57, 1);
  --color-foreground-subheading: rgba(93, 102, 111, 1);
  --color-background-subheading: rgba(255, 255, 255, 0.1);
  --color-border-subheading-bg: rgba(32, 40, 45, 0.1);
}

.our-services-2 .multicolumn .multicolumn-card:not(:focus):not(:hover) {
  --color-background: rgba(242,242,242,1);
}

.our-services .service-list {
  --color-background: rgba(62, 72, 78, 1);
  --color-primary-button-background: rgb(255, 255, 255, 0);
  --color-primary-button-border: rgba(255, 255, 255, 1);
  background: var(--color-background);
  padding: 40px 36px;
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
}

.our-services .service-content-inner .button {
  padding: 10px;
  min-height: 44px;
  font-size: 16px;
  margin-block-start: 80px;
}

.our-services .service-content-inner .heading {
  margin-block-start: 50px;
}

.our-services .service-content-inner .heading + .text {
  margin-block-start: 24px;
}

.service-list .accordion-li {
  position: relative;
  display: flex;
  overflow: hidden;
}

.service-list .accordion-li svg {
  --size: 70px;
  width: var(--size);
  min-width: var(--size);
  height: var(--size);
}

.service-list .accordion-li .icon {
  --size: 44px;
  color: var(--color-foreground);
  width: var(--size);
  min-width: var(--size);
  height: var(--size);
}

.service-list .accordion-li .accordion-title-icon,
.service-list .accordion-li .accordion-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.service-list .accordion-content {
  --padding: 36px;
  padding: 0 var(--padding);
}

.service-list .accordion-li .icon + .icon {
  display: none;
}

@media (min-width: 992px) {
  .service-list .service-content-inner {
    max-width: 360px;
    min-width: 360px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .service-list .accordion-content {
    height: 100%;
    max-height: unset;
  }

  .our-services .accordion-li {
    flex-direction: row;
  }

  .our-services .service-list {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .service-list .accordion-li .accordion-title-icon,
  .service-list .accordion-li .accordion-title {
    gap: 20px;
    padding: 0 50px;
    flex-direction: column;
    height: 100%;
  }

  .service-list .accordion-li .accordion-title-icon {
    padding: 0;
    justify-content: space-between;
  }

  .service-list .accordion-li:first-child .accordion-title {
    padding-inline-start: 0;
  }

  .service-list .accordion-li:last-child .accordion-title {
    padding-inline-end: 0;
  }

  .service-list .accordion-li.active .accordion-title {
    display: none;
  }

  // .service-list .accordion-li .accordion-title-wrap {
  //   width: 100%;
  //   overflow: hidden;
  //   transition: width 0.3s ease;
  // }

  // .service-list .accordion-li.active .accordion-title-wrap {
  //   width: 0;
  // }

  .service-list .accordion-li:not(:first-child) {
    border-left: var(--style-border-width) solid var(--color-border);
  }

  .service-list .accordion-li:first-child .accordion-content {
    padding-inline-start: 0;
  }

  .service-list .accordion-li:last-child .accordion-content {
    padding-inline-end: 0;
  }

  .service-list .text-rotate {
    text-orientation: mixed;
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    max-height: 240px;
  }
}

@media (max-width: 991px) {
  .service-list .accordion-li {
    width: 100%;
  }

  .service-list .accordion-content {
    --padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
  }

  .service-list .accordion-li.active .icon {
    display: none;
  }

  .service-list .accordion-li.active .icon + .icon {
    display: block;
  }

  .service-list .accordion-li svg {
    --size: 60px;
  }

  .service-list .accordion-li .icon {
    --size: 36px;
  }

  .our-services .service-content-inner .button {
    margin-block-start: 35px;
  }

  .our-services .service-content-inner svg,
  .our-services .service-content-inner .heading {
    display: none;
  }

  .service-list .accordion-li {
    --padding: 24px;
  }

  .service-list .accordion-li .accordion-title {
    --padding: 24px;
    padding: var(--padding) 0;
    border-top: var(--style-border-width) solid var(--color-border);
  }

  .service-list .accordion-li:first-child .accordion-title {
    padding-block-start: 0;
    border-top: none;
  }

  .service-content-inner {
    --padding: 24px;
    padding-block-end: var(--padding);
  }

  .our-services .service-content-inner .heading + .text {
    margin-block-start: 0;
  }

  .our-services .service-list {
    padding-block-end: 12px;
  }
}

@media (max-width: 767px) {
  .our-services .service-list {
    padding: 30px 15px;
  }

  .service-list .accordion-li svg {
    --size: 50px;
  }

  .service-list .accordion-li .icon {
    --size: 30px;
  }

  .our-services .accordion-title-icon .heading {
    font-size: 20px;
  }

  .our-services .service-list {
    padding-block-end: 6px;
  }
}
