.service-list {
  position: relative;
  background: var(--color-primary);
  min-height: 980px;
  width: 100%;
  padding-top: 100px;
  gap: 10px; }
  .service-list * {
    z-index: 1; }
  .service-list .title .title-intro {
    gap: 20px; }
    .service-list .title .title-intro h4 {
      color: var(--color-clean);
      text-transform: uppercase; }
    .service-list .title h2 {
      color: var(--color-clean);
      font-weight: bolder;
      letter-spacing: 1px;
      text-transform: uppercase; }
  .service-list .service-list-items-non-desktop {
    display: inherit;
    gap: 20px;
    padding-bottom: 60px; }
    .service-list .service-list-items-non-desktop .service-list-item {
      color: var(--color-font-primary);
      text-decoration: none;
      background: var(--color-item-primary);
      padding: 40px;
      border-radius: 20px;
      width: 100%;
      gap: 30px;
      overflow: hidden;
      flex-grow: 0;
      flex-shrink: 0; }
    .service-list .service-list-items-non-desktop .service-list-item:nth-child(2n) {
      background: var(--color-item-secondary); }
    .service-list .service-list-items-non-desktop .service-list-item .service-list-item-title {
      gap: 10px;
      align-items: center; }
      .service-list .service-list-items-non-desktop .service-list-item .service-list-item-title img {
        width: 20px;
        height: 20px; }
      .service-list .service-list-items-non-desktop .service-list-item .service-list-item-title h2 {
        flex: 1;
        text-transform: uppercase;
        font-weight: bolder;
        margin: 0;
        font-size: 16px; }
    .service-list .service-list-items-non-desktop .service-list-item p {
      margin: 0;
      font-size: 14px;
      text-align: justify;
      flex: 1;
      text-overflow: ellipsis;
      overflow: hidden; }
  .service-list .service-list-items-desktop {
    display: none;
    gap: 25px;
    width: fit-content;
    max-width: 100%;
    padding: 0 50px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Enable smooth scrolling on touch devices */
    scrollbar-width: none;
    /* Hide scrollbar in Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbar in Internet Explorer 10+ */ }
    .service-list .service-list-items-desktop::-webkit-scrollbar {
      display: none;
      /* Hide scrollbar */ }
    .service-list .service-list-items-desktop .service-list-item {
      background: var(--color-item-primary);
      padding: 40px;
      border-radius: 20px;
      width: 400px;
      height: 400px;
      gap: 30px;
      overflow: hidden;
      flex-grow: 0;
      flex-shrink: 0; }
    .service-list .service-list-items-desktop .service-list-item:nth-child(2n) {
      background: var(--color-item-secondary); }
    .service-list .service-list-items-desktop .service-list-item img {
      width: 60px;
      height: 60px; }
    .service-list .service-list-items-desktop .service-list-item h2 {
      text-transform: uppercase;
      font-weight: bolder;
      margin: 0; }
    .service-list .service-list-items-desktop .service-list-item p {
      margin: 0;
      font-size: 14px;
      text-align: justify;
      flex: 1;
      text-overflow: ellipsis;
      overflow: hidden; }
    .service-list .service-list-items-desktop .service-list-item.open {
      height: 500px; }
  .service-list .background {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    justify-content: space-evenly;
    z-index: 0; }
    .service-list .background span {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: var(--background-font-size);
      user-select: none;
      color: #002644; }