body {
	margin: 0;
	padding: 0;
	/*--color: #FCE400;*/
	width: 100%;
	height: 100%;
}





.container__img-holder {

	display: inline-block;
	vertical-align: top;
	margin-bottom: 20px;
	margin-left: 16px;
	cursor: pointer;	z-index: 1000;
  }
  
  .container .container__img-holder:nth-child(3n+1) {
	margin-left: 0; 	z-index: 1000;
  }
  
  .container__img-holder img {
	width: 200px;
	height: 150px;
	z-index: 100000;
	
	
  }
  
  
  /* Popup Styling */
  .img-popup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(255, 255, 255, .5);
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
	z-index: 1000;
  }
  
  .img-popup img {
	width: auto;
	height: auto;
	
	opacity: 0;
	transform: translateY(-100px);
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	-o-transform: translateY(-100px);
  }
  
  .close-btn {
	width: 35px;
	height: 30px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
  }
  
  .close-btn .bar {
	height: 4px;
	background: #333;
  }
  
  .close-btn .bar:nth-child(1) {
	transform: rotate(45deg);
  }
  
  .close-btn .bar:nth-child(2) {
	transform: translateY(-4px) rotate(-45deg);
  }
  
  .opened {
	display: flex;
  }
  
  .opened img {
	animation: animatepopup 1s ease-in-out .8s;
	-webkit-animation: animatepopup .3s ease-in-out forwards;
  }
  
  @keyframes animatepopup {
  
	to {
	  opacity: 1;
	  transform: translateY(0);
	  -webkit-transform: translateY(0);
	  -moz-transform: translateY(0);
	  -ms-transform: translateY(0);
	  -o-transform: translateY(0);
	}
  
  }
  
  @media screen and (max-width: 880px) {
  
	.container .container__img-holder:nth-child(3n+1) {
	  margin-left: 16px;
	}

}

.popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	padding: 20px;
	border: 2px solid #ccc;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	z-index: 1000;
}
.popup img {
	max-width: 100%;
	height: auto;
}


.close {
	position: absolute;
	top: 2px;
	right: 10px;
	font-size: 50px;
	cursor: pointer;
	color: red;
	opacity: 1;
}

/* Dispersing animation */
@keyframes dispersing {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0);
		opacity: 0;
	}
}


.onlinebtn{

	background-color: blue;
	text-decoration: none;
	margin-top: -15px;
	border: 1px solid #000;
	border-radius: 20px;
	
}

.center-div {
	display: flex;
	justify-content: center;
	align-items: center;
	
	margin-top: 60px;
	margin-bottom: 40px;
}

.navbar ul.nav > li > a:hover {
    border-top: solid 5px #000000; 
}


a{
	color: var(--color);
}
section, div.section {
    margin-bottom: 0 !important;
}
.heading h2 , .heading h3 , .heading h4 , .heading h5 {
	border-bottom: 5px solid  var(--color);
}
.home {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 auto 0 10px !important;
}
.home img {
	margin-top: 0 !important;
	margin-left: 2.5% !important;
	margin-right: 2.5% !important;
}
.header {
	background: #000;
}
.header #navigation ul li a {
	font-size: 13px;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
}
#navigation ul li:hover .links {
	color: #000;
	background-color: var(--color);
	font-weight: 600;
}
#navigation ul li ul.sub-menu {
        min-width: 200px;
        background: #fff;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
        padding: 20px;
        transition: all 0.4s ease-in-out;
}
#navigation ul li:hover ul.sub-menu{
		width: 200px;
        display: block;
}
#navigation ul li ul.sub-menu li{
        display: block;
        padding: 4%;
        border-bottom: 1px solid #f5f5f5;
}
#navigation ul li ul.sub-menu li a{
    	text-decoration: none;
    	color: #000;
    	font-size: 15px;
}
#navigation ul li ul.sub-menu li a:hover{
	color: var(--color);
}
.lead {
	font-size: 17px !important;
}


.scree1 {
	background: top center;
	background-image: url('../images/img-hero-bg.jpg') !important;
	background-size: cover;
	background-size: 100%;
	position: relative;
}

.main_container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    /*z-index: 1;*/
}

