/* rythmic/public/css/contact-us.css */

/* Global adjustments for body and html to prevent horizontal overflow and set box-sizing */
html, body {
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll for the entire page */
  min-width: unset; /* Ensure no global min-width is forcing horizontal overflow */
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Apply border-box globally */
  color: var(--gray900); /* Default text color */
}

.contact-us {
  align-items: flex-start; /* Aligns content to the start of the cross axis (left for column) */
  background-color: var(--white);
  display: flex;
  flex-direction: column; /* Stack sections vertically */
  width: 100%;
  box-sizing: border-box;
  min-width: unset; /* Remove fixed min-width */
  height: auto; /* Ensure content dictates height, removed fixed height */
  overflow-x: hidden;
}

.contact-us .frame-42001324 {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  z-index: 1;
  margin-top: 80px; /* Clear space for the fixed navbar */
  min-height: calc(100vh - 80px - 112px); /* To push footer down if content is short */
  height: auto; /* Ensure content dictates height */
  flex-grow: 1; /* Allow this frame to expand and push footer down */
}

.contact-us .x404-section { /* This is the main content wrapper for the contact page */
  display: flex;
  flex-direction: row; /* Desktop: form and image side-by-side */
  align-items: flex-start; /* Align content at the top of the section */
  background-color: var(--white);
  width: 100%;
  max-width: 1440px; /* Constrain max width for desktop */
  margin: 0 auto; /* Center the section */
  padding: 96px 0px; /* Desktop top/bottom padding */
  position: relative;
  height: auto; /* Ensure height is auto */
  justify-content: center; /* Center content horizontally within the section */
  gap: 64px; /* Space between the form column and the image */
}

.contact-us .frame-302 { /* This element acts as a flex item within x404-section, contains content-1 and image */
  display: flex;
  flex: 1; /* Allow to grow to fill x404-section */
  width: 100%; /* Take full width within its parent */
  padding: 0 32px; /* Inner horizontal padding for desktop */
  box-sizing: border-box;
  position: relative;
  align-items: flex-start; /* Align its content (content-1 and image) to start */
  justify-content: space-between; /* Space them out */
  gap: 64px; /* Gap between form and image */
}

.contact-us .content-1 { /* Form side column */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: none; /* Prevent it from growing/shrinking */
  width: 550px; /* Fixed width for the form column on desktop */
  padding: 0;
  position: relative;
  left: 0;
  top: 0;
}

.contact-us .content-2 { /* This contains heading-and-supporting-text and form */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
}

.contact-us .heading-and-supporting-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.contact-us .heading { /* H1 for Contact Rythmic */
  color: var(--gray900);
  font-weight: 600;
  line-height: 44px;
  font-size: 44px;
  margin-top: -1.00px;
  width: 100%;
  max-width: 448px;
}

.contact-us .supporting-text { /* "Our friendly team..." */
  color: var(--gray600);
  font-weight: 400;
  line-height: 30px;
  font-size: 20px;
  width: 100%;
  max-width: 448px;
}

.contact-us .form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

.contact-us .form-fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.contact-us .form-row { /* Renamed from .row to be more specific and avoid conflicts */
  display: flex;
  flex-direction: row; /* Desktop: fields side-by-side */
  align-items: flex-start;
  gap: 24px; /* Adjusted gap to match form-fields gap */
  width: 100%;
}

.contact-us .input {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1; /* Allow input fields in a row to take equal space */
  gap: 8px; /* Consistent gap */
  width: 100%;
}

.contact-us .label {
  color: var(--gray700);
  font-weight: 500;
  line-height: 20px;
  margin-top: -1.00px;
  white-space: nowrap;
  width: fit-content;
}

.contact-us .content { /* Used for input text wrap and checkbox text */
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
}

/* --- FORM FIELD STYLING (Inputs, Textareas, Error Containers) --- */

.contact-us input[type="text"],
.contact-us input[type="tel"],
.contact-us input[type="email"] {
  border: 1px solid var(--gray300); /* Single, consistent border */
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  background-color: var(--white);
  font-family: inherit; /* Ensure font is inherited from body */
  color: var(--gray900); /* Set text color for inputs */
}

/* Placeholder text color */
.contact-us input::placeholder,
.contact-us textarea::placeholder {
  color: var(--gray500); /* Lighter gray for placeholders */
  opacity: 1; /* Ensure opacity is full */
}

.contact-us textarea {
  width: 100%;
  height: 115px;
  border: 1px solid var(--gray300);
  border-radius: 8px;
  resize: vertical;
  font-size: 16px;
  padding: 12px 16px;
  box-sizing: border-box;
  font-family: inherit; /* Ensure font is inherited from body */
  color: var(--gray900); /* Set text color for textarea */
}

