* {
  box-sizing: border-box;
}

*:last-child {
  margin-bottom: 0;
}

body,
html {
  font-size: 16px;
  background: #ffffff;
  height: 100vh;
  margin: 0;
  font-family: Roboto, sans-serif;
}

.form-selects {
  margin-bottom: 20px;
}

#tollRate,
#results {
  color: #6aa712;
  margin-top: 11px;
  font-size: 14px;
  line-height: 16px;
  border-radius: 5px;
  padding: 10px 8px 9px 37px;
  border: 1px solid #6aa712;
  font-weight: 600;
  position: relative;
  display: none;
}

#tollRate.success,
#results.success {
  display: flex;
}

#results {
  flex-direction: column;
  margin-bottom: 17px;
}

#tollRate p {
  margin: 0;
}

#results p {
  margin: 0;
  margin-bottom: 6px;
  color: rgba(0, 0, 0, 0.69);
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
}

#results p:last-child {
  margin-bottom: 0;
}

#results p:first-child {
  font-weight: 600;
  color: #6aa712;
  font-size: 14px;
  line-height: 16px;
}

#tollRate::before,
#results::before {
  content: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.34376 7.5C2.34362 6.59482 2.58177 5.70555 3.03426 4.92159C3.48676 4.13763 4.13766 3.4866 4.92153 3.03395C5.70541 2.5813 6.59463 2.34298 7.49981 2.34294C8.40499 2.34291 9.29423 2.58116 10.0781 3.03375C10.1857 3.09493 10.3132 3.11106 10.4326 3.07863C10.5521 3.0462 10.6539 2.96783 10.7158 2.86064C10.7777 2.75344 10.7946 2.62611 10.763 2.50644C10.7314 2.38677 10.6537 2.28447 10.5469 2.22187C9.38519 1.55117 8.03465 1.28252 6.70471 1.45759C5.37478 1.63265 4.13977 2.24166 3.19122 3.19014C2.24266 4.13863 1.63358 5.37361 1.45843 6.70353C1.28328 8.03346 1.55184 9.38401 2.22247 10.5458C2.8931 11.7075 3.92832 12.6155 5.16758 13.1289C6.40684 13.6424 7.78089 13.7325 9.07662 13.3855C10.3724 13.0384 11.5174 12.2735 12.3341 11.2094C13.1508 10.1453 13.5936 8.84141 13.5938 7.5C13.5938 7.37568 13.5444 7.25645 13.4565 7.16854C13.3686 7.08063 13.2493 7.03125 13.125 7.03125C13.0007 7.03125 12.8815 7.08063 12.7936 7.16854C12.7056 7.25645 12.6563 7.37568 12.6563 7.5C12.6563 8.86752 12.113 10.179 11.146 11.146C10.179 12.113 8.86753 12.6562 7.50001 12.6562C6.13249 12.6562 4.82097 12.113 3.85399 11.146C2.887 10.179 2.34376 8.86752 2.34376 7.5Z" fill="%236AA712"/><path d="M14.394 3.14439C14.4376 3.1008 14.4721 3.04906 14.4957 2.99212C14.5193 2.93518 14.5315 2.87415 14.5315 2.81251C14.5315 2.75088 14.5193 2.68985 14.4957 2.6329C14.4721 2.57596 14.4376 2.52422 14.394 2.48064C14.3504 2.43705 14.2987 2.40248 14.2417 2.3789C14.1848 2.35531 14.1237 2.34317 14.0621 2.34317C14.0005 2.34317 13.9394 2.35531 13.8825 2.3789C13.8256 2.40248 13.7738 2.43705 13.7302 2.48064L7.49962 8.7122L5.01899 6.23064C4.97541 6.18705 4.92367 6.15248 4.86673 6.1289C4.80978 6.10531 4.74875 6.09317 4.68712 6.09317C4.62548 6.09317 4.56445 6.10531 4.50751 6.1289C4.45056 6.15248 4.39882 6.18705 4.35524 6.23064C4.31166 6.27422 4.27709 6.32596 4.2535 6.3829C4.22991 6.43985 4.21777 6.50088 4.21777 6.56251C4.21777 6.62415 4.22991 6.68518 4.2535 6.74212C4.27709 6.79907 4.31166 6.8508 4.35524 6.89439L7.16774 9.70689C7.21128 9.75054 7.26301 9.78517 7.31996 9.8088C7.37691 9.83244 7.43796 9.8446 7.49962 9.8446C7.56127 9.8446 7.62232 9.83244 7.67927 9.8088C7.73622 9.78517 7.78795 9.75054 7.83149 9.70689L14.394 3.14439Z" fill="%236AA712"/></svg>');
  display: inline-block;
  width: 15px;
  height: 15px;
  position: absolute;
  left: 8px;
  top: 11px;
}

