/* Welcome section */
.welcome-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px; /* You can reduce this value if more compact spacing is needed */
  padding-bottom: 20px;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%; /* Adjusts width of the section */
  max-width: 1100px;
}

/* Responsive text */
.contenth1 {
  color: #fff;
  font-size: 3rem;
  text-align: center; /* Align text centrally */
  font-weight: bold;
  margin-left: 10px; /* Reduce space between logo and text */
}

/* Logo styling */
.logowel {
  width: 150px; /* Responsive sizing */
  max-width: 150px; /* Restrict the maximum size */
  height: auto;
  margin-right: 10px; /* Reduced space between the logo and text */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .contenth1 {
    font-size: 7vw;
    margin-left: 5px; /* Further reduce space between logo and text */
  }

  .logowel {
    width: 20vw; /* Adjust logo size for smaller screens */
  }
}

@media (max-width: 480px) {
  .contenth1 {
    font-size: 5vw;
  }

  .logowel {
    width: 25vw;
  }
}
/* Video section */
.video-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0; /* Remove excessive space */
  width: 80%; /* Full width of the section */
  max-width: 1400px;
  padding: 20px; /* Optional padding around the section */
  margin: 0 auto;
}

/* Responsive video wrapper */
.video-wrapper {
  position: relative;
  width: 80%; /* Increase width for smaller devices */
  max-width: 1920px; /* Maintain maximum width for larger screens */
  aspect-ratio: 16/9; /* Maintain 16:9 aspect ratio */
  margin: 0 auto; /* Center the wrapper */
  border-radius: 20px; /* Rounded corners */
  overflow: hidden; /* Ensure video fits inside rounded corners */
}

/* Video element */
.responsive-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the wrapper area */
  border-radius: 20px; /* Rounded corners for the video */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Optional shadow for styling */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .video-wrapper {
    width: 85%; /* Slightly smaller width for tablets */
  }
}

@media (max-width: 768px) {
  .video-wrapper {
    width: 90%; /* Increase width for smaller devices */
  }
}

@media (max-width: 480px) {
  .video-wrapper {
    width: 95%; /* Maximize width for extra small screens */
    margin-top: -20px; /* Adjust margin for better spacing on smaller devices */
  }
}

.mstiinfo_container {
  background-color: #242424;
  display: flex;
  align-items: center;
  max-width: 1080px; /* Maximum width for the section */
  margin: 20px auto; /* Center the section */
  border-radius: 8px; /* Rounded corners */
  overflow: hidden; /* Prevent overflow from the image */
}

.mstiinfo_image-container {
  flex: 0 0 400px; /* Fixed width for image container */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.mstiinfo_image {
  width: 100%; /* Full width of the container */
  height: auto;
  border-radius: 5%; /* Slightly rounded corners */
}

.mstiinfo_info-container {
  flex: 1; /* Take remaining space */
  padding: 20px; /* Padding for text */
}

.mstiinfo_title {
  color: #ffffff;
  font-size: 30px;
  margin: 0 0 10px 0;
}

.mstiinfo_description {
  font-size: 16px;
  color: #d6d4d4;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .mstiinfo_container {
    width: 80%;
    flex-direction: column; /* Stack elements vertically on small screens */
  }

  .mstiinfo_image-container {
    flex: 0 0 auto; /* Allow the image to adjust size */
    margin-bottom: 20px; /* Space below the image */
  }

  .mstiinfo_info-container {
    text-align: center; /* Center text in small screens */
  }

  .mstiinfo_title {
    font-size: 24px; /* Adjust font size */
  }

  .mstiinfo_description {
    font-size: 15px; /* Adjust font size */
  }
}
/* Original Layout */
.responsivemsti_name_container {
  display: flex;
  align-items: center;
  max-width: 1000px; /* Maximum width for the section */
  margin: 20px auto; /* Center the section */
  border-radius: 8px; /* Rounded corners */
  overflow: hidden; /* Prevent overflow from the image */
}

.responsivemsti_name_info-container {
  flex: 1; /* Take remaining space */
  padding: 20px; /* Padding for text */
}

.responsivemsti_name_image-container {
  flex: 0 0 400px; /* Fixed width for image container */
  display: flex;
  justify-content: center; /* Center the image */
  padding: 20px;
}

.responsivemsti_name_image {
  width: 100%; /* Full width of the container */
  height: auto;
  border-radius: 5%; /* Slightly rounded corners */
}

.responsivemsti_name_social-container {
  display: flex; /* Flex container for social icons */
  margin-top: 10px; /* Space above the icons */
}

.responsivemsti_name_social-icon {
  width: 40px; /* Fixed width for social icons */
  height: auto; /* Maintain aspect ratio */
  margin: 0 5px; /* Space between icons */
}

