@import url('https://fonts.googleapis.com/css?family=Heebo:100&display=swap');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

.heading-title {
  margin-top: 20%;
  text-align: center;
  font-size: 1.5vw;
  padding: 15px;
}

.process-wrapp {
   overflow: hidden;
   display: table;
   table-layout: fixed;
   margin: 0 15px;
   font-family: 'Heebo', sans-serif;
}

.process-box {
   background: #fff;
   -webkit-box-shadow: 0 0px 1px rgba(127, 123, 123, 0.1);
   box-shadow: 0 0px 1px rgba(127, 123, 123, 0.1);
   -webkit-transition: all .5s ease-in;
   -o-transition: all .5s ease-in;
   transition: all .5s ease-in;
   padding: 2.5rem 15px;
}

.process-box:hover {
   -webkit-box-shadow: 0px 0px 15px -6px #212331;
   box-shadow: 0px 0px 15px -6px #212331;
}

.process-box,
.process-wrapp li,
.process-wrapp li > .pro-step,
.process-box .pro-step {
   text-align: center;
}

.process-wrapp,
.process-wrapp li,
.process-wrapp li > .pro-step {
   position: relative;
   z-index: 1;
}

.process-wrapp li {
   padding: 60px 15px 0 15px;
   display: table-cell;
}

.process-wrapp li > .pro-step,
.process-box .pro-step {
   height: 90px;
   width: 90px;
   line-height: 91px;
   font-size: 28px;
   color: #fff;
   -webkit-border-radius: 50%;
   border-radius: 50%;
}

.process-wrapp li > .pro-step,
.process-box .pro-step,
.process-wrapp li > .pro-step > i {
   display: inline-block;
}

.process-wrapp li > .pro-step::after {
   content: "";
   position: absolute;
   border-radius: inherit;
   top: -10px;
   left: -10px;
   right: -10px;
   bottom: -10px;
   opacity: 0;
   z-index: -1;
   visibility: hidden;
}

.process-wrapp li > .pro-step.gradient_bg_one::after {
   background: rgba(0,0,0,.8);
}

.process-wrapp li > .pro-step.gradient_bg_two::after {
   background: rgba(0,0,0,.8);
}

.process-wrapp li > .pro-step.gradient_bg_three::after {
   background: rgba(0,0,0,.8);
}

.process-wrapp li > .pro-step.gradient_bg_four::after {
   background: rgba(0,0,0,.8);
}

.process-wrapp li > .pro-step.gradient_bg_five::after {
   background: rgba(0,0,0,.8);
}

.process-wrapp li:hover > .pro-step::after {
   opacity: 1;
   visibility: visible;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}
.process-wrapp li:hover > .pro-step > i {}
.gradient_color_one,
.gradient_bg_one {
 background-color: rgba(0,0,0,.4);
}

.gradient_color_two,
.gradient_bg_two {
background-color: rgba(0,0,0,.4);
}

.gradient_color_three,
.gradient_bg_three {
background-color: rgba(0,0,0,.4);
}

.gradient_color_four,
.gradient_bg_four {
background-color: rgba(0,0,0,.4);
}

.gradient_color_five,
.gradient_bg_five {
background-color: rgba(0,0,0,.4);
}
.font-light {
   font-weight: 300;
}

*::before,
*::after,
img,
span,
input,
button,
.navbar,
.fixedmenu,
.tp-bullet,
.tparrows,
.owl-dot,
.owl-prev,
.owl-next,
.sidemenu_btn {
   -webkit-transition: all .4s ease-in;
   -o-transition: all .4s ease-in;
   transition: all .4s ease-in;
}

i::before,
i::after {
   -webkit-transition: all 0s !important;
   -o-transition: all 0s !important;
   transition: all 0s !important;
}

.bottom25 {
  font-size: 1.5vw;
  padding: 30px 0 10px 0;
  margin-bottom: 25px;
}

h2 {
  padding: 20px;
  font-family: 'Heebo', sans-serif;
}

#paragraph {
  font-size: 1vw;
  font-family: Tahoma, sans-serif;
}

.tracking {
  -webkit-animation: tracking-out-contract 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
          animation: tracking-out-contract 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
}

@-webkit-keyframes tracking-out-contract {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
}
@keyframes tracking-out-contract {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
}

.blur {
  -webkit-animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
          animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
}

@-webkit-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%);
  }
}
@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%);
  }
}

.bkgc {
  background-color: rgba(0,0,0,.6);
  padding: 10px;
  border-radius: 15px;
  margin-top: 30px;
  transition: all .2s ease-in-out;
}

h4 {
  transition: all .2s ease-in-out;
}

.bkgc:hover {
  transform: scale(1.3);
  background-color: rgba(0,0,0,.3);
  border-radius: 15px;
}

@media only screen and (max-width: 360px) {
  .process-wrapp {
    zoom: 0.5;
  }

  .bottom25 {
    font-size: 4.5vw;
  }

  h2 {
    font-size: 5vw;
  }

  #paragraph {
    font-size: 3.2vw;
  }
}