.herotopright2 , .herotopright {
	position: absolute;
	top: 0;
	right: 0;
	float: right !important;
	z-index: -1;
	overflow: hidden;

}

.herotopright {
	right: 0;
}

.herotopright2 {
	/*display: none;*/
}

.technology {
	top: 200px;
	right: 20px;
	z-index: 1;
	position: absolute;
	font-size: 70px;
	font-weight: 300;
	color: #fff;
}

/*.taglines h1 {
	position: absolute;
    color: #fff;
    font-size: 70px;
    line-height: 80px;
}
*/
/*.btn_flat, .menu_sirez li, .taglines h1 {
    font-weight: lighter;
}

.buttn {
    margin-top: 20px;
    padding: 5px;
}

.arow_dwn, .buttn, .more_info {
    position: relative;
}
.pull-left {
    float: left!important;
}
*/

@media (max-width: 1440px) {
.taglines {
    margin-top: calc(50% - 290px);
    /*margin-bottom: 20% !important;*/
}
.taglines {
    margin-right: 0;
    /*margin-bottom: 20% !important*/
    /*margin-top: calc(50% - 230px);*/
}
.pull-right {
    float: right!important;
    /*margin-bottom: 20% !important;*/
}

.home-carousel {
	height: 600px;
	background-image: url('../images/img-hero-bg.jpg') !important;
	background-size: cover;
	background-size: 100%;
}
.carousel-content {
	margin: 20px 0;
	font-size: 17px !important;
	font-style: italic;
}
.homepage {
	height: 600px;
	/*background-color: yellow;*/
}
.homepage img {
	margin-top: 50px;
	/*margin: auto !important;*/
	width: 450px;
	height: 300px;
	margin-right: auto !important;
	margin-left: auto !important;  
}
.bar{
	background-attachment: fixed !important;
}






element.style {
    overflow: hidden !important;
    height: 400px;
}
.screen2, .screen3 {
    display: table;
    width: 100% !important;
    /*background-color: yellow;*/
}
.screen2 .helf_div, .screen3 .helf_div {
    padding: 0;
    margin: 0;
}

.cont_text {
    background: url('../images/img-bg_leftimg.jpg') left top no-repeat #e5e6e1;
}

.con_abtus {
    width: 70%;
    padding-left: 45px;
    padding-bottom: 80px;
    margin: 0 auto;
    color: #434242;
    /*border: 1px solid #000;*/
}

.con_abtus h2 {
    margin-top: 40px;
    margin-bottom: 30px;
    color: #000;
    font-weight: lighter;
    font-size: 30px;
    line-height: 1.1;
}

.con_abtus p {
    margin: 0 0 22px;
    padding: 0;
}
.con_abtus p {
    color: #434242;
    line-height: 1.72222;
    font-size: 15px;
}

.more_info {
    margin-top: 0;
    margin-bottom: 40px !important;
    float: left;
    width: 100%;
}
.arow_dwn, .buttn, .more_info {
    position: relative;
}

.more_info a, .more_info a:focus {
    padding: 10px 30px;
    display: inline-block;
    cursor: pointer;
    background: 0 0;
    color: #000;
    border: 1px solid #000;
    font-weight: 400;
    line-height: 1.5;
}
.more_info a:focus, .more_info a:hover {
    text-decoration: none!important;
    background-color: #000;
    color: #fff;
}

.abutimg {
	overflow: hidden;
}

.grid {
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
    position: relative;
    text-align: center;
    list-style: none;
}

.contnimg, .contnimg2 {
    top: 0;
    left: 0;
    height: 100%;
    transition: all .5s ease-in-out;
    width: 100%;
    position: absolute;
}


.contnimg img {
	border: 0;
	vertical-align: middle;
	transform: scale(1.0);
    transition: all 0.4s ease-in-out;
}

.contnimg img:hover {
	transform: scale(1.04);
}

.aboutslide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 452px;
    cursor: pointer;
}



.aboutslide:nth-child(1) {
    -webkit-animation: fade 48s 42s infinite;
    animation: fade 48s 42s infinite;
    z-index: 10;
}

