AMPERION_Webpage/assets/scss/templates/_service.scss

.service {
  text-align: center;
  padding: 90px 0;

  @include tablet {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .service-item {
    padding-bottom: 30px;

    i {
      font-size: 50px;
      color: $color-primary;
    }

    img.service-icon {
      width: 100px;
      height: 100px;
      display: inline-block;
    }

    h4 {
      padding-top: 15px;
      margin: 0;
      margin-top: 10px;
      font-weight: 500;
      text-transform: uppercase;
    }

    p {
      padding-top: 10px;
      margin: 0;
    }
  }
}

.dark-service {
  .title {
    color: $white;
  }

  .service-item {
    padding-bottom: 30px;
    text-align: center;

    i {
      color: $white;
      font-size: 40px;
      margin-bottom: 10px;
    }

    img.service-icon {
      width: 100px;
      height: 100px;
      display: inline-block;
    }


    h4 {
      color: $white;
      padding-top: 15px;
      margin: 0;
      margin-top: 10px;
      font-weight: 500;
      text-transform: uppercase;
    }

    p {
      padding-top: 10px;
      margin: 0;
    }
  }
}

.service-about {
  p {
    line-height: 28px;
  }
}





.service-arrow {
  .block {
    padding: 70px 30px;

    i {
      font-size: 45px;
    }

    p {
      color: #000000;
    }
  }
}




.service-list {
  .block {
    padding: 30px;
    margin-bottom: 20px;
    background: $white;
  }
}

h2, h3 {
  margin-bottom: 10px; /* Passe den Wert nach Bedarf an */
}

.center-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.responsive-container {
  width: 100%;
  max-width: 100%;
  display: block;
  overflow: hidden;
}

.responsive-image {
  max-width: 100%;
  height: auto;
}

.page-title {
  position: relative;
  padding: 100px 0;
  @extend .overly;

  .block {
    text-align: center;

    h1 {
      color: #5f5c5c; /* Passe die Textfarbe an, um auf dem weißen Hintergrund sichtbar zu sein */
      font-weight: 200;
      letter-spacing: 0.5em;
      margin-top: 20px;
      margin-bottom: -60px;
      text-transform: capitalize;
    }

    p {
      color: #000; /* Passe die Textfarbe an, um auf dem weißen Hintergrund sichtbar zu sein */
    }
  }
}

.page-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* Weiß als Hintergrundfarbe */
  z-index: -1; /* Sicherstellen, dass es hinter dem Inhalt liegt */
}

.service-arrow .block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap; /* Keine Umbrüche, damit die Inhalte nebeneinander bleiben */
}

.service-arrow .service-image {
  flex: 0 0 auto;
  margin-left: 20px;
}

.service-arrow .service-image img {
  max-width: 600px; /* Maximale Breite des Bildes */
  width: 100%; /* Bild soll sich an den Container anpassen */
  height: auto;
  display: block;
}

.service-arrow .service-content {
  flex: 1;
}

@media (max-width: 768px) {
  .service-arrow .block {
    flex-direction: column;
    text-align: center;
  }

  .service-arrow .service-image {
    margin-left: 0;
    margin-top: 20px;
    width: 100%; /* Bild auf volle Breite setzen bei kleinen Bildschirmen */
  }
}


.service-title {
  color: #273544; /* Setze die gewünschte Farbe für die Titel der Dienste */
}

.service-description {
  color: #990505; /* Setze die gewünschte Farbe für die Beschreibungen der Dienste */
}