/*Eservices Landing*/
#mainContent #masaarSection{margin-top:70px;}
#mainContent .serviceBlock{
    width: auto;
    text-align: center;
    margin: 0;
}
#mainContent .serviceBlock:last-child{margin-right:0}
#mainContent .departmentsListing .serviceBlock span{    
	background-color: #008266;
  margin: auto;
  padding: 22px 8px 12px;
  border-radius: 25px 25px 0px 0px;
  color: #fff;
  font-family: "29LTBukraMedium";
  font-size: 14px;
  font-weight: 400;
  min-height: 30px;
  line-height: 1.2;
}
#mainContent  .departmentsListing .serviceBlock:hover span,#mainContent  .departmentsListing .serviceBlock a:focus span{background: rgb(87, 88, 86);}
@media screen and (max-width:1400px) {
#mainContent .serviceBlock{width:auto}
#mainContent .serviceBlock:nth-child(2n){margin-right:0}
}
@media screen and (max-width:640px) {
#mainContent .serviceBlock{width:100%;margin-right:0}
}

/* Eservices Listing*/
h2.departmentName.sectionTitle{font-size: 1.75em;/* color: #1f7030 !important; */margin-bottom: 0px;color: #22abda;background: #008266;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
h2.departmentName:after{display:none !important}

.services .Item{position:relative;margin-top:15px;margin-bottom:15px;overflow:hidden}
.services .layoutCol3:nth-child(4n + 1) .Item{margin-left:0!important}
.services .layoutCol3:nth-child(4n) .Item{margin-right:0!important}
.services .Item > a{display:block;height:320px;overflow:hidden;width:100%;background-color:#000}
.services .Item > a > img{min-height:100%;width:100%;opacity:.5;padding:0!important;margin:0}
.services .Item .Info{position:absolute;top:calc(100% - 120px);margin:15px;width:calc(100% - 60px);height:calc(100% - 60px);padding:15px;color:#fff;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;}
.services .Info .readMore{display:inline-block;position:absolute;bottom:15px}
/*.services .Info .readMore,*/.services .Info p{opacity:0}
.services .Info > .esTitle{font-size:1.625em;color:#fff!important;font-family:"oswald"}
/*.services .Info > a:first-child:hover{text-decoration:none}*/
.services .Item a:hover .Info,.services .Item a:focus .Info{top:0;background: linear-gradient(180deg, rgb(0, 130, 102) 0%, rgba(0, 130, 102, 0.81) 99%, rgba(0, 130, 102, 0.65) 100%);}
/*.services .Item:hover  .Info .readMore,*/.services .Item a:hover .Info p,.services .Item a:focus .Info p{opacity:1}
/*eservices Details */
.serviceDetails .serviceDesc ul{padding:0 0 0 10px;  margin: 8px 20px 10px 0px;}
.serviceDetails .serviceDesc ul li{margin-left:8px;padding:2px 0px}
.serviceDetails .serviceDesc ul li:before{content: "";display: inline-block;width: 0;height: 0;border-style: solid; border-color : transparent transparent #008266 transparent;margin-right: 7px;border-width: 0 0 8px 8px;}
.serviceDetails .serviceDesc ul  ul {margin:3px 0 20px 0   }
.serviceDetails .serviceDesc ul  ul li:before{border-color :transparent transparent #aaa transparent;}
.serviceDetails .serviceDesc ol{padding:0 0 0 10px;  margin: 8px 20px 10px;}



/*.dashboardContent .Item .Info{top:0;text-align:center}
.dashboardContent .Item .Info >.esTitle{bottom:45px;position:absolute;width:100% ;text-align:left;left:15px}*/
.dashboardContent .Item .Info img{max-width:200px;}
.dashboardContent .layoutCol4:nth-child(3n + 1) .Item{margin-left:0!important}
.dashboardContent .layoutCol4:nth-child(3n) .Item{margin-right:0!important}

.dbFrame{height:700px!important}
.dbContent > .dbInfopath{text-align:center}
.dbContent img{max-width:40%;display:block;text-align:center;margin:0 auto}
.dbContent img+img{margin-top:30px}
.dbInfopath:first-child img{margin-bottom:30px}
.dbContent hr{    border-top: 1px dashed #ccc;margin:20px 0}
@media screen and (min-width:1201px) and (max-width:1540px ) {
.services .Item > a{height:225px}
.services .Item .Info{margin: 10px; width: calc(100% - 40px); height: calc(100% - 40px); padding: 10px;}
.services .Info > .esTitle{font-size:1.4em}
.dbFrame{height:500px!important}
}
@media screen and (max-width:1200px) {

.services .layoutCol3,.dashboardContent .layoutCol4 {width:50%}
.dashboardContent .layoutCol4:nth-child(3n + 1) .Item{margin-left:15px!important}
.dashboardContent .layoutCol4:nth-child(3n) .Item{margin-right:15px!important}


.services .layoutCol3:nth-child(2n + 1) .Item,.dashboardContent .layoutCol4:nth-child(2n + 1) .Item{margin-left:0!important}
.services .layoutCol3:nth-child(2n) .Item,.dashboardContent .layoutCol4:nth-child(2n) .Item{margin-right:0!important}
.dbFrame{height:500px!important}

}
@media screen and (max-width:768px) {
.services .layoutCol3,.dashboardContent .layoutCol4 {width:100%}
.services .Item,.dashboardContent .Item{margin:10px 0 !important}
.dbFrame{height:300px!important}
.dbContent img{max-width:90%;}
}
/*Workspace*/
.layoutCol3.title{color:#000}
.contentNav{transition:all .5s ease;background-color:transparent!important}



#mainContent .departmentsListing {
	grid-template-columns: repeat(1, 1fr);
    grid-gap: 30px 30px;
    display: -ms-grid;
  	display: grid; 
}


@media (min-width: 576px) {
	#mainContent .departmentsListing {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 768px) {
	#mainContent .departmentsListing {
		grid-template-columns: repeat(3, 1fr);
	}
}