#contact_infomation {
  box-shadow: 0px 3.2px 7.2px hsl(var(--black)/0.132), 0px 0.6px 1.8px hsl(var(--black)/0.108);
  position: relative;
  overflow: hidden;
  max-width: none;
  width: 100%;
  height: 600px;
}
#contact_infomation .content {
  /* From https://css.glass */
  background: hsl(var(--black)/0.5);
  background: hsl(var(--black)/0.3);
  backdrop-filter: blur(8.9px);
  -webkit-backdrop-filter: blur(8.9px);
  color: hsl(var(--txt-light));
}
#contact_infomation .content::after {
  border: 1px solid hsl(var(--yellow-dark));
}
#contact_infomation .content header::after {
  color: hsl(var(--txt-light)/0.8);
}
#contact_infomation .content header p {
  color: hsl(var(--txt-light)/0.8);
}
#contact_infomation .content main .icon {
  background-color: hsl(var(--white));
  border-radius: 50%;
}
#contact_infomation > * {
  position: absolute;
  inset: 0;
}
#contact_infomation img {
  object-fit: cover;
  object-position: center center;
}
#contact_infomation .content {
  display: flex;
  justify-content: center;
  align-items: center;
}
#contact_infomation .content::after {
  position: absolute;
  content: "";
  inset: auto;
}
#contact_infomation .content > * {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
#contact_infomation .content > * > * {
  display: flex;
  flex-direction: column;
}
#contact_infomation .content > * header {
  position: relative;
  align-items: center;
}
#contact_infomation .content > * header::after {
  position: absolute;
  content: "CEO";
  inset: auto;
  bottom: -15px;
}
#contact_infomation .content > * main {
  gap: 10px;
}
#contact_infomation .content > * main > div {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
#contact_infomation .content > * main > div .icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (width < 600px) {
  #contact_infomation .content > * {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: none;
    gap: 60px;
  }
  #contact_infomation .content main {
    grid-template-rows: 1fr 1fr;
    justify-content: center;
    align-items: center;
  }
}
#contact_infomation img {
  width: 100%;
  height: 100%;
}
#contact_infomation .content::after {
  height: 100px;
}
#contact_infomation .content main .icon {
  width: 30px;
  aspect-ratio: 1/1;
  background-color: hsl(var(--white));
  border-radius: 50%;
}
#contact_infomation .content main .icon svg {
  width: 60%;
}
@media (width < 600px) {
  #contact_infomation .content::after {
    height: 0px;
    width: 200px;
  }
}

