@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&family=Poppins:wght@600&display=swap");
html {
  cursor: url("data:image/svg+xml,%3Csvg height='6' width='6' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' fill='%23eee' r='4'/%3E%3C/svg%3E") 3 3, auto;
}

#page-loader {
  background-color: #fff;
  display: table;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.loader-img {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#page-loader img {
  width: 15%;
}

.floating {
  -webkit-animation-name: Floatingf;
          animation-name: Floatingf;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  margin-top: 10px;
}

@-webkit-keyframes Floatingf {
  from {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
  65% {
    -webkit-transform: translate(0, 15px);
            transform: translate(0, 15px);
  }
  to {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}

@keyframes Floatingf {
  from {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
  65% {
    -webkit-transform: translate(0, 15px);
            transform: translate(0, 15px);
  }
  to {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px);
  }
}

* {
  scrollbar-color: #00b7aa #eaeaea;
}

body {
  font-family: Metropolis,Inter,X-LocaleSpecific,sans-serif;
}

@-webkit-keyframes transitionIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes transitionIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/**** navbar****/
.navbar-brand img {
  width: 130px;
}

.navbar-brand {
  padding: 0;
}

.incloud-navbar {
  background-color: transparent;
  -webkit-transition: background-color 1s ease 0s;
  transition: background-color 1s ease 0s;
}

.incloud-navbar .navbar-nav li a {
  color: #000;
}

.incloud-navbar.solid {
  background-color: #fff;
  -webkit-transition: background-color 1s ease 0s;
  transition: background-color 1s ease 0s;
  -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
          box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

.incloud-navbar.solid .navbar-nav li a {
  color: #000;
}

.menu-wrapper {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 30px;
  height: 23px;
  cursor: pointer;
}

.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
  width: 30px;
  height: 3px;
}

.hamburger-menu {
  position: relative;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  background: #1c4da1;
  -webkit-transition: all 0ms 300ms;
  transition: all 0ms 300ms;
}

.hamburger-menu.animate {
  background: rgba(255, 255, 255, 0);
}

.hamburger-menu:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  background: #1c4da1;
  -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu:after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  background: #1c4da1;
  -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu.animate:after {
  top: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu.animate:before {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.navbar-expand-lg .nav-item a.nav-link {
  font-weight: 600;
  margin-right: 0.8rem;
  margin-left: 0.8rem;
  position: relative;
  font-size: 14px;
}

.navbar-nav li a {
  position: relative;
}

.navbar-nav li a,
.navbar-nav li a:after,
.navbar-nav li a:before {
  -webkit-transition: all .5s;
  transition: all .5s;
}

.navbar-nav li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #1c4da1;
  height: 2px;
}

.navbar-nav li a:hover:after {
  width: 100%;
}

.navbar-toggler {
  outline: none;
}

.navbar-nav .nav-active a::after {
  width: 100%;
}

/*** cursor ***/
.cursor {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--width);
  height: var(--height);
  -webkit-transform: translate(calc(var(--x) - var(--width) / 2), calc(var(--y) - var(--height) / 2));
          transform: translate(calc(var(--x) - var(--width) / 2), calc(var(--y) - var(--height) / 2));
  /* transition-duration: 125ms;
    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
    transition-property: width, height, transform; */
  -webkit-transition: 150ms width cubic-bezier(0.39, 0.575, 0.565, 1), 150ms height cubic-bezier(0.39, 0.575, 0.565, 1), 150ms -webkit-transform cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: 150ms width cubic-bezier(0.39, 0.575, 0.565, 1), 150ms height cubic-bezier(0.39, 0.575, 0.565, 1), 150ms -webkit-transform cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: 150ms width cubic-bezier(0.39, 0.575, 0.565, 1), 150ms height cubic-bezier(0.39, 0.575, 0.565, 1), 150ms transform cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: 150ms width cubic-bezier(0.39, 0.575, 0.565, 1), 150ms height cubic-bezier(0.39, 0.575, 0.565, 1), 150ms transform cubic-bezier(0.39, 0.575, 0.565, 1), 150ms -webkit-transform cubic-bezier(0.39, 0.575, 0.565, 1);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  z-index: 100;
}

@media (pointer: fine) {
  .cursor {
    display: block;
  }
}

.cursor::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--radius);
  border: 2px solid #1c4da1;
  opacity: var(--scale);
  -webkit-transform: scale(var(--scale));
  transform: scale(var(--scale));
  -webkit-transition: 300ms opacity cubic-bezier(0.39, 0.575, 0.565, 1), 150ms border-radius cubic-bezier(0.39, 0.575, 0.565, 1), 300ms -webkit-transform cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: 300ms opacity cubic-bezier(0.39, 0.575, 0.565, 1), 150ms border-radius cubic-bezier(0.39, 0.575, 0.565, 1), 300ms -webkit-transform cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: 300ms opacity cubic-bezier(0.39, 0.575, 0.565, 1), 300ms transform cubic-bezier(0.39, 0.575, 0.565, 1), 150ms border-radius cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: 300ms opacity cubic-bezier(0.39, 0.575, 0.565, 1), 300ms transform cubic-bezier(0.39, 0.575, 0.565, 1), 150ms border-radius cubic-bezier(0.39, 0.575, 0.565, 1), 300ms -webkit-transform cubic-bezier(0.39, 0.575, 0.565, 1);
  z-index: 100;
}