.contact-us .error_container {
  font-size: 14px;
  color: rgb(184, 17, 17);
  margin-top: 4px;
}

#success_message, #failed_message {
  display: none; /* Controlled by JS */
}
/* --- END FORM FIELD STYLING --- */

.contact-us .text-3 { /* Checkbox text */
  color: var(--gray600);
  font-weight: 400;
  line-height: 24px;
  margin-top: -1.00px;
  flex: 1;
}

.contact-us .button-1 { /* Submit button wrapper */
  display: flex;
  align-self: stretch;
  width: 100%;
}

.contact-us .button-base-1 { /* Submit button actual style */
  background-color: var(--blue-chill);
  border: 1px solid var(--blue-chill);
  box-shadow: 0px 1px 2px #1018280d;
  display: flex;
  flex: 1;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 8px;
}

.contact-us .text-1 { /* Submit button text */
  color: var(--white);
  font-weight: 600;
  line-height: 24px;
  margin-top: -1.00px;
  white-space: nowrap;
  width: fit-content;
}

.contact-us .image { /* Image side of the section */
  display: flex; /* Make it a flex container for its img child */
  flex: 1; /* Allow this column to grow and take remaining space */
  /* REMOVED: background-image property, as it's now an <img> tag in HTML */
  background-position: 50% 50%; /* Keep if you apply a background later */
  background-size: cover; /* Keep if you apply a background later */
  position: relative;
  height: auto; /* Let content (img) dictate height, or rely on flex container */
  min-height: 400px; /* Minimum height for visibility on desktop */
  border-radius: 10px; /* Consistent */
  overflow: hidden; /* Ensure image respects border-radius */
  align-items: center; /* Center the img if it doesn't perfectly fill */
  justify-content: center; /* Center the img if it doesn't perfectly fill */
}

.contact-us .rectangle-932 { /* Styling for the actual img tag (rectangle-932.svg) */
  height: 100%; /* Make the image fill the height of its parent (.image) */
  width: 100%; /* Make the image fill the width of its parent (.image) */
  object-fit: cover; /* Scale image to cover the entire container */
  display: block; /* Remove any extra spacing */
  border-radius: 10px; /* Apply border-radius to the image itself */
}


/* --- Mobile Responsiveness Overrides (max-width: 991.98px for 'lg' breakpoint) --- */
@media (max-width: 991.98px) {

  /* Main section should stack its children */
  .contact-us .x404-section { /* This is the main section containing frame-302 */
    flex-direction: column; /* Stack form and image */
    padding: 48px 16px;
    gap: 32px;
  }

  .contact-us .frame-302 { /* Main content row for mobile (contains form and image) */
    flex-direction: column;
    padding: 0;
    gap: 32px;
    max-width: 100%;
  }

  .contact-us .content-1 { /* Form side column */
    max-width: 100%;
    width: 100%;
    align-items: flex-start;
    padding: 0 16px; /* Add inner padding for mobile */
  }

  .contact-us .content-2 { /* Heading and Form wrapper */
    width: 100%;
    gap: 24px;
  }

  .contact-us .heading-and-supporting-text {
    width: 100%;
    align-items: flex-start;
    gap: 16px;
  }

  .contact-us .heading {
    font-size: 36px;
    line-height: 44px;
    text-align: left;
  }

  .contact-us .supporting-text {
    font-size: 16px;
    line-height: 24px;
    text-align: left;
  }

  .contact-us .form {
    width: 100%;
    gap: 24px;
  }

  .contact-us .form-fields {
    width: 100%;
    gap: 16px;
  }

  .contact-us .form-row {
    flex-direction: column; /* Stack fields in a row (First Name / Last Name) */
    gap: 16px;
    width: 100%;
  }

  .contact-us .input {
    width: 100%;
  }

  .contact-us .label {
    white-space: normal;
  }

  .contact-us .text-3 { /* Checkbox text */
    white-space: normal;
  }

  .contact-us .image { /* Image side of the section */
    flex: none;
    width: 100%;
    min-height: 250px; /* Smaller min-height for mobile */
    height: 250px; /* Fixed height for image area on mobile, adjust as needed */
    order: 1; /* Place image after text on mobile by default */
    /* REMOVED: background-image property from mobile too */
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    margin: 0 16px; /* Add horizontal margin to align with content */
  }
  .contact-us .rectangle-932 {
      display: block; /* Ensure the image is visible on mobile */
  }
}

/* Variables - assumed to be imported from styleguide.css or defined globally */
:root {
  --white: #ffffff;
  --gray100: #f2f4f7;
  --gray300: #d0d5dd;
  --gray500: #667084;
  --gray600: #475467;
  --gray700: #344053;
  --gray900: #101828;
  --blue-chill: #0199a6;
  --blue-chill-2: #0199a6;
  --font-family-inter: "Inter", Helvetica;
}