html {
    scroll-behavior: smooth;
  }
  body {
      background: #000;
  }
  .header-area.header-white {
      background-color: #000;
      box-shadow: 0 2px 5px 0.1px #5c5c5c;
  }
  .header-menu ul li a {
      color: #fff;
  }
  .header-menu ul.sub-menu li a {
      color: #383838;
  }
  .header-menu ul li.active > a, .header-menu ul li:hover > a {
      color: #10ffe6;
  
  }
  .contact-form-button {
      padding-top: 7px;
      padding-bottom: 7px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      font-size: 14px;
      font-weight: 400;
      color: #fff !important;
      border: 1px solid #0583d6;
      background: linear-gradient(to left, #10ffe6 0%, #0583d6 40%, #0583d6 50%, #fff 50%) right;
      background-size: 200%;
      transition: .5s ease-out;
      margin-left: 10px;
  }
  .contact-form-button1 {
      padding-top: 7px;
      padding-bottom: 7px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      font-size: 14px;
      font-weight: 400;
      color: #0583d6 !important;
      border: 1px solid #0583d6;
      background: linear-gradient(to right, #fff 50%, #10ffe6 50%, #0583d6 100%);
      background-size: 200% 100%;
      background-position: left bottom;
      transition: background-position 0.5s ease-out, color 0.5s ease-out;
      margin-left: 10px;
  }
  .embed-responsive {
      height: 100vh;
  }
  .upTitle {
      color: #d7d7d7;
  }
  .description {
      color: #b9b9b9;
  }
  .mainTitle {
      background: linear-gradient(to right, #0583d6, #10ffe6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      font-weight: 700;
      font-size: 24px;
      text-align: center;
  }
  .upTitle2 {
      color: #d7d7d7;
      text-transform: uppercase;
  }
  .description2 {
      color: #b9b9b9;
  }
  .mobile-menu-open {
      background: linear-gradient(to left, #10ffe6 0%, #49a8e6 25%, #0583d6 50%, #fff 50%) right !important;
      background-size: 200% !important;
  }
  .canvas-close-bar {
      background: linear-gradient(to left, #10ffe6 0%, #49a8e6 60%, #0583d6 100%);
  }
  .menu-close {
      color: #0583d6 !important;
  }
  .cardCafeUndSchwimmen {
      border: none;
      padding: 0;
      /* box-shadow: 1px 1px 2px 1px #4c4c4c; */
  }
  .Portfolio img {
      border: none;
  }
  .video-fotograf {
      border-radius: 15px;
  }
  .hover-text {
      position: absolute; 
      left: 50px; 
      bottom: 40px; 
      color: #fff; 
      font-size: 20px; 
      font-weight: 600; 
      transform: translateY(100%); 
      opacity: 0; 
      transition: transform 0.5s ease, opacity 0.5s ease;
  }
  .hover-text2 {
      position: absolute; 
      left: 5%; 
      bottom: 8%; 
      color: #fff; 
      font-size: 16px; 
      font-weight: 400; 
      transform: translateY(100%); 
      opacity: 0; 
      transition: transform 0.5s ease, opacity 0.5s ease;
      transition-delay: 0.1s;
  }
  .videoLeft:hover .hover-text {
      transform: translateY(0);
      opacity: 1;
  }
  .videoLeft:hover .hover-text2 {
      transform: translateY(0);
      opacity: 1;
  }
  .desktopBannerText {
      display: block;
  }
  .mobileBannerText {
      display: none;
  }
  @media only screen and (max-width: 1400px) {
      .desktopBannerText {
          display: none;
      }
      .mobileBannerText {
          display: block;
      }
  }
  .myArrows {
      position: absolute;
      height: 100px;
      width: 100px;
      bottom: 0;
      z-index: 1;
      cursor: pointer;
  }
  .arrow {
      opacity: 0;
      position: absolute;
      left: 40%;
      top: 50%;
      transform-origin: 50% 50%;
      transform: translate3d(-50%, -50%, 0);
  }
  .arrow-first {
      animation: arrow-movement 2s ease-in-out infinite;
  }
  .arrow-second {
      animation: arrow-movement 2s 1s ease-in-out infinite;
  }
  .arrow:before, .arrow:after {
      background: #10ffe6;
      content: '';
      display: block;
      height: 2px;
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
  }
  .arrow:before {
      transform: rotate(45deg) translateX(-23%);
      transform-origin: top left;
  }
  .arrow:after {
      transform: rotate(-45deg) translateX(23%);
      transform-origin: top right;
  }
  @keyframes arrow-movement {
      0% {
          opacity: 0;
          top: 25%;
      }
      70% {
          opacity: 1;
      }
      100% {
          opacity: 0;
      }
  }
  .myPaddingLanding {
      padding-left: 30px;
      padding-right: 30px;
  }
  @media only screen and (max-width: 1199px) {
      .dashboardUpTitle {
          width: 100%;
      }
  }

.landingPageFirstLayer {
    z-index: 3; background-color: #000; mix-blend-mode: darken; flex-direction: column; align-items: stretch; 
    width: 100%; height: 100vh; display: flex; position: relative; overflow: hidden; justify-content: center; margin-top: 0;
}

.landingPageFirstLayerDiv {
    -webkit-text-fill-color: inherit; background-color: transparent; background-clip: border-box; flex-direction: row; 
    justify-content: center; align-items: center; padding-top: 0; display: flex; overflow: hidden; width: 92%; 
    margin: 0 auto; justify-content: center;
}
.landingPageFirstLayerDiv .desktopBannerText {
    max-width: 2000px;
    margin-top: 100px;
}
.landingPageFirstLayerDiv .mobileBannerText {
    max-width: 550px;
    margin-top: 100px;
}
.landingPageSecondLayer {
    position: relative;
}
.landingPageSecondLayer .video-container {
    position: fixed; top: 0; overflow: hidden; margin-top: 0;
}
.landingPageSecondLayer .video-container .videoLeft video {
    border-radius: 10px;
}
.videoLeftLayer {
    display: none; position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;
    background-color: rgba(14,35,50,0.4); border-radius: 15px;
}
.landingPageSecondLayer .hover-text {
    opacity: 1; transform: translateY(0); left: 30px;
}
.landingPageSecondLayer .contact-form-button1 {
    font-weight: 600; border: none !important; border-radius: 5px; width: 200px;
}
.videoSection {
    margin-top: 100vh;
}
.videoSection .col-lg-6 {
    margin-bottom: 25px;
}
.videoSection .videoLeft {
    position: relative; display: flex;
}
.videoSection .videoLeft video {
    width: 100%; border-radius: 10px;
}
.uberunsSection .sloganPart p {
    background: linear-gradient(to right, #0583d6, #10ffe6); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    color: transparent; 
    font-weight: 700; 
    font-size: 36px; 
    text-align: center; 
    max-width: 912px;
    margin: 0 auto;
    margin-bottom: 100px;
}
.uberunsSection .dashboardUpTitle {
    margin-bottom: 50px;
}
.itemSection .myPaddingLanding2 {
    margin-bottom: 25px;
}
.itemSection .myPaddingLanding2 div {
    cursor: default;
    padding: 0;
}
.itemSection .myPaddingLanding2 div img {
    margin-bottom: 30px;
    border-radius: 5px;
}
.myPaddingLandin3 {
    align-items: baseline; margin-bottom: 0;
}
.myPaddingLandin3 .description {
    width: 100%; text-align: justify !important; margin-bottom: 40px !important;
}
.myPaddingLandin3 div {
    display: flex; justify-content: end; width: 100%;
}
.myPaddingLandin3 div a {
    font-weight: 600; text-transform: uppercase; width: 100%; max-width: 250px;
}
.auswahlDesktop {
    display: flex;
}
.myPaddingLandin4 .auswahlMobile {
    display: none; justify-content: end; width: 100%;
}
.myPaddingLandin4 .auswahlMobile a {
    font-weight: 600; text-transform: uppercase; width: 100%; max-width: 250px;
}


@media only screen and (max-width: 991px) {
    .landingPageSecondLayer .hover-text {
        left: 0;
        bottom: 10px;
    }
    .landingPageSecondLayer .contact-form-button1 {
        font-size: 13px;
        width: 135px;
    }
    .landingPageFirstLayerDiv .mobileBannerText {
        margin-top: 0;
    }
    .myArrows {
        bottom: 50px;
    }
    .sloganPart p {
        font-size: calc(10px + 1.8vw) !important;
        margin-top: -40px;
    }
    .mainTitle {
        font-size: 16px;
    }
    .mobileColumnReverse {
        display: flex;
        flex-direction: column-reverse;
    }
    .auswahlDesktop {
        display: none !important;
    }
    .myPaddingLandin4 .auswahlMobile {
        display: flex;
    }
}

@media only screen and (max-width: 490px) {
    .sloganPart p {
        font-size: calc(11px + 3vw) !important;
        margin-top: -90px;
    }
}

@media only screen and (max-width: 400px) {
    .sloganPart p {
        font-size: calc(10px + 3vw) !important;
        margin-top: -90px;
    }
}

.itemSection .hover-text {
    left: 20px;
    bottom: 20px;
}


@media (max-width: 767px) {
    .mobil-hidden-text {
      display: none;
    }
}

@media (max-width: 768px) {
    .reviewCardMain {
        padding: 2px;
    }
    .slick-dots {
        bottom: -75px;
    }
}

@media (max-width: 500px) {
    .newsImage {
        max-width: 300px !important;
    }
}