html:not(html:hover) .cursor::after {
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}

section {
  min-height: 50vh;
  padding: 80px 0;
  position: relative;
  width: 100%;
  display:flex;
  align-items:center;
}

/*** scroll animation ***/
.scroll-down a {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 10;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  color: #fff;
  font: normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.scroll-down a:hover {
  opacity: .5;
}

#scroll-down-section a {
  padding-top: 120px;
}

#scroll-down-section a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #00b7aa;
  border-bottom: 1px solid #00b7aa;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-animation: sdb07 2s infinite;
          animation: sdb07 2s infinite;
  opacity: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#scroll-down-section a span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

#scroll-down-section a span:nth-of-type(2) {
  top: 16px;
  -webkit-animation-delay: .15s;
          animation-delay: .15s;
}

#scroll-down-section a span:nth-of-type(3) {
  top: 32px;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}

@-webkit-keyframes sdb07 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes sdb07 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/***** scroll top button***/
#scroll-top-button {
  display: inline-block;
  background-color: #00b7aa;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  -webkit-transition: background-color .3s, 
 opacity .5s, visibility .5s;
  transition: background-color .3s, 
 opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

#scroll-top-button .fa-angle-up {
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

#scroll-top-button:hover {
  cursor: pointer;
  background-color: #1c4da1;
}

#scroll-top-button:active {
  background-color: #00b7aa;
}

#scroll-top-button.show {
  opacity: 1;
  visibility: visible;
}

/*** footer ***/
footer.top {
  background-color: #eee;
  padding: 25px 0;
}

footer.bottom {
  background-color: #56625c;
}

.copyright {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 0.8rem;
  color: #d6d6d6;
  padding: 15px 0;
}

a {
  color: #ff7c11;
}

.logo-box {
  text-align: center;
  padding: 15px;
}

.logo-box img {
  width: 100%;
}

.address-box {
  padding: 15px 0;
}

.address-box h4 {
  font-size: 16px;
  font-weight: 600;
}

.address-box p {
  font-size: 14px;
  font-weight: 500;
}

.social a {
  color: #00b7aa;
  font-size: 18px;
}

/**** about ***/
.about h2 {
  color: #1c4da1;
  font-size: 3rem;
  font-weight: 600;
  font-family: 'Poppins';
}

.about p {
  color: #56625c;
  font-size: 1.7rem;
  font-weight: 600;
}

.about .sub-about {
  min-height: 230px;
  border: 1px solid #00b7aa;
}

