@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
html, body {
    height: 100%; font-family: "Inter", sans-serif; font-size: 16px;  line-height: 30px; font-weight: 400; color:#666; /*scroll-padding-top: 90px;*/
}

body {
    margin:130px 0 0 0; padding:0;
}

header {position: fixed; width: 100%; background-color: #fff; z-index: 10; top: 0;}

h1 {font-size:60px; line-height:60px; font-weight: 700;}
h2 {font-size:40px; line-height:40px; font-weight: 700;}
h3 {font-size:20px; line-height:25px; font-weight: 700;}

.title {position: relative; margin:80px 0;}
.title span {font-size: 200px; line-height: 200px; color: #f5f5f5; position: absolute; z-index: -1; left: 0; top: 50%; transform: translateY(-50%);}
.industries .title {position: relative; margin:80px 0; text-align: center;}
.industries .title span {font-size: 200px; line-height: 200px; color: #f5f5f5; position: absolute; z-index: -1; left: 50%; top: 50%; transform:translate(-50%, -50%);}
.title1 {font-size: 200px; line-height: 200px; color: #f5f5f5; font-weight: 700;}



p {
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
	font-size: 16px;
    line-height: 30px;
	color:#666;
}

.fcred {color: #BE1E2D;}

section {
    padding: 100px 0 0;
}
.pb100 {padding-bottom: 100px;}

.topnav {background-color: #F5F5F5; font-size: 14px;}
.topnav a  {color: #666; text-decoration: none;}
.brandicon i {font-size: 18px; margin: 0 10px;}
.navbar {box-shadow: 0 4px 6px #eee; padding: 20px 0;}
.nav-item {padding: 0 15px;}
.navbar-nav .dropdown-menu {background-color: #f5f5f5; box-shadow: 0 10px 10px #ccc; padding: 20px 10px;}
.dropdown-item {color: #888; padding: 10px 20px; font-size: 14px;}
.dropdown-menu li {position: relative; padding-left: 15px;}
.dropdown-menu li a:before {content: '\f054'; font-family: FontAwesome; font-size: 10px; position: absolute; left: 10px; display: inline-block;}
.dropdown-menu li:hover, .dropdown-item:hover {background-color: #fff;}


.cta {background-color: #BE1E2D; padding: 10px 30px; border-radius: 4px; color: #fff; text-decoration: none; display: inline-block; overflow: hidden; transition: all 0.5s;}
.cta:hover {background-color: #000;}
.cta1 {background-color: #000; padding: 10px 30px; border-radius: 4px; color: #fff; text-decoration: none; display: inline-block; overflow: hidden; transition: all 0.5s;}
.cta1:hover {background-color: #BE1E2D;}
.cta span, .cta1 span {
	display: block;
	position: relative;
}

.cta > span, .cta1 > span {
	overflow: hidden;
}

.cta > span > span, .cta1 > span > span {
	overflow: hidden;
}

.cta:hover > span > span, .cta1:hover > span > span {
	animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s;
}

@keyframes MoveUpInitial {
	to {
		transform: translate3d(0,-105%,0);
	}
}

@keyframes MoveUpEnd {
	from {
		transform: translate3d(0,100%,0);
	}
	to {
		transform: translate3d(0,0,0);
	}
}

.hero {padding: 0;}
.caption {width: 40%; display: inline-block; position: absolute; top: 40%; left: 16%}
.caption h1 {font-size: 60px; line-height: 70px;  color:#fff; margin-bottom:20px; text-shadow: 2px 2px 5px rgba(0,0,0,0.5);}
.caption p {font-size: 18px; line-height: 26px; color: #fff; margin-bottom: 40px;}
.exp30 {margin-top: -50px; width: 300px;}
.cards a {width: 100%; height: 100%; background-color: #f5f5f5; padding: 50px 30px; display: block; text-decoration: none; position: relative; border-radius: 8px; box-shadow: none; border: none; transition: all 0.5s;}
.cards a:before {content: ''; width: 80px; height: 80px; background: url(../images/card-hover.png) no-repeat; display: inline-block; position: absolute; left: 40%; top: 50%; transform: translate(-50% -50%); opacity: 0; transition: all 0.5s; border-radius: 100px; z-index: 1;}
.cards a:hover:before {top: 40%; transform: translate(-50% -50%); opacity: 1; box-shadow: 0 0 30px #ccc;}
.cards a:hover {box-shadow: 0 0 100px #ccc; border: solid 2px #fff;}
.cards a img {margin: 50px 0; transition: all 0.3s;}
.cards a h3 {color: #BE1E2D; text-align: center; transition: all 0.3s;}
.products-inner .cards:hover a h3 {font-size: 24px;}
.products-inner .cards:hover img {transform: scale(0.8);}
.products-inner .cards p {line-height: 20px; margin-bottom: 0;}
.products-inner .cards img {mix-blend-mode: multiply; margin: 0;}
.industries {overflow: hidden;}
.owl-carousel .owl-stage-outer {overflow: visible!important;}
.indbox {position: relative;}
.indbox h3 {position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); text-align: center; color: #fff; width: 100%; transition: all 0.5s;}
.indbox:hover h3 {bottom: 10%;}
.indbox img {transition: all 0.5s; border-radius: 8px;}  
/*.indbox:hover img {transform: scale(1.08);}*/
.owl-theme .owl-nav {margin-top: 30px!important;}
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot {padding: 10px 20px!important;}
.owl-item.center .item img {transform: scale(1.08);}
.home-btm-banner {position: relative;}
.home-btm-banner img {border-radius: 8px;}
.home-btm-banner .caption {position: absolute; left: 50%; top: 30%;}
footer {width: 100%; background-color: #f5f5f5; padding: 50px 0 0; display: inline-block; font-size: 14px;}
footer img {width: 250px;}
footer p {font-size: 14px; line-height: 20px;}
footer a {color: #666; text-decoration: none;}
footer ul {padding-left: 100px;}
footer li {text-align: left; list-style: none; margin-bottom: 20px; padding-left: 20px; position: relative;}
footer li:before {content: '\f054'; font-family: FontAwesome; font-size: 10px; position: absolute; left: 0; display: inline-block;}
.foo-title {transform: rotate(-90deg); position: absolute; left: -80px; top: 35%; letter-spacing: 20px; text-transform: uppercase; text-align: center; font-size: 12px; padding: 10px 0; border: solid 1px #ccc; border-left: none; border-right: none;}
.w-40 {width: 40%;}
.foo-btm {width: 100%; background-color: #fff; padding: 10px 0; display: inline-block; text-align: center; margin-top: 30px;}
footer a:hover {color: #000;}


.form input, .form select, .form textarea {margin-bottom: 16px; padding: 10px 20px; border:solid 1px #ddd; border-radius: 4px;}
.form ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  opacity:1; color:#999!important; 
}
.form ::-moz-placeholder { /* Firefox 19+ */
  opacity:1; color:#999!important;  
}
.form :-ms-input-placeholder { /* IE 10+ */
  opacity:1; color:#999!important;  
}
.form :-moz-placeholder { /* Firefox 18- */
  opacity:1; color:#999!important;  
}
.form select {background: url("data:image/svg+xml,<svg height='15px' width='15px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") no-repeat;
    background-position: calc(100% - 0.75rem) center !important;
    -moz-appearance:none !important;
    -webkit-appearance: none !important; 
    appearance: none !important;
    padding-right: 2rem !important;
	color: #999;
}

.form input[type="submit"] {width:100%; background-color: #BE1E2D!important; color: #fff!important; text-transform: uppercase; border-radius: 6px!important; font-size: 16px; padding: 10px 50px; margin-top: 10px; transition: all 0.5s;}
.form input[type="submit"]:hover {background-color: #000!important;}
.btn-close {padding: 10px!important; margin: 0 0 0 auto!important;}

.mvtext {width: 100%; background-color: #fff; padding: 20px; text-align: center; display: inline-block; position: relative; margin-top: -50px;}
.mv, .c-details {margin-bottom: 100px;}
.mv1 {position: absolute; top: 10%;}
.mv2 {position: absolute; bottom: 0;}

.about-inner, .contact-inner {padding-top: 0;}
.products-inner {padding: 50px 0 100px;}
.c-details-box {width: 100%; background-color: #f7f7f7;  border: solid 1px #ddd; text-align: center; border-radius: 8px; padding: 40px 20px 20px; margin-bottom: 30px; display: block;}
.c-details-box img {position: relative; margin-top: -110px;}
.c-details-box a {color: #666; text-decoration: none;}
.c-details-box a:hover {color: #000;}
.probox {width: 100%; border:solid 1px #ddd; padding: 15px; font-size: 20px; font-weight: 700; color: #BE1E2D; border-radius: 8px; display: inline-block; transition: all 0.5s;}
.probox div {width: 30px; height: 30px; border-radius: 100px; background-color: #f5f5f5;  color: #BE1E2D; text-align: center; font-size: 12px; margin-top: 12px; display: block; transition: all 0.5s;}
.probox:hover {background-color: #BE1E2D; color: #fff;}
.probox:hover div {background-color: #fff;}





@media (max-width: 992px) {
	body {margin-top: 110px;}
	.navbar-brand img {width: 250px;}
	.topnav .col-md-6 {text-align: center;}
	.navbar-toggler {border: none;}
	.caption {width: 60%;}
	.caption p {font-size: 16px; line-height: 20px}
	.caption h1 {font-size: 30px; line-height: 34px;}
	section {padding: 50px 0;}
	h1 {font-size:40px; line-height:50px;}
	h2 {font-size:30px; line-height:40px;}
	h3 {font-size:20px; line-height:25px;}
	p {font-size: 14px;  line-height: 20px;}
	.title, .industries .title {margin:0 0 40px;}
	.title span {font-size: 80px; line-height: 80px;}
	.industries .title span {font-size: 80px; line-height: 80px;}
	.exp30 {margin-top: -50px; width: 250px;}
	.home-btm-banner .caption {left: 10%; top: auto; bottom: 5%;}
	.w-40 {width: 100%;}
	footer .col-md-8 {margin-top: 30px;}
	footer ul {padding-left: 80px;}
	header .cta {display: block; text-align: center;}
	.navbar-nav .dropdown-menu {box-shadow: none; padding: 10px;} 
	.about-inner, .contact-inner {padding-top: 50px;}
	.mv1 {position: relative; top: 0; width: 50%;}
	.mv2 {position: relative; top: 0; width: 50%; float: right;}
	.title1 {font-size: 80px; line-height: 80px;}
	.mvtext {margin-top: -20px;}
	.mv, .c-details {margin-bottom: 0;}
	.mv br {display: none;}
}