.dev-small__widget {
  background-color: #02122c;
  max-width: 792px;
  position: relative;
  padding: 24px 0 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: start;
  overflow: hidden;
  margin: 0 auto;
}

.dev-small__bg-image {
  position: absolute;
  right: 0;
  bottom: 0;
}

.dev-small__span-bg {
  position: absolute;
  left: -4px;
  z-index: -1;
  top: 50%;
  transform: translate(0, -50%);
}

.dev-big__span-bg {
  display: none;
}

.dev-small__title {
  color: #fff;
  font-size: 43px;
  font-style: normal;
  font-weight: 500;
  line-height: 45px;
  margin-bottom: 10px;
  max-width: 617px;
  position: relative;
  z-index: 3;
}

.dev-small__title-with-bg {
  position: relative;
}

.dev-small__text {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 20px;
  max-width: 353px;
}

.dev-small__btn {
  display: block;
  padding: 18px 60px;
  border-radius: 10px;
  background-color: #ff01f5;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  position: relative;
  z-index: 3;
}

.dev-small__widget:hover .dev-small__btn {
  background-color: #fff;
  color: #02122c;
  transition: 0.5s all;
}

.des-small__widget {
  background-color: #003eff;
  max-width: 792px;
  position: relative;
  padding: 24px 0 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: start;
  overflow: hidden;
  margin: 0 auto;
}

.des-small__bg-image {
  position: absolute;
  right: 0;
  bottom: 23px;
}

.des-small__span-bg {
  position: absolute;
  right: -13px;
  z-index: -1;
  top: -7px;
}

.des-small__title {
  color: #fff;
  font-size: 43px;
  font-style: normal;
  font-weight: 500;
  line-height: 45px;
  margin-bottom: 10px;
  max-width: 617px;
  position: relative;
  z-index: 3;
}

.des-small__title-with-bg {
  position: relative;
}

.des-small__text {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 20px;
  max-width: 353px;
}

.des-small__bg-image--mobile {
  display: none;
}

.des-small__btn {
  display: block;
  padding: 18px 60px;
  border-radius: 10px;
  background-color: #fffa2d;
  color: #003eff;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  position: relative;
  z-index: 3;
}

.des-small__widget:hover .des-small__btn {
  background-color: #fff;
  transition: 0.5s all;
}

.dev-big__widget {
  background-color: #02122c;
  max-width: 792px;
  position: relative;
  padding: 24px 0 24px 30px;
  display: flex;
  flex-direction: column;
  align-items: start;
  overflow: hidden;
  margin: 0 auto;
}

.dev-big__bg-image {
  position: absolute;
  right: 0;
  bottom: 0;
}

.dev-big__span-bg {
  position: absolute;
  left: 0;
  z-index: -1;
}

.dev-big__title {
  color: #fff;
  font-size: 63px;
  font-weight: 500;
  line-height: 66px;
  margin-bottom: 8px;
  position: relative;
  z-index: 3;
}

.dev-big__title-with-bg {
  position: relative;
}

.dev-big__text {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 17px;
  max-width: 625px;
}

.des-big__span-bg {
  display: none;
}

.dev-big__btn {
  display: block;
  padding: 18px 60px;
  border-radius: 10px;
  background-color: #ff01f5;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  position: relative;
  z-index: 3;
  transition: 0.5s all;
}

.dev-big__widget:hover .dev-big__btn {
  background-color: #fff;
  color: #02122c;
  transition: 0.5s all;
}

.des-big__widget {
  background-color: #003eff;
  max-width: 792px;
  position: relative;
  padding: 24px 0 24px 30px;
  display: flex;
  flex-direction: column;
  align-items: start;
  overflow: hidden;
  margin: 0 auto;
}

.des-big__bg-image {
  position: absolute;
  right: 0;
  bottom: 0;
}

.des-big__span-bg {
  position: absolute;
  right: 0;
  z-index: -1;
}

.des-big__title {
  color: #fff;
  font-size: 63px;
  font-weight: 500;
  line-height: 66px;
  margin-bottom: 10px;
  position: relative;
  z-index: 3;
}

.des-big__title-with-bg {
  position: relative;
}

.des-big__text {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 20px;
  max-width: 613px;
}

.des-big__btn {
  display: block;
  padding: 18px 60px;
  border-radius: 10px;
  background-color: #fffa2d;
  color: #003eff;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  position: relative;
  z-index: 3;
  transition: 0.5s all;
}

.des-big__widget:hover .des-big__btn {
  background-color: #fff;
  transition: 0.5s all;
}

.dev-small__widget:hover,
.dev-big__widget:hover,
.des-small__widget:hover,
.des-big__widget:hover,
.dev-small__widget:hover .dev-small__btn,
.dev-big__widget:hover .dev-big__btn,
.des-small__widget:hover .des-small__btn,
.des-big__widget:hover .des-big__btn {
  cursor: url("data:image/png;base64,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")
      32 32,
    pointer;
}

.dev-small__bg-image--mobile {
  display: none;
}

@media (max-width: 768px) {
  .dev-small__widget,
  .des-small__widget,
  .dev-big__widget,
  .des-big__widget {
    padding-top: 0;
    max-width: 345px;
    padding: 0 8px 30px 8px;
    border-radius: 10px;
  }

  .dev-small__bg-image--mobile,
  .des-small__bg-image--mobile,
  .dev-big__bg-image--mobile,
  .des-big__bg-image--mobile {
    display: block;
    margin: 0 auto;
    margin-bottom: 24px;
  }

  .dev-small__bg-image,
  .des-small__bg-image,
  .dev-big__bg-image,
  .des-big__bg-image {
    display: none;
  }

  .dev-small__title,
  .des-small__title,
  .dev-big__title,
  .des-big__title {
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    max-width: 278px;
    margin-bottom: 24px;
    line-height: normal;
  }

  .dev-small__title-with-bg,
  .des-small__title-with-bg,
  .dev-big__title-with-bg,
  .des-big__title-with-bg {
    display: block;
  }

  .dev-small__br-desktop {
    display: none;
  }

  .dev-small__span-bg,
  .des-small__span-bg,
  .dev-big__span-bg,
  .des-big__span-bg {
    display: block;
    width: 309px;
    height: 49px;
    left: -13px;
  }

  .dev-big__span-bg {
    top: -10px;
  }

  .des-big__span-bg {
    left: -35px;
  }

  .des-small__span-bg {
    left: -61px;
  }

  .dev-small__text,
  .des-small__text,
  .dev-big__text,
  .des-big__text {
    margin-bottom: 32px;
    max-width: 273px;
  }

  .dev-small__btn,
  .des-small__btn,
  .dev-big__btn,
  .des-big__btn {
    width: 100%;
    text-align: center;
  }

  .des-small__span-bg {
    left: -53px;
  }

  .dev-big__title {
    font-size: 25px;
  }

  .des-big__span-bg {
    left: -27px;
    top: -5px;
  }
}
.form-modal__widget {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.25);
  overflow: hidden;
  cursor: auto;
  padding: 0 15px;
}
.form-modal__widget.active {
  display: flex;
}
.form-modal__widget--container {
  position: relative;
  padding: 24px;
  background-color: white;
  border-radius: 12px;
  min-width: 350px;
  max-width: 700px;
}
.form-modal__widget--form {
  display: grid;
  row-gap: 12px;
  grid-template-columns: 1fr;
  margin-top: 24px;
}
.form-modal__widget--input--wrapper {
  display: grid;
}

.form-modal__widget--close {
  position: absolute;
  top: 24px;
  right: 24px;
  cursor: pointer;
}

.form-modal__widget--title {
  font-size: 24px;
  margin-bottom: 12px;
}
.form-modal__widget--subtitle {
  font-size: 18px;
}

.form-modal__widget--submit {
  display: flex;
  flex-direction: column;
}

.form-modal__widget--error {
  color: red;
  font-size: 14px;
}

.form-modal__widget--loader {
  border: 4px solid white;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
  display: none; /* Initially hide the loader */
  margin-left: 8px;
}

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

.contact-us-form__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  grid-gap: 26px;
  margin-bottom: 38px;
}
.contact-us-form__label {
  display: inline-block;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  color: var(--blue);
  margin-bottom: 17px;
}
.contact-us-form__input {
  display: block;
  width: 100%;
  border: 1px solid var(--blue);
  padding: 17px 14px;
  font-size: 14px;
  line-height: 17px;
  color: var(--blue);
  appearance: none;
  border-radius: 0;

  &--textarea {
    resize: vertical;
  }
  &::placeholder {
    font-size: 14px;
    line-height: 17px;
    color: rgba(92, 59, 254, 0.2);
  }
}
.contact-us-form__input-wrap--big {
  grid-column: span 2;
}
.contact-us-form__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 14px;
  background-color: var(--blue);
  color: var(--white);
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  .contact-us-form__inputs {
    display: block;
  }
  .contact-us-form__input-wrap {
    margin-bottom: 20px;
    width: 100%;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .contact-us-form__label {
    font-size: 14px;
    line-height: 19px;
    margin-bottom: 10px;
  }
}