<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<section class="work-process-section ptb-100 gray-light-bg">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-9">
<div class="section-heading text-center">
<strong class="color-secondary">Work Process</strong>
<h2>We follow Few Steps</h2>
<span class="animate-border mr-auto ml-auto mb-4"></span>
<p class="lead">Globally reinvent cross-unit human capital whereas virtual catalysts for change. Assertively
network accurate methods of empowerment rather than client-centered improvements.</p>
</div>
</div>
</div>
<!-- ============ step 1 =========== -->
<div class="row mt-5">
<div class="col-md-12 col-lg-5 process-width">
<div class="process-box process-left">
<div class="row">
<div class="col-md-5">
<div class="process-step-number">
<strong>Step</strong>
<h2 class="m-0">01</h2>
</div>
</div>
<div class="col-md-7">
<h5>Technical Audit</h5>
<p>Monotonectally optimize granular quality vectors vis-a-vis interdependent.</p>
</div>
</div>
<div class="process-line-l"></div>
</div>
</div>
<div class="col-md-2 process-none"></div>
<div class="col-md-5 col-md-5 col-lg-5 process-none">
<div class="process-point-right"></div>
</div>
</div>
<!-- ============ step 2 =========== -->
<div class="row">
<div class="col-md-5 col-lg-5 process-none">
<div class="process-point-left"></div>
</div>
<div class="col-md-2 process-none"></div>
<div class="col-md-12 col-lg-5 process-width">
<div class="process-box process-right">
<div class="row">
<div class="col-md-5">
<div class="process-step-number">
<strong>Step</strong>
<h2 class="m-0">02</h2>
</div>
</div>
<div class="col-md-7">
<h5>Technical SEO</h5>
<p>Completely synthesize one-to-one interfaces vis-a-vis client-focused alignments.</p>
</div>
</div>
<div class="process-line-r"></div>
</div>
</div>
</div>
<!-- ============ step 3 =========== -->
<div class="row">
<div class="col-md-12 col-lg-5 process-width">
<div class="process-box process-left">
<div class="row">
<div class="col-md-5">
<div class="process-step-number">
<strong>Step</strong>
<h2 class="m-0">03</h2>
</div>
</div>
<div class="col-md-7">
<h5>Select Keywords</h5>
<p>Progressively streamline cooperative sources whereas stand-alone channels.</p>
</div>
</div>
<div class="process-line-l"></div>
</div>
</div>
<div class="col-md-2 process-none"></div>
<div class="col-md-5 col-lg-5 process-none">
<div class="process-point-right"></div>
</div>
</div>
<!-- ============ step 4 =========== -->
<div class="row">
<div class="col-md-5 col-lg-5 process-none">
<div class="process-point-left"></div>
</div>
<div class="col-md-2 process-none"></div>
<div class="col-md-12 col-lg-5 process-width">
<div class="process-box process-right">
<div class="row">
<div class="col-md-5">
<div class="process-step-number">
<strong>Step</strong>
<h2 class="m-0">04</h2>
</div>
</div>
<div class="col-md-7">
<h5>Demographics</h5>
<p>Objectively underwhelm one-to-one deliverables whereas impactful solutions. </p>
</div>
</div>
<div class="process-line-r"></div>
</div>
</div>
</div>
<!-- ============ step 3 =========== -->
<div class="row">
<div class="col-md-12 col-lg-5 process-width">
<div class="process-box process-left">
<div class="row">
<div class="col-md-5">
<div class="process-step-number">
<strong>Step</strong>
<h2 class="m-0">05</h2>
</div>
</div>
<div class="col-md-7">
<h5>Engine Ranking</h5>
<p>Interactively seize innovative platforms vis-a-vis ubiquitous portals.</p>
</div>
</div>
<div class="process-line-l"></div>
</div>
</div>
<div class="col-md-2 custom-none"></div>
<div class="col-md-5 col-lg-5 custom-none">
<div class="process-point-right process-last"></div>
</div>
</div>
<!-- ============ -->
</div>
</section>
a,
body,
center,
div,
h1,
h2,
h3,
h4,
h5,
h6,
html,
p,
section,
span,
strong {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
section {
display: block
}
body {
line-height: 1
}
html {
overflow-y: scroll;
font-size: 15px
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
a,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased
}
body {
background-color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
color: #707070;
font-weight: 400;
line-height: 1.75
}
p:not(:last-child) {
margin-bottom: 1.25em
}
h1,
h2,
h3,
h4,
h5 {
margin: 0 0 1rem;
font-family: Montserrat, sans-serif;
font-weight: 600;
line-height: 1.21;
color: initial
}
h1 {
margin-top: 0;
font-size: 3.052em
}
h2 {
font-size: 2.441em
}
h3 {
font-size: 1.953em
}
h4 {
font-size: 1.563em
}
h5 {
font-size: 1.25em
}
strong {
font-weight: 600!important;
font-family: Montserrat, sans-serif
}
.ptb-100 {
padding: 100px 0
}
.ptb-70 {
padding: 70px 0
}
.mt--165 {
margin-top: -165px!important
}
.gray-light-bg {
background: #f6f6f6
}
.secondary-bg {
background: #e80566
}
.color-secondary {
color: #e80566
}
a {
color: #65258a
}
a:hover {
color: #e80566;
text-decoration: none
}
.color-1 {
color: #ff164e
}
.color-1-bg {
background: rgba(255, 22, 78, .15)
}
.color-2 {
color: #9123ff
}
.color-2-bg {
background: rgba(145, 35, 255, .15)
}
.color-3 {
color: #0073ec
}
.color-3-bg {
background: rgba(0, 115, 236, .15)
}
.color-4 {
color: #ff7c3f
}
.color-4-bg {
background: rgba(255, 124, 63, .15)
}
.color-5 {
color: #2ebf6d
}
.color-5-bg {
background: rgba(46, 191, 109, .15)
}
.color-6 {
color: #f25c7f
}
.color-6-bg {
background: rgba(242, 92, 127, .15)
}
select::-webkit-input-placeholder {
color: #b1b1b1!important;
font-size: 13px
}
select:-moz-placeholder {
color: #b1b1b1;
font-size: 13px
}
select::-moz-placeholder {
color: #b1b1b1;
font-size: 13px
}
select:-ms-input-placeholder {
color: #b1b1b1;
font-size: 13px
}
.section-heading h2 span {
font-weight: 400;
font-size: 2rem
}
.animate-border {
position: relative;
display: block;
width: 115px;
height: 3px;
background: #e80566;
overflow: hidden
}
.animate-border:after {
position: absolute;
content: "";
width: 35px;
height: 3px;
left: 15px;
bottom: 0;
border-left: 10px solid #fff;
border-right: 10px solid #fff;
-webkit-animation: animborder 2s linear infinite;
animation: animborder 2s linear infinite
}
@-webkit-keyframes animborder {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
-webkit-transform: translateX(113px);
transform: translateX(113px)
}
}
@keyframes animborder {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
-webkit-transform: translateX(113px);
transform: translateX(113px)
}
}
@media (min-width:1300px) and (max-width:1920px) {
.custom-width {
min-width: 550px
}
}
@media (min-width:320px) and (max-width:992px) {
.ptb-100 {
padding: 55px 0
}
.mt--165 {
margin-top: 0!important
}
}
@keyframes angry-animation {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
50% {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2)
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes progressBar {
0% {
width: 0
}
100% {
width: 100%
}
}
@-moz-keyframes progressBar {
0% {
width: 0
}
100% {
width: 100%
}
}
.step {
position: relative;
padding: 5.625rem 20% 20% 0
}
.step:hover::before {
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05);
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
transform: scale(1.25);
background: #fff;
border-color: transparent;
color: #65258a
}
.step::before {
-webkit-transition: all .2s;
-moz-transition: all .2s;
transition: all .2s;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
content: counter(owlItem, decimal);
position: absolute;
display: block;
top: 0;
left: 0;
width: 3.75rem;
height: 3.75rem;
line-height: calc(3.75rem - .25rem);
text-align: center;
border: 2px solid #e5e5e5;
z-index: 20;
border-radius: 50%;
font-size: 1.5rem
}
.process-box {
background: #fff;
padding: 20px;
border-radius: 15px;
position: relative;
box-shadow: 2px 2px 7px 0 #00000057
}
.process-left:after {
content: "";
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
border-left: 15px solid #fff;
border-right: 15px solid #fff;
display: inline-grid;
position: absolute;
right: -15px;
top: 42%;
transform: rotate(45deg);
box-shadow: 3px -2px 3px 0 #00000036;
z-index: 1
}
.process-right:after {
content: "";
border-top: 15px solid #ffffff00;
border-bottom: 15px solid #fff;
border-left: 15px solid #fff;
border-right: 15px solid #ffffff00;
display: inline-grid;
position: absolute;
left: -15px;
top: 42%;
transform: rotate(45deg);
box-shadow: -1px 1px 3px 0 #0000001a;
z-index: 1
}
.process-step-number {
background: #e80566;
text-align: center;
margin: 0 auto;
color: #fff;
height: 100%;
padding-top: 15px;
position: relative;
top: -36px;
border-radius: 0 0 10px 10px;
box-shadow: -6px 8px 0 0 #00000014
}
.process-point-right {
background: #fff;
width: 25px;
height: 25px;
border-radius: 50%;
border: 8px solid #e80566;
box-shadow: 0 0 0 4px #65258a;
margin: auto 0;
position: absolute;
bottom: 60px;
left: -60px
}
.process-point-right:before {
content: "";
height: 157px;
width: 11px;
background: #65258a;
display: inline-grid;
transform: rotate(31deg);
position: relative;
left: -53px;
top: 0
}
.process-point-left {
background: #fff;
width: 25px;
height: 25px;
border-radius: 50%;
border: 8px solid #e80566;
box-shadow: 0 0 0 4px #65258a;
margin: auto 0;
position: absolute;
bottom: 60px;
right: -60px
}
.process-point-left:before {
content: "";
height: 175px;
width: 11px;
background: #65258a;
display: inline-grid;
transform: rotate(-31deg);
position: relative;
left: 53px;
top: 0
}
.process-last:before {
display: none
}
.process-box p {
z-index: 9
}
.process-step-number h2 {
font-size: 40px;
font-weight: 700;
color: #65258a
}
.process-step-number:after {
content: "";
border-top: 8px solid #04889800;
border-bottom: 8px solid #e80566;
border-left: 8px solid #04889800;
border-right: 8px solid #e80566;
display: inline-grid;
position: absolute;
left: -16px;
top: 0
}
.process-step-number:before {
content: "";
border-top: 8px solid #ff000000;
border-bottom: 8px solid #e80566;
border-left: 8px solid #e80566;
border-right: 8px solid #ff000000;
display: inline-grid;
position: absolute;
right: -16px;
top: 0
}
.process-line-l {
background: #e80566;
height: 4px;
position: absolute;
width: 130px;
right: -147px;
top: 80px;
z-index: 9
}
.process-line-r {
background: #e80566;
height: 4px;
position: absolute;
width: 130px;
left: -147px;
top: 80px;
z-index: 9
}
@media (min-width:320px) and (max-width:1199px) {
.process-line-l,
.process-line-r,
.process-point-left,
.process-point-right {
display: none
}
.process-none {
display: none
}
.process-width.col-lg-5 {
margin-top: 40px;
width: 100%!important;
max-width: 100%!important;
flex: auto
}
.process-left:after,
.process-right:after {
display: none
}
}
@-webkit-keyframes ripple {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(50, 100, 245, .15), 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15);
box-shadow: 0 0 0 0 rgba(50, 100, 245, .15), 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15)
}
100% {
-webkit-box-shadow: 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15), 0 0 0 60px rgba(50, 100, 245, 0);
box-shadow: 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15), 0 0 0 60px rgba(50, 100, 245, 0)
}
}
@keyframes ripple {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(50, 100, 245, .15), 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15);
box-shadow: 0 0 0 0 rgba(50, 100, 245, .15), 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15)
}
100% {
-webkit-box-shadow: 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15), 0 0 0 60px rgba(50, 100, 245, 0);
box-shadow: 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15), 0 0 0 60px rgba(50, 100, 245, 0)
}
}
@-webkit-keyframes ripple-white {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .1), 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, .1), 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1)
}
100% {
-webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1), 0 0 0 30px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1), 0 0 0 30px rgba(255, 255, 255, 0)
}
}
@keyframes ripple-white {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .1), 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, .1), 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1)
}
100% {
-webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1), 0 0 0 30px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1), 0 0 0 30px rgba(255, 255, 255, 0)
}
}
.number-bg {
left: 0;
right: 0;
z-index: -1;
top: -30px;
color: #f2f2f2;
font-size: 115px;
line-height: 120px;
font-weight: 700;
position: absolute;
font-family: Montserrat, sans-serif;
-webkit-animation: mover 2s infinite alternate;
animation: mover 2s infinite alternate
}
@-webkit-keyframes mover {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px)
}
}
@keyframes mover {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px)
}
}
@-webkit-keyframes thumb-thumb-scale-up-one {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
40% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes thumb-scale-up-one {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
40% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes thumb-scale-up-two {
0% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
40% {
-webkit-transform: scale(.8);
transform: scale(.8)
}
100% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
}
@keyframes thumb-scale-up-two {
0% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
40% {
-webkit-transform: scale(.8);
transform: scale(.8)
}
100% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
}
@-webkit-keyframes thumb-scale-up-three {
0% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
40% {
-webkit-transform: scale(.4);
transform: scale(.5)
}
100% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
}
@keyframes thumb-scale-up-three {
0% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
40% {
-webkit-transform: scale(.4);
transform: scale(.5)
}
100% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
}
@keyframes loader1 {
from {
transform: scale(0, 0)
}
to {
transform: scale(1, 1)
}
}
@-webkit-keyframes loader1 {
from {
-webkit-transform: scale(0, 0)
}
to {
-webkit-transform: scale(1, 1)
}
}
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button
}
