@charset "utf-8";
/* CSS Document */

html, body{margin: 0px; padding: 0px; scroll-behavior:smooth;}
*{box-sizing: border-box; text-decoration: none!important;}

.logo{width: 100%; max-width: 560px; display: block; float: left;}
.iso-box{display: block; float: right;}

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #afd2fe; font-weight: bold; margin-top: -2px;
}

p{ font-size: 15pt; line-height: 24pt;}
h4, h5{line-height: 1.4em;}
.rule{border-bottom: 1px solid #91befb;}
.points li{ list-style-image:url("../images/bullet.png"); font-size: 15pt; line-height: 24pt; margin-bottom: 20px;}

.navbar-dark .navbar-nav .nav-link {color: rgba(255, 255, 255, 1.0);}
.nav-item{color: #ffffff; opacity: 1; transition: all 0.4s ease-in;}
.nav-item:hover{margin-top: -3px; transition: all 0.4s ease-out;}

.carousel{z-index: 10; scroll-behavior: smooth; position: relative}
.carousel-item {
  transition: -webkit-opacity 1.4s ease; transition: opacity 1.4s ease;
	transition: opacity 1.4s ease, -webkit-opacity 1.4s ease; pointer-events: none;}


.page-header{padding: 20px 0px 40px 0px; color: #027de4;}
#about{padding: 0px; position: relative;}
.about-img{width: 400px; height: 400px; border-radius: 50%; border: 4px solid #91befb; overflow: hidden; display: inline-block; z-index: 900; float: left; position: relative; pointer-events: none;}

.about-box{width: 1000px; height:auto; border: 6px solid #ffffff; outline: 2px solid #91befb; border-radius: 20px;  display: inline-block; z-index: -1; margin-top: -341px; float: right; position: relative; padding: 30px; padding-left:280px; background-image: linear-gradient(#ffffff, #c6defd);}

@media(max-width: 1144px){.about-img{display: block; float: none; margin: auto; margin-top: -80px; margin-bottom: -20px;}
	.about-box{width: 92%; height: 400px; float: none; display: block; position: relative; margin: auto; padding: 20px; padding-top: 50px;}}

@media(max-width: 440px){.about-img{width: 300px; height: 300px; display: block; float: none; margin: auto; margin-top: -80px; margin-bottom: -20px;}
	.about-box{width: 300px; height: 630px; float: none; display: block; position: relative; margin: auto; padding: 20px; padding-top: 50px;}}

.u-btn{padding: 10px; padding-left: 20px; padding-right: 20px; color: #ffffff; font-weight: normal;background-color: #0275d8; border: 2px solid #91befb; border-radius: 8px; position: absolute; right: 40px; bottom: -30px; transition: all 0.6s; z-index: 999;}
.u-btn:hover{padding: 12px; padding-left: 20px; padding-right: 20px;  color: #174f9b !important; background-color: #ffffff !important; font-weight: bold;transition: all 0.6s; z-index: 9999;}

#sustainibilty{padding: 20px; border: 6px solid #ffffff; outline: 2px solid #5aa343; border-radius: 20px; background-image: linear-gradient(#ffffff 70%, #dcfca5); position: relative;}
.green{background-image: url("../images/green-bg.jpg");  background-repeat: no-repeat;  background-attachment: fixed;}

#certification{padding: 30px; border: 6px solid #ffffff; outline: 2px solid #91befb; border-radius: 20px; background-image: linear-gradient(#ffffff 70%, #c6defd); position: relative; padding-top: 80px;}
.icon-certi{position: absolute; top: -58px; left: 40px; display: block;}
.certi-box{ display: flex; justify-content: center; flex-wrap: wrap;  padding: 0px; width: 100%; position: relative;}
.certi{position: relative; margin: 2px;}

.header-img{position: relative;}
.header-img::after{content: ""; position: absolute; height: 6px; width: 50%; bottom: -10px; right: 0px; background-color: #91befb;}

.categories, .certificates, .others{display: flex; justify-content:space-evenly; flex-wrap: wrap; padding: 0px;}
.category{width: 31%; border: 1px solid #91befb; padding: 10px; text-align: center; margin-bottom: 40px; background-image: linear-gradient(#ffffff 70%, #ededed); cursor:pointer;}
.certificate{width: 48%; border: 1px solid #91befb; padding: 10px; text-align: center; margin-bottom: 40px; background-image: linear-gradient(#ffffff 70%, #ededed);}
.certificate_gr{border: 1px solid #adfe23; padding: 10px; text-align: center; margin-bottom: 40px; background-image: linear-gradient(#ffffff, #dcfca5);}
.other{width: 31%; display: block; float: left; margin-right: 20px;}


@media  (max-width: 992px){.category, .certificate, .certi-box{width: 48%;}}
@media  (max-width: 440px){.category, .certificate, #certification{width: 96%;}}
@media (max-width: 1040px){.other{width: 48%;}}
@media (max-width: 440px){.other{width: 96%;}}

.img-iso{pointer-events: none;}

.product-sub{width: 14%;}
@media (max-width: 992px){.product-sub{width: 23%;}}
@media (max-width: 440px){.product-sub{width: 46%;}}

td{font-weight:normal;}

#map-box{ width:100%; height:500px; margin-left:auto; margin-right:auto; margin-top: 0px;}
@media(max-width: 992px){#map-box{height: 350px;}}
@media(max-width: 440px){#map-box{height: 250px;}}
#map-box-kolkata, #map-box-bandra{width: 100%; height: 100%;}
#gmap_canvas, #gmap_canvas1{width:100%; height:500px; margin-left:auto; margin-right:auto; margin-bottom:30px;}
@media(max-width: 992px){#gmap_canvas, #gmap_canvas1{height:350px;}}
@media(max-width: 440px){#gmap_canvas, #gmap_canvas1{height:250px;}}
#map-box-bandra::before{
	content: ''; margin-top: 40px; width: 100%; height: 10px; background-color: #999;
}
#page-main a{color:#e2001a;} #page-main a:hover{color:#000;}

.form-box{border: 1px solid #91befb; padding: 10px; margin-bottom: 40px; background-image: linear-gradient(#ffffff 80%, #c6defd);}
.btn-form{padding: 10px; padding-left: 20px; padding-right: 20px; color: #ffffff; font-weight: normal;background-color: #0275d8; border: 2px solid #91befb; border-radius: 8px; transition: all 0.6s; z-index: 999;}
.btn-form:hover{padding: 12px; padding-left: 20px; padding-right: 20px;  color: #174f9b !important; background-color: #ffffff !important; font-weight: bold;transition: all 0.6s; z-index: 9999;}

.simplefilter{display: flex; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0px; padding: 0px;}

.simplefilter button{width: 90%; max-width: 200px; text-align: center; border-radius: 10px; border:#91befb solid 1px; margin:10px; transition: all 0.6s; }
.simplefilter button:hover{background-image: linear-gradient(#ffffff 80%, #c6defd); transition: all 0.6s; }
.btn{background-image: linear-gradient(#ffffff, #cddeff);}
#filtr-item{width:216px; height: 216px; border:#ccc solid 1px; display:inline-block; float:left; margin-right:10px; margin-top:28px; margin-bottom:60px;}

.all-filt{z-index: 2600;}

.all-button, .motorcycle-button, .passenger-button, .diesel-button, .tractor-button, .gear-button, .hydro-button, .transmission-button, .gear-button, .coolant-button, .grease-button, .compressor-button, .turbine-button, .waylube-button, .cng-button, .shock-button, .auto-button, .ind-button, .other-button, .pump-button{font-size:18px; color:#444; width: 100%; height: 100%;}

.filt-active{color: #174f9b !important; font-weight: bold;transition: all 0.6s; pointer-events: none; background-image: linear-gradient(#88bbfd, #ffffff);}

.item-desc{ width:216px; height:46px; position:relative; z-index:600; display:block; float:left; bottom:-10px; margin-left:0px; }
.item-desc h3{font-size:14px; line-height: 20px;  color:#222; font-weight:normal; position:absolute; z-index:600; display:block; float:left; margin-right: 20px;
	background:none; border:none; margin-top:0px;}
.item-desc h3:hover{color: #6B0507;}

.category img{transform: scale(100%); transition: all 0.8s;}
.category img:hover{transform: scale(120%); transition: all 0.8s;}

.photo-th{width: 240px; height: 240px; margin-bottom: 40px; cursor: pointer;}

.modal02 {display: none; position: fixed; z-index: 1; padding-top: 60px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8);}

.modal-content { position: relative; margin: auto;  padding: 0;  width: 90%;  max-width: 1200px;}

/* The Close Button */
.close {  color: white;  position: absolute;  top: 10px;  right: 25px;  font-size: 35px;  font-weight: bold;}

.close:hover,.close:focus { color: #999;  text-decoration: none;  cursor: pointer;}

/* Hide the slides by default */
.mySlides { display: none;}

/* Next & previous buttons */
.prev,.next { cursor: pointer;  position: absolute; top: 50%; width: auto;  padding: 16px;  margin-top: -50px;  color: white;  font-weight: bold;  font-size: 32px;  transition: 0.6s ease;  border-radius: 0 3px 3px 0;  user-select: none;  -webkit-user-select: none;}

.modal-dialog{overflow-y: initial !important;}
.modal{height: 85vh; overflow-y:scroll;}
.next {  right: 0;  border-radius: 3px 0 0 3px;}
.modal-header{border: none;}

.footer-text{font-size: 12pt;}