﻿
@import url('./_selectBox.css?v=112299');

.contact-section { padding: 80px 0; background: var(--Muted); overflow: hidden; }

.contact-wrapper { justify-content: space-between; gap: 80px; align-items: flex-start; }
.contact-content span.optional-text { width: fit-content; color: var(--Secondary); padding: 4px 8px; border-radius: 4px; background: var(--White ); text-transform: uppercase; margin-bottom: 20px; font-size: 12px;}

.contact-wrapper:not(:has(.contact-form-box)) .contact-content { width: 100%; flex: 0 0 100%; }
/* LEFT CONTENT */
.contact-content h1 {  font-size: 48px; line-height: 120%; font-weight: 400; color: var(--Foreground); margin-bottom: 20px; }
.contact-content p {line-height: 150%; color: var(--Coal); margin-bottom: 32px; }

/* MAP */
.map-wrapper { min-height: 330px; align-items: center; display: flex;}

.map-info {
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}
.map-title { display: block; text-align: center; margin-bottom: 20px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--Primary); line-height: 100%;}

ul.location-list { gap: 26px; }
ul.location-list > li { width: calc(25% - 23px);}
ul.location-list > li a{padding: 16px 12px; width: 100%; border-radius: 50px; background: var(--White); outline: 1.5px solid rgba(0, 129, 255, 0.50); outline-offset: 6px; font-size: 16px; line-height: 24px; color: var(--Foreground); display: block;}
ul.location-list > li a:hover{background-color: var(--Primary); color: var(--White); }

.map-image { inset: 0; z-index: 1; opacity: .95; }
.map-image figure { width: 100%; height: 100%; }
.map-image img { width: 100%; height: 100%; object-fit: contain; }

/* RIGHT FORM */
.contact-form-box { padding: 32px;}


/* FORM FIELDS */
.contact-form-box .frm_fields_container { display: flex; flex-wrap: wrap; gap: 24px 20px; }
.contact-form-box .frm_form_field { width: 100%; margin-bottom: 0; }
.contact-form-box .frm_form_field.frm_half { width: calc(50% - 10px); }
.contact-form-box form .form-field label{display: block; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--Foreground); margin-bottom: 0; }
.contact-form-box .frm_required { color: var(--Destructive); font-size: 14px; font-weight: 400; line-height: 100%; }

.contact-form-box input[type="text"],
.contact-form-box input[type="email"],
.contact-form-box input[type="tel"] { width: 100%; padding: 12px; border: 1px solid rgba(0, 129, 255, 0.25); border-radius: 4px; background: var(--White); font-size: 16px; color: var(--Foreground); font-family: inherit; outline: none; transition: border-color 0.25s; box-sizing: border-box; }
.contact-form-box a.selectBox{ width: 100%; min-width: auto; padding: 12px; border: 1px solid rgba(0, 129, 255, 0.25); border-radius: 4px; background: var(--White); font-size: 14px; color: var(--Foreground-Muted-50); font-family: inherit; outline: none; transition: border-color 0.25s; box-sizing: border-box; }
.contact-form-box input[type="text"]:focus,
.contact-form-box input[type="email"]:focus,
.contact-form-box input[type="tel"]:focus { border-color: var(--Primary); }

.contact-form-box .frm_select_wrap { position: relative; }
.contact-form-box .frm_select_wrap select { width: 100%; padding: 13px 40px 13px 12px; border: 1px solid rgba(0, 129, 255, 0.25); border-radius: 4px; background: var(--White); font-size: 14px; color: var(--Foreground); font-family: inherit; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; box-sizing: border-box; }
.contact-form-box .frm_select_wrap select:has(option[value=""]:checked) { color: var(--Body-text); opacity: 0.5; }
.contact-form-box .frm_select_wrap::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 14px; min-height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 5L7 9.5L11.5 5' stroke='%2354B948' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; }
.contact-form-box textarea { width: 100%; padding: 12px; border: 1px solid rgba(0, 129, 255, 0.25); border-radius: 4px; background: var(--White); font-size: 14px; line-height: 21px; color: var(--Foreground); font-family: inherit; outline: none; resize: none; min-height: 160px; transition: border-color 0.25s; box-sizing: border-box; }
.contact-form-box textarea:focus { border-color: var(--Primary); }
.contact-form-box textarea::placeholder { color: var(--Foreground-Muted-50) !important; }

/* Checkbox + Submit row */
.contact-form-box .frm_filed_wrapper{ gap: 20px; align-items: center; justify-content: space-between; margin-top: 8px; }
.contact-form-box .frm_filed_wrapper .vertical_radio label {padding-left: 26px; margin: 0; display: flex; align-items: center; font-weight: 400; line-height: 21px; position: relative;}
 .contact-form-box .frm_filed_wrapper #frm_field_6_container{width: fit-content;}
