@charset "UTF-8";

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

:root{

  --primary1: 15,25,61;  /* #0F193D */

  --primary2: 185,3,15; /* #B9030F */

  --primary3: 135,140,158; /* #878C9E */

  --baseColor: 128,128,128; /* #808080 */

  --color_black: 0,0,0;

  --color_white: 255,255,255;

  --color_gray: 245,245,245; /* #f5f5f5 */

  --baseFont: 'Roboto', sans-serif;

  --imgPrimary1: invert(13%) sepia(8%) saturate(5009%) hue-rotate(190deg) brightness(92%) contrast(106%);

  --imgPrimary2: invert(17%) sepia(84%) saturate(5583%) hue-rotate(349deg) brightness(71%) contrast(110%);

  --imgWhite: invert(100%) sepia(100%) saturate(0%) hue-rotate(13deg) brightness(103%) contrast(102%);

  --imgBlack: invert(0%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(93%) contrast(103%);

}



body {font-family: var(--baseFont); font-weight: 400; color: rgb(var(--baseColor));}

a {color: rgb(var(--baseColor)); }

a:hover, a:focus { outline: none; box-shadow: none; text-decoration: none; color: rgb(var(--primary1)); }

button:focus { outline: none; }

.sprite { background-image: url("../images/sprite.png"); background-position: 0 0; background-repeat: no-repeat; display: inline-block; vertical-align: middle;}

.tra { transition: all 0.3s linear;}

.color-primary1 {color: rgb(var(--primary1));}

.color-primary2 {color: rgb(var(--primary2));}

.color-primary3 {color: rgb(var(--primary3));}





.bg-primary1 {background-color: rgb(var(--primary1));}

.bg-primary2 {background-color: rgb(var(--primary2));}

.bg-primary3 {background-color: rgb(var(--primary3));}

.bg-color-gray{background-color: rgb(var(--color_gray));}



::-moz-selection { color: rgb(var(--color_white)); background: rgb(var(--primary1));}

::selection {color: rgb(var(--color_white)); background: rgb(var(--primary1));}



.owl-dots {text-align: center; padding-top: 15px;}

.owl-dots button.owl-dot {width: 18px; height: 18px; border-radius: 50%; display: inline-block; background: #ccc; margin: 0 3px;}

.owl-dots button.owl-dot.active {background-color: #000;}

.owl-dots button.owl-dot:focus {outline: none;}

.style02 .owl-dots button.owl-dot {width: 14px; height: 14px; border-radius: 50%; display: inline-block; background: #ccc; margin: 0 3px;}

.style02 .owl-dots button.owl-dot.active {background-color: rgb(var(--primary2));}

.style02 .owl-dots button.owl-dot:focus {outline: none;}



.container {width: 100%; max-width: 1440px;}

#wrapper {max-width: 1920px; margin: 0 auto; overflow: hidden;}



header {left: 0; right: 0; top: 0; margin: 0 auto; transition: all 0.3s; z-index: 99 !important; background-color: rgba(var(--primary1)); --bs-border-color: rgba(var(--color_white),0.25);}

header .navbar .navbar-toggler:focus{outline: none; box-shadow: none;}

header .navbar {transition: all 0.3s linear; z-index: 10;}

header .navbar .navbar-brand img.dark {display: none;}

header .navbar .navbar-nav .nav-item .nav-link {color: rgb(var(--primary3)); transition: 0.5s;}
header .navbar .navbar-nav .nav-item>.nav-link{ font-weight: 500;}
header .navbar .navbar-nav .nav-item ul li .nav-link{ padding: 8px 16px;}

header .navbar .navbar-nav .nav-item:hover>.nav-link,header .navbar .navbar-nav .nav-item .nav-link.active {color: rgb(var(--color_white));}

header .dropdown-menu{min-width: 200px;}

header .dropdown-menu .dropdown-item:focus, header .dropdown-menu .dropdown-item:hover {color: rgb(var(--primary1)); background-color: transparent;}

header .dropdown:hover > .dropdown-menu {display: block;}

header .dropdown a{white-space: normal;}

header .dropdown > .dropdown-toggle:active {pointer-events: none;}

header .dropdown .dropdown-menu .dropdown .dropdown-menu{left: 100%; top: 0;}

header.fixed {box-shadow: 0px 4px 50px rgba(44, 48, 50, 0.1); background-color: rgb(var(--color_white),0.9); backdrop-filter: blur(15px);}

header.fixed .navbar .navbar-brand img.dark {display: block;}

header.fixed .navbar .navbar-brand img.white {display: none;}

header.fixed .navbar .navbar-nav .nav-item:hover>.nav-link,header.fixed .navbar .navbar-nav .nav-item .nav-link.active {color: rgb(var(--primary2));}



/* banner */

.banner, .banner-slider, .banner .item{ max-height: 800px !important;}

.banner {height: 100vh; background-color: rgb(var(--primary1));}

.banner .container {left: 0; right: 0; top: 0; z-index: 2;}

.banner .banner-title {font-size: clamp(1.375rem, 1.05rem + 1.625vw, 3rem); font-weight: 700; line-height: 1.2; color: rgb(var(--color_white)); margin-bottom: 24px;}

.banner .sort-info {color: rgb(var(--primary3)); max-width: 430px;}

.banner .banner-slider .item img {max-width: 100%; width: auto; max-height: 100%;}

.banner .banner-slider .item .btn {padding: 0.75rem 1.75rem; font-weight: 500; background-color: rgb(var(--color_white)); color: rgba(var(--primary2)); right: 5%; bottom: 15%;}

.banner .banner-slider .item .btn:hover {background-color: rgba(var(--primary2)); color: rgb(var(--color_white));}

.banner .style01 .owl-dots {display: flex; flex-direction: column; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

.banner .style01 .owl-dots .owl-dot {background-color: rgba(var(--color_white), 0.25); margin: 0.5rem 0;}

.banner .style01 .owl-dots .owl-dot.active {background-color: rgb(var(--color_white));}



/* button custom */

.btn-custom {position: relative; color: rgb(var(--primary1)); border: 1px solid rgb(var(--primary1)); border-radius: 4rem; padding: 14px 24px; overflow: hidden; background-color: transparent; text-transform: uppercase;}

.btn-custom:focus {box-shadow: none;}

.btn-custom:hover,.btn-custom:focus, .btn-custom:active{border-color: rgb(var(--primary1)); background-color: rgb(var(--primary1)); color: rgb(var(--color_white));}



.btn-primary {

  --bs-btn-bg: transparent;

  --bs-btn-color: rgb(var(--primary2));

  --bs-btn-border-color: rgb(var(--primary2));

  --bs-btn-hover-bg: rgb(var(--primary2));

  --bs-btn-hover-color: rgb(var(--color_white));

  --bs-btn-hover-border-color: rgb(var(--primary2));

  --bs-btn-active-border-color: rgb(var(--primary2));

  --bs-btn-active-bg: rgb(var(--primary2));

  --bs-border-radius: 0.5rem;

  padding: 0.75rem 2rem;

  font-weight: 500;

}

.btn-primary.filled {background-color: rgb(var(--primary2)); color: rgb(var(--color_white));}



.btn-white {--bs-btn-color: rgb(var(--color_white)); --bs-btn-border-color: rgb(var(--color_white));}



.btn-circle {width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(var(--primary2)); display: flex; align-items: center; justify-content: center;}



.padding {padding: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem) 0;}



h2.title {font-size: clamp(1.375rem, 1.25rem + 0.625vw, 2rem); font-weight: 700; line-height: 1.2;}



.totop {bottom: 30px; cursor: pointer; width: 50px; height: 50px; right: -60px; z-index: 9; background: rgb(var(--primary1)); color: rgb(var(--color_white)); transition: background-color 0.2s linear; opacity: 0;}

.totop img {width: 24px; height: 24px; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(13deg) brightness(103%) contrast(102%);}

.totop i {position: relative; width: 12px; height: 12px; border-style: solid; border-color: #ffffff; border-width: 2px 2px 0 0; display: block; transform: rotate(-45deg); top: 3px;}



.content p, .content ul, .content ol {font-size: 1rem; line-height: 1.5; margin-bottom: 24px;}

.content p:last-child, .content ul:last-child, .content ol:last-child {margin-bottom: 0;}



.products .card {background-color: rgb(var(--color_gray)); height: 550px;}

.products .card:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.4s;}

.products .card .card-img {padding-top: 100%;}

.products .card .card-img img {left: 0; top: 0;}

.products .card .card-title {display: flex; font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem); color: rgb(var(--primary1)); font-weight: 500;}

.products .card .card-body {position: relative; z-index: 1; transition: 0.4s;}

.products .card .card-body ul {height: 0; opacity: 0; visibility: hidden; transition: 0.4s;}

.products .card .card-body ul li a {transition: 0.4s;}

.products .card .btn-circle {position: absolute; left: 50px; bottom: 50px;}

.products .card .btn-circle img {filter: var(--imgPrimary2);}

.products .card:hover:before {background-color: rgb(var(--primary1)); z-index: 1;}

.products .card:hover .card-body {transform: translateY(-300px); color: rgb(var(--color_white));}

.products .card:hover .card-body .card-title {color: rgb(var(--color_white)); margin-bottom: 2.5rem;}

.products .card:hover .card-body ul {height: auto; opacity: 1; visibility: visible;}

.products .card:hover .card-body ul li a:hover, .products .card:hover .card-body ul li a:focus {color: rgb(var(--color_white));}

.products .card:hover .btn-circle {z-index: 1; background-color: rgb(var(--primary2));}

.products .card:hover .btn-circle img {filter: var(--imgWhite);}



.group-companies {background-color: rgb(var(--color_gray));}

.group-companies .logo {width: 150px;}

.group-companies .text {font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem); font-weight: 500;}

.group-companies .text span {font-size: 1rem; color: rgb(var(--baseColor)); font-weight: 400;}

.group-companies .row .border-end:last-child {border: none !important;}

.global-footprint {background-color: rgb(var(--color_gray)); position: relative; overflow: hidden;}

.global-footprint .world-map {margin-top: clamp(1.25rem, 0.5625rem + 3.4375vw, 4.6875rem); display: flex; justify-content: center;}

.global-footprint .world-map > div {position: relative;}

.global-footprint .world-map img {filter: invert(99%) sepia(2%) saturate(116%) hue-rotate(198deg) brightness(114%) contrast(80%);}

.global-footprint .world-map .map-marker {width: 15px; height: 15px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; padding: 3px;}

.global-footprint .world-map .map-marker:before {content: ""; border-radius: 50%; background-color: rgb(var(--primary2)); width: 100%; height: 100%; z-index: 1;}

.global-footprint .world-map .map-marker::after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; margin: -1px; background-color: rgba(var(--primary2), 0.25); animation: borderanimate 1s linear infinite;}

@keyframes borderanimate {

  to {transform: scale(1.5); opacity: 0.95;}

}

.global-footprint .world-map .location {position: absolute; left: 0; top: 0;}

.global-footprint .world-map .location.usa {left: 15.5458394059%; top: 33.5390626106%;}

.global-footprint .world-map .location.egypt {left: 53.7858283018%; top: 49.1103152471%;}

.global-footprint .world-map .location.uganda {left: 54.2716357832%; top: 67.0880342001%;}

.global-footprint .world-map .location.sa {left: 52.467207995%; top: 80.3943773622%;}

.global-footprint .world-map .location.kuwait {left: 58.9215073912%; top: 46.7038489305%;}

.global-footprint .world-map .location.saudi-arabia {left: 57.3946838781%; top: 50.1012131421%;}

.global-footprint .world-map .location.uae {left: 61.2117426608%; top: 49.9596563%;}

.global-footprint .world-map .location.yemen {left: 59.1297105975%; top: 54.7725889331%;}

.global-footprint .world-map .location.nepal {left: 69.7480741203%; top: 48.6856447206%;}

.global-footprint .world-map .location.bangladesh {left: 70.9972933583%; top: 51.3752247215%;}

.global-footprint .world-map .location.sl {left: 68.4294538136%; top: 59.3024078819%;}

.global-footprint .world-map .location.thailand {left: 74.1203414533%; top: 54.4894752488%;}

.global-footprint .world-map .location.malaysia {left: 74.1203414533%; top: 60.4348626191%;}

.global-footprint .world-map .location.indonesia {left: 75.1613574849%; top: 65.6724657786%;}



.tooltip-inner {border-radius: 15px; padding: 5px 15px; background-color: #2C3032;}

.bs-tooltip-bottom .arrow:before {border-bottom-color: transparent !important;}



.download:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 50%; background-color: rgb(var(--color_gray));}

.download .container > div {background-color: rgb(var(--primary2));}

.download .container > div:before {content: ''; position: absolute; left:  0; top: 0; bottom: 0; width: 30%; background-color: rgb(var(--primary1));}

.download .btn:hover {background-color: rgb(var(--primary1)); border-color: rgb(var(--primary1));}



.news-pic{position: relative; border: 1px solid #E6E6E6; aspect-ratio: 16/9; width: 100%; display: flex; align-items: center; justify-content: center;}
.news-pic img{max-width: 80%; max-height:80%;}

.news-content p{margin-bottom: 5px;}

.news-content h4{margin-bottom: 12px;}



/* footer */

.footer {background-color: rgb(var(--primary1)); color: #868686;}

.footer .address-block p {font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem); font-weight: 500; position: relative; padding-left: 2.5rem;}

.footer .address-block p img {top: 0.5rem; filter: var(--imgWhite);}

.footer .address-block a:hover {color: rgb(var(--primary3)) !important;}

.footer a.color-primary3:hover {color: rgb(var(--color_white));}

.footer .bottom a {color: rgb(var(--color_white));}



form .form-control {height: 52px;}

form textarea.form-control {height: 130px;}



/* inner page css */

.inner-banner {background-color: rgb(var(--primary1)); padding-top: 14.20%;}

.inner-banner > .container {position: absolute; left: 0; top: 0; right: 0; bottom: 0;}

.inner-banner video{filter:grayscale(100%);}

.inner-banner h1 {font-size: clamp(1.875rem, 1.75rem + 0.625vw, 2.5rem);}

.inner-banner .breadcrumb .breadcrumb-item {color: rgba(var(--color_white), 0.5);}

.inner-banner .breadcrumb .breadcrumb-item:before {color: rgba(var(--color_white), 0.5);}

.inner-banner .breadcrumb .breadcrumb-item:first-child:before {display: none;}

.inner-banner .breadcrumb .breadcrumb-item a {color: rgba(var(--color_white), 0.5); transition: all 0.4s ease-in-out;}

.inner-banner .breadcrumb .breadcrumb-item a:hover {color: rgb(var(--color_white));}



#main-container .products .card:before{display: none;}

#main-container .products .card:hover .card-body{transform: none;}

#main-container .products .card:hover .card-body .card-title{color: rgb(var(--primary1));}



#nav-tab{border-bottom: 1px solid #E6E6E6;}

#nav-tab .nav-link{border-radius: 0; border: none; position: relative; padding: 0; margin-right: 30px; padding: 15px 0; color: rgb(var(--primary1)); font-weight: 500;}

#nav-tab .nav-link.active::after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; width: 100%; background-color: rgb(var(--primary2));}

#nav-tab .nav-link.active{color: rgb(var(--primary2));}



.tab-content{padding: 30px 0;}

.tab-content .accordion-header .accordion-button{color: rgb(var(--primary1));}

.tab-content .accordion-body p{color: rgb(var(--baseColor));}

.tab-content .accordion-header .accordion-button::after{width: 1rem; height: 1rem; background-size: 1rem;}



.tab-content h4{color: rgb(var(--primary1)); margin-bottom: 1rem; font-size: 1rem ;}

.tab-content ul{padding: 0; list-style: none; display: flex; flex-wrap: wrap;}

.tab-content ul li{color: rgb(var(--baseColor)); position: relative; padding-left: 15px; margin-bottom: 12px; width: 33.33%;}

.tab-content ul li::before{content: ""; width: 7px; height: 7px; border: 1px solid rgb(var(--primary1)); border-radius: 50%; position: absolute; left: 0; top: 7px;}

.tab-content ul.auto-width li {flex: 0 0 100%; width: 100%;}



.bullet-style01{margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;}

.bullet-style01 li{color: rgb(var(--baseColor)); position: relative; padding-left: 15px; margin-bottom: 1rem;}

.bullet-style01 li::before{content: ""; width: 7px; height: 7px; border: 1px solid rgb(var(--primary1)); border-radius: 50%; position: absolute; left: 0; top: 8px;}




.products .owl-carousel > div {overflow: visible;}

.products .slider img{width: auto;}

.owl-carousel.style01 .owl-nav { position: absolute; right: 0; top: -85px; display: flex; width: 130px; justify-content: space-between;}

.owl-carousel.style01 .owl-nav button { border: 1px solid #878C9E; width: 48px; height: 48px; border-radius: 8px; transition: 0.4s; display: flex; align-items: center; justify-content: center;}

.owl-carousel.style01 .owl-nav button:before { content: ""; background: url(../images/arrow-icon.png) center center no-repeat; width: 24px; height: 24px; filter: invert(58%) sepia(19%) saturate(255%) hue-rotate(189deg) brightness(92%) contrast(87%);}

.owl-carousel.style01 .owl-nav .owl-next {margin-left: 0;}

.owl-carousel.style01 .owl-nav .owl-prev:before {transform: rotate(-180deg);}

.owl-carousel.style01 .owl-nav button:hover{border-color: rgb(var(--primary2));}

.owl-carousel.style01 .owl-nav button:hover:before{filter: var(--imgPrimary2);}



.gal-pic {position: relative; height: 250px; display: block; background-color: #fdfdfd; margin: 1rem 0;}

.gal-pic img{position: absolute; left: 0; right: 0; top:0; bottom: 0; margin: auto; display: block;} 

.gal-pic::before{content: ""; width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; background-color: rgba(var(--primary1),0.8); opacity: 0; visibility: hidden; transition: all .3s linear;}

.gal-pic:hover::before{opacity: 1; visibility: visible;}

.gal-pic .zoom{background-image: url('../images/zoom.png'); background-repeat: no-repeat; background-position: center center; position: absolute; left:0; right: 0; top: 0; bottom: 0; width: 30px; height: 30px; filter: var(--imgWhite); margin: auto; z-index: 3; opacity: 0; visibility: hidden; transition: all .3s linear;}

.gal-pic:hover .zoom{opacity: 1; visibility: visible;}



.glightbox-clean .gslide-title{margin-bottom: 0;}

.glightbox-clean .gslide-desc{margin-top: 1rem;}

.glightbox-clean .gslide-media{background-color: rgb(var(--color_white));}

.glightbox-clean .gslide-media,.glightbox-clean .gslide-description{min-width: 300px;}



.inquire-now-block label{color: rgb(var(--primary1)); margin-bottom: 1rem;} 

.inquiry-form .form-label{color: rgb(var(--primary1));}
.inquiry-form .form-control{box-shadow: none; border-color: #E6E6E6;}
.inquiry-form .form-control:focus{border-color: rgb(var(--primary2));}
.inquiry-form textarea.form-control{resize: none;}
.inquiry-form .btn{float: right;}