@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');


body {font: 400 18px/1.6 'Barlow', sans-serif;!important; color: #1D1D1D; background-color: #FFFFFF; position: relative; -webkit-font-smoothing: antialiased; position: relative; right: 0;overflow-x: hidden!important;}

:root {
	--red-color: #e61d2f;
	--small-font:  19px;
}

/*h1 {font-size: calc(1.1rem + 1.2vw)}*/
ul.number-list {list-style-type: number; padding-left: 20px!important;}

@media(max-width: 992px){
	.row-revers-lg {flex-wrap: wrap-reverse;}
}

@media(max-width: 768px){
	.row-revers-md {flex-wrap: wrap-reverse;}
}


h1,h2,h3,h4,h5,h6 {font-weight: 700; margin-bottom: 20px;}
p {margin-bottom: 20px;}
.underline {font-size: 20px!important; position: relative; margin-bottom: 20px!important; display: block;}
.underline:before {content: ''; width: 30px; height: 5px; background-color: #e61d2f; display: inline-block; margin: 4px 10px 4px 0;}
.bg-black .underline:before, .bg-red .underline:before {background-color: #fff;}
.underline-white.underline:before {background-color: #fff;}
.underline + h3 {color: var(--red-color); margin-bottom: 0;}
.underline + h3 + p {margin-top: 20px;}
h3 {color: var(--red-color);}
.bg-black h3, .bg-red h3 {color: #fff}

.banner-text {font-size: 40px!important;}

::-webkit-scrollbar {background-color: rgb(0, 0, 0, 0.8); width: 5px;}
::-webkit-scrollbar-thumb {background-color: var(--red-color); height: 10px!important;}
::-webkit-scrollbar:horizontal {height: 5px; background-color: rgb(0, 0, 0.0.8);}
::-webkit-scrollbar-thumb:horizontal {background: var(--red-color); border-radius: 10px;}

.last-child-p-0 p:last-child {margin-bottom: 0!important}
.color-white {color: #fff;}
.overlay { position: fixed; display: block; width: 0; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; z-index: 100; }
.overlay, header, .nav-bar, .fixed, header .header-logo {-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.zoom-img {overflow: hidden}
.zoom-img img {transition: all 0.4s}
.zoom-img:hover img {transform: scale(1.03);}

.row-col-gap-24 {margin-bottom: -24px}
.row-col-gap-24 .col-lg-4, .row-col-gap-24 .col-md-4, .row-col-gap-24 .col-lg-3 {margin-bottom: 24px}

.bg-black {background-color: #000000; color: #fff;}
.bg-black h4 {color: #fff;}
.bg-red {background-color: #e61d2f; color: #fff}
.bg-white {background-color: #FFFFFF;}
.bg-light-gray {background-color: #F5F5F4;}

.color-black {color: #000000;}
.color-red {color: #e61d2f;}
.color-white {color: #FFFFFF;}

.margin-bottom-40 {margin-bottom: 40px}
.margin-bottom-20 {margin-bottom: 20px}
.margin-bottom-30 {margin-bottom: 30px}

a, a:hover{text-decoration: none!important; color: #1d1d1d;}
a:hover {text-decoration: none!important; color: var(--red-color);}
.bg-black a,.bg-red a {color: #fff;}
.bg-black a:hover, .bg-red a:hover {color: #fff; opacity: 0.8;}

.btn-red {color: #fff!important; background-color: var(--red-color)!important; font-weight: 700; display: inline-block; border: 2px solid var(--red-color); padding: 10px 20px; display: inline-block; transition: all 0.4s;}
.btn-red i:before {margin-left: 10px; display: inline-block; transition: all 0.2s;}
.btn-red:hover {opacity: 1!important; color: #fff!important; background-color: #000!important; border-color: #000;}
.btn-red:hover i:before {transform: translateX(5px)}
.bg-black .btn-white:hover, .bg-black .btn-red:hover {background-color: #fff!important; color: var(--red-color)!important;}

.btn-white {color: #1d1d1d!important; background-color: #fff!important; font-weight: 700; display: inline-block; border: 2px solid #fff; padding: 10px 20px; transition: all 0.4s;}
.btn-white i:before {margin-left: 10px; display: inline-block; transition: all 0.2s;}
.btn-white:hover {opacity: 1!important; color: #fff!important; background-color: #000!important; border-color: #000;}
.btn-white:hover i:before {transform: translateX(5px)}

.nav-button {margin:16px 0; float: right;}
.nav-button span { width: 25px; height: 3px; background-color: #333; display: block; margin: 4px 0; border-radius: 10px; }

.section-padding-vertical {padding-top:40px; padding-bottom: 40px;}
.section-padding-vertical-80 {padding-top:60px; padding-bottom: 60px;}

header {position: relative; border-bottom: 1px solid #000000; z-index: 2000;}
header a {color: #ffffffa6!important; font-weight: 600; font-size: 15px;}
header a:hover {text-decoration: none; color:#fff!important; opacity: 1!important;}

header .logo-container {background-color: white;}
header .logo-container .logo {margin: 18px 0; height: 20px;}

header .nav-bar {padding:0; position: fixed; top: 0; right: -300px; bottom: 0; background-color: #000; z-index: 1000; box-shadow: -7px 1px 29px 1px #3a3838; padding: 0; width: 270px; overflow-y: scroll;}
header .nav-bar .mobile-title {color: white; text-align: center;}
header .nav-bar .mobile-title span {display: block; font-size: 24px; text-transform: uppercase; padding: 50px 0;}
header .nav-menu {list-style-type: none; padding: 0; margin: 0;}
header .nav-menu li { border-top: 1px solid white; border-bottom: 1px solid white; margin-top: -1px; }
header .nav-menu li a {display: block; padding:10px 0 10px 15px;}
header .mail-link { display: none;}

.banner {background-color: #e61d2f; overflow: hidden; color: #fff; position: relative; z-index: 1;}
.banner:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--red-color);opacity: 0.8; z-index: -1;}
.banner .banner-image-container {background-size: cover; background-position: center; padding-bottom: 65%}
.banner .slider-content {display: none; padding: 30px 0;}
.banner .slider-content.active {display: inline-block;}
.banner .owl-dots .owl-dot {display: none}
.banner .slider {position: relative;}
.banner .slider .banner-quality {position: absolute; display: none; writing-mode: vertical-rl; text-orientation: mixed;  font-size: 35px; font-weight: 600; color: #C4000A;}
.banner .carousel-next-prev img {background-color: #fff; padding: 10px; margin: 5px;}
.banner h3 {color: #fff}

.intro .section-padding-vertical {padding-left: 12px; padding-right: 12px;}
.intro p:last-child {margin-bottom: 0!important;}
.carousel-prev i:before,.carousel-next i:before {color: #000; border: 2px solid var(--red-color); margin-left: 10px; padding: 10px; transition: all 0.5s;}
.carousel-prev i:hover:before,.carousel-next i:hover:before {color: #fff; background-color: var(--red-color);}
.carousel-prev:hover, .carousel-next:hover {cursor: pointer;}

.carousel-next-prev .box {display: flex; justify-content: center;}

.who-we-are-section .column {margin-bottom:0; padding-right: 35px;}
.who-we-are-section .column.col-lg-6:nth-child(1) {margin-bottom: 50px}

.our-strangth-section {background-image: url('../images/bg-strangth.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.our-strangth-section .our-strangth-box {width: 235px; margin-right: 35px; margin-bottom: 35px; margin-top: 35px;}
.red-belt {padding-top: 60px; padding-bottom: 60px;}

.table, td {font-weight: 600;}

@media(max-width: 992px){
	.banner .row {flex-wrap: wrap-reverse;}
	.red-belt {padding-top: 30px; padding-bottom: 30px;}
}

@media(min-width: 992px) { /* Mobile screen breakpoint --- */

	.who-we-are-section .column.col-lg-6:nth-child(1) {margin-bottom: 0}
	.section-padding-vertical {padding-top:100px; padding-bottom: 100px;}
	.section-padding-vertical-80 {padding-top: 80px; padding-bottom: 80px;}
	
	header {border:0;}
	header .logo-container {text-align: center;}
	header .logo-container .logo {margin: 30px 0; height: auto;}
	header .nav-button {display: none;}
	header .nav-bar {padding:0 15px; position: static; box-shadow: unset; width: 50%; overflow-y: unset; background-color: #000000; }
	header .nav-bar .mobile-title {display: none;}
	header .nav-menu {margin-left: 35px;}
	header .nav-menu li {border:0; display: inline-block;}
	header .nav-menu li a {padding: 0; font-size: 15px; padding: 37px 14px 37px 0}
	header .mobile-mail-link {display: none!important;}
	header .mail-link {display: flex;}
	header .mail-link a {display: inline-block; margin:  37px 0;}

	.banner .owl-stage {padding-left: 0!important;}
	.banner .banner-image-container {height: calc(100vh - 97.39px)!important; background-size: cover; background-position: center;}
	.banner-content-height {height: calc(100vh - 97.39px)!important;}
	.banner .owl-dots {position: absolute; bottom: 0; left: -20px; transform: translateX(-100%);}
	
	.banner .owl-dots .owl-dot {color: white; font-size: 18px; font-weight: bold; margin: 15px 0; border: 1px solid transparent; padding: 6.2px 16px!important; display: inline-block;}
	.banner .owl-dots .owl-dot.active {border: 1px solid white; padding: 6.2px 16px!important;}
	
	.carousel-prev i:before,.carousel-next i:before {padding: 15px;}
	.our-strangth-section {padding-left: 0;}
	.red-belt a {float:right;}
}

@media(min-width: 1000px) {
	.who-we-are-section {margin-left: 32px;}
}

@media(min-width: 1250px) {
	header .nav-menu li a {padding-right: 30px;}
	.who-we-are-section {margin-left: 70px}
	.intro .section-padding-vertical {padding-left: 12px; padding-right: 12px;}
	.banner .slider-content.active {padding-left: 30px; padding-right: 30px;}
}

@media(min-width: 1350px) {
	.who-we-are-section {margin-left: 113px;}
}

@media(min-width: 1380px) {
	.who-we-are-section {margin-left: 130px;}
	.intro .section-padding-vertical {padding-left: 30px; padding-right: 30px;}
}

@media(min-width: 1580px) {
	.who-we-are-section {margin-left: 165px;}
}

@media(min-width: 1900px) {
	.who-we-are-section {margin-left: 325px;}
}

.bg-image {height: 100%; background-color: #ddd; background-position: center; background-size: cover; background-repeat: no-repeat;}
.inner-banner {background-color: var(--red-color); color: white}
.inner-banner .bg-image {height: 210px;}
.inner-banner h1 {margin-bottom: 0!important; padding: 30px 12px}

@media(min-width: 768px){
	.inner-banner .bg-image {height: 350px;}
}

@media(min-width: 992px){
	.inner-banner h1 {padding: 30px}
	.inner-banner .bg-image {height: 64.03vh;}
	.inner-banner .col-lg-3 {display: flex; justify-content: center; align-items: center;}
}

.mission-vision h3 {color: #1d1d1d} 
.border-box-red img {margin-right: 20px} 
.border-box-red {padding: 20px; border: 5px solid var(--red-color); height: 100%;}
.border-box-red p:last-child {margin-bottom: 0!important}
.border-box-title {display: flex; justify-content: flex-start; align-items: center; margin-bottom: 30px}

.facilities-gallery .bg-image {padding-bottom: 100%; border: 2px solid #F5F5F4;}
.facilities-gallery {margin: -2px!important;}
.facilities-gallery .col-12 .bg-image  {padding-bottom: 50%}

form .form-control {margin-top: 5px; margin-bottom: 20px;}
form .form-control:focus {box-shadow: 0 0 0 0.25rem rgb(238 30 49 / 37%); border-color: var(--red-color);}
form label {font-weight: 600}
form .col-lg-6 {display: flex; flex-direction: column;}
form label {order: 1;}
form .help-block {order: 2;}
form input {order: 3;}
.help-block {color: var(--red-color);}
form button {border: unset; margin-right: 8px;}

.contact-us b {display: block; margin-bottom: 5px;}
.contact-us b i {margin-right: 5px; color: var(--red-color);}

.slideIn {animation-name: slideIn; animation-duration: 0.6s; animation-fill-mode: both;}

@keyframes slideIn {
	0% {clip-path: inset(0 0 100% 0); opacity: 0;}
	100% {clip-path: inset(0 0 0 0); opacity: 1;}
	0% {clip-path: inset(0 0 100% 0); opacity: 0;}
}

footer address, footer p {margin-bottom: 15px!important}
footer ul {list-style-type: none; margin: 0!important; padding: 0!important;}
footer ul li:last-child {margin-bottom: 0!important;}
footer .footer-product-menu li:last-child {margin-bottom: 10px!important;}
footer a {font-weight: 600}
footer .bg-black {padding: 60px 30px 30px 30px; color: #ffffffa6;}
footer .bg-black a {color: #ffffffa6;}
footer .bg-black a:hover {opacity: 1;}
footer .bg-white {padding: 60px 30px}
footer ul li {display: block; margin-bottom: 10px}
footer hr {margin: 30px 0!important}
footer i {margin-right: 5px;}

@media(min-width: 768px){
	.footer-product-menu li:last-child {margin-bottom: 0!important;}
}
@media(min-width: 1200px){

	footer .bg-black {padding: 60px 60px 30px 60px}
	footer .bg-white {padding: 60px}
}

.dropdown {position: unset!important}
.dropdown-toggle:after {display: none!important}
.dropdown-toggle i {margin-left: 5px; display: inline-block;  transition: all 0.4s;}
.dropdown-toggle.show i {transform: rotate(-180deg);}

.dropdown-menu {background-color: #ffffff; padding:  0!important; border-radius: unset; border-color: #dddddd3b!important; margin-top: -2px!important; border: unset!important;}
.dropdown-menu a {padding: 0!important; margin-bottom: 25px;}
.dropdown-menu a:last-child {margin-bottom: 0!important}
.dropdown-menu .col-lg-6 {padding: 30px 40px!important}

@media(max-width: 992px){
	.dropdown-menu .col-lg-6 {padding: 20px 32px!important}
	.dropdown-menu .bg-black {padding: 0!important; background-color: transparent!important;}
	.dropdown-menu a {color: #1d1d1d!important;}
	.dropdown-menu a:hover {color: var(--red-color)!important;}
	.dropdown-menu {transform: unset!important; position: static!important; border: unset!important; margin-top: 0!important}
	.dropdown-menu h3 {display: none}
	.dropdown-menu a {border-top: 1px solid #ddd; padding: 10px 27px!important; margin-bottom: 0!important;}
}

.product-box-sm {border: 1px solid #ddd; background-color: #fff; text-align: center; overflow: hidden;}
.product-belt {color: #fff; font-weight: 700; background-color: #000; padding: 15px; transition: all 0.4s; z-index: 9; position: relative}
.product-box-sm:hover h3 {color: var(--red-color);}
.product-belt h3 {font-size: var(--small-font);margin-bottom: 0!important; color: #fff!important;}
.product-box-sm:hover .product-belt h3 {color: #fff!important;}
.product-box-sm:hover .product-belt {background-color: var(--red-color); color: #fff;}
.product-box-sm img {transition: all 0.4s}
.product-box-sm:hover img {transform: scale(1.03)}

.world-map {background-position: top center; background-size: cover; background-repeat: no-repeat; height: 100%; color: #fff;}

@media(min-width: 992px){
	.world-map {height: 600px}
	.world-map {padding: 80px 0}
}

button[disabled] {opacity: 0.7;}
iframe {float: left;}

.specification th, .specification td {width: 25%; padding: 15px 20px; vertical-align: middle;}
.specification {overflow: hidden;}

.table-responsive {overflow-x: auto;}
table {width: 100%}
th {background-color: #000; color: #fff; border: 1px solid #fff;}
td {border: 1px solid #bbb;}
.hr {margin: 40px 0; background-color: #00000094;}

@media(min-width: 992px){
	.hr {margin: 60px 0;}	
}


.product-box {position: relative; display: inline-block; overflow: hidden;}
.product-box .content {color: #fff; position: absolute; top: 25%; left: 0; padding: 30px; width: 100%; height: 100%;opacity: 0; transition: all 0.4s; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;}
.product-box:hover .content {opacity: 1; top: 0;}

.product-box h4 {position: absolute; top: 0; left: 0; right: 0; padding: 20px 30px; z-index: 992; transition: all 0.4s; transition-delay: 0.2s}
.product-box:hover h4 {color: #fff; transition-delay: 0s}
.product-box a {opacity: 0; transition: all 0.4s;}
.product-box:hover a {opacity: 1; transition-delay: 0.38s;}
.product-box .btn-red:hover {background-color: #fff!important; color: #1d1d1d!important; transition-delay: 0s;}

.product-box:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0, 0.75); opacity: 0; transition: opacity .33s ease; z-index: 1;}
.product-box h4:after {content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background-color: var(--red-color); z-index: -1; transition: 0.4s linear;}
.product-box:hover h4:after {top: 0;}
.product-box:hover:before {opacity: 1;}
.product-box img {transition: all 0.4s}
.product-box:hover img {transform: scale(1.03);}