#contact {
  max-width: none;
  width: 100%;
  padding: 10px;
}
#contact form {
  color: hsl(var(--txt-dark));
  background-color: hsl(var(--card-background));
  box-shadow: 0px 3.2px 7.2px hsl(var(--black)/0.132), 0px 0.6px 1.8px hsl(var(--black)/0.108);
}
#contact form main .services label .checkmark span {
  background-color: hsl(var(--grey)/0.8);
  border: 1px solid hsl(var(--card-background)/0.6);
}
#contact form main .services label .checkmark span:after {
  border: solid hsl(var(--card-background));
}
#contact form main .services label .checkmark input:checked ~ span {
  background-color: hsl(var(--green-dark));
}
#contact form main .services label:hover input ~ span,
#contact form main .services label input:focus ~ span {
  filter: brightness(95%);
}
#contact form input,
#contact form textarea,
#contact form button {
  color: hsl(var(--txt-dark)/0.8);
  background-color: hsl(var(--black)/0.07);
  box-shadow: 0px 3.2px 7.2px hsl(var(--black)/0.112), 0px 0.6px 1.8px hsl(var(--black)/0.108);
}
#contact form input {
  border: none;
  border-bottom: 3px solid hsl(var(--grey)/0.8);
  border-radius: 3px;
}
#contact form textarea {
  border: 2px solid hsl(var(--card-background)/0.3);
}
#contact form button {
  border: none;
  color: hsl(var(--txt-light));
  background-color: hsl(var(--blue-muted)/0.7);
  box-shadow: 0px 3.2px 7.2px hsl(var(--black)/0.132), 0px 0.6px 1.8px hsl(var(--black)/0.108);
  border-radius: 5px;
}
#contact form button:hover {
  background-color: hsl(var(--blue)/0.7);
}
#contact form > div {
  display: grid;
  gap: 50px;
}
#contact form > div header {
  display: grid;
  justify-content: center;
  align-items: center;
}
#contact form > div main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
#contact form > div main > section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#contact form > div main .services label {
  display: grid;
  grid-template-columns: 50px auto;
  align-items: center;
}
#contact form > div main .services label div {
  position: relative;
  justify-self: center;
}
#contact form > div main .services label div input {
  position: absolute;
}
#contact form > div main .services label span {
  align-self: center;
}
#contact form > div main .services > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(250px + 15%));
  gap: 5px;
}
#contact form > div main .services > div .checkmark span {
  display: flex;
  justify-content: center;
  align-items: center;
}
#contact form > div main .services > div .checkmark span:after {
  display: none;
}
#contact form > div main .services > div .checkmark input:checked ~ span::after {
  display: block;
}
@media (width > 600px) {
  #contact .contact_info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  }
  #contact button {
    justify-self: end;
  }
}
#contact form {
  min-width: none;
  width: 100%;
  padding-block: 50px;
  padding-inline: 10px;
  border-radius: 20px;
}
#contact form > div header {
  text-align: center;
}
#contact form > div header h2 {
  font-size: 1.8rem;
  font-weight: bold;
}
@media (width > 600px) {
  #contact form > div header h2 {
    font-size: clamp(1.9rem, 1.63rem + 0.73vw, 2.5rem);
  }
}
#contact form > div header p {
  font-size: 0.83rem;
}
@media (width > 600px) {
  #contact form > div header p {
    font-size: clamp(0.83rem, 0.31rem + 0.85vw, 1.33rem);
  }
}
#contact form > div main section {
  width: 100%;
}
#contact form > div main .services label .checkmark input {
  opacity: 0;
  height: 0;
  width: 0;
}
#contact form > div main .services label .checkmark span {
  height: 25px;
  width: 25px;
  border-radius: 5px;
}
#contact form > div main .services label .checkmark span:after {
  content: "";
  width: 5px;
  height: 10px;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
#contact form > div main .services label > span {
  width: fit-content;
  height: fit-content;
  font-size: 0.6rem;
  font-weight: normal;
}
@media (width > 600px) {
  #contact form > div main .services label > span {
    font-size: clamp(0.7rem, 0.4rem + 0.85vw, 1.3rem);
  }
}
#contact form label,
#contact form button {
  font-size: 0.83rem;
  font-weight: bold;
}
@media (width > 600px) {
  #contact form label,
  #contact form button {
    font-size: clamp(0.93rem, 0.61rem + 0.85vw, 1.63rem);
  }
}
#contact form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#contact form input,
#contact form textarea {
  font-size: 0.83rem;
}
@media (width > 600px) {
  #contact form input,
  #contact form textarea {
    font-size: clamp(0.83rem, 0.31rem + 0.85vw, 1.33rem);
  }
}
#contact form input {
  width: 100%;
  padding: 3px;
}
#contact form textarea {
  resize: vertical;
  min-width: 100%;
  min-height: 150px;
  padding: 3px;
  border-radius: 8px;
  overflow: hidden;
}
#contact form button {
  height: 53px;
}
@media (width > 600px) {
  #contact {
    padding: 15px;
  }
  #contact form button {
    width: 200px;
  }
}
@media (width > 1080px) {
  #contact {
    padding: 30px;
  }
}

#map {
  min-width: 100%;
  max-width: none;
  height: 500px;
  border-radius: 5px;
  overflow: hidden;
}
#map iframe {
  width: 100%;
  height: 100%;
}