@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,700|Open+Sans:300,300i,400,400i,600,700');
 * {
     margin: 0;
     padding: 0;
 }

 h2 {
     margin: 0;
     padding: 0;
 }

 a {
     text-decoration: none;
 }

 /* === preloader css ==== */

 /* ==============================
 Preloader
====================================== */

#preloader  {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #222;
     z-index: 9999999999;
    height: 100%;
 }
.scene {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 300px;
	background: #3b93ff;
	border: 15px solid #fff;
	border-radius: 50%;
	overflow: hidden;
	-webkit-box-shadow: 0 0 100px 0 rgba(0,0,0,.5);
	-moz-box-shadow: 0 0 100px 0 rgba(0,0,0,.5);
	box-shadow: 0 0 100px 0 rgba(0,0,0,.5);
	box-shadow:  0 0 100px 0 rgba(0,0,0,.5);
	animation: ascene 5s linear infinite;
}

.scene:before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.3);
	z-index: 1;
}
.roc {
	position: absolute;
	top: 50%;
	left: 49.3%;
	transform: translate(-50%, -50%) rotate(-45deg);
	color: #fff;
	font-size: 8em !important;
	animation: arocket .2s linear infinite;
	text-shadow: -10px 15px 10px rgba(0,0,0,.2);
}
.cloud {
	position: absolute;
	color: #ccc;
	animation:  acloud 1.8s linear infinite;
}
.cloud1 {
	left: 10%;
	font-size: 6em;
}
.cloud2 {
	left: 45%;
	font-size: 3em;
	z-index: -1;
	animation-delay: -0.8s;
}
.cloud3 {
	right: 20%;
	font-size: 3em;
	animation-delay: -0.4s;
}
@keyframes aroc {
	0% {
		transform: translate(-50%, -50%) rotate(-45deg) translate(0,0);
	}
	50% {
		transform: translate(-50%, -50%) rotate(-45deg) translate(-5px,5px);
	}
	100% {
		transform: translate(-50%, -50%) rotate(-45deg) translate(0,0);
	}
}
@keyframes acloud {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(1000%);
	}
}
@keyframes ascene {
	0% {
		background: #a91b60
	}
	30% {
		background: #352d5c
	}
	70% {
		background: #3498da
	}
	100% {
		background: #2c3f51
	}
}
 
.banner-inner{
	margin-top: 14%;
}
 .banner {
	 background: url(../images/banner-2.jpg) no-repeat;
	 background-attachment: fixed;
     height: 100vh;
     position: relative;
     z-index: 1;
 }
.banner:before{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background: linear-gradient(to right, rgba(54, 6, 102, 0.8) 55%, rgba(92, 15, 75, 0.8) 73%, rgba(115, 20, 58, 0.8) 84%, rgba(115, 20, 58, 0.8) 100%);
}
 .banner_inner {
     text-align: center;
     margin-top: 20px;
     position: relative;
 }
.logo img{
    margin-left: 3%;
}
 .banner_inner p {
     font-size: 15px;
     color: #ffffff;
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
     margin-top: 13%;
 }

 .button-port {
     text-align: center;
     margin-top: 10%;
 }

 .button-port a {
     transition: all 0.3s ease;
     text-transform: capitalize;
     font-family: 'Raleway', sans-serif;
     font-weight: 400;
     padding: 8px 30px;
     background-color: transparent;
     border: 1px solid #ffffff;
     border-radius: 25px;
     font-size: 16px;
     color: #ffffff;
     text-decoration: none;
     cursor: pointer;
 }

 .button-port a:hover {
     border-style: none;
     transition: all 0.3s ease;
     text-transform: capitalize;
     font-family: 'Raleway', sans-serif;
     font-weight: 400;
     padding: 8px 30px;
     background-color: #ffffff;
     border-radius: 25px;
     font-size: 16px;
     color: #352d5c;
     text-decoration: none;
     cursor: pointer;
     border: transparent;
     -webkit-box-shadow: 0px 0px 10px 0px rgba(26, 188, 156, 0.3);
     -moz-box-shadow: 0px 0px 10px 0px rgba(26, 188 156, 0.3);
     box-shadow: 0px 0px 10px 0px rgba(26, 188, 156, 0.3);
 }

 .banner_image img {
     margin-top: 52px;
 }

 .header {
     text-align: center;
     padding-top: 80px;
 }

 .header h2 {
     font-size: 35px;
     color: #a91b60;
     font-family: 'Raleway', sans-serif;
     font-weight: 400;
     margin-bottom: 35px;
 }

 .header-left h4 {
     font-size: 22px;
     color: #222222;
     font-family: 'Raleway', sans-serif;
     font-weight: 400;
     text-align: right;
 }

 .header-right h4 {
     font-size: 22px;
     color: #a91b60;
     font-family: 'Raleway', sans-serif;
     font-weight: 400;
     text-align: left;
 }

 .header-right p {
     font-size: 14px;
     color: #222222;
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
     text-align: left;
     padding-bottom: 30px;
 }

 .header-left p {
     font-size: 14px;
     color: #222222;
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
     text-align: right;
     padding-bottom: 30px;
 }

 .feature_inner {
     margin-bottom: 20%;
 }

