.form-container {
  max-width: 800px;
  margin: 20px auto;
  background-color: #f3f1f1;
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 20px;
  /* margin-left: 388px; */
}

@media (max-width: 1024px) {
  .form-container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .form-container {
    width: 100%;
    padding: 15px;
  }
}

/* Progress Bar Styling */
.progress-bar-container {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
}

.progress-bar-stick {
  flex: 1;
  height: 5px;
  background-color: #CECECE;
  border-radius: 8px;
}

.progress-bar-stick.active {
  background-color: #FF0000 !important;
  /* Only the progress bar sticks should turn red */
}

/* Form Steps Styling */
.form-step {
  display: none;
}

.form-step.active {
  display: block;
  width: 500px;
  margin-left: 112px;
}

.form-select {
  border-radius: 25px;
  padding: 6px 12px;
  font-size: 0.9rem;
  height: 36px;
  line-height: 1.2;
  overflow: visible;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.form-control {
  border-radius: 25px;
  font-size: 0.8rem;
  height: 36px;
  padding: 10px;
}

.error-message {
  font-size: 13px;
  margin-left: 8px;
  font-weight: 500;
}

.next-red {
  background-color: red;
  border-color: red;
  color: white;
  /* Optional: Ensures the text is visible */
  border-radius: 25px;
  padding-left: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}

.next-red:hover {
  background-color: red;
  border-color: red;
  color: white;
  box-shadow: none;
}

.btn-white {
  border-color: black;
  border-radius: 25px;
}

.back-white {
  border-color: black;
  border-radius: 25px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100px;
  height: auto;
}

.back-white:hover {
  border-color: black;
  /* Keep the border color red on hover */
  color: black;
  /* Keep the text color white on hover */
  box-shadow: none;
}

/* Basic styling for the container */
/* Basic styling for the container */
/* General Styles for Both Toggles */
.toggle-container {
  position: relative;
  display: flex;
  border: 2px solid #ccc;
  border-radius: 20px;
  overflow: hidden;
  background-color: #fff;
  /* Default background color */
}

/* Hide the radio buttons */
.toggle-container input[type="radio"] {
  display: none;
}

/* Style the labels */
/* General Styles for Both Toggles */
.toggle-container {
  position: relative;
  display: flex;
  border: 2px solid #ccc;
  border-radius: 20px;
  overflow: hidden;
  background-color: #fff;
  /* Default background color */
}

/* Hide the radio buttons */
.toggle-container input[type="radio"] {
  display: none;
}

/* Style the labels */
.toggle-container label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  z-index: 1;
  color: black;
  transition: color 0.3s ease;
}

/* Slider background */
.toggle-container .slider {
  position: absolute;
  height: 100%;
  border-radius: 20px;
  z-index: 0;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Yes/No Toggle Styles */
.yes-no-toggle {
  position: relative;
  width: 101px;
  /* Original width */
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f4f4f4;
  border: 2px solid #ccc;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
}


.yes-no-toggle label {
  z-index: 2;
  flex: 1;
  text-align: center;
  font-size: 14px;
  margin: 0;
  padding: 5px;
  transition: color 0.3s ease;
}

.yes-no-toggle .slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 50%;
  /* Half of the container */
  height: calc(100% - 4px);
  background-color: red;
  border-radius: 20px;
  transition: transform 0.3s ease, background-color 0.3s ease;
  z-index: 1;
}

/* Move slider for "Yes" */
#yes:checked~.slider {
  transform: translateX(0);
  background-color: red;
}

/* Move slider for "No" */
#no:checked~.slider {
  transform: translateX(100%);
  background-color: red;
}

/* Change text color to white for selected option */
#yes:checked~label[for="yes"],
#no:checked~label[for="no"] {
  color: white;
}

/* -------yes or no Sri Lankan-------- */

.yes-no-srilankan {
  width: 108px;
  /* Increased width to match second code */
  position: relative;
  display: flex;
}

.yes-no-srilankan input[type="radio"] {
  display: none;
  /* Hide the radio buttons */
}

.yes-no-srilankan label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  z-index: 1;
  color: black;
  transition: color 0.3s ease;
}

