/* Reset some basic elements */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

@font-face {
  font-family: "InnovenceFontBold"; /* Give a name to your font */
  src: url("./Font/NeoBold/Neo\ Sans\ Std\ Bold.otf") format("opentype"); /* for older browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "InnovenceFontLight"; /* Give a name to your font */
  src: url("./Font/NeoRegular/Neo\ Sans\ Std\ Regular.otf") format("opentype"); /* for older browsers */
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "InnovenceFontBold";
}

.p {
  font-family: "InnovenceFontLight";
}

/* This is the container for the blocks */
.containerMain {
  /* Enables scroll snapping */
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh; /* Make it as tall as the viewport */
}

.block {
  position: relative;
  overflow: auto;
  overflow: hidden; /* Ensures that anything outside this container is not visible */
  height: 100vh;
  width: 100vw;
  font-size: 2em;
  scroll-snap-align: start;
}

.video-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%); /* Center the video */
  object-fit: cover; /* Cover the entire area of the container without stretching */
}

/* Styling blocks individually for demo */

.block:nth-child(2) {
  background-color: black;
}
.block:nth-child(3) {
  background-color: #40e0d0;
}
.block:nth-child(4) {
  background-color: #c71585;
}

.logo-wrapper {
  position: absolute;
  top: 50px; /* Adjust the top position as needed */
  left: 10px; /* Adjust the left position as needed */
  z-index: 1; /* Ensure the logo is above the video */
}

.logo {
  width: 200px; /* Adjust the width of the logo as needed */
  height: auto; /* Maintain aspect ratio */
  transition: width 0.3s ease, top 0.3s ease; /* Smooth transition for changes */
}
.navbar {
  position: absolute;
  top: 70px;
  width: 100%;
  text-align: center;
  z-index: 10; /* Ensures the navbar is above the video */
  padding: 10px 0;
  transition: top 0.3s ease; /* Smooth transition for changes */
}

@media (max-width: 768px) {
  .logo {
    width: 150px; /* Smaller logo on medium devices */
  }

  .navbar {
    top: 60px; /* Adjust navbar position to be below the smaller logo */
  }
}

@media (max-width: 480px) {
  .logo {
    width: 100px; /* Even smaller logo on small devices */
    top: 10px; /* Position higher to save space */
  }

  .navbar {
    top: 50px; /* Adjust navbar position accordingly */
  }
}

.nav-item {
  display: inline-block;
  margin: 0 15px;
  color: white;
  text-decoration: none;
  font-size: 1em; /* Adjust font size as necessary */
}

.nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 33vh;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  z-index: 2;
  overflow-y: auto;
  padding-top: 20px;
  box-sizing: border-box;
}

.nav-overlay a span {
  position: absolute;
  bottom: -5px; /* Adjust the position of the text as needed */
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-size: 12px; /* Adjust the font size of the text */
}

/* Hover effect to display the overlay */
.nav-item:hover .nav-overlay {
  display: block; /* Make the overlay visible */
  animation: slideDownFadeIn 0.5s forwards; /* Apply the animation */
}

.nav-overlay a {
  display: inline-block;
  width: 250px; /* Adjust the width of the squares */
  height: 250px; /* Adjust the height of the squares */
  margin: 20px; /* Adjust the spacing between squares */
  background-size: contain; /* Ensure the whole image fits inside */
  background-repeat: no-repeat; /* Prevent repeating the background */
  background-position: center; /* Center the background image */
  position: relative; /* Position the text relative to the square */
}

.nav-overlay a:hover {
  transform: scale(1.05); /* Increase the size by 5% */
  transition: transform 0.3s ease; /* Smooth transition for the scaling effect */
}

.navbar a {
  color: white; /* White text */
  margin: 0 15px; /* Spacing between links */
  font-size: 0.9em; /* Adjust as needed */
  text-decoration: none; /* Removes underline from links */
}
/* Responsive font sizes for Navbar */
@media (max-width: 768px) {
  .nav-item,
  .navbar a {
    font-size: 0.8em; /* Smaller font size on medium devices */
  }
}

@media (max-width: 480px) {
  .nav-item,
  .navbar a {
    font-size: 0.7em; /* Even smaller font size on small devices */
  }
}

/* Ensures content is centered including the navbar */
.block > nav + * {
  margin-top: 40px; /* Adjust based on the height of your navbar */
}

@keyframes slideDownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#moca_Block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px;
  margin-bottom: 70px;
  color: aliceblue;
  opacity: 0;
}

