.contact-block-2 {
    .text1 {
       margin-bottom: var(--size--24); 
    }
    .logo {
        margin-top: var(--size--80);
    }
}


.scroll-btn2 {
    color: var(--color-light);
    cursor: pointer;
    border-radius: 100vw;
    justify-content: center;
    align-items: center;
    width: 6.875rem;
    height: 6.875rem;
    display: flex;
    position: relative;
    overflow: hidden;
}

.scroll-btn2 .scroll-btn_arrow {
    z-index: 2;
    width: 3.5625rem;
    height: 4.1875rem;
    position: relative;
}

.scroll-btn2 .scroll-btn_arrow.is-second {
    position: absolute;
}

.scroll-btn_icon {
    z-index: 2;
    position: relative;
    width: 100%;
    height: 100%;
}

.scroll-btn2  .scroll-btn_icon.is-second {
    position: absolute;
}



form {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  width: 45rem;
  text-align: left;

  .form-item {
    background-color: var(--color-5);
    border-radius: 3px;
    padding: .875rem 1.125rem;
    display: flex;
    flex-direction: row;
    position: relative;


    min-width: 8.125rem;
    display: flex;
    flex-direction: row;
    gap: .625rem;
    font-size: .75rem;
    color: var(--color-2);

    &:before {
      content: "";
      height: 1.5rem;
      width: 1px;
      background: var(--color-2);
    }

  }

  ::-webkit-input-placeholder {
    color: var(--color-2);
  }

  textarea {
    width: 100%;

    &:focus {
      outline: none;
    }
  }

  .radio-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .wpcf7-form-control-wrap {
      width: auto;
    }

    label {
      display: flex;
      flex-direction: row;
      position: relative;
    }

    input {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: auto;
    }

    label:before {
      content: "";
      display: block;
      height: .875rem;
      width: .875rem;
      border-radius: 100vw;
      margin-right: .5rem;
      transition: background-color .3s ease;
      background-color: var(--color-11);
      align-self: center;
    }

    label:has(input:checked):before {
      background-color: var(--color-2);
    }
  }

  .wpcf7-radio {
    display: flex;
    flex-direction: column;
  }

  .radio-label {
    min-width: 8.125rem;
    display: flex;
    flex-direction: row;
    gap: .625rem;
    text-transform: uppercase;
    font-size: .75rem;
  }

  .wpcf7-list-item {
    width: 12.8125rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid currentColor;

    &:last-child {
      border-bottom: none;
    }
  }

  .wpcf7-form-control-wrap {
    width: 100%;
  }

  .wpcf7-acceptance .wpcf7-list-item {
    width: 100%;
  }

  .submit-btn {
    input {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 100%;
      height: 2.5rem;
      background-color: var(--color-2);
      border-radius: 3px;
      color: var(--color-light);
      font-size: 1rem;
      text-transform: uppercase;
      border: none;
      transition: background-color .3s ease, color .3s ease;
      border-radius: var(--size--24);
    }

    &:hover {
      input {
        background-color: var(--color-5);
        color: var(--color-dark);
      }
    }
  }

}

/* 1. Hide the original square checkbox */
.custom-round-checkbox p {
  max-width: 100% !important;
}

.custom-round-checkbox input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  outline: none;

  background-color: var(--color-11);
  border-radius: 100vw;
  align-self: center;
  width: .875rem;
  height: .875rem;
  margin-right: .5rem;
  transition: background-color .3s;
  display: block;
}

/* 2. Optional: Style when the user clicks it (Checked state) */
/* If you have a different image for the "checked" state, add it here */
.custom-round-checkbox input[type="checkbox"]:checked {
  background-color: var(--color-dark);
  /* Fills the circle when clicked */
  background-blend-mode: overlay;
}

/* 3. Align the text properly next to the small button */
.custom-round-checkbox .wpcf7-list-item-label {
  padding-left: 12px;
  width: 100%;
  display: inline-block;
}

/* Hide the default ugly browser button */
.custom-file-upload input[type="file"] {
  display: none;
}

/* Style the label to look like a professional button */
.custom-file-upload {
  display: inline-block;
  padding: 0;
  cursor: pointer;
  background-color: transparent;
  color: var(--color-dark);
  border-radius: 0;
  font-weight: 400;
  border: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  text-transform: uppercase;
}

.custom-file-upload:hover {
  background-color: transparent;
}

/* 1. Hide the original square checkbox */
.custom-round-checkbox p {
  max-width: 100% !important;
}

.custom-round-checkbox a {
  display: inline-block;
  text-decoration: underline;
}

input {
  &:focus {
    outline: none;
  }
}

.wpcf7-response-output {
  transition: all 0.3s ease-in-out;
}

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: unset;
  font-size: 18px;
  line-height: 20px;
}

.contact-form .wpcf7 {
  display: none;
  /* Initial state */
  opacity: 0;
}




@media screen and (hover: hover) {
    .scroll-btn2:hover .scroll-btn_bg {
        transform: scale(.95);
    }
}

.scroll-btn2 .scroll-btn_bg {
    transition: transform .4s var(--smooth);
}

.scroll-btn_bg {
    /* background-color: var(--color-dark); */
    border-radius: 100vw;
    position: absolute;
    inset: 0%;
}

@media screen and (max-width: 1440px) {
    .contact-block-2 {
        .logo img {
            max-width: 180px;
        }
    }
}

@media screen and (max-width: 1023px) {
  .contact-block-2 {
        .logo {
            margin-bottom: var(--size--80);
        }
    }

    .ea-standard .step {
        padding: 0;
    }

  }

@media screen and (max-width: 991px) {


    .scroll-btn2 .scroll-btn {
        width: 3.75rem;
        height: 3.75rem;
    }

    .scroll-btn2 .scroll-btn_arrow {
        width: 2rem;
        height: 2.1rem;
    }
}



@media screen and (max-width: 600px) {
  .contact-block-2 {
    .logo {
      margin-top: var(--size--40);
      margin-bottom: var(--size--40);
      img {
        max-width: 100px;
      }
    }
  }

}

@media screen and (max-width: 479px) {
  .contact-block-2 .hero_btn {
    display: flex;
  }

  .ea-standard form .ea_hide_show div {
    flex-direction: column;
  }

}