@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
html{height: 100%;}
body{font-family: 'Open Sans', sans-serif;color:#000;background-color: #F5F8FF;height: 100%}
a{text-decoration: none !important;}
.topbar{padding: 5px 0;background-color: #00b894;color: #fff;}
.topbar ul{padding: 0;margin: 0;}
.topbar a{color: #fff;}
.topbar .topbar-social{width: 20%;float: right; text-align: right;}
.topbar .topbar-social li{margin-right: 2px;}
.topbar .topbar-social .fa-facebook-square:hover{color: #3B5998;background-color: #fff;}
.topbar .topbar-social .fa-twitter-square:hover{color: #00acee;background-color: #fff;}
.topbar .topbar-social .fa-linkedin:hover{color: #0077B5;background-color: #fff;}
.topbar .topbar-social .fa-google-plus-square:hover{color: #dd4b39;background-color: #fff;}
.navbar-section{background: #fff;color: #00b894;border-bottom: 2px solid;}
.navbar{padding-top: 0;padding-bottom: 0;}
.navbar > .navbar-brand img {
    max-height: 60px !important;
}
.navbar-section .nav-item{margin-left: 10px;}
.navbar-section .nav-link{color: #181818 !important;text-transform: uppercase;font-size: 12px;font-weight: 700;letter-spacing: 1px;border-radius: 0px;padding-top:20px;padding-bottom:20px;transition: all .5s ease 0s}
.margin-expand{margin: 0 -15px;}
.wrapper{padding: 40px 0;}
.section-header-title{text-align: center;text-transform: uppercase;margin-bottom: 30px;}
.section-header-title h2{font-weight: 600;color: #00b894}
.section-body-text{text-align: justify;}
.about-us{background: #fff;}
.btn-primary{background-color: #00b894;color: #fff;border-color: #00b894}
.btn-primary:hover{background-color: #00b894;opacity: .7;}
.servies-box{text-align: center;margin-bottom: 15px;margin-top: 100px;}
.servies-box .box-hover-link{text-decoration: none;color: #222;display: block;transition: all .5s ease-out 0s;}
.servies-box .box-hover-link .card{transition: all .5s ease-out 0s;}
.servies-box .service-header .fas{color: #00b894;transition: all .5s ease-out 0s;}
.servies-box .box-hover-link:hover .card{background: #05ab8a;border: transparent;color: #fff;transition: all .5s ease-in 0s;box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);-ms-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);-o-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.servies-box .box-hover-link:hover .service-header .fas{color: #fff;transition: all .5s ease-out 0s;}
.servies-box .service-header{padding: 20px 0;}
.card-title{text-transform: uppercase;}
.c-box .media-body{padding-left: 15px;}
hr{margin: 0;}
.c-box{margin-bottom: 15px;}
.c-box .fas{color: #00b894}
.footer{background: #05ab8a;color: #fff;padding: 15px 0;}
.copy-r-right{float: right;}
.copy-r-right a{color: #fff;}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{background-color: transparent;color: #00b894 !important;transition: all .5s ease 0s}
.sticky {border-top:3px solid #00b894;position: fixed;top: 0;width: 100%;z-index: 999;border-bottom: 0px solid #ddd;box-shadow: 0 0px 3px rgba(0,0,0,0.25), 0 0px 5px rgba(0,0,0,0.22);-webkit-box-shadow: 0 0px 3px rgba(0,0,0,0.25), 0 0px 5px rgba(0,0,0,0.22);-ms-box-shadow: 0 0px 3px rgba(0,0,0,0.25), 0 0px 5px rgba(0,0,0,0.22);-moz-box-shadow: 0 0px 3px rgba(0,0,0,0.25), 0 0px 5px rgba(0,0,0,0.22);-o-box-shadow: 0 0px 3px rgba(0,0,0,0.25), 0 0px 5px rgba(0,0,0,0.22);}
.servies-box.recruitment .box-hover-link .card,
.servies-box.graphic .box-hover-link .card,
.servies-box.software .box-hover-link .card{
	background: url('../img/job.jpg');
	background-size: cover;
	color: #fff;
	background-position: top;
/*	transition: all 1s ease-out 0s;*/
/*	transform: scale(1);*/
}
.servies-box.graphic .box-hover-link .card{
	background: url('../img/graphic.jpg');
}
.servies-box.software .box-hover-link .card{
	background: url('../img/software.jpg');
}
.servies-box .box-hover-link .card{
	min-height: 300px;
	display: table;
	width: 100%;
}
.servies-box .box-hover-link .card:hover{
		transform: scale(1.5);
		z-index: 99;
/*		background-position: bottom;*/
/*		transition: all 1s ease-in 0s;*/
		-webkit-animation-name: MOVE-BG;
		-webkit-animation-duration: 2s;
/*		-webkit-animation-iteration-count: infinite;*/
}
@-webkit-keyframes MOVE-BG {
	from {
		background-position: bottom;
	}
	to {
		background-position: top;
	}
}
.servies-box .box-hover-link .card-body{
	display: table-cell;
	vertical-align: bottom;
	width: 100%;
}
.servies-box .box-hover-link .card-title{
	font-size: 22px;
	font-weight: bold;
}
.services-section{
	display: table;
	width: 100%;
	height: 100%;
}
.services-section .service-container{
	display: table-cell;
	width: 100%;
	vertical-align: middle;
	height: 100%;
}
.c-box .card-body{
	padding: 16.9px 25px;
}
.c-box .media-body h5{
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold;
}
.right-90{
	right: -160px !important;
}
#footer {
    background: #00b894 !important;
    padding: 20px 0;
}
#footer h5{
	padding-left: 10px;
    border-left: 3px solid #eeeeee;
    padding-bottom: 6px;
    margin-bottom: 20px;
    color:#ffffff;
}
#footer a {
    color: #ffffff;
    text-decoration: none !important;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
#footer ul.social{margin: 0;}
#footer ul.social li{
	padding: 3px 0;
}
#footer ul.social li a i {
    margin-right: 5px;
	font-size:25px;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
}
#footer ul.social li:hover a i {
	font-size:30px;
	margin-top:-10px;
}
#footer ul.social li a,
#footer ul.quick-links li a{
	color:#ffffff;
}
#footer ul.social li a:hover{
	color:#eeeeee;
}
#footer ul.quick-links li{
	padding: 3px 0;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
}
#footer ul.quick-links li:hover{
	padding: 3px 0;
	margin-left:5px;
	font-weight:700;
}
#footer ul.quick-links li a i{
	margin-right: 5px;
}
#footer ul.quick-links li:hover a i {
    font-weight: 700;
}

@media (max-width:767px){
	#footer h5 {
    padding-left: 0;
    border-left: transparent;
    padding-bottom: 0px;
    margin-bottom: 10px;
}
}
.confirm{background-color: #00b894 !important;color: #fff;}

.servies-box .box-hover-link:hover .curl:before,
.servies-box .box-hover-link:hover .curl:after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 12.5%;
	bottom: 5.8%;
	width: 70%;
	max-width: 300px;
	max-height: 100px;
	height: 55%;
	box-shadow: 0 12px 15px rgba(0, 0, 0, .3);
	transform: skew(-10deg) rotate(-6deg);
}
.servies-box .box-hover-link:hover .curl:after {
	left: auto;
	right: 5.8%;
	bottom: auto;
	top: 14.16%;
	transform: skew(-15deg) rotate(-84deg);
}

.servies-box .box-hover-link:hover .curl {
	width: 70px;
	height: 70px;
	border-radius: 10px 0 4px 0;
}
.servies-box .box-hover-link:hover .curl:before,
.servies-box .box-hover-link:hover .curl:after {
	box-shadow: 0 24px 30px rgba(0, 0, 0, .3);
}

.lod {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url('../img/loading.gif')
                50% 50%
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .lod {
    display: block;
}
#sideContent{
		display: none;
    position: fixed;
    top: 50%;
    right: -160px;
    z-index: 999;
    background: #08d1aa;
    padding: 40px 20px;
    transition: all 0.5s ease 0s;
    border-radius: 15px 15px 0px 0px;
    opacity: .5;
    color: #fff;
    border: 1px solid #fff;
    border-right-color: transparent;
    transform: rotate(-90deg);
    cursor: pointer;
}
#sideContent:hover{
	right: -90px;
	opacity: 1;
	transition: all 0.5s ease 0s;
}
#sideContent ul{
	margin: 0;
}
#sideContent .angle-content a{
	color: #fff;
	padding: 10px;
	border: 1px solid #fff;
	display: block;
	transition: all 0.5s ease 0s;
	font-weight: bold;
}
#sideContent .angle-content a:hover{
	background-color: #fff;
	color: #00b894;
	transition: all 0.5s ease 0s;
}
#sideContent ul li{
	display: inline-block;
}
.services-section{
	background: #00b894 url('../img/black.png');
	color: #fff;
}
.services-section h2{
	color: #fff;
}
.side-box{
	position: relative;
}
.side-box h2{margin: 0}
.angle-icon{
    position: absolute;
    left: 45%;
    transform: rotate(90deg);
    top: -32px
}
.topbar-contact,
.topbar-social{
	margin-top: 4px;
}
.search-box-top{width: 74%;float: left;margin-right: 15px;}
.search-box-top .input-group{
	height: 30px;
}
.search-box-top input{
	border-left: none;
    padding-left: 0;
    outline: none !important;
    box-shadow: none;
}
.search-box-top .input-group-text {
    background: #fff;
    border-right: none;
    cursor: pointer;
    color: #00b894;
}
.search-box-top .form-control:focus{
	border-color: transparent;
	box-shadow: none;
}
@media only screen and (max-width: 1199px) {
	.navbar{padding-top: 15px;padding-bottom: 15px;}
	.search-box-top {width: 55%;}
    .topbar .topbar-social {width: 36%;}
}
@media only screen and (max-width: 991px) {
	.navbar{padding-top: 15px;padding-bottom: 15px;}
	.topbar .topbar-social {width: 32%;}
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
	.search-box-top {width: 100%;margin-bottom: 5px;}
	.topbar-contact{text-align: center;margin-bottom: 5px;}
	.topbar .topbar-social{text-align: center;float: inherit;width: 100%;}
	.copy-r-left, .copy-r-right{text-align: center;float: inherit;}
	.navbar{padding-top: 15px;padding-bottom: 15px;}
	.navbar-expand-lg .navbar-nav .nav-link {
	    padding-right: .5rem;
	    padding-left: .5rem;
	}
/*	.topbar-contact{margin-top: 15px;}
	.search-box-top{margin-top: 10px;}*/
}

  /*----------------------------------
  36. Newsletter Popup Area
------------------------------------*/
#newsletter-popup-conatiner {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9998;
}
#newsletter-popup {
    background: rgba(0, 0, 0, 0) url("../img/1.png") repeat scroll 0 0;
    color: #ffffff;
    max-height: 400px;
    left: 50%;
    max-width: 450px;
    padding: 35px;
    position: absolute;
    text-align: left;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    width: 800px;
}
#newsletter-popup .hide-popup {
    background: #000000 none repeat scroll 0 0;
    border: 1px solid #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    line-height: 24px;
    min-width: 70px;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: -30px;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}
