/*--------------------------------------------------------------
34. Contact 
----------------------------------------------------------------*/
.cs-contact-page-content {
  .container-fluid {
    padding-left: calc((100% - 1320px) / 2);
  }
  .cs-contact-in {
    max-width: 545px;
    .cs-contact-text{
      padding-bottom: 70px;
    }
    h2 {
      padding-bottom: 10px;
    }
    .cs-logi-office-wrap {
      display: flex;
      justify-content: space-between;
    }
  }
  .cs-contact-page-form-wrap {
    background: $dark-bg;
    padding: 150px 100px;
  }
}
.cs-border-v-line {
  width: 1px;
  background: $border;
}
.cs-form-cp-in {
  form {
    max-width: 500px;
    input,
    select,
    textarea {
      background: transparent;
      border-radius: 0px;
      border: none;
      border-bottom: 1px solid #2f6263;
      color: rgba($color: #fff, $alpha: 0.8);
    }
    :focus-visible,
    :focus-visible,
    :focus,
    :target {
      border-bottom: 1px solid $white;
      background: transparent;
      color: $white;
    }
    :active{
      color: $white;
    }
    :focus{
      border-bottom: 1px solid $white;
      box-shadow: none;
    }
    input,
    select {
      height: 50px;
    }
    ::placeholder {
      color: rgba($color: #fff, $alpha: 0.8);
      font-family: "Hedvig Letters Sans";
      &:hover{
        color: $white;
      }
    }
  }
  .cs-primary-btn{
    margin-top: 30px;
  }
  &.cs-comment-form{
    form{
      max-width: 100%;
    }
  }
  &.cs-form-light{
    form{
      input,
      select,
      textarea {
        border-bottom: 1px solid $border;
        color: $black;
      }
      ::placeholder {
        color: rgba($color: $black, $alpha: 0.8);
        &:hover{
          color: $black;
        }
      }
      :focus-visible,
      :focus-visible,
      :focus,
      :target {
        border-bottom: 1px solid $accent;
      }
      :focus{
        border-bottom: 1px solid $accent;
      }
    }
  }
}

.input-row-2col{
  justify-content: space-between;
  .input-item{
    width: 47%;
  }
}

.cs-logi-map-wrap{
  iframe{
    width: 100vw;
    height: 600px;
    margin-bottom: -9px;
  }
}

@media screen and (max-width: 1350px) {
  .cs-contact-page-content {
    .container-fluid{
      padding-right: calc(var(--bs-gutter-x) * 0.5);
      padding-left: calc(var(--bs-gutter-x) * 0.5); 
    }
  }
}
@media screen and (max-width: 1199px) {
  .cs-contact-page-content {
    .container-fluid{
      max-width: 960px;
      .cs-contact-text{
        padding-bottom: 40px;
      }
      margin: auto;
      .cs-contact-in{
        padding-bottom: 75px;
      }
    }
    .cs-contact-in{
      margin: auto;
    }
  }
  .cs-form-cp-in{
    form{
      max-width: 100% !important;
    }
  }
}
@media screen and (max-width: 991px) {
  .cs-contact-page-content {
    .cs-contact-page-form-wrap{
      padding: 75px;
    }
  }
}
@media screen and (max-width: 767px) {
  .cs-contact-page-content {
    .cs-contact-in{
      text-align: center;
    }
  }
}
@media screen and (max-width: 530px) {
  .cs-contact-page-content {
    .cs-contact-in{
      .cs-logi-office-wrap{
        flex-direction: column;
        gap: 30px;
        p{
          margin: auto;
        }
      }
    }
    .cs-contact-page-form-wrap{
      padding: 35px;
    }
  }
}