.aboutslide:nth-child(2) {
    -webkit-animation: fade 48s 36s infinite;
    animation: fade 48s 36s infinite;
    z-index: 10;
}

.aboutslide:nth-child(3) {
    -webkit-animation: fade 48s 30s infinite;
    animation: fade 48s 30s infinite;
    z-index: 10;
}

.aboutslide:nth-child(4) {
    -webkit-animation: fade 48s 24s infinite;
    animation: fade 48s 24s infinite;
    z-index: 10;
}

.aboutslide:nth-child(5) {
    -webkit-animation: fade 48s 18s infinite;
    animation: fade 48s 18s infinite;
    z-index: 10;
}

.aboutslide:nth-child(6) {
    -webkit-animation: fade 42s 12s infinite;
    animation: fade 48s 6s infinite;
    z-index: 10;
}

.aboutslide:nth-child(7) {
    -webkit-animation: fade 48s 6s infinite;
    animation: fade 48s 6s infinite;
    z-index: 10;
}}

@keyframes fade {
0%, 100%, 15% {
    opacity: 1;
}
25%, 90% {
    opacity: 0;
}}

figure.effect-bubba {
    background: 0 0;
    cursor: pointer;
}
.strengthbg {
    background-image: url(../images/img-strength-bg.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-color: #212121;
}

.contnimg2 img {
	/*z-index: 1;*/
	/*background-color: yellow;*/
}
.posrel h2 {
	margin-top: 50px;
	color: #fff;
	/*top : 50px;*/
	font-weight: lighter;
	margin-left: 30px;
}

.posrel .strengthlist {
	width: 500px !important;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 20px;
	position: relative;
	/*margin-left: 30px;*/
}
.posrel .strengthlist li { 
	list-style: none;
	text-decoration: none;
}
.posrel .strengthlist li a {
	font-size: 14px;
	color: #666;
	/*border-right: 1px solid #666;*/
}
.posrel .strengthlist li a:hover ,.posrel .strengthlist li a:focus {
	text-decoration: none;
	color: #fff;
	background-color: transparent !important;
}
/*.strengthlist li.lasts {
	color: #fff !important;
}
.item.active li a {
	color: #fff !important; 
}
*/
.strengthtext {
	position: absolute;
	display: block;
	color: #fff;
	font-size: 14px;
	width: 70%;
	height: 400px !important;
	margin-left: 30px;
	top: 100%;
	/*overflow: scroll;*/
}

.btn_ourstrnth {
	margin-top: 20px;
	border: 2px solid #fff !important;
	color: #fff !important;
}
.btn_ourstrnth:hover , .btn_ourstrnth:focus {
	background-color: #fff !important;
	color: #000 !important;
}

.chevron-left , .chevron-right {
	position: absolute;
	top: 50%;
}
.chevron-right {
	right: 40%;
}
.item  .contnimg2 img {
	transform: scale(1.0);
	transition: all 0.4s ease-in-out;
}

.item .contnimg2 img:hover {
	transform: scale(1.04);
}

.about-company {
	display: flex;
}
.about-company .content{
	background-image: url('../images/img-about-background.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.about-company .img{
	width: auto !important; 
	display: flex;
	justify-content: flex-start;
	padding: 0;
}
.about-company , .about-company p {
	margin-bottom: 0 !important;
}
.clients {
	padding-left: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.client {
	list-style: none;
	margin: 20px auto !important;
}
.client img {
}
#footer {
	background-color: #000;
	border-bottom: 1px solid #ccc;
	padding: 25px;
}
#footer h4 {
	font-size: 20px;
}
.about-us p {
	margin-top: 30px;
	color: #ccc;
}
.about-us a {
	background-color: var(--color);
	color: #fff;
}
.about-us a:hover {
	background-color: #fff;
	color: #000;
	border: 2px solid var(--color)
}
.quick-links {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.quick-links a {
	text-decoration: none;
	color: #ccc;
	font-size: 15px;
	font-style: italic;
}

.quick-links a:hover {
	color: var(--color) !important;
}

.contact ul {
	width: auto !important;
	color: #ccc;
}

.contact .company-name {
	color: #ccc;
	font-size: 18px;
	font-weight: 900;
}
.contact ul li {
	text-decoration: none;
	color: #ccc;
}
.contact ul li a:hover {
	text-decoration: none;
	color: var(--color) !important;
}

#copyright {
	padding: 20px;
	background-color: #000;
}
#copyright p {
	font-size: 15px;
}

