@import url("https://fonts.googleapis.com/css2?family=Michroma&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  letter-spacing: 2px; 
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

body {
  margin: 0;
  font-family: "Michroma", sans-serif;
  background-color: white;
  
  height: 100vh;
}
h1,h2,h3,h4{
  font-family: "Allerta Stencil", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.is-loading .brush,
.is-loading .work,
.is-loading .clients,
.is-loading .footer{
  display: none;
}
.gradientdiv {
  width: 200px ;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(257deg, #c6e4f0, #ffffff, #cfe7ff, #c3e2f7);
  background-size: 800% 800%;

  -o-animation: gradientdiv 16s ease infinite;
  animation: gradientdiv 16s ease infinite;
}

@-o-keyframes gradientdiv {
  0%{background-position:0% 57%}
  50%{background-position:100% 44%}
  100%{background-position:0% 57%}
}
@keyframes gradientdiv {
  0%{background-position:0% 57%}
  50%{background-position:100% 44%}
  100%{background-position:0% 57%}
}
.bi-parquet{
  width: 70px;
}
.offcanvas{
  background-color: #22222359;
  -webkit-backdrop-filter: blur(70px);
  backdrop-filter: blur(70px);
}
 .btnclose{
  background-color: transparent;
  border: none;
  float: left;
  font-size: 40px;
 }

.navbar-brand img {
width: 280px;

}
@media screen and (max-width:576px ){
  .navbar-brand img{
      width: 70%;
      margin: 5px auto;
  }
}
.navbar-nav{
  width: 100%;
  height: 50%;
}
.nav-item {

  color: white;
  font-size: 1.2em;
  font-weight: 200;
  transition-property: all;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: ease-out;
  border-top: 2px solid transparent;
  background-color: #f5f6f747;
  border-radius: 20px;
  padding: 0px 15px ;
  margin:0 auto 10px;
}
.nav-item:hover {
 
  color: white;

}
.nav-item a{
  color:  white;
  text-wrap: nowrap;

}

.nav-item a:hover{
  color:  rgb(172, 203, 243);
}
.navbar-toggler {
  border: 0 ;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none ;
  box-shadow: none ;
  border: 0 ;
}

.navbar-toggler:active,
.navbar-toggler-icon:active,
.navbar-toggler:hover,
.navbar-toggler-icon:hover{
  filter: blur(70px);
}

.toggler-icon{
  width: 30px;
  height: 3px;
  background-color: white;
  display: block;

}

.middle-bar{
  margin: 5px auto;
}

.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

.container-fluid {
  padding: 0;
}

section .animate {
  filter: blur(5px);
  transition: 1s;
  opacity: 0;
}
section.animated .animate {
  filter: blur(0);
  opacity: 1;
}
                           
.blob{
  position: absolute;
  width: 800px;
  height: 800px;
  transform: translate(-38%, -22%);
  filter: blur(60px);
}
.blob2{
  position: absolute;
  height: 800px;
   width: 800px;
  height: 800px;
  transform: translate(160%, 20%);
  filter: blur(60px);
}
.bob2 svg{
  width: 471px;
  height: 556px;
}

.blob path{
  -webkit-fill: url(#fill);
  animation: animatedd 10000ms infinite ;
}
.blob2 path{
  -webkit-fill: url(#fill);
  animation: animatedd 10000ms infinite ;
}
@keyframes animatedd{
 0%{
  -webkit-d: path("M89,66Q88,82,71.5,79Q55,76,42.5,80Q30,84,28,71.5Q26,59,21.5,48.5Q17,38,27.5,34Q38,30,47,23.5Q56,17,61.5,26.5Q67,36,78.5,43Q90,50,89,66Z");
  d: path("M89,66Q88,82,71.5,79Q55,76,42.5,80Q30,84,28,71.5Q26,59,21.5,48.5Q17,38,27.5,34Q38,30,47,23.5Q56,17,61.5,26.5Q67,36,78.5,43Q90,50,89,66Z");
  
     }
  25%{
  -webkit-d:path("M89,63Q81,76,67.5,74.5Q54,73,39.5,83Q25,93,27,75.5Q29,58,26.5,49.5Q24,41,31,35.5Q38,30,46.5,25.5Q55,21,71.5,19.5Q88,18,92.5,34Q97,50,89,63Z");
   d:path("M89,63Q81,76,67.5,74.5Q54,73,39.5,83Q25,93,27,75.5Q29,58,26.5,49.5Q24,41,31,35.5Q38,30,46.5,25.5Q55,21,71.5,19.5Q88,18,92.5,34Q97,50,89,63Z");
 
 }
 50%{
  -webkit-d:path("M88,63.5Q82,77,69.5,83.5Q57,90,41,91.5Q25,93,18.5,78.5Q12,64,11,49.5Q10,35,18,22Q26,9,41.5,9Q57,9,71,14.5Q85,20,89.5,35Q94,50,88,63.5Z");
  d:path("M88,63.5Q82,77,69.5,83.5Q57,90,41,91.5Q25,93,18.5,78.5Q12,64,11,49.5Q10,35,18,22Q26,9,41.5,9Q57,9,71,14.5Q85,20,89.5,35Q94,50,88,63.5Z");
  
 }
  75%{
  -webkit-d:path("M89,64.5Q84,79,70.5,83.5Q57,88,42,88.5Q27,89,25,74.5Q23,60,21.5,49.5Q20,39,27.5,32Q35,25,46.5,14.5Q58,4,71,12.5Q84,21,89,35.5Q94,50,89,64.5Z");
  d:path("M89,66Q88,82,71.5,79Q55,76,42.5,80Q30,84,28,71.5Q26,59,21.5,48.5Q17,38,27.5,34Q38,30,47,23.5Q56,17,61.5,26.5Q67,36,78.5,43Q90,50,89,66Z");
  
 }
 100%{
  -webkit-d:path("M89,66Q88,82,71.5,79Q55,76,42.5,80Q30,84,28,71.5Q26,59,21.5,48.5Q17,38,27.5,34Q38,30,47,23.5Q56,17,61.5,26.5Q67,36,78.5,43Q90,50,89,66Z");
  d:path("M89,66Q88,82,71.5,79Q55,76,42.5,80Q30,84,28,71.5Q26,59,21.5,48.5Q17,38,27.5,34Q38,30,47,23.5Q56,17,61.5,26.5Q67,36,78.5,43Q90,50,89,66Z");
 
 }
}

.home {
  overflow: hidden;
  height: 100vh;
  position: relative;
  color: white;
  -webkit-backdrop-filter: blur(60px);
  background-color: rgb(3,13,21);

}
.home .animate {
  transform: translatey(100%);
  transition-delay: calc(.2s * var(--i));
}
.home.animated .animate {
  transform: translateX(0);
}

.parallax{
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.home h2 {
  position: relative;
  font-size: 2.7em;

}

.home p{
 
  width: 58%;
  font-size: 1.1em;
}

.roller{
 
  position: absolute;
  width: 100%;
  height: 100%;
}
.roller img{
  position: relative;
  rotate: -90deg;
  z-index: 1;
  width: 100%;
  height: 100%;
 
}
@media (max-width: 1400px){}
.blob2{
  width: 500px;
  transform: translate(100%, 20%);
}
@media (max-width: 991px){
  .navbar {
    background-color: #22222359;
    border-radius: 18px;
    border: none;
    padding: 0px 25px ;
  }
  .nav-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid  #bbe9ff;
    border-radius: 0px;
    margin: 0 90px 0 0;
  }
  .nav-item:hover {
    color:  #bbe9ff;
  }
  .navbar-collapse{
    height: 100vh;
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0s;
    transition-timing-function: ease-out;
  }
  .blob{
    transform: translate(-36%, -12%);
  }
  .blob svg{
    width: 710px;
    height: 700px;
  }
 .blob2 {
    transform: translate(45%, 50%);
    width: 400px;
    height: 600px;
  }
}

@media (max-width: 576px){
  .blob{
    transform: translate(-62%, -22%);
  }
  .blob svg{
    width: 710px;
    height: 700px;
  }
  .blob2{
   transform:  translate(0%, 100%);

  
  }
  .home h2{
    font-size: 2em;
  }
  .home p{
    width: 75%;
  }
}

.btnn {
  color: white;
  padding: 10px 30px;
  text-transform: uppercase;
  margin-top: 20px;
  transition-property: all;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: ease-in-out; 

  background-color: #1688c670;
  border-radius: 12px;
  border: none;
  overflow: hidden;
}

.btnn:hover,
.btnn:focus,
.btnn:active{
  background-color:#df650198 ;
}

.btnn a{
  color: white;
  text-decoration: none;
}
.work .rightAnimate,
.work_text,
.work .rightAnimate{
  background: white;
  background-color: white;
  color: black;

}
.work_text{
  color: black;
  background-color: white;
  height: auto;
}
.brush{
  -webkit-backdrop-filter: blur(60px);
  background-color: rgb(3,13,21);
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  
}
.brush .rightAnimate,
.work .rightAnimate{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;

  transition: 1s;
  transition-delay: calc(.2s * var(--i));
}
.brush .rightAnimate{
  background: rgb(3 13 21);
}
.work .rightAnimate{
  background: white;
}
.work div:last-child{
  animation: scale-out-center 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.work.animated div:last-child{
  animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}

.brush.animated .rightAnimate,
.work.animated .rightAnimate{
  width: 0;
}
.brush .btn_brush{
  opacity: 0;
  -webkit-backdrop-filter: blur(12px);
}
.brush.animated .btn_brush{
  animation: bounce-bottom 2.2s both;
}
@keyframes bounce-bottom {
  0% {
    -webkit-transform: translateY(45px);
            transform: translateY(45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(24px);
            transform: translateY(24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}

.brush p{
  animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
.brush.animated p{
  animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
.brush_img {
  background-color: #d4c9c91f;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 55%;
  position: relative;
  height: 700px;
  z-index: 1000;
  border-radius: 20px;
  color: white;
}
.brush_img img{
 
  width: 165px;
  height: 200px;
  margin-bottom: 15px;
  -webkit-animation: scale-out-center calc(.2s * var(--i)) cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: scale-out-center calc(.2s * var(--i)) cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.brush.animated .brush_img img{
    -webkit-animation: scale-in-center calc(.2s * var(--i)) cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center calc(.2s * var(--i)) cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@media screen and (max-width: 576px) {
.brush_img{
  height: 400px;
}
.brush_img img{
 
  width: 90px;
  height: 90px;
  margin-bottom: 10px;
}

}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}
@keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}

.brush_text{
  color: white;
  background-color: #03050700;
  height: auto;
  z-index: 1;
}
.brush_text h3,
.work_text h3{
  position: relative;
  letter-spacing: 2px;
  font-size: 3.5em;
  padding: 10px 0 10px 15px;
  border-left: 4px solid white;
  margin-bottom: 40px;
}
.brush_text p{
  position: relative;
  font-size: 1.2em;
}

.work{
  position: relative;
  z-index: 1000;
  box-sizing: border-box;
  background-color: white;

}


@media screen and (max-width: 992px){
  .work_text h3{
    border-left: 4px solid black;
  }

}
.carousel-control-next span, 
.carousel-control-prev span{
  background-color: #0000007d;
  padding: 0 10px;
  border-radius: 10px;
}
.carousel-item{
  width: 100%;
  height: 70vh;
}

#carouselWork .carousel-item img {
  object-fit: cover;
  object-position: center;
  height: 100%;
  border-radius: 20px;
}
#carouselWork .carousel-item:first-child::before{
  content: "Werfen Sie einen Blick auf die Bilder unserer Arbeiten und überzeugen Sie sich von der Qualität unserer Leistungen.";
  background-color: #292929b8;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  font-size: 2.2rem;
  padding: 100px 50px;
  display: flex;
  align-items: flex-end;
  border-radius: 20px;
}
.clients{
  background-color: #030d15;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
.clients.animated .oval{
  animation: slide-in-blurred-left calc(0.6s * var(--i)) cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
            transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}

.clients .oval {
  position: relative;
  width: 220px;
  height: 230px;
  padding: 30px;
  margin-bottom: 50px;
  animation: slide-out-blurred-left calc(.45s * var(--i)) cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}
@keyframes slide-out-blurred-left {
  0% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-1000px) scaleX(2) scaleY(0.2);
            transform: translateX(-1000px) scaleX(2) scaleY(0.2);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
}

.clients .oval span:nth-child(4){
  font-size: 3rem;
  color: white;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
}
.clients .oval span:nth-child(1){
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgb(51 146 181 / 70%);
  border-radius: 38% 62% 63% 37% /41% 44% 56% 59%;
  transition: 0.5s;
  animation: animate 6s linear infinite;
}
.clients .oval span:nth-child(2){
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgb(1 51 122 / 70%);
  border-radius: 38% 62% 63% 37% /41% 44% 56% 59%;
  transition: 0.5s;
  animation: animate 4s linear infinite;
}
.clients .oval span:nth-child(3){
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid hsl(216deg 94% 46% / 70%);
  border-radius: 38% 62% 63% 37% /41% 44% 56% 59%;
  transition: 0.5s;
  animation: animate2 10s linear infinite;
}

@keyframes animate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
@keyframes animate2 {
  0%{
    transform: rotate(360deg);
  }
  100%{
    transform: rotate(0deg);
  }
}
.clients .oval button{
  background-color: transparent;
  border: 1px solid white;
  color: white;
  border-radius: 73% 27% 44% 56% /49% 44% 56% 51%;
  text-align: center;
  display: flex;
  margin: auto auto 0;
  position: relative;
} 
.clients h3{
  letter-spacing: 2px;
  font-size: 3.5em;
  padding: 10px 0 10px 15px;
  border-left: 4px solid white;
  transform: translateX(-100%);
  transition: 1s;
  filter: blur(5px);
  opacity: 0;
}
.clients p{
  padding-top: 10px;
  text-align: center;
  color: white;
  transform: translateX(-100%);
  transition: 1s;
  filter: blur(5px);
  opacity: 0;
}
.clients.animated h3,
.clients.animated p{
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
  color: white;
}


.footer{
  height: auto;
  background-image: linear-gradient(rgb(3 13 21), rgb(3 13 21 / 45%)),url("../img/5.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  height: auto;

  color: white;
  margin-top: -1px;

}

.footer h3{
  letter-spacing: 2px;
  font-size: 3.5em;
  padding: 10px 0 10px 15px;
  border-left: 4px solid white;
  margin-bottom: 50px;
  color: white;
}

.footer.animated .animate {
  -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.footer b{
  padding-right: 10px;
}
.footer h2{
  text-align: center;
  letter-spacing: 2px;
  font-size: 2em;
  margin-bottom: 30px;
  color: white;
  
}

.footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(1 1 2 / 84%) url("../img//loading.gif") center / 50px no-repeat ;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease 0s;
}
.footer._sending::after{
  opacity: 1;
  visibility: visible;
}
.footer p{
  margin-bottom: 0.5rem;
}
.form{
  outline: none;
  width: 100%;
  padding: 0.375rem 0.75rem;
  color: white;
  background-color: rgb(68 72 86);
  border-radius: 10px;
  background-clip: padding-box;
  margin-bottom: 2px;
  border: none;
}

.input-field {
  
  background-color: rgb(245 246 247 / 28%);
  height: auto;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 10% 90%;
}
 .input-field:first-child{
  grid-template-columns: 20% 80%;
 }
.input-field i {
  text-align: center;
  line-height: 40px;
  color: #ffffffb8;
  transition: 0.5s;
}

.input-field input,

.input-field textarea {
  background: none;
  outline: none;
  border: none;
  font-weight: 300;
  font-size: 16px;
  color: #333;
}
.input-field input:focus,
.input-field input:valid,
.input-field input:in-range,
.input-field textarea:focus{
  background-color: transparent;
  color: white;
  border-color: transparent;
  box-shadow: none;
}
.form::placeholder{
  color: white;
}
form {
  width:80%;
}
._error{
  box-shadow: 4px 3px 20px 2px #ff000099;
}
@media screen and (max-width: 576px){
  
  form{
       width:100%;
  }
  .social{
    font-size: 12px;
  }
  .footer h3{
      font-size: 2.5em;
  }
  .input-field input,
  .input-field textarea {
    font-weight: 100;
    font-size: 12px;
  }
  #carouselWork .carousel-item:first-child::before{
    font-size: 1.2rem;
    padding: 80px 20px;
  }
}
.btn_send {
 padding: 10px 40px ;
 background-color: rgb(239 99 1);
 box-shadow: 0 5px 5px rgba(239, 99, 1, 0.363);
 border: 1px solid rgb(239, 99, 1); 
}
.btn_send:hover {
 padding: 10px 60px;
 background-color: rgb(25 110 164);  
 border: 1px solid rgb(25 110 164);
 box-shadow: 0 5px 5px rgba(16, 85, 128, 0.363);
}