#city option,
#city_2 option {
  color: #000;
}
div#formResponse {
  margin: 0 !important;
  width: 0 !important;
}
.frm_error {
  font-size: 12px;
}
form.vertical-form .iti.iti--allow-dropdown.iti--separate-dial-code {
  margin-bottom: 8px;
}
input::placeholder {
  color: #000000db !important;
}
select#city,
select#city_2 {
  border: 1px solid #ccc;
}
form#verticalForm input::placeholder,
#horizontalForm input::placeholder {
  color: #000000db !important;
}
.iti__selected-dial-code {
  color: #000 !important;
}
form#horizontalForm input,
select#city,
select#city_2 {
  background: #fff;
  color: #000;
  height: 50px;
}
form#horizontalForm select#city {
  background: #fff;
  color: #000;
}
input#phone::placeholder {
  color: #000 !important;
}
/*form#verticalForm button {
    background: #fff !important;
    color: #000 !important;
}*/
form.vertical-form .iti.iti--allow-dropdown.iti--separate-dial-code {
  /*    margin-bottom: 10px !important;*/
  width: 100%;
}
.iti__selected-flag {
  height: auto;
  padding: 12px 8px;
}
select#city,
select#city_2 {
  padding-top: 0 !important;
}
input#phone::placeholder {
  color: #525050 !important;
}
.iti__selected-dial-code {
  color: #fff;
}
.grecaptcha-badge {
  z-index: 9 !important;
}
form.vertical-form input,
form.vertical-form select {
  background-color: #fff;
  color: #000 !important;
  border: 1px solid #cecece;
}
/*input#phone{padding-left: 59px !important;}*/
.iti--allow-dropdown input,
.iti--allow-dropdown input[type="text"],
.iti--allow-dropdown input[type="tel"],
.iti--separate-dial-code input,
.iti--separate-dial-code input[type="text"],
.iti--separate-dial-code input[type="tel"] {
  padding-right: 6px;
  padding-left: 74px !important;
  margin-left: 0;
}
input::placeholder {
  color: #fff !important;
}
select#city,
select#city_2 {
  border: 1px solid #ccc;
  border-radius: 5px !important;
  padding-bottom: 0px !important;
}
.frm_error {
  display: none;
  color: #b94a48;
  font-weight: 400 !important;
}
.frm_error {
  text-align: left !important;
}
.custom-hidden {
  display: none;
}
.form-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
form.vertical-form .iti.iti--allow-dropdown.iti--separate-dial-code {
  margin-bottom: 15px !important;
}
div#brouchure-popup
  form.vertical-form
  .iti.iti--allow-dropdown.iti--separate-dial-code {
  margin-bottom: 8px !important;
}
#brochure-pop-malay .iti.iti--allow-dropdown.iti--separate-dial-code,
#brochure-pop .iti.iti--allow-dropdown.iti--separate-dial-code {
  margin-bottom: 8px !important;
}

form.horizontal-form input::placeholder,
form.horizontal-form select::placeholder,
form.vertical-form input::placeholder,
form.vertical-form select::placeholder {
  opacity: 1; /* Ensures full opacity for placeholder text */
}

/* Safari */
form.horizontal-form input::-webkit-input-placeholder,
form.horizontal-form select::-webkit-input-placeholder,
form.vertical-form input::-webkit-input-placeholder,
form.vertical-form select::-webkit-input-placeholder {
}

form.horizontal-form input:-ms-input-placeholder, /* Internet Explorer 10+ */
form.horizontal-form select:-ms-input-placeholder,
form.vertical-form input:-ms-input-placeholder, /* Internet Explorer 10+ */
form.vertical-form select:-ms-input-placeholder {
}

form.horizontal-form input::-ms-input-placeholder, /* Microsoft Edge */
form.horizontal-form select::-ms-input-placeholder,
form.vertical-form input::-ms-input-placeholder, /* Microsoft Edge */
form.vertical-form select::-ms-input-placeholder {
}

.loading-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid #ccc;
  border-top: 3px solid #0073aa;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

