/*font face starts*/
@import url('../fonts/montserrat.css');
@import url('../fonts/line-awesome.css');
/*font face end*/


/*common*/
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box;}
a{text-decoration:none; transition:ease 0.5s;}
a:hover{text-decoration:none;}
a:hover, a:focus{outline: none; text-decoration: none;}
* {box-sizing: border-box;}

body, html {
  height: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat';
  color: #5d5a67;
  font-size: 15px;
  line-height: 24px;
}


img {
  max-width: 100%;
  height: auto;
}
.btn:focus, .btn.focus {box-shadow:none;}
.btn-sold {padding: 15px 28px; min-width:160px;font-size: 13px;font-weight: 500;color: #fff;background:#5838fc;border-radius: 3px;transition: all 0.4s ease;}
.btn-sold:hover {color:#fff;box-shadow: 0px 20px 30px 0px rgba(26, 8, 119, 0.24);}

.btn-outline {padding: 14px 28px;min-width:160px; font-size: 13px;font-weight: 500;color: #5838fc;background:#fff;border-radius: 3px; border:2px solid #5838fc;transition: all 0.4s ease;}
.btn-outline:hover {color:#5838fc;box-shadow: 0px 20px 30px 0px rgba(26, 8, 119, 0.24);}


.back-bg {background-image:url(../images/banner.png); background-color:#fff; background-repeat:no-repeat; background-size:cover; background-position:bottom right; width:100%;min-height:500px;}
.headtop {padding:10px 0;}

/*nav*/
.navbar {float:right; margin-top:30px; padding:0;}
.navbar-nav .nav-link {
    padding: 12px 20px 12px 30px !important;
    font-weight: 500;
    font-size: 14px;
	text-transform:uppercase;
	color:#fff !important;
}

.banner-text {padding-top:80px;}
.banner-text h1 {font-size:45px; line-height:56px; color:#2c234d; font-weight: bold;}
.banner-text h4 {font-size:18px; line-height:28px;}
.right-img {padding-top:40px;}

.title {font-size:30px; color:#2c234d;font-weight: normal; margin-bottom:20px;}
.sm-title {color:#5838fc; margin-bottom:15px; display:block; font-size:18px;}

.view-more{
    font-size: 16px;
    color:#5838fc;
    position: relative;
    display: inline-block;
	text-transform:uppercase;
}
.view-more:hover {text-decoration:none;color:#5838fc;}
.view-more i{
    font-size: 20px;
    position: relative;
    top: 2px;
    margin-left: 5px;
    transition: all linear 0.3s;
}
.view-more:hover i{margin-left: 10px;}

.skill-box {
    position: relative;
    width: 100%;
    background: #f7f6fa;
    border-radius: 20px;
    padding: 40px 30px;
    margin-bottom: 30px;
    transition: all linear 0.3s;
	text-align:center;
	height:270px;
}
.skill-box:hover {
    background: #fff;
    box-shadow: 0px 30px 50px 0px rgba(11, 02, 55, 0.10);
}

.skill-box h4 {color:#fc2e90; font-size:30px; margin:25px 0 10px 0; font-weight:bold;}
.skill-box p {margin:0;}


/*call to action*/
.cta-box {margin-bottom:-60px;}
.call-area {padding:30px 70px; background:#fc2e90;border-radius:10px;color:#fff;}
.icon i {font-size:64px; margin-right:10px;}
.col-icon {/*float:left; */width:45%; position:relative;}
.col-icon:after {position:absolute; content:""; width:1px; height:65px; top:0; right:0; background:#ff9fcd;}
.col-icon:nth-child(2):after {display:none;}
.icon, .icon-text {float:left;}
.icon-text h3 {font-size:24px;}
.icon-text h4 { font-size:16px; font-weight:normal;}

/*social*/
.social-area {background:#f7f6fa; padding:140px 0 80px 0;}
.social-links a {
  font-size: 25px;
  display: inline-block;
  color: #fff !important;
  line-height: 46px;
  border-radius: 50%;
  text-align: center;
  width: 45px;
  height: 45px;
  transition: 0.3s;
}
.social-links a + a {margin-left:10px;}

.fb-bg {background-color:#3b5998;}
.tw-bg {background-color:#55acee;}
.tube-bg {background-color:#f43530;}
.linkedin-bg {background-color:#0271ae;}

.fb-bg:hover {background-color:#203b73;}
.tw-bg:hover {background-color:#3f8eca;}
.tube-bg:hover {background-color:#ca140f;}
.linkedin-bg:hover {background-color:#006095;}

/*footer*/
.footer-bottom {background:#5838fc; padding:20px 0;}
.footer-bottom .copyright {font-size: 13px;color: #fff;}
.footer-bottom .developtxt {text-align: right;font-size: 13px;color: #fff;}
.footer-bottom .copyright span,
.footer-bottom .developtxt span {vertical-align:middle;}

/*scroll to top CSS*/
.scrollToTop{
    width: 50px;
    height: 50px;
	line-height:50px;
	border-radius:50%;
    text-align:center;
    color: #fff;
    text-decoration: none;
    position:fixed;
    bottom: 75px;
    right: 20px;
    display: none;
    background:#fc2e90;
	font-size:30px;
	opacity:0.8;
}
.scrollToTop:hover, .scrollToTop:focus {opacity:1; color:#fff;}

@media only screen 
and (min-width : 340px)
and (max-width : 767px) {
	.back-bg {background-image: none;}
	.navbar-brand {margin:0 auto; display:table;}
	.banner-text {padding-top: 40px;}
	.banner-text h1 {font-size: 30px;line-height: 38px;}
	.navbar {float:none; background:#6136fa;padding: 10px;}
	.navbar-dark .navbar-toggler {border: 1px solid #fff; border-radius:0; padding: 0px 5px !important;}
	.navbar-nav .nav-link {padding:15px 0 !important;}
	.btn-outline {margin-left:0 !important;}
	.title {font-size: 26px;}
	.mob-margin {margin-bottom: 30px !important;}
	.view-link {margin-top:0 !important;}
	.call-area {padding:30px;}
	.col-icon {width:100%;}
	.icon-text h3 {font-size: 18px;}
	.icon-text h4 {font-size: 15px;}
	.icon-text {margin-top:10px;}
	.col-icon + .col-icon {margin-top:10px;}
	.col-icon:after {content:none;}
	.copyright, .developtxt {text-align:center !important;}
	.footer-bottom .copyright {margin-bottom:5px;}
}