.contact-form-box .vertical_radio{ margin-bottom: 0; flex: 1; }
.contact-form-box form .frm_checkbox label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; color: var(--Foreground); cursor: pointer; }
.contact-form-box form .frm_checkbox input[type="checkbox"] {top: 0; left: 0; margin: 0; flex-shrink: 0; min-width: 20px !important; width: 20px !important; height: 20px !important; background: var(--Secondary-Foreground); border: none; border-radius: 2px !important; box-shadow: none !important; cursor: pointer; appearance: none; -webkit-appearance: none; position: absolute; transition: background 0.2s; }
.contact-form-box form .frm_checkbox input[type="checkbox"]:checked { border-color: var(--Secondary-Foreground); border-radius: 2px; }
.contact-form-box form .frm_checkbox input[type="checkbox"]:checked::before { content: ""; position: absolute !important; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='10' viewBox='0 0 11 10' fill='none'%3E%3Cpath d='M10.1953 0.138009C10.5234 0.395822 10.5938 0.864572 10.3594 1.1927L4.35938 9.4427C4.21875 9.60676 4.03125 9.72395 3.82031 9.74738C3.58594 9.77082 3.375 9.67707 3.21094 9.53645L0.210938 6.53645C-0.0703125 6.23176 -0.0703125 5.76301 0.210938 5.45832C0.515625 5.17707 0.984375 5.17707 1.28906 5.45832L3.65625 7.84895L9.14062 0.302072C9.39844 -0.0260533 9.86719 -0.0963658 10.1953 0.138009Z' fill='%2354B948'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; }

.contact-form-box .frm_submit { flex-shrink: 0; }
.contact-form-box .frm_button_submit { min-height: 48px; padding: 12px 32px; background: var(--Primary); color: var(--White); border: none; border-radius: 50px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.25s; }
.contact-form-box .frm_button_submit:hover { background: var(--Foreground); }


.frm_style_formidable-style.with_frm_style .frm_error_style{display: none;}
.frm_style_formidable-style.with_frm_style .form-field{margin-bottom: 0;}
.frm_style_formidable-style.with_frm_style .frm_error{line-height: 14px; text-align: right;}
.frm_forms.with_frm_style .frm_fields_container .frm_checkbox input[type="checkbox"]:not([disabled]):checked { background-color: var(--Secondary-Foreground) !important; }
.frm_style_formidable-style.with_frm_style .form-field input:not([type="file"]):not([type="range"]):not([readonly]):not([type="text"]):not([type="email"]):not([type="tel"]):focus{background-color: var(--Secondary-Foreground);}
#frm_field_11_container{display: none;}
.with_frm_style .vertical_radio .frm_checkbox{margin-bottom: 0;}

#field_w2f5w_label{display: none;}

/* RESPONSIVE */
@media only screen and (min-width: 1300px) {
  .contact-content { flex: 0 0 560px; }
  .contact-form-box { flex: 1;}
}
@media(max-width: 1299px) and (min-width: 1024px) {
  .contact-content, .contact-form-box { flex: 1; }

}

@media only screen and (min-width: 1024px) {
 .contact-section .container{width: 1200px;}
 .contact-form-box .with_frm_style .frm_message{margin: 0;}

}


@media(max-width: 1023px) and (min-width: 768px) {
    .contact-wrapper { display: block; }
    .contact-content h1 { font-size: 42px; margin-bottom: 20px; max-width: 100%; }
    .contact-content p { max-width: 100%; }
    .map-wrapper { min-height: 280px; }
    .contact-content { margin-bottom: 40px; }
    .contact-form-box { margin-bottom: 60px; }
}
@media only screen and (max-width: 767px) and (min-width: 0px) {
    .contact-section { padding: 56px 0; }
    .contact-wrapper{display: block;}
    .contact-content { text-align: center; }
    .contact-content span{margin: 0 auto 18px;}
    .contact-content h1 {font-size: 32px; font-weight: 400; padding: 0 20px; letter-spacing: 0;}
    ul.location-list { flex-wrap: wrap; gap: 26px; }
    ul.location-list > li {flex: 0 0 calc(50% - 64px);}
    .contact-content p{margin-bottom: 40px;}
    .contact-form-box { padding: 24px; margin-bottom: 40px; }
    .contact-form-box .frm_form_field.frm_half { width: 100%; }
    .contact-form-box .frm_filed_wrapper { flex-direction: column; align-items: flex-start; }
    .contact-form-box .frm_submit { width: 100%; }
    .contact-form-box .frm_button_submit { width: 100% !important; text-align: center !important; }
    .map-image{min-width: 536px; left: 50%; transform: translateX(-50%);}
    .contact-form-box .frm_filed_wrapper #frm_field_6_container{width: 100%;}
    .contact-form-box .frm_fields_container{gap: 20px; }
    .contact-form-box .frm_filed_wrapper .vertical_radio label{font-size: 14px; font-weight: 400;}
    .contact-form-box .with_frm_style .frm_form_fields > fieldset{padding-bottom: 0;}
}

