/* root */
:root {
  --primary-accent-color: #34a9ff;
  --primary-color: #007bff;
  --primary-color-hover: #0056b3;
  --border-color: #ccc;
  --border-radius: 6px;
  --input-padding: 0.6rem;
  --form-gap: 1rem;
  --focus-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  --button-gradient: linear-gradient(
    135deg,
    var(--primary-accent-color) 0%,
    #33a0ef 100%
  );
  --button-hover-gradient: linear-gradient(135deg, #33a0ef 0%, #2d8fd8 100%);
}

body {
  margin: 0;
  width: 100%;
  font-family: "Poppins", sans-serif;
}

#main {
  margin-top: 5rem;
  height: calc(120vh - 5rem);
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4rem;
  padding-bottom: 1.5rem;
}

@media screen and (max-height: 640px) {
  #main {
    margin-top: 6rem;
    height: max-content;
  }
}

#hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 40%;
  align-self: start;
  margin-top: 40px;
}

#hero h3 {
  font-family: "poppins", sans-serif;
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 700;
  color: #333;
  margin-top: 0;
}

#hero h3 b {
  color: var(--primary-accent-color);
}

#hero #hero-text span {
  font-family: "poppins", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: #333;
  width: 50%;
  display: block;
}

#hero #hero-img {
  width: 22vw;
  max-width: 260px;
  min-width: 120px;
  position: absolute;
  right: -2rem;
  bottom: 0;
}

#hero #features {
  margin-top: 0rem;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  max-width: 35rem;
}

.featureItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 0.5rem;
  max-width: 24rem;
}

.featureItem img {
  width: 5rem;
  height: 5rem;
  transform: scale(1.25);
}

.featureItem span {
  font-size: 1.2rem;
  line-height: 1.5rem;
}

#form {
  max-width: 40rem;
  width: 60%;
  box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  align-self: start;
  margin-top: 40px;
  background: white;
}

#form form {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--form-gap);
  box-sizing: border-box;
  padding: 2rem;
}

#form form h1 {
  font-family: "poppins", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1.5rem;
  text-align: center;
}

#form form h1 b {
  color: var(--primary-accent-color);
  font-weight: 600;
}

/* Form Grid Layout */
.form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-family: "poppins", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.25rem;
}

.form-group label.required::after {
  content: " *";
  color: #e53935;
  font-weight: 900;
}

/* Two-column layout for larger screens */
@media screen and (min-width: 600px) {
  #form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--form-gap);
    align-items: start;
  }

  #form form h1 {
    grid-column: 1 / -1;
    text-align: center;
  }

  /* Full-width elements */
  .form-group.full-width {
    grid-column: 1 / -1;
  }

  #form form input[type="submit"] {
    grid-column: 1 / -1;
  }
}

/* Input and Select Styling */
#form form input[type="text"],
#form form input[type="email"],
#form form input[type="tel"],
#form form input[type="url"],
#form form input[type="date"],
#form form input[type="time"],
#form form select {
  width: 100%;
  padding: var(--input-padding);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  font-family: "poppins", sans-serif;
  font-size: 1rem;
  transition: all 0.2s ease;
  background-color: white;
  box-sizing: border-box;
}

#form form input[type="text"]:focus,
#form form input[type="email"]:focus,
#form form input[type="tel"]:focus,
#form form input[type="url"]:focus,
#form form input[type="date"]:focus,
#form form input[type="time"]:focus,
#form form select:focus {
  border-color: var(--primary-color);
  box-shadow: var(--focus-shadow);
}

#form form select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpolygon%20fill%3D%22%23666666%22%20points%3D%2210%2C15%2020%2C25%2030%2C15%22%3E%3C/polygon%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.2rem;
  padding-right: 2.5rem;
}

#form form select:hover {
  border-color: var(--primary-accent-color);
}

#form form option {
  padding: 0.5rem;
  background-color: white;
}

#form form option:hover {
  background-color: #f8f9fa;
}

#form form option:checked {
  background-color: var(--primary-accent-color);
  color: white;
}

/* Button Styling */
#form form input[type="submit"] {
  margin-top: 1rem;
  width: 100%;
  padding: 0.8rem;
  border: none;
  outline: none;
  background: var(--button-gradient);
  color: white;
  font-family: "poppins", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#form form input[type="submit"]:hover {
  background: var(--button-hover-gradient);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#form form input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#form form input[type="submit"]:disabled {
  background: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

