:root{
  --primary1: 6,68,151; /* #064497  */
  --primary2: 0,82,162; /* #0052A2  */
  --primary3: 45,178,231; /* #2DB2E7 */
  --primary4: 0,18,41; /* #001229 */
  --primary5: 0,35,69; /* #002345 */
  --primary6: 46,88,152; /* #2E5898 */
  --baseColor: 86,86,85; /* #565655 */
  --bgBlue: 242,251,255; /* #F2FBFF */
  --bgGray: 245,245,245; /* #F5F5F5 */
  --color_black: 0,0,0;
  --color_white: 255,255,255;
  --baseFont: "Plus Jakarta Sans", sans-serif;
  --imgPrimary1: invert(12%) sepia(88%) saturate(3387%) hue-rotate(208deg) brightness(99%) contrast(95%);
  --imgPrimary2: invert(17%) sepia(47%) saturate(5823%) hue-rotate(199deg) brightness(93%) contrast(101%);
  --imgPrimary3: invert(69%) sepia(15%) saturate(6919%) hue-rotate(164deg) brightness(96%) contrast(88%);
  --imgPrimary4: invert(4%) sepia(47%) saturate(5395%) hue-rotate(199deg) brightness(103%) contrast(104%);
  --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%);
  --imgGary: invert(94%) sepia(7%) saturate(89%) hue-rotate(201deg) brightness(102%) contrast(97%);
  --padding: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
  --padding-sm: clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem);
  --bs-breadcrumb-divider: '•';
}

body {font-family: var(--baseFont); color:rgb(var(--baseColor)); font-weight: 400;}
a:hover, a:focus {outline: none; -webkit-box-shadow: none; box-shadow: none; text-decoration: none;}
button:focus {outline: none;}


::selection {color: rgb(var(--color_white)); background: rgb(var(--primary2));}
.clr-base{color: rgb(var(--baseColor)) !important;}
.clr-1 {color: rgb(var(--primary1)) !important;} .bg-clr-1 {background-color: rgb(var(--primary1));}
.clr-2 {color: rgb(var(--primary2)) !important;} .bg-clr-2 {background-color: rgb(var(--primary2));}
.clr-3 {color: rgb(var(--primary3)) !important;} .bg-clr-2 {background-color: rgb(var(--primary3));}
.clr-4 {color: rgb(var(--primary4)) !important;} .bg-clr-2 {background-color: rgb(var(--primary4));}
.clr-gray {color: rgb(var(--color_gray)) !important;} .bg-gray {background-color: rgb(var(--color_gray));}

.ff-medium {font-weight: 500;}
.ff-semibold{font-weight: 600;}
.ff-bold{font-weight: 700;}

.bg-blue{background-color: rgb(var(--bgBlue));}
.bg-gray{background-color: rgb(var(--bgGray));}

/* button custom */
.btn-custom { margin-top: 30px; border: 1px solid rgb(var(--primary1)); background-color: transparent; font-weight: 400; border-radius: 50px; color: rgb(var(--primary1)); text-transform: uppercase; overflow: hidden; padding: 1rem 2rem; transition: all .2s linear; text-align: center; position: relative; z-index: 1;}
.btn-custom:focus {box-shadow: none;}
.btn-custom::before{content: ""; transform: scale(1.1); width: 20px; height: 100%; border-radius: 50px; transform: translateY(-50%); top: 50%; left: -40px; position: absolute; background-color: rgb(var(--primary1)); z-index: -1; transition: all .2s linear;}
.btn-custom:hover::before{width: 100%; left: 0;}
.btn-custom:hover, .btn-custom:focus{ color: rgb(var(--color_white));}



