/* styles.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ffffff;
  color: #000;
}

.video-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            
        }
        .video-container video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            transform: translate(-50%, -50%);
            object-fit: cover;
        }

        @media (max-width: 768px) {
        .video-container {
           height: 50vh; /* Reduce height for smaller screens */
           }
        }


.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    z-index: 1; /* Ensure overlay text stays above video */
}


        .overlay-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }
        .overlay-text h1 {
            font-size: 3em;
            margin: 0;
        }
        .overlay-text p {
            font-size: 1.5em;
            margin: 0;
        }
       
        @media (max-width: 768px) {
        .overlay-text {
            padding: 0 5%; /* Add spacing on the right and left */
        }

        .overlay-text h1 {
            font-size: 1.2em; /* Reduce font size for headings */
        }

        .overlay-text p {
            font-size: 0.9em; /* Reduce font size for paragraphs */
        }
    }


        .image-container {
            width: 100%; /* Takes full width of the viewport */
            max-width: 1200px; /* Optional maximum width for larger screens */
            height: 400px; /* Adjust the height to match your image's proportions */
            margin: 0 auto; /* Centers the container horizontally */
            display: flex;
            justify-content: center; /* Centers image horizontally */
            align-items: center; /* Centers image vertically */
            overflow: hidden; /* Ensures image doesn't overflow container */
            margin-bottom: 40px;
        }
        .image-container img {
            width: 100%;
            height: 150%;
            object-fit: contain; /* Ensures the image fits inside the container while maintaining aspect ratio */
        }
        
        @media (max-width: 768px) {
        .image-container {
            height: 250px; /* Reduce height for mobile screens */
        }

        .image-container img {
            height: 100%; /* Adjust image height for smaller containers */
        }

        .vision-content{
          margin-top: 10px;
          margin-bottom: 15px;
        }
        .products-content{
          margin-bottom: 15px;
        }
    }

.vision-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 80px;
  max-width: 100%;
  margin: 0;
  background-color: #000;
}

.vision-content {
  max-width: 50%;
  position: relative;
  padding-left: 40px; /* Space between the line and the text */
}

.vision-content::before {
  content: '';
  position: absolute;
  top: 10%; /* Line starts slightly below the top */
  left: 0;
  width: 2px; /* Line thickness */
  height: 80%; /* Line spans only a portion of the content */
  background-color: rgba(255, 255, 255, 0.7); /* Slightly transparent white color */
  border-radius: 1px; /* Smooth edges for the line */
}

.vision-title {
  font-size: 24px;
  letter-spacing: 2px;
  margin-bottom: 20px;
  color:#ffffff
}

.vision-subtitle {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  color:#ffffff
}

.vision-description {
  font-size: 16px;
  line-height: 1.6;
  color:#ffffff;
}

.vision-image img {
  max-width: 80%;
  height: auto;
  border-radius: 5px;
  margin-left: 50px;
}

.mail-description {
  font-size: 16px;
  line-height: 1.6;
  color:#ffffff;
  text-decoration: none;
}

.mail-description a {
  font-size: 16px;
  line-height: 1.6;
  color:#ffffff;
  text-decoration: none;
}

.mail-description a:hover{
  color:#ff6d00 ;
}

@media screen and (max-width: 768px) {
  .vision-section {
    flex-direction: column; /* Stack content vertically for smaller screens */
    padding: 40px; /* Reduce padding for tablets */
  }

  .vision-content {
    max-width: 100%; /* Content spans full width on smaller devices */
    padding-left: 20px; /* Reduce left padding */
  }

  .vision-content::before {
    top: 5%; /* Adjust line position */
    height: 90%; /* Extend the line height for better balance */
  }

  .vision-title {
    font-size: 20px; /* Adjust font size for smaller screens */
  }

  .vision-subtitle {
    font-size: 16px;
  }

  .vision-description {
    font-size: 14px;
  }

  .vision-image img {
    max-width: 100%; /* Allow the image to span full width */
    margin-left: 0; /* Remove margin for better centering */
  }
}