.yes-no-srilankan .slider {
  position: absolute;
  width: 52.33%;
  height: 100%;
  background-color: red;
  border-radius: 20px;
  z-index: 0;
  transition: transform 0.3s ease;
}

/* Move slider for "Yes" */
#yes-srilankan:checked~.slider {
  transform: translateX(0);
  /* Align slider for "Yes" */
  background-color: red;
  /* Keep red color */
}

/* Move slider for "No" */
#no-srilankan:checked~.slider {
  transform: translateX(90%);
  /* Move slider to the right (like second code) */
  background-color: red;
  /* Keep red color */
}

/* Change text color to white for selected option */
#yes-srilankan:checked~label[for="yes-srilankan"],
#no-srilankan:checked~label[for="no-srilankan"] {
  color: white;
}

/* -------yes or no validNIC-------- */

.yes-no-validNIC {
  width: 108px;
  position: relative;
  display: flex;
}

.yes-no-validNIC input[type="radio"] {
  display: none;
}

.yes-no-validNIC label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  z-index: 1;
  color: black;
  transition: color 0.3s ease;
}

.yes-no-validNIC .slider {
  position: absolute;
  width: 52.33%;
  /* Fixed width of slider */
  height: 100%;
  background-color: red;
  border-radius: 20px;
  z-index: 0;
  /* Behind labels */
  transition: transform 0.3s ease;
}

/* Move slider for "Yes" */
#yes-validNIC:checked~.slider {
  transform: translateX(0);
  /* Align slider for "Yes" */
  background-color: red;
  /* Keep red color */
}

/* Move slider for "No" */
#no-validNIC:checked~.slider {
  transform: translateX(90%);
  /* Move slider to the right (like second code) */
  background-color: red;
  /* Keep red color */
}

/* Change text color to white for selected option */
#yes-validNIC:checked~label[for="yes-validNIC"],
#no-validNIC:checked~label[for="no-validNIC"] {
  color: white;
}


/* -------yes or no tax-------- */

.yes-no-tax {
  width: 108px;
  position: relative;
  display: flex;
}

.yes-no-tax input[type="radio"] {
  display: none;
}

.yes-no-tax label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  z-index: 1;
  color: black;
  transition: color 0.3s ease;
}

.yes-no-tax .slider {
  position: absolute;
  width: 52.33%;
  /* Fixed width of slider */
  height: 100%;
  background-color: red;
  border-radius: 20px;
  z-index: 0;
  /* Behind labels */
  transition: transform 0.3s ease;
}

/* Move slider for "Yes" */
#yes-tax:checked~.slider {
  transform: translateX(0);
  /* Align slider for "Yes" */
  background-color: red;
  /* Keep red color */
}

/* Move slider for "No" */
#no-tax:checked~.slider {
  transform: translateX(90%);
  /* Move slider to the right (like second code) */
  background-color: red;
  /* Keep red color */
}

/* Change text color to white for selected option */
#yes-tax:checked~label[for="yes-tax"],
#no-tax:checked~label[for="no-tax"] {
  color: white;
}


/* ---political yes or no */
.political {
  width: 108px;
  /* Adjusted width for consistency */
  position: relative;
  display: flex;
}

.political input[type="radio"] {
  display: none;
  /* Hide the radio buttons */
}

.political label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  z-index: 1;
  color: black;
  transition: color 0.3s ease;
}

.political .slider {
  position: absolute;
  width: 52.33%;
  height: 100%;
  background-color: red;
  border-radius: 20px;
  z-index: 0;
  transition: transform 0.3s ease;
}

/* Move slider for "Yes" */
#yes-political:checked~.slider {
  transform: translateX(0);
  /* Align slider for "Yes" */
  background-color: red;
  /* Slider color for "Yes" */
}

/* Move slider for "No" */
#no-political:checked~.slider {
  transform: translateX(90%);
  /* Move slider to the right (like second code) */
  background-color: red;
  /* Slider color for "No" */
}

/* Change text color to white for selected option */
#yes-political:checked~label[for="yes"] {
  color: #ff4d4d;
}

#no-political:checked~label[for="no"] {
  color: #ff4d4d;
  /* Red text for "No" */
}