#newsletter-popup .hide-popup:hover {
    background: #ffbb00;
}
.title-subscribe h1 {
    font-size: 2.5em;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0;
    margin-top: 60px;
    color: #000;
    text-transform: uppercase;
}
#newsletter-form .content-subscribe {overflow: hidden}
.form-subscribe-header label {
    color: #333;
    font-size: 1.1em;
    font-weight: normal;
    line-height: 25px;
    margin: 20px 0;
    max-width: 72%;
}
#newsletter-form .input-box, #newsletter-form .content-subscribe .actions {float: left}
#newsletter-form .input-box .input-text {
    border: 1px solid #eeeeee;
    height: 40px;
    line-height: 40px;
    margin: 0 0 5px;
    padding-left: 10px;
    width: 380px;
}
#newsletter-form  .actions .button-subscribe {
    background-color: #222222;
    border: medium none;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    min-width: 115px;
    padding: 0 10px;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}
#newsletter-form .actions .button-subscribe:hover {
    background: #ffbb00;
    color: #fff;
}
.subscribe-bottom {
    color: #000000;
    display: block;
    margin-top: 15px;
    overflow: hidden;
}
.subscribe-bottom label {
    color: #000;
    font-size: 12px;
    margin-bottom: 0;
}
#dont_show {
    margin: 0;
    vertical-align: middle;
}