.contacts {
  display: flex;
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  gap: 40px;
  margin-top: 50px;
  margin-bottom: 100px;
  padding-left: 20px;
  padding-right: 20px;
}

.email-subscriber,
.map {
  width: 50%;
}

#mail-message {
  resize: vertical;
}

#email-error {
  margin-top: 8px;
  margin-bottom: -8px;
  color: var(--black1);
}

.contacts-form-fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.contacts-form-fields input,
.contacts-form-fields textarea {
  border-radius: 8px;
  border: 1px solid var(--greyBorder);
  padding: 14px 16px;
}

input:focus,
textarea:focus {
  border: 1px solid var(--blue1);
  outline: none; /* Removes default focus outline (optional) */
}

.email-subscriber-inner {
  border-radius: 10px;
  border: 1px solid var(--greyBorder);
  padding: 30px;
}

.send-btn,
.send-btn #mail-send {
  width: 100%;
}

.email-subscriber-inner .caption1 {
  color: var(--grey2);
}

.email-subscriber-inner .h2 {
  margin-bottom: 16px;
}

.email-subscriber-inner .text-after-head {
  margin-bottom: 32px;
}

.email-subscriber-inner .contacts-form-fields {
  margin-bottom: 15px;
}

.email-subscriber-inner .caption1 {
  margin-bottom: 16px;
}

.contacts-inner-cont .cont {
  display: flex;
  gap: 20px;
}

.contacts-inner-cont .cont img {
  width: 45px;
  height: 45px;
}

.map-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contacts-inner-cont {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.cont-text .body4 {
  margin-bottom: 4px;
}
.cont-text .caption1 {
  color: var(--grey2);
}

.cont-text span {
  color: var(--black1);
}

.working-hours {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.c-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-details .caption1 {
  color: var(--grey2);
}

.c-details span {
  color: var(--black1);
}

iframe {
  height: 250px;
  width: 100%;
}

@media (max-width: 768px) {
  .contacts {
    flex-direction: column;
    gap: 50px;
    margin-top: 30px;
    margin-bottom: 50px;
  }

  .email-subscriber,
  .map {
    width: 100%;
  }

  .email-subscriber-inner {
    border: none;
    padding: 0;
  }

  .email-subscriber-inner .h2 {
    margin-bottom: 12px;
  }

  .email-subscriber-inner .text-after-head {
    margin-bottom: 24px;
  }

  .contacts-form-fields {
    gap: 16px;
  }

  .contacts-form-fields input,
  .contacts-form-fields textarea {
    padding: 13px 16px;
  }

  .email-subscriber-inner .contacts-form-fields {
    margin-bottom: 16px;
  }

  .contacts-inner-cont .cont {
    gap: 16px;
  }
  .contacts-inner-cont .cont img {
    width: 40px;
    height: 40px;
  }

  .company-details {
    margin-bottom: -8px;
  }

  iframe {
    height: 200px;
  }
}