.responsivemsti_name_title {
  color: #ffffff;
  font-size: 30px;
  margin: 0 0 10px 0;
}

.responsivemsti_name_position {
  color: #ffb400; /* Different color for the position */
  font-size: 18px; /* Font size for position */
  margin: 0 0 10px 0; /* Margin for spacing */
}

.responsivemsti_name_description {
  font-size: 16px;
  color: #d6d4d4;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .responsivemsti_name_container {
    display: none; /* Hide the original layout in responsive mode */
  }
}

/* Add new styles for responsive layout */
.responsivemsti_name_responsive_container {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  padding: 20px; /* Padding for spacing */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  width: 80%;
  background-color: rgb(19, 19, 19);
  max-width: 1050px; /* Maximum width */
  margin: 20px auto; /* Center the section */
}

.responsivemsti_name_responsive_image-container {
  display: flex; /* Use flexbox to center the image */
  justify-content: center; /* Center the image horizontally */
  margin-bottom: 20px; /* Space below the image container */
}

.responsivemsti_name_responsive_image {
  max-width: 40%; /* Ensure the image is responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 8px; /* Rounded corners for the image */
}

.responsivemsti_name_responsive_info-container {
  text-align: center; /* Center text */
}

.responsivemsti_name_responsive_title {
  font-size: 26px; /* Title size */
  font-weight: bold; /* Bold title */
  margin: 10px 0; /* Spacing */
  color: #ffffff; /* Dark color */
}

.responsivemsti_name_responsive_position {
  font-size: 18px; /* Position size */
  font-weight: 500; /* Medium weight */
  margin: 5px 0; /* Spacing */
  color: #ffb400; /* Lighter color */
}

.responsivemsti_name_responsive_description {
  font-size: 16px; /* Description size */
  margin: 10px 0; /* Spacing */
  color: #ffffff; /* Dark gray for readability */
}

.responsivemsti_name_responsive_social-container {
  display: flex; /* Flex container for social icons */
  justify-content: center; /* Center social icons */
  margin-top: 15px; /* Space above */
}

.responsivemsti_name_responsive_social-icon {
  width: 40px; /* Icon size */
  margin: 0 10px; /* Space between icons */
  transition: transform 0.2s; /* Smooth transition for hover */
}

.responsivemsti_name_responsive_social-icon:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}

.title-container {
  margin-top: 5vh;
  text-align: center;
}

.titlecenter {
  font-size: 4rem; /* Base font size for large screens */
  color: #ffffff;
  margin: 0;
}

.titledes {
  font-size: 13px; /* Base font size for large screens */
  color: #fff;
}

/* Responsive design adjustments */

/* For tablets and medium screens (768px to 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  .titlecenter {
    font-size: 3rem; /* Decrease font size for tablets */
  }
  .titledes {
    font-size: 12px; /* Slightly smaller description text for tablets */
  }
}

/* For mobile devices (480px to 767px) */
@media (max-width: 767px) and (min-width: 480px) {
  .titlecenter {
    font-size: 2.5rem; /* Adjust font size for small screens */
  }
  .titledes {
    font-size: 11px; /* Smaller description text for small screens */
  }
}

/* For extra small screens (below 480px) */
@media (max-width: 479px) {
  .titlecenter {
    font-size: 2rem; /* Smaller font size for very small devices */
  }
  .titledes {
    font-size: 10px; /* Further reduction for description text */
  }

  .title-container {
    margin-top: 3vh; /* Less vertical space on smaller devices */
  }
}
/* Section for product cards */
.msticard_name-section {
  display: flex;
  justify-content: center; /* Center the cards horizontally */
  align-items: center; /* Center the cards vertically (if needed) */
  flex-wrap: wrap; /* Allow cards to wrap on smaller screens */
  gap: 20px;
  padding: 40px;
  width: 100%;
  max-width: 1200px; /* Limit the total width of the card layout */
  margin: 0 auto; /* Center the section on the page */
}

/* Style for each product card */
.msticard_name {
  background-color: #242424;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 22%; /* Adjust width to fit 4 cards */
  min-width: 200px;
  transition: transform 0.2s ease-in-out;
  text-align: center;
}

.msticard_name:hover {
  transform: scale(1.05); /* Zoom on hover */
}

/* Image for the product */
.msticard_name-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Card content */
.msticard_name-content {
  padding: 20px;
}

.msticard_name-content h3 {
  color: #fff;
  margin: 10px 0;
  font-size: 1.2rem;
}

.msticard_name-content p {
  font-size: 1rem;
  color: #a8a8a8;
  margin-bottom: 15px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .msticard_name {
    width: 45%; /* Adjust width for tablets */
  }
}