form.vertical-form {
  max-width: 400px; /* Set a max width for the form */
  /* margin: 0 auto; */ /* Center the form */
  display: flex;
  flex-direction: column; /* Stack items vertically */
  margin: 0 auto;
}

form.vertical-form input,
form.vertical-form select,
form.vertical-form button {
  width: 100%; /* Make the inputs fill the form width */
  padding: 10px !important; /* Add padding inside the fields */
  margin-bottom: 15px; /* Add space between fields */
  font-size: 16px; /* Set a readable font size */
  border: 1px solid #ccc; /* Add a light border */
  border-radius: 4px; /* Slight rounding for better appearance */
  box-sizing: border-box; /* Ensure padding doesn't overflow the element */
  min-height: 50px;
}
form.vertical-form input,
form.vertical-form select {
  background-color: #fff;
  color: #000;
  border: 1px solid #cecece;
}
form.vertical-form input:focus,
form.vertical-form select:focus {
  color: #a1a1a1;
}

/* Hide the label but keep it accessible */
form.vertical-form label {
  position: absolute;
  left: -9999px;
}

/* Style the submit button */
form.vertical-form button {
  background-color: #30123d; /* Blue background */
  color: white; /* White text */
  border: none;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.3s ease;
}

form.vertical-form button:hover {
  background-color: #000000; /* Darker black on hover */
}

/* Response div for feedback after submission */
#formResponse {
  margin-top: 10px;
  font-size: 16px;
  color: green;
  text-align: center;
}

form.horizontal-form .frm_error {
  position: absolute;
}

form.horizontal-form button {
  margin-top: -20px;
}

/* .et_pb_row.et_pb_row_1 {
    display: inline;
} */

form.horizontal-form {
  display: flex;
  flex-wrap: nowrap; /* Allow wrapping on small screens */
  align-items: center; /* Align fields in the center */
  justify-content: center; /* Spread out fields horizontally */
  gap: 16px; /* Spacing between form elements */
  max-width: 100%; /* Form width */
  margin: 0 auto; /* Center the form on the page */
  margin-top: 30px;
}

form.horizontal-form input:focus,
form.horizontal-form select:focus {
  color: #a1a1a1;
}

/* Form row styling */
form.horizontal-form .form-row {
}

form.horizontal-form .form-row,
form.horizontal-form .form-row-full {
  margin-bottom: 20px;
}

/* Input, select styling */
form.horizontal-form input,
form.horizontal-form select {
  width: 100%; /* Full width within each form-row */
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  min-height: 50px;
  background-color: #191919;
  color: #a1a1a1;
  border: 1px solid #cecece;
}

/* Hide the label but keep it accessible for screen readers */
form.horizontal-form label {
  position: absolute;
  left: -9999px;
}

/* Button styling */
form.horizontal-form button {
  padding: 15px 20px;
  background-color: #30123d; /* Blue background */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  transition: background-color 0.3s ease;
  flex-shrink: 0; /* Ensure the button does not shrink */
}

form.horizontal-form button:hover {
  background-color: #000000; /* Darker black on hover */
}

form.horizontal-form input[type="tel"],
form.vertical-form input[type="tel"] {
  text-indent: unset !important;
  padding-right: 0px;
}

form.horizontal-form select {
  margin-left: -15px;
  min-width: 220px;
}

form.horizontal-form div#frm_error_states {
  margin-left: -15px;
}

form.horizontal-form select#city_2 {
  margin-left: 1px;
  margin-right: 20px;
}

/* Response message */
#formResponse {
  margin-top: 10px;
  font-size: 16px;
  color: green;
  text-align: center;
  width: 100%;
}

.form-container {
  position: relative;
}

.custom-lead-form-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.custom-lead-form-overlay {
  background-color: #474747;
  opacity: 0.4;
}

