body{font-family: 'Poppins', sans-serif; font-size: 14px; color: #4e4e4e; background: #28282B;  }
h1{font-size: 2.938rem; color: #FAF9F6; font-weight: 600;}
h2{font-size: 2.5rem; color: #ffffff; font-weight: 600;}
h4{font-size: 2.5rem; color: #ffffff; font-weight: 400;}
p{line-height: 1.75rem; font-size: 15px; text-align: justify; color: #FAF9F6;}
.btn-lg{padding: 0.8rem 2rem; font-size: 16px; letter-spacing: 0.03rem;}
.btn-primary{background: #E0115F; border-color: #E0115F; transition: all 0.9s ease;}
.btn-primary:hover{background:#1645b9; border-color: #1645b9;}
.btn-success{background: #39d479; border-color: #39d479; transition: all 0.9s ease;}
.btn-success:hover{background:#2bbe63; border-color: #2bbe63;}
.btn-outline-success{color: #39d479; border-color: #39d479;}
.btn-outline-success:hover{color: #ffffff; background:#2bbe63; border-color: #2bbe63;}
.btn-outline-primary{color: #E0115F; border-color: #E0115F;}
.btn-outline-primary:hover{color: #ffffff; background:#E0115F; border-color: #E0115F;}
.relative{position: relative;}
.form-control{padding: .5rem 1rem; font-size: 14px; background: #fff; border-color: #e9e9ea; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.07); color: #4e4e4e;}
.form-control:focus{ box-shadow: none; outline: none ! important; border-color: #08b7e2; }
.form-control::placeholder { color: #636363;}
.form-control:-ms-input-placeholder { color: #636363;}
.form-control::-ms-input-placeholder { color: #636363;}
ul li{padding: 5px 0;}
.text-success{color: #058429;}
.text-primary{color: #E0115F;}
.modal{z-index: 2200001570 !important;}







.call-buton .cc-calto-action-ripple {
	z-index: 99999;
	position: fixed;
	left: 1rem;
	bottom: 1.5rem;
	background: #ec8b00;
	width: 4rem;
	height: 4rem;
	padding: 1rem;
	border-radius: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #ffffff;
	-webkit-animation: cc-calto-action-ripple 0.6s linear infinite;
	animation: cc-calto-action-ripple 0.6s linear infinite;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-items: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	text-decoration: none; }
	.call-buton .cc-calto-action-ripple i {
	  -webkit-transition: 0.3s ease;
	  transition: 0.3s ease;
	  font-size: 2.2rem; }
	.call-buton .cc-calto-action-ripple:hover i {
	  -webkit-transform: rotate(135deg);
	  transform: rotate(135deg); }
  
  @-webkit-keyframes cc-calto-action-ripple {
	0% {
	  -webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2);
	  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2); }
	100% {
	  -webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0);
	  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0); } }
  
  @keyframes cc-calto-action-ripple {
	0% {
	  -webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2);
	  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2); }
	100% {
	  -webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0);
	  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0); } }

	span.num{
		position: absolute;
    color: #ec8b00;
    left: -30%;
    bottom: -50%;
	}

.mobile_nav{display: none; width: 20px; margin-top: 15px;}
.mobile_nav em{display: block; height: 3px; margin-bottom: 5px; background: #fff; }


.title h2{font-size: 40px; color: #FAF9F6; font-weight: 600;}
.title h5{text-transform: uppercase; color: #E30B5C;}

.whatsapp{position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; z-index: 1000;}
/*banner*/
.banner{position: relative; padding: 0;}
.bg1{height: 800px;}
.bg2{height: 800px; position: absolute; z-index: 10;}
.bannercontent{position: absolute; z-index: 20; width: 100%; top: 80px;}
.bannerslide{padding-top: 10rem;}
.bannerslide h6{font-weight: 400; margin-top: 2rem; line-height: 28px; color:#F9F6EE}
.bannerimages{position: relative; width: 100%; display: block; min-height: 600px;}
.bannerimg1, .bannerimg2, .bannerimg3, .bannerimg4{position: absolute;}
.bannerimg1{z-index: 10; left: 0; top: 35%;}
.bannerimg2{z-index: 12; top: 15px; left: 33%;}
.bannerimg3{z-index: 14; bottom: 0; left: 33%;}
.bannerimg4{z-index: 16; top: 35%; right: 0;}
.bannerappimg, .bannershapeimg{position: absolute;}
.bannershapeimg{z-index: 10; top: 30%; left: 250px; }
.bannerappimg{z-index: 12;}
.homecontactno span{line-height: 32px; float: left; font-size: 16px; font-weight: 500; color: #828384;  }
.homephoneno .dropdown .btn-trans{background: none; border: none; color: #585858;}
.homephoneno .dropdown .dropdown-menu{background: none; border: none; color: #585858;}
.homephoneno .dropdown .dropdown-item:hover{background: none;}
.homephoneno .btn-check:focus + .btn, .homephoneno .btn:focus{box-shadow: 0 0 0 .25rem rgba(255,255,255,.25);}
/*banner*/
/*navbar*/
.fixed-top {transition: all 0.9s ease;}
.small_menu.fixed-top {background: #ffffff; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.22);}
.small_menu .material-icons.menuicon{color: #ffffff;}
.navbar-brand{background: url(../images/logo.png) no-repeat; width: 150px; height: 50px; transition: all 0.5s ease; background-size: cover;}
.small_menu .navbar-brand{background: url(../images/logo.png) no-repeat; width: 150px; height: 50px; background-size: cover;}
.nav-link{color: #ffffff; transition: all 0.5s ease; font-size: 14px;}
.nav-link:hover, .small_menu .nav-link:hover{color: #E0115F; }
.small_menu .nav-link{color: #4e4e4e; transition: all 0.5s ease;}
.nav-footer{background: url(../images/logo.png) no-repeat; width: 150px; height: 50px; transition: all 0.5s ease; background-size: cover;}

/*.nav-link.getquote{background: #06b9e2; color: #ffffff; position: relative; border-radius: 5px; display: inline-block;}
.nav-link.getquote:before {border-radius: 50%; left: -3px; top: -26px;
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: inherit;
  z-index: -1;
  animation: ripple 1.5s ease-out infinite;
}
@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(2);
  }
}*/
.nav-link.getquote{background: #E30B5C; color: #ffffff; position: relative; border-radius: 5px; display: inline-block; animation: ripple 1.5s ease-out infinite;}
@keyframes ripple {
  10%   {
    -webkit-transform: scale(1.0);
  transform: scale(1.0);
  }
  50%  {
    -webkit-transform: scale(1.1);
  transform: scale(1.1);
  }
  100%   {
    -webkit-transform: scale(1.0);
  transform: scale(1.0);
  }
}
/*navbar*/
/*products*/
.card{background-color: #E30B5C;}
.productssection{margin-top: 50px;}
.productslide .card{box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.13); border: 0;background-color: #E30B5C;}
.productslide{padding: 15px;}
.productslide .card h5.card-title{color: #ffffff; font-weight: 600; font-size: 16px; margin-top: 0.4rem;}
.productslide .card .card-body{padding: 1.5rem 1rem;}
.productslide .card .card-body{height: 250px; transition: all 0.5s ease;  text-align: center;}
.productslide .card a:hover, .productslide .card a{ text-decoration: none;}
.productslide .card .card-body p{font-size: 14px; line-height: 1.5rem;}
.productslide .card .card-body p a, .productslide .card .card-body a p{color: #EDEADE;}
.productslide .card .card-body p a.readmore{color: #F9F6EE; font-size: 12px; font-weight: 500;}
.productslide .card .card-body p a.readmore:hover{color: #2dfbef;}
/*products*/
/*about*/
.aboutsection{padding-top: 5rem; padding-bottom: 10rem;}
.aboutsection .title{margin-top: 7rem;}
.aboutimg{position: absolute; left: -130px;}
/*about*/
/*products detail view*/
.mainproducts{padding-top: 5rem; padding-bottom: 5rem;}
/*products detail view*/
/*services*/
.services {padding-top: 5rem; padding-bottom: 5rem;}
.services .card{transition: all 0.9s ease; border: 0; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.13); margin-bottom: 1.5rem;}
.services .card a{text-decoration: none;}
.services .card h5.card-title{color: #000000; transition: all 0.5s ease; font-size: 16px;}
.services .card p{color: #4e4e4e; transition: all 0.5s ease;}
.services .card .serviceicon{width: 92px; height: 92px; border-radius: 3px; margin: 45px auto 30px;}
.services .card.carrot .serviceicon, .services .carrot.radialhover:before{background: #f77e51;}
.services .card.pumkin .serviceicon, .services .pumkin.radialhover:before{background: #fab153;}
.services .card.grass .serviceicon, .services .grass.radialhover:before{background: #99d468;}
.services .card.emerald .serviceicon, .services .emerald.radialhover:before{background: #42cb6f;}
.services .card.mint .serviceicon, .services .mint.radialhover:before{background: #47cec0;}
.services .card.pool .serviceicon, .services .pool.radialhover:before{background: #4ec2e7;}
.services .card .card-body{height: 350px; overflow: hidden;}
.services .card .card-body p span{font-weight: 600;}
.services .card .card-body p span:hover{text-decoration: underline; color: #f2f2f2;}
    /*hover*/

.radialhover {display: inline-block;  vertical-align: middle;  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);  box-shadow: 0 0 1px rgba(0, 0, 0, 0);  position: relative;  overflow: hidden;
  -webkit-transition-property: color;  transition-property: color;  -webkit-transition-duration: 0.3s;  transition-duration: 0.3s;}
.radialhover:before {  content: "";  position: absolute;  z-index: -1;  top: 0;  left: 0;  right: 0;  bottom: 0;  border-radius: 100%;  -webkit-transform: scale(0);  transform: scale(0);  -webkit-transition-property: transform;
  transition-property: transform;  -webkit-transition-duration: 0.3s;  transition-duration: 0.3s;  -webkit-transition-timing-function: ease-out;  transition-timing-function: ease-out;}
.radialhover:hover h5, .radialhover:focus h5, .radialhover:active h5, .radialhover:hover p, .radialhover:focus p, .radialhover:active p {  color: white!important;}
.radialhover:hover:before, .radialhover:focus:before, .radialhover:active:before {  -webkit-transform: scale(2);
  transform: scale(2);}
/*services*/
/*testimonials*/
.testimonials {padding-top: 5rem; padding-bottom: 5rem;}
.testimonials .card{transition: all 0.9s ease; border: 0; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.13); margin-bottom: 1.5rem;}
.testimonials .testicon{width: 55px; height: 55px; border-radius: 50%; border:3px solid #787879; margin: 20px auto 10px; overflow: hidden;}
.testimonials h5.card-title{font-size: 16px;}
.testimonials h6.card-subtitle{font-size: 14px; font-weight: 500;}
.testimonials  p.card-text{font-size: 13px; line-height: 24px; margin-bottom: 1rem; margin-top: 1rem;}
.testimonials  p.card-text a{color: #ababab; font-size: 12px; font-weight: 600; text-decoration: none;}
.testimonials  p.card-text a:hover{color: #393939;}
.testindrow{margin-top: 9rem;}
/*testimonials*/
/*responsive*/
.respo{padding-top: 4rem; padding-bottom: 4rem;}
/*responsive*/
/*partner with us*/
.partnerarea{padding-top: 4rem; padding-bottom: 4rem;}
.partnerimg{background: url(../images/partnerwithus.png) no-repeat;}
.partnerdiv{transition: all 0.9s ease; border: 0; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.13); margin-bottom: 1.5rem; background: #ffffff; padding: 5rem 2rem; border-radius: 0.5rem;}
.partnerdiv p{font-size: 13px; line-height: 1.5rem;}
.partnericon{width: 50px; height: 50px; border-radius: 50%; text-align: center; color: #ffffff; background: #39d479; margin: 0 auto; font-size: 20px; padding-top: 5px; margin-bottom: 1rem;}
/*partner with us*/
/*blog*/
.blog{padding-top: 4rem; padding-bottom: 4rem;}
.blog .carousel-item{padding: 15px 10px;}
.blogcontent{display: block; background: rgba(255,255,255,1); border-radius: 25px; width: 100%; overflow: hidden; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.13); margin: 15px 15px;}
.blogimg{padding: 0; border-top-left-radius: 25px; border-bottom-left-radius: 25px; overflow: hidden;}
.blogcontent .blogtxt{padding: 2rem 4rem;}
.blogcontent p{line-height: 24px; margin: 1rem 0; font-size: 13px;}
.blogcontent p a{margin-top: 20px;}
.blog .carousel-item{height: 25rem;}
.carousel-control-next, .carousel-control-prev {    color: #0495ca !important;    font-size: 40px;}
.carousel-control-prev {left: -95px;}
.carousel-control-next {right: -95px;}

/*blog*/
/*careers*/
.careers{padding-top: 4rem; padding-bottom: 4rem;}
.careerslide{margin: 0 15px;}
.careerslide .card .card-body h5.card-title{font-size: 1rem;}
.careerslide .card .card-body h6.card-subtitle{font-size: 0.8rem; font-weight: 400; color: #636363!important;}
.careerslide .card .card-body p{font-size: 0.7rem; color: #999897!important; line-height: 1rem;}
.careerslide .card .card-body p img{display: inline;}
.careerslide .btn-group-sm > .btn, .btn-sm{font-size: .675rem;}
.careericon{width: 60px; margin: 0 auto;}
.careers .slick-dots li{display: none!important;}
/*careers*/
/*footer*/
footer{background: #ebebf3 url(../images/footer.png) no-repeat bottom left; background-size: cover; padding-top: 5rem; padding-bottom: 4rem;color: #ffffff; }
footer .ftrcontact {line-height: 25px;}
footer .ftrcontact a{color: #ffffff; text-decoration: none;}
footer .ftrcontact a:hover{color: #000000;}
.sm a{display: inline-block; font-size: 20px; padding: 0 10px;color: #ffffff; }
.sm a.fb{color: #325bb0;}
.sm a.tw{color: #29c5f6;}
.sm a.insta{color: #ff6d00;}
.sm a.linkedin{color: #0e76A8;}
footer h6 a{color: #ffffff; text-decoration: none;}
footer ul{margin: 0; padding: 0}
footer ul li{margin: 0; padding: 12px 0; list-style: none;}
footer ul li a{color: #ffffff; text-decoration: none; padding: 5px 0; font-size: 13px;}
.copyright a{color: #ffffff; text-decoration: none; font-size: 12px;}
.copyright a:hover{color: #000000;}

/*inner pages*/
.innerbanner{background: #E30B5C; height: 275px; color: #e5e6f0; padding-top: 120px; position: relative; overflow: hidden;}
.innerbanner h2{font-weight: 700; font-size: 2.25rem; color: #f6f6f7;}
.innerbanner a{text-decoration: none; color: #f2f2f2;}
.innerbanner .innerbg1{position: absolute; width: 100%; bottom: -207px; left: 0; background: url(../images/innerbg1.png) no-repeat left center; height: 600px; background-size: cover;}
.innerbanner .innerbg2{position: absolute; width: 100%; bottom: -255px; left: 0; background: url(../images/innerbg2.png) no-repeat left center; height: 600px; z-index: 20; background-size: cover;}
.innertitle{position: relative; z-index: 100;}
/*banner*/
content ul li{list-style: none; position: relative; padding: 0.5rem 0; font-weight: 300;}
content ul li:before{position: absolute; content: ">>"; vertical-align: middle; display: inline-block; margin: 0 0 0 -30px; letter-spacing: -0.1rem; color: #1f42c8; }
/*content*/
.products{padding-top: 5rem;}
.product-layout{background: #28282B; position: relative; margin: 295px 0 0; padding: 5rem 0 8rem;}
.product-layout .layoutbg1{position: absolute; width: 100%; height:295px; background: url(../images/layoutbg1.png) no-repeat; top: -290px; background-size: cover; background: #28282B;}
.schoolbus, .temparaturemonitoring, .maintenancemanagement{padding-top: 8rem; padding-bottom: 8rem; background: #28282B;}
.fuelmonitoring, .deliverysystem{padding-top: 8rem; padding-bottom: 8rem; background: #28282B;}
/*services*/
.service-layout{background: #edeef8; position: relative; margin: 295px 0 0; padding: 5rem 0 18rem;}
.service-layout .layoutbg1{position: absolute; width: 100%; height:295px; background: url(../images/layoutbg1.png) no-repeat; top: -290px; background-size: cover; }
.grey-layout{background: #28282B; position: relative; margin: 295px 0 0; padding: 5rem 0 8rem;}
.grey-layout .layoutbg1{position: absolute; width: 100%; height:295px; background: url(../images/layoutbg1.png) no-repeat; top: -290px; background-size: cover; }
.white-layout{background: #ffffff; position: relative; margin: 50px 0 0; padding: 5rem 0 8rem;}
.white-layout .layoutbg1{position: absolute; width: 100%; height:320px; background: url(../images/whitebg.png) no-repeat; top: -320px; background-size: cover; }
.servicegrid .card .card-body{height: 260px;}
.servicegrid .card .card-body p{line-height: 1.5rem;}
.servicemain .card{transition: all 0.9s ease; border: 0; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.13); margin-bottom: 1.5rem;}
.servicemain {padding-top: 5rem; padding-bottom: 5rem;}
.servicemain .card a{text-decoration: none;}
.servicemain .card h5.card-title{color: #000000; transition: all 0.5s ease; font-size: 16px;}
.servicemain .card p{color: #4e4e4e; transition: all 0.5s ease;}
.servicemain .card .serviceicon{width: 92px; height: 92px; border-radius: 3px; margin: 45px auto 30px;}
.servicemain .card.carrot .serviceicon, .servicemain .carrot.radialhover:before{background: #f77e51;}
.servicemain .card.pumkin .serviceicon, .servicemain .pumkin.radialhover:before{background: #fab153;}
.servicemain .card.grass .serviceicon, .servicemain .grass.radialhover:before{background: #99d468;}
.servicemain .card.emerald .serviceicon, .servicemain .emerald.radialhover:before{background: #42cb6f;}
.servicemain .card.mint .serviceicon, .servicemain .mint.radialhover:before{background: #47cec0;}
.servicemain .card.pool .serviceicon, .servicemain .pool.radialhover:before{background: #4ec2e7;}
.servicemain .card .card-body{height: 450px; overflow: hidden;}
.servicemain .card .card-body p span{font-weight: 600;}
.servicemain .card .card-body p span:hover{text-decoration: underline; color: #f2f2f2;}
/*about*/
.about{padding-top: 6rem;}
.vision, .mission{transition: all 0.9s ease; border: 0; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.13); margin-bottom: 1.5rem;}
.vision .card-body, .mission .card-body{padding: 1rem 2rem 1rem 10rem;}
.vision{background: #ffffff url(../images/vision.png) no-repeat -16px center;}
.mission{background: #ffffff url(../images/mission.png) no-repeat -16px center;}
ul.abtsrvicelist{margin: 30px 0; padding: 0;}
ul.abtsrvicelist li{padding: 1rem 0; margin: 0; list-style: none; border-bottom: 1px dotted #4e4e4e; width: 49%; display: inline-block;}
ul.abtsrvicelist li a{color: #4e4e4e; text-decoration: none;}
.vision p, .mission p {line-height: 1.5rem;}
/*contact*/
.contactdetails .bi{font-size: 40px; color: #0ab1de; line-height: 0;}
.contactdetails h5{font-size: 18px; font-weight: 600;}
.contactdetails h6{color: #0ab1de; font-size: 16px; text-transform: uppercase;}
.contactdetails p{font-size: 14px;}
.contactdetails p a{color: #4e4e4e; text-decoration: none;}
.contactdetails p a:hover{color: #3546e8;}
.contactaddress{background:#28282B; padding-top: 3rem; padding-bottom: 2rem; margin-top: 5rem;}
.contactaddress p{font-size: 13px}
.contactaddress .bi{font-size: 100px; line-height: 0; color: #0ab1de; padding-right: 4rem}
.contactform{background: #28282B; padding-top: 5rem; padding-bottom: 5rem;}
.maparea{padding-top: 3rem; padding-bottom: 3rem;}
.map{width: 100%; overflow: hidden; height: 350px; border: 1px solid #dddddd; border-radius: 1rem;}
/*careers*/
.accordiontitle{display:grid}
.accordion-item{box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.12); border: 0; margin: 15px 0;}
.accordion-item:first-of-type{border-top-left-radius: 0rem; border-top-right-radius: 0rem;}
.accordion-item:last-of-type {border-bottom-right-radius: 0rem; border-bottom-left-radius: 0rem;}
.accordion-button:not(.collapsed){background-color: #ffffff; box-shadow: none; color: inherit;}
.modal.right .modal-dialog {position: fixed; margin: auto; width: 550px; height: 100%;
		-webkit-transform: translate3d(0%, 0, 0);
		    -ms-transform: translate3d(0%, 0, 0);
		     -o-transform: translate3d(0%, 0, 0);
		        transform: translate3d(0%, 0, 0);
	}
.modal.right .modal-content { height: 100%; overflow-y: auto; }
.modal.right .modal-body { padding: 15px 15px 40px; }        
/*Right*/
.modal.right.fade .modal-dialog {
		right: -650px;
		-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
		        transition: opacity 0.3s linear, right 0.3s ease-out;
	}
.modal.right.fade.show .modal-dialog {		right: 0;	}
.modal-header, .modal-content{border-radius: 0;}

/*products pages*/
.productbanner{background: #E30B5C url(../images/productbanner.png) no-repeat bottom center; height: 450px; color: #e5e6f0; padding-top: 80px; position: relative; }
.productbanner h2{font-weight: 700; font-size: 2.25rem; color: #f6f6f7;}
.productbanner a{text-decoration: none; color: #f2f2f2;}
.productbanner .innerbg1{position: absolute; width: 100%; bottom: -157px; left: 0; background: url(../images/innerbg1.png) no-repeat left center; height: 600px; background-size: cover;}
.productbanner .innerbg2{position: absolute; width: 100%; bottom: -135px; left: 0; background: url(../images/innerbg2.png) no-repeat left center; height: 600px; z-index: 20; background-size: cover;}
.productbanner .innertitle{position: relative; z-index: 100; padding-top: 5rem;}
.productbanner .productpageimg{position: absolute; z-index: 100;}
.productdetailpage{padding-top: 7rem;}
.productgrid{padding-bottom: 4rem!important;}
.productgrid .card .card-body{min-height: 185px;}
.morefeatures{padding-top: 5rem; padding-bottom: 3rem;}

/*portfolio*/
.portfolio{padding-top: 5rem; padding-bottom: 5rem;}
/* Main CSS */
.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.grid-wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	grid-auto-rows: 300px;
	grid-auto-flow: dense;
}
.grid-wrapper .wide {
	grid-column: span 2;
}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}


.portfolio img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}

.foliodetails{/*display: block; overflow: hidden; */cursor: pointer;}
.foliodetails img {
	-webkit-filter: grayscale(0) blur(0);
	filter: grayscale(0) blur(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.foliodetails:hover img {
	-webkit-filter: grayscale(10%) blur(3px);
	filter: grayscale(10%) blur(3px);
}
.foliodetails{position: relative;}
.foliodetails:hover .foliodecp{opacity: 1; -webkit-filter: blur(0); 	filter: blur(0); top:50%;}
.foliodetails .foliodecp{display: block; position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); z-index: 99; text-align: center; box-sizing: border-box; padding-top: 30px; color: #ffffff; transition: all 0.5s ease; padding: 15px; width: 90%; background: rgba(243,240,240,0.5);
opacity:0; -webkit-filter: blur(3px); 	filter: blur(3px);
}
.foliodetails .foliodecp h5{color: #000000; font-size: 1rem; font-weight: 600;}
.foliodetails .foliodecp p{color: #000000; line-height: 20px; text-align: center; font-size: 14px;}
.foliodetails .foliodecp a{color: #000000; text-decoration: none; font-weight: 500; font-size: 13px;}
.foliobig .modal-header, .foliobig .modal-content{border-radius: 6px; overflow: hidden;}
/*portfolio*/
.privacy{padding-top: 4rem; padding-bottom: 4rem;}
/*blog*/
ul.blogul{margin: 4rem 0 2rem; padding: 0;}
ul.blogul li{margin: 0; padding: 0; display: inline-block; width: 49%; padding: 8px 0px; margin-bottom: 5px; border-bottom: 1px dotted #323232; box-sizing: border-box;}






@media only screen and (max-width: 768px) {
.navbar-brand{background: url(../images/logo.png) no-repeat; width: 100px; height: 33px; transition: all 0.5s ease; background-size: cover;}

.nav-footer{background: url(../images/logo.png) no-repeat; width: 100px; height: 33px; transition: all 0.5s ease; background-size: cover;}


.navbar.navbar-expand-sm{background: #ffffff; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.22);}
.navbar-toggler:focus{box-shadow: none;}
.navbar-toggler{padding: 0; font-size: 1.5rem;}
.navbar-toggler-icon, .navbar-toggler-icon .bi{color: #000000;}
.nav-link{color: #4e4e4e;}
.bannercontent{top: 70px;}
.bannerslide{padding-top: 2rem;}
h1{font-size: 1.875rem;}
.bg2, .bg1{height: 750px;}
.title h2, h2{font-size: 1.625rem;}
.productslide .card .card-body{margin-bottom: -160px;}
.aboutsection .title{margin-top: 3rem;}
.aboutsection{padding-bottom: 1rem; padding-top: 3rem;}
.mainproducts{padding-top: 0.5rem; padding-bottom: 3rem;}
.testindrow{margin-top: 0;}
.blogcontent .blogtxt{padding: 1rem 2rem;}
.services, .servicemain{padding-top: 2rem; padding-bottom: 0.5rem;}
.testimonials{padding-top: 0.5rem; padding-bottom: 2rem;}
.blog{padding-top: 2rem;}
.about{padding-top: 3rem;}
.vision .card-body, .mission .card-body{padding:12rem 1.5rem 1rem 1.5rem;}
.vision, .mission{background-position: center 20px; }
ul.abtsrvicelist li{width: 100%;}
.abtservice .container, .product-layout .container, .productgrid .container{padding-left: 1.5rem; padding-right: 1.5rem;}
.schoolbus, .temparaturemonitoring, .maintenancemanagement{padding-top: 5rem; padding-bottom: 5rem;}
.fuelmonitoring, .deliverysystem{padding-top: 5rem; padding-bottom: 5rem;}
.product-layout{padding-bottom: 5rem; padding-top: 2rem;}
.blogmainpage .blogcontent{margin: 0 0 15px;}
.productpageimg img{width: 100%;}
.products{padding-top: 0;}
.productssection{margin-top: 230px;}
.product-layout .layoutbg1{display: none;}
.product-layout{margin: 0px 0 0}
.grey-layout{margin: 25px 0 0; padding: 5rem 0 8rem;}
.grey-layout .layoutbg1{position: absolute; width: 100%; height:5px; background: none;}
.service-layout{ margin: 25px 0 0; padding: 5rem 0 18rem;}
.service-layout .layoutbg1{position: absolute; width: 100%; height:5px; background: none; top: -290px; }
.grid-wrapper{display: inherit!important;}
.foliodetails{margin-bottom: 1rem;}

.animated {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}

}

.freedemo{background: #E30B5C; color: #ffffff; position: relative; border-radius: 5px; display: inline-block; animation: ripple2 1.5s ease-out infinite;}
@keyframes ripple2 {
  10%   {
    -webkit-transform: scale(1.0);
  transform: scale(1.0);
  }
  50%  {
    -webkit-transform: scale(1.1);
  transform: scale(1.1);
  }
  100%   {
    -webkit-transform: scale(1.0);
  transform: scale(1.0);
  }
}
.dropdown-menu, .dropdown-item{font-size: 0.8rem;}
.modal-650{width: 650px!important;}
#certificate .modal-content{background: transparent!important; border: none;}

@media only screen and (max-width: 600px) {
.clientslider{width: 99%!important;}    
.blogslider{width: 99%!important;}
.bannerslider{width: 95%; padding: 0 15px;}
.productslider{width: 99%!important;}
.productslide{padding: 0 5px;}
.productslide .card .card-body{margin-bottom: -160px;}
.productslide .card:hover .card-body {top: inherit; text-decoration: none;}
.productslide .card{height: 460px;}
.mpmobile{padding-bottom: 0rem!important}
.blogimg{border-bottom-left-radius:0;}
.productpageimg{display: none;}
.modal-650{width: 95%!important;}

}