.about .sub-about h4 {
  font-weight: 600;
  position: relative;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.about .sub-about p {
  font-size: 15px;
  position: relative;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.about .sub-about:hover h4 {
  color: #fff;
}

.about .sub-about:hover p {
  color: #fff;
}

.about .sub-about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00b7aa;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

.about .sub-about:hover::before {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

.service h2 {
  color: #333;
  font-size: 3rem;
  font-weight: 600;
  z-index: 10;
  position: relative;
  font-family: 'Poppins';
}

.service p {
  color: #56625c;
  font-size: 1rem;
  font-weight: 600;
}

.service .box {
  position: relative;
  background: #fff;
  padding: 15px 20px 20px;
  -webkit-box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
          box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
  min-height: 440px;
}

.service .box .service-img-box img {
  width: 100%;
}

.service .box .service-img-box {
  position: absolute;
  left: 0px;
  z-index: 1;
  opacity: 0.5;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  bottom: -15px;
}

.service .box h3 {
  text-align: center;
  position: relative;
  font-size: 2em;
  z-index: 2;
  color: #333;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-weight: 600;
  text-transform: uppercase;
}

.service .box h3 span {
  font-weight: 300;
}

.service .box p {
  position: relative;
  z-index: 2;
  color: #555;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.service .box:hover .service-img-box {
  opacity: 1;
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.service .box:hover h3, .service .box:hover p {
  color: #fff;
}

.service .box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00b7aa;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

.service .box:hover::before {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

.product h2 {
  color: #1c4da1;
  font-size: 3rem;
  font-weight: 600;
  font-family: 'Poppins';
}

.product p {
  color: #56625c;
  font-size: 1.5rem;
  font-weight: 600;
}

.portfolio h2 {
  color: #1c4da1;
  font-size: 3rem;
  font-weight: 600;
}

.portfolio p {
  color: #56625c;
  font-size: 1.7rem;
  font-weight: 600;
}

/*** contact****/
.contact h2 {
  color: #1c4da1;
  font-size: 3rem;
  font-weight: 600;
  font-family: 'Poppins';
}

.contact p {
  color: #56625c;
  font-size: 1.7rem;
  font-weight: 600;
}

#submit button:disabled,
button[disabled] {
  cursor: no-drop;
}

.spinner-border {
  margin-left: 15px;
  margin-top: 5px;
  border: 0.25em solid #00b7aa;
  border-right-color: #fff;
}

.send {
  padding: 8px 30px;
  font-weight: 600;
  float: right;
  background: #00b7aa;
  border-color: #00b7aa;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.send:hover {
  background: #1c4da1;
  border-color: #1c4da1;
}

.get {
  padding: 8px 30px;
  font-weight: 600;
  background: #00b7aa;
  border-color: #00b7aa;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.get:hover {
  background: #1c4da1;
  border-color: #1c4da1;
}

.client .slick-slide {
  text-align: center;
}

.client .slick-slide img {
  width: 260px;
  margin: 0 auto;
}

.client .slick-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.prodcut-slider {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.prodcut-slider img {
  width: 100%;
}

.prodcut-slider h3 {
  font-weight: 600;
  font-size: 2rem;
}

#canvas-service {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#canvas-client {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.client-list {
  position: relative;
}

.hero-text {
  font-size: 3.2rem;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-transform: uppercase;
  margin-top: -30px;
  width: 50%;
  font-weight: 600;
}

.client-text {
  position: relative;
  padding-top: 20px;
}

@media (min-width: 320px) and (max-width: 480px) {
  .navbar-toggler {
    outline: none;
  }
  .hero-text {
    font-size: 2.8rem;
    text-align: center;
  }
  .prodcut-slider {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .slick-prev, .slick-next {
    display: none;
  }
  .contact button {
    margin-bottom: 20px;
  }
  .product p {
    font-size: 1rem;
  }
  .service .box {
    margin-bottom: 20px;
  }
  .about p {
    font-size: 1rem;
  }
  .hero-text {
    width: 100%;
  }
}
/*# sourceMappingURL=style.css.map */