@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  background-color: #ffffff;
}

main {
  display: flex;
  gap: 120px;
  padding: 48px 0;
  max-width: 992px;
  margin: 0 auto;

  .contact-form {
    max-width: 480px;
    width: 100%;

    .form-header {
      padding: 16px;
      margin-bottom: 12px;

      h1 {
        font-size: 32px;
        color: #121417;
        margin-bottom: 12px;
      }

      p {
        font-size: 14px;
        color: #61758a;
        max-width: 447px;
      }
    }

    form {
      .form-field {
        padding: 12px 16px;

        label {
          display: block;
          font-size: 16px;
          font-weight: 500;
          color: #121417;
          margin-bottom: 8px;
        }

        input,
        textarea {
          width: 100%;
          padding: 15px;
          font-size: 16px;
          font-weight: 400;
          line-height: 1.5em;
          color: #61758a;
          background-color: #ffffff;
          border: 1px solid #dbe0e5;
          border-radius: 8px;
          outline: none;
          font-family: "Inter", sans-serif;

          &::placeholder {
            color: #61758a;
          }

          &:focus {
            border-color: #1273d4;
          }
        }

        textarea {
          min-height: 120px;
          resize: vertical;
        }
      }

      .form-submit {
        padding: 12px 16px;

        button {
          padding: 0 16px;
          height: 40px;
          background-color: #1273d4;
          color: #ffffff;
          font-size: 14px;
          font-weight: 700;
          line-height: 1.5em;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: opacity 0.2s;

          &:hover {
            opacity: 0.9;
          }
        }
      }
    }
  }

  .contact-info {
    max-width: 392px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;

    .info-content {
      .info-section {
        padding: 0px 0px 16px;

        h2 {
          font-size: 22px;
          font-weight: 700;
          line-height: 1.2727272727272727em;
          color: #121417;
        }
      }

      .info-item {
        padding: 4px 16px 12px;

        p {
          font-size: 16px;
          font-weight: 400;
          line-height: 1.5em;
          color: #121417;
        }
      }
    }

    .map-container {
      width: 392px;
      height: 246px;
      border-radius: 8px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}