.moca_info {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.moca_info img {
  position: relative;
  max-width: 100%; /* Stellen Sie sicher, dass das Bild nicht breiter als 50% des Containers ist */
  max-height: 100%;
  z-index: 0;
}
.image-wrapper {
  position: relative;
  width: 40%;
}

.text-content {
  margin-left: 4em;
  flex: 1;
  color: aliceblue;
}

.text-content ul {
  padding: 0;
  list-style-type: circle;
}

.text-content ul li {
  opacity: 1; /* Startet unsichtbar */
  transform: translateY(20px); /* Startet leicht verschoben */
  margin-bottom: 20px;
  font-size: calc(1px + 2vw);
}

.material-symbols-outlined {
  position: absolute;
  bottom: 20px; /* Platzierung am unteren Ende des Blocks mit einem Abstand von 20px zum Rand */
  left: 50%; /* Zentrierung des Pfeils horizontal */
  transform: translateX(
    -50%
  ); /* Korrektur der Zentrierung, damit das Zentrum des Icons genau mittig ist */
  font-size: 44px; /* Größe des Pfeil-Icons */
  color: white; /* Farbe des Pfeil-Icons */
  cursor: pointer; /* Verwandelt den Cursor in einen Pointer, wenn man über das Icon fährt */
  animation: pulse 1s infinite alternate; /* Beibehalten der Puls-Animation */
}
@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

.wrapper {
  overflow-x: hidden;
  position: relative;
}
* {
  box-sizing: border-box;
}
svg {
  position: absolute;
  top: 12em;
  left: 26.5vw;
  width: 50vw;
}
svg .mask {
  width: 0;
}
.container {
  display: flex;
  position: relative;
  width: 300vw;
  flex-shrink: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.container .col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3em;
  text-align: center;
}

.container section {
  width: 100vw;
  padding: 20vw 10vw;
}
.container section h1 {
  font-size: calc(16px + 2vw);
  margin: 20px 0;
}
.container section p {
  margin-top: 1em;
  font-size: calc(16px + 2vw);
  width: 50vw;
}
.container section ul {
  list-style-type: none;
  display: flex;
  gap: 3em;
  width: 100%;
  height: 300px;
  padding: 0;
}
.container section ul li {
  background: white;
  border-radius: 0.3em;
  flex-grow: 1;
}
section {
  height: 100vh;
}

.wrapper {
  width: 100%;
  overflow: hidden;
}

.sec3 {
  position: relative;

  width: calc(500px + 10vw); /* Scales image size with viewport width */
  height: auto;
  z-index: 10;
}

.sec1 {
  position: relative;
  width: calc(500px + 10vw); /* Scales image size with viewport width */
  height: auto;
  z-index: 10;
}
.sec2 {
  position: relative;

  width: calc(500px + 10vw); /* Scales image size with viewport width */
  height: auto;
  z-index: 10;
}

.pinned-image {
  position: relative;
  width: 80%; /* Use 80% of the viewport width */
  max-width: 500px; /* Max width */
  height: auto;
  z-index: 10;
  transition: width 0.3s ease; /* Smooth transition */
}
/* Optional: Responsive Anpassungen für verschiedene Bildschirmgrößen */

.wrap {
  height: 200vh; /* Genug Raum für das Scrolling und die Zentrierung */
  display: flex;
  align-items: center; /* Stellt sicher, dass das Bild vertikal zentriert ist */
  justify-content: center; /* Stellt sicher, dass das Bild horizontal zentriert ist */
}

.zoom {
  top: 50vh; /* Positioniert den Anfang des Bildes in der Mitte des Viewports */
  transform: translateY(-50%) scale(1.5); /* Verschiebt das Bild zurück um 50% seiner Höhe und startet hineingezoomt */
  will-change: transform;
  width: 60%; /* Bildbreite, passen Sie diese nach Bedarf an */
  margin: auto; /* Zentriert das Bild horizontal */
}

.bottom {
  height: 100vh; /* Extra Höhe nach dem Bild */
}

p {
  font-family: "InnovenceLight";
  color: #666; /* Farbe des Fließtextes */
}

.content-container {
  display: flex;
  width: 100vw; /* Full viewport width */
  align-items: flex-start;
  justify-content: space-between; /* Distributes space between children evenly */
}

.text-box {
  margin-bottom: 15%;
  padding: 20px;
  overflow: hidden;
  transition: flex-basis 0.3s ease, width 0.3s ease;
  transform: translateX(
    150%
  ); /* Initially moves the text-box to the right, out of view */
}

h2 {
  font-size: 2.2vw; /* Default size */
}

h1 {
  font-size: 2vw; /* Default size */
}

.text-box {
  margin-bottom: 10%;
  font-size: calc(1px + 1.5vw);
}

.text-box ul {
  margin: 10%;
  list-style: none;
}
.text-box li {
  font-size: calc(1px + 1.5vw);
  margin: 5%;
}

#wrapList strong {
  text-decoration: underline; /* This adds an underline specifically to the text in the strong tags */
  text-decoration-color: #000; /* Optional: you can specify the color of the underline, here black */
  text-decoration-thickness: 2px; /* Optional: you can specify the thickness of the underline */
}

