:root{
  --primary1: 39,70,151; /* #274697 */
  --primary2: 249,166,68; /* #F9A644 */
  --primary3: 32,68,123; /* #20447B  */
  --primary4: 30,30,30; /* #1E1E1E */
  --bs-body-color: 52,54,56; /* #343638 */
  --color_black: 0,0,0;
  --color_white: 255,255,255;
  --baseFont: "Lato", sans-serif;
  --imgBodycolor: invert(18%) sepia(9%) saturate(256%) hue-rotate(169deg) brightness(99%) contrast(91%);
  --imgPrimary1: invert(21%) sepia(64%) saturate(1528%) hue-rotate(204deg) brightness(99%) contrast(95%);
  --imgPrimary2: invert(85%) sepia(14%) saturate(6836%) hue-rotate(327deg) brightness(102%) contrast(95%);
  --imgPrimary3: invert(24%) sepia(7%) saturate(6366%) hue-rotate(182deg) brightness(96%) contrast(95%);
  --imgPrimary4: invert(8%) sepia(9%) saturate(0%) hue-rotate(192deg) brightness(108%) contrast(94%);
  --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%);
  --padding: clamp(2.1875rem, 1.4875rem + 3.5vw, 4.375rem);
  --mb:1.875rem;
  --bs-breadcrumb-divider: '/';
}


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

.transition {-webkit-transition: all .3s linear; transition: all .3s linear;}

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

/* button custom */
.btn-custom {padding: 8px 18px; color: rgb(var(--color_black)); font-size: 1.125rem;  margin-top: 1rem; border: 1px solid rgb(var(--primary2)); border-radius: 0; background-color: rgb(var(--primary2)); line-height: normal; display: inline-flex; align-items: center;}
.btn-custom:hover,.btn-custom:focus,.btn-custom:active{outline: none; color: rgb(var(--color_white)); --bs-link-color-rgb:none; border-color: rgb(var(--primary2)); background-color: rgb(var(--primary2));}
.btn-custom .icon{width: 14px; display:flex; transition: all .3s linear;}
.btn-custom .icon img{width: 12px; margin: auto;}
.btn-custom:hover .icon{transform: rotate(45deg); transform-origin: center center; position: relative;}
.btn-custom:hover,.btn-custom:focus,.btn-custom:active{color: rgb(var(--color_black));; border-color: rgb(var(--primary2)) !important; background-color: rgb(var(--primary2)) !important;}

html {scroll-behavior: auto !important;}

.owl-carousel.style01 .owl-nav { display: flex; justify-content: center; margin-top: 1rem;}
.owl-carousel.style01 .owl-nav button{width: 31px; height: 31px; display: flex; align-items: center; justify-content: center;}
.owl-carousel.style01 .owl-nav button:before {content: ''; background: url('../images/arrow02.png') center center no-repeat; width: 31px; height: 31px; display: block; background-size: contain; filter: var(--imgWhite);}
.owl-carousel.style01 .owl-nav button.owl-prev:before {transform: rotate(180deg);}
.owl-carousel.style01 .owl-nav [class^='owl-'].disabled {opacity: 0.5;}
.owl-carousel.style01 .owl-nav.disabled {display: none;}

.owl-carousel .item:not(:first-child) {display: none;}

/*social-media */
.social-media{display: flex; align-items: center;}
.social-media a{width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; margin: 0 8px; transition: all .3s linear;}
.social-media a img{filter: var(--imgBodycolor);}
.social-media a:hover img{filter: var(--imgPrimary1);}

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

