@font-face {
  font-family: 'king';
  src: url('./fonts/Kingsman\ Demo.ttf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

.font-king{
  font-family: 'king';
}

.layout {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
}

.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#slideInContainer {
  opacity: 0;
  transform: translateY(70px);
  transition: all 1s ease-out;
}

#slideInContainer.in-view {
  opacity: 1;
  transform: translateY(0);
}


.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.wave-container svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 70px;
}

.wave-container .shape-fill {
  fill: #FFFFFF;
}
.wave-container-2 .shape-fill-2 {
  fill: #60B1C4;
}
.wave-container-3 .shape-fill-3 {
  fill: #E60076;
}

@keyframes gradientBackground {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.bg-gradient-animate-hero {
  background: linear-gradient(to top right, #BF3266, #9fe0eb, #9FDFEB);
  background-size: 400% 400%;
  animation: gradientBackground 8s ease infinite;
}

.bg-gradient-animate-virtual {
  background: linear-gradient(to top right, #bb174d, #baf0fb, #d3d8dc);
  background-size: 400% 400%;
  animation: gradientBackground 4s ease infinite;
}

.bg-gradient-animate-insurance {
  background: linear-gradient(to bottom right, #94e3f4, #d3d8dc, #bb174d);
  background-size: 400% 400%;
  animation: gradientBackground 4s ease infinite;
}