.demo_inner {
	position: relative;
    text-align: center;
}

.demo_inner h4 {
    font-size: 20ox;
    color: #222222;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    padding-top: 20px;

}

.demo_inner .overlay_shape {
	display: inline-block;
	background: #a91b60;
	margin-top: -13%;
	margin-left: 76%;
	padding-right: 50px;
	position: absolute;
	height: 150px;
	width: 150px;
	border-radius: 50%;
	opacity: 0;
	left: 0;
	right: 0;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(26, 188, 156, 0.3);
     -moz-box-shadow: 0px 0px 10px 0px rgba(26, 188, 156, 0.3);
     box-shadow: 0px 0px 10px 0px rgba(26, 188, 156, 0.3);
}

.demo_inner:hover .overlay {
	bottom: 0;
	height: 100%;
}

.demo_inner:hover .overlay_shape {
	bottom: 0;
	opacity: 1;
	margin-bottom: -20%;
	transition: .5s ease;
}
.overlay_shape i {
	font-size: 20px;
	color: #fff;
	margin-left: 2%;
	margin-top: 35%;
}

.overlay {
	position: absolute;
	bottom: 100%;
	left: 0%;
	right: 0;
	background-color: rgba(0, 0, 0, 0.6);
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: .5s ease;
}
.overlay h3 {
	text-align: center;
	margin-top: 40%;
	font-size: 20px;
	color: #ffffff;
	font-weight: 600;
	font-family: 'Open Sans', sans-serif;
}
.demo_in img{
   -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
     -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
}
.demo_in h4{
	padding-top: 15px;
	padding-bottom: 50px;
	text-align: center;
	color: #a91b60;
	font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

 .feature-header h2 {
     font-size: 35px;
     color: #a91b60;
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
     text-align: center;
     padding-top: 35px;
 }
.feature-left h4{
	font-size: 25px;
     color: #352d5c;
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
     text-align: right;
}
.feature-right h4{
	font-size: 25px;
     color: #352d5c;
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
     text-align: left;
}
 .features {
     background: #f1f1f1;
     border: transparent;
     -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 156, 0.2);
     -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 156, 0.2);
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 156, 0.3);
 }

 .feature_image img {
     transform: translateY(18%);
 }

 .intro_inner {
     margin: 60px 0;
 }

 .intro_inner ul {
     margin-right: 12%;
 }

 .intro_inner ul li {
     padding-top: 10px;
     text-decoration: none;
     display: inline-block;
     padding-bottom: 10px;


 }
 .intro_inner ul li i {
     font-size: 20px;
     color: #353535;
     padding-right: 3px;
 }


 .intro_inner ul li a {
     font-size: 20px;
     color: #353535;
     text-decoration: none;
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;

 }

 .intro_inner ul li a:hover {
     color: #a91b60;
 }

 .intro_inner ul li:hover i {
     color: #a91b60;
 }

 .footer {
     background: #f9f8ff;
     border: transparent;
     -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 156, 0.3);
     -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 156, 0.3);
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 156, 0.3);
 }

 .footer_logo {
     margin: 50px 0;
 }

 .footer_logo img {
     margin-left: 46%;
 }

 .footer_logo h3 {
     font-size: 24px;
     color: #888888;
     font-family: 'Raleway', sans-serif;
     font-weight: 400;
     text-align: center;
 }

 .cont-icon ul {
     margin-left: 10%;
     margin-bottom: 6%;
 }

 .cont-icon ul li {
     display: inline-block;
     padding-left: 10px;
 }

 .cont-icon ul li a {
     text-align: center;
     float: left;
     color: #352d5c;
     font-size: 18px;
     width: 40px;
     height: 40px;
     line-height: 40px;
     border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     -o-border-radius: 50%;
     border: 1px solid #352d5c;
     transition: all 0.6s ease;
     display: inline-block;
     background: transparent;
     text-decoration: none;

 }

 .cont-icon ul li a:hover {
     color: #ffffff;
     background: #352d5c;
     transform: scale(1.2);
 }

 .content {
     margin: 15px 0;
     text-align: center;
 }

 .content h5 {
     font-size: 16px;
     color: #777777;
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
 }