/* Global Variables and Styles from styleguide.css */
:root {
  --body-text-font-family: "Poppins", Helvetica, sans-serif;
  --body-text-font-weight: 500;
  --body-text-font-size: 19px;
  --body-text-letter-spacing: 0px;
  --body-text-line-height: 150%;
  --body-text-font-style: normal;
  --small-text-font-family: "Poppins", Helvetica, sans-serif;
  --small-text-font-weight: 500;
  --small-text-font-size: 16px;
  --small-text-letter-spacing: 0px;
  --small-text-line-height: 150%;
  --small-text-font-style: normal;
  --subheading-font-family: "Poppins", Helvetica, sans-serif;
  --subheading-font-weight: 400;
  --subheading-font-size: 24px;
  --subheading-letter-spacing: 0px;
  --subheading-line-height: 150%;
  --subheading-font-style: normal;
  --button-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --variable-collection-spacing-s: 24px;
  --variable-collection-spacing-m: 48px;
}

/* Existing Styles in style2.css */
body {
  background-color: #E6E6E6; /* Setzt den Hintergrund für die gesamte Seite auf Grau */
  height: 100%; /* Stellt sicher, dass der Hintergrund die ganze Seite bedeckt */
  max-width: 100%; /* Bedeckt die volle Breite der Seite */
  font-family: var(--body-text-font-family); /* Schriftart auf Poppins geändert */
}

.INF {
  background-color: grey;
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 100%;  
  
}




.INF .div {
  
  overflow: hidden;
  width: 100%;

}

.INF .overlap {
  position: absolute;
  width: 100%;
  height: 848px; /*oder % */
  top: 141px;
  left: 0;
}

.INF .rectangle {
    overflow-x: hidden;
  position: absolute;
  width: 100%;
  height: 1oopx;
  top: 625px;
  
}

.INF .adobestock {
  position: static;
  width: 100%;
  height: calc(100% - 248px);
  left: 0;
  object-fit: cover;
}

.INF .white-rectangle {
    position: absolute;
    width: 100%;
    height: 110px;
    top: 600px;
    left: 0;
    background-color: #355518;
    z-index: -1; /* Ensures the rectangle is behind the text elements */
}

.INF .text-wrapper {
    position: absolute;
    width: 610px;
    height: 391px;
    top: 135px;
    left: 42px;
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 50px;
    letter-spacing: 0;
    line-height: 65px;
}

.INF .p {
    width: 514px;
    top: 300px;
    left: 42px;
    font-family: "Poppins-Medium", Helvetica;
    font-weight: 500;
    color: #ffffff;
    font-size: 22px;
    line-height: 30px;
    position: absolute;
    letter-spacing: 0;
}

.INF .element-kunden {
    position: absolute;
    width: 100px;
    height: 73px;
    top: 580px;
    left: 20%;
    font-family: "Poppins-Medium", Helvetica;
    font-weight: 500;
    color: transparent;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 45px;
}

.INF .span {
    color: white;
}

.INF .text-wrapper-2 {
    color: WHITE;
    font-size: 21px;
    line-height: 31.5px;
}

.INF .element-mitarbeiter {
    position: absolute;
    width: 100px;
    height: 73px;
    top: 580px;
    left: 47%;
    font-family: "Poppins-Medium", Helvetica;
    font-weight: 500;
    color: transparent;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 45px;
}

.INF .text-wrapper-3 {
    color: WHITE;
}

.INF .element-zufriedenheit {
    position: absolute;
    width: 100px;
    height: 73px;
    top: 580px;
    left: 75%;
    font-family: "Poppins-Medium", Helvetica;
    font-weight: 500;
    color: transparent;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 45px;
}



.navigation {
    width: 100vw; /* Vollbild-Breite */
    display: flex; /* Verwende Flexbox für die Navigation */
    justify-content: center; /* Zentriert das Logo horizontal */
    align-items: center; /* Zentriert das Logo vertikal */
    height:17%; /* Höhe der Navigationsleiste */
    background-color: white; /* Hintergrundfarbe der Navigation */
    position: fixed; /* Fixiert die Navigation beim Scrollen */
    top: 0; /* Am oberen Rand fixieren */
    left: 0; /* Links anfangen */
    right: 0; /* Rechts enden */
    margin: 0; /* Kein Außenabstand */
    padding: 0; /* Kein Innenabstand */
    z-index: 1000; /* Höherer Z-Index, um die Navigation über anderen Inhalten zu halten */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: ein leichter Schatten unter der Navigation */
}

