@charset "utf-8";

html, body{ 
	margin: 0px; padding: 0px; font-family: 'Raleway', ; box-sizing: border-box; width: 100vw; overflow:hidden; box-sizing: border-box;
}
a, a:hover{text-decoration: none;}
img, object, embed, video {
	max-width: 100%;
}

.custom-toggler{ width: 30px; height: 20px; border-radius: 0px!important;} 

h1{width: 100%; font-size: 46px; font-weight: lighter; color: #2e3092; position: relative; margin-bottom: 80px;}
h1::before{content: ""; position: absolute; width: 20px; height: 15px; border-radius: 8px 0px 0px 8px; top: 100%; left: 50%; transform: translateX(-50%); 
	background-color: #00aef0; margin: 15px 0px 50px 0px;}
h1::after{content: ""; position: absolute; width: 20px; height: 15px; border-radius: 0px 8px 8px 0px; top: 100%; left: 50%; transform: translateX(50%); 
	background-color: #2e3092; margin: 15px 0px 50px 0px;}

.pg-heading{font-size: 36px; color: #00a651; margin-bottom: 40px; text-align: center;}
h4{ font-size: 16px; text-align: right; position: relative; margin: 30px; }
.iso{position: relative; margin-bottom: 10px; margin-top: 10px;}
h6, p{font-size: 18px; text-align: left; line-height: 26px; margin-bottom: 10px; color: #000;}
.p-caption{ color: #2e3092!important; font-weight: 600; letter-spacing: 1px;}

/* IE 6 does not support max-width so default to width 100% */
.search-box{}
.main-menu{text-transform: uppercase; font-weight: 600; margin-right: 10px; list-style-type: none; list-style:none; 
	padding-right:20px; transform:translateY(64%); transition: all 0.2s;}

.main-menu a{color:#2e3092; transition: all 0.2s;}
.main-menu a:hover{color: #b81c8d; margin-top: -6px; border-bottom: 1px solid #00aeef; transition: all 0.2s;}
.navbar-toggler{ background-image: url("../images/nav-icon.svg"); background-size: contain; border-radius: 0px!important; }

.navbar{border-bottom:#ccc solid 1px; }
.active{color: #b81c8d!important; pointer-events: none;}

.home-bottom{background-image: linear-gradient(rgba(0,173,240,0.2), rgba(0,173,240,0.8));}
.home-bottom-left, .home-bottom-cent, .home-bottom-right{ margin: 50px 0px 50px 0px;
	border: 1px solid #fff; height:250px; border-radius: 20px; background-image: linear-gradient(rgba(0,166, 80,0.7),rgba(0,166, 80,0.2)); 
	overflow: hidden; position: relative;}
.home-bottom-cent{background-image: linear-gradient(rgba(0,173, 240,0.7),rgba(0,173, 240,0.2));}
.home-bottom-right{background-image: linear-gradient(rgba(46,48, 146,0.7),rgba(46,48, 146,0.2));}


.home-bottom-cent-img{position: absolute; top: 36px; right: 7%;}
.home-bottom-left-img{position: absolute; top: 0px; right: -34%; width: 100%;}
.home-bottom-right-img{position: absolute; top: -53%; right: -61%;}
.home-bottom-text{position: absolute;}
.home-bottom-cta{
	width: 35%; position: absolute; left: 6%; font-size: 18px; text-align: center; bottom: 0%; padding: 10px 0px; color: #fff; background-image: linear-gradient(rgba(184,29, 142, 0.8),rgba(184,29, 142,0.3)); border: 1px solid #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; transition: all 0.4s;}
.home-bottom-cta:hover{background-color: #b81c8d; transition: all 0.4s;}
.home-bottom-cta a{color:  #fff; }

.shadow{position: relative; margin-top: 24px;}
.shadow::before{ content: "";
	position: absolute; left: -2%; top: -4%; width: 40%; height: 40%; background-color: #2e3092; z-index: -1;}
.shadow::after{ content: "";
	position: absolute; left: 62%; top: 64%; width: 40%; height: 40%; background-color: #00aef0; z-index: -1;
}


.products{width: 100vw; background-image: linear-gradient(180deg, #2e3092 50%, #00aeef 0%);}
.gallery{width: 90vw; max-width: 960px; background-color: #fff; background-image: radial-gradient( circle,  #fff 24%, rgba(184,28,141,0.5), #fff 60%); border-bottom: 4px solid #b81c8d; border-top: 4px solid #b81c8d;	display: flex; align-content:space-around; flex-wrap: wrap; margin-left: auto; margin-right: auto;}

.card{ width: 200px!important; height: 200px; text-align: center; padding-top: 20px; 
	background-color: #fff; border: 1px dotted #2e3092; border-radius: 20px; margin: 12px; 
	display: block; overflow: hidden; cursor: pointer; transition: all 0.4s;}
.card:hover{transform: translateY(-10px); background-color: #00aef0; box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.5); transition: all 0.4s;}
.cardname{font-size: 18px; font-weight: 400; color: #58595b; text-align: center;}
.card:hover .cardname{color: #fff;}
.card img{mix-blend-mode: multiply;}

.light-bl-grdnt{background-image: radial-gradient(circle, #00aef0, #fff 60%);}
#details{width: 220px; display: block; float: left; margin: 10px;}
.productname{font-size: 18px; text-align: center; color: #b81c8d; text-transform: uppercase; font-weight: 600; margin-bottom: 10px;}
#details p{margin: 0px; font-size: 16px;}
.search-result{background-color: rgba(255,255,255,0.8); border: 1px #ffffff solid; padding: 20px;}
.result-bg{ background:linear-gradient(#fff, #00a651); min-height: 75vh;}

input, .form-control{border-radius: 0px!important;}
.input-group-btn{margin-left: -10px;}

.submit, .reset{width: 100px; height: 40px; background: none; border: 1px solid #00aeef; font-size: 18px; font-weight: 400; text-align: center; 
	letter-spacing: 1px; color: #00aeef; margin-bottom: 34px; float: right; transition: all 0.4s;}
.submit:hover{background-color: #00aeef; color: #fff; transition: all 0.4s;}
.reset{background: none; border: none;}

.modal{ width: 100%; margin:auto; }
.modal-lg { max-width: 40% !important; border: 1px dotted #00aeef; border-radius:20px!important;}
.modal-footer, .modal-header{border: none!important;}
.modal-backdrop{background-color: #2e3092!important;}
#details{width: 220px; display: block; float: left; margin: 10px;}
.productname{font-size: 18px; color: #b81c8d; text-transform: uppercase; font-weight: 600; margin-bottom: 0px;}
#details p{margin: 0px; font-size: 16px;}
.close{width:40px; height:40px; color:#cc0404;}
.btn-default{ color:#cc0404; border: none;}
.btn-default:hover{ color:#2e3092; border: none; background: none;}
.modal-footer{height: 30px;}
.modal-box{height:700px; padding-right:20px; overflow-y:scroll;}

#career{height: 800px; background-image: url("../images/career-bg.jpg"); background-attachment: fixed; background-position: center; padding-top: 40px;}
#form-box,#form-box02{width: 96%; max-width: 960px; height: 600px; background-color: rgba(255,255,255, 0.8); margin: auto; padding: 40px; border: 1px dotted #00aeef; border-radius: 20px; position: relative;}
#form-box02{height: 470px;}
input{height:32px; display:block; width:47.7%; padding:8px; position: relative; float: left; margin-right: 40px;}
.btn{height: 38px!important; width: 38px; padding: 8px;}
.inputright{margin-right: 0px;}
.inputful{width: 100%;}
.submit, .reset{width: 100px; height: 40px; background: none; border: 1px solid #00aeef; font-size: 18px; font-weight: 400; text-align: center; 
	letter-spacing: 1px; color: #00aeef; transition: all 0.4s;}
.submit:hover{background-color: #00aeef; color: #fff; transition: all 0.4s;}
.reset{background: none; border: none;}
hr{ border-top: 1px dotted #00aeef; position: relative; top: 22px; margin-bottom: 22px; bottom: 22px; clear: both;}
.clearfix::after {
  content: "";
  clear: b form-box02oth;
  display: block;
}

#contact{height:840px; background-image: linear-gradient(165deg, #00aef0 45%, #008cd2 0%);}
#map-box{ width:100%; max-width: 970px; height:300px; margin-left:auto; margin-right:auto; margin-top: 0px;}
#gmap_canvas{width:100%; max-width: 970px; border: 1px dotted #00aeef; height:300px; margin-left:auto; margin-right:auto; position: relative; margin-bottom: 20px!important;}

footer{background-color: #2e3092;}


@media only screen and (max-width:1024px)(min-width:800px){
	.main-menu{margin-right: 2px;}
	.main-menu a{font-size: 14px; text-align: center;}
	.search{width: 20%!important;}
}

@media only screen and (max-width: 800px){
	h1{font-size: 30px;}
	.main-menu{border-bottom: 1px solid #00aeef;}
	.home-bottom{padding: 20px;}
	.home-bottom-left, .home-bottom-cent, .home-bottom-right{ margin: 20px 0px; 20px 0px}
	#career{height: 960px;} #form-box{height: 760px;} input{width: 100%;}
	#contact{height:980px;} #form-box02{height: 640px;}
	.modal-lg { max-width: 80% !important; }
	.iso{margin-top: 40px;}
}

@media only screen and (max-width: 400px){
	.home-bottom{padding: 20px;}
	.home-bottom-left, .home-bottom-cent, .home-bottom-right{ margin: 20px 0px; 20px 0px}
	.card{float: none; margin-left: auto; margin-right: auto;}
	#contact{height:1020px;} #form-box02{height: 660px;}
	.search-box{width: 82%;}
}