/*About */

.about-digitech {
	margin : 0 5% 5% 5%;
	border-left: 20px solid var(--color);
	padding: 30px;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
}
.progress-bar-primary {
	background-color: var(--color);
	animation-delay: all 0.2s ease;
}
.ul-icons li i {
	background: var(--color);
}

/*Contact */
#content {
	margin-bottom: 30px;
}
.head-office h4 {
	margin-top: 0;
}
.head-office p {
	padding: 3%;
	font-weight: 500;
	font-size: 15px;
	color: #000 !important;
	border-left: 20px solid var(--color);
	padding: 30px;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);	
}
.head-office p a {
	text-decoration: none;
	color: #000;
}
.head-office p a:hover {
	color: var(--color);
}
.regional-offices div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-left: 20px solid var(--color);
	padding: 30px;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
}
.regional-offices div p {
	padding: 3%;
}
.contact-form {
	padding: 30px;
	margin-top: 25px;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
}
.contact-btn {
	background-color: var(--color);
	padding: 2% 4%;
	color: #fff;
	border-radius: 35px;
	border:none;
	outline: none;
	transform: scale(1);
	transition: 0.4s;
}
.contact-btn:hover , .contact-btn:focus {
	transform: scale(1.04);
}


/* Services */
.icon {
	border: 2px solid #fff;
}
.box-simple .icon {
	color: var(--color);
	border-color: var(--color);
}
.digitech-services {
	border-left: 20px solid var(--color);
	padding: 30px;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
}
.support-call {
	padding: 20px 30px;
}
.response-time {
	padding: 20px 30px;
}

/* Products */
.thumbnail {
	border: none;
	outline: none;
	cursor: pointer;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
}
.thumbnail img {
	height: 60%;
	width: 100%;
	margin-bottom: 6%;

}
.thumbnail .product-content h5 {
	text-align: center;
	font-weight: bold;
	font-size: 18px !important;
	margin: 4% 6%;
}

.thumbnail .product-content p {
	padding: 0 10%;
	color: #000;
	font-size: 15px;
}


/*news&events*/

.thumbnail .news-events-content p {
	padding-left: 8%;
	color: #000;
	font-size: 15px;
}

/* Services */
.icon img {
	width: 40px;
	height: 40px;
}

/* OutSourcing */

.it-outsourcing  {
	margin : 0 5% 5% 5%;
	border-left: 20px solid var(--color);
	padding: 30px;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
	height: auto !important; 
}

.sys-integration  {
	margin : 0 5% 5% 5%;
	border-left: 20px solid var(--color);
	padding: 30px;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
	height: auto !important; 
}


.digitech-outsourcing {
	margin : 0 5% 5% 5%;
	border-right: 20px solid var(--color);
	padding: 30px;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
}

.advantages {
	margin : 0 5% 5% 5%;
	padding: 30px;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
	border-radius: 20px;
}

.advantages p {
	font-size: 15px;
	font-style: italic;
	letter-spacing: 1.02px;
	color: #000;
	font-weight: 550;
}

/* Website-designing */
.website-design {
	margin : 0 5% 5% 5%;
	border-left: 20px solid var(--color);
	padding: 30px;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
}

.services-offerings , .technical-expertise {
	margin : 0 4% 4% 4%;
	padding: 30px;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
	border-radius: 20px;
}

/* Technology */
.coe {
	margin : 0 5% 5% 5%;
	border-left: 20px solid var(--color);
	padding: 30px;
	box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
}

.cards .thumbnail {
	padding: 5% 10%;
	margin-top: 5%;
	box-shadow: 0 3px 12px 0 rgba(50, 50, 50, 0.2) !important;
}

.cards .thumbnail:hover {
	border: 2px solid var(--color);
}

.grid-img img {
	width: 500px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.owl-carousel .owl-controls .owl-page.active span,
.owl-theme .owl-controls .owl-page.active span,
.owl-carousel .owl-controls.clickable .owl-page:hover span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
  background: var(--color);
}