.INF .infinity-logo {
    width: 310px; /* Breite des Logos */
    max-height: 170px; /* Maximale Höhe des Logos, damit es nicht zu groß wird */
    object-fit: contain; /* Stellt sicher, dass das Logo nicht verzerrt wird */
}

.INF .text-wrapper-5 {
  position: absolute;
  height: 30px;
  top: 65px;
  left: 59px;
  font-family: var(--body-text-font-family);
  font-weight: var(--body-text-font-weight);
  color: #000000;
  font-size: var(--body-text-font-size);
  letter-spacing: var(--body-text-letter-spacing);
  line-height: var(--body-text-line-height);
  white-space: nowrap;
  font-style: var(--body-text-font-style);
}

.INF .text-wrapper-6 {
  position: absolute;
  height: 30px;
  top: 65px;
  left: 194px;
  font-family: var(--body-text-font-family);
  font-weight: var(--body-text-font-weight);
  color: #000000;
  font-size: var(--body-text-font-size);
  letter-spacing: var(--body-text-letter-spacing);
  line-height: var(--body-text-line-height);
  white-space: nowrap;
  font-style: var(--body-text-font-style);
}

.INF .items {
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: flex-end;
  gap: var(--variable-collection-spacing-m);
  position: absolute;
  top: 57px;
  right: 0;
  padding-right: 120px; /* Abstand des Containers vom rechten Rand */
}

.INF .button {
  all: unset; /* Entfernt alle Standardstile */
  box-sizing: border-box;
  display: inline-flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -2px;
  margin-bottom: -2px;
  background-color: #355518;
  border-radius: 8px;
  box-shadow: var(--button-shadow);
  margin-right: -60px; /* Verschiebt den Button weiter nach links */
  cursor: pointer; /* Zeigt an, dass der Button klickbar ist */
  color: white; /* Stellt sicher, dass der Text sichtbar ist */
  text-align: center; /* Zentriert den Text */
  text-decoration: none; /* Entfernt Unterstreichungen von Links */
}

.INF .text-wrapper-7 {
  position: relative;
  width: fit-content;
  margin-top: -6px;
  margin-bottom: -4px;
  font-family: var(--small-text-font-family);
  font-weight: var(--small-text-font-weight);
  color: #ffffff;
  font-size: var(--small-text-font-size);
  letter-spacing: var(--small-text-letter-spacing);
  line-height: var(--small-text-line-height);
  white-space: nowrap;
  font-style: var(--small-text-font-style);
}

.bild-container {
    display: flex;
    justify-content: space-between; /* Verteilt die Elemente gleichmäßig */
    align-items: flex-start;
    gap: 35px; /* Abstand zwischen den beiden Bild-Boxen */
    width: calc(1165px + 35px); /* Gesamtbreite der Boxen plus Gap */
    margin: 0 auto; /* Zentriert den Container horizontal */
    position: absolute; /* Positioniert den Container absolut */
    top: 950px; /* Startpunkt auf der Y-Achse */
    left: 50%; /* Zentriert den Container horizontal */
    transform: translateX(-50%); /* Korrigiert die Zentrierung */
}

.INF .bild-aktie-mit,
.INF .bild-sinagpur-mit {
    width: 600px; /* Jeweils die Hälfte der Gesamtbreite */
    position: relative;
     background-color: transparent;
}

.INF .overlap-2,
.INF .overlap-3 {
    position: relative;
    width: 100%; /* Füllt die gesamte Breite des Elternelements */
    height: auto;
}

.INF .image-bank,
.INF .imagoh-wrapper {
    width: 100%; /* Füllt die gesamte Breite des Elternelements */
    height: 341px; /* Höhe beibehalten */
    background-size: cover;
    background-position: 50% 50%;
}

.INF .imagoh {
    width: 100%; /* Füllt die gesamte Breite des Elternelements */
    height: 341px; /* Höhe beibehalten */
    object-fit: cover;
}

.INF .rectangle-2 {
    width: 100%; /* Füllt die gesamte Breite des Elternelements */
    height: 300px; /* Höhe automatisch an den Inhalt anpassen */
    background-color: #ffffff;
    padding: 20px; /* Padding innerhalb der Box */
    box-sizing: border-box; /* Padding und Border in die Breite und Höhe einbeziehen */
}

