/* @import url("/css/all.css");
.mailing_list{
      padding: 10px;
      display: flex;
      flex-flow: column;
      gap: 50px;
}
.mailing_1{
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.mailing_2{
      background: var(--light_grey);
      padding: 50px 10px;
}
.mailing_img img{
      width: 100%;
}

@media screen and (min-width : 600px) {
      .mailing_list{
            width: 500px;
            margin: auto;
      }
}
@media screen and (min-width : 800px) {
      .mailing_list{
            width: 90%;
      }
}
@media screen and (min-width : 1000px) {
      .mailing_list{
            width: 90%;
            flex-flow: row;
            justify-content: space-between;
            gap: 10px;
      }
      .mailing_div{
            display: flex;
            align-items: center;
      }
      .mailing_1{
            width: 40%;
      }
      .mailing_2{
            width: 50%;
            padding: 10px;
            background: var(--light_grey);
      }
} */
/*------------------------------------*\
 * #IMPORTS
 * Import external stylesheets here.
\*------------------------------------*/
@import url(/css/all.css?v=10);

/*------------------------------------*\
 * #COMMON MOBILE-FIRST STYLES
 * These styles apply by default to all screen sizes,
 * unless overridden by specific media queries.
\*------------------------------------*/

/* Shared heading font weight for newsletter headers */
.newsletter-header-large,
.newsletter-header-small {
  font-weight: bolder;
}

/* Common input field styles (for custom-input and custom-input-phone) */
.custom-input,
.custom-input-phone,
.custom-input2 {
  height: 40px; /* Reduced height */
  border: none;
  color: #000; /* Ensures text is visible */
  border-radius: 0 !important; /* Retained !important as per original */
}

/* Common focus styles for various input types */
.custom-input:focus,
.custom-input-phone:focus,
.custom-input2:focus {
  outline: none;
  box-shadow: none;
}

