// out: ../style-css/page-kontakt.css, compress: true, sourceMap: true
@import "mixins";
@import "variables";

#page-8 {
  .box-01 {
    padding-bottom: 0;
  }

  .page_content {
    padding-top: 200px;

    @include respond-below(sm) {
      padding-top: 150px;
    }
  }

  .head_text {
    max-width: 1045px;
    margin: auto;

    ._col-2 {
      max-width: unset;
      text-align: right;

      @include respond-below(sm) {
        margin-bottom: 25px;
        text-align: left;
      }
    }
  }

  .box-02 {
    background-image: url("/upload/filemanager/Project-Design/Design/kontakt_bg_line.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    @include respond-below(sm) {
      background-size: cover;
    }

    .box-contact {
      padding-bottom: 0 !important;
    }

    .fast_contact_box {
      margin: 0 auto;
    }
  }

  .box-03 {
    #scontainer-11 {
      ._row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 50px;

        @include respond-below(sm) {
          gap: 25px;
        }

        ._col-1 {
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          h2 {
            @include respond-below(sm) {
              display: none;
            }
          }

          h2,
          h3 {
            font-weight: 600;
            font-size: 1.25rem;
            margin-bottom: 15px;
          }

          p {
            font-weight: 500;
            font-size: 1rem;
          }

          a {
            color: $cTextBlack;
            font-weight: 700;
            font-size: 1rem;

            &.contact_tel {
              color: $cTurquoise;
              font-weight: 600;
            }

            &.btn-2 {
              margin-top: 37px;
              color: $cWhite;
              gap: 16px;
            }
          }
        }

        ._col-2 {
          img {
            border-radius: 20px;
          }
        }
      }
    }
  }

  .box-04 {
    padding-bottom: 0;

    ._row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 50px;
      width: 100%;
      margin: 0 auto;

      @include respond-below(sm) {
        flex-wrap: wrap;
      }

      ._col-1 {
        width: 100%;
        max-width: 185px;

        @include respond-below(sm) {
          max-width: 100%;
        }
      }

      ._col-2 {
        width: 100%;
        height: 548px;

        @include respond-below(sm) {
          height: 400px;
        }

        iframe {
          border-radius: 20px;
        }
      }
    }

    #scontainer-22 {
      h2 {
        position: relative;
        font-weight: 600;
        font-size: 1.5rem;
        line-height: 24px;
        margin-bottom: 40px;

        &::before {
          content: "";
          position: absolute;
          left: -14px;
          height: 100%;
          width: 2px;
          border-radius: 2px;
          background: $cTurquoiseLight;
        }
      }

      p {
        font-weight: 400;
        font-size: 0.875rem;
      }

      .drive-box {
        margin-bottom: 75px;

        @include respond-below(sm) {
          text-align: center;
        }

        a {
          min-width: 170px;
          margin-top: 40px;
          gap: 10px;
        }
      }

      .billing-box {
        @include respond-below(sm) {
          text-align: center;
        }
      }
    }
  }

  .box-05 {
    margin-bottom: 180px;
  }

  .box-06 {
    margin-bottom: 110px;
  }
}