/* Focus visible for accessibility */
#form form input:focus-visible,
#form form select:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

@media screen and (max-width: 1180px) {
  #main {
    column-gap: 2rem;
  }
  #hero #hero-img {
    display: none;
  }
  #hero h3 {
    font-size: 2.2rem;
    line-height: 2.5rem;
  }
  #hero #hero-text span {
    width: 100%;
    font-size: 1.2rem;
  }
  #hero {
    width: 100%;
  }
  #form {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 920px) {
  #hero {
    padding: 0;
    box-sizing: border-box;
    width: 100%;
  }
  #hero #features {
    display: none;
  }
  #main {
    padding: auto;
  }
  #form {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 800px) {
  #hero h3 {
    font-size: 2rem;
    line-height: 2.2rem;
  }

  #hero #hero-text span {
    font-size: 1rem;
  }

  #form form h1 {
    font-size: 1.2rem;
  }

  #form form input[type="text"],
  #form form input[type="email"],
  #form form input[type="tel"],
  #form form input[type="url"],
  #form form input[type="date"],
  #form form input[type="time"],
  #form form select {
    padding: 0.5rem;
    font-size: 1rem;
  }

  .form-group label {
    font-size: 0.85rem;
  }

  #hero {
    padding: auto;
  }
  #form {
    padding: auto;
  }
}

@media screen and (max-width: 680px) {
  #main {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    padding-bottom: 4rem;
  }
  #hero {
    padding: 0 2rem 2rem 2rem;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
  }
  #hero h3 {
    font-size: 2rem;
    line-height: 2.1rem;
  }

  #hero #hero-text span {
    font-size: 0.9rem;
  }

  #form form h1 {
    font-size: 1rem;
  }

  #form {
    width: calc(100% - 2rem);
    border-radius: 0.5rem;
    margin: auto;
    max-width: 100%;
  }

  #form form {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--form-gap);
  }

  /* Single column layout on mobile */
  #form form {
    grid-template-columns: 1fr;
  }

  .form-group {
    width: 100%;
  }
}

@media screen and (max-width: 470px) {
  #hero h3 {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }
}

/* 

    <div id="success">
        <div id="success-text">
            <img src="assets/icons/check.png" alt="Success">
            <h2>Success!</h2>
            <p>We will get back to you shortly to confirm the schedule.</p>
        </div>
    </div>

    <div id="error">
        <div id="error-text">
            <img src="assets/icons/error.png" alt="Success">
            <h2>Error!</h2>
            <p>Try again!</p>
        </div>
    </div>
    
    */

#success {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  text-align: center;
  height: calc(100vh + 2rem);
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

#success-text {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  column-gap: 1rem;
}

#success-text img {
  width: 5rem;
  height: 5rem;
}

#success-text h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}

#success-text p {
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0;
}

#error {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh + 2rem);
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  padding: 2rem;
  box-sizing: border-box;
  text-align: center;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

#error-text {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  column-gap: 1rem;
}

#error-text img {
  width: 5rem;
  height: 5rem;
}

#error-text h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}

#error-text p {
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }

  0.01% {
    opacity: 0;
    transform: translateY(2rem);
  }

  100% {
    opacity: 1 !important;
    transform: translateY(0);
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  99.99% {
    opacity: 0;
    transform: translateY(2rem);
  }

  100% {
    opacity: 0;
    transform: translateY(2rem);
  }
}

/* Specific styling for industry and volume selects */
#industry,
#volume {
  width: 100%;
}

/* Mobile optimizations */
@media screen and (max-width: 600px) {
  #form {
    max-width: 100%;
    margin: 1rem;
  }

  #form form {
    padding: 1.25rem;
  }

  .form-group label {
    font-size: 0.8rem;
  }

  #form form input[type="text"],
  #form form input[type="email"],
  #form form input[type="tel"],
  #form form input[type="url"],
  #form form input[type="date"],
  #form form input[type="time"],
  #form form select {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

@media screen and (max-width: 470px) {
  #hero h3 {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }

  #form form {
    padding: 1rem;
  }

  .form-group {
    gap: 0.25rem;
  }
}