@media (max-width: 768px) {
  .msticard_name {
    width: 90%; /* Full width for small devices */
  }
}

@media (max-width: 480px) {
  .msticard_name {
    width: 100%; /* Full width for extra small devices */
  }
}
/* Section for workshop cards */
.workshop-cards-section {
  display: flex;
  justify-content: center; /* Center cards */
  flex-wrap: wrap; /* Allow wrapping */
  gap: 20px; /* Space between cards */
  padding: 40px;
}

/* Style for each workshop card */
.workshop-card {
  background: linear-gradient(135deg, #131313 0%, #282828 100%);
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 22%; /* Adjust width to fit 4 cards */
  min-width: 200px;
  max-width: 245px;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for hover effect */
  text-align: center;
  position: relative; /* Needed for overlay effect */
}

.workshop-card:hover {
  transform: translateY(-10px); /* Lift card on hover */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* Increase shadow */
}

/* Image container to hold the image */
.workshop-image-container {
  width: 100%;
  height: 200px; /* Fixed height for image consistency */
  overflow: hidden; /* Ensure image fits container */
}

/* Image for the workshop */
.workshop-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure image covers the area */
  transition: transform 0.3s ease; /* Animation on hover */
}

.workshop-card:hover .workshop-image {
  transform: scale(1.1); /* Zoom image on hover */
}

/* Card content */
.workshop-content {
  padding: 20px;
}

.workshop-content h3 {
  margin: 10px 0;
  font-size: 1.2rem;
  color: #ffffff;
}

.workshop-content p {
  font-size: 1rem;
  color: #a8a8a8;
  margin-bottom: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .workshop-card {
    width: 45%; /* Adjust width for tablets */
  }
}

@media (max-width: 480px) {
  .workshop-card {
    width: 100%; /* Full width for extra small devices */
  }
}
.title-container {
  margin-top: 5vh;
  text-align: center;
}

.titlecenter {
  font-size: 4rem; /* Base font size for large screens */
  color: #ffffff;
  margin: 0;
}

.titledes {
  font-size: 13px; /* Base font size for large screens */
  color: #fff;
}

/* Responsive design adjustments */

/* For tablets and medium screens (768px to 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  .titlecenter {
    font-size: 3rem; /* Decrease font size for tablets */
  }
  .titledes {
    font-size: 12px; /* Slightly smaller description text for tablets */
  }
}

/* For mobile devices (480px to 767px) */
@media (max-width: 767px) and (min-width: 480px) {
  .titlecenter {
    font-size: 2.5rem; /* Adjust font size for small screens */
  }
  .titledes {
    font-size: 11px; /* Smaller description text for small screens */
  }
}

/* For extra small screens (below 480px) */
@media (max-width: 479px) {
  .titlecenter {
    font-size: 2rem; /* Smaller font size for very small devices */
  }
  .titledes {
    font-size: 10px; /* Further reduction for description text */
  }

  .title-container {
    margin-top: 3vh; /* Less vertical space on smaller devices */
  }
}
.formcontainer {
  min-width: 200px;
  max-width: 1100px;
  width: 70%;
  padding: 1vw;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 0 auto;
}

input, textarea {
  width: 100%;
  padding: 2.5%;
  margin-bottom: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: calc(0.9em + 0.5vw);
}

textarea {
  resize: none;
}

label {
  color: #fff;
}

#inquiry-type {
  width: 100%; /* Ensures the dropdown spans the full width of the form */
  height: 50px; /* Increase the height of the dropdown */
  font-size: 18px; /* Increase font size for better readability */
  padding: 12px; /* Adjust padding for a more spacious appearance */
  border: 1px solid #cccccc; /* Optional: consistent border style */
  border-radius: 5px; /* Optional: rounded corners */
  box-sizing: border-box; /* Ensures padding doesn't overflow the width */
  margin-bottom: 20px;
}

#submit {
  border: none;
  background-color: #ffb400;
  color: #000;
  width: 100%;
  padding: 2.5%;
  margin-top: 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: calc(1em + 0.3vw);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#submit:hover {
  background-color: #fff;
  color: #ffb400;
}

.form-message {
  margin-top: 10px;
  font-size: calc(0.8em + 0.3vw);
  color: white;
  text-align: center;
  display: none;
}

@media screen and (max-width: 900px) {
  .formcontainer {
    width: 90%;
    padding: 5vw;
  }
}

@media screen and (max-width: 600px) {
  .formcontainer {
    width: 95%;
    padding: 5%;
  }

  input, textarea {
    font-size: 14px;
  }

  #submit {
    font-size: 16px;
  }
}