.INF .text-wrapper-8,
.INF .text-wrapper-9 {
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #2c2929;
    font-size: 30px;
    line-height: 42px;
    margin: 0 0 30px 0; /* Abstand nach unten */
    padding-left: 12px;
}

.INF .paragraph,
.INF .paragraph-2 {
    font-family: var(--body-text-font-family);
    font-weight: var(--body-text-font-weight);
    color: #000000;
    font-size: var(--body-text-font-size);
    line-height: var(--body-text-line-height);
    font-style: var(--body-text-font-style);
    margin: 0; /* Kein äußerer Abstand */
    width: 90%;
        padding-left: 12px;
}
/* Bild quer */
.INF .bild-quer-element {
  position: absolute;
  width: 1200px;
  height: 470px;
  top: 1650px; /* Beibehaltung der Y-Position */
  left: 50%; /* Zentriert das Element horizontal */
  transform: translateX(-50%); /* Zentriert das Element horizontal */
  display: flex;
  justify-content: space-between;
  background-color: white;
  box-sizing: border-box; /* Dies sorgt dafür, dass die Padding-Werte zur Gesamtgröße hinzukommen */
}

.INF .pexels-essow-k-wrapper {
  position: relative;
  width: 50%; /* Breite des Bildcontainers auf 50% gesetzt */
  height: 470px;
  background-size: cover;
  background-position: center;
  order: 2; /* Positioniert das Bild rechts */
}

.INF .pexels-essow-k {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.INF .text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  order: 1; /* Positioniert den Text links */
  width: 50%; /* Breite des Textcontainers auf 50% gesetzt */
  padding: 20px; /* Innenabstand */
  box-sizing: border-box; /* Dies sorgt dafür, dass die Padding-Werte zur Gesamtgröße hinzukommen */
}

.INF .text-wrapper-10 {
  width: 85%; /* Breite des Textcontainers */
  font-family: var(--body-text-font-family);
  font-weight: var(--body-text-font-weight);
  color: #000000;
  font-size: var(--body-text-font-size);
  letter-spacing: var(--body-text-letter-spacing);
  line-height: var(--body-text-line-height);
  font-style: var(--body-text-font-style);
  margin-bottom: 25px; /* Abstand zwischen den Texten */
        padding-left: 12px;
}

.INF .text-wrapper-11 {
  height: 42px;
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: #2c2929;
  font-size: 30px;
  letter-spacing: 0;
  line-height: 42px;
  white-space: nowrap;
        padding-left: 12px;
}
.INF .navigation-footer {
  position: absolute;/* Changed from absolute to relative */
  width: 100%;
  height: 264px;
  top: 2250px;
  left: 0;
    background-color: #355518;
  z-index: -1; /* Ensures the footer is behind other elements */

}



.INF .text-wrapper-12 {
  position: absolute;
  top: 50px;
  left: 55%;
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: white;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;

}

.INF .e-mail-info {
    
  position: absolute;
  width: 269px;
  height: 23px;
  top: 80px;
  left: 55%;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: white;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 22.5px;
}

.INF .text-wrapper-13 {
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: white;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 22.5px;
}
.INF .e-mail-info a {
  color: inherit; /* Übernimmt die Farbe des Elternelements */
  text-decoration: none; /* Entfernt die Unterstreichung */
}


.INF .text-wrapper-15 {
  position: absolute;
  width: 269px;
  height: 23px;
  top: 144px;
  left: 55%;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: white;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 22.5px;
}

.INF .text-wrapper-16 {
  position: absolute;
  width: 269px;
  height: 23px;
  top: 187px;
  left: 55%;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: white;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 22.5px;
}

.INF .info-container {
  position: absolute;
  top: 48px;
  left: 87%;
  transform: translateX(-70%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--variable-collection-spacing-s);
    width: 250px
}

.INF .text-wrapper-17 {
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: white;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
}

.INF .text-wrapper-18 {
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: white;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 22.5px;
}

.INF .text-wrapper-19 {
  height: 36px;
  top: 51px;
  left: 80px;
  font-family: var(--subheading-font-family);
  font-weight: var(--subheading-font-weight);
  color: white;
  font-size: var(--subheading-font-size);
  line-height: var(--subheading-line-height);
  white-space: nowrap;
  position: absolute;
  letter-spacing: var(--subheading-letter-spacing);
  font-style: var(--subheading-font-style);
}