/* Style for the spinner */
.custom-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Keyframes for spinner rotation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.iti__flag-container {
  pointer-events: none;
  cursor: default;
}
.iti__arrow {
  display: none;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 900px) {
  form#horizontalForm select#city,
  form#horizontalForm select#city_2 {
    padding-left: 10px !important;
  }
}
@media (max-width: 768px) {
  .et_pb_row.et_pb_row_1,
  form.horizontal-form .iti {
    display: block;
  }
  form.horizontal-form {
    flex-direction: column; /* Stack form elements vertically on small screens */
    align-items: stretch;
  }

  form.horizontal-form .form-row {
    width: 100%; /* Full width on small screens */
    margin-bottom: 10px;
  }

  form.horizontal-form button {
    width: 100%; /* Full width for the button on small screens */
  }
  form.horizontal-form .form-row {
    margin-bottom: 0px;
  }
  form.horizontal-form input,
  form.horizontal-form select {
    margin-bottom: 0;
    min-height: 50px;
  }
  form.horizontal-form button {
    margin-top: 0px;
  }
  form.horizontal-form select#city {
    margin-top: -10px;
  }
  form.horizontal-form input[type="tel"] {
    padding-right: 6px;
  }
  form.vertical-form select {
    min-height: 50px;
  }
  form.horizontal-form .frm_error {
    position: unset;
  }
  form.horizontal-form .iti.iti--allow-dropdown.iti--separate-dial-code {
    margin-bottom: 0;
  }
  form.horizontal-form select {
    margin-left: 0;
  }
  form.horizontal-form div#frm_error_states {
    margin-left: 0;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  .et_pb_row.et_pb_row_1,
  form.horizontal-form .iti {
    display: block;
  }
  form.horizontal-form {
    flex-direction: column; /* Stack form elements vertically on small screens */
    align-items: stretch;
    width: 65%;
    margin-top: 0px;
  }

  form.horizontal-form .form-row {
    width: 100%; /* Full width on small screens */
    margin-bottom: 10px;
  }

  form.horizontal-form button {
    width: 100%; /* Full width for the button on small screens */
  }
  form.horizontal-form .form-row {
    margin-bottom: 5px;
  }
  form.horizontal-form input,
  form.horizontal-form select {
    margin-bottom: 0;
  }
  form.horizontal-form button {
    margin-top: 0px;
  }
  form.horizontal-form select {
    margin-top: -16px;
    height: 50px;
  }
  form.horizontal-form select#city_2 {
    margin-top: 10px;
  }
  form.vertical-form select {
    height: 50px;
    min-height: 50px;
  }
  form.horizontal-form .frm_error {
    position: unset;
  }
  form.horizontal-form .iti.iti--allow-dropdown.iti--separate-dial-code {
    margin-bottom: 0;
  }
  form.horizontal-form select {
    margin-left: 0;
  }
  form.horizontal-form div#frm_error_states {
    margin-left: 0;
  }
}

/* Responsive adjustments */
@media (max-width: 500px) {
  .et_pb_row.et_pb_row_1,
  form.horizontal-form .iti {
    display: block;
  }
  form.vertical-form {
    padding: 10px;
  }

  form.vertical-form input,
  form.vertical-form select,
  form.vertical-form button {
    font-size: 14px;
  }
  form.vertical-form select {
    height: 50px;
    min-height: 50px;
  }
  form.horizontal-form .frm_error {
    position: unset;
  }
  form.horizontal-form .iti.iti--allow-dropdown.iti--separate-dial-code {
    margin-bottom: 0;
  }
  form.horizontal-form div#frm_error_states {
    margin-left: 0;
  }
  .horizontal-form .other_btn {
    margin-top: -35px;
  }
}

@media screen and (min-width: 600px) {
  #primary {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1366px) and (max-width: 1366px) {
  form#horizontalForm input,
  form#horizontalForm select {
    min-width: 180px !important;
  }
  .custom-1366-width-180px {
    width: 180px;
  }
}
@media (max-width: 1366px) {
  form#horizontalForm input,
  form#horizontalForm select {
    min-width: 180px !important;
  }
  .custom-1366-width-180px {
    width: 180px;
  }
}
@media (max-width: 1200px) {
  form.horizontal-form {
    gap: 10px;
  }
}