/* General styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f7f7f7;
  display: flex;
  flex-direction: column; /* Ensure children stack vertically */
  align-items: center;    /* Centers vertically */
  overflow: auto;
  padding-top: 65px;
  padding-bottom: 50px;
}


/* Navbar styling */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 18px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  z-index: 1000;
  width: 100vw;
  overflow-x: hidden;
}

.navbar-links {
  display: flex;
  gap: 20px;
}

.navbar a {
  color: #151515;
  text-decoration: none;
  font-size: 25px;
  font-weight: bold;
  transition: transform 0.6s ease;
}

.navbar a:hover {
  color: #007bff;
  transform: scale(0.9, 1.2);
}

.burger-menu {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .navbar {
      flex-direction: column;
      align-items: flex-start;
      background-color: transparent;
  }

  .burger-menu {
      display: block;
      margin-bottom: 8px;
      background-color: #9aff00;
      padding-left: 6px;
      padding-right: 6px;
      padding-bottom: 3px;
      border-radius: 8px;
  }

  .navbar-links {
      display: none;
      flex-direction: column;
      gap: 10px;
      background-color: rgba(0, 229, 255, 1);
      padding: 10px;
      border-radius: 8px;
  }

  .navbar-links.active {
      display: flex;
  }

  .navbar a {
      font-size: 24px;
  }
}
  
  .menu-text {
    display: none; /* Hide by default */
}

@media (max-width: 768px) {

    .menu-text {
        display: inline-block; /* Show the menu text in mobile */
        position: absolute; /* Position it independently */
        left: 60px; /* Center horizontally */
        font-size: 25px; /* Adjust font size for mobile */
        font-weight: bold;
        color: #151515; /* Match the navbar text color */
        background-color: #f7f7f7;
        padding: 3px;
        border-radius: 10px;
        z-index: -1;
    }

}

/* Styling for title image */
.titleimage {
  margin-top: 80px; /* Spacing between title and slider */
  text-align: center; /* Center align the title */
}

.item-title {
  width: 90%; /* Ensures the image is responsive */
  max-width: 800px; /* Maintain aspect ratio */
}

.main-paragraph {
  text-align: left;
  margin-top: 30px;
  width: 90%;
}

.image-description {
  text-align: right; /* Aligns the text to the right */
  margin-top: 5px; /* Adds space between the image and description */
  font-size: 14px;
  color: #555; /* Optional: Changes the text color */
}

.main-paragraph p {
  font-size: 16px; /* Adjust the font size */
  line-height: 1.5; /* Improves readability */
  color: #151515; /* Match the navbar text color */
  max-width: 800px; /* Limits the paragraph width for better legibility */
  margin: 0 auto; /* Centers the paragraph */
}

.mainimage {
  text-align: left; /* Center align the title */
  width: 90%;
  max-width: 800px; /* Matches the max width of the image */
  position: relative;
  margin-bottom: 30px;
  margin-top: 30px;
}

.mainimage-content {
  width: 100%; /* Ensures the image spans the full width of the container */
  max-width: 800px; /* Prevents the image from exceeding 800px */
  height: auto;
}

/* Adjust for mobile screens */
@media (max-width: 768px) {
  .titleimage {
    margin-top: 10px; /* Spacing between title and slider */
  }

  .main-paragraph {
    margin: 10px 0; /* Adds spacing above and below the paragraph */
  }

  .main-paragraph p {
    font-size: 14px; /* Adjust the font size */
  }
}

.content-container {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center content vertically */
  width: 90%;
  max-width: 1000px; /* Optional: restrict maximum width */
  margin: 0 auto; /* Center the container */
  gap: 20px; /* Add space between the text and slider */
  margin-top: 50px;
}

.text-block {
  box-sizing: border-box; /* Ensure padding doesn't affect width */
}

.text-block h2 {
  font-size: 24px;
  margin-bottom: 15px; /* Spacing below heading */
}

.slider-container {
  max-width: 500px;
  position: relative;
  /* Maintain current styles for slider */
}

/* Slider */
.slider {
  position: relative;
  overflow: hidden; /* Verhindert, dass Bilder außerhalb sichtbar sind */
  width: 100%;
  height: auto;
}

/* Slides */
.slides {
  display: flex;
  transition: transform 0.5s ease-in-out; /* Animation für den Übergang */
}

.slide {
  min-width: 100%; /* Jede Folie nimmt die volle Breite ein */
  box-sizing: border-box;
}

.slide img {
  display: block;
  width: 100%;
  height: auto; /* Responsive Bilddarstellung */
  object-fit: cover; /* Bilder werden passend skaliert */
}

.caption {
  text-align: right;
  font-size: 14px;
  color: #555; /* Farbe der Beschriftung */
  margin-top: 8px; /* Abstand zwischen Bild und Beschriftung */
}

/* Navigation Buttons */
button.prev,
button.next {
  position: absolute;
  top: 50%; /* Vertikale Zentrierung */
  transform: translateY(-50%);
  border: none;
  color: rgb(0, 0, 0);
  font-size: 2rem;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  z-index: 10; /* Über anderen Elementen */
  background-color: rgba(0, 0, 0, 0); /* Halbtransparenter Hintergrund */
  width: 40px;
  height: 40px;
}

button.prev {
  left: -40px; /* Links außerhalb des sichtbaren Bereichs */
}

button.next {
  right: -36px; /* Rechts außerhalb des sichtbaren Bereichs */
}


/* Mobile Anpassungen */
@media (max-width: 768px) {
  button.prev {
    left: -21px; /* Links außerhalb des sichtbaren Bereichs */
  }
  
  button.next {
    right: -18px; /* Rechts außerhalb des sichtbaren Bereichs */
  }

.item-title {
  max-width: 90%; /* Ensures the image is responsive */
}


}

/* Adjust for mobile screens */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center content vertically */
    gap: 0px;
    margin-top: 20px;
  }
  .text-block, .slider-container {
    width: 100%; /* Full width for both elements */
    margin-bottom: 10px;
  }

  .text-block h2 {
    font-size: 16px;
    margin-bottom: 10px; /* Spacing below heading */
    text-align: center; /* Center align the title */
  }
  
  .text-block p {
    font-size: 14px;
    padding-right: 0px;
    line-height: 1.5;
  }
}