#wrapList span {
  font-family: "InnovenceFontLight"; /* Example font */
  font-size: 0.9em; /* Optional: Adjust size if necessary */
}

#wrapList a {
  font-family: "InnovenceFontLight"; /* Example font */
  font-size: 0.9em; /* Optional: Adjust size if necessary */
  text-decoration: none;
  background-color: #3f76bf;
}

.btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 70%;
  animation: pulse 5s infinite alternate; /* Beibehalten der Puls-Animation */
}
@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

.animated-btn {
  position: relative;
  padding: 10px 20px;
  border: 2px solid transparent;
  background-color: white;
  color: black;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: color 0.4s;
  font-size: calc(1px + 1.7vw);
  font-family: "InnovenceFontBold";
}

.animated-btn::before,
.animated-btn::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background: #3f76bf;
  transition: all 0.35s ease;
}

.animated-btn::before {
  top: 0;
  left: 50%;
}

.animated-btn::after {
  bottom: 0;
  right: 50%;
}

.animated-btn:hover::before,
.animated-btn:hover::after {
  width: 100%;
  left: 0;
  right: 0;
}

.animated-btn span::before,
.animated-btn span::after {
  content: "";
  position: absolute;
  height: 0;
  width: 2px;
  background: black;
  transition: all 0.35s ease;
}

.animated-btn:hover {
  color: #3f76bf;
}

.a:link,
a:visited {
  text-decoration: none;
  color: inherit;
}

.AirCatsection {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.airCatClass {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /* ensure the image is at the lowest layer */
}
#title {
  font-size: 100px;
  text-align: center;
  position: absolute; /* position absolute to place it on top of the image */
  font-weight: 900;
  color: #fff;
  opacity: 0;
  z-index: 1; /* ensure the text is above the image */
}
.questionMark {
  display: inline-block;
  position: relative;
}
.dot {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 0;
  border-radius: 50%;
  position: absolute;
  z-index: 2; /* ensure the dot is above the image and text */
}

.airCatMain {
  opacity: 0;
}

.newSection {
  opacity: 1;
  position: relative;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: black; /* Beispielstil, anpassen nach Bedarf */
  z-index: 3; /* Über dem Dot aber unter anderem Inhalt */
  text-align: center;
}

#secondAirCatsection section {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  object-fit: cover;
}
#firstSectionHeader {
  position: relative; /* Change to absolute if you want precise positioning */
  color: white;
  font-size: 32px;
  padding: 10px;
  border-radius: 5px;
  margin-top: -199px; /* Adjust this value to move the header up */
}

.aircat-section {
  padding: 20px;
}

.aircat-section h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.aircat-section p {
  font-size: 1.2em;
  margin-bottom: 40px;
}

.contentFirstSection {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 20px;
}

#backGroundSectionAirCat {
  background-color: "#4D7AB5";
  margin-bottom: 2rem;
}

.item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  text-align: center;
  font-size: large;
}

.item:hover {
  transform: scale(1.1); /* Scale up the item on hover */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Increase shadow for better visual effect */
}

.item img {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.item p {
  font-size: 1em;
  color: #333;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.overlay-content {
  position: relative;
  width: 100%;
  max-width: 800px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.overlay-content video {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

#mocaInfoHeadLine {
  position: absolute;
  color: #fff;
  margin-bottom: 10rem;
}

.documentation {
  padding: 20px;
}

.header {
  position: absolute;
  margin-bottom: 34rem;
}

.main {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.introduction {
  width: 40%;
}

.introduction h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.introduction p {
  font-size: 1em;
  margin: 5px 0;
}

.chart-container {
  width: 55%;
}

canvas {
  width: 100% !important;
  height: auto !important;
}

.button-35 {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: transparent 0 0 0 3px, rgba(18, 18, 18, 0.1) 0 6px 20px;
  box-sizing: border-box;
  color: #121212;
  cursor: pointer;
  font-family: "InnovenceFontLight";
  font-size: 1.2rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  margin: 0;
  outline: none;
  padding: 1rem 1.2rem;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
  white-space: nowrap;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  text-decoration: none;
}

.button-35:hover {
  box-shadow: #121212 0 0 0 3px, transparent 0 0 0 0;
}