@media screen and (max-width: 480px) {
  .vision-section {
    padding: 20px; /* Further reduce padding for mobile devices */
  }

  .vision-content {
    padding-left: 10px; /* Minimal padding on smaller screens */
  }

  .vision-title {
    font-size: 18px; /* Further adjust font size for mobile screens */
  }

  .vision-subtitle {
    font-size: 14px;
  }

  .vision-description {
    font-size: 12px; /* Adjust description font for readability */
  }
}


.products-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 80px;
  max-width: 100%;
  margin: 0 auto;
  background-color: #ffffff; /* White background for the section */
}

.products-content {
  max-width: 50%;
  position: relative;
  margin-top: 70px;
}

.products-subtitle {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #555; /* Dark gray for contrast */
  margin-bottom: 10px;
}

.products-title-line {
  display: flex;
  align-items: center;
}

.products-title {
  font-size: 28px;
  line-height: 1.5;
  font-weight: bold;
  margin-right: 20px;
  color: #000;
}

.vertical-line {
  width: 2px;
  height: 100px; /* Adjust this to control line height */
  background-color: #000;
}

.section-heading {
  font-size: 24px;
  font-weight: bold;
  margin-top: 30px;
  color: #000;
}

.section-description {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 20px;
  color: #666; /* Medium gray for description */
}

.read-more-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  border: 2px solid #000;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background 0.3s, color 0.3s;
}

.read-more-btn .arrow {
  margin-left: 10px;
}

.read-more-btn:hover {
  background: #000;
  color: #fff;
}

.products-image img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}


@media screen and (max-width: 768px) {
  .products-section {
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center-align content */
    padding: 40px; /* Reduce padding for smaller screens */
  }

  .products-content {
    max-width: 100%; /* Allow content to span full width */
    margin-top: 30px; /* Reduce top margin */
    text-align: center; /* Center-align text */
  }

  .products-title-line {
    flex-direction: column; /* Stack title and line vertically */
    align-items: center;
  }

  .products-title {
    font-size: 24px; /* Adjust font size */
    margin-right: 0; /* Remove right margin */
    margin-bottom: 10px; /* Add spacing between title and line */
  }

  .vertical-line {
    height: 50px; /* Adjust line height for smaller screens */
  }

  .section-heading {
    font-size: 20px; /* Adjust heading size */
    margin-top: 20px;
  }

  .section-description {
    font-size: 14px; /* Adjust description font size */
    line-height: 1.4; /* Slightly reduce line height */
  }

  .read-more-btn {
    padding: 8px 16px; /* Reduce button size */
    font-size: 12px; /* Adjust button text size */
  }

  .products-image img {
    max-width: 80%; /* Reduce image size */
    margin-top: 20px; /* Add spacing above the image */
  }
}

@media screen and (max-width: 480px) {
  .products-section {
    padding: 20px; /* Further reduce padding for mobile devices */
  }

  .products-content {
    margin-top: 20px; /* Further reduce margin */
  }

  .products-title {
    font-size: 20px; /* Adjust font size for mobile screens */
  }

  .vertical-line {
    height: 40px; /* Shorten the line */
  }

  .section-heading {
    font-size: 18px; /* Adjust heading size */
  }

  .section-description {
    font-size: 12px; /* Adjust description font size */
  }

  .read-more-btn {
    padding: 6px 12px; /* Further reduce button size */
    font-size: 10px; /* Adjust button text size */
  }

  .products-image img {
    max-width: 100%; /* Allow image to span full width */
  }
}

.section {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 100%;
      min-height: 100vh;
      background-image: url('your-image.jpg'); /* Replace with your image path */
      background-size: cover;
      background-position: center;
    }

    .content-box {
      background-color: black;
      opacity: 0.9;
      padding: 20px 40px;
      max-width: 400px;
      border-radius: 10px;
    }

    .content-box h2 {
      font-size: 24px;
      margin-bottom: 15px;
    }

    .content-box p {
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .btn {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      color: white;
      border: 2px solid white;
      text-decoration: none;
      border-radius: 5px;
      transition: all 0.3s ease-in-out;
    }

    .btn:hover {
      background-color: white;
      color: black;
    }

    @media (max-width: 768px) {
      .content-box {
        padding: 15px 20px;
      }

      .content-box h2 {
        font-size: 20px;
      }

      .content-box p {
        font-size: 14px;
      }

      .btn {
        font-size: 14px;
        padding: 8px 16px;
      }
    }