:root {
  --overlay-color: #193940;
  --form-background-color: #ffffff; /* Solid color for form background */
  --form-width: 40%; /* Initial width as a percentage */
  --form-max-width: 450px; /* Maximum width in pixels */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
  scroll-behavior: smooth;
  font-family: "MuseoModerno", cursive;
  color: beige;
}

body {
  margin: 0;
  padding: 0;
  background-color: #193940;
  background-image: url("../images/contact.jpeg"); /* Adjust path as necessary */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover; /* Ensures the background covers the whole area */
  height: 100vh; /* Full height of the viewport */
  width: 100vw; /* Full width of the viewport */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-color);
  mix-blend-mode: overlay;
  opacity: 0.6; /* Slightly transparent to ensure form readability */
}

.logo {
  font-size: 2rem; /* Adjusted for responsiveness */
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem; /* Adjusted padding for consistency */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle {
  width: 30px; /* Adjusted size */
  height: 30px;
  background: url("../images/close.png") no-repeat center;
  background-size: contain;
  cursor: pointer;
}

#data-box {
  background: rgba(243, 247, 249, 0.8); /* Semi-transparent for readability */
}

/* Baseline styles for the .contact form */
.contact {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-40%, -55%);
  width: 700px; /* Fixed width for screens larger than 1200px */
  padding: 40px; /* Adequate padding for readability and form interaction */
  max-width: var(--form-max-width); /* Ensure it respects the max-width if specified */
  background: var(--form-background-color);
  border-radius: 8px;
  box-shadow: 0 2vw 4vw rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.contact h2, .contact p {
  font-size: 1.5rem; /* Adjusted font size */
  color: black;
  text-shadow: none; /* Removed text shadow for clarity */
}

.contact form {
  width: 100%; /* Use full width of .contact */
}

.contact form .input-box .input-field input,
.contact form .textarea-field textarea {
  background: #edf1f5; /* Background color for readability */
  color: #333; /* Text color for contrast */
  border: 2px solid #193940; /* Adjusted border for clarity */
}

.contact form .input-box, .contact form .textarea-field, .submit_btn {
  margin-top: 1rem; /* Added margin-top for spacing */
}

.submit_btn .btn {
  font-size: 1rem; /* Adjusted font size */
  padding: 0.75rem 1.5rem; /* Padding for button size */
  letter-spacing: normal; /* Adjusted letter spacing */
  background: var(--overlay-color); /* Use variable for consistency */
  color: beige; /* Text color */
}

/* Media Queries for responsiveness on smaller screens */
@media (m-width: 1200px) {
  .contact {
    width: 60%; /* Adjust the width to be 60% of the viewport width */
    padding: 20px; /* Adjust padding to fit smaller screens */
  }
}

@media (max-width: 768px) {
  .contact {
    width: 80%; /* Increase width percentage for smaller devices */
    padding: 15px; /* Adjust padding as needed */
  }
}

@media (max-width: 480px) {
  .contact {
    width: 95%; /* Make the form take up almost the entire screen width */
    padding: 10px; /* Minimize padding to maximize space */
  }
}


@media (max-width: 375px) {
  .contact {
    width: 95vw; /* Make the form almost full-width on the smallest screens */
    padding: 3vh 3vw; /* Increase padding slightly */
  }
  body, header {
    padding: 1vw; /* Adjust padding for consistency */
  }

  .contact h2, .contact p, .contact form label {
    font-size: 1rem; /* Further reduce the font size for very small devices */
  }

  .contact form .input-box .input-field input, 
  .contact form .textarea-field textarea {
    font-size: 0.7rem; /* Smaller font size for inputs and textarea */
    padding: 0.8rem; /* Adjust padding to fit the smaller screen */
  }

  .submit_btn .btn {
    padding: 0.6rem 1rem; /* Adjust button padding for better tapping */
  }

  header .logo, header .toggle {
    font-size: 0.8rem; /* Adjust logo and toggle size for header */
  }
}