.INF .pirnaer-stra-e {
  position: absolute;
  width: 175px;
  height: 57px;
  top: 125px;
  left: 80px;
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: white;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
}

.INF .text-wrapper-20 {
  position: absolute;
  width: 289px;
  height: 8px;
  top: 185px;
  left: 79px;
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: white;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 10.5px;
  white-space: nowrap;
}

/* Media Queries for different screen sizes */
@media (max-width: 1200px) {
    
  
  
    
    
  .INF .text-wrapper-5,
    .INF .text-wrapper-6,
    .INF .text-wrapper-7{
        font-size: 1.7vw;
    }
    
    
    
   .navigation {
    width: 100%; /* Vollbreite */
    display: flex; /* Flexbox für die Ausrichtung */
    justify-content: center; /* Horizontales Zentrieren */
    align-items: center; /* Vertikales Zentrieren */
    background-color: white; /* Grüner Hintergrund */
    position: fixed; /* Fixiert die Navigation beim Scrollen */
    top: 0; /* Am oberen Rand fixieren */
    height: 141px; /* Dynamische Höhe abhängig von der Viewport-Höhe */
    z-index: 1000; /* Höherer Z-Index, um die Navigation über den anderen Inhalten zu halten */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Schatten unter der Navigation */
}

/* Logo in der Navigation */
.INF .infinity-logo {
    width: 25vw; /* Setze die Breite des Logos auf 30% der Navigation */
    height: auto; /* Automatische Höhe proportional zur Breite */
    object-fit: contain; /* Stellt sicher, dass das Bild proportional bleibt */
}
    
      .navigation-footer{
    display: none; /* Versteckt bei größeren Bildschirmen */
  }
    .INF .green-footer {
    width: 100%; /* Vollbreite des Bildschirms */
    height: 21vw; /* Höhe von 800px */
    background-color: #355518; /* Grüner Hintergrund */
    display: flex;
    align-items: flex-start; /* Elemente am linken Rand ausrichten */
    flex-direction: row; /* Anordnung der Textfelder untereinander */
    justify-content: space-between; /* Verteilung der Textfelder */
    position: absolute; /* Position relativ zu anderen Elementen */
    bottom: 0; /* Footer am unteren Ende platzieren */
    top: 2325px; /* Y-Position des Footers festlegen */
    margin: -10px; /* Entfernt jegliche Außenabstände */
      /* Entfernt jegliche Innenabstände */
  }

 .text-box {
    color: white; /* Weißer Text */
    font-family: "Poppins", Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    padding-left: 20px;
     padding-top: 20px;
     padding: 20px;/* Abstand von 20px zum linken Rand */
    width: 80%; /* Textbox nimmt die volle Breite ein */
  }
    .INF .bild-quer-element {
  position: absolute;
  width: 95%;

  top: 1650px; /* Beibehaltung der Y-Position */
  left: 50%; /* Zentriert das Element horizontal */
  transform: translateX(-50%); /* Zentriert das Element horizontal */
  display: flex;
  justify-content: space-between;
  background-color: white;
  box-sizing: border-box; /* Dies sorgt dafür, dass die Padding-Werte zur Gesamtgröße hinzukommen */
}
    .bild-container {
    display: flex;
    justify-content: space-between; /* Verteilt die Elemente gleichmäßig */
    align-items: flex-start;
    gap: 35px; /* Abstand zwischen den beiden Bild-Boxen */
    width: 95%; /* Gesamtbreite der Boxen plus Gap */
    margin: 0 auto; /* Zentriert den Container horizontal */
    position: absolute; /* Positioniert den Container absolut */
    top: 950px; /* Startpunkt auf der Y-Achse */
    left: 50%; /* Zentriert den Container horizontal */
    transform: translateX(-50%); /* Korrigiert die Zentrierung */
    
}
  
  .INF .text-wrapper-8,
  .INF .text-wrapper-9,
 .INF .text-wrapper-11{
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Poppins Medium */
    text-align: left; /* Textinhalt linksbündig */
    font-size: 1.7vw; /* Schriftgröße für mobile Bildschirme */
    margin: 0; /* Kein zusätzlicher Außenabstand */
  }
  .INF .paragraph,
  .INF .paragraph-2,
    .INF .text-wrapper-10{
    font-family: 'Poppins', sans-serif;
    font-weight: 300; /* Poppins Light */
    text-align: left; /* Textinhalt linksbündig */
    font-size: 1.6vw; /* Schriftgröße für mobile Bildschirme */
    margin: 0; /* Kein zusätzlicher Außenabstand */
  }

.INF .text-wrapper {
    position: absolute;
    width: 450px;
    height: 391px;
    top: 135px;
    left: 42px;
    font-family: "Poppins-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 35px;
    letter-spacing: 0;
    line-height: 45px;
}

.INF .p {
    width: 400px;
    top: 250px;
    left: 42px;
    font-family: "Poppins-Medium", Helvetica;
    font-weight: 500;
    color: #ffffff;
    font-size: 20px;
    line-height: 30px;
    position: absolute;
    letter-spacing: 0;
}}

