@charset "utf-8";
/* CSS Document */



/*********************************************
		base css
*********************************************/
*{margin:0; padding:0;}
body{font-family: 'Open Sans', sans-serif; background:url(../images/service-bg.jpg) repeat top;}

a{-webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease;}
.join-list, .orderList{list-style:none; margin:0;}
img{max-width:100%;}
h1, h2, h3, h4, h5, h6{font-family: 'Noto Serif', serif;}
p{font-size:14px; line-height:24px; color:#333;}



/*********************************************
		Header css
*********************************************/
.header-wrap{position: relative; box-shadow: 0 15px 30px rgba(0,0,0,0.1); text-align: center;}
.header-wrap .logo{text-align: center; position: absolute; width: 100%; top: 50%; margin-top: -217px; left: 0;}


/*********************************************
		Services css
*********************************************/
.service{text-align: center; max-width: 1650px; margin: 0 auto;}
.services-wrap{padding:60px 0 50px 0;}
.services-wrap .title{position: relative; margin-bottom: 60px;}
.title h1{font-size: 48px; font-weight: bold; color: #000; text-align: center;}
.title span{color: #0b4f9f;}
.title strong{color: #ed1f24;}
.services-wrap .title:before{content: ""; background: url(../images/headingLine.png) no-repeat top; width: 107px; height: 2px; position: absolute; bottom: -20px; left: 50%; margin-left: -53px;}
.serviceIcon{background: #fff; position: relative; width: 200px; height: 200px; display: inline-block; background-color: #fff;
	-webkit-box-shadow: 0 8px 18px rgba(0,0,0,.08);
	-moz-box-shadow: 0 8px 18px rgba(0,0,0,.08);
	box-shadow: 0 8px 18px rgba(0,0,0,.08); margin-bottom: 25px; border-radius: 100%; text-align: center; line-height: 200px;}
.services-wrap h3 a{text-align: center; font-size: 24px; font-weight: bold; color: #000; text-decoration: none;}
.services-wrap h3 a:hover{color: #0b4f9f}
.services-wrap h3 span{display: block;}
.subText{font-size: 18px; color: #6e6e6e; font-family: 'Noto Serif', serif; font-weight: normal;}
.services-wrap p{color: #000; margin-top: 15px;}
.comingImg{position: absolute;; top: -44px; left: 0;}


/*********************************************
		Join css
*********************************************/
.join-wrap{padding:30px 0; background: #fff;}
.join-list{list-style: none; text-align: center;}
.join-list li{display: inline-block; font-family: 'Notf', seo Seririf; font-weight: bold; padding: 0 12px; font-size: 24px; color: #0b4f9f;}
.join-list li a{font-family: 'Open Sans', sans-serif; font-weight: bold; font-size: 16px; -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #ed1f24;
	-webkit-box-shadow: 3px 4px 5px rgba(0,0,0,.2);
	-moz-box-shadow: 3px 4px 5px rgba(0,0,0,.2);
	box-shadow: 3px 4px 5px rgba(0,0,0,.2); text-transform: uppercase; color: #fff; background: #ed1f24; padding: 13px 26px; text-decoration: none;}
.join-list li a:hover{background: #0b4f9f;}
.join-list li i{font-size: 20px; font-weight: bold; padding-left: 10px;}


.appstore{padding: 30px 0; text-align: center;}
.appstore a{display: inline-block; margin: 0 5px;}

/*********************************************
		Footer css
*********************************************/
/*

===============  Footer Css  ===============

*/



.footer{background:#28313c; padding:40px 0 20px 0; text-align:center;}

.footer .footerLinks{margin-top:20px;}

.footer .footerLinks li{display:inline-block; padding:0 10px;}

.footer .footerLinks li a{text-decoration:none; color:#fff; font-size:14px; font-weight:600;}

.footer .footerLinks li a:hover{color:#ed1f24;}





.social_media{padding-top:20px;}

.social_media li{display:inline-block; padding:0 2px;}

.social_media li span{font-size:14px; color:#fff; text-transform:uppercase; margin-right:6px;}

.social_media li a{font-size:14px; color:#fff; border:1px solid #fff; width:30px; height:30px; line-height:30px; text-align:center; border-radius:100%; display:block;}



.social_media li:nth-child(2) a:hover{background:#3c599b;}

.social_media li:nth-child(3) a:hover{background:#1ea1f3;}

.social_media li:nth-child(4) a:hover{background:#0274b3;}



.copyrightWrp{border-top:1px solid #3e4650; padding-top:15px; margin-top:30px;}

.copyright{font-size:14px; color:#686d73; text-align:left;}

.credits{text-align:right; font-size:14px; color:#686d73;}

.credits a{color:#686d73; text-decoration:none;}

.credits a:hover{color:#ed1f24;}
/*********************************************
		Footer css
*********************************************/

/*********************************************
		Apps Popup Modal CSS
*********************************************/

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 1.2s;
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 1s;
}
.modal-title{
    font-family: 'Noto Serif', serif;
    font-size: 30px;
    font-weight: bold;
}

/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: 0px; opacity: 0} 
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: 0px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}
            


@media screen and (max-width: 1200px) {
.services-wrap h3 a{font-size: 18px;}
.subText{font-size: 14px;}
}

@media screen and (max-width: 990px) {
.site, .footer{text-align: center;}
.header-wrap .logo{margin-top: 0; top: 0;}
.header-wrap .logo img{max-width: 300px;}
.appstore a{margin-bottom: 10px;}
}


@media screen and (max-width: 767px) {
.join-list li{padding: 5px 0;}
.title h1{font-size: 36px;}
}

@media screen and (max-width: 680px) {
.header-wrap .logo img{max-width: 200px;}
.modal-lg{padding-left: 13px;}
.appstore a{margin-bottom: 10px;}
}

@media screen and (max-width: 480px) {
.title h1{font-size: 24px;}
.join-list li{font-size: 22px;}
.header-wrap .logo img{max-width: 150px;}
.modal-lg{padding-left: 13px;}
.appstore a{margin-bottom: 10px;}
.modal-content{width: 93%}
}