/* owl-carousel */
.owl-flex .owl-stage {display: flex;}
.owl-carousel.style01 .owl-dots{display: flex; justify-content: flex-end; position: absolute; right: 0; bottom: 8px;}
.owl-carousel.style01 .owl-dots .owl-dot span{margin-left: 10px; width: 10px; height: 10px; border-radius: 50%; background-color: rgb(var(--baseColor)); display: block;}
.owl-carousel.style01 .owl-dots .owl-dot.active span{background-color: rgb(var(--primary1));}
.owl-carousel.style01 .owl-nav button{width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #E8EEF6;}
.owl-carousel.style01 .owl-nav .owl-prev{position: absolute; right: 110px; top: -80px ;}
.owl-carousel.style01 .owl-nav .owl-next{position: absolute; right: 0; top: -80px ;}
.owl-carousel.style01 .owl-nav button:hover{background-color: rgb(var(--primary3)); }
.owl-carousel.style01 .owl-nav button i{filter: var(--imgPrimary3);}
.owl-carousel.style01 .owl-nav button .arrow-right{background-image: url('../images/arrow.png');  transform: rotate(180deg); background-repeat: no-repeat; background-size: cover; width: 24px; height: 24px;}
.owl-carousel.style01 .owl-nav button .arrow-left{background-image: url('../images/arrow.png');  background-repeat: no-repeat; background-size: cover; width: 24px; height: 24px;}
.owl-carousel.style01 .owl-nav button:hover i{filter: var(--imgWhite);}

.owl-carousel.style01 .owl-nav [class^='owl-'].disabled {cursor: default;}
.owl-carousel.style01 .owl-nav.disabled [class^='owl-'] {display: none;}


#wrapper {max-width: 1920px; margin: 0 auto; position: relative;}

/* header */
header { left: 0; right: 0; top: 0; position: absolute; margin: 0 auto;  transition: all 0.3s; z-index: 99 !important;}
header::after{content: ""; display: block; opacity: 0.4; background: linear-gradient(to bottom, rgba(var(--color_black),0.5) 40%, transparent 100%); height: 100%; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto;}
header .navbar {transition: all 0.3s linear; z-index: 10; padding: 20px 0; background-color: transparent !important;}
header .navbar .navbar-toggler:focus{outline: none; box-shadow: none;}
header .navbar .navbar-nav>.menu-item {margin: 0 12px !important;}
header .navbar .navbar-nav .menu-item .nav-link {padding: 18px 0; font-weight: 500; color: rgb(var(--color_white)); transition: 0.5s;}
header .navbar .navbar-nav .menu-item .nav-link:hover, header .navbar .navbar-nav .menu-item .nav-link.current {color: rgb(var(--primary2));}
header .navbar .navbar-nav .menu-item:hover>.nav-link,header .navbar .navbar-nav .menu-item>.nav-link.active{color: rgb(var(--color_white));}
header .navbar .navbar-nav .menu-item .dropdown-menu li:hover a {color: rgb(var(--primary2));}
header .navbar .navbar-nav .menu-item>.nav-link.active{font-weight: 500;}
header .dropdown .dropdown-menu{display: block; border-radius: 8px; opacity: 0; visibility: hidden; transition: all .5s linear;}
header .dropdown:hover > .dropdown-menu {opacity: 1; visibility: visible; }
header .navbar .navbar-nav .dropdown-menu li .nav-link{padding:10px 20px; font-size: 14px; color: rgb(var(--baseColor)); border-bottom: 1px solid #F4F4F4;} 
header .navbar .navbar-nav .dropdown-menu li:last-child .nav-link{border-bottom: none;}
header .dropdown-menu{width: 220px; border-radius: 0; border: none; padding: 0;}
header .dropdown-menu .dropdown-item:focus, header .dropdown-menu .dropdown-item:hover {color: rgb(var(--primary1)); background-color: transparent;}
header .navbar .navbar-nav .menu-item-has-children>.nav-link::after {display: inline-block; margin-left: .255em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent;}

header .navbar .sub-menu-toggle {display: none;} 


.contact-links a{position: relative; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius:50%; border: 1px solid rgb(var(--bgGray));}  
.contact-links a img{filter: var(--imgWhite);}
.contact-links a:hover{border-color:rgb(var(--primary3)); background-color: rgb(var(--primary3));}

/* Typography */
.padding {padding: var(--padding) 0;}
.padding-sm {padding: var(--padding-sm) 0;}
.pb-sm{padding-bottom: var(--padding-sm);}
h2.title {font-size: clamp(1.5rem, 1.3rem + 1vw, 2.5rem); line-height: normal; display: inline-block; font-weight: 700; background: linear-gradient(90deg, rgb(var(--primary2)) 0%, rgb(var(--primary3)) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px;}
h3 {font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem); margin-bottom: 20px; color: rgb(var(--baseColor)); font-weight: 600; line-height: normal;}

/* banner */
#banner{position: relative;}
#video-wrap{overflow: hidden; height: 100vh; position: relative;}
#video-outer{ position: relative;}
#video-outer::before{content: ""; width: 100%; height:100%; background-color: rgba(0,0,0,0.4); left: 0; top: 0; display: block; position: absolute; margin: auto;z-index: 1;}
#video-outer video{ left: 0; top: 0; width: 100%; height: 100%;}
#video-wrap .banner-text h1{ margin-bottom: 1rem; color: rgb(var(--color_white)); font-size: clamp(2rem, 1.6rem + 2vw, 4rem); line-height: 1.1; font-weight: 700;} 
#video-wrap .banner-text p{color: rgb(var(--color_white)); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); margin-bottom: 0;}
#video-wrap .banner-text .btn-custom{ color: rgb(var(--color_white)); border-color: rgb(var(--color_white));}
#video-wrap .banner-text .btn-custom:hover,#video-wrap .banner-text .btn-custom:focus{ color: rgb(var(--primary1));}
#video-wrap .banner-text .btn-custom::before{background-color: rgb(var(--color_white));}

.effect{position: absolute; right: 0; bottom: 0; z-index: 1;}

.radius-6{border-radius: 6px;}
.radius-8{border-radius: 8px;}

.down-arrow{position: absolute; bottom: calc(var(--padding) / 2); width: 50px; }
.down-arrow img{animation: jumpInfinite 1.5s infinite; position: relative;}
@keyframes jumpInfinite {
  0% {top: 0;}
  50% {top: 20px;}
  100% {top: 0;}
}

/* about */
.about .shape-pic{position: absolute; left: 0; bottom: 0; }
.about .about-content{z-index: 1; position: relative;}


p{font-size: 1rem; line-height: 1.5rem;}
.text-justify p{text-align: justify;}
.text-justify{text-align: justify;}

/* service-item */
.services{position: relative;}
.services .shape-pic{position: absolute; right: 0; bottom: 0; }
.service-item {overflow: hidden; position: relative; margin-bottom: 30px;}
.service-item .img-wrapper {display: block; position: relative; padding-top: 100%; overflow: hidden;}
.service-item .img-wrapper img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s;}
.service-item .dvInfo {position: absolute; height: 100%; width: 100%; top: 0; left: 0;}
.service-item .dvInfo > a { position: relative; height: 100%; width: 100%; display: block; overflow: hidden;}
.service-item .dvInfo > a:before {content: ''; width: 100%; height: 80px; position: absolute; left: 0; bottom: 0; border-radius: 8px; background: rgba(0, 18, 41, 0.60); backdrop-filter: blur(2px); transition: all .3s linear;}
.service-item:hover .dvInfo > a:before{height: 100%;}
.service-item .dvInfo .bg {content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; overflow: hidden; transform: translateY(100%); transition-duration: 1s; opacity: 0;}
.service-item .dvInfo > a > span {position: absolute; display: block; width: 100%; left: 0; bottom: 0; padding: 25px;}
.service-item .dvInfo > a h3 {font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); font-weight: 600; color: rgb(var(--color_white)); line-height: normal; margin-bottom: 0; position: relative; -webkit-transition-delay: 2s; transition-delay: 2s;}
.service-item .dvInfo > a h3:before {content: ''; width: 24px; height: 24px; background-color: rgba(215, 224, 227, 0.25); clip-path: polygon(0 0, 0% 100%, 100% 0); position: absolute; left: -5px; top: 0; opacity: 0;}
.service-item .dvInfo > a .dvText {max-height: 0; overflow: hidden; display: block; -webkit-transition-property: max-height; transition-property: max-height; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; padding-top: 0; position: relative;}
.service-item .dvInfo > a .dvText p, .service-item .dvInfo > a .dvText ul {font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: rgb(var(--color_white)); line-height: normal; padding-bottom: 400px; margin-top: 30px;}
.service-item .dvInfo > a .dvText ul {padding-left: 0; list-style: none;}
.service-item .dvInfo > a .dvText ul li{position: relative; margin-bottom: 0.8rem;}
.service-item .dvInfo > a .dvText ul li::before{content: "- ";}
.service-item .dvInfo > a .dvText .link {font-size: 1rem; color: rgb(var(--color_white)); text-transform: uppercase; display: inline-block; position: absolute; left: 0; bottom: -30px; transition-duration: 1s;}
.service-item:hover .dvInfo .dvText { max-height: 340px; -webkit-transition-property: max-height; transition-property: max-height; -webkit-transition-duration: 1.5s; transition-duration: 1.5s;}
.service-item:hover img {transform: scale(1.2);}
.service-item:hover .dvInfo .bg {transform: translateY(0); opacity: 1;}
.service-item:hover .dvInfo > a .dvText .link {bottom: 0;}