/* Common styles for button (submit-contact) */
.submit-contact {
  display: flex; /* Enables flexbox */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  padding: 0.75rem 1.25rem; /* Standard button padding */
  color: white;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

/* Common form group label styles */
.form-group label,
.custom-checkbox-label {
  color: black;
  font-weight: bold;
}

/*------------------------------------*\
 * #SECTION-SPECIFIC MOBILE-FIRST STYLES
 * Styles unique to each section on smaller screens.
\*------------------------------------*/

/* Newsletter Section */
.newsletter-section {
  margin-top: 60px;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
}

/* Newsletter Content Wrapper */
.newsletter-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Newsletter Header Visibility (Mobile vs. Desktop) */
.newsletter-header-large {
  text-align: center;
  display: none; /* Hidden by default, shown on large screens */
}

.newsletter-header-small {
  text-align: center;
  display: block; /* Shown by default, hidden on large screens */
}

/* Newsletter Text Container */
.newsletter-text-container {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  width: 100%; /* Full width for small screens */
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box; /* Includes padding in total width/height */
}

/* Newsletter List Styling */
.newsletter-text-container ul {
  text-transform: capitalize;
  padding-left: 20px; /* Adjust for list indentation */
  margin-bottom: 1em;
}

/* Submit Career Form Section */
.submit-career-form-section {
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  max-width: 1140px; /* Max width for container */
  margin-left: auto;
  margin-right: auto;
}

/* Form Row (for centering content) */
.form-row {
  display: flex;
  flex-direction: column; /* Stacks items vertically */
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Career Form Container (the main box) */
.career-form-container {
  width: 100%; /* Full width on small screens */
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: lightgray;
  color: black;
  border-radius: 0px;
  box-sizing: border-box; /* Ensures padding is included */
}

/* Career Form Box (inner padding for form elements) */
.career-form-box {
  color: lightgray;
  padding-left: 15px;
  padding-right: 15px;
}

/* Form Group (for individual input sections) */
.form-group {
  margin-bottom: 1rem;
}

/* Form Group Label */
.form-group label {
  display: block; /* Ensures label takes its own line */
  margin-bottom: 0.5rem; /* Standard label spacing */
}

/* Custom Input Field */
.custom-input,
.custom-input-phone {
  width: 100%; /* Ensures inputs take full width */
  padding: 0.375rem 0.75rem; /* Standard input padding */
  box-sizing: border-box;
  display: block; /* Ensures inputs take full width */
}

/* Phone Input Group (for country code and number) */
.phone-input-group {
  display: flex;
  flex-direction: row; /* Stacks them on smaller screens */
  gap: 0; /* No gap when stacked */
  align-items: center; /* Vertically aligns items */
}

.phone-input-group .country-code-select,
.phone-input-group .custom-input-phone {
  width: 100%; /* Make them full width on smaller screens */
  margin-bottom: 0; /* Override any default margins */
}

/* Custom Checkbox Group */
.custom-checkbox-group {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  position: relative;
}

/* Custom Checkbox Input */
.custom-checkbox-input {
  flex-shrink: 0; /* Prevents input from shrinking */
  width: 1rem; /* Standard checkbox size */
  height: 1rem; /* Standard checkbox size */
  margin-top: 0.25rem; /* Aligns with text baseline */
  margin-right: 0.5rem; /* Space between checkbox and label */
}

/* Custom Checkbox Label */
.custom-checkbox-label a {
  color: inherit; /* Inherit color, or set specific link color */
  text-decoration: underline;
}

/* Submit Button */
.submit-contact {
  width: 50%; /* Default for smaller screens */
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg); /* Example color */
}

/* Legacy .career-form styling (kept as per original due to !important) */
.career-form {
  background-color: lightgray;
  color: black !important;
  border-radius: 30px;
}

/*------------------------------------*\
 * #MEDIA QUERIES
 * Styles that apply only to specific screen sizes.
\*------------------------------------*/

/* For screens smaller than large (max-width: 991.98px) */
@media (max-width: 991.98px) {
  /* Newsletter header visibility on small screens */
  .newsletter-header-large {
    display: none;
  }

  .newsletter-header-small {
    display: block;
  }

  /* Phone input group behavior on smaller screens */
  .phone-input-group .country-code-select,
  .phone-input-group .custom-input-phone {
    width: 100%;
  }

  .phone-input-group {
    flex-direction: row;
    gap: 0;
  }
}

/* For small devices (min-width: 576px) */
@media (min-width: 576px) {
  /* Career form container width for small screens */
  .career-form-container {
    width: 100%;
  }

  /* Newsletter text container width for small screens */
  .newsletter-text-container {
    width: 100%;
  }

  /* Submit button width for small screens */
  .submit-contact {
    width: 66.666667%; /* 8/12 of 100% */
  }
}

/* For large devices (min-width: 992px) */
@media (min-width: 992px) {
  /* Newsletter header visibility on large screens */
  .newsletter-header-large {
    display: block;
  }

  .newsletter-header-small {
    display: none;
  }

  /* Newsletter text container width and centering on large screens */
  .newsletter-text-container {
    width: 80%;
    margin: 10px auto;
  }

  /* Career form container border-radius for large screens */
  .career-form-container {
    border-radius: 30px;
    width: 66.666667%; /* 8/12 of 100% */
  }

  /* Career form box padding for large screens */
  .career-form-box {
    padding-left: 45px;
    padding-right: 45px;
  }

  /* Phone input group behavior on large screens */
  .phone-input-group {
    flex-direction: row; /* Arranges items in a row */
    gap: 10px; /* Adds space between select and input */
  }

  .phone-input-group .country-code-select {
    width: 25%; /* Roughly 3/12 width */
  }

  .phone-input-group .custom-input-phone {
    width: 75%; /* Roughly 9/12 width */
  }

  /* Submit button width for large screens */
  .submit-contact {
    width: 25%; /* 6/12 of 100% */
  }
}