.container {
  display: flex;
  height: 100vh;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.left-column {
  width: 100%;
  height: 100%;
  padding: 27px 90px 30px 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.left-column > p {
  text-align: center;
  margin-top: 8px;
  margin-bottom: 0;
  color: rgba(0, 0, 0, 0.69);
}

.right-column {
  display: none;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.customSelect {
  margin-bottom: 4px;
  position: relative;
}

.custom-select-panel {
  display: none;
  position: absolute;
  top: 100%;
  background-color: #ffffff;
  width: 100%;
  height: fit-content;
  left: 0;
  z-index: 100;
}

.customSelect.is-open .custom-select-panel {
  display: block;
}

.customSelect.is-open .custom-select-panel .custom-select-option:first-child {
  display: none;
}

.custom-select-opener,
input {
  width: 100%;
  padding: 15px 22px 14px 12px;
  cursor: pointer;
  background-color: #f6f7f8;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
  display: flex;
  align-content: flex-start;
  transition: all 0.3s;
  font-size: 14px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.69);
}

.custom-select-opener span {
  font-size: inherit;
  line-height: inherit;
  display: flex;
  align-items: center;
}

.customSelect.is-open .custom-select-opener {
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.customSelect.has-selected .custom-select-opener {
  background-color: #d9d9d9;
}

.custom-select-opener::after {
  content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10L12 15L17 10" stroke="black" stroke-opacity="0.69" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  margin-left: auto;
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 22px;
  transition: all 0.2s;
  top: 11px;
}

.customSelect.is-open .custom-select-opener:after {
  transform: scaleY(-1);
}

.custom-select-opener:hover {
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.custom-select-option {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 16px;
  padding-right: 29px;
  font-size: 18px;
  line-height: 21px;
  color: rgba(0, 0, 0, 0.69);
  cursor: pointer;
  transition: all 0.2s;
  align-content: flex-start;
}

.custom-select-option.is-selected,
.custom-select-option.has-focus {
  background-color: #d9d9d9;
}

.custom-select-option.is-selected::after {
  content: url('data:image/svg+xml,<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.202 0.456639C15.5131 0.16051 15.927 -0.003202 16.3565 4.74636e-05C16.7859 0.00329693 17.1973 0.173254 17.5038 0.474056C17.8104 0.774858 17.9881 1.18298 17.9994 1.61229C18.0108 2.04161 17.8549 2.45855 17.5647 2.77513L8.75442 13.7935C8.60293 13.9567 8.42008 14.0876 8.21682 14.1785C8.01356 14.2694 7.79406 14.3184 7.57144 14.3225C7.34882 14.3266 7.12766 14.2858 6.92117 14.2025C6.71469 14.1192 6.52712 13.9951 6.36969 13.8376L0.527089 7.99505C0.364382 7.84344 0.233879 7.66061 0.143366 7.45746C0.0528517 7.25432 0.00418102 7.03503 0.000257728 6.81267C-0.00366557 6.59031 0.037239 6.36943 0.12053 6.16323C0.203822 5.95702 0.327794 5.7697 0.485051 5.61244C0.642308 5.45518 0.829628 5.33121 1.03584 5.24792C1.24205 5.16463 1.46292 5.12372 1.68528 5.12765C1.90764 5.13157 2.12693 5.18024 2.33008 5.27075C2.53322 5.36127 2.71605 5.49177 2.86766 5.65448L7.4914 10.276L15.1601 0.505217C15.1739 0.488217 15.1864 0.471999 15.202 0.456639Z" fill="black" fill-opacity="0.69"/></svg>');
  display: inline-block;
  margin-left: auto;
  width: 18px;
  height: 14px;
}

#map {
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
}

#error-message {
  display: none;
  position: relative;
  color: #d8424d;
  padding-left: 25px;
  margin-top: 8px;
  margin-bottom: 8px;
  font-weight: 600;
}

#error-message.error-active {
  display: flex;
}

#error-message::before {
  content: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_119_329)"><path d="M7.5 14.0625C5.75952 14.0625 4.09032 13.3711 2.85961 12.1404C1.6289 10.9097 0.9375 9.24048 0.9375 7.5C0.9375 5.75952 1.6289 4.09032 2.85961 2.85961C4.09032 1.6289 5.75952 0.9375 7.5 0.9375C9.24048 0.9375 10.9097 1.6289 12.1404 2.85961C13.3711 4.09032 14.0625 5.75952 14.0625 7.5C14.0625 9.24048 13.3711 10.9097 12.1404 12.1404C10.9097 13.3711 9.24048 14.0625 7.5 14.0625ZM7.5 15C9.48912 15 11.3968 14.2098 12.8033 12.8033C14.2098 11.3968 15 9.48912 15 7.5C15 5.51088 14.2098 3.60322 12.8033 2.1967C11.3968 0.790176 9.48912 0 7.5 0C5.51088 0 3.60322 0.790176 2.1967 2.1967C0.790176 3.60322 0 5.51088 0 7.5C0 9.48912 0.790176 11.3968 2.1967 12.8033C3.60322 14.2098 5.51088 15 7.5 15Z" fill="%23D8424D"/><path d="M4.35549 4.35564C4.39903 4.31199 4.45076 4.27735 4.5077 4.25372C4.56465 4.23009 4.6257 4.21793 4.68736 4.21793C4.74902 4.21793 4.81007 4.23009 4.86702 4.25372C4.92397 4.27735 4.97569 4.31199 5.01924 4.35564L7.49986 6.8372L9.98049 4.35564C10.0241 4.31206 10.0758 4.27748 10.1328 4.2539C10.1897 4.23031 10.2507 4.21817 10.3124 4.21817C10.374 4.21817 10.435 4.23031 10.492 4.2539C10.5489 4.27748 10.6007 4.31206 10.6442 4.35564C10.6878 4.39922 10.7224 4.45096 10.746 4.5079C10.7696 4.56485 10.7817 4.62588 10.7817 4.68751C10.7817 4.74915 10.7696 4.81018 10.746 4.86712C10.7224 4.92407 10.6878 4.97581 10.6442 5.01939L8.16267 7.50001L10.6442 9.98064C10.6878 10.0242 10.7224 10.076 10.746 10.1329C10.7696 10.1898 10.7817 10.2509 10.7817 10.3125C10.7817 10.3741 10.7696 10.4352 10.746 10.4921C10.7224 10.5491 10.6878 10.6008 10.6442 10.6444C10.6007 10.688 10.5489 10.7225 10.492 10.7461C10.435 10.7697 10.374 10.7819 10.3124 10.7819C10.2507 10.7819 10.1897 10.7697 10.1328 10.7461C10.0758 10.7225 10.0241 10.688 9.98049 10.6444L7.49986 8.16283L5.01924 10.6444C4.97565 10.688 4.92391 10.7225 4.86697 10.7461C4.81003 10.7697 4.749 10.7819 4.68736 10.7819C4.62573 10.7819 4.56469 10.7697 4.50775 10.7461C4.45081 10.7225 4.39907 10.688 4.35549 10.6444C4.3119 10.6008 4.27733 10.5491 4.25375 10.4921C4.23016 10.4352 4.21802 10.3741 4.21802 10.3125C4.21802 10.2509 4.23016 10.1898 4.25375 10.1329C4.27733 10.076 4.3119 10.0242 4.35549 9.98064L6.83705 7.50001L4.35549 5.01939C4.31183 4.97585 4.2772 4.92412 4.25357 4.86717C4.22994 4.81022 4.21777 4.74917 4.21777 4.68751C4.21777 4.62586 4.22994 4.56481 4.25357 4.50786C4.2772 4.45091 4.31183 4.39918 4.35549 4.35564Z" fill="%23D8424D"/></g><defs><clipPath id="clip0_119_329"><rect width="15" height="15" fill="white"/></clipPath></defs></svg>');
  position: absolute;
  left: 3px;
  top: 0px;
}