/* header */
header {width: 100%; position: fixed; left: 0; right: 0; top: 0; margin: 0 auto; transition: all 0.3s; z-index: 99 !important; background-color: rgb(var(--color_white));}
header .navbar { transition: all 0.3s linear; z-index: 10; align-items: flex-start;  padding: 0; position: relative;}
header .navbar .navbar-toggler{border: none;}
header .navbar .navbar-toggler:focus{outline: none; box-shadow: none;}
header .navbar .navbar-toggler .navbar-toggler-icon{--bs-navbar-toggler-icon-bg1:none;}
header .navbar .navbar-brand {width: 200px; display: flex; justify-content: center; align-items: center;}
header .navbar .navbar-brand img{transition: all .2s linear;}
header .navbar .navbar-nav>li {margin: 0 2.5rem; position: relative;}
header .navbar .navbar-nav li .nav-link {transition: 0.5s; font-size: 1.063rem; padding: 1.7rem 0; font-weight: 600; text-transform: uppercase; color: rgb(var(--color_white)); position: relative;}
header .navbar .navbar-nav li .nav-link:hover, header .navbar .navbar-nav li .nav-link.current {color: rgb(var(--primary2));}
header.fixed {box-shadow: 0px 4px 50px rgba(44, 48, 50, 0.1);} 

header .navbar>.container{align-items: initial;}
header .top-right-wrap{position: relative;}
header .top-right-wrap::after{content: ""; position: absolute; left: 0; width: 100vw; top: 0; height: 100%; background-color: rgb(var(--primary2));}
header .contact-number{flex-shrink: 0; align-items: center; justify-content: flex-end; z-index: 1; padding: 0 0 0 22px;}
header .contact-number a{text-decoration: none; font-weight: 600;}
header .contact-number a span{display: inline-block;}
header .contact-number a .icon{margin-right: 3px;}


.navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
header .navbar .navbar-toggler{background-color: rgb(var(--primary1)); border-radius: 0;}
.offcanvas .btn-close{background-color: rgb(var(--primary1)); width: 30px; height: 30px; padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x) ;
  --bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
.offcanvas .btn-close:focus{box-shadow: none;}

header #main-menu{background-color: rgb(var(--primary1)) !important; display: flex; justify-content: center;}