.pic {overflow: hidden; position: relative;}
.pic img {transition: 0.4s;}
.pic:hover img {transform: scale(1.08);}


/* statistics  */
.statistics .oswal-video{display: block; position: relative; border-radius: 100px; overflow: hidden;}
.statistics .oswal-video>img{border-radius: 100px;}
.statistics .oswal-video .play-icon{position: absolute; width: 54px; height: 54px; inset: 0; margin: auto;}
.statistics .statistics-content .number{font-size: clamp(2rem, 1.6rem + 2vw, 4rem); line-height: normal; font-weight: 700; }
.statistics .statistics-content .number::after{content: "+";}
.statistics .statistics-content .info{font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); font-weight: 500; color: rgb(var(--primary3)); border-top: 1px solid #D9D9D9; padding-top: 10px; margin-top: 10px;}
.statistics .statistics-content .row [class^="col-"]:nth-child(2) .number::after{content: "M+";}

/* clientele */
.clientele {position: relative;}
.clientele-slider .item img{border-radius: 24px;}

.owl-flex .owl-stage .owl-item {display: flex; height: auto !important;}

/*projects */
.projects{background-image: url('../images/project-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: center top; background-size: cover; position: relative;}
.projects h2.title{background : transparent; -webkit-text-fill-color:rgb(var(--color_white))}
.projects .item{margin: 2px;}
.projects .card {border: none; border-radius: 8px; transition: all .3s linear;}
.projects .card .pic img{border-radius: 8px 8px 0 0; object-fit: cover;}
.projects .card .card-body{padding: 30px;}
.projects .card .card-body .card-title {margin-bottom: 20px; color: rgb(var(--primary1)); min-height: 58px;}
.projects .card .card-body ul{margin-bottom: 0;}
.projects .card .card-body ul li{margin-bottom: 20px; color: rgb(var(--baseColor)); text-align: justify;}
.projects .card .card-body ul li span{display: block; text-transform: uppercase; font-size: 12px; line-height: 24px; font-weight: 800;}
.projects .card:hover{background-color: rgb(var(--primary2));}
.projects .card:hover .card-body .card-title{color: rgb(var(--color_white));}
.projects .card:hover .card-body ul li{color: rgb(var(--color_white));}

#counter{position: absolute; right: 68px; color: rgba(var(--color_white),0.5); top: 22px; opacity: 0.5;}


.card-item .card-body{padding: 30px;}
.card-item .pic{border-radius: 8px 8px 0 0;}
.card-item p{color: rgb(var(--baseColor));}

.news-updates{position: relative;}
.news-updates::before{content: ""; width: 1px; height: 100%; background-color: #F4F4F4; display: block; position: absolute; left: 0;}
.news-updates .news-item{margin-bottom: 30px;}
.news-updates .news-item:last-child{margin-bottom: 0;}
.news-item .news-pic{width: 200px;}
.news-item .news-pic img{border-radius: 4px;}

.slider-vertical{height: 560px; overflow: hidden;}


/* footer */
.totop {bottom: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; position: fixed; right: -60px; z-index: 99; background-color: rgb(var(--primary1)); text-align: center; opacity: 0; border-radius: 50%; box-shadow: 0px 10px 29.7px 3.3px rgba(0, 0, 0, 0.2);}

.footer{background-color:  rgb(var(--primary4)); position: relative;}

.footer::before{content: ""; height: 150px; background-color: rgb(var(--color_white)); position: absolute; left: 0; top: 0; width: 100%; z-index: 0;}
.footer .top{position: relative; min-height: 300px; margin-bottom: var(--padding); position: relative; z-index: 1; padding: calc(var(--padding)/1.18) var(--padding);}
.footer .top .effect{position: absolute; bottom: auto; top: 0;}
.footer .top .bg{position: absolute; z-index: 0; inset: 0; border-radius:8px; min-height: 300px; background-size: cover; background-repeat: no-repeat; background-position: center center; }
/* .footer .top .bg::before{content: ""; border-radius:8px; opacity: 0.5; background: linear-gradient(93deg, rgb(var(--primary1)) 0%, rgb(var(--primary3)) 100%); position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; display: block;} */
.footer .top h2.title{background : transparent; -webkit-text-fill-color:rgb(var(--color_white))}
.footer .top h2.title span{font-size: clamp(1.25rem, 1rem + 1.25vw, 2.5rem); margin-bottom: 0; color: rgb(var(--color_white)); font-weight: 400; display: inline-block;}
.footer .top .btn-wrap .btn-custom{background-color: rgb(var(--color_white)); margin-top: 0; padding: 0.8rem 2rem; border-color: rgb(var(--color_white)); color: rgb(var(--baseColor)); margin-left: 15px;}
.footer .top .btn-wrap .btn-custom:hover{background-color: rgb(var(--primary1)); border-color: rgb(var(--primary1)); color: rgb(var(--color_white));}
.footer .top .btn-wrap .btn-custom:first-child{margin-left: 0;}


.footer .middle{padding-bottom: calc(var(--padding) /3); color: rgb(var(--color_white));}
.footer .middle hr{color: rgb(var(--primary3)); opacity: 1;}

.social-media li{margin-left: 1rem;}
.social-media li a{width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgb(var(--color_white)); display: flex; align-items: center; justify-content: center; transition: all .3s linear;}
.social-media li a:hover{background-color: rgb(var(--primary3)); border-color: rgb(var(--primary3));}

.footer .middle h6{margin-bottom: 12px; font-weight: 700;}
.footer .middle .menu-link li{margin-bottom: 10px;}
.footer .middle .menu-link li a{color: rgba(var(--color_white),0.5); text-decoration: none; position: relative; transition: all .3s linear; position: relative;}
.footer .middle .menu-link li a::before{content: "-"; left: 0; opacity: 0; position: absolute; visibility: hidden; color: rgb(var(--primary3)); display: inline-block; vertical-align: middle; transition: all .3s linear;}
.footer .middle .menu-link li a:hover::before{opacity: 1; visibility: visible;}
.footer .middle .menu-link li a:hover{color:rgb(var(--primary3)); padding-left: 15px; }
.footer .middle .address-link a{display: block; color: rgb(var(--color_white)); margin-bottom:1.5rem; text-decoration: none;}
.footer .middle .address-link a:hover{color: rgb(var(--primary3));}
.footer .middle h6 a{color:rgb(var(--color_white)); text-decoration: none;}
.footer .middle h6 a:hover{color:rgb(var(--primary3));}

.footer .middle .copyright{color: rgba(var(--color_white),0.5); font-size: 14px;}
.footer .middle .copyright a{color: rgba(var(--color_white),0.5); text-decoration: none; margin: 0 5px; display: inline-block;}
.footer .middle .copyright a:hover{color: rgba(var(--primary3),1);}
.footer .middle .designed-by{color: rgba(var(--color_white),0.5); font-size: 14px;}
.footer .middle .designed-by a{text-decoration: none; color: rgba(var(--color_white),0.5); margin: 0 5px; display: inline-block;}
.footer .middle .designed-by a:hover{color: rgba(var(--primary3),1);}


/* inner pages styles */
.inner-banner {padding-top: 23%; background-position: left top; background-size: cover; background-color: rgb(var(--baseColor)); position: relative;}
.inner-banner::after{content: ""; background-color: rgba(var(--color_black),0.6); inset: 0; position: absolute; width: 100%; height: 100%;}
.inner-banner .container { inset: 0; z-index: 1; transition: all .3s linear;}

.breadcrumb {--bs-breadcrumb-divider-color: rgb(var(--primary1)); --bs-link-color: rgb(var(--primary2)); font-size: 0.875rem; --bs-link-hover-color: rgba(var(--primary1));}
.breadcrumb .breadcrumb-item{margin-right: 8px; color: #A6A6A6;}
.breadcrumb .breadcrumb-item a {font-size: 1rem; color: #A6A6A6; }
.breadcrumb-item+.breadcrumb-item::before{color: #A6A6A6;}
.breadcrumb .breadcrumb-item.active {font-size: 1rem; color: #A6A6A6; padding-left: 0;}
.breadcrumb .breadcrumb-item a:hover {text-decoration: underline; color: rgb(var(--color_white));}
.breadcrumb .breadcrumb-item+.breadcrumb-item{padding-left: 0;}


.inner-banner h1{font-size: clamp(2rem, 1.6rem + 2vw, 4rem); font-weight: 700; line-height: normal; color: rgb(var(--color_white));}

.parallax-effect{background-color: #ddd; width: 150px; height: 150px; transform-style: preserve-3d}
.parallax-effect span{transform: translateZ(20px); width: 20px; height: 20px; position: absolute; margin: auto;
  inset: 0;
  background-color: #fff;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
}

/* vision-block */
.vision-block{position: relative;}
.vision-block .text{transform: translateZ(20px); }
.vision-block::after{content: ""; background-color: rgb(var(--bgBlue)); position: absolute; height: 212px; left: 0; right: 0; bottom: 0; width: 100%;}
.vision-block .container{position: relative; z-index: 2;}
.vision-block .block{min-height: 424px; padding: calc(var(--padding) / 1.15) calc(var(--padding) / 2) calc(var(--padding) / 2);}
.vision-block .row [class^="col-"]:nth-child(1) .block{background-color: rgb(var(--primary3));} 
.vision-block .row [class^="col-"]:nth-child(2) .block{background-color: #7EC109;} 
.vision-block .row [class^="col-"]:nth-child(3) .block{background-color: #FF9A24;} 
.vision-block .block .icon{margin-bottom: 20px; max-width: 65px; display: flex; align-items: flex-end; justify-content: flex-start;}
.vision-block .block h3{font-size: clamp(1.125rem, 0.95rem + 0.875vw, 2rem); font-weight: 600; }
.vision-block .block p{margin-bottom: 0;}


/* group-company */
.group-company .effect{left: 0; right: auto;}
.group-company .company-list{ height: 100%; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; text-align: center; padding: calc(var(--padding) / 2)  calc(var(--padding) / 4.5); transition: all .3s linear;}
.group-company .company-list:hover{box-shadow: 0px 0px 18px 0px rgba(0, 35, 69, 0.10);}
.group-company .company-list .company-logo{display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: rgb(var(--bgBlue)); width: 112px; height: 112px; margin:0 auto 10px;}
.group-company .company-list h4{margin-bottom: 10px; font-weight: 600;}
.group-company .company-list .link{text-decoration: none; font-weight: 600; color: rgb(var(--primary1)); display: block; margin-top: auto;}


/* profile-info */
.profile-info{margin-bottom: 35px;}
.profile-info .card{border-radius: 0; overflow: hidden; border: none; position: relative;}
.profile-info .card:hover{border-radius: 8px;}
.profile-info .card::before{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-color: rgb(var(--primary3)); opacity: 1; visibility: visible;}
.profile-info .card:hover::before{opacity: 0; visibility: hidden;}
.profile-info .card .circle{clip-path: circle(50% at 50% 50%); position: absolute; inset: 0; width: 300px; height: 300px; margin: 0 auto; transition: all .3s linear;}
.profile-info .card-body{position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 0; padding-bottom: 30px; text-align: center;}
.profile-info .card-body .card-title{font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);}
.profile-info .card:hover .circle{clip-path: circle(100% at 50% 50%);}
.profile-info .card .circle::after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100px; opacity: 1; visibility: visible; background: linear-gradient(to top, rgba(0,.35,69,0.5) 40%, transparent 100%);  transition: all .2s linear; }
.profile-info .card:hover .circle::after{bottom: -35%; width: calc(100% + 20px); margin: 0 auto; left: -20px; right: -20px;}
.profile-info .card .pic img{transform: scale(1.5); transform-origin: 30% 0%;}
.profile-info .card:hover .pic img{transform: scale(1.1);}
.profile-info .card .card-body h3{color: rgb(var(--primary5)); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);}
.profile-info .card .card-body p{margin-bottom: 0; font-size: 15px; color: #646464;}
.profile-info .card:hover .card-body h3{color: rgb(var(--color_white));}
.profile-info .card:hover .card-body p{color: rgb(var(--color_white));}

/* subsidiary */
.subsidiary{background-image: url('../images/subsidiary-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: center top; background-size: cover; position: relative;}
.subsidiary h2.title{background : transparent; -webkit-text-fill-color:rgb(var(--color_white))}
.subsidiary-item{padding:  calc(var(--padding) / 2.5) calc(var(--padding) / 2); overflow: hidden; border: none;}
.subsidiary-item .effect{right: 0; top: 0; bottom: auto; }
.subsidiary-item .subsidiary-logo{margin-bottom: 30px;}
.subsidiary-item p{color: #646464;}

/* business-partners */
.business-partners{background-image: url('../images/business-partners-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: center top; background-size: cover; position: relative;}
.business-partners .card-item .icon{width: 88px;}
.business-partners .card-item .name-wrap .card-title{color: #565656;}
.business-partners .card-item .name-wrap p{margin-bottom: 0;}


/* accreditation-item */
.accreditation-item{border:none; }
.accreditation-item:hover .pic img{transform: scale(1.08);}
.accreditation-item .pic{height: 312px; border-radius: 8px; border: 1px solid #D9D9D9; border-bottom-right-radius: 0; border-bottom-left-radius: 0; display: flex; align-items: center; justify-content: center;}
.accreditation-item .cert-name{padding: 18px; border-radius:0 0 8px 8px; }

/*csr*/
.csr{position: relative;}
.csr::after{content: ""; display: block; width: 100%; height: calc(var(--padding)*2 - 25px); background-color: rgb(var(--color_white)); position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;}
.csr .pic {position: relative; z-index: 1;}

/* list-style01 */
.list-style01{margin: 0; padding: 0; list-style: none; gap: 0 20px;}
.list-style01 li{font-size: clamp(0.9375rem, 0.9rem + 0.1875vw, 1.125rem); position: relative; border-bottom: 1px solid #d9d9d9; padding: 20px 0 20px 20px;}
.list-style01 li::before{content: ""; width:12px; height: 12px; background-color: #C8D756; border-radius: 50%; position: absolute; left: 0; top: 28px;}
.list-style01.h-list li{width:calc(50% - 10px);}
.list-style01.h-list li:nth-last-child(2){border-bottom: none;}
.list-style01 li:last-child{border-bottom: none;}




.pic {overflow: hidden; position: relative;}
.pic img {transition: 0.4s; object-fit: cover;}
.pic:hover img {transform: scale(1.08);}

/* card-block */
.card-block {background-color: rgb(var(--bgBlue)); border: none; transition: all .3s linear; }
.card-block .pic img{border-radius: 8px 8px 0 0; transform: none; object-fit: cover;}
.card-block .card-body{padding: 20px; display: flex; flex-direction: column; justify-content: space-between;}
.card-block .card-body .know-more{text-decoration: none; text-transform: uppercase; color: rgb(var(--primary1));}
.card-block .card-body h3{margin-bottom: 10px; color: rgb(var(--primary1));}
.card-block .card-body p{color: #646464;}
.card-block:hover .pic img{transform: scale(1.08);}
.card-block:hover{background-color: rgb(var(--primary2));}
.card-block:hover .card-body h3,.card-block:hover .card-body p{color: rgb(var(--color_white));}
.card-block:hover .card-body{color: rgb(var(--color_white));}
.card-block:hover .card-body .know-more{color: rgb(var(--color_white));}

/* banner-large */
.banner-large::before{content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--padding)*2); background-color: rgb(var(--color_white));}
.banner-large .effect{left: 0; bottom: 0; right: auto;}

/* service-block */
.service-block{border: none; overflow: hidden;}
.service-block::after,.service-block::before{transition: all .3s linear;}
.service-block::after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; border-bottom: 6px solid #C8D756; display: block; z-index: 1;}
.service-block::before{content:""; background-color: rgb(var(--bgBlue)); position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block;}
.service-block:hover::after{bottom: -20px;}
.service-block:hover::before{background-color: rgba(var(--primary1),0.6);}
.service-block:hover{border-bottom: none;}
.service-block .service-title{position: absolute; line-height: normal; color: rgb(var(--baseColor)); width: 100%; height: 100%; text-align: center; font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.25rem); font-weight: 600; margin: auto; z-index: 1; display: flex; align-items: center; justify-content: center;}
.service-block:hover .service-title{color: rgb(var(--color_white));}


/* tab-wrapper */
.tab-wrapper{border-bottom: 1px solid #D8D8D8;}
.tab-wrapper #tabs{border: none !important; height: 100%; position: relative;}
.tab-wrapper #tabs .nav-item{position: relative; height: 100%; display: flex; align-items: flex-start;}
.tab-wrapper #tabs .nav-item .nav-link{text-align: left; border: none; padding: 0; border: none; height: 100%; padding-bottom: 30px;}
.tab-wrapper #tabs .nav-item .nav-link span{font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.25rem); color: #2C2C2C; font-weight: 600;}
.tab-wrapper #tabs .nav-item .nav-link em{font-style: normal; font-size: 14px; color: #A6A6A6; line-height: 24px;}
.tab-wrapper #tabs .nav-item .nav-link.active:after { content: ""; display: block; background:rgb(var(--primary3)); width: 100%; height: 6px; position: absolute; left: 0; right: 0; bottom: 0;}

/* product-list */
.product-list{border-bottom: 1px solid #D8D8D8; position: relative; overflow: hidden;}
.product-list .row{position: relative; z-index: 1;}
.product-list .effect{z-index: 0;}
.product-list::after{content: "";position: absolute; left: 0; right: 0; bottom: -20px; width: 100%; border-bottom: 6px solid rgb(var(--primary3)); display: block; z-index: 1; transition: all .3s linear;}
.product-list:hover{border-radius: 8px; background-color: rgb(var(--bgBlue));}
.product-list:hover h3{color: rgb(var(--primary1));}
.product-list:hover::after{bottom: 0;}
.product-list li{color: #646464; margin-bottom: 20px; display: flex; align-items: center; line-height: normal;}
.product-list li:last-child{margin-bottom: 0;}
.product-list li span{font-size: 15px; font-weight: 600; text-transform: uppercase; width: 120px; flex-shrink: 0;}
.product-list .icon{position: absolute; right: 15px; bottom: 15px; background-image: url('../images/gallery-icon.png'); background-repeat: no-repeat; background-position: 0 0; width: 36px; height: 36px; background-size: cover; display: block; z-index: 1;}
.product-list .card .pic::after{content: ""; display: block; background: linear-gradient(to bottom, transparent 0%, rgba(var(--color_black),0.45) 100%); width: 100%; height: 80px; position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px;}
.gdesc-inner{background-color: rgb(var(--primary2)); }
.glightbox-clean .gslide-title{margin-bottom: 0; font-weight: 600; color: rgb(var(--color_white));}


.clientele-item{transition: all .3s linear;}
.clientele-item:hover {box-shadow: 0px 0px 18px 0px rgba(0, 35, 69, 0.10);}

.contact-card{padding: calc(var(--padding) / 2.5); position: relative; color: #434343; height: calc(50% - 12px);}
.contact-card address{position:relative; z-index:1;}
.contact-card .row{position: relative; z-index: 1;}
.contact-card .row [class^="col-"]{position: relative;}
.contact-card .row [class^="col-"]:first-child::after{content: ""; position: absolute; right: 12px; top: 0; height: 100%; background-color: #d9d9d9; width: 1px;}
.contact-card::after{content: ""; position: absolute; right: 0; bottom: 0;  background-repeat: no-repeat; background-position: 0 0; display: block; z-index: 0;}
.contact-india::after{ background-image: url('../images/india-pic.png'); width: 379px; height: 423px; }
.contact-italy::after{ background-image: url('../images/italy-pic.png'); width: 198px; height: 266px; }
.contact-africa::after{ background-image: url('../images/africa-pic.png'); width: 179px; height: 188px; }
.contact-card a{color: #434343; text-decoration: none; margin-bottom: 20px; font-weight: 600;}
.contact-card a:hover{color: rgb(var(--primary1));}
.contact-card a.map-link{text-decoration: underline; display: inline-block !important; font-weight: 400;}
.contact-card a:last-child{margin-bottom: 0;}

/* world-map */ 
.world-map{position: relative;}
.world-map .location{position: absolute; width: 14px; height: 14px; border-radius: 50%; background-color: rgb(var(--primary3)); border: 2px solid transparent; outline: 2px solid rgb(var(--color_white));}
.world-map .canada{left: 16%; top: 27%;}
.world-map .usa{left: 18%; top: 40%;}
.world-map .nigeria{left: 48.6%; top: 58.5%;}
.world-map .egypt{left: 54.5%; top: 48%;}
.world-map .italy{left: 50%; top: 37.5%;}
.world-map .oman{left: 62%; top: 52%; }
.world-map .qatar{ left: 60.5%;top: 48%;}
.world-map .uae{left: 61.5%; top: 49.5%;}
.world-map .india{left: 67%; top: 50%; }
.world-map .netherlands{left: 48%; top: 32%;}


.country-list {margin: 30px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;}
.country-list li{padding: 4px 10px; font-size: 0.875rem; background-color: rgb(var(--color_white)); margin:0 8px 8px;}

/* inquiry-block */
.inquiry-block .form-control{background-color: rgb(var(--bgGray)); border: none; border-radius: 44px; padding: 13px 20px;}
.inquiry-block .form-control:hover,.inquiry-block .form-control:focus{box-shadow: none;}
.inquiry-block textarea.form-control{resize: none; height: 150px; border-radius: 28px;}
.inquiry-block .btn-custom{padding: 0.8rem 3rem; text-transform: none; color: rgb(var(--baseColor)); border-radius: 50px; border: 2px solid rgb(var(--primary2));}
.inquiry-block .btn-custom:hover,.inquiry-block .btn-custom:focus{border-color:rgb(var(--primary2)); color: rgb(var(--color_white)); background-color: rgb(var(--primary2));}
.inquiry-block .form-select{background-color: rgb(var(--bgGray)); border: none; border-radius: 44px; padding: 13px 20px;}
.inquiry-block .form-select:hover,.inquiry-block .form-select:focus{box-shadow: none;}
.inquiry-block .input-group{ border-radius: 44px;}
.inquiry-block .input-group .form-control{border: 1px dashed rgb(var(--baseColor));}
.inquiry-block .input-group .wpcf7-form-control-wrap{width: 100%; margin-bottom: 0;}
.inquiry-block .input-group .input-group-text{border: none; padding-right: 30px; background-color: rgb(var(--bgGray)); border-radius: 44px;}
.wpcf7-spinner{position:absolute;}

.page-id-20 .glightbox-clean .gslide-media{border-radius: 8px;}
.proflie-popup .inline-inner{position: relative;}
.proflie-popup .gtrigger-close{position: absolute; right: 0; top: 0;}
.proflie-popup h4{color: rgb(var(--primary5)); position:relative; z-index:1; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); font-weight: 600; line-height: normal;}
.proflie-popup h4 span{font-size: 15px; color: #646464; font-weight: normal;}
.proflie-popup h4 small{margin-bottom: 0; display: block; font-size: 15px; color: #646464; font-weight: normal;}
.proflie-popup h4.post {color: #646464;}
.proflie-popup p{text-align: justify; position:relative; z-index:1;}
.page-id-20 .glightbox-clean .gprev,.page-id-20 .glightbox-clean .gnext{display: none;}
.page-id-20 .glightbox-clean .gclose{display: none;}
.proflie-popup .block{position:relative;}
.proflie-popup .block:before{content:""; inset:-5px; background-color:#f5f5f5; opacity:0; visibility:hidden; width: calc(100% + 10px);
    height: calc(100% + 10px); position: absolute; z-index: 0; transition:all .3s linear;}
.proflie-popup .block:hover:before{opacity:1; visibility:visible;}