@media (min-width: 1200px) {
  .INF .extra-sinagpur,
   .INF .green-footer,
    .INF .lecker{
    display: none; /* Versteckt bei größeren Bildschirmen */
  }
}

@media (max-width: 480px) {

  /* Allgemeine Anpassungen für die mobile Ansicht */
  body {
    background-color:whitesmoke;
  }

 

  /* Anpassung der Navigation */
  .navigation {
      display: flex;
      justify-content: center; /* Horizontales Zentrieren */
      align-items: center; /* Vertikales Zentrieren */
      height: 80px; /* Höhe der Navigationsleiste */
  }

  .INF .infinity-logo {
      position: relative; /* Position relativ zur Navigation */
      width: 200px; /* Kleinere Breite für mobile Geräte */
      height: auto; /* Automatische Höhe */
     left:28%;
      top: 40%; /* Vertikal zentrieren */
      transform: translate(-50%, -50%); /* Horizontal und vertikal zentriert */
      /* Zentrierung verhindern */
  }
  /*.INF .items {
    position: absolute;
    top: 30px; 
    left: 78%; 
    transform: translateX(-50%); 
  }*/

  .INF .overlap {
    height: 600px;
  }
    .INF .overlap-3{
   background-color: white;
        height:530px;
    }
     .INF .overlap-2{
   background-color: white;
    }

  .INF .overlap-group {
    position: relative;
    width: 5px;
    height: 5px;
  }



  

  /* Anpassung von Text und Bildern */
  .INF .text-wrapper {
    width: 300px;
    color: black;
    font-size: 24px; /* 20% kleinere Schriftgröße */
    line-height: 28px;
    top: -50px;
      left: 25px;
  }

  .INF .p {
    color: black;
    font-size: 16px; /* 20% kleinere Schriftgröße */
    line-height: normal;
    top: 20px;
    width: 300px;
      left: 25px;
  }
   .INF .rectangle-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Links ausrichten */
    text-align: left; /* Textinhalt linksbündig */
    padding-left: 5px;
    padding-top: 1px;/* Abstand von 225px vom linken Rand */
    padding-right: 20px; /* Rechts kann ein kleineres Padding bleiben */
    height: auto; /* Automatische Höhe für den Textinhalt */
  }
    
    .INF .rectangle-22 {
    width: 100%; /* Same as .rectangle-2 */
    height: 300px; /* Same height as .rectangle-2 */
    background-color: #ffffff; /* Same background color */
    padding: 20px; /* Padding similar to .rectangle-2 */
    box-sizing: border-box; /* Ensure padding and border are included in element's dimensions */
}



    .INF .text-wrapper-5,
    .INF .text-wrapper-6,
     .INF .text-wrapper-7,
    .INF .adobestock,
    .INF .white-rectangle,
    .INF .stats-container,
    .INF .bild-quer-element,
    .INF .items,
    .INF .navigation-footer
   
    /* Verstecken der Kontakt-Schaltfläche und weiterer Elemente */ {
    display: none;
  }

  /* Anpassungen der Bildcontainer und -elemente */
  .bild-container {
    flex-direction: column;
    width: 90%; /* Anpassung der Breite für mobile Ansicht */
    max-width: 90%; /* Sicherstellung, dass es nicht zu breit ist */
    margin: 800px auto 0px auto; /* Beginnt bei 600px von oben und Abstand nach unten */
 
    top: -200px;
  }

  .INF .bild-aktie-mit,
  .INF .bild-sinagpur-mit {
    width: 100%; /* 10% größere Bilder */
     
  /* Abstand von 50px zwischen den Bildern */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
      
  }

  .INF .image-bank,
  .INF .imagoh-wrapper {
    height: auto; /* Automatische Anpassung der Höhe */
    width: 100%;
      
      
  }

  .INF .text-container,
  .INF .pexels-essow-k-wrapper {
    width: 90%; /* Vollbreite für Text- und Bildcontainer */
    margin: 0 auto; /* Zentrierung der Container */
    display: flex;
    flex-direction: column;
    font-size: 20px%;
      
  }
      
   
 
  .INF .text-wrapper-11 {
    font-size: 17px;
      text-align: left;
        background-color: white;
  }



  .INF .text-wrapper-10 {
    font-size: 13px;
      text-align: left;
      margin-top: -25px;
        background-color: white;
      height:133px;
  }
  .INF .text-wrapper-8,
  .INF .text-wrapper-9 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Poppins Medium */
    text-align: left; /* Textinhalt linksbündig */
    font-size: 15px; /* Schriftgröße für mobile Bildschirme */
    margin: 0; /* Kein zusätzlicher Außenabstand */
  }
  .INF .paragraph,
  .INF .paragraph-2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 300; /* Poppins Light */
    text-align: left; /* Textinhalt linksbündig */
    font-size: 13px; /* Schriftgröße für mobile Bildschirme */
    margin: 0; /* Kein zusätzlicher Außenabstand */
  }
   
    .INF .green-box {
  width: 100%;  /* 100% wide */
  height: 100px;  /* 100px high */
  background-color: whitesmoke;  /* Green background */
  display: flex;  /* Flexbox to align buttons */
  justify-content: space-evenly;  /* Evenly distribute buttons */
  align-items: center;  /* Center buttons vertically */
  margin-top: 340px; /* Space above the box */
}