#tollRateError {
  display: none;
  position: relative;
  color: #d8424d;
  padding-left: 25px;
  margin-top: 8px;
  margin-bottom: 8px;
  font-weight: 600;
}

#tollRateError.error-active {
  display: flex;
}

#tollRateError::before {
  content: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_119_329)"><path d="M7.5 14.0625C5.75952 14.0625 4.09032 13.3711 2.85961 12.1404C1.6289 10.9097 0.9375 9.24048 0.9375 7.5C0.9375 5.75952 1.6289 4.09032 2.85961 2.85961C4.09032 1.6289 5.75952 0.9375 7.5 0.9375C9.24048 0.9375 10.9097 1.6289 12.1404 2.85961C13.3711 4.09032 14.0625 5.75952 14.0625 7.5C14.0625 9.24048 13.3711 10.9097 12.1404 12.1404C10.9097 13.3711 9.24048 14.0625 7.5 14.0625ZM7.5 15C9.48912 15 11.3968 14.2098 12.8033 12.8033C14.2098 11.3968 15 9.48912 15 7.5C15 5.51088 14.2098 3.60322 12.8033 2.1967C11.3968 0.790176 9.48912 0 7.5 0C5.51088 0 3.60322 0.790176 2.1967 2.1967C0.790176 3.60322 0 5.51088 0 7.5C0 9.48912 0.790176 11.3968 2.1967 12.8033C3.60322 14.2098 5.51088 15 7.5 15Z" fill="%23D8424D"/><path d="M4.35549 4.35564C4.39903 4.31199 4.45076 4.27735 4.5077 4.25372C4.56465 4.23009 4.6257 4.21793 4.68736 4.21793C4.74902 4.21793 4.81007 4.23009 4.86702 4.25372C4.92397 4.27735 4.97569 4.31199 5.01924 4.35564L7.49986 6.8372L9.98049 4.35564C10.0241 4.31206 10.0758 4.27748 10.1328 4.2539C10.1897 4.23031 10.2507 4.21817 10.3124 4.21817C10.374 4.21817 10.435 4.23031 10.492 4.2539C10.5489 4.27748 10.6007 4.31206 10.6442 4.35564C10.6878 4.39922 10.7224 4.45096 10.746 4.5079C10.7696 4.56485 10.7817 4.62588 10.7817 4.68751C10.7817 4.74915 10.7696 4.81018 10.746 4.86712C10.7224 4.92407 10.6878 4.97581 10.6442 5.01939L8.16267 7.50001L10.6442 9.98064C10.6878 10.0242 10.7224 10.076 10.746 10.1329C10.7696 10.1898 10.7817 10.2509 10.7817 10.3125C10.7817 10.3741 10.7696 10.4352 10.746 10.4921C10.7224 10.5491 10.6878 10.6008 10.6442 10.6444C10.6007 10.688 10.5489 10.7225 10.492 10.7461C10.435 10.7697 10.374 10.7819 10.3124 10.7819C10.2507 10.7819 10.1897 10.7697 10.1328 10.7461C10.0758 10.7225 10.0241 10.688 9.98049 10.6444L7.49986 8.16283L5.01924 10.6444C4.97565 10.688 4.92391 10.7225 4.86697 10.7461C4.81003 10.7697 4.749 10.7819 4.68736 10.7819C4.62573 10.7819 4.56469 10.7697 4.50775 10.7461C4.45081 10.7225 4.39907 10.688 4.35549 10.6444C4.3119 10.6008 4.27733 10.5491 4.25375 10.4921C4.23016 10.4352 4.21802 10.3741 4.21802 10.3125C4.21802 10.2509 4.23016 10.1898 4.25375 10.1329C4.27733 10.076 4.3119 10.0242 4.35549 9.98064L6.83705 7.50001L4.35549 5.01939C4.31183 4.97585 4.2772 4.92412 4.25357 4.86717C4.22994 4.81022 4.21777 4.74917 4.21777 4.68751C4.21777 4.62586 4.22994 4.56481 4.25357 4.50786C4.2772 4.45091 4.31183 4.39918 4.35549 4.35564Z" fill="%23D8424D"/></g><defs><clipPath id="clip0_119_329"><rect width="15" height="15" fill="white"/></clipPath></defs></svg>');
  position: absolute;
  left: 3px;
  top: 0px;
}

