/* color */
/* font */
/* transition */
.contactFormBox .item .refresh {
  transition: all 0.5s ease-in-out; }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.contactFormBox {
  margin-top: 120px; }
  @media (max-width: 1180px) {
    .contactFormBox {
      margin-top: 80px; } }
  @media (max-width: 640px) {
    .contactFormBox {
      margin-top: 40px; } }

.contactFormBox {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: 40px;
  grid-template-areas: "topic topic" "name note" "tel note" "email captcha"; }
  @media (max-width: 1180px) {
    .contactFormBox {
      grid-template-columns: 1fr;
      grid-template-areas: "topic" "name" "tel" "email" "note" "captcha"; } }
  .contactFormBox .item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center; }
    @media (max-width: 640px) {
      .contactFormBox .item {
        grid-template-columns: 1fr; } }
    .contactFormBox .item.name {
      grid-area: name; }
    .contactFormBox .item.tel {
      grid-area: tel; }
    .contactFormBox .item.email {
      grid-area: email; }
    .contactFormBox .item.note {
      grid-area: note;
      align-items: flex-start; }
    .contactFormBox .item.captcha {
      grid-area: captcha; }
    .contactFormBox .item.topic {
      grid-area: topic;
      grid-template-columns: auto 1fr;
      gap: 20px; }
      @media (max-width: 640px) {
        .contactFormBox .item.topic {
          grid-template-columns: 1fr; } }
    .contactFormBox .item .refresh {
      position: absolute;
      top: 50%;
      width: 24px;
      height: 24px;
      transform: translateY(-50%);
      right: 20px;
      border: none;
      cursor: pointer; }
      @media (min-width: 1181px) {
        .contactFormBox .item .refresh:hover {
          scale: 1.1;
          transform-origin: center; } }
  .contactFormBox .label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #036eb8; }
    [data-theme="dark"] .contactFormBox .label {
      color: #fff; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .contactFormBox .label {
        color: #fff; } }
    @media (max-width: 640px) {
      .contactFormBox .label {
        margin-bottom: 10px; } }
    .contactFormBox .label span {
      font-size: 14px;
      margin-left: 15px;
      color: #036eb8;
      font-weight: 700; }
      [data-theme="dark"] .contactFormBox .label span {
        color: #fff; }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .contactFormBox .label span {
          color: #fff; } }
      @media (max-width: 640px) {
        .contactFormBox .label span {
          font-size: 14px; } }
  .contactFormBox select {
    width: 100%;
    padding: 10px 20px;
    background-color: rgba(219, 219, 219, 0.28);
    border: none;
    font-size: 18px;
    color: #212122;
    letter-spacing: 2.4px; }
  .contactFormBox input,
  .contactFormBox textarea {
    width: 100%;
    padding: 10px 20px;
    background-color: rgba(219, 219, 219, 0.28);
    border: none;
    font-size: 18px;
    color: #212122;
    letter-spacing: 2.4px; }
    [data-theme="dark"] .contactFormBox input, [data-theme="dark"]
    .contactFormBox textarea {
      color: #fff; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .contactFormBox input, :root:not([data-theme="light"])
      .contactFormBox textarea {
        color: #fff; } }
    .contactFormBox input::-webkit-input-placeholder,
    .contactFormBox textarea::-webkit-input-placeholder {
      color: rgba(33, 33, 34, 0.85); }
    .contactFormBox input:-moz-placeholder,
    .contactFormBox textarea:-moz-placeholder {
      color: rgba(33, 33, 34, 0.85); }
    .contactFormBox input::-moz-placeholder,
    .contactFormBox textarea::-moz-placeholder {
      color: rgba(33, 33, 34, 0.85); }
    .contactFormBox input:-ms-input-placeholder,
    .contactFormBox textarea:-ms-input-placeholder {
      color: rgba(33, 33, 34, 0.85); }

.send {
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
  border: none;
  display: flex;
  justify-content: center;
  margin-top: 100px;
  cursor: pointer; }

.btnBox {
  margin-top: 60px; }
  .btnBox .btn {
    margin-left: auto;
    width: 156px;
    padding: 0 30px; }
    .btnBox .btn svg {
      left: 85%; }
    .btnBox .btn span {
      opacity: 1; }
      [data-theme="dark"] .btnBox .btn span {
        color: #000; }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .btnBox .btn span {
          color: #000; } }