.contact__form__wrapper {
  --main-blue: #90caf9;
  --main-ease: cubic-bezier(.65,.05,.36,1);

  & .container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    & #button-2 {
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    & .button {
      display: inline-flex;
      border: 1px solid var(--color-subtitle);
      text-transform: capitalize;
      font-size: 16px;
      letter-spacing: 1.5px;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 10px 50px;
      box-shadow: 2px 3px #636161b3;
    }

    & .button a {
      text-decoration: none;
      color: var(--color-subtitle);
      font-weight: 600;
    }

    & #button-2:hover #dub-arrow {
      left: 0;
    }

    & #dub-arrow {
      width: 100%;
      height: 100%;
      background: var(--color-secondary-btn);
      left: -221px;
      position: absolute;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .35s ease-Out;
      bottom: 0;
    }

    & h2 {
      font-family: Raleway;
      font-size: 42px;
      font-weight: 800;
      text-transform: uppercase;
      color: #03176D;
    }

    & .bottom {
      display: flex;
      justify-content: stretch;
      gap: 20px;

      & .left {
        display: flex;
        flex-direction: column;
        width: 50%;
        gap: 20px;

        .info_block {
          display: flex;
          flex-direction: column;

          .label {
            font-family: Raleway;
            font-size: 32px;
            font-weight: 800;
            line-height: 53.68px;
            color: #232323;
            margin: 0;
            text-transform: uppercase;
          }

          .value {
            display: flex;
            gap: 5px;
            align-items: start;
            
            font-family: DM Sans;
            font-size: 20px;
            font-weight: 400;
            line-height: 26.04px;
            color: #5B5B5B;
            margin: 0;
            padding-right: 30%;
          
            & img {
              margin-top: 5px;
            }
          }
        }
      }

      & .right {
        width: 50%;
      }

      & .right form {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;

        & .top {
          display: flex;
          flex-direction: column;
          gap: 20px;
          flex-grow: 1;

          & .details {
            display: flex;
            gap: 20px;
            justify-content: space-between;

            & .standard-input {
              position: relative;
            }

            & .standard-input input {
              color: black;
              height: 4rem;
              border: none;
              border-bottom: 1px solid #1C1C1C;
              background-color: white;
              padding-left: 10px;
              font-size: 20px;
              transition: .1s var(--main-ease);
              outline: none;
              box-sizing: border-box;
            }

            & .standard-input label {
              position: absolute;
              top: 50%;
              left: 2%;
              font-family: DM Sans;
              font-weight: 400;
              transform: translateY(-50%);
              background-color: white;
              color: #5B5B5B;
              text-align: center;
              transition: .2s var(--main-ease);
              font-size: 1.5rem;
              pointer-events: none;
              padding: 0 5px;
            }

            & .standard-input input:not(:placeholder-shown)~label,
            & .standard-input input:focus~label {
              top: 0px;
              left: 0px;
              font-size: 1rem;
            }

            & .standard-input .underline {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              transform: scaleX(0);
              transition: transform 0.2s var(--main-ease);
              border-bottom: 2px solid var(--color-secondary-btn);
            }

            & .standard-input input:focus~.underline {
              transform: scaleX(1);
            }

            & .standard-input input:hover {
              border-bottom: 2px solid var(--color-secondary-btn);
            }

            & .standard-input input:focus~label {
              color: var(--color-secondary-btn) !important;
            }
          }

          & .textarea-input {
            position: relative;
            flex: 1;

            & textarea {
              color: black;
              width: 100%;
              height: 100%;
              border: none;
              border-bottom: 1px solid #1C1C1C;
              background-color: white;
              padding-left: 10px;
              font-size: 20px;
              transition: .1s var(--main-ease);
              outline: none;
              box-sizing: border-box;
              padding-top: 10px;
            }

            & label {
              position: absolute;
              top: 20%;
              left: 0;
              font-family: DM Sans;
              font-weight: 400;
              transform: translateY(-50%);
              background-color: white;
              color: #5B5B5B;
              text-align: center;
              transition: .2s var(--main-ease);
              font-size: 1.5rem;
              pointer-events: none;
              padding: 0 5px;
            }

            & textarea:focus~label {
              top: 0px;
              left: 0px;
              font-size: 1rem;
            }

            & textarea:not(:placeholder-shown)~label {
              top: 0px;
              left: 0px;
              font-size: 1rem;
            }

            & .underline {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              transform: scaleX(0);
              transition: transform 0.2s var(--main-ease);
              border-bottom: 2px solid var(--color-secondary-btn);
            }

            & textarea:focus~.underline {
              transform: scaleX(1);
            }

            & textarea:hover {
              border-bottom: 2px solid var(--color-secondary-btn);
            }

            & textarea:focus~label {
              color: var(--color-secondary-btn) !important;
            }
          }
        }
      }
    }
  }
}

.location__map__wrapper {
  width: 100%;
  padding: 10px;
  margin-top: 120px;

  .map_container {
    filter: grayscale(100%);
  }
}

@media screen and (max-width: 1024px) {
  .contact__form__wrapper .container {
    & .bottom {
      flex-direction: column-reverse;
      gap: 60px;
      
      & .left {
        width: 100%;
      }

      & .right {
        width: 100%;

        & .details .standard-input {
          width: 50%;

          & input {
            width: 100%;
          }
        }

        & .textarea-input textarea {
          width: 100%;
        }

        & .textarea-input .underline {
          display: none;
        }

        & .bottom .button {
          width: fit-content;
        }
      }
    }
  }
}