/* Popup form styling */
#background-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); 
  backdrop-filter: blur(5px);
  z-index: 999;
}

#form-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 0;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  width: 70%;
  max-width: 800px;
  z-index: 1000;
  border-radius: 10px;
  font-family: Mukta, Roboto, sans-serif;
}

.popup-content {
  position: relative;
}

.form-content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}

.form-image {
  flex: 1;
  width: 50%;
  overflow: hidden;
  border-radius: 10px 0 0 10px; 
}

.form-image img {
  display: block; 
  width: 100%;
  height: 100%; 
  object-fit: contain; 
  border-radius: 10px 0 0 10px; 
}

.form-text {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
}

.h2-center {
  display: flex;
  align-items: flex-start;
  flex-direction: column;

}

.form-text h2 {
  color: #333;
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.1rem;
  text-align: left;
}

.form-text p {
  margin: 10px 0;
  font-weight: 500;
  line-height: 1.4;
  color: #1d1d1d;
}

.form-text ul {
  list-style-type: none;
  padding-left: 0;
}

.form-text ul li {
  line-height: 1.1;
}

.form-text ul li:before {
  content: "\2714"; /* Checkmark for each list item */
  color: #1d1d1d;
  padding-right: 10px;
  font-size: 1.1rem;
  font-family: Arial, sans-serif;
}

