<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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
<div class="container">
<a class="navbar-brand" href="#">Mega Menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobile_nav" aria-controls="mobile_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mobile_nav">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 float-md-right">
</ul>
<ul class="navbar-nav navbar-light">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
<li class="nav-item dmenu dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu sm-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Software Development</a>
<a class="dropdown-item" href="#">Web Designing & Development</a>
<a class="dropdown-item" href="#">Mobile Application</a>
<a class="dropdown-item" href="#">Business Solutions & Business Process</a>
<a class="dropdown-item" href="#">Digital Marketing & SEO Services</a>
<a class="dropdown-item" href="#">Web Hosting & Maintenance</a>
<a class="dropdown-item" href="#">Cyber Security</a>
<a class="dropdown-item" href="#">Block Chain Implementation</a>
<a class="dropdown-item" href="#">Big Data</a>
</div>
</li>
<!--========-->
<li class="nav-item dropdown megamenu-li dmenu">
<a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All Services</a>
<div class="dropdown-menu megamenu sm-menu border-top" aria-labelledby="dropdown01">
<div class="row">
<div class="col-sm-6 col-lg-3 border-right mb-4">
<h6>Ecommerce</h6>
<a class="dropdown-item" href="#"><i class="fab fa-magento"></i> Magento Development</a>
<a class="dropdown-item" href="#"><i class="fab fa-magento"></i> Magento 2 Migration</a>
<a class="dropdown-item" href="#"><i class="fab fa-magento"></i> Odoo ERP</a>
<a class="dropdown-item" href="#"><i class="fab fa-magento"></i> Mobile Commerce</a>
<a class="dropdown-item" href="#"><i class="fab fa-magento"></i> CRM for Commerce</a>
</div>
<div class="col-sm-6 col-lg-3 border-right mb-4">
<h6>LAMP Technology</h6>
<a class="dropdown-item" href="#"><i class="fab fa-php"></i> PHP Website Development</a>
<a class="dropdown-item" href="#"><i class="fas fa-circle"></i> Phalcon Development</a>
<a class="dropdown-item" href="#"><i class="fab fa-laravel"></i> Laravel Development</a>
<a class="dropdown-item" href="#"><i class="fab fa-wordpress-simple"></i> WordPress Development</a>
<a class="dropdown-item" href="#"><i class="fab fa-php"></i> Symfony Development</a>
</div>
<div class="col-sm-6 col-lg-3 border-right mb-4">
<h6>Mobile</h6>
<a class="dropdown-item" href="#"><i class="fab fa-apple"></i> iPhone App Development</a>
<a class="dropdown-item" href="#"><i class="fab fa-android"></i> Android App Development</a>
<a class="dropdown-item" href="#"><i class="fas fa-mobile-alt"></i> Phone Gap App Development</a>
<a class="dropdown-item" href="#"><i class="fas fa-tablet-alt"></i> Hybrid App Development</a>
<a class="dropdown-item" href="#"><i class="fas fa-mobile-alt"></i> Ionic Development</a>
<a class="dropdown-item" href="#"><i class="fas fa-tablet-alt"></i> React Native Development</a>
<a class="dropdown-item" href="#"><i class="fas fa-mobile-alt"></i> Xamarin App Development</a>
</div>
<div class="col-sm-6 col-lg-3 mb-4">
<h6>Node.js & MongoDB</h6>
<a class="dropdown-item" href="#"><i class="fas fa-cubes"></i> Full Stack Development</a>
<a class="dropdown-item" href="#"><i class="fas fa-cube"></i> MEAN Stack</a>
<a class="dropdown-item" href="#"><i class="fab fa-angular"></i> AngularJS</a>
<a class="dropdown-item" href="#"><i class="fab fa-node-js"></i> Node.JS Development</a>
<a class="dropdown-item" href="#"><i class="fas fa-leaf fa-rotate-90"></i> MongoDB Development</a>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-3 border-right mb-4">
<h6>Microsoft Technology</h6>
<a class="dropdown-item" href="#"><i class="fab fa-windows"></i> Microsoft App Development</a>
<a class="dropdown-item" href="#"><i class="fab fa-windows"></i> MS Desktop App Development</a>
<a class="dropdown-item" href="#"><i class="fab fa-windows"></i> SharePoint Development</a>
<a class="dropdown-item" href="#"><i class="fab fa-windows"></i> ASP.NET Development</a>
<a class="dropdown-item" href="#"><i class="fab fa-windows"></i> CMS Development</a>
</div>
<div class="col-sm-6 col-lg-3 border-right mb-4">
<h6>Cloud Services</h6>
<a class="dropdown-item" href="#"><i class="fas fa-cloud"></i> DevOps</a>
<a class="dropdown-item" href="#"><i class="fab fa-amazon"></i> Amazon Web Services</a>
<a class="dropdown-item" href="#"><i class="fab fa-windows"></i> Azure Cloud Service</a>
<a class="dropdown-item" href="#"><i class="fab fa-google"></i> Google App Engine Services</a>
</div>
<div class="col-sm-6 col-lg-3 border-right mb-4">
<h6>Enterprise Services</h6>
<a class="dropdown-item" href="#"><i class="fas fa-laptop"></i> Augmented Reality</a>
<a class="dropdown-item" href="#"><i class="fas fa-laptop"></i> CRM</a>
<a class="dropdown-item" href="#"><i class="fab fa-buromobelexperte"></i> Enterprise Mobility Services</a>
<a class="dropdown-item" href="#"><i class="fas fa-th-large"></i> Blockchain Services</a>
<a class="dropdown-item" href="#"><i class="fas fa-briefcase"></i> Business Intelligence</a>
</div>
<div class="col-sm-6 col-lg-3 mb-4">
<h6>Digital Marketing</h6>
<a class="dropdown-item" href="#"><i class="fas fa-laptop"></i> Digital Marketing</a>
<a class="dropdown-item" href="#"><i class="fas fa-laptop"></i> PPC Management Services</a>
<a class="dropdown-item" href="#"><i class="fas fa-laptop"></i> E-commerce SEO Services</a>
<a class="dropdown-item" href="#"><i class="fas fa-laptop"></i> Conversion Rate Optimization</a>
</div>
</div>
</div>
</li>
<!--=========-->
<li class="nav-item"><a class="nav-link" href="<?php echo siteURL;?>portfolio.php">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="<?php echo siteURL;?>career.php">Careers</a></li>
<li class="nav-item"><a class="nav-link" href="<?php echo siteURL;?>contact-us.php">Contact us</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!--Start code-->
<div class="row">
<div class="col-12 pb-5">
<div id="featured" class="carousel slide carousel" data-ride="carousel">
<!--dots navigate-->
<ol class="carousel-indicators top-indicator">
<li data-target="#featured" data-slide-to="0" class="active"></li>
<li data-target="#featured" data-slide-to="1"></li>
<li data-target="#featured" data-slide-to="2"></li>
<li data-target="#featured" data-slide-to="3"></li>
</ol>
<!--carousel inner-->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<!--Start slider news-->
<div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1">
<div class="card border-0 rounded-0 text-light overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_left-cover-1 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid w-100"
src="https://bootstrap.news/source/img3.jpg"
alt="Bootstrap news">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h3 post-title text-white my-1">Premium bootstrap 4 news portal magazine template perfect for news site</h2>
</a>
<!-- meta title -->
<div class="news-meta">
<span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--End slider news-->
<!--Start box news-->
<div class="col-12 col-md-6 pt-2 pl-md-1 mb-3 mb-lg-4">
<div class="row">
<!--news box-->
<div class="col-6 pb-1 pt-0 pr-1">
<div class="card border-0 rounded-0 text-white overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_right-cover-2 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid"
src="https://bootstrap.news/source/img8.jpg"
alt="Bootstrap blog theme">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!-- category -->
<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Lifestyle</a>
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h5 text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</div>
<!--news box-->
<div class="col-6 pb-1 pl-1 pt-0">
<div class="card border-0 rounded-0 text-white overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_right-cover-2 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid"
src="https://bootstrap.news/source/img7.jpg"
alt="Bootstrap 4 blog template">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!-- category -->
<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Motocross</a>
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h5 text-white my-1">Three myths about Florida elections recount</h2>
</a>
</div>
</div>
</div>
</div>
<!--news box-->
<div class="col-6 pb-1 pr-1 pt-1">
<div class="card border-0 rounded-0 text-white overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_right-cover-2 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid"
src="https://bootstrap.news/source/img6.jpg"
alt="Bootstrap 4 news theme">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!-- category -->
<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Fitness</a>
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h5 text-white my-1">Finding Empowerment in Two Wheels and a Helmet</h2>
</a>
</div>
</div>
</div>
</div>
<!--news box-->
<div class="col-6 pb-1 pl-1 pt-1">
<div class="card border-0 rounded-0 text-white overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_right-cover-2 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid"
src="https://bootstrap.news/source/img5.jpg"
alt="Bootstrap 4 news template">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!-- category -->
<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Adventure</a>
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h5 text-white my-1">Ditch receipts and four other tips to be a shopper</h2>
</a>
</div>
</div>
</div>
</div>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
</div>
<div class="carousel-item">
<div class="row">
<!--Start slider news-->
<div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1">
<div class="card border-0 rounded-0 text-light overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_left-cover-1 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid w-100"
src="https://bootstrap.news/source/img4.jpg"
alt="Bootstrap news wordpress">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h3 post-title text-white my-1">Premium bootstrap 4 news portal magazine template perfect for news site</h2>
</a>
<!-- meta title -->
<div class="news-meta">
<span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span>
<span class="news-date">Oct 22, 2019</span>
</div>
</div>
</div>
</div>
</div>
<!--End slider news-->
<!--Start box news-->
<div class="col-12 col-md-6 pt-2 pl-md-1 mb-3 mb-lg-4">
<div class="row">
<!--news box-->
<div class="col-6 pb-1 pt-0 pr-1">
<div class="card border-0 rounded-0 text-white overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_right-cover-2 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid"
src="https://bootstrap.news/source/img5.jpg"
alt="bootstrap 4 wordpress theme">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!-- category -->
<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Lifestyle</a>
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h5 text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
</a>
</div>
</div>
</div>
</div>
<!--news box-->
<div class="col-6 pb-1 pl-1 pt-0">
<div class="card border-0 rounded-0 text-white overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_right-cover-2 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid"
src="https://bootstrap.news/source/img6.jpg"
alt="bootstrap news template magazine">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!-- category -->
<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Motocross</a>
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h5 text-white my-1">Three myths about Florida elections recount</h2>
</a>
</div>
</div>
</div>
</div>
<!--news box-->
<div class="col-6 pb-1 pr-1 pt-1">
<div class="card border-0 rounded-0 text-white overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_right-cover-2 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid"
src="https://bootstrap.news/source/img7.jpg"
alt="Bootstrap personal blog">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!-- category -->
<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Fitness</a>
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h5 text-white my-1">Finding Empowerment in Two Wheels and a Helmet</h2>
</a>
</div>
</div>
</div>
</div>
<!--news box-->
<div class="col-6 pb-1 pl-1 pt-1">
<div class="card border-0 rounded-0 text-white overflow zoom">
<div class="position-relative">
<!--thumbnail img-->
<div class="ratio_right-cover-2 image-wrapper">
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<img class="img-fluid"
src="https://bootstrap.news/source/img8.jpg"
alt="simple blog bootstrap">
</a>
</div>
<div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
<!-- category -->
<a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Adventure</a>
<!--title-->
<a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
<h2 class="h5 text-white my-1">Ditch receipts and four other tips to be a shopper</h2>
</a>
</div>
</div>
</div>
</div>
<!--end news box-->
</div>
</div>
<!--End box news-->
</div>
</div>
</div>
<!--end carousel inner-->
<!--navigation-->
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="section-block-grey">
<div class="container">
<div class="row mt-60">
<div class="col-md-4 col-sm-12 col-12">
<div class="serv-section-2">
<div class="serv-section-2-icon"> <i class="fas fa-gem"></i> </div>
<div class="serv-section-desc">
<h4>Planning</h4>
<h5>Business Planning</h5> </div>
<div class="section-heading-line-left"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="serv-section-2 serv-section-2-act">
<div class="serv-section-2-icon serv-section-2-icon-act"> <i class="fas fa-cogs"></i> </div>
<div class="serv-section-desc">
<h4>Management</h4>
<h5>Retirement Planning</h5> </div>
<div class="section-heading-line-left"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="serv-section-2">
<div class="serv-section-2-icon"> <i class="fas fa-signature"></i> </div>
<div class="serv-section-desc">
<h4>Accumulation</h4>
<h5>Support and Sell</h5> </div>
<div class="section-heading-line-left"></div>
</div>
</div>
</div>
<div class="row mt-60">
<div class="col-md-4 col-sm-12 col-12">
<div class="serv-section-2">
<div class="serv-section-2-icon"> <i class="fas fa-shield-alt"></i> </div>
<div class="serv-section-desc">
<h4>Security </h4>
<h5>Secure Business</h5> </div>
<div class="section-heading-line-left"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="serv-section-2 serv-section-2-act">
<div class="serv-section-2-icon serv-section-2-icon-act"> <i class="far fa-clock"></i> </div>
<div class="serv-section-desc">
<h4>24/7 Available </h4>
<h5>All time available </h5> </div>
<div class="section-heading-line-left"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="serv-section-2">
<div class="serv-section-2-icon"> <i class="fas fa-signature"></i> </div>
<div class="serv-section-desc">
<h4> Customer Support </h4>
<h5>Support and Sell</h5> </div>
<div class="section-heading-line-left"></div>
</div>
</div>
</div>
<div class="row mt-60">
<div class="col-md-4 col-sm-12 col-12">
<div class="serv-section-2">
<div class="serv-section-2-icon"> <i class="fas fa-shield-alt"></i> </div>
<div class="serv-section-desc">
<h4>Security </h4>
<h5>Secure Business</h5> </div>
<div class="section-heading-line-left"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="serv-section-2 serv-section-2-act">
<div class="serv-section-2-icon serv-section-2-icon-act"> <i class="far fa-clock"></i> </div>
<div class="serv-section-desc">
<h4>24/7 Available </h4>
<h5>All time available </h5> </div>
<div class="section-heading-line-left"></div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="serv-section-2">
<div class="serv-section-2-icon"> <i class="fas fa-signature"></i> </div>
<div class="serv-section-desc">
<h4> Customer Support </h4>
<h5>Support and Sell</h5> </div>
<div class="section-heading-line-left"></div>
</div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="plus-button"></div>
<div class="social-button twitter-button"></div>
<div class="social-button facebook-button"></div>
<div class="social-button pinterest-button"></div>
<div class="social-button insta-button"></div>
.b-0 {
bottom: 0;
}
.bg-shadow {
background: rgba(76, 76, 76, 0);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179, 171, 171, 0)), color-stop(49%, rgba(48, 48, 48, 0.37)), color-stop(100%, rgba(19, 19, 19, 0.8)));
background: linear-gradient(to bottom, rgba(179, 171, 171, 0) 0%, rgba(48, 48, 48, 0.71) 49%, rgba(19, 19, 19, 0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );
}
.top-indicator {
right: 0;
top: 1rem;
bottom: inherit;
left: inherit;
margin-right: 1rem;
}
.overflow {
position: relative;
overflow: hidden;
}
.zoom img {
transition: all 0.2s linear;
}
.zoom:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.mt-60{
margin-top:60px;
}
.section-block-grey {
padding: 90px 0px 90px 0px;
background-color: #f9f9f9;
}
.serv-section-2 {
position: relative;
border: 1px solid #eee;
background: #fff;
box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
border-radius: 5px;
overflow: hidden;
padding: 30px;
}
.serv-section-2:before {
position: absolute;
top: 0;
right: 0px;
z-index: 0;
content: " ";
width: 120px;
height: 120px;
background: #f5f5f5;
border-bottom-left-radius: 136px;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.serv-section-2-icon {
position: absolute;
top: 18px;
right: 22px;
max-width: 100px;
z-index: 1;
text-align: center;
}
.serv-section-2-icon i {
color: #5f27cd;
font-size: 48px;
line-height: 65px;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.serv-section-desc {
position: relative;
}
.serv-section-2 h4 {
color: #333;
font-size: 20px;
font-weight: 500;
line-height: 1.5;
}
.serv-section-2 h5 {
color: #333;
font-size: 17px;
font-weight: 400;
line-height: 1;
margin-top: 5px;
}
.section-heading-line-left {
content: '';
display: block;
width: 100px;
height: 3px;
background: #5f27cd;
border-radius: 25%;
margin-top: 15px;
margin-bottom: 5px;
}
.serv-section-2 p {
margin-top: 25px;
padding-right: 50px;
}
.serv-section-2:hover .serv-section-2-icon i {
color: #fff;
}
.serv-section-2:hover:before {
background: #5f27cd;
}
.navbar{
background: #fff;
padding-top: 0;
padding-bottom: 0;
box-shadow: 1px 3px 4px 0 #adadad33;
}
.navbar-light .navbar-brand {
color: #2196F3;
}
.navbar-light .navbar-nav .nav-link {
color: #1ebdc2;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
color: #1ebdc2;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: #fff;
}
.navbar-light .navbar-nav .nav-link{
padding-top: 22px;
padding-bottom: 22px;
transition: 0.3s;
padding-left: 24px;
padding-right: 24px;
font-size: 14px;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
background: #1ebdc2;
transition: 0.3s;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #fff;
text-decoration: none;
background-color: #1ebdc2 !important;
}
.sm-menu{
border-radius: 0px;
border: 0px;
top: 97%;
box-shadow: rgba(173, 173, 173, 0.2) 1px 3px 4px 0px;
}
.dropdown-item {
color: #3c3c3c;
font-size: 14px;
}
.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #2196F3;
}
.navbar-toggler{
outline: none !important;
}
.navbar-tog{
color: #1ebdc2;
}
.megamenu-li {
position: static;
}
.megamenu {
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 15px;
}
.megamenu h6{
margin-left: 21px;
}
.megamenu i{
width: 20px;
}
.plus-button {
position: absolute;
bottom: 30px;
right: 30px;
z-index: 100;
height: 75px;
width: 75px;
border-radius: 100%;
background-color: #e91e63;
box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(0.92);
transform: scale(0.92);
}
.plus-button::before {
content: "+";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font-size: 28px;
font-weight: 600;
}
.plus-button:hover {
-webkit-transform: scale(1);
transform: scale(1);
box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.5);
}
.plus-button:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
box-shadow: 2px 3px 11px 1px rgba(0,0,0,0.53);
}
.plus-button.open {
-webkit-transform: rotate(45deg) scale(0.92);
transform: rotate(45deg) scale(0.92);
background-color: #333;
box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58);
}
.plus-button.open:hover {
-webkit-transform: scale(1) rotate(45deg);
transform: scale(1) rotate(45deg);
box-shadow: 3px 3px 12px 2px rgba(0,0,0,0.5);
}
.plus-button.open:active {
-webkit-transform: scale(0.96) rotate(45deg);
transform: scale(0.96) rotate(45deg);
box-shadow: 2px 3px 11px 1px rgba(0,0,0,0.53);
}
.social-button {
position: absolute;
bottom: 43px;
right: 41px;
height: 50px;
width: 50px;
-webkit-transform: scale(0.8);
transform: scale(0.8);
background-size: 153% !important;
border-radius: 100%;
box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.4);
cursor: pointer;
z-index: 99;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-button:hover {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5);
transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5);
}
.social-button.twitter-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/twitter-256.png") no-repeat center;
}
.social-button.twitter-button.active {
bottom: 110px;
right: 21px;
}
.social-button.facebook-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/facebook-256.png") no-repeat center;
}
.social-button.facebook-button.active {
bottom: 105px;
right: 73px;
}
.social-button.pinterest-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/pinterest-256.png") no-repeat center;
}
.social-button.pinterest-button.active {
bottom: 67px;
right: 109px;
}
.social-button.insta-button {
background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/instagram-256.png") no-repeat center;
}
.social-button.insta-button.active {
bottom: 15px;
right: 105px;
}
$(document).ready(function () {
$('.navbar-light .dmenu').hover(function () {
$(this).find('.sm-menu').first().stop(true, true).slideDown(150);
}, function () {
$(this).find('.sm-menu').first().stop(true, true).slideUp(105)
});
});
$(document).ready(function() {
$(".megamenu").on("click", function(e) {
e.stopPropagation();
});
});
$(document).ready(function(){
$('.plus-button').click(function(){
$(this).toggleClass('open');
$('.social-button').toggleClass('active');
});
});
