<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>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
<section class="softwareDevelopment">
<div class="container">
<h2 class="text-white text-center wow bounceInUp">Our <span>Software</span> <i> Development</i> Services</h2>
<p class="subPara wow fadeInUp">Our offshore software development services are geared to deliver results that you expect from an Indian IT outsourcing company. Truthfulness, transparency and collaborative approach is a start!
</p>
<div class="row">
<div class="col-md-4">
<div class="softBox">
<div class="softBoxInner">
<h3>Digital <br> Transformation</h3>
<p>Transverse your business model with us through a digital transformation strategy. Modernize your software development architecture and stay ahead of the competition...</p>
<a href="#0" class="btn btn-talk wow bounceInLeft">Learn More</a>
</div>
<img src="https://img.icons8.com/carbon-copy/100/000000/trust.png" alt="">
<h4 style="color:#fa671f;">Software <br> Development
</h4>
</div>
</div>
<div class="col-md-4">
<div class="softBox">
<div class="softBoxInner">
<h3>Digital <br> Transformation</h3>
<p>Transverse your business model with us through a digital transformation strategy. Modernize your software development architecture and stay ahead of the competition...</p>
<a href="#0" class="btn btn-talk wow bounceInLeft">Learn More</a>
</div>
<img src="https://img.icons8.com/carbon-copy/100/000000/curly-arrow.png" alt="">
<h4 style="color:#fa671f;">Digital <br> Transformation
</h4>
</div>
</div>
<div class="col-md-4">
<div class="softBox">
<div class="softBoxInner">
<h3>Dedicated
<br> Teams</h3>
<p>Transverse your business model with us through a digital transformation strategy. Modernize your software development architecture and stay ahead of the competition...</p>
<a href="#0" class="btn btn-talk wow bounceInLeft">Learn More</a>
</div>
<img src="https://img.icons8.com/dotty/80/000000/add-link.png" alt="">
<h4 style="color:#4cc975;">Dedicated <br> Teams
</h4>
</div>
</div>
<div class="col-md-4">
<div class="softBox">
<div class="softBoxInner">
<h3>Mobile App
<br> Development</h3>
<p>Transverse your business model with us through a digital transformation strategy. Modernize your software development architecture and stay ahead of the competition...</p>
<a href="#0" class="btn btn-talk wow bounceInLeft">Learn More</a>
</div>
<img src="https://img.icons8.com/carbon-copy/100/000000/hand-drawn-star.png" alt="">
<h4 style="color:#25bbfa;">Mobile App
<br> Development
</h4>
</div>
</div>
<div class="col-md-4">
<div class="softBox">
<div class="softBoxInner">
<h3>Web App
<br> Development</h3>
<p>Transverse your business model with us through a digital transformation strategy. Modernize your software development architecture and stay ahead of the competition...</p>
<a href="#0" class="btn btn-talk wow bounceInLeft">Learn More</a>
</div>
<img src="https://img.icons8.com/carbon-copy/100/000000/high-five.png" alt="">
<h4 style="color:#faa51f;">Web App <br> Development
</h4>
</div>
</div>
<div class="col-md-4">
<div class="softBox">
<div class="softBoxInner">
<h3>Software
<br> Testing</h3>
<p>Transverse your business model with us through a digital transformation strategy. Modernize your software development architecture and stay ahead of the competition...</p>
<a href="#0" class="btn btn-talk wow bounceInLeft">Learn More</a>
</div>
<img src="https://img.icons8.com/carbon-copy/100/000000/hand-planting.png" alt="">
<h4 style="color:#d52ea4;">Software <br> Testing
</h4>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>
body{
font-family:'Roboto', sans-serif;;
}
.softwareDevelopment {
padding: 50px 0;
background: #161517
}
.softwareDevelopment p {
max-width: 1000px;
margin: auto;
color: #fff;
text-align: center
}
.softwareDevelopment h2 {
font-size: 50px;
font-weight: 100;
margin-bottom: 20px
}
.softwareDevelopment h2 i {
color: #ffb000;
font-family: var(--demo);
text-transform: capitalize
}
.softwareDevelopment h2 span {
color: #3557f5;
font-weight: 700
}
.softwareDevelopment {
overflow: hidden
}
.softwareDevelopment .row {
margin-top: 50px
}
.softwareDevelopment .softBox {
background: #fff;
padding: 40px;
position: relative;
-webkit-box-shadow: 0 8px 27px #222;
box-shadow: 0 8px 27px #222;
margin-bottom: 3rem
}
.softwareDevelopment .softBox>img {
margin-top: 70px
}
.softwareDevelopment .softBox:hover {
cursor: pointer
}
.softwareDevelopment .softBox:hover .softBoxInner {
top: -0%;
-webkit-box-shadow: 0 8px 27px rgba(0, 0, 0, 0.6);
box-shadow: 0 8px 27px rgba(0, 0, 0, 0.6);
z-index: 2
}
.softwareDevelopment .softBox .softBoxInner {
position: absolute;
-webkit-transition: 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86);
transition: 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86);
top: -100%;
left: 0;
padding: 40px;
width: 100%;
background: url(https://picsum.photos/seed/picsum/200/300) no-repeat center/cover;
z-index: -2
}
.softwareDevelopment .softBox .softBoxInner p,
.softwareDevelopment .softBox .softBoxInner a,
.softwareDevelopment .softBox .softBoxInner h3 {
position: relative;
z-index: 2
}
.softwareDevelopment .softBox .softBoxInner p {
text-align: left;
font-size: 20px;
font-weight: 100;
margin: 20px 0
}
.softwareDevelopment .softBox .softBoxInner .btn-talk {
background: #fff
}
.softwareDevelopment .softBox .softBoxInner .btn-talk:hover {
background-color: #ffb000
}
.softwareDevelopment .softBox .softBoxInner .btn-talk::before {
border: 2px solid #fff !important
}
.softwareDevelopment .softBox .softBoxInner h3 {
font-size: 40px;
color: #fff;
font-weight: 900
}
.softwareDevelopment .softBox .softBoxInner::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #6a00ffce;
z-index: 1
}
.softwareDevelopment .softBox h4 {
font-size: 40px;
font-weight: 900;
margin: 20px 0 0
}
.btn-talk {
background: #ffb81d;
color: #000;
border-radius: 0;
font-size: 16px;
text-transform: uppercase;
position: relative;
height: 50px;
margin-top: 15px;
padding: 10px 30px
}
.btn-talk::before {
content: '';
background: transparent;
border: 2px solid #e6ebfe;
top: 10px;
width: 100%;
height: 100%;
left: 10px;
position: absolute;
z-index: -1;
-webkit-transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55)
}
.btn-talk:hover::before {
top: 0;
left: 0;
z-index: 1
}
