html,
 body {
   margin: 0;
   font-family: Arial, sans-serif;
 }
 
 .section-1 {
   background-image: url("/media/background.jpeg");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   height: 100vh; 
 }
 
 .section-2 {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

 .section-3 {
  text-align: left;
}

.address {
  font-family: Arial, sans-serif;
  color: white;
  text-shadow: 2px 2px 2px black;
  font-size: 16px;
}

.email-link {
  color: white;
  text-decoration: none;
} 
 .navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #333;
   padding: 10px 20px;
   position: relative;
 }
 
 .logo-left img,
 .logo-middle img {
   height: 50px;
 }
 
 .logo-middle {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
 }
 
 .content {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 80vh;
   padding: 0 10px;
 }
 
 .container-2 {
   display: flex;
   flex-wrap: wrap;
   margin: 0 20px;
   justify-content: center;
 }
 
 .video-placeholder {
   background-color: rgba(18, 17, 17, 0.7);
   display: flex;
   justify-content: center;
   align-items: center;
   border: 6px solid rgba(170, 170, 170, 0.7);
   margin: 10px;
 }
 
 video {
   width: 100%;
   max-width: 800px;
   opacity: 0.25;
   transition: opacity 0.3s ease-in-out;
 }
 
 video:hover {
   opacity: 1;
 }
 
 .image-container-1 {
   align-items: center;
   border: 5px solid white;
   width: 550px;
   height: 300px;
   margin: 10px;
 }
 
 .product {
   width: 100%;
   max-width: 390px;
   height: auto;
 }
 
 .text-container-1 {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   max-width: 600px;
   border-radius: 10px;
   margin: 10px;
 }
 
 .center {
   text-align: center;
 }
 
 #contact {
   position: relative;
 }
 
 #contact-box {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: 20px;
   padding-bottom: 34px;
   padding-left: 34px;
   position: relative;
 }
 
 #contact-form {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
 
 #contact-form label {
   margin-bottom: 5px;
 }
 
 #contact-form input,
 #contact-form textarea {
   width: 100%;
   max-width: 500px;
   padding: 0.5rem;
   border-radius: 10px;
   font-size: 1.1rem;
 }
 
 #imprint {
   text-align: left;
   padding: 10px;
 }
 
 #contact::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: -1;
   opacity: 0.7;
   background: url("../media/contact.jpeg");
 }
 
 .productBtn {
   font-size: large;
   background-color: #395690;
   height: 40px;
   width: 350px;
   color: white;
   text-decoration: none;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 #submit-button {
   background: #f5f5f5;
   color: black;
   justify-content: center;
   height: 50px;
   width: 200px;
 }
 
 footer {
   background: black;
   color: wheat;
   padding: 9px 20px;
 }
 
 @media (max-width: 768px) {
   .navbar {
     flex-direction: column;
   }
 
   .logo-left,
   .logo-middle {
     position: static;
     transform: none;
     margin: 5px 0;
   }
 
   .video-placeholder {
     width: 100%;
     margin: 10px 0;
   }
 
   .container-2 {
     flex-direction: column;
     align-items: center;
   }
 
   .image-container-1,
   .text-container-1 {
     max-width: 100%;
     margin: 10px 0;
   }
 
   .product {
     width: 90%; /* Adjust width */
   }
 
   #contact-box {
     align-items: center;
   }
 
   #imprint {
     position: static;
     text-align: center;
     padding: 0 34px;
   }
 }
 
 @media (max-width: 480px) {
   .navbar {
     padding: 5px 10px;
   }
 
   .content {
     height: auto;
   }
 
   .video-placeholder {
     border: 4px solid rgba(170, 170, 170, 0.7);
   }
 
   #contact-box {
     padding: 5px;
   }
 
   #imprint {
     padding: 5px;
   }
 
   #contact-box input,
   #contact-box textarea {
     width: 90%;
   }
 }