.text {
	height: 500px !important;
}
.solution-img {
	display: flex;
	justify-content: center;
	align-items: center;
}
.solution-img img {
	height: 120px;
	width: 120px;
}

.bar {
	padding-bottom: 0 !important;
}
#service .container-fluid {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
#service .service-item {
	margin-right: 0 !important;
    /*margin-bottom: 60px;*/
    position: relative;
    overflow: hidden;
    box-shadow: 0 7px 16px 0 rgba(50, 50, 50, 0.2);
    -moz-box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
    -webkit-box-shadow: 0 7px 12px 0 rgba(50, 50, 50, 0.2);
  }
  #service .service-block {
  	padding-right: 0 !important;
  	padding-left: 0 !important;
}
  #service .service-item img {
    margin: auto;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
  }
  #service .overlay {
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
  }
  #service .service-item:hover img {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
  } 
  #service .service-item:hover .overlay {
    opacity: 0.85;
  }
  #service .service-item:hover img {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
  } 
  #service .work-table {
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  #service .table-cell {
    display: table-cell;
    vertical-align: middle;
  }
  #service .work-content {
    color: #fff;
    padding: 25px;
  }
  #service .work-content h4 {
    margin-top: 0;
    color: #fff;
    font-weight: bold;
  }
  #service .work-content p {
    color: #fff;
    font-size: 16px;
    padding: 0px 20px;
  }

  
@media(max-width: 1150px) {
	.header #navigation ul li a {
	    color: #fff;
	    text-decoration: none;
	    font-weight: 500;
	    font-size: 9.5px;
	}
	.cont_text {
		height: 379px !important;
	}
	.con_abtus h2 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 20px;
		padding-bottom: 10px;
	}
	.con_abtus p {
		font-size: 13px;
	}
	.more_info {
		margin-bottom: 0 !important;
	}
	.abutimg {
		height: 379px !important;
		/*display: none;*/
		/*width: 100%;*/
	}
	.effect-bubba .defh1 {
		height: 379px !important;
	}
	.strengthtext p{
		position: absolute;
		height: 300px !important;
		/*z-index: 1;*/
	}
	.posrel .strengthlist {
		width: 100% !important;
	}
}

@media(max-width: 800px) {
	.technology {
		font-size: 60px;
		padding-bottom: 2% !important;
		margin-bottom: 20% !important
	}
	.technology span {
		font-size: 40px !important;
	}
	.cont_text {
		height: auto !important;
	}
	.con_abtus h2 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 20px;
		padding-bottom: 10px;
	}
	.con_abtus p {
		font-size: 13px;
	}
	.more_info {
		margin-bottom: 0 !important;
	}
	.abutimg {
		width: 100%;
	}
	.posrel {
		height: 379px !important;
	}
	.strengthtext {
		position: absolute;
		color: #fff;
		font-size: 14px;
		width: 80%;
		height: auto !important;
		top: 35%;
	}
	.chevron-left , .chevron-right {
		position: absolute;
		top: 90%;
		width: 50%;
	}
	.screen3 {
		width: 100%;
	}	
	.quick-links {
		display: flex !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
	}
	.clients {
		margin: 0 50px !important;
	}
	.client img {
		height: auto !important;
		width: auto !important;
	}
	.contact h4 {
		text-align: left !important;
	}
	.contact ul {
		padding-left: 0; 
	}
	.social {
	padding-left: auto !important;
	padding-right: auto !important; 
	}
}
@media (max-width: 745px) and (min-width: 320px){
	.technology {
    font-size: 35px;
    top:33px;
}
.technology span{
    font-size: 35px;
    }

	
}


.client-logo{
	border: 1px solid #e0e0e0;
    transition-duration: 0.3s;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
    transition: all 0.3s ease-in-out;}
    
    
    #owl1 .item{
  margin: 8px;
}
#owl1 .item img{
  display: block;
  width: 100%;
  height: auto;
}
#owl2 .item{
  margin: 8px;
}
#owl2 .item img{
  display: block;
  width: 100%;
  height: auto;
}