/* ===== Buttons Css ===== */
.header-ten .header-text .light-rounded-buttons .primary-btn {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.header-ten .header-text .light-rounded-buttons .active.primary-btn, .header-ten .header-text .light-rounded-buttons .primary-btn:hover, .header-ten .header-text .light-rounded-buttons .primary-btn:focus {
  background: var(--primary-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.header-ten .header-text .light-rounded-buttons .deactive.primary-btn {
  background: var(--gray-4);
  color: var(--dark-3);
  pointer-events: none;
}

/*======================================
    header Area CSS
========================================*/
.header-ten {
  position: relative;
  background: var(--light-1);
  overflow: hidden;
  padding: 40px 0;
}
.header-ten .header-inner {
  height: auto;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 3;
}
.header-ten .header-text {
  float: none;
}
.header-ten .header-text h6 {
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin-bottom: 15px;
}
.header-ten .header-text h1 {
  font-weight: 600;
  margin-bottom: 25px;
  color: var(--black);
  letter-spacing: -1px;
}
.header-ten .header-text p {
  color: var(--dark-3);
}
.header-ten .header-text .light-rounded-buttons {
  margin-top: 30px;
}
.header-ten .header-image {
  float: right;
  height: 400px;
  width: 400px;
  display: block;
  background-image: url("/templates/assets/images/holycloud/offers/datacenter/tunnel-ip-banner.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 5;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .header-ten .header-image {
    display: none;
  }
}
.header-ten .header-image .shape3 {
  position: absolute;
  bottom: 35px;
  right: 60px;
  z-index: -1;
}
.header-ten .verticle-lines .vlines {
  width: 3px;
  height: 100%;
  background: #473bf036;
  position: absolute;
  top: 0;
  bottom: 0;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-animation-name: lineanim;
  animation-name: lineanim;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  opacity: 0.2;
}
.header-ten .verticle-lines .vlines.vlines.one {
  left: 20%;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.header-ten .verticle-lines .vlines.vlines.two {
  left: 40%;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.header-ten .verticle-lines .vlines.vlines.three {
  left: 60%;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.header-ten .verticle-lines .vlines.vlines.four {
  left: 80%;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

@-webkit-keyframes lineanim {
  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: top left;
    transform-origin: top left;
  }
  50.1% {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
  }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
  }
}
@keyframes lineanim {
  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: top left;
    transform-origin: top left;
  }
  50.1% {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
  }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
  }
}

/*# sourceMappingURL=header-10.css.map */