/* =================================================================
   Contact page
   (light nav row from style.css, then a full-width map and the
    details / form band)
   ================================================================= */

/* ---------------- Map ---------------- */
.sec_map { position: relative; width: 100%; height: 590px; background-color: var(--alter_bg_color); }
.sec_map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.25); }

/* ---------------- Details + form ---------------- */
.sec_contact { background-color: var(--bg_color); }
.ct_sp_top { height: 120px; }
.ct_sp_bot { height: 120px; }

.ct_row { display: flex; flex-wrap: wrap; }
.ct_details { width: 30.0%; }
.ct_form_col { width: 66.67%; margin-left: 3.33%; }

.ct_details_sp { height: 8px; }
.ct_title {
  font-family: Outfit, sans-serif; font-size: 28px; line-height: 34px; font-weight: 500;
  letter-spacing: -.6px; color: var(--text_dark); margin: 0;
}
.ct_list { margin-top: 28px; }
.ct_item { font-size: 17px; line-height: 29px; color: var(--text); }
.ct_item + .ct_item { margin-top: 20px; }
.ct_item span { display: block; }
.ct_item a { color: var(--text); }
.ct_item a:hover { color: var(--text_link); }
.ct_item_strong a { font-weight: 500; color: var(--text_dark); }
.ct_item_strong a:hover { color: var(--text_link); }

.ct_socials { margin-top: 42px; display: flex; flex-wrap: wrap; }
.ct_socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 45px; height: 45px; margin: 0 7px 7px 0;
  font-size: 17px; color: var(--text_link); background-color: transparent;
  transition: color .3s ease, background-color .3s ease;
}
.ct_socials a:before { margin: 0; width: auto; }
.ct_socials a:hover { color: #FFFFFF; background-color: var(--text_link); }

/* ---------------- The form ---------------- */
.ct_form { display: flex; flex-wrap: wrap; column-gap: 30px; }
.ct_field { position: relative; width: calc(50% - 15px); margin-bottom: 37px; }
.ct_field_full { width: 100%; }
.ct_field_icon {
  position: absolute; left: 0; top: 10px; z-index: 1;
  font-size: 20px; line-height: 1; color: var(--text_dark); pointer-events: none;
}
.ct_field_icon:before { margin: 0; width: auto; }
.ct_field_icon.icon-envelope-3 { font-size: 16px; }
.ct_field_icon.icon-subject { font-size: 22px; }
.ct_field input,
.ct_field textarea {
  box-sizing: border-box; width: 100%;
  padding: 13px 0 13px 36px;
  border: none; border-bottom: 1px solid rgba(24,29,78,.2);
  background-color: transparent; border-radius: 0;
  font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 25px; color: var(--text);
  outline: none; transition: border-color .3s ease;
}
.ct_field textarea { resize: vertical; min-height: 99px; padding-top: 13px; }
.ct_field input:focus, .ct_field textarea:focus { border-bottom-color: var(--text_link); }
.ct_field input::placeholder, .ct_field textarea::placeholder { color: var(--text_light); }

.ct_form_foot { display: flex; align-items: center; flex-wrap: wrap; width: 100%; }
.ct_submit {
  position: relative; display: inline-flex; align-items: center;
  padding: 17px 35px 17px 64px; border: none; cursor: pointer;
  font-family: Outfit, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500;
  color: #FFFFFF; background-color: var(--text_link);
  transition: background-color .3s ease;
}
.ct_submit:hover { background-color: var(--text_hover); }
.ct_submit:before {
  content: '\e9fc'; font-family: fontello; font-size: 17px; margin: 0; width: auto;
  position: absolute; left: 32px; top: 50%; transform: translateY(-50%);
}
.ct_consent {
  display: flex; align-items: flex-start; margin-left: 34px;
  font-size: 15px; line-height: 24px; color: var(--text);
}
.ct_consent input { margin: 4px 10px 0 0; accent-color: var(--text_link); }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1279px) {
  .sec_map { height: 540px; }
  .ct_sp_top, .ct_sp_bot { height: 90px; }
  .ct_title { font-size: 25px; line-height: 30px; }
  .ct_list { margin-top: 22px; }
  .ct_socials { margin-top: 32px; }
  .ct_field { margin-bottom: 30px; }
}

@media (max-width: 1023px) {
  .sec_map { height: 460px; }
  .ct_sp_top, .ct_sp_bot { height: 80px; }
}

@media (max-width: 767px) {
  .sec_map { height: 360px; }
  .ct_sp_top, .ct_sp_bot { height: 60px; }
  .ct_details, .ct_form_col { width: 100%; margin-left: 0; }
  .ct_form_col { margin-top: 44px; }
  .ct_field { width: 100%; margin-bottom: 26px; }
  .ct_title { font-size: 23px; line-height: 28px; }
  .ct_submit { padding: 14px 28px 14px 56px; }
  .ct_submit:before { left: 26px; }
  .ct_consent { width: 100%; margin: 20px 0 0; }
}