/* Buttons inside the green box */
.INF .green-box button {
  width: 42%;  /* Each button takes up 45% of the width */
  height: 40px;  /* Button height */
  background-color: #355518;  /* White background for buttons */
  color: white;  /* Button text color */
  border: none;  /* Remove border */
   border-radius: 3px; 
  cursor: pointer;  /* Pointer on hover */
  font-family: "Poppins", sans-serif;  /* Consistent font */
  font-size: 16px;  /* Text size */
  font-weight: 500;  /* Medium weight text */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: background-color 0.3s ease;
}

.INF .green-box button:hover {
  background-color: #355518;  /* Darker green on hover */
  color: white;  /* White text on hover */
}
   .INF .green-footer {
    width: 100%; /* Vollbreite des Bildschirms */
    height: 375px; /* Höhe von 800px */
    background-color: #355518; /* Grüner Hintergrund */
    display: flex;
    align-items: flex-start; /* Elemente am linken Rand ausrichten */
    flex-direction: column; /* Anordnung der Textfelder untereinander */
    justify-content: space-between; /* Verteilung der Textfelder */
    position: absolute; /* Position relativ zu anderen Elementen */
    bottom: 0; /* Footer am unteren Ende platzieren */
    top: 2325px; /* Y-Position des Footers festlegen */
    margin: -10px; /* Entfernt jegliche Außenabstände */
      /* Entfernt jegliche Innenabstände */
  }

 .text-box {
    color: white; /* Weißer Text */
    font-family: "Poppins", Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    padding-left: 20px;
     padding-top: 20px;
     padding: 20px;/* Abstand von 20px zum linken Rand */
    width: 80%; /* Textbox nimmt die volle Breite ein */
  }
   .INF .lecker {
    height: 200px; /* Höhe des Bildes */
    width: 90%; /* 90% der Breite */
    position: absolute; /* Absolute Positionierung */
    left: 50%; /* Horizontal in der Mitte des Containers */
    transform: translateX(-50%); /* Verschiebt das Bild um 50% seiner Breite nach links, um es zu zentrieren */
    top: 125px; /* Vertikale Positionierung je nach Layout */
    object-fit: cover; /* Füllt den Container aus */
    display: block; /* Block-Element für korrekte Zentrierung */
      
}
    

    
}
@media (min-width: 480px) {
  .INF .extra-sinagpur,
   .INF .green-box,
  
    
    
   
    .INF .lecker{
    display: none; /* Versteckt bei größeren Bildschirmen */
  }
}