/* banner */
.banner {height: 100vh; height: 100svh; max-height: 870px;  transition: all .2s linear; margin-top: 82px; position: relative;  background-repeat: no-repeat; background-position: center center; background-size: cover; }
.banner::before{content: ""; position: absolute; inset: 0; width: 100%; height: 100%; background:#0D4456; opacity: 0.15;}
.banner .banner-content{width: 550px; }
.banner .banner-content .banner-text{color: rgb(var(--primary1));}

/* banner-slider */
.banner-slider{position: relative; z-index: 2; margin-top: -80px; transition: all .3s linear;}
.banner-slider .slider .item .banner-pic .text{top: auto; display: flex; align-items: flex-end; padding: 1.5rem; bottom: 0; font-weight: 600; color: rgb(var(--color_white)); text-transform: uppercase; font-size: 1.875rem; line-height: normal;}
.banner-slider .slider .item .banner-pic .text .icon{background-image: url('../images/arrow.svg'); background-repeat: no-repeat; background-position: 0 0; width: 20px; height: 21px; margin-left: 15px; margin-bottom: 7px;}
.banner-slider .slider .item .row [class^="col-"] .banner-pic{height: 50%; }
.banner-slider .slider .item .row [class^="col-"]:first-child .banner-pic{height: 100%;}
.banner-slider .slider .item .pic-outer{height: calc(100% - 0.5rem);}
.banner-slider .slider .item .pic-outer .banner-pic:first-child{margin-bottom: 0.5rem;}


/* Typography */
.padding {padding: var(--padding) 0;}

/* about */
.about{padding-top: calc(var(--padding) / 1.6); background-image: url('../images/about-bg.webp'); background-repeat: no-repeat; background-position: center bottom; background-size: cover; position: relative;}
.about:before {content: ""; background-color: #fbfbfb; position: absolute; width: 100%; right: 0; top: 0; height: 59%; top: -59%;}
.about .about-content p{font-size: 1.125rem; color: rgb(var(--primary4));}
.about .about-content p:first-child{font-size: 1.375rem;}
.about .about-content .btn-custom{background-color: transparent !important; text-decoration: underline; text-underline-offset: 3px; border: none !important; color: rgb(var(--bs-body-color)); font-weight: 700;}
.about .about-content .btn-custom .icon{background-color: rgb(var(--primary2)); width: 21px; height: 21px;}
.about .about-content .btn-custom .icon img{filter: var(--imgWhite);}


/* applications */
.applications{background-image: url('../images/application-bg.webp'); background-repeat: no-repeat; background-position: 0 0; background-size: cover; position: relative;}
.applications::before{content: ""; background-color: #153673; opacity: 0.95; position: absolute; inset: 0; width: 100%; height: 100%; display: block;}
.application-content p{font-size: 1.25rem; color: rgb(var(--color_white));}
.applications .app-text{padding: 1.5rem 3rem;}
.applications .application-slider .item-inner{height: 100%;}
.applications .application-slider .item-inner:after { content: ""; position: absolute; inset: 1rem; border: 1px solid rgb(var(--primary2)); width: calc(100% - 2rem); height: calc(100% - 1.2rem);}
.applications .application-slider .item:hover .item-inner .pic img {transform: scale(1.08);}
.applications .application-slider.owl-carousel .owl-stage{display: flex;}
.applications .application-slider .item { display: flex; flex: 1 0 auto; height: 100%;}
.applications .application-slider .item .item-inner{ position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: stretch;}

.application .list-style01 li{color: rgb(var(--bs-body-color));}

/* product-item */
.product-item{transition: 0.3s;}
.product-item h4{color: rgb(var(--color_black)); margin-bottom: 0;}
.product-item:hover h4{color: rgb(var(--primary1));}

.product-slider.owl-carousel.style01 .owl-nav{justify-content: flex-end; position: absolute; bottom: 15px; right: 15px;}
.product-slider.owl-carousel.style01 .owl-nav button{background-color: rgb(var(--primary1)); width: 51px; height: 51px;}


/* engineering */
.engineering::before{content: ""; width: 100%; height: 50%; position: absolute; left: 0; right: 0; background-color:#F7FEE7; display: block;}
.engineering .card{padding: var(--padding);}

/* pic */
.pic {overflow: hidden;}
.pic img {transition: 0.4s;}
.pic:hover img {transform: scale(1.08);}
.pic.has-arrow::after{content: ""; background-image: url('../images/arrow02.svg'); background-repeat: no-repeat; position: absolute; right: 10px; bottom: 10px; width: 24px; height: 24px; transition: all .3s linear;}
.pic.has-arrow:hover::after{opacity: 0; visibility: hidden;}
.pic .sub-list{position: absolute; z-index: 2; padding: 24px; left: 0; bottom: 0; background-color: rgba(var(--color_black),0.7); display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; visibility: hidden;}
.pic .sub-list li{color: #B0E5F0; position: relative; font-size: 1.125rem; padding-left: 18px; margin-bottom: 8px; line-height: 1.3;}
.pic .sub-list li:last-child{margin-bottom: 0;}
.pic .sub-list li::before{content: ""; background: url('../images/arrow.svg') no-repeat 0 0; width: 9px; height: 12px; position: absolute; left: 0; top: 5px;}
.pic:hover .sub-list{opacity: 1; visibility: visible;}

/* industry */
.industry{background-image: url('../images/industry-bg.webp'); background-repeat: no-repeat; background-position: center bottom; background-size: cover; position: relative; padding-bottom: calc(var(--padding) * 6);}
.industry::after{content: ""; background-color: rgb(var(--primary2)); opacity: 0.95; position: absolute; inset: 0; width: 100%; height: 100%; display: block;}
.industry-item{background-color: rgb(var(--primary2)); position: relative; overflow: hidden;}
.industry .owl-carousel.style01 .owl-nav button:before{filter: var(--imgBlack);}
.industry-item .industry-content {position: absolute; overflow: hidden; bottom: 60px; background-color: rgba(var(--color_white),0.9); min-height: 75px; margin-bottom: 0; padding:12px 24px; line-height: normal; z-index: 1; left: 0; right: 0; transition: all .3s linear;}
.industry-item .industry-content h5{margin-bottom: 0;}
.industry-item .industry-content p{margin-bottom: 0; display: none; margin-top: 0.5rem; transition: all .3s linear; line-height: normal;}
.industry-item:hover .industry-content{min-height: 180px; bottom: 0;}
.industry-item:hover .industry-content p{display: block; }

/* infra-group */
.infra-group{transition: all .3s linear; margin-top: 298px; position: absolute; left: 0; right: 0; margin: 0 auto; z-index: 2;}
.infra-group .infra-item{position: relative;}
.infra-group .infraslider + h4{position: absolute; font-size: 1.875rem; padding: 30px 40px; max-width: 400px; display: flex; flex-direction: column; background-color: rgb(var(--primary1)); bottom: 0; right: 0; width: 85%; margin-bottom: 0; z-index: 1;}
.infra-group .infraslider + h4 .icon {background-color: rgb(var(--primary2)); width: 21px; height: 21px; display: flex;}
.infra-group .infraslider + h4 .icon img { width: 12px; margin: auto;}
.infra-group .card {height: calc(100% - 6rem);}
.infra-group .card .row{height: 100%; justify-content: center; align-items: center;}
.infra-group .card .item{height: 50%; display: flex; flex-direction: column; justify-content: center;}
.infra-group .card .item .icon{margin-bottom: 1rem;}
.infra-group .card .item .icon img{transition: all .3s linear;}
.infra-group .card .item:hover .icon img{transform: scale(1.1);}
.infra-group .card .item .text{text-transform: capitalize;}

  


/* footer */
.footer .top{background-image: url('../images/footer-bg.png'); background-repeat: no-repeat; background-position: center bottom; background-size: cover; position: relative; position: relative; display: flex; justify-content: center; z-index: 1; padding: calc(var(--padding)*1.5) 0 calc(var(--padding)/1.18); padding-top: 0;}
.home .footer .top{padding: calc(var(--padding)*1.5) 0 calc(var(--padding)/1.18);}
.footer .top h2.title span{font-weight: 300;}
.footer .middle .f-logo{margin-left: -1.3rem;}
.footer .middle .address .item .text{font-weight: 500;}
.footer .middle h5{text-transform: uppercase;}
.footer .middle .footer-links{padding-left: 1rem; margin: 0;}
.footer .middle .footer-links li{margin-bottom: 8px;}
.footer .middle .footer-links li a{text-decoration: none;}
.footer .middle .footer-links li ul{list-style: none; padding-left: 0.5rem;}
.footer .middle .footer-links li ul li::before{content: "-"; margin-right: 0.5rem;}

.footer .social-media a img{filter: var(--imgWhite);}
.footer .social-media a:hover img{filter: var(--imgPrimary2);}

.footer .bottom{background-color: rgb(var(--bs-body-color));}
.footer .copyright{font-size: 15px; color: rgba(var(--color_white),0.7);}
.footer .copyright a{color: #ED5B09; font-weight: 500; text-decoration: none;}
.footer .copyright a:hover{color: rgb(var(--color_white));}
.footer .designed-by{font-size: 15px; color: rgba(var(--color_white),0.7);}
.footer .designed-by a{text-decoration: none; color: inherit; font-weight: 700;}
.footer .designed-by a:hover{color: rgb(var(--color_white));}

.cust-form{position: relative;}
.cust-form #inquiry_loader{position: absolute; inset: -30px; display: flex; justify-content: center; align-items: center; background-color: rgba(var(--primary4),0.8);}
.cust-form .form-control{border: 1px solid rgb(var(--primary2)); padding: 0.8rem 1rem; background-color: rgb(var(--color_white)); border-radius: 0; color: rgb(var(--primary1));}
.cust-form .btn-custom{background-color: rgb(var(--primary1)); border-color: rgb(var(--primary1)); color: rgb(var(--color_white)); text-transform: uppercase;}

.form-control::-webkit-input-placeholder {color: rgb(var(--primary1));}
.form-control::-moz-placeholder {color: rgb(var(--primary1));}
.form-control:-ms-input-placeholder {color: rgb(var(--primary1));}
.form-control:-moz-placeholder {color: rgb(var(--primary1));}


.totop {bottom: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; position: fixed; right: -60px; z-index: 10; 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); transition: 0.4s;}
.totop img{transform: rotate(-90deg); width: 10px; filter: var(--imgWhite);}
.totop:hover {background-color: rgb(var(--primary2));}


/* inner pages styles */
.inner-banner {padding-top: 20.10%; background-position: center top; background-size: cover; background-repeat: no-repeat;}
.inner-banner:before {content: ''; position: absolute; inset: 0; background: rgba(var(--primary1),0.7)}
.inner-banner .container {position: absolute; inset: 0; z-index: 1; transition: all .3s linear; display: flex; align-items: center; justify-content: center; flex-direction: column; }
 

/* about-content */
.about-content p{color: rgb(var(--primary4));}


/* mission-block */
.mission-block .container{background-color: rgb(var(--primary2));}
.mission-block p{color: rgb(var(--primary4));}

.list-style01 li{position: relative; padding-left: 35px; margin-bottom: 1rem; color: rgb(var(--primary4));}
.list-style01 li:last-child{margin-bottom: 0;}
.list-style01 li::before{content: ""; background-image: url('../images/arrow03.svg'); background-repeat: no-repeat; background-position: 0 0; width: 30px; height: 30px; position: absolute; left: 0; top: 0; transition: all .3s linear;}
.list-style01 li:hover::before{transform: rotate(20deg);}

.bg{background-color: #F5F5F5;}

/* key-advantage */
.key-advantage .key-item{ padding: clamp(1rem, 0.72rem + 1.4vw, 1.875rem);}
.key-advantage .key-item .icon img{transition: all .3s linear;}
.key-advantage .key-item:hover .icon img{transform: scale(1.1);}
.key-advantage .key-item .text{text-transform: capitalize;}

/* cust-tab */
#cust-tab{background-color: rgb(var(--primary2)); position: relative; padding: clamp(1.5rem, 0.78rem + 3.6vw, 3.75rem) clamp(0.9375rem, 0.6375rem + 1.5vw, 1.875rem);}
#cust-tab::before{content: ""; background-color: rgb(var(--primary2)); width: 100%; height: 100%; position: absolute; left: -100%; top: 0; }
#cust-tab .nav-item{margin-bottom: 8px;}
#cust-tab .nav-link{position: relative; padding-left: 30px;  border: none; border-radius: 0; color: rgb(var(--bs-body-color)); text-transform: uppercase; width: 100%; text-align: left; font-weight: 500;}
#cust-tab .nav-link::before{content: ""; background-image: url('../images/arrow04.svg'); background-size: cover; background-repeat: no-repeat; background-position: 0 0; width: 10.2px; height: 11px; position: absolute; left: 10px; top: 16px; transition: all .3s linear;}
#cust-tab .nav-link.active::before,#cust-tab .nav-link:hover::before{transform: rotate(20deg);}

.image{position: relative; min-height: 950px;}
.image img{position: absolute; left: -67%;}

hr{color: rgb(var(--primary2)); opacity: 1; margin: 1.5rem 0;}
.tab-content p, .tab-content ul li{font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);}
.tab-content .list-style01 li{color: rgb(var(--bs-body-color)); }
.tab-content .list-style01 li::before{top: 2px;}

.contact .address .item .text,.contact .address .item .text a{font-size: 1.125rem;}
.contact .address .item .icon{position: relative; top: 2px;}

.list-style02{display: flex; flex-wrap: wrap;}
.list-style02 li{position: relative; margin-right: 1.5rem; margin-top: 1.5rem; }
.list-style02 li a{text-decoration: none; background-color: rgb(var(--primary2)); line-height: normal; text-transform: uppercase; font-weight: 600; padding: 1rem; display: inline-block; color: rgb(var(--bs-body-color)); font-size: 1.125rem;}
.list-style02 li a::after{content: ""; display: inline-block; vertical-align: middle; background-image: url('../images/arrow03.svg'); background-repeat: no-repeat; background-position: 0 0; width: 30px; height: 30px;  transition: all .3s linear;}
.list-style02 li:hover a::after{transform: rotate(20deg);}
.list-style02 li:hover a{color: rgb(var(--primary1));}