.home {
  position: relative;
  overflow: hidden;

  .about {
    position: relative;
    color: $black;
    z-index: +1;
    background: rgb(255, 255, 255);
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(221, 237, 244, 1) 100%
    );

    .tree {
      position: relative;

      .image {
        position: absolute;
        top: -100px;
        left: -130px;

        @include breakpoint(medium down) {
          display: none;
        }
      }
    }

    .intro {
      position: relative;
      padding-top: 100px;
      z-index: +99;

      @include breakpoint(medium down);
      margin-top: 20px;
    }

    @include breakpoint(small down) {
      margin-top: 0;
    }

    .about-park {
      font-size: 24px;
      line-height: 32px;
      font-family: $header-font-family;

      @include breakpoint(small down) {
        margin-bottom: 0;
        font-size: 18px;
      }
    }

    .swiper-container {
      @include breakpoint(small down) {
        padding-top: 30px;
      }
    }

    .arrow-navigation {
      margin-left: -10px;
    }

    h2 {
      padding-left: 10px;
      margin-top: 50px;
    }

    @include breakpoint(medium down) {
      padding-bottom: 0;
    }

    .swiper-pagination-fraction {
      color: $dark-gray;
    }
  }

  .plan {
    position: relative;
    background: rgb(221, 237, 244);
    background: linear-gradient(
      0deg,
      rgba(221, 237, 244, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    );

    @include breakpoint(large down) {
      margin-top: 0;
    }

    &::before {
      content: "";
      position: absolute;
      background-position: 20% center;
      background-size: contain;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;

      @include breakpoint(medium down) {
        height: 100%;
        width: 100%;
      }
    }

    @include breakpoint(medium down) {
      margin-bottom: 0;
      padding: 0;
    }

    .button {
      margin-right: 10px;
    }

    .map-bg {
      position: relative;
      padding-top: 160px;
      z-index: +1;

      @include breakpoint(large down) {
        padding-top: 20px;
      }

      @include breakpoint(small down) {
        padding-bottom: 30px;
      }
    }

    .plan-desc {
      position: relative;
      color: $black;

      .button-circle {
        position: absolute;
        right: 10px;
        top: 40%;
      }

      h2 {
        padding: 0;
        margin: 0;
      }

      p {
        padding-right: 100px;

        @include breakpoint(small down) {
          padding: 0;
        }
      }

      &.button {
        @include breakpoint(small down) {
          text-align: center;
        }
      }
    }

    .plan-desc {
      padding-bottom: 160px;

      @include breakpoint(large down) {
        padding-bottom: 20px;
      }

      h2 {
        padding-top: 160px;
        padding-bottom: 50px;

        @include breakpoint(large down) {
          padding-top: 20px;
        }
      }
    }
  }

  .recent-posts {
    padding-top: 100px;
    background: rgb(255, 255, 255);
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(221, 237, 244, 1) 49%,
      rgba(255, 255, 255, 1) 100%
    );

    @include breakpoint(medium down) {
      padding-top: 0;
    }
  }

  .contact-bg {
    background-image: url(../../dist/images/bottom.png);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;

    .contact {
      position: relative;

      @include breakpoint(small down) {
        background-color: white;
        background-image: none;
      }

      input[type="submit"] {
        border: none !important;
      }

      .contact-form {
        position: relative;
        margin: 50px 0;
        padding: 50px;
        background-color: rgba(white, 0.9);
        box-shadow: 0px 0px 20px rgba($black, 0.1);
        border-radius: 4px;

        @include breakpoint(small down) {
          box-shadow: none;
          padding: 20px;
          margin: 0;
        }
      }

      .wpcf7-list-item {
        margin: 0;

        input {
          position: relative;
        }
      }

      ::-webkit-input-placeholder {
        color: $gray !important;
        opacity: 1;
      }
      :-moz-placeholder {
        color: $gray !important;
        opacity: 1;
      }
      ::-moz-placeholder {
        color: $gray !important;
        opacity: 1;
      }
      :-ms-input-placeholder {
        color: $gray !important;
        opacity: 1;
      }

      .label {
        display: none;
      }

      label {
        line-height: 19px;
        color: $black;
      }

      textarea {
        padding: 20px;
      }

      .form {
        position: relative;

        .label {
          background: $white;
          color: $black;
          left: 10;
          z-index: +1;
          position: absolute;
        }
      }

      label > [type="checkbox"],
      label > [type="radio"] {
        margin: 0;
        padding: 0;
      }
    }
  }

  [type="text"],
  [type="password"],
  [type="date"],
  [type="datetime"],
  [type="datetime-local"],
  [type="month"],
  [type="week"],
  [type="email"],
  [type="number"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="url"],
  [type="color"],
  textarea {
    border-bottom: 1px solid $light-gray;
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
    padding: 20px 0;
    color: $gray;
    font-size: 14px;
  }

  [type="text"]:focus,
  [type="password"]:focus,
  [type="date"]:focus,
  [type="datetime"]:focus,
  [type="datetime-local"]:focus,
  [type="month"]:focus,
  [type="week"]:focus,
  [type="email"]:focus,
  [type="number"]:focus,
  [type="search"]:focus,
  [type="tel"]:focus,
  [type="time"]:focus,
  [type="url"]:focus,
  [type="color"]:focus,
  textarea:focus {
    border-bottom: 1px solid black;
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;

    @include breakpoint(small down) {
      border: 2px solid $gray;
      padding: 20px 10px;
      border-radius: 3px;
    }
  }

  label {
    color: $gray;
    font-size: 14px;

    @include breakpoint(small down) {
      margin-bottom: 10px;
      display: block;
    }
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    transition: background-color 5000s;
    -webkit-text-fill-color: black !important;
  }

  .wpcf7-list-item-label {
    color: $dark-gray;

    a {
      color: $violet;
    }
  }
}
