#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;
}
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: 14px 6px 10px 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: 14px;
    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: -16px;
    }
    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: 0px;
    }
    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;
    }
}

@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;
}
}