/* ----debit card--- */
.debit-card {
  width: 108px;
  /* Adjusted width for consistency */
  position: relative;
  display: flex;
}

.debit-card input[type="radio"] {
  display: none;
  /* Hide the radio buttons */
}

.debit-card label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  z-index: 1;
  color: black;
  transition: color 0.3s ease;
}

.debit-card .slider {
  position: absolute;
  width: 52.33%;
  /* Fixed width of slider */
  height: 100%;
  background-color: red;
  border-radius: 20px;
  z-index: 0;
  /* Behind labels */
  transition: transform 0.3s ease;
}

/* Move slider for "Yes" */
#yes-debit:checked~.slider {
  transform: translateX(0);
  /* Align slider for "Yes" */
  background-color: red;
  /* Gray color for "Yes" */
}

/* Move slider for "No" */
#no-debit:checked~.slider {
  transform: translateX(90%);
  /* Move slider to the right (for "No") */
  background-color: red;
  /* Gray color for "No" */
}

/* Change text color to white for selected option */
#yes-debit:checked~label[for="yes"],
#no-debit:checked~label[for="no"] {
  color: white;
  /* White text for selected option */
}


/* ----pos transactions---- */
.pos-trans {
  width: 108px;
  position: relative;
  display: flex;
}

.pos-trans input[type="radio"] {
  display: none;
  /* Hide the radio buttons */
}

.pos-trans label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  z-index: 1;
  color: black;
  transition: color 0.3s ease;
}

.pos-trans .slider {
  position: absolute;
  width: 52.33%;
  /* Fixed width of slider */
  height: 100%;
  background-color: red;
  border-radius: 20px;
  z-index: 0;
  /* Behind labels */
  transition: transform 0.3s ease;
}

/* Move slider for "Yes" */
#yes-pos:checked~.slider {
  transform: translateX(0);
  /* Align slider for "Yes" */
  background-color: red;
  /* Gray color for "Yes" */
}

/* Move slider for "No" */
#no-pos:checked~.slider {
  transform: translateX(90%);
  /* Move slider to the right (for "No") */
  background-color: red;
  /* Gray color for "No" */
}

/* Change text color to white for selected option */
#yes-pos:checked~label[for="yes"],
#no-pos:checked~label[for="no"] {
  color: white;
  /* White text for selected option */
}


/* ---digital banking---- */

.digital-bank {
  width: 108px;
  /* Adjusted width for consistency */
  position: relative;
  display: flex;
}

.digital-bank input[type="radio"] {
  display: none;
  /* Hide the radio buttons */
}

.digital-bank label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  z-index: 1;
  color: black;
  transition: color 0.3s ease;
}

.digital-bank .slider {
  position: absolute;
  width: 52.33%;
  /* Fixed width of slider */
  height: 100%;
  background-color: red;
  border-radius: 20px;
  z-index: 0;
  /* Behind labels */
  transition: transform 0.3s ease;
}

/* Move slider for "Yes" */
#yes-bank:checked~.slider {
  transform: translateX(0);
  background-color: red;
}

/* Move slider for "No" */
#no-bank:checked~.slider {
  transform: translateX(90%);
  /* Move slider to the right (for "No") */
  background-color: red;
}

/* Change text color to white for selected option */
#yes-bank:checked~label[for="yes"],
#no-bank:checked~label[for="no"] {
  color: white;
}

/* ----nomination--- */

.nomination {
  width: 101px;
  /* Container width for consistency */
  display: flex;
  align-items: center;
  position: relative;
}

.nomination input[type="radio"] {
  display: none;
}

.nomination label {
  flex: 1;
  /* Equal spacing for both labels */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  z-index: 1;
  color: black;
  transition: color 0.3s ease;
}

.nomination .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: red;
  border-radius: 20px;
  z-index: 0;
  /* Behind labels */
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Move slider for "Yes" */
#yes-nom:checked~.slider {
  transform: translateX(0);
  /* Align slider for "Yes" */
  background-color: red;
}

/* Move slider for "No" */
#no-nom:checked~.slider {
  transform: translateX(100%);
  /* Move slider to the right (for "No") */
  background-color: red;
}

