:root {
  --contact-primary-bg: #1a1a1a;
  --contact-secondary-bg: #edebde;
  --input-bg-contact: #cccccc;
  --button-bg-contact: #cfd0d2;
  --text-color-contact: white;
  --button-text-color: #1a1a1a;
  --border-radius: 0.875rem;
  --paddingContact: 6rem;
  --paddingInput: 1.875rem;
  --gap-contact: 1.875rem;
  --margin-contact: 1.875rem;
  --width-logo: 6.25rem;
  --width-map: 38.625rem;
  --height-map: 33.75rem;
  --margin-top-header: 4.25rem;
  --button-margin-left: 1.875rem;
  --height-description: 12.875rem;
}

.contact-section {
  width: 100%;
  min-height: 100vh;
  padding: 10rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--contact-primary-bg);
}
.header-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: var(--margin-top-header) 0;
  /* margin-top: var(--margin-top-header); */

  color: var(--text-color-contact);
  padding: 0 var(--paddingContact);
  padding-right: 5rem;
  position: relative;
}
.footer-text-bold {
  font-family: "GothamBold", sans-serif;
  font-size: 40px;
}

.contact-logo {
  position: absolute;
  display: block;
  width: var(--width-logo);
  place-content: center;
  right: 7%;
}
.contact-logo img {
  width: 100%;
}
.contact-logo-mobile {
  display: none;
  position: absolute;
}
.contact-map {
  width: var(--width-map);
  /* height: var(--height-map); */
  border-radius: var(--border-radius);
  overflow: hidden;
  display: grid;
  /* font-family: "GothamBook", sans-serif; */
  justify-content: center;
  align-items: center;
}
.optionMap {
  font-family: "GothamMedium", sans-serif;
}
.contact-map img {
  width: 97%;
  height: 97%;
  object-fit: cover;
  place-self: center;
}
.map-frame {
  max-width: 100%;
  max-height: 100%;
  width: 700px;
}
.contact-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 1rem var(--paddingContact);
  color: var(--text-color-contact);
  gap: var(--gap-contact);
}
.form-container {
  max-width: 1200px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-contact);
  padding-bottom: 5rem;
}

.form-container button {
  background-color: #cecfd1;
  /* margin-left: var(--button-margin-left); */
  color: var(--button-text-color);
  font-family: "GothamBold", sans-serif;
}
.input-section {
  /* background-color: var(--contact-secondary-bg); */
  width: 100%;
  /* padding: var(--paddingInput); */
  /* margin: var(--margin-contact) 0; */
  border-radius: var(--border-radius);
  height: 100%;
}
.form-container form input {
  /* background-color: var(--input-bg-contact); */
  border: 1px solid #666 !important;
  outline: none;
  border: transparent;
}
.contact-container textarea {
  /* background-color: var(--input-bg-contact); */
  border: 1px solid #666 !important;
  outline: none;
  border: transparent;
}
.description {
  width: 100%;
  height: var(--height-description);
  resize: none;
}

input::placeholder {
  font-family: "GothamBook", sans-serif; /* เปลี่ยนเป็นชื่อฟอนต์ที่ต้องการ */
  font-size: 16px; /* ปรับขนาดตัวอักษร */
  color: gray; /* เปลี่ยนสีของ placeholder */
  font-style: italic; /* ทำให้เป็นตัวเอียง */
}

.text-button {
  font-family: "GothamBold", sans-serif; /* เปลี่ยนเป็นชื่อฟอนต์ที่ต้องการ */
  font-size: 16px; /* ปรับขนาดตัวอักษร */
}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.logo-footer-box img {
  transition: filter 0.5s ease;
}
.logo-footer-box img:hover {
  filter: brightness(0) saturate(100%) invert(35%) sepia(2%) saturate(2599%)
    hue-rotate(169deg) brightness(105%) contrast(87%);
  cursor: pointer;
}

@media (max-width: 1024px) {
  :root {
    --width-map: 100%;
    --height-map: 25rem;
    --paddingContact: 7rem;
    --gap-contact: 1.5rem;
  }
  .contact-logo {
    display: none;
  }
  .header-contact {
    flex-direction: column;
    gap: 1rem;
    padding-right: var(--paddingContact);
    text-align: center;
  }

  .contact-container {
    flex-direction: column;
    align-items: center;
    padding: 0 var(--paddingContact);
  }

  .contact-map {
    width: 100%;
    height: 100%;
    /* height: auto; */
  }

  .map-frame {
    max-width: 100%;
    max-height: 100%;
  }
}

@media (max-width: 768px) {
  :root {
    --paddingContact: 3rem;
    --gap-contact: 1rem;
    --width-logo: 4rem;
  }

  .footer-text-bold {
    font-size: 28px;
    text-align: center;
  }

  .form-container button {
    margin-left: 0;
    align-self: center;
  }

  .description {
    height: 12rem;
  }
}
@media (max-width: 440px) {
  .text-footer-box p {
    font-size: 18px !important;
  }
  .logo-footer-box img {
    width: 2rem;
  }
  .header-contact {
    padding: 0;
    margin: 2rem 0;
  }
  .footer-text-bold {
    font-size: 18px;
  }
  #graphicBtn,
  #googleMapBtn {
    font-size: 12px;
  }
  .custom-input {
    padding: 8px;
    font-size: 14px;
  }
  .custom-input::placeholder {
    font-size: 14px;
  }
  .form-container > form > div:last-child {
    display: grid;
    place-content: center;
  }
  .form-container button {
    font-size: 14px;
  }
  .footer-text-bold {
    position: relative;
    display: inline-block;
  }

  .contact-logo-mobile {
    display: block;
    position: absolute;
    right: -30px;
    top: -30px;
  }

  .contact-logo-mobile img {
    display: block;
    height: 35px;
  }
}
@media (max-width: 375px) {
  .footer-text-bold {
    font-size: 15px;
  }
}