// Add your custom code

.title-custom {
    color: #046e6e;
}

.text-center {
    text-align: center;
  }
  
  .text-justify {
    text-align: justify;
  }


  

/* Reduziert den Abstand zwischen den Sections */
section {
    margin-bottom: 0px; /* Anpassung nach Bedarf */
  }
  
  /* Zusätzliche optionale Stile für eine bessere Darstellung */
  #welcome.section, #service.section {
    padding-top: 90px;  /* Anpassung nach Bedarf */
    padding-bottom: 4px; /* Anpassung nach Bedarf */
  }

  .text-justify {
    text-align: justify;
  }
  
  .description {
    font-size: 22px; /* Standard Schriftgröße */
    line-height: 1.5;
    padding-top: 90px;  /* Anpassung nach Bedarf */
    padding-bottom: 1px; /* Anpassung nach Bedarf */
  
    @media (max-width: 768px) {
      font-size: 18px; /* Kleinere Schriftgröße für Tablets */
      padding-top: 70px;  /* Anpassung nach Bedarf */
      padding-bottom: 1px; /* Anpassung nach Bedarf */
    }
  
    @media (max-width: 480px) {
      font-size: 16px; /* Noch kleinere Schriftgröße für Handys */
      padding-top: 50px;  /* Anpassung nach Bedarf */
      padding-bottom: 1px; /* Anpassung nach Bedarf */
    }
  }
  

  .facts .fact-item {
    padding: 15px; /* Abstand um die Bilder */
  }

  

  .facts .fact-item {
    padding: 15px; /* Abstand um die Bilder */
  }
  
  .fact-image {
    height: 250px; /* Einheitliche Höhe für alle Bilder */
    width: auto; /* Breite automatisch anpassen, um das Seitenverhältnis beizubehalten */
    object-fit: contain; /* Bild innerhalb der festgelegten Höhe zuschneiden, um das Seitenverhältnis beizubehalten */
    border-radius: 8px; /* Abgerundete Ecken für die Bilder */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
  }
  
  .custom-background {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }


 
  
  .service-arrow .block {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .service-content {
    flex: 1;
  }
  
  .service-icon {
    margin-right: 15px; /* Abstand nach Bedarf anpassen */
  }
  
  .service-image {
    margin-left: 15px; /* Abstand nach Bedarf anpassen */
  }
  
  .service-image img {
    max-width: 150px; /* Maximale Breite des Bildes anpassen */
    height: auto;
  }


  .bg-service1 {
    background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
  }
  .bg-service2 {
    background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
  }
  .bg-service3 {
    background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
  }
  .bg-service4 {
    background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
  }
  .bg-service5 {
    background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
  }
  .bg-service6 {
    background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
  }
  .bg-service7 {
    background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
  }
  .bg-service8 {
    background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
  }

  .fixed-width {
    width: 1200px; /* Feste Breite, die du anpassen kannst */
    height: auto; /* Höhe wird automatisch angepasst, um das Seitenverhältnis beizubehalten */
  }
  
  .service-arrow .block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px; /* Optional: Padding hinzufügen */
    border-radius: 100px; /* Optional: Abgerundete Ecken hinzufügen */
    color: #8a0909; /* Optional: Textfarbe auf Weiß setzen */
  }
  
  .service-icon {
    margin-right: 0px; /* Abstand nach Bedarf anpassen */
  }
  
  .service-content {
    flex: 1;
  }
  
  .service-image {
    margin-left: 0px; /* Abstand nach Bedarf anpassen */
  }
  

  



  
  .fixed-text {
    width: 600px; /* Feste Breite für den Text */
    margin-right: 15px; /* Optional: Abstand nach Bedarf anpassen */
  }

  .service-image img {
    max-width: 600px; /* Maximale Breite des Bildes anpassen */
    height: auto;
    margin: 0; /* Entfernt zusätzliche Margins */
    padding: 0; /* Entfernt zusätzliches Padding */
    border: none; /* Entfernt jegliche Standardrahmen */
    display: block; /* Verhindert zusätzliche Ränder bei inline-block-Elementen */
  }

  .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-grid {
    display: grid;
    gap: 20px;                 /* 40px Abstand sowohl horizontal als auch vertikal */
    grid-template-columns: repeat(3, 1fr);
    /* => Standard: 3 Spalten für größere Bildschirme */
  }
  
  @media (max-width: 992px) {
    .service-grid {
      grid-template-columns: repeat(2, 1fr);
      /* => mittlere Screens: nur 2 Spalten */
    }
  }
  
  @media (max-width: 576px) {
    .service-grid {
      grid-template-columns: 1fr;
      /* => kleine Screens: 1 Spalte */
    }
  }
  
  /* Ab hier das Zoom-/Overlay-Setup (identisch wie vorher) */
  .service-item-fixed {
    width: 100%;
    height: auto;       /* Oder "auto" falls die Höhe flexibel sein soll */
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Abgerundete Ecken */
  }
  
  .zoom-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.3s ease;
  }
  
  .service-item-fixed:hover .zoom-wrap {
    transform: scale(1.2);
  }
  
  .zoom-wrap a {
    display: block; /* Stellt sicher, dass der Link das gesamte umschlossene Element abdeckt */
    text-decoration: none; /* Entfernt die Unterstreichung des Links */
    color: inherit; /* Erbt die Textfarbe, um sicherzustellen, dass der Linktext stilistisch passt */
  }

  .zoom-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
/* Das "dunkle Overlay" */
.zoom-wrap .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3); /* dunkler Schleier (30% schwarz) */
  z-index: 1; /* Overlay unter dem Text, aber über dem Bild */
  pointer-events: auto; /* Stellt sicher, dass das Overlay klickbar ist */
}

  .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.3em;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 2; /* Höher als das Overlay */
  }
  

  .my-container {
    width: 80%;
    margin: 0 auto;
  }

  .gif-background {
    background-image: url('/images/BackgroundAnimation.svg'); /* Pfad zu Ihrem GIF */
    background-size: cover; /* Deckt den gesamten Hintergrund ab */
    background-position: center -220px; /* Positioniert das GIF oben in der Mitte */
    background-repeat: no-repeat; /* Verhindert die Wiederholung des GIFs */
    position: relative; /* Stellt sicher, dass das Overlay korrekt positioniert wird */
  }
  
  .gif-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8); /* Weißer Overlay mit 70% Deckkraft */
    pointer-events: none; /* Stellt sicher, dass das Overlay keine Interaktionen blockiert */
  }
  
  .custom-image {
  width: 100px;
  height: auto;
  max-width: 70%;
}