/* Change text color to white for selected option */
#yes-nom:checked~label[for="yes-nom"] {
  color: black;
}

#no-nom:checked~label[for="no-nom"] {
  color: black;
}

/* Optional: Add hover effect for better interaction */
.nomination label:hover {
  color: lightgray;
}


/* NIC/Passport/Driving License Toggle Styles */
.id-toggle {
  position: relative;
  display: flex;
  /* margin-left: -20px; */
}

.id-toggle input[type="radio"] {
  display: none;
  /* Hide the radio buttons */
}

.id-toggle label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  z-index: 1;
  color: black;
  transition: color 0.3s ease;
}

/* Slider background */
.toggle-slider {
  position: absolute;
  width: 33.33%;
  height: 100%;
  background-color: red;
  /* Default background color */
  border-radius: 20px;
  z-index: 0;
  /* Behind labels */
  transition: transform 0.3s ease;
}



/* Move slider for "NIC" */
#nic:checked~.toggle-slider {
  transform: translateX(0);
  background-color: red;
  /* Color for NIC */
}

/* Move slider for "NIC" */
#eic:checked~.toggle-slider {
  transform: translateX(100%);
  background-color: red;
  /* Color for NIC */
}

/* Move slider for "Passport" */
#passport:checked~.toggle-slider {
  transform: translateX(200%);
  background-color: red;
  /* Color for Passport */
}

.Lankan-toggle-slider {
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: red;
  /* Default background color */
  border-radius: 20px;
  z-index: 0;
  /* Behind labels */
  transition: transform 0.3s ease;
}

#nic:checked~.Lankan-toggle-slider {
  transform: translateX(0);
  background-color: red;
  /* Color for NIC */
}

/* Move slider for "NIC" */
#eic:checked~.Lankan-toggle-slider {
  transform: translateX(100%);
  background-color: red;
  /* Color for EIC */
}

.nominee-toggle-slider {
  position: absolute;
  width: 25%;
  /* Covers one option width */
  height: 100%;
  background-color: red;
  border-radius: 20px;
  z-index: 0;
  /* Behind labels */
  transition: transform 0.3s ease;
}

/* Use sibling selectors for dynamic IDs */
input[id$="_nic"]:checked~.nominee-toggle-slider {
  transform: translateX(0%);
}

input[id$="_eic"]:checked~.nominee-toggle-slider {
  transform: translateX(100%);
}

input[id$="_passport"]:checked~.nominee-toggle-slider {
  transform: translateX(200%);
}

input[id$="_birth_certificate"]:checked~.nominee-toggle-slider {
  transform: translateX(300%);
}

/* Label styles */
.nominee-id-toggle label {
  flex: 1;
  text-align: center;
  z-index: 1;
  cursor: pointer;
  font-size: 16px;
  font-family: Arial, sans-serif;
  transition: color 0.3s ease;
}

/* Highlight selected label */
input[id$="_nic"]:checked+label,
input[id$="_eic"]:checked+label,
input[id$="_passport"]:checked+label,
input[id$="_birth_certificate"]:checked+label {
  color: white;
}

/* Change text color to white for selected option */
#nic:checked~label[for="nic"],
#passport:checked~label[for="passport"],
#eic:checked~label[for="eic"] {
  color: white;
}

/* ------ */
.passport-toggle {
  width: 343px;
  position: relative;
  display: flex;
  margin-left: -20px;
}

.passport-toggle input[type="radio"] {
  display: none;
}

.passport-toggle label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  z-index: 1;
  color: black;
  transition: color 0.3s ease;
}

.slider {
  position: absolute;
  width: 33.33%;
  height: 100%;
  background-color: red;
  /* Default background color */
  border-radius: 20px;
  z-index: 0;
  transition: transform 0.3s ease;
}

#nicnum:checked~.slider {
  transform: translateX(0);
  background-color: red;
}

#passportcard:checked~.slider {
  transform: translateX(100%);
  background-color: red;
}

#birth:checked~.slider {
  transform: translateX(200%);
  background-color: red;
}

#nicnum:checked~label[for="nicnum"],
#passportcard:checked~label[for="passportcard"],
#birth:checked~label[for="birth"] {
  color: white;
}

/* Base style for radio buttons */
input[type="radio"].form-check-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  /* Circular */
  background-color: white;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

/* Style when radio is checked */
input[type="radio"].form-check-input:checked {
  background-color: red;
  border-color: red;
}

/* The white dot inside the radio when checked */
input[type="radio"].form-check-input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
}

/* Optional: Focus style for accessibility */
input[type="radio"].form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.5);
}

/* Container styling for label + radio */
.radio-container {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}



/* Style the checkbox container */
input[type="checkbox"].form-check-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid #ccc;
  border-radius: 3px;
  width: 20px;
  height: 15px;
  position: relative;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s;
}

/* Style the checkbox when checked */
input[type="checkbox"].form-check-input:checked {
  background-color: red;
  border-color: red;
}

/* Add a checkmark when checked */
input[type="checkbox"].form-check-input:checked::after {
  color: white;
  position: absolute;
  top: 0;
  left: 4px;
  font-size: 14px;
}

.checkbox-container {
  width: 110%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  /* Add a gap between checkbox and label */
}

.form-check-input {
  width: 20px;
  height: 20px;
}

.form-check-label {
  font-size: 14px;
}

/* Styling the button */
/* Container to hold the button and text */
.button-container {
  display: flex;
  align-items: center;
  margin-right: 100px;
}

/* Styling the button */
.plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 25px;
  border: none;
  background-color: black;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 10px;
}

/* Styling the plus sign */
.plus-sign {
  font-weight: bold;
}

/* Styling the text */
.add-text {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  cursor: pointer;
}

/* Hover effect for the button */
.plus-btn:hover {
  background-color: black;
}

/* Styling the file upload container */
.file-upload {
  position: relative;
  width: 100%;
  /* heigh/t: 50%; */
  padding: 20px;
  border: 2px dashed gray;
  border-radius: 5px;
  text-align: center;
  background-color: #f9f9f9;
  transition: background-color 0.3s ease;
}

/* ---------------- */
/* Hover effect to change background color */
.file-upload:hover {
  background-color: #e9f7ff;
}

/* Styling the drag-and-drop icon */
.upload-area i {
  font-size: 36px;
  color: #FF0000;
  margin-bottom: 10px;
}

/* Styling the label text */
.upload-area label {
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

/* Hide the default file input button */
.file-upload input[type="file"] {
  display: none;
}

/* Optional: Style for when a file is being dragged over the area */
.file-upload.dragover {
  background-color: #e0f7fa;
  border-color: gray;
}

.choose-file-label {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #0B0B0B;
  border-radius: 25px;
  margin-top: 10px;
  color: #0B0B0B;
  font-weight: bold;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

/* Change border color and text color on hover */
.choose-file-label:hover {
  border-color: #0B0B0B;
  color: #0B0B0B;
}

/* Nominee Identification Document Toggle */
.nominee-id-toggle {
  position: relative;
  width: 580px;
  /* Adjust width as needed */
  height: 30px;
  /* Consistent height */
  display: flex;
  border: 2px solid #ccc;
  border-radius: 25px;
  background-color: #fff;
  overflow: hidden;
}

/* Hide radio buttons */
.nominee-id-toggle input[type="radio"] {
  display: none;
  /* Hides the native radio buttons */
}

/* Labels for each option */
.nominee-id-toggle label {
  flex: 1;
  /* Equal width for each label */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  z-index: 1;
  /* Above the slider */
  color: black;
  /* Default text color */
  transition: color 0.3s ease, font-weight 0.3s ease;
}

/* Slider for active selection */
.nominee-id-toggle .toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 33.33%;
  /* Equal width for 3 options */
  height: 100%;
  background-color: red;
  /* Active slider color */
  border-radius: 25px;
  z-index: 0;
  /* Below the labels */
  transition: transform 0.3s ease;
}

/* Slider position for NIC */
.nominee-id-toggle input[type="radio"].nic:checked~.toggle-slider {
  transform: translateX(0%);
}

/* Slider position for Passport */
.nominee-id-toggle input[type="radio"].passport:checked~.toggle-slider {
  transform: translateX(100%);
}

/* Slider position for Birth Certificate */
.nominee-id-toggle input[type="radio"].birth-certificate:checked~.toggle-slider {
  transform: translateX(200%);
}

/* Highlight selected label */
.nominee-id-toggle input[type="radio"].nic:checked+label,
.nominee-id-toggle input[type="radio"].passport:checked+label,
.nominee-id-toggle input[type="radio"].birth-certificate:checked+label {
  color: white;
  /* Highlight text color */
}

@media screen and (max-width: 768px) {
  .nominee-id-toggle {
    width: 100%;
  }
}

/*--nominee form  */

.nominee-section {
  border: 1px solid gray;
  padding: 20px;
  border-radius: 5px;
  background-color: #f9f9f9;
  margin-top: 20px;
  width: 635px;
  height: 800px;
  margin-left: -47px;
}

.nominee-section h6 {
  font-weight: bold;
  margin-bottom: 20px;
}

.nominee-section .form-group {
  margin-bottom: 27px;
}

.nominee-section .form-control {
  border: 1px solid #ccc;
  border-radius: 25px;
  padding: 10px;
}

.nominee-section .btn-group .btn {
  margin-right: 10px;
}

.nominee-section input[type="file"] {
  padding: 5px;
}

/* ---file upload-- */

.file-upload-container {
  position: relative;
  max-height: 100%;
  width: 97%;
}

.upload-zone {
  border: 2px dashed black;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  color: red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f1f8f6;
  height: 100%;
}

.upload-zone i {
  font-size: 40px;
  margin-bottom: 12px;
  color: red;
}

.choose-file-text {
  color: #0B0B0B;
  cursor: pointer;
}

.hidden-input {
  display: none;
}

.upload-zone:hover {
  background-color: #e9f8ea;
}

.upload-zone:hover i {
  color: #ffff;
}

.thank-you-container {
  text-align: center;
  background-color: #ffffff;
  padding: 30px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 104%;
  margin-left: 20px;
  height: 100%;
}

.thank-you-container h1 {
  font-size: 24px;
  color: #333;
  line-height: 1.5;
}

.thank-you-container .bank-name {
  color: #e60000;
  /* DFCC Bank's red color */
  font-weight: bold;
}

.reference-number {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.instructions {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.contact-info {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.hero-section {
  position: relative;
  height: 83vh;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  left: 0;
  margin-top: -68px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 100px;
}

/* Hero Image */
.hero-section img {
  width: 94%;
  height: 75%;
  object-fit: cover;
  position: absolute;
  top: 0;
  z-index: 0;
  border-radius: 15px;
  margin-left: -100px;
}

.hero-section image-class {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

/* Hero Content */
.hero-content {
  position: fixed;
  z-index: 2;
  color: white;
  padding: 20px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  margin-top: -187px;
  margin-left: -985px;
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 90px;
}

.hero-content span {
  color: #ffff;
  font-weight: bold;
}

.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 2px;
}

/* Parent Container Styling */
/* Parent Container Styling */
.form-image-container {
  display: flex;
  justify-content: center;
  /* Centers image */
  align-items: center;
  width: 100%;
  /* Full width to make it responsive */
  border-radius: 25px;
  margin: 0 auto;
  /* Centers the container */
}

/* Responsive Image Styling */
.responsive-image {
  width: 100%;
}

/* Tablet View */
@media (max-width: 768px) {
  .responsive-image {
    width: 100%;
  }
}

/* Mobile View */
@media (max-width: 480px) {
  .responsive-image {
    width: 100%;
  }
}


.form-header {
  margin-left: 300px;
  /* Default for larger screens */
  margin-bottom: 0;
  position: relative;
  /* margin-top: -500px; */
}

/* Tablet View */
@media (max-width: 768px) {
  .form-header {
    margin-left: 50px;
    /* Reduce margin for tablets */
    margin-top: 406px;
  }
}

/* Mobile View */
@media (max-width: 480px) {
  .form-header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 20px;
    width: 90%;
    margin-top: 406px;
  }
}

/* Breadcrumb links */
.breadcrumbsnew a {
  color: #ffff;
}


/* Tablet View */
@media (max-width: 768px) {
  .breadcrumbsnew {
    margin-top: -200px;
    text-align: center;
  }
}

/* Mobile View */
@media (max-width: 480px) {
  .breadcrumbsnew {
    margin-top: 0px;
    /* Reset for mobile */
    text-align: center;
    width: 90%;
    margin-left: -85px;
    margin-right: auto;
  }
}


/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

/* Right Image */
.right-image {
  max-width: 28%;
  max-height: 84%;
  right: 0;
  top: 0;
  margin-left: -84px;
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
  .hero-section {
    height: 50vh;
    /* Adjust height for smaller screens */
  }

  .hero-content {
    margin-top: 0;
    margin-left: 0;
    text-align: center;
    padding: 10px;
  }

  .hero-content h1 {
    font-size: 1.8rem;
    margin-bottom: 40px;
  }

  .hero-content span {
    font-size: 1.2rem;
  }

  .hero-content p {
    font-size: 1rem;
    margin-bottom: 30px;
  }

  .right-image {
    max-width: 40%;
    max-height: 60%;
    margin-left: 0;
  }
}

@media only screen and (max-width: 480px) {
  .hero-section {
    height: 40vh;
  }

  .hero-content h1 {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }

  .hero-content span {
    font-size: 1rem;
  }

  .hero-content p {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  .right-image {
    max-width: 50%;
    max-height: 50%;
  }
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
  .form-container {
    padding: 10px;
    margin-top: 10px;
  }

  .form-step.active {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
  }

  .progress-bar-container {
    gap: 3px;
  }

  .progress-bar-stick {
    height: 4px;
  }

  .toggle-container label {
    font-size: 12px;
  }

  .id-toggle {
    width: 100%;
  }

  .next-red,
  .btn-white,
  .back-white {
    width: 100%;
    max-width: 150px;
  }

  .toggle-container {
    gap: 5px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .form-step.active {
    width: 100%;
  }
}

.contact-mid-inquiry {
  margin: 0 auto;
  /* Center horizontally */
  margin-top: 25px;
  width: 80%;
  /* Ensures it does not exceed screen width */
  max-width: 600px;
  /* Prevents it from being too wide */
}

/* Adjustments for tablets */
@media (max-width: 768px) {
  .contact-mid-inquiry {
    margin-top: -30px;
    /* Reduce negative margin */
    width: 90%;
    max-width: 500px;
  }
}

/* Adjustments for mobile screens */
@media (max-width: 480px) {
  .contact-mid-inquiry {
    margin-top: 0;
    width: 90%;
    max-width: 350px;
    text-align: center;
  }
}

.contact-mid-inquiry h3 {
  font-size: 2rem;
  text-align: center;
  /* Centers text */
  margin: 0 auto;
}

.contact-mid-inquiry strong {
  color: #FF0000;
  font-size: 2.2rem;
  /* Slightly larger for emphasis */
}

.contact-mid-inquiry p {
  margin: 0 auto;
  /* text-align: center; */
  font-size: 1rem;
  /* Adjust text size */
  width: 636px;
}

/* Tablet screens */
@media (max-width: 768px) {
  .contact-mid-inquiry h3 {
    font-size: 1.8rem;
  }

  .contact-mid-inquiry strong {
    font-size: 2rem;
  }

  .contact-mid-inquiry p {
    font-size: 0.9rem;
  }
}

/* Mobile screens */
@media (max-width: 480px) {
  .contact-mid-inquiry h3 {
    font-size: 1.5rem;
    /* Reduce size for mobile */
  }

  .contact-mid-inquiry strong {
    font-size: 1.7rem;
  }

  .contact-mid-inquiry p {
    font-size: 0.85rem;
    text-align: center;
    /* Ensures proper alignment */
    margin: 0 auto;
    /* Centers it within its container */
    max-width: 90%;
    /* Prevents text from stretching */
  }
}

.credit-card-info {
  text-align: center;
}

.loan-inquiry {
  text-align: center;
}

#giq-fm-dfcc {
  scroll-margin-top: 80px; /* adjust to your sticky header height */
  outline: none;           /* since we focus it programmatically */
}