/* Close button */
.close-btn-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
  color: #333;
}

.close-btn-popup:hover {
  color: #ff7e00; 
}

/* Centered Call-to-Action Button */
.cta-button {
  display: inline-block;
  background-color: #9CB548; 
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none; 
  font-size: 1.2rem;
  font-weight: 400;
  border-radius: 5px;
  cursor: pointer;
}

.cta-button:hover {
  background-color: #5a9409; 
}

.center-btn {
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 100%; 
  margin-top: 20px;
}

.link {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #d15b12;
  margin-top: 10px;
  font-size: 1.25rem;
}

.error {
  background-color: rgba(216, 66, 77, 0.1);
  outline: #d8424d;
  border-color: rgb(216, 66, 77);
}

.success {
  background-color: rgba(106, 167, 18, 0.1);
  outline: #6aa712;
  border-color: #6aa712;
}

form {
  height: 100%;
  display: flex;
  flex-direction: column;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  margin-bottom: 4px;
}

select {
  display: none;
}

button.hoverable {
  padding: 21px;
  min-width: 209px;
  background-color: #e36e0e;
  color: #fff;
  border: none;
  cursor: pointer;
  margin: auto auto 0;
  border-radius: 10px;
  font-size: 16px;
  line-height: 19px;
  transition: all 0.2s;
  font-family: Roboto, sans-serif;
}

button.hoverable:hover {
  background-color: #c05c0e;
}

button.gray-out {
  padding: 21px;
  min-width: 209px;
  color: #fff;
  border: none;
  margin: auto auto 0;
  border-radius: 10px;
  font-size: 16px;
  line-height: 19px;
  transition: all 0.2s;
  font-family: Roboto, sans-serif;
  background-color: gray;
  cursor: not-allowed;
}

p.max-times {
  font-size: 11px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.69);
}
/* Typography*/

h2 {
  font-family: Mukta, sans-serif;
  text-align: center;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.5;
  color: #e16a0a;
  margin: 0;
  margin-bottom: 14px;
  margin-top: 20px;
}

label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.69);
  margin: 0 0 11px 3px;
}

@media screen and (max-width: 767px) {
  .container {
    display: flex;
    flex-direction: column; /* Force stacking */
    align-items: center;
    height: auto; /* Remove 100vh to allow normal height */
  }

  .left-column {
    width: 100%;
    height: auto;
  }

  .right-column {
    display: none;
    width: 100%;
    min-height: 300px; /* Give it a reasonable height */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #map {
    width: 100% !important;
    height: 300px !important; /* Ensure it's always visible */
    max-width: 100%;
  }

  .custom-select-opener span {
    margin-right: 20px; 
  }

  button.hoverable {
    margin-top: 20px;
    min-width: auto;
  }
}




/* For screens smaller than 567px: Stack content vertically */
@media screen and (max-width: 567px) {

  #form-container {
    width: 90%;
    padding: 15px;
    max-height: 90vh; /* Limit height */
    overflow: auto; /* Allow scrolling */
  }

  .form-content {
    flex-direction: column; /* Stack content vertically */
    align-items: center;
  }

  .form-image,
  .form-text {
    width: 100%; /* Make image and text full width */
    margin: 0;
  }

  .form-image {
    order: 2; /* Place the image at the bottom */
  }

  .form-text {
    order: 1; /* Place the text at the top */
    margin-bottom: 20px; /* Add some space between text and image */
    padding: 1rem;
  }

  .form-image img {
    width: 100%;
    height: auto; /* Prevent distortion */
    object-fit: contain; /* Keep the image aspect ratio */
    border-radius: 0;
  }

  .cta-button {
    margin-bottom: 20px; /* Ensure button is not too close to the edge */
  }

  .close-btn-popup {
    font-size: 30px;
  }
}