/*#region ------ Variables --- */
/*#region ------ Arrays --- */
/*#endregion*/
/*#endregion*/
/*#region ------ Mixins --- */
/*#endregion*/
/*#region ------ Functions --- */
/*#endregion*/
/* ------ Parts ------ */
/* ------ Components ------ */
/* ------ Widgets ------ */
/* ------ Elements ------ */
/* ------ Templates ------ */
.component_form_2 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.component_form_2:before {
  z-index: 1;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(0.5 * 100vw + 130px);
  height: calc(100% - 80px);
  background-color: var(--color-light);
}
.component_form_2::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4196078431);
}
.component_form_2 .component__background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
.component_form_2 .component__background .back {
  width: 100%;
  height: 100%;
  transform: scale(1.2) !important;
}
.component_form_2 .component__background img {
  position: absolute;
  object-fit: cover;
}
.component_form_2 > .container {
  z-index: 1;
  margin-bottom: 80px;
}
.component_form_2 .component__inner {
  display: grid;
  grid-template-areas: "content_1 content_2";
  grid-template-columns: 630px 370px;
  justify-content: space-between;
}
.component_form_2 .component__title {
  text-transform: uppercase;
}
.component_form_2 .component__description {
  color: var(--color-shade-1);
}
.component_form_2 .component__form {
  margin-top: 40px;
  width: fit-content;
}
.component_form_2 .component__form .response {
  z-index: -1;
}
.component_form_2 .component__form .response--load {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 1;
  width: 100%;
  height: 100%;
}
.component_form_2 .component__form .response--load .response__text {
  animation: scaleText 180ms ease-in-out;
}
.component_form_2 .component__form .response--load .response__inner--load {
  opacity: 1;
}
.component_form_2 .component__form .response--load ~ * {
  opacity: 0;
}
.component_form_2 .component__form .response--success {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 1;
  width: 100%;
  height: 100%;
}
.component_form_2 .component__form .response--success .figure {
  display: inline-block;
  width: 8em;
  height: 8em;
  font-size: 20px;
  border-radius: 50%;
  border: 4px solid var(--color-main-1);
  position: relative;
  overflow: hidden;
  transform-origin: center;
  animation: showSuccess 180ms ease-in-out;
  transform: scale(1);
}
.component_form_2 .component__form .response--success .figure__tip, .component_form_2 .component__form .response--success .figure__long {
  display: block;
  position: absolute;
  height: 4px;
  background-color: var(--color-main-1);
  border-radius: 10px;
}
.component_form_2 .component__form .response--success .figure__tip {
  width: 2.4em;
  top: 4.3em;
  left: 1.4em;
  transform: rotate(45deg);
  animation: tipInPlace 300ms ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 180ms;
  visibility: hidden;
}
.component_form_2 .component__form .response--success .figure__long {
  transform: rotate(-45deg);
  animation: longInPlace 140ms ease-in-out;
  animation-fill-mode: forwards;
  visibility: hidden;
  animation-delay: 440ms;
}
@keyframes showSuccess {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes tipInPlace {
  from {
    width: 0em;
    top: 0em;
    left: -1.6em;
  }
  to {
    width: 2.4em;
    top: 4.3em;
    left: 1.4em;
    visibility: visible;
  }
}
@keyframes longInPlace {
  from {
    width: 0em;
    top: 5.1em;
    left: 3.2em;
  }
  to {
    width: 4em;
    top: 3.7em;
    left: 2.75em;
    visibility: visible;
  }
}
.component_form_2 .component__form .response--success .response__text {
  animation: scaleText 180ms ease-in-out;
}
.component_form_2 .component__form .response--success .response__inner--success {
  opacity: 1;
}
.component_form_2 .component__form .response--success ~ * {
  opacity: 0;
}
.component_form_2 .component__form .response--error {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 1;
  width: 100%;
  height: 100%;
}
.component_form_2 .component__form .response--error .response__text {
  animation: scaleText 180ms ease-in-out;
}
.component_form_2 .component__form .response--error .response__inner--error {
  opacity: 1;
}
.component_form_2 .component__form .response--error ~ * {
  opacity: 0;
}
.component_form_2 .component__form .response .figure {
  width: 160px;
  height: 160px;
}
.component_form_2 .component__form .response__inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  transition: opacity ease 400ms;
  opacity: 0;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: fit-content;
  height: fit-content;
}
.component_form_2 .component__form .response__svg {
  width: 180px;
}
.component_form_2 .component__form .response__svg path {
  fill: var(--color-main-1);
}
.component_form_2 .component__form .response__text {
  margin-top: 15px;
  font-family: "FiraSans-Regular";
  color: var(--color-main-1);
  font-size: 24px;
  line-height: 32px;
}
@keyframes scaleText {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.component_form_2 .component__form .response .loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--color-main-1);
  animation: spin 2s linear infinite;
}
.component_form_2 .component__form .response .loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--color-main-1);
  animation: spin 3s linear infinite;
}
.component_form_2 .component__form .response .loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--color-main-1);
  animation: spin 1.5s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.component_form_2 .component__form .wpcf7 {
  display: flex;
  position: relative;
}
.component_form_2 .component__form .wpcf7-form-control-wrap {
  display: contents;
}
.component_form_2 .component__form .wpcf7-not-valid-tip {
  display: none;
}
.component_form_2 .component__form .wpcf7-spinner {
  display: none;
}
.component_form_2 .component__form .wpcf7-response-output {
  display: none;
}
.component_form_2 .component__form .wpcf7-not-valid {
  border-color: red !important;
}
.component_form_2 .component__form .codedropz-upload-inner h3,
.component_form_2 .component__form .codedropz-upload-inner span {
  display: none;
}
.component_form_2 .component__form .codedropz-upload-handler {
  border: 1px solid transparent;
}
.component_form_2 .component__form .codedropz-upload-wrapper .dnd-upload-counter {
  display: none;
}
.component_form_2 .component__form .dnd-upload-status {
  flex-wrap: wrap;
}
@media (max-width: 575px) {
  .component_form_2 .component__form .dnd-upload-details .name {
    padding-right: 0px;
  }
  .component_form_2 .component__form .dnd-upload-status {
    flex-direction: column;
  }
}
.component_form_2 .component__form form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.component_form_2 .component__form form input:not([type=submit]),
.component_form_2 .component__form form textarea {
  width: 100%;
  resize: none;
  padding: 15px 25px;
  border-radius: 5px;
  border: 1px solid var(--color-shade-4);
  background-color: rgba(25, 23, 24, 0.7411764706);
  border-radius: 2px;
  color: var(--color-shade-4);
}
.component_form_2 .component__form form input:not([type=submit])::placeholder,
.component_form_2 .component__form form textarea::placeholder {
  font-family: "FiraSans-Regular";
  font-size: 14px;
  line-height: 130%;
  color: var(--color-shade-4);
  font-family: "FiraSans-Medium";
}
@media (max-width: 1199px) {
  .component_form_2 .component__form form input:not([type=submit])::placeholder,
  .component_form_2 .component__form form textarea::placeholder {
    font-size: calc(0.0159090909 * 100vw + -5.0909090909px);
    font-size: calc(0.0022727273 * 100vw + 11.2727272727px);
  }
}
@media (max-width: 1199px) {
  .component_form_2 .component__form form input:not([type=submit])::placeholder,
  .component_form_2 .component__form form textarea::placeholder {
    line-height: 120%;
    line-height: 120%;
  }
}
.component_form_2 .component__form form textarea {
  grid-column: auto/span 2;
}
.component_form_2 .component__form form input[type=submit] {
  max-width: 100%;
  width: 210px;
  place-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 60px;
  padding: 0 15px;
  font-family: "FiraSans-Medium";
  color: var(--color-light);
  border: 1px solid var(--color-main-1);
  border-radius: 5px;
  transition: background-color ease 400ms, transform ease-in-out 300ms;
  background-color: var(--color-main-1);
}
.component_form_2 .component__form form input[type=submit]:hover {
  transform: scale(1.1);
  color: var(--color-main-1);
}
.component_form_2 .component__form form input[type=submit]:hover {
  border-color: var(--color-main-1);
  background-color: transparent;
}
.component_form_2 .component__form form .grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(auto, 300px));
  grid-gap: 30px;
}
.component_form_2 .component__form form .policy {
  place-self: center;
  color: var(--color-light);
}
.component_form_2 .component__form form .policy a {
  color: var(--color-light);
  text-decoration: underline;
}
.component_form_2 .component__form form .policy a:hover {
  text-decoration: none;
}
.component_form_2 .component__form form input:not([type=submit]),
.component_form_2 .component__form form textarea {
  width: 100%;
  resize: none;
  padding: 15px 25px;
  border-radius: 5px;
  border: 1px solid var(--color-shade-1);
  background-color: transparent;
  border-radius: 2px;
  color: var(--color-shade-1);
}
.component_form_2 .component__form form input:not([type=submit])::placeholder,
.component_form_2 .component__form form textarea::placeholder {
  font-family: "FiraSans-Regular";
  font-size: 14px;
  line-height: 130%;
  color: var(--color-shade-1);
  font-family: "FiraSans-Medium";
}
@media (max-width: 1199px) {
  .component_form_2 .component__form form input:not([type=submit])::placeholder,
  .component_form_2 .component__form form textarea::placeholder {
    font-size: calc(0.0159090909 * 100vw + -5.0909090909px);
    font-size: calc(0.0022727273 * 100vw + 11.2727272727px);
  }
}
@media (max-width: 1199px) {
  .component_form_2 .component__form form input:not([type=submit])::placeholder,
  .component_form_2 .component__form form textarea::placeholder {
    line-height: 120%;
    line-height: 120%;
  }
}
.component_form_2 .component__form form .policy {
  color: var(--color-shade-1);
}
.component_form_2 .component__form form .policy a {
  color: var(--color-shade-1);
}
.component_form_2 .component__content.content_1 {
  grid-area: content_1;
}
.component_form_2 .component__content.content_1 .component__title {
  color: var(--color-dark);
  margin-bottom: 20px;
}
.component_form_2 .component__content.content_2 {
  grid-area: content_2;
}
.component_form_2 .component__content.content_2 .component__title {
  color: var(--color-light);
  margin-bottom: 30px;
}
.component_form_2 .component__fields {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.component_form_2 .component__fields .field {
  display: grid;
  grid-template-areas: "icon title" "icon values";
  width: fit-content;
  align-items: flex-start;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
}
.component_form_2 .component__fields .field .field__icon {
  grid-area: icon;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: var(--color-main-1);
  border-radius: 50%;
}
.component_form_2 .component__fields .field .field__icon svg path {
  stroke: var(--color-light);
}
.component_form_2 .component__fields .field .field__title {
  grid-area: title;
  line-height: 100%;
  color: var(--color-shade-4);
  font-size: 18px;
  font-family: "FiraSans-Bold";
}
.component_form_2 .component__fields .field .field__values {
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-area: values;
}
.component_form_2 .component__fields .field .field__subtitle {
  font-family: "FiraSans-Medium";
  font-size: 18px;
  line-height: 100%;
  color: var(--color-light);
}
.component_form_2 .component__fields .field .field__subtitle:hover {
  color: var(--color-main-1);
}
.component_form_2 .component__fields .field.noTitle {
  grid-template-areas: "icon values";
  align-items: center;
}
@media (max-width: 1199px) {
  .component_form_2 > .container {
    margin-bottom: 20px;
  }
  .component_form_2:before {
    display: none;
  }
  .component_form_2 .component__inner {
    grid-template-areas: "content_1" "content_2";
    grid-template-columns: 1fr;
  }
  .component_form_2 .component__content.content_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-light);
    padding: 25px calc(0.0170454545 * 100vw + 9.5454545455px);
    border-radius: 30px;
  }
  .component_form_2 .component__content.content_2 {
    margin-top: 30px;
  }
  .component_form_2 .component__content.content_2 .component__title {
    text-align: center;
  }
  .component_form_2 .component__form {
    margin-top: calc(0.0227272727 * 100vw + 12.7272727273px);
  }
  .component_form_2 .component__form form .grid {
    grid-gap: calc(0.0170454545 * 100vw + 9.5454545455px);
  }
  .component_form_2 .component__description {
    text-align: center;
  }
  .component_form_2 br {
    display: none;
  }
}
@media (max-width: 767px) {
  .component_form_2 .component__form form .grid {
    grid-template-columns: 1fr;
  }
  .component_form_2 .component__form form .grid textarea {
    grid-column: auto;
  }
  .component_form_2 .component__form form .policy {
    text-align: center;
  }
  .component_form_2 .component__form input[type=submit] {
    margin: auto;
  }
}