body {
  background: #fff;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #222;
  overflow-x: hidden;
}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #f26622; height:150px}
::-webkit-scrollbar-thumb:hover {background: #d44e0d;}
.white-bg {background-color:#fff;}
/* Header */
header {position: relative; top: 0; left: 0; width: 100%; z-index: 5;}
header .top-bar {background: #e88b00;}
header .top-bar a {color: #fff; padding: 10px; font-size: 13px; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; display: inline-block;}
header .top-bar a:hover {color: #000; text-decoration:none;}

@media (max-width: 767px) {
  header .top-bar a {
    padding-left: 3px;
    padding-right: 3px;
  }
}
@media (max-width: 991px) {
  header .top-bar .social li a {
    padding-left: 10px;
    padding-right: 10px;
    width: inherit;
  }
}
header .top-bar .social li a:hover {background: #5AC8D8; color: #fff; -webkit-box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.1); box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.1);}

/* menu */
/* menu before the banner --.header-wrap {width:100%; padding:10px 0px;}*/
.header-wrap {width:100%; padding:10px 0px; position:absolute; z-index:1000; left:10%; top:0%; width:80%;}
.logo {text-align:left; padding-top:10px;}
.menu-bar {cursor: pointer;}
.menu-bar span {color: #fff; font-size: 24px; font-weight:bold;}
.main-menubar {position: relative;}
nav {
  margin-right: 70px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  transform-origin: 100% 50%;
}

@media (max-width: 767px) {
  nav {
    margin-right: 0;
    position: absolute;
    right: 0;
    top: 47px;
    text-align: right;
    padding: 20px 0;
    z-index: 5;
    background: #fff;
  }

  nav a {
    color: #000 !important;
  }

  nav a:hover {
    color: #000;
	
  }
}

nav.hide {
  transform: scale(0);
}

nav a {
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  margin: 0 15px;
  display: inline-block;
}

@media (max-width: 767px) {
  nav a {
    margin: 5px 25px;
  }
}

nav a:hover {
 color: #fff;
text-decoration:none;
border-bottom:2px solid #fff;
}
.content-box {width:100%; text-align:center; font-weight:normal; background-image: linear-gradient(#fff, #f3f2f2);}
.section-bg {background-image: url("../img/bg-5.jpg"); background-repeat:no-repeat; width:100%; height:auto;}
.section-heading > h2 {
    font-weight: 300;
    color: #5e5a08;
    font-size: 48px;
    margin: 20px 0px 0px 0px;
}
.section-heading {
    /*margin-bottom: 60px;*/
	margin:40px 0px;
}
.section-heading > p {
    font-weight: normal;
    color: #726a84;
    font-size: 16px;
    margin: 0;
	padding:20px 0px;
}
.line-shape {
    width: 80px;
    height: 2px;
    background-color: #f26622;
    margin-top: 10px;
}

.line-shape {
    margin-left: calc(50% - 40px);
}
.single-special > h4 {
    font-size: 22px;
    color: #5e5a08;
    margin-bottom: 15px;
	font-weight:normal;
	text-transform: capitalize;
}.single-special > h4:hover {
    color: #222;
}
.single-special {
    border: 1px solid #e3e5e9;
    padding: 40px;
    /*border-radius: 40px 40px 40px 0px;*/
	border-radius: 10px;
    -webkit-transition-duration: 800ms;
    -o-transition-duration: 800ms;
    transition-duration: 800ms;
    margin-bottom: 70px;
	height:380px;
	 -webkit-box-shadow: 0 2px 30px rgba(0, 0, 0, 1);
     box-shadow: 0 2px 30px rgba(0, 0, 0, 1);
}
.single-special:hover {-webkit-box-shadow: 0 10px 90px rgba(0, 0, 0, 20); box-shadow: 0 10px 90px rgba(0, 0, 0, 20);}
.single-special p {margin-bottom: 0; font-size:16px;}
.single-special p:hover {color:#222;}
.single-icon {margin-bottom: 25px;}
.single-icon > i {font-size: 36px; color: #f26622;}
.single-icon > i:hover {color: #222;}
/* about us */
.abt-bg {background-color:#5e5a08; width:100%; padding:20px 0px;}
.abt-bg h2 {color:#fff; font-family: "Open Sans", Arial, sans-serif !important;}
.abt-bg  p {color:#fff; text-align:justify; font-size:14px;}
.abt-bg img {padding:22% 0px; width:100%; height:auto;}
/* team */
.team-bg {background-image: url("../img/bg-6.jpg"); background-repeat:no-repeat; width:100%; height:auto; color:#fff; padding:30px 0px;}
.team-bg h2 {color:#fff;}
.team-bg h4 {color:#f26622; text-align:left; font-weight:normal; margin:5px 0px;}
.team-bg p {color:#fff; text-align:left; font-weight:normal; padding:5px 0px; font-size:15px;}
.carousel-outer {width: 100%; height: 100%;}
.testimonial {margin: 15px 0px;}
.team-mem {text-align:left; width:100%; height:auto; height:240px; /*overflow-y:scroll;*/}
.team-mem img {margin: 0 auto; text-align:center; border-radius: 50%; width:120px; height:120px; text-align:left; -webkit-box-shadow:0px -1px 25px rgba(0,0,0,0.5), 0px 1px 25px rgba(0,0,0,0.7); -moz-box-shadow:0px -1px 25px rgba(0,0,0,0.5), 0px 1px 25px rgba(0,0,0,0.7); box-shadow:0px -1px 25px rgba(0,0,0,0.5), 0px 1px 25px rgba(0,0,0,0.7);}
.team-mem h4 {margin-bottom: 5px; color:#fff;}
.team-mem span {font-size: 15px; color: #f26622; text-transform: uppercase;}
.testimonial p {margin: 0 0 10px; color:#fff;}
/* solutions */
.story-area{background-color:#202c4b;}
.story-area {padding: 90px 0; position: relative; position: relative;}
.story-area:after {position: absolute; content: ""; top: 0; right: 0; width: 50%; height: 100%; background: url(../img/bg-7.jpg) no-repeat center center/cover;  z-index: 1;}
@media (max-width: 991px) {
  .story-area:after {
    display: none;
  }
}

.story-area .story-box {
  padding: 20px 20px;
  background: #fff;
  border-radius: 10px;
  position: relative;
  z-index: 2;
  -webkit-box-shadow:0px -1px 25px rgba(0,0,0,0.5), 0px 1px 25px rgba(0,0,0,0.7); -moz-box-shadow:0px -1px 25px rgba(0,0,0,0.5), 0px 1px 25px rgba(0,0,0,0.7); box-shadow:0px -1px 25px rgba(0,0,0,0.5), 0px 1px 25px rgba(0,0,0,0.7);
 }

@media (max-width: 991px) {
  .story-area .story-box {
    padding: 30px 50px;
    text-align: center;
  }
}

@media (max-width: 575px) {
  .story-area .story-box {
    padding: 30px;
  }
}

.story-box ul {text-align:left; margin:0px 20px; font-size:15px;}
.story-box ul li:before {    
font-family: 'FontAwesome';
content: '\f00c';
margin:0 5px 0 -15px;
color: #f26622;
text-align:left;
padding:0px 10px;
}
.story-box p {text-align:justify;}
/*products*/
.products {text-align:left; padding-bottom:40px;}
.products h4 {font-size:20px; color:#000; border-bottom:2px solid #000; padding-bottom:5px;}
.products p {text-align:justify; font-size:14px; color:#222;}
.products ul li:before {font-family: 'FontAwesome'; content: '\f0da'; margin:0 5px 0 -15px; color: #f26622; text-align:left; padding:0px 10px;}
.pro-ico {font-size:25px; font-weight:normal; color:#fff;}
.pro-box {border-bottom:3px solid #000; background-color:#000; padding:20px 15px; border-radius:15px; height:305px; margin-bottom: 30px;}
.pro-box p {text-align:justify; font-size:14px; color:#fff;}
.pro-mob {background-color: #7aa301;}
.pro-manage {background-color: #f26622;}
.pro-ivr {background-color: #0084b4;}

/* contact */
.contact-bg {background-image: url("../img/bg-8.jpg"); background-repeat:no-repeat; background-color:#fff; width:100%; height:auto; color:#fff; padding:20px 0px 60px 0px;}
.contact-bg h4 {text-align:center; padding-top:30px;}
.contact-bg  p {color:#3a3a3a; text-align:center; font-size:15px;}
.contact-bg a {text-decoration:none; color:#f26622;}
.contact-bg a:hover {text-decoration:underline; color:#3a3a3a;}
.abt-bg img {padding:22% 0px; width:100%; height:auto; }

/* technical partner */
.tech-part-bg {background-image: url("../img/tech-partner-bg.jpg"); background-repeat:no-repeat; background-color:#fff; width:100%; height:auto; color:#fff; padding:40px 0px 150px 0px; }
.price-box {
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
    color: #8790af;
    -webkit-box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.1);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
	margin:30px 0px;
}

.price-box:hover {
    -webkit-box-shadow: 0 0 50px -15px #4d43c6;
    box-shadow: 0 0 50px -15px #4d43c6;
}

.price-box .price-header {
    background-color: #f2f3fc;
    padding: 40px;
    color: #768ede;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#482cbf+0,6ac6f0+100 */
    background: rgb(72, 44, 191);
    /* Old browsers */
    /* FF3.6-15 */
    background: #e3e1e0;
    /* Chrome10-25,Safari5.1-6 */
    background: #e3e1e0;
    background: #e3e1e0;
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#482cbf', endColorstr='#6ac6f0', GradientType=1);
    position: relative;
    overflow: hidden;
    z-index: 2;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.price-box .price-header:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    opacity: 1;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.price-box:hover .price-header {
    color: #ffffff;
}

.price-box:hover .price-header:before {
    opacity: 0;
}


.price-box .price-header .price-icon {
    font-size: 60px;
    margin-bottom: 10px;
}

.price-box .price-header h4 {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 3px;
}
/* footer */
.footer_area {background-color:#252525; padding:50px 0px 30px 0px;}
.footer_area {color:#f26622; text-decoration:none;}
/*.footer_area{color:#fff; text-decoration:underline;}*/
.s-links {padding:20px 0px 0px 20px; text-align:right; color:#f26622;}
.s-links:hover {color:#fff;}
.f-email {color:#f26622; text-decoration:none;}
.f-email:hover {color:#fff; text-decoration:none;}
.footer_area ul{ list-style-type: none; text-align: center; margin: 0; padding-bottom: 20px; border-bottom:1px solid #3a3a3a;}
.footer_area ul li{display:inline; list-style-image:none; padding:0px 10px;}
.footer_area ul li a {display:inline-block; list-style-type:none; padding:0px 10px; color:#fff; text-decoration:none; font-size:14px;}
.footer_area ul li a:hover {color:#f26622; text-decoration:none;}
.copy {float:left; width:100%; text-align:center; margin:0 auto; color:#717171; background-color:#3a3a3a; text-decoration:none; font-size:12px; margin-top:30px; padding:10px;}
.ti-angle-up {color:#fff; border:1px solid white; width:100px;}




















#loader {;
  position: fixed;
  width: 96px;
  height: 96px;
  left: 50%;
  top: 50%; 
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.24);
  box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.24);
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .2s ease-out, visibility 0s linear .2s;
  -o-transition: opacity .2s ease-out, visibility 0s linear .2s;
  transition: opacity .2s ease-out, visibility 0s linear .2s;
  z-index: 1000;
}

#loader.fullscreen {
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  background-color: #fff;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#loader.show {
  -webkit-transition: opacity .4s ease-out, visibility 0s linear 0s;
  -o-transition: opacity .4s ease-out, visibility 0s linear 0s;
  transition: opacity .4s ease-out, visibility 0s linear 0s;
  visibility: visible;
  opacity: 1;
}

#loader .circular {
  -webkit-animation: loader-rotate 2s linear infinite;
  animation: loader-rotate 2s linear infinite;
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  display: block;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

#loader .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: loader-dash 1.5s ease-in-out infinite;
  animation: loader-dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
}

@-webkit-keyframes loader-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loader-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loader-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -136px;
  }
}

@keyframes loader-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -136px;
  }
}