:root{
    --bg-blue:#1C47C7;
    --bg-blue-deep:#15359A;
    --land:#E7E8E8;
    --land-line:#B9C4E0;
    --land-hover:#FFFFFF;

    --samba-red:#D23C35;
    --samba-red-dark:#B22E28;
    --glopower-blue:#B2D2ED;
    --glopower-blue-dark:#7FB1DC;
    --eastafrica-teal:#458C8B;
    --eastafrica-teal-dark:#326665;
    --uila-teal:#5ABABC;
    --uila-teal-dark:#3F9598;
    --ink:#0E2A6B;
    --paper:#FFFFFF;
    --gold:#F0A500;
  }
html {scroll-behavior: smooth;  overflow-x: hidden;}
li, td, table, tr, th, thead, input, label, select, textarea , button {
	font-weight:400;
	font-size:16px;
	color:#010000;
	outline:none;
	font-family: "akzidenz-grotesk-next-extend",sans-serif; 
}
h1 {
	font-family: "akzidenz-grotesk-next-extend",sans-serif; 
	font-weight:400;
	font-size:45px;
	text-align:center;
	color: #010000;
	margin-bottom:20px;
}
h2 {
	font-family: "akzidenz-grotesk-next-extend",sans-serif; 
	font-size:40px;
	margin: 0;
	text-align:center;
	color: #010000;
}
h3{
	font-family: "akzidenz-grotesk-next-extend",sans-serif; 
	font-size:25px;
    font-weight:400;
    margin: 0;
    text-align: center;
	color: #010000;
}
h4{	
	font-family: "akzidenz-grotesk-next-extend",sans-serif; 
	font-size:16px;
	font-weight:400;
	color: #010000;
}
p{
	font-family: "akzidenz-grotesk-next-extend",sans-serif; 
	line-height:24px;
	color:#000000;
    margin: 0;
	font-size:16px;
	margin-bottom:10px;
	letter-spacing:0;
}
a{line-height:17px; outline:none; color:#010000; text-decoration: none;  letter-spacing:0; font-family: "akzidenz-grotesk-next-extend",sans-serif; }
a:focus, a:hover {
    color: #231f20;
	outline:none;
    text-decoration: none;
}
.no-pad{padding-left:0; padding-right:0;}
.navbar{
    border:none;
    border-radius:0;
    background-color:transparent;
    width: 100%;
    margin: 0 auto;
	padding: 0 0 20px;
    position:fixed;
    z-index: 99;
	top:0;
	transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
.navbar-brand{
	float: left;
    height: auto;
    padding: 0;
	margin-top:0;
	margin-left:0 !important;
}
.scrolled .navbar-brand{margin-top:0;}
.navbar-default .navbar-nav>li{text-transform:uppercase;}
.navbar-default .navbar-nav>li>a{
	color:#000;
	line-height:17px;
	padding: 0;
	font-size:15px;
	font-weight:600;
}
.navbar-default .navbar-nav>li>a:hover{color:#32aa9a; border-bottom:4px solid #32aa9a;}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    color: #b3914a;
    background-color: #203056;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{background-color:transparent;}
.navbar-default .navbar-toggle{margin-top: 20px; border-color:#b3914a;}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {background-color:transparent; }
.navbar-default .navbar-toggle .icon-bar {background-color: #b3914a;}
.navbar-default .navbar-nav>li>a:focus { color: #000;}
.dropdown-menu>li>a{line-height:30px; }
.dropdown-menu>li>a:hover{color:#b3914a;}
.navbar-toggle{background: #7f1e46;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background-color: #7f1e46;}
.nav>li {
    position: relative;
    display: block;
    padding: 0;
}
.nav>li:last-child{border-right:none;}
#myNavbar ul li.dropdown ul.dropdown-menu li a.nbrdr{border-bottom:none;}
.navbar-nav>li>.dropdown-menu{margin-top:0 !important;}
@media screen and (min-width:992px) and (max-width:1199px){
.nav>li>a {}
}
@media screen and (max-width:991px) {
.navbar-header {float: none;}
.navbar-left,.navbar-right {float: none !important;}
.navbar-toggle {display: block;}
.navbar-collapse {border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);}
.navbar-fixed-top {top: 0;	border-width: 0 0 1px;}
.navbar-collapse.collapse {display: none!important;}
.navbar-nav {
	float: none!important;
	margin-top: 7.5px;
	margin-right: 0 !important;
}
.navbar-nav>li {float: none; padding:0;}
.navbar-nav>li>a {padding-top:10px; padding-bottom: 10px;}
.collapse.in{display:block !important;}
.navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
	padding: 0;
    padding-bottom: 17px;
	margin:0 !important;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {color: #FFF;	border-bottom:1px solid #384d81;}
.navbar-collapse {padding-right: 0; padding-left: 0;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {border-color:#203056;}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover{background-color:transparent;}
}
@media (max-width: 767px){
.navbar-collapse {padding-right: 15px; padding-left: 15px;}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#b7944c;}
}
/* NEW CSS STARTS HERE */
.greenbx{background: #0f4003;}
.bluebx{background:#0041bb;}
.container {
  max-width: 1270px !important;
  width: 96% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-left: 15px;
  padding-right: 15px;
}
.sectnbx{padding:80px 0;}
.bordradius{border-radius:15px;}
.menusctn{padding:30px 0;}
.menusctninnr .menubox h4 a{color:#000 !important;}
.menusctninnr .menubox h4 a:hover{color:#890000 !important;}
.navbar-header img{	width:100%; margin: 20px auto 0;}
.scrolled{
	background-color: rgba(255, 255, 255, .75);
    transition: 0.5s;
    width: 100%;
    padding:0;
	backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);   /* Safari */
}
.navbar.scrolled #myNavbar ul.navbar-nav li a { color:#0039a3 ;}
.nav-dropdown.force-close .custom-dropdown { display: none !important;}
.scrolled #myNavbar ul li.dropdown ul.dropdown-menu li a{color:#1a315c;}
.navbar #myNavbar ul.navbar-nav{
	margin:0 auto;
	float:right; 
	display:table;
	padding-inline-start:0;
	background:transparent; 
	padding:0 0;
}
.navbar #myNavbar ul.navbar-nav li{margin:0 3px;}
.navbar #myNavbar ul.navbar-nav li:last-child{margin:0 0 0 10px;}
.navbar #myNavbar ul.navbar-nav li a{
    padding:0 10px;
    font-weight: 500;
	color:#FFF;
	font-size:17px;
	transition: all 0.3s ease;
	letter-spacing:0;
	line-height:70px;
	display:block;
	background-color:transparent;
}
.navbar #myNavbar ul.navbar-nav li.active a{background:#ffc100; color:#FFF;}
.scrolled #myNavbar ul.navbar-nav li.active a{background:#0039a3; color:#FFF;}
.navbar #myNavbar ul.navbar-nav li:hover a{background-color:#ffc100; color:#FFF;}
#myNavbar ul.navbar-nav li.dropdown:hover ul.dropdown-menu li{color:#1a315c;}
#myNavbar ul.navbar-nav li.dropdown:hover ul.dropdown-menu li a{color:#282828;}
#myNavbar ul.navbar-nav li.dropdown:hover ul.dropdown-menu li a:hover{color:#FFF;}
#myNavbar ul.navbar-nav li.dropdown ul.dropdown-menu li a.hvr-sweep-to-right:before{background:#890000; color:#FFF;}
#myNavbar ul.navbar-nav li.dropdown ul.dropdown-menu li a.hvr-sweep-to-left:before{background:#fde216;}
#myNavbar .nav-dropdown { position: relative; display: inline-block;}
#myNavbar .nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height:auto;
    background: transparent;
}
#myNavbar .nav-dropdown.force-close .custom-dropdown{display: none !important;}
#myNavbar .custom-dropdown {
    display:none;
    position: absolute;
    top: calc(100% + 0px);
    left:55px;
    transform: translateX(-50%);
    background: #FFF;
    min-width: 1300px;
	width:100%;
    z-index: 999;
    box-shadow: 0 10px 10px rgba(0,0,0,0.35);
    animation: dropFade 0.25s ease;
	border-radius:0 0 10px 10px;
}
@keyframes dropFade {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#myNavbar .nav-dropdown:hover .custom-dropdown {display: block;}
#myNavbar .dropdown-grid {
    display: grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:25px;
	padding:35px 28px;
}
#myNavbar .dropdown-grid .grid-nav{
	display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap:15px;
	border-radius:15px; 
	cursor:pointer;
	transition: all 0.9s ease;
	transform: translateX(0px);
}
#myNavbar .dropdown-grid .grid-nav:hover{transform: translateX(6px);}
#myNavbar .dropdown-grid .grid-nav:first-child{cursor:inherit; padding-right:35px;}
#myNavbar .dropdown-grid .grid-nav:first-child:hover { transform: translateX(0) !important;}
.dropdown-grid .grid-nav div a{background:#FFF !important; padding:0 !important;}
#myNavbar .dropdown-grid .grid-nav a img{border-radius:15px; width:100%;}
#myNavbar .dropdown-grid .grid-nav h1{font-weight:400; margin:0;}
#myNavbar .dropdown-grid .grid-nav h4{margin:0;}
#myNavbar .dropdown-grid .grid-nav h4 a{
	background:transparent !important;
	outline:none;
	color:#0039a3 !important; 
	font-weight:bold !important;
	font-size:18px !important;
	line-height:22px !important;
	padding: 0 !important;
}
#myNavbar .dropdown-grid .grid-nav:hover h4 a{transform: translateX(9px);}
.scrolled #myNavbar ul.navbar-nav li.active a.dropdown-grid .grid-nav h4 a{color:#0039a3;}
#myNavbar .dropdown-grid .grid-nav p{ font-weight:400;}
#myNavbar .dropdown-grid .grid-nav ul{padding-inline-start:0; width: 100%;}
#myNavbar .dropdown-grid .grid-nav ul li{
	list-style-type:none; 
	margin:0;
	border-bottom:1px solid #fdd694;
	padding-bottom:10px;
    padding-top:10px;
}
#myNavbar .dropdown-grid .grid-nav ul li:last-child{border-bottom:none; margin:0;}
#myNavbar .dropdown-grid.grid-nav ul li{background-color:transparent !important; color:#000 !important;}
#myNavbar .dropdown-grid.grid-nav ul li:hover a{background-color:transparent !important; color:#FFF !important;}
#myNavbar .dropdown-grid .grid-nav ul li a{
	color: #000 !important;
    background-color: transparent !important;
    line-height: 20px;
	padding:0;
	font-weight:300;
	font-size:14px;
	transition: all 0.4s ease;
}
#myNavbar .dropdown-grid .grid-nav ul li a:hover{color:#0039a3 !important; transform: translateX(6px);}
#myNavbar .dropdown-grid:hover .grid-nav ul li a{
	background-color:transparent !important; 
	color:#000 !important; 
	font-size:14px;
	font-weight:300;
}
.scrolled #myNavbar .dropdown-toggle svg{fill:#0039a3;}
.scrolled #myNavbar ul li.active a.dropdown-toggle svg{fill:#FFF;}
 #myNavbar .dropdown-toggle svg {
    margin-left:5px;
    height: 10px;
    fill: #FFF;
    position: relative;
    top:0;
    transition: transform 0.3s ease;
}
#myNavbar .nav-dropdown:hover .dropdown-toggle svg { transform: rotate(180deg); }
.dscvrbttnnew {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background:#dc9b15;
  font-size: 16px;
  padding:18px 37px;
  position: relative;
  overflow: hidden;
  color: #FFF;
  margin-top:20px;
}
.dscvrbttnnew::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 0;
}
.dscvrbttnnew span,
.dscvrbttnnew svg {
  position: relative;
  z-index: 1;
}
.dscvrbttnnew svg {
  width:30px;
  height: 30px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  fill:#FFF;
}
.dscvrbttnnew:hover::before { transform: translateX(0);}
.dscvrbttnnew:hover {border-color: rgba(0, 0, 0, 0.5); color:#FFF;}
.dscvrbttnnew:hover svg {transform: translateX(6px);}
.bnnrsctn{width:100%; position: relative; overflow: hidden; margin-top:0;}
.hero .banner-wrapper {
	position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    gap:160px;
}
.bnnrsctn .owl-carousel1 .evntbxbnnr img{
	width:100%;
	object-fit:cover;
	height:100%;
	border:none;
	padding:0;
	border-radius:0;
	display:block;
}
.bnnrsctn .evntbxbnnr {
	position: relative;
    display: flex;
    align-items: center;  /* vertically centers content at all sizes */
    min-height:100vh;
}
.innrbnnr .evntbxbnnr{
	min-height:70vh;
	flex-direction: column;
    justify-content: center;
	align-items: flex-start;
	gap: 50px;
	height:100%;
}
.innrbnnr .evntbxbnnr .imgbx img {
    width: 100%;
    height: 100%;
    object-fit: none;
}
.bnnrsctn .evntbxbnnr .bannrbx {
	position: relative;
    top:auto; /* remove the fixed top:200px */
    transform: none;
}
.prdctbnnr .evntbxbnnr .bannrbx {top:-9vh;}
.bnnrsctn .evntbxbnnr .bannrbx .bannrbxcntnt { position: relative; z-index: 99;}
.bnnrsctn .evntbxbnnr .imgbx {
    position: absolute;   /* image stays behind */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.bnnrsctn .evntbxbnnr .imgbx img {
    width: 100%;
    height: 100%;
    object-fit:cover;
}
.bnnrsctn .evntbxbnnr .container { position: relative; z-index: 9;}
.bnnrsctn .evntbxbnnr .bannrbx .bannrbxcntnt a.dscvrbttnnew{margin:20px 0 65px;}
.bnnrsctn .evntbxbnnr .bannrbx .bannrbxcntnt h1{
    color: #FFF;
    text-align: left;
    text-shadow: 1px 1px 1px rgba(0,0,0,.45);
	margin-bottom:0;
	margin-top: 0;
	text-align:left;
	font-size:55px;
}
.bnnrsctn .evntbxbnnr .bannrbx .bannrbxcntnt h2{
	color:#FFF;
	text-shadow: 1px 1px 1px rgba(0,0,0,.45);
	margin-bottom:10px;
	font-size:40px;
	margin-top: 0;
	text-align:left;
	margin-bottom:15px;
}
.bnnrsctn .evntbxbnnr .bannrbx .bannrbxcntnt a.dscvrbttnnew i.fas{margin-left:10px; padding:0;}
.bnnrsctn .evntbxbnnr .bannrbx .bannrbxcntnt ol.breadcrumb{
	background-color:transparent;
	padding:8px 0;
	margin-bottom:0;
}
.bnnrsctn .evntbxbnnr .bannrbx .bannrbxcntnt ol.breadcrumb li{color:#FFF; text-transform:uppercase; font-size:12px;}
.bnnrsctn .evntbxbnnr .bannrbx .bannrbxcntnt ol.breadcrumb li a{color:#FFF;}
.owl-main .evntbxbnnr {position: relative;}
.owl-main .bannrbx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.services{
	padding:50px 1vw;
    background: #d4e4fd;
    position: relative;
    margin-top: -11px;
}
.parallax-section-service{
	position: relative;
    background-image: url(../images/end-to-end.jpg);
	background-position:110% 0;
    background-repeat: no-repeat;
    background-size: cover;
    min-height:auto;
    overflow: hidden;
}
.parallax-section-service .parallax-overlay{opacity:.90;}
.services h1{text-align:left; color:#0039a3; margin-bottom: 60px;}
   /* ─────────────────────────────────────────
       POWERGRID — zigzag wrapper
       Row 1: indent-left  → shifts cards RIGHT
       Row 2: indent-right → shifts cards LEFT
    ───────────────────────────────────────── */
    .powergrid {
      display: flex;
      gap:28px;
      position: relative;
      z-index:0;
      margin-bottom:28px;
    }
    /* Row 1 shifts RIGHT (Card1 smaller, Card2 bigger) */
    .powergrid.row-1 { padding-left: 70px; padding-right: 0;}
    .powergrid.row-1 .powerbx:nth-child(1) { flex: 11; }
    .powergrid.row-1 .powerbx:nth-child(2) { flex: 11; }
    /* Row 2 shifts LEFT (Card3 bigger, Card4 smaller) */
    .powergrid.row-2 {  padding-right: 60px;  padding-left: 0;}
    .powergrid.row-2 .powerbx:nth-child(1) { flex: 11; }
    .powergrid.row-2 .powerbx:nth-child(2) { flex: 11; }
    /* ─────────────────────────────────────────
       POWERBX — individual card
    ───────────────────────────────────────── */
    .powerbx {
      flex: 1;
	  padding: 50px 50px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 14px;
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }
    .powerbx:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.35);}
    /* Rounded corners */
    /* Light card (card 1 & 4) */
    /* Blue card (card 2 & 3) */
    .powerbx.blue { background: #1a3fa8;}
    /* Ghost number inside each card */
    .powerbx::before {
      content: attr(data-num);
      position: absolute;
      font-weight: 700;
      font-size:250px;
      line-height: 1;
      top: -15px;
      left: -8px;
      pointer-events: none;
      user-select: none;
    }
    .powerbx.blue::before { color:#1854ff; }
    /* ─────────────────────────────────────────
       CARD ICON + TITLE (side by side)
    ───────────────────────────────────────── */
    .powerbx .card-head {
		display: flex;
		align-items: flex-start;
		gap: 18px;
		position: relative;
		z-index: 1;
    }
    .powerbx img.img-responsive {
      width:100px;
      height:100px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .powerbx h1 {
      font-weight: 700;
      font-size:20px;
      line-height:25px;
      margin: 0 0 15px;
    }
    .powerbx.blue h1 { color: #FFF; }
    /* ─────────────────────────────────────────
       CARD BODY TEXT
    ───────────────────────────────────────── */
    .powerbx p {
      font-size:16px;
      line-height:20px;
      margin: 0;
      position: relative;
      z-index: 1;
    }
    .powerbx.light p { color: #2c3a54; }
    .powerbx.blue  p { color: rgba(255,255,255,0.82); }
	.card-head {
		display: flex;
		align-items: flex-start;  /* icon aligns to top */
		gap: 18px;
	}
	.card-head-text {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
.whtbx h1{color:#f2ae2c; font-weight:400;}
.cmprhnsv{ background:url(../images/spark-icon.png) no-repeat top right;}
.cpbltswrpr.prdctrngbx{ gap:15px; grid-template-columns: repeat(3, 0.32fr);}
.cpbltswrpr{
	margin-top:85px;
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:5px;
    justify-content: center;
}
.cpbltsbx{
	background:#dfdfdf; 
	border-radius:15px; 
	padding-bottom:15px; 
	cursor:pointer; 
	transition: background 0.5s;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.cpbltsbx img{
	border-radius: 15px 15px 0 0;
	margin:0 auto 15px;
	display:table;
	width:100%;
}
.cpbltsbx:hover img{filter: brightness(1) saturate(1);}
.cpbltsbx:hover{background:#f2ae2c; transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);}
.cpbltsbx p{text-align:center; line-height:20px;}
.rdbx{
	padding-left:50px;
	background: #e42628;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
	transition: 0.4s ease;
}
.rdbx:hover{box-shadow:none; transform: translateY(-1px);}
.rdbx:hover h2{transform: translateY(-10px);}
.rdbx h2{
	text-transform:uppercase;
	color:#FFF;
	font-weight:bold;
	text-align:left;
	transition: 0.4s ease;
}
.rdbx a.dscvrbttnnew{transition: 0.4s ease;}
.rdbx:hover a.dscvrbttnnew{transform: translateY(-10px);}
.sltnsctn{background: linear-gradient(180deg, #FFF 60%, #0041bb 50%); padding-bottom:0;}
.sltnsctn h1{color:#0039a3;}
.sector-slider{position:relative;padding-bottom:55px;}
.swiper{ overflow:visible;}
.swiper-slide{
    width:100%;
    height:460px;
    border-radius:22px;
    overflow:hidden;
    position:relative;
}
.card-image{
    width:100%;
    height:100%;
    position:relative;
	cursor:pointer;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.5s ease;
}
.swiper-slide:hover img{ transform:none;}
.card-image::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(to top, rgba(0,0,0,0.15), rgba(0,0,0,0.15));
    z-index:1;
}
.card-content{
    position:absolute;
    left: 0;
	width:100%;
    bottom: 50px;
    z-index:2;
	transition: 0.4s ease;
}
.card-image:hover .card-content{transform: translateY(-10px);}
.card-content h3{
    color:#fff;
    font-size:25px;
    line-height:35px;
    font-weight:400;
	text-align:center;
}
.swiper-button-prev,
.swiper-button-next{
    width:38px;
    height:38px;
    background:#e5a51d;
    border-radius:50%;
    color:#fff;
    top:auto;
    bottom:0;
}
.swiper-button-prev::after,
.swiper-button-next::after{  font-size:14px; font-weight:700;}
.swiper-button-prev{ left:50%; transform:translateX(-85px);}
.swiper-button-next{ right:50%; transform:translateX(85px);}
.swiper-pagination{
    width:200px !important;
    left:50% !important;
    transform:translateX(-50%);
    bottom:10px !important;
    height:8px;
    background:#ead9b0;
    border-radius:30px;
    overflow:hidden;
}
.swiper-pagination-progressbar-fill{ background:#e5a51d !important;border-radius:30px;}
.mapsctn{background:#0041bb; padding-right:6vw; padding-top:100px;}
.mapsctn h1{color:#FFF; margin-bottom:50px; text-align:left; font-size:45px; padding-left:6vw;}
.prdctspprt{padding:180px 0;}
.sprtbxcntnr{
	display: grid;
	grid-template-columns: 1.2fr 1.1fr;
    gap:35px;
	align-items:start;
}
.sprtbxcntnr.sectnbx{padding:150px 0;}
.sprtbx h2{text-align:left; color:#FFF; font-weight:700;}
.sprtbx h1{font-size:45px; color:#FFF; padding-bottom:20px; font-weight:200; text-align:left;}
.sprtbx .spprtblubx{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	align-items:flex-start;
	gap:25px;
}
.sprtbx .blubx-container{
    border:1px solid #FFF;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	border-radius:15px;
    padding:25px 15px;
    transition: all 0.3s ease;
	background:rgba(0,55,225,.50);
    justify-content: flex-start;
	gap:25px;
	cursor:pointer;
}
.sprtbx .blubx-container p{color:#FFF; line-height:20px; margin-bottom:0;}
.sprtbx .blubx-container:hover{border-color:#e1a900; transform:translateX(8px); background:rgba(218,165,0, .55);}
.sprtbx .blubx-container img{margin-top:0; transition: filter 0.3s ease; width:54px; height:54px; filter: brightness(0) invert(1);}
.astntbx{
	background:#e1a900;
	border-radius:10px;
	width:280px;
	padding:10px;
	margin-top: 40px;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
	gap:10px;
	transition: all 0.3s ease;
}
.astntbx a{
	color:#FFF;
	font-weight:bold;
	font-size:20px;
	display:block;
}
.astntbx:hover{ background:#ffc100; transform:translateX(8px);}
.lwrsctn{
	padding-bottom:30px; 
	padding-top:80px;
	background: #F0F0F0;
	background: linear-gradient(180deg, rgba(240, 240, 240, 1) 100%, rgba(255, 255, 255, 1) 100%);
}
.lwrsctn h2{color:#000; font-size:40px;}
.lwrsctn h1{color:#f2ae2c;}
.projects-section{ 
	width:100%; 
	padding:0 0 120px 3vw;
	background: #F0F0F0;
	background: linear-gradient(180deg, rgba(240, 240, 240, 1) 50%, rgba(255, 255, 255, 1) 35%);
}
.projects-container{
    max-width:1300px;
    margin:auto;
    display:flex;
    gap:10px;
    align-items:stretch;
    justify-content:center;
    overflow:hidden;
}
/* CARD */
.project-card{
    position:relative;
    overflow:hidden;
    border-radius:15px;
    min-height:400px;
    flex:1;
    cursor:pointer;
    transition:all 0.5s ease;
}
.project-card.medium{flex:1;}
/* HOVER EXPAND EFFECT */
.projects-container:hover .project-card{ flex:0.9;}
.projects-container .project-card:hover{ flex: 1.5; z-index:5;}
/* IMAGE */
.project-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.5s ease;
    display:block;
}
.project-card:hover img{transform:scale(1.1);}
/* OVERLAY */
.project-card::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(
        to top,
        rgba(15,34,112,0.95),
        rgba(15,34,112,0.15)
    );
}
/* CONTENT */
.project-content{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:25px;
    z-index:2;
    color:#fff;
}
.project-content h4{
    font-size:18px;
    font-weight:700;
    margin:0;
    line-height:1.3;
    color:#FFF;
}
.project-content p{
    font-size:16px;
    font-weight:300;
    line-height:1.5;
    margin-bottom:10px;
    color:#FFF;
}
.project-content span{
    font-size:16px;
    font-weight:700;
    display:block;
}
.read-more{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#fff;
    text-decoration:none;
    margin-top:8px;
    transition:0.3s ease;
}
.read-more:hover{color:#f2ae2c;}
/* RED BOX */
.view-projects{
	cursor:pointer;
    background:#ef1d24;
    border-radius:15px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:40px 30px;
}
.view-projects:hover a.view-btn{ transform:translateY(-10px);}
.view-projects h2{
    color:#fff;
    font-size:38px;
    line-height:1.15;
    font-weight:bold;
    margin-bottom:30px;
    text-transform:uppercase;
    text-align:left;
	transition:0.4s ease;
}
.view-projects:hover h2{ transform:translateY(-10px);}
.view-btn{
	 
    display:inline-flex;
    align-items:center;
    gap:15px;
    background:#f6bf26;
    color:#000;
    text-decoration:none;
    padding:12px 18px;
    font-size:14px;
    font-weight:600;
    border-radius:4px;
	letter-spacing:0;
    transition:0.3s ease;
}
.view-btn span{
    width:28px;
    height:28px;
    border:1px solid #000;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:700;
}
#footer{border-top:30px solid #f2ae2c; background:#152c6d;}
.upprftr hr{
	margin-top: 0;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid #ffaa00;
}
.footerwrpr{
	padding:175px 0 50px;
	position:relative;
	display: grid;
    grid-template-columns:5fr 2fr;
    gap:80px;
    align-items: flex-start;
}
.footerwrprbx h1{color:#FFF; text-align:left; font-family:"akzidenz-grotesk-next-extend"; text-transform:uppercase; margin:0;}
.footerwrprbx h4{color:#FFF; text-align:left; font-family:"akzidenz-grotesk-next-extend";}
.footerwrpr p.cntrytxt{
	color:#FFF; 
	font-size:16px; 
	margin-bottom:30px;
}
.footerwrprbx:first-child{
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap:100px;
}
.footerwrpr p{color:#FFF; margin-bottom:30px; font-size:14px; line-height:20px;}
.footerwrpr p a{color:#FFF;}
.footerwrpr p a:hover{color:#ffc100;}
.footerwrpr h3{
	font-weight: 700;
	text-align:left;
	color:#FFF;
	margin-bottom:20px;
	font-size:18px;
}
.footerwrpr p.phntxt{margin-bottom:0;}
.ftrtxtbx p a:hover{color:#ffc100;}
.ftrlstbx{
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 45px;
}
.lstbx ul{padding-inline-start:0;}
.lstbx ul li{list-style-type:none; line-height:20px; padding-bottom:8px; margin-bottom:8px;}
.lstbx ul li a{color:#FFF; transition: all 0.3s ease; font-size:14px;}
.lstbx ul li a:hover{color:#ffc100; transform: translateY(-2px);}
.ftrtxtbx{
	margin-top:0;
	display: grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    align-items: flex-end;
}
.ftrtxtbx p{margin-bottom:0;}
.ftrtxtbx p a{color:#FFF; text-transform:uppercase; margin:0 15px; text-decoration:underline;}
.lwrfttr{
	margin-top:0;
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:45px;
	padding-top:80px;
}
.spprtsctnbx{
    position:relative;
    overflow:hidden;
	padding-bottom:0;
}
.gear-animation{
	position:absolute;
	top:0;
	left: 42vw;
	width:386px;
	height:292px;
	background:url(../images/support/gear.png) no-repeat right top;
	background-size:contain;
	z-index:1;
	opacity:0;
	transform:translateY(0);
	transition:
		transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 1.9s ease;
	will-change:transform, opacity;
}
.spprtsctnbx.active-gear .gear-animation{ opacity:1; transform:translateY(0px);}
/*========================
HEADING AREA
========================*/
.prdctsprtsctnbx{
    display:grid;
    align-content:space-between;
    justify-content:start;
    align-items:stretch;
    gap:100px;
    position:relative;
    z-index:2;
}
.prdctsprtsctnbx p{
    width:50%;
    font-size:20px;
    line-height:28px;
    color:#000;
}
/*========================
SERVICES GRID
========================*/
.services-grid{
    margin:80px 0;
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:15px;
    max-width:700px;
    width:100%;
    position:relative;
    z-index:2;
}
/* FIRST ROW */
.services-grid .support-card:nth-child(1){ grid-column:1 / 3;}
.services-grid .support-card:nth-child(2){grid-column:3 / 5;}
/* SECOND ROW */
.services-grid .support-card:nth-child(3){grid-column:1 / 3;}
.services-grid .support-card:nth-child(4){grid-column:3 / 5;}
.services-grid .support-card:nth-child(5){grid-column:5 / 7;}
/*========================
CARD DESIGN
========================*/
.support-card{
    background:#003fc7;
    border-radius:15px;
    text-align:center;
    padding:30px 20px;
    transition:0.4s ease;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items:center;
}
.support-card:hover{transform:translateY(-10px);}
.support-card img{width:auto;margin:0 auto 20px;}
/* GOLD LINE */
.support-card:before{
    content:'';
    position:absolute;
    background:#dc9b15;
    width:30px;
    height:2px;
    left:50%;
    transform:translateX(-50%);
    Top:140px;
}
.support-card h4{
    color:#fff;
    font-size:15px;
    line-height:22px;
    font-weight:400;
}
/*========================
RIGHT ENGINEER IMAGE
========================*/
.prdctimgbx {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.prdctimgbx img {
  height:100%;
  width: auto;
  max-width: none;
  object-fit:cover;
  display: block;
  will-change: transform;
  transition: transform 0.1s linear;  /* ADD this — smooths the movement */
}
.cnnctstnbx{background:#0041bb;}
.cnnctstnbx h1{text-align:left; color:#FFF;}
.discussion-wrapper{ margin:auto;}
.required-field{
    color:#FFF;
    font-size:30px;
    margin-bottom:35px;
}
.form-group label{
    display:block;
    color:#fff;
    font-size:16px;
    margin-bottom:10px;
    text-transform:uppercase;
}
.chips{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.chips label{ margin:0;}
.chips input{ display:none;}
.chips span{
    border:1px solid rgba(255,255,255,0.7);
    color:#fff;
    padding:16px 20px;
    border-radius:50px;
    font-size:14px;
    display:inline-block;
    transition:0.3s ease;
    cursor:pointer;
}
.chips input:checked + span,
.chips span:hover{
    background:#fff;
    color:#0047d9;
}
.contact-title p{
    color:#fff;
    font-size:20px;
    margin-bottom:30px;
    margin-top:50px;
}
.contact-title p span{font-size:12px;}
.contact-title p span a{color:#FFF; text-decoration:underline;}
.form-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}
.input-box label{
    display:block;
    color:#fff;
    font-size:15px;
    margin-bottom:10px;
}
.input-box input,
.input-box textarea, .input-box select{
    width:100%;
    border:none;
    background:#fff;
    height:48px;
    padding:0 15px;
    font-size:14px;
    outline:none;
}
.input-box select{cursor:pointer; background:#FFF !important;}
.textarea-box{margin:25px 0;}
.input-box textarea{
    height:140px;
    resize:none;
    padding-top:15px;
}
.privacy-text{
    color:#FFF;
    font-size:16px;
    line-height:22px;
    margin:40px 0;
}
.privacy-text a{color:#FFF; text-decoration:underline;}
.privacy-text a:hover{color:#f4b51f;}
.submit-btn{
    background:#f4b51f;
    border:none;
    color:#000;
    padding:14px 28px;
    display:inline-flex;
    align-items:center;
    gap:15px;
    cursor:pointer;
    font-weight:600;
    transition:0.3s ease;
}
.submit-btn:hover{transform:translateY(-3px);}
.submit-btn span{
    width:26px;
    height:26px;
    border:1px solid #000;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.rfrncsctnbx h1{color:#000;}
.filter-wrapper{margin-top:80px;}
.filter-wrapper h2{ text-align:left; font-size:35px;}
.filter-tabs{
	margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: stretch;
    align-content: space-between;
    justify-content: flex-start;
}
.tab-btn{
    border: none;
    background: #e6e6e6;
    padding: 15px 25px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease;
    flex: 1 10%;
	font-size:20px;
    font-weight: 700;
}
.tab-btn.active,
.tab-btn:hover{ background:#f2b600; color:#FFF;}
.client-section{
    background:#003cbf;
    padding:120px 0 100px;
    position:relative;
    overflow:hidden;
}
.client-section::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:20px;
    background:#d89b13;
}
/* SLIDER */
.clientSwiper{ overflow:hidden;  padding:60px 0 !important;}
.swiper-slide{
    display:flex;
    align-items:center;
    justify-content:center;
}
/* DOTS */
.swiper-pagination{
	bottom:0 !important; 
	left:0 !important; 
	background:transparent !important; 
	height:20px !important;
	margin:0 auto;
	width:100% !important;
}
.swiper-pagination-bullet{
    width:16px !important;
    height:16px  !important;
    background:#FFF  !important;
    border-radius:50%  !important;
}
.swiper-pagination-bullet:hover{background:#FFF !important;}
.swiper-pagination-bullet-active{
    width:40px;
    border-radius:30px;
	background:#f2ae2c !important;
    opacity:1;
}
.rangwrpr .cpbltsbx{
	background: #0041bb;
    position: relative;
    z-index: 1;
    height: 100%;
}
.rangwrpr .cpbltsbx p{color:#FFF;}
.rangwrpr .cpbltsbx .textbx{
	display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 15px;
    bottom:70px;
	z-index: 1;
	padding:25px;
	transition: 0.4s ease;
}
.rangwrpr .cpbltsbx:hover .textbx{transform:translateY(-10px)}
.rangwrpr .cpbltsbx .textbx h2{
	color:#FFF;
	text-align:left;
	font-size:22px;
	font-weight:700;
	letter-spacing:0;
}
.rangwrpr .cpbltsbx svg{
	fill: #FFF;
    height: 26px;
    position: relative;
    top: 10px;
    left: 10px;
	transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
	rotate:312deg;
}
.rangwrpr .cpbltsbx:hover svg{ transform:translateX(6px);}
.trstdsctn{margin:0 auto; justify-content: center; gap:95px; overflow: visible !important;  height: auto !important;}
.trstdsctn h1{ text-align:center; color:#0041bb; }
.trstdsctn img{margin:0 auto; width:auto;}
.prtnrimgbx{
	justify-content:flex-start; 
	left:0;
	opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.prtnrimgbx img{height:65%;}
.prtnrimgbx.in-view {
    opacity: 1;
    transform: translateY(0px);
    animation: floatUpDown 3s ease-in-out infinite;
    animation-delay: 0.8s; /* starts floating after slide-in completes */
}
@keyframes floatUpDown {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-18px); }
    100% { transform: translateY(0px); }
}
/* ── SECTOR SLIDER ── */
.sector-slider {  overflow: visible !important;  height: auto !important;}
/* ── SWIPER ── */
.mySectorSliderone { overflow: hidden !important; height: auto !important;}
.mySectorSliderone .swiper-wrapper { height: auto !important; align-items: flex-start !important;}
/* ── EACH SLIDE ── */
.mySectorSliderone .swiper-slide {
	width:100% !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* ── GOLD DIVIDER ── */
.trustd-divider {
    width: 55px;
    height: 3px;
    background: #dc9b15;
	margin: 30px auto;
    display: block !important;
    visibility: visible !important;
}
/* ── SLIDE H3 ── */
.mySectorSliderone .swiper-slide h3 {
    display: block !important;
    visibility: visible !important;
    color: #0039a3 !important;
    font-size:20px !important;
    font-weight: 700 !important;
    line-height:22px !important;
    text-align: center !important;
	margin-top:0;
	margin-bottom:10px;
}
/* ── SLIDE PARAGRAPH ── */
.mySectorSliderone .swiper-slide p {
    display: block !important;
    visibility: visible !important;
    margin: 0 0 28px 0 !important;
    text-align: center !important;
    opacity: 1 !important;
	font-size:18px;
	line-height:24px;
	width:auto;
}
.mySectorSliderone .swiper-slide img{display:table !important;}
.mySectorSliderone .swiper-slide img:hover{transform: inherit;}
/* ── PAGINATION DOTS ── */
.mySectorSliderone-pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 25px !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
}
.mySectorSliderone-pagination .swiper-pagination-bullet {
    width: 13px !important;
    height: 13px !important;
    background: #cccccc !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
    display: inline-block !important;
}
.mySectorSliderone-pagination .swiper-pagination-bullet-active { background: #dc9b15 !important; transform: scale(1.2) !important;}
.mySectorSliderone-pagination .swiper-pagination-bullet:hover { background: #0039a3 !important;}
.gasgrrnbx{
    padding: 33px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:15px;
    position: absolute;
    z-index: 1;
    width: auto;
    align-content: flex-start;
    flex-wrap: wrap;
    left:1vw;
    bottom:2px;
}
.gasgrrnbx h3{
	color: #9ea90a;
	font-weight:700;
    font-family: "akzidenz-grotesk-next-extend";
    text-align: left;
	line-height:35px;
}
.gasgrrnbx p{font-family: "akzidenz-grotesk-next-extend"; color:#FFF; margin-bottom:0;}
.sectnbxprdct{padding:130px 0 130px;}
.grnprdctbx{
	background: #FFFF;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 29%, rgba(15, 64, 3, 1) 29%);
}
.prdctcntnr h2{text-align:left;  font-weight:bold; line-height:45px;}
.prdctcntnr h2.prdctxt{color:#FFF; text-align:center;}
.prdctcntnr h1{
	text-align:left;  
	font-weight:400; 
	color:#9ea90a;
	margin: 0;
}
.prdctcntnr h1.textcnter{text-align:center;}
.pwrsltnwrpr{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:80px;
	margin:120px 0;
}
.pwrsltnwrpr.slick-slider{display:grid;}
.pwrsltnwrprbx{
	position:relative;
	background:#f3f0f0; 
	padding:30px; 
	box-shadow: 4px 2.8px 9px rgba(0, 0, 0, .35);
	display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    gap:15px;
	transition: background 0.5s;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pwrsltnwrprbx:hover{ transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);}
.pwrsltnwrprbx h2{
	font-size:35px;
	line-height:40px;
	text-align:left;
	font-weight:bold;
}
.pwrsltnwrprbx p{font-size:22px;}
.pwrsltnwrprbx ul{padding-inline-start:20px;}
.pwrsltnwrprbx ul li{margin-bottom:5px; padding-bottom:5px; font-size:22px; line-height:30px;}
.gaswrpr .pwrsltnwrprbx{padding:50px;}
.gaswrpr .pwrsltnwrprbx h2{font-size:20px; line-height:25px;}
.gaswrpr .pwrsltnwrprbx p{font-size:16px;}
.gaswrpr .pwrsltnwrprbx img{width:100px;}
.gaswrpr .pwrsltnwrprbx ul li{font-size:16px; line-height:20px;}
.pwrsltnwrprbx img{position:relative; margin-top:-90px;}
.infrastcn{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:3px;
	margin-top:100px;
}
/* Container */
.infrastcnbx .card-image {  position: relative; overflow: hidden;}
/* Image - zoom on hover */
.infrastcnbx .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1);
}
.infrastcnbx .card-image:hover img { transform: scale(1.09);}
/* Dark gradient overlay */
.infrastcnbx .card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(to top, rgba(0,0,0,0.15) 0%, transparent 100%);
    transition: height 0.5s ease, background 0.5s ease;
    z-index: 1;
}
/* Gradient expands on hover */
.infrastcnbx .card-image:hover::after { height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.10) 100%);}
/* Text wrapper - always visible at bottom left */
.infrastcnbx .card-image .card-content {
   position: absolute;
    bottom:87px;
    left: 0;
    width:auto;
    padding: 0;
    z-index: 2;
    transition: padding 0.5s ease;
    text-align: center;
    right: 0;
}
.infrastcnbx .card-image:hover .card-content { padding: 25px 25px;}
/* Heading */
.infrastcnbx .card-image .card-content h3 {
    color: #FFF;
    margin: 0;
    font-weight:400;
    text-align: center;
    text-shadow: 1px 2px 6px rgba(0,0,0,0.3);
    transform: translateY(5px);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 0.5s ease,
                letter-spacing 0.5s ease;
}
/* Text smoothly rises + color changes on hover */
.infrastcnbx .card-image:hover .card-content h3 { transform: translateY(-8px); color: #FFF;}
/* Optional - green underline appears on hover */
.ratngsctn{background:#f0f0f0;}
.ftrsctnsntn{
	margin-top:68px; 
	background:#FFF;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	padding:0 0 60px;
}
.ftrsctnsntn h1.grntxt{font-size:45px; text-align:center;}
.ftrsctnsntn h2.grntxt{text-align:center;}
.ftrwrpprhdbx{}
.ftrwrpprhdbx h1{ font-weight:200; font-size:72px; text-align:center; color:#8a9d43;}
.ftrwrpprhdbx h3{font-size:30px;}
.ftrwrppr{
	margin:50px 0 100px;
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap:30px;
    align-items: stretch;
    padding:0;
    align-content: space-between;
    justify-items: stretch;
}
.ftrwrpprbx{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap:20px;
	padding:20px 10px;
	border-radius:15px;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
	transition: 0.8s ease;
}
.ftrwrpprbx img{margin:0 auto; transition: 0.8s ease;}
.ftrwrpprbx .brdr-line{
	background: #fba819;
	border-radius:6px;
	width:30px;
	height:2px;
	border-radius:6px;
}
.ftrwrpprbx .brdr-grn-line{background:#62b214;}
.ftrwrpprbx p{
	margin-bottom:0;
	text-align:center; 
	font-weight:200; 
	font-size:15px; 
	line-height:18px; 
	position:relative;
	transition: 0.8s ease;
}
.ftrwrpprbx:hover{transform: translateY(-5px);}
.ftrwrpprbx:hover img{transform: translateY(-2px);}
.ftrwrpprbx:hover p{transform: translateY(-3px);}
/* Section */
.engine-tabs-section { padding:0;}
/* Tab Buttons Wrapper */
.engine-tab-wrapper {  
	display:grid; 
	gap: 0;
	grid-template-columns:1fr 1fr;
	margin-bottom:100px;
	/* width:100%; */
}
.diesel-tab-wrappr{grid-template-columns:repeat(5, 1fr);}
.engine-tab-wrapper .lefttab{
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
}
.engine-tab-wrapper .righttab{
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
}
/* Each Tab Button */
.engine-tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    /* background: #0f4003; */
    cursor: pointer;
    transition: background 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
	padding: 50px 190px 20px;
	gap:20px;
}
.engine-tab-btn:nth-child(1){background:#b7b7b7;}
.engine-tab-btn:nth-child(2){background:#a2a1a1;}
.engine-tab-btn:hover { transform: translateY(-3px);}
.engine-tab-btn.active {background: #FFF;}
.engine-tab-wrapper.active .tab-logo{
	filter: brightness(0) saturate(100%) invert(13%) sepia(100%) saturate(500%) hue-rotate(90deg) brightness(85%) contrast(105%) !important;
}
/* Logo inside tab */
.engine-tab-btn .tab-logo { transition: filter 0.4s ease;}
.engine-tab-btn.lefttab.active .tab-logo { filter: none!important; /* makes logo white on dark bg */}
.engine-tab-btn.righttab .tab-logo {  filter: brightness(0) invert(1); /* makes logo white on dark bg */}
.engine-tab-btn.righttab.active .tab-logo { filter: none !important; /* makes logo white on dark bg */}
/* Arrow icon */
.engine-tab-btn .tab-arrow {
    margin-top: 12px;
    color: #0f4003;
    font-size: 18px;
    transition: color 0.4s ease, transform 0.4s ease;
}
.engine-tab-btn .tab-arrow svg{ fill:#FFF; height:30px;}
.engine-tab-btn.active .tab-arrow svg { fill:#0f4003; height:30px; transform: rotate(180deg);}
/* Tab Content */
.engine-tab-content {
	padding:0 67px;
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.engine-tab-content.active { display: block; animation: fadeSlideUp 0.5s ease forwards;}
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.blutxt{color:#0048cf !important; font-size:40px;}
/* Heading */
.engine-tab-content h2 {
    font-size:40px;
    color: #0f4003;
    margin-bottom: 20px;
    font-weight: 200;
}
/* Table */
.engine-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.engine-table thead tr:first-child th {
    background: #d4e157; /* yellow-green header */
    color: #000;
    font-weight: 700;
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #FFF;
}
.engine-table thead tr.subhead th {
    background: #d4e279;
    color: #000;
    font-weight:700;
    padding: 10px 15px;
    border: 1px solid #FFF;
}
.engine-table tbody tr td {
    padding: 15px 15px;
    border-bottom: 1px solid #e8e8e8;
    color: #000;
    transition: background 0.3s ease;
    font-weight:200;
}
.engine-table tbody tr.alt td { background: #f8f8ce;}
.engine-table tbody tr:hover td { background: #f8f8ce;}
/* Notes */
.table-notes {margin-top:50px;}
.table-notes p { color: #000; margin-bottom:0;}
.engine-table.diesel-table tr:first-child th{background:#a5ddf8;}
.engine-table.diesel-table thead tr.subhead th {background:#a5ddf8;}
.engine-table.diesel-table tbody tr.alt td { background: #ddf0fc;}
.engine-table.diesel-table tbody tr:hover td { background: #ddf0fc;}
.engine-tab-btn.diesel-tab-btn{
	background:#c3c3c3;
	padding:50px 50px 20px;
	gap:15px;
}
.engine-tab-btn.diesel-tab-btn:nth-child(2){background:#b7b7b7;}
.engine-tab-btn.diesel-tab-btn:nth-child(3){background:#a2a1a1;}
.engine-tab-btn.diesel-tab-btn:nth-child(4){background:#8f8f8f;}
.engine-tab-btn.diesel-tab-btn:nth-child(5){background:#818181;}
.engine-tab-btn.diesel-tab-btn.active {background: #FFF;}
.engine-tab-btn.diesel-tab-btn.active .tab-logo{filter: none !important;}
.engine-tab-btn.diesel-tab-btn .tab-logo{ filter: brightness(0) invert(1) !important;}
.engine-tab-btn.diesel-tab-btn:nth-child(2) img.tab-logo { content: url("../images/logo/MTU-white.svg");}
.engine-tab-btn.diesel-tab-btn.active:nth-child(2) img.tab-logo { content: url("../images/logo/MTU.svg");}
.engine-tab-btn.diesel-tab-btn:nth-child(5) img.tab-logo { content: url("../images/logo/FMTU-white.svg");}
.engine-tab-btn.diesel-tab-btn.active:nth-child(5) img.tab-logo { content: url("../images/logo/FMTU.svg");}
.engine-tab-btn.diesel-tab-btn.active .tab-arrow svg { fill:#0048cf; height:30px; transform: rotate(180deg);}
.bluebx h3{color:#FFF;}
.prdctsltn-grid{grid-template-columns:repeat(1,1fr); margin:0 0 60px; max-width:100%;}
.prdctsltn-grid p{width:auto;}
.prdctsltn-grid .cpbltswrpr{grid-template-columns: repeat(3, .33fr); gap:10px; margin-top:0;}
.prdctsprtsctnbx h1.blutxt{color:#0041bb;}
.exprtsctn{background:#bddcff;}
/* Left Content */
.capabilities-content {
	padding:30px 70px 76px 0;
	display: flex;
	gap:19px;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
}
.capabilities-content h1{
	color: #0041bb; 
	margin:0;
	text-align:left;
}
.capabilities-content p {
	line-height:25px;
    color: #000;
    margin-bottom:0;
}
/* Top Grid - 2 columns */
.capabilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
/* Bottom Grid - 4 columns */
.capabilities-grid-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top:0;
}
/* Card */
.cap-card {
    background: #0041bb;
    border-radius: 12px;
    padding:40px;
    text-align: center;
    transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.cap-card:hover {
    transform:translateY(-6px);
    background:#0039a3;
    box-shadow: 0 12px 30px rgba(26, 58, 143, 0.35);
}
/* Icon Circle */
.cap-icon {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    transition: border-color 0.4s ease, transform 0.4s ease;
}
.cap-card:hover .cap-icon {transform: scale(1.08) rotate(5deg);}
/* Gold Divider */
.cap-divider {
    width:50px;
    height:6px;
    background: #e8a820;
    margin:10px auto;
    border-radius:6px;
    transition: width 0.4s ease;
}
.cap-card:hover .cap-divider{width:70px;}
/* Card Text */
.cap-card h4 {
    color: #FFF;
    font-size: 18px;
    font-weight:200;
    line-height:22px;
    margin: 0;
    transition: color 0.4s ease;
}
.cap-card:hover h4 {color:#FFF; }
.contactwrppr{background:#FFF;}
.contactwrppr h1{color:#0041bb; margin-bottom:50px; font-size:50px;}
.contactwrppr p.required-field{color:#0041bb; font-weight:bold;}
.contactwrppr .form-group label{color:#0041bb;}
.contactwrppr .form-group .chips span{border: 1px solid rgba(0, 65, 187, 0.7); color:#000;}
.contactwrppr .form-group .chips input:checked + span,
.chips span:hover{ background:#0047d9; color:#FFF !important;}
.contactwrppr .contact-title{color:#0041bb;}
.contactwrppr .contact-title span{font-size:12px; color:#000;}
.contactwrppr .contact-title span a{color:#0041bb;}
.contact-title.contact-page p label{color:#0041bb; text-transform:uppercase;}
.contact-title.contact-page p span a{color:#ffc100; text-decoration:underline;}
.contactwrppr .form-grid .input-box label{color:#0041bb;}
.contactwrppr .form-grid .input-box input, .input-box textarea, .input-box select{ background:#e1e1e1;}
.contactwrppr .form-grid .input-box select{background:#e1e1e1 !important;}
.contactwrppr .textarea-box label{color:#0041bb;}
.blackbxsctn{background:#f0f0f0; padding:120px 0; margin-top: -1px;}
.blackbxsctn h3.blcbxtxt{color:#0041bb;}
.parallax-section {
    position: relative;
    background-image: url(../images/product/diesel-genset/diesel-engine.png);
	background-position: -150px 5%;
    background-repeat: no-repeat;
    min-height:auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}
/* Dark overlay on top of image */
.parallax-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.prflesctn{background:#001538;}
.prflewrppr{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:50px;
    align-items: stretch;
    justify-items: stretch;
}
.prflewrpprbx p{color:#FFF;}
.prflewrpprbx{
	display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
	gap:35px;
}
.prflewrpprbx:last-child{padding:0 50px 0 0;}
.brndsctn h1{
	text-align:left;
	color:#0048cf;
	font-size:50px;
	font-weight:400;
}
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:35px;
	margin:50px 0;
	overflow: visible; 
    }
/* ── Card ── */
.brand-card {
      background: #dcddde;
      border-radius:15px;
      padding:0;
      position: relative;
	  isolation: isolate; 
      overflow: hidden; /* clip anything that spills past the section */
		padding: 0 2px; /* tiny buffer so shadow isn't clipped too tightly */
      cursor: pointer;
      min-height:100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                  box-shadow 0.4s ease;
}
.brand-card:hover { /* transform: translateY(-7px); */  box-shadow: 0 22px 44px rgba(27, 71, 184, 0.38);}
    /* ── Top: name + divider ── */
.card-top { position: relative; z-index:4; padding:30px;}
.card-name h2{
	text-align:left;
	font-size:27px;
    font-weight:700;
    color: #0042bd;
    letter-spacing:0;
    line-height:30px;
}
.brand-card .card-divider {
    width:40px;
    height:4px;
    background:#e8a020;
    border-radius:6px;
    margin:25px 0 0;
}
/* ── Middle: logo/text area ── */
.card-middle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:30px;
    position: relative;
    z-index: 0;
    transition: opacity 0.35s ease;
}
.brand-card:hover .card-middle { opacity: 0; pointer-events: none;}
.card-text-body {
    color:#FFF;
    font-size:18px;
    line-height:24px;
}
 /* ── Hover description — slides in from top ── */
.card-hover-desc {
      position: absolute;
      bottom:0;
	  height:100%;
      left: 0;
      right: 0;
      padding:54px 40px;
      opacity: 0;
      transform: translateY(50%);
	transition:
        transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
      pointer-events: none;
      z-index:1000;
	  background: #0048CF;
		background: linear-gradient(180deg,rgba(0, 72, 207, 1) 30%, rgba(0, 66, 189, 1) 30%);
	  display:flex;
	  flex-direction:column;
	  gap:15px;
}
.card-hover-desc p{
	color: #FFF;
    font-size:18px;
    line-height:25px;
}
.card-hover-desc .card-name h2{color:#FFF;}
.brand-card:hover .card-hover-desc {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* ── Bottom: discover button — always visible ── */
.card-bottom {
	position: relative; 
	z-index: 4;
	background:#0042bd;
	padding:30px;
}
.discover-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-size:18px;
      font-weight: 500;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      text-decoration: none;
      transition: gap 0.25s ease;
    }
.brand-card:hover .card-bottom{display:none;}
.brand-card:hover .card-bottom a{color:#FFF;}
.brand-card:hover .discover-btn {gap:20px;}
.arrow-circle {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.25s, background 0.25s;
      flex-shrink: 0;
	  rotate: 274deg;
    }
.brand-card:hover .discover-btn .arrow-circle {border-color: #FFF; background:#ffc100; rotate: 312deg;}
.brndsctn h2{text-align:left; color:#0048cf; font-weight:700; margin-bottom:10px;}
.brndsctn h3{text-align:left; color:#0048cf;}
.enerjsctn{
	display: grid;
    grid-template-columns:1fr 2.5fr;
    gap:15px;
	margin-top:50px;
}
.enerjsctnbx{
	display:flex;
	flex-direction:column;
	gap:20px;
	align-items:flex-start;
}
.enerjsctnbx .card-divider{
	width:40px;
    height:4px;
    background:#e8a020;
    border-radius:6px;
    margin:0 0 20px;
}
.enerjsctnbx h3{ text-align:left; color:#0048cf; line-height:35px; font-weight:700; font-size:35px; margin-bottom:20px;}
.enerjsctnbx h4{
	color:#dc9b15;
	font-size:22px;
	font-weight:700;
	margin-bottom:10px;
}
.abtprsncsctn h1{font-size:90px; text-align:left; color:#FFF;  font-weight:400;}
.abtprsntwrpr{ margin-top:60px; grid-template-columns:1.4fr 1fr;}
.abtprsntwrpr .abtprsnbx{
	background:#e5262a;
	border-radius:15px;
	padding:60px 50px;
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
	gap:30px;
}
.abtprsntwrpr .abtprsnbx h2{ font-size:30px; text-align:left; font-weight:700; color:#FFF;}
.abtprsntwrpr .abtprsnbx p{
	font-size:20px; 
	color:#FFF; 
	font-weight:400; 
	line-height:25px;
}
.mngmntsctn{background:#0048cf;}
.mngmntsctn h1{color:#FFF; font-size:50px; text-align:left;}
.mngmntsctnwrpr{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:70px;
	margin-top:80px;
}
.mngmntsctnbx{
	display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 25px;
    flex-direction: column;
}
.mngmntsctnwrpr svg{height:90px; fill:#ffc100;}
.mngmntsctnwrpr p{color:#FFF;}
.mngmntsctnwrpr p span{color:#dc9b15; font-size:15px; font-weight:700;}
.pwrsctn h1{color:#0048cf;}
.epcsctn{ position: relative; overflow: hidden; margin-top:-1px;}
.epcsctn h1{text-align:left; color:#0048cf;}
.epc-slick{margin-top:60px;}
.epc-slick .epc-card {
	margin:0 5px; 
	background:#0041bb; 
	border-radius:15px; 
	padding-bottom:210px; 
	aspect-ratio:3/3.5;
}
.epc-slick .epc-card.cpbltsbx:hover{box-shadow:none;}
.epc-slick .epc-card.cpbltsbx img { 
	width: 100%; 
	/* height: 100%; */
	margin:0;
	/* object-fit:cover;  */
	display: block; 
	border-radius:15px 15px 0 0;
}
.epc-caption{
	padding:30px; 
	display:flex;
	flex-direction: column;
    align-items:flex-start;
    gap:15px;
}
.epc-caption h4{color: #FFF; text-align:left; font-weight:700; margin:0; font-size:20px;}
.epc-caption p{color:#FFF; text-align:left;}
.epc-nav-row {display:flex; flex:0 39%; align-items: center; gap:25px; padding:20px 0 0; justify-content:center;}
.epcrow{margin-bottom:60px; justify-content: center;}
.epc-arrow-btn{
	width:32px; 
	height:32px; 
	border-radius:50%; 
	border:none;
	background:#e8a020;
	color: #FFF; 
	font-size:20px; 
	cursor:pointer;
}
.epc-progress-wrap {display:flex; flex:0 35%; height:20px; background:#e2e2e2; border-radius:15px; overflow:hidden;}
.epc-progress-fill {height: 100%; background: #e8a020; border-radius: 3px; transition: width .4s ease;}
.cable-parallax-wrap {
    position: absolute;
    top: 0;
    right:-80px;
    width: 320px;
    height: 100%;
    z-index:0;
    pointer-events: none;
}
.cable-parallax-img {
    position: sticky;
    width: 100%;
    display: block;
    object-fit: contain;
    object-position: top right;
    will-change: transform, opacity;
    transition: transform 0.1s linear;
}
#myNavbar .custom-dropdown-one{display:none; left:175px;}
.clntsctn{background:#FFF;}
.clntsctn h1{color:#0039a3; text-align:center;}
.clntsctn .clientSwiper{padding:40px 0 0!important;}
.clntsctn .clientSwiper .swiper-slide{overflow:visible;}
.clntsctn .clientSwiper .swiper-slide img{width:100%; transition:0.5s ease;}
.clntsctn .clientSwiper .swiper-slide:hover img{ transform:none;}
.clntsctn .swiper-pagination-bullets .swiper-pagination-bullet{background:#0039a3;}
.clntsctn .clntsctn-mobile{
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:20px;
	margin-top:40px;
}
.clntsctn .clntsctn-mobile img{margin:0 auto; width:auto; display:table;}
.fuelcntnr{
	display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 70px;
    align-items: flex-start;
	margin:80px 0;
}
.fuelcntnrbx{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 30px;
}
.fuelcntnrbx h2{color:#0048cf; text-align:left; font-weight:700; font-size:35px;}
.fuelcntnrbx h2 span{font-weight:400;}
.fuelcntnrbx h3{text-align:left; color:#0048cf; font-weight:800;}
.fuelcntnrbx p{font-size:18px; line-height:27px;}
.epcsltn{margin-bottom:0;}
.epcsltn .fuelcntnrbx:last-child{padding-right:3vw;}
.cardgridsctn{padding:0 1vw;}
.card-grid{
	display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:5px;
}
.card{
    position:relative;
    aspect-ratio: 3 / 4;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    isolation:isolate;
	border-radius:15px;
	cursor:pointer;
  }
  .card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
    z-index:0;
  }
  .card:hover img{transform:scale(1.06);}
  /* Caption / overlay panel — anchored to bottom, grows upward on hover */
  .card-overlay{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0041bb;
    color: #FFF;
    padding: 17px 30px;
    height:100px;
    overflow: hidden;
    transition: height .95s cubic-bezier(.22,.61,.36,1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap:30px;
  }
.card-title{
    margin:0;
	text-align:left;
    font-size:22px;
	color:#FFF;
    font-weight:200;
    line-height:25px;
}
.card-desc-wrap{ overflow:hidden; min-height:0;}
.card-desc{
	text-align:left;
    margin:12px 0 0;
    font-size:16px;
    line-height:22px;
    color:#FFF;
    opacity:0;
    transition:opacity .3s ease .12s;   /* text fades in slightly after the box starts opening */
}
.card:hover .card-overlay{ height: 100%; /* <-- this line was missing */}
.card:hover .card-desc{  opacity:1; }
.mttrsctn{background:#FFF;}
.mttrwrprcntnr{
	display:grid;
	grid-template-columns: 1fr;
    gap: 70px;
    align-items:flex-start;
}
.mttrwrprbx h2{color:#0041bb; text-align:center; font-weight:400;}
.mttrwrprbx .infrastcn{margin-top:0; grid-template-columns: repeat(3, 1fr); }
.mttrwrprbx .infrastcn .infrastcnbx{
	background: #0041bb; 
	border-radius:15px;
}
.mttrwrprbx .infrastcn .infrastcnbx div{position: relative; overflow: hidden; z-index:0;}
.mttrwrprbx .infrastcn .infrastcnbx img{border-radius: 15px 15px 0 0; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.1s ease;}
.mttrwrprbx .infrastcn .infrastcnbx:hover img {
    transform: scale(1.10) rotate(0deg);
    opacity: 0.85;
}
.mttrwrprbx .infrastcn .infrastcnbx .card-content {
    transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mttrwrprbx .infrastcn .infrastcnbx:hover .card-content {
    transform: scale(1.01);
}
.mttrwrprbx .infrastcn .infrastcnbx .card-content{
    padding:15px;
	gap:20px;
    display: grid;
	bottom:0;
    grid-template-columns: 1.6fr 2fr;
    justify-content: flex-start;
    align-items:flex-start;
}
.mttrwrprbx .infrastcn .infrastcnbx .card-content.epc-card-content{background:#0954e1; border-radius:0 0 15px 15px;}
.mttrwrprbx .infrastcn .infrastcnbx .card-content.gas-card-content{background:#9ea90a; border-radius:0 0 15px 15px;}
.mttrwrprbx .infrastcn .infrastcnbx .card-content h3{line-height:20px; text-align:left; font-size:17px; font-weight:700;}
.mttrwrprbx .infrastcn .infrastcnbx .card-content p{color:#FFF; margin-bottom:0; font-size:14px; line-height:17px;}
.apprchsctn{background:#f0f0f0;}
.apprchcntnr{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:50px;
	align-items:center;
}
.apprchcntnr .apprchcntnrbx:first-child{
	display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 100px;
    align-items: flex-start;
}
.apprchcntnr .apprchcntnrbx:first-child h3{margin-bottom:15px;}
.yllowbx {
    padding:20px;
    background: #e1b000;
    display: flex;
    align-items: flex-start;
    gap:25px;
	margin-bottom:10px;
	transition: background 0.5s;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.yllowbx-content{ display: flex; flex-direction: column; gap:10px; transition: background 0.5s; transition: transform 0.35s ease, box-shadow 0.35s ease;}
.yllowbx-content h3{text-align:left; font-weight:700; }
.yllowbx:hover{transform: translateY(-5px);}
.yllowbx:hover .yllowbx-content{transform: translateY(-2px);}
.dpbluesctn{background:#001538;}
.parallaxsctn{ position: relative; overflow: hidden;}
.parallaxsctn > .container,
.parallaxsctn > .container-fluid{
	position: relative;
	z-index: 1;
}
.parallax-layer{
	position: absolute;
    top: -300px;
    right: 0;
    width: 100%;
    height: 130%;
    z-index: 0;
    pointer-events: none;
}
.parallax-img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
	transform: translateY(0); /* JS updates this on scroll */
}
.elctrcprdctbx{
	background: #FFFF;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 29%, rgba(0, 65, 187, 1) 29%);
}
.elctrcprdctbx h1{color:rgba(0, 65, 187, 1);}
.elctrcprdctbx h1.textcnter{color:#FFF;}
.elctrcsltnwrpr{
	grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    display: grid;
    margin: 100px 0 0;
}
.elctrcsltnwrpr .pwrsltnwrprbx{gap:15px;}
.elctrcsltnwrpr .pwrsltnwrprbx h2{font-size:20px; line-height:22px;}
.elctrcsltnwrpr .pwrsltnwrprbx h3{text-align:left; font-size:20px;}
.elctrcsltnwrpr .pwrsltnwrprbx p{font-size:16px;}
.elctrcsltnwrpr .pwrsltnwrprbx img{ margin-top: -75px;}
.envrnmntsctn .infrastcnbx:nth-child(1){ border-top-left-radius: 15px; overflow: hidden; }
.envrnmntsctn .infrastcnbx:nth-child(3){ border-top-right-radius: 15px; overflow: hidden; }
.envrnmntsctn .infrastcnbx:nth-child(4){ border-bottom-left-radius: 15px; overflow: hidden; }
.envrnmntsctn .infrastcnbx:nth-child(6){ border-bottom-right-radius: 15px; overflow: hidden; }
.elctrcsltnwrpr .pwrsltnwrprbx ul li{font-size:16px; line-height:22px;}
.eqpmntsctn h2{color:#0041bb;}
.eqpmntsctn h1{color:#f2ae2c; font-weight:400;}
.elctrctab-wrapper{
	display:grid;
	grid-template-columns: repeat(5, 1fr);
	align-items:stretch;
    justify-items: stretch;
    justify-content: flex-start;
	margin-bottom:60px;
}
.elctrctab-wrapper .engine-tab-btn{padding: 30px 25px; justify-content: space-between; gap:0;}
.elctrctab-wrapper .diesel-tab-btn.active h3{color:#0041bb;}
.elctrctab-wrapper .diesel-tab-btn h3{color:#FFF; font-size:22px; text-align:center; font-weight:200;}
.elctrcsctn{margin-top:90px;}
.frstrow{
	display:grid;
	grid-template-columns:2fr 1fr;
	gap:25px;
	margin:0 0 25px;
}
.frstrowbx:first-child h1{color:#0041bb;}
.frstrowbx{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}
.whtbxnew{
	background:#FFF; 
	padding:45px;
	position:relative; 
	box-shadow: 4px 2.8px 9px rgba(0, 0, 0, .35);
	transition: background 0.5s;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
	overflow:hidden;
}
.whtbxnew .arrow-circle{
	position: absolute;
    z-index: 999;
    bottom: 20px;
    transform: translateY(20px);
    border: 1.5px solid #0041bb;
    right: 35px;
    rotate: 268deg;
	
}
.whtbxnew .arrow-circle svg {width:15px; fill:#0041bb;}
.whtbxnew .arrow-circle svg path{stroke:#0041bb;}
.whtbxnew .card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;                 /* now spans full height of the card */
    background: #0041bb;
    transform: translateY(100%);   /* pushed fully below view */
    transition: transform .95s cubic-bezier(.22,.61,.36,1);
	height:100%;
	padding:35px 45px;
	z-index:999;
}
.whtbxnew .card-overlay p:before{top:-15px;}
.whtbxnew:hover .card-overlay { transform: translateY(0); /* slides up to fill the card */}
.whtbxnew .card-overlay .card-desc { opacity: 0; transition: opacity .4s ease .25s;}
.whtbxnew:hover .card-overlay .card-desc { opacity: 1;}
.whtbxnew:hover{transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);}
.whtbxnew p{font-size:18px; position:relative;}
.whtbxnew p:before{
	Content:'';
	position:absolute;
	width:40px;
	height:5px;
	top:55px;
	border-radius:5px;
	background:#dc9b15;
}
.scndrow{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:25px;
}
.lwrdsgnctn{background:#FFF;}
.lwrdsgnctn h1{color:#0041bb;}
.lwrdsgnwrpr{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:0;
	margin-top:90px;
	background:#002e86;
	align-items:center;
}
.lwrdsgnwrprbx{
	padding:45px 45px; 
	position:relative;
	display:flex;
	flex-direction:column;
	gap:35px;
}
.lwrdsgnwrprbx.whitebox{background:#e2b002; border-radius: 15px 0 0 15px;}
.lwrdsgnwrprbx.whitebox h3{color:#0041bb; font-weight:700;}
.lwrdsgnwrprbx.whitebox p{color:#0041bb;}
.lwrdsgnwrprbx.bluebox p{color:#FFF; text-align:center; font-size:22px;}
.lwrdsgnwrprbx img{
	margin: 0 auto;
    display: table;
	left:0;
    position: absolute;
    top: -130px;
    transform: translateX(150%);
}
.costsctn{
	display: flex;
    background: #e1b000;
    flex-direction: column;
    gap: 35px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.costsctn p{text-align:center; margin-bottom:5px; font-size:18px;}
.costwrppr{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:0;
	margin-top:60px;
}
.costwrpprbx{
	display: flex;
    justify-content: center;
    gap:25px;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.linebx{background:#000; width:50px; height:6px; border-radius:15px;}
.epcsltn-grid{grid-template-columns: repeat(3, 1fr);}
.epcsltn-grid .card{aspect-ratio:2.8/2.5;}
.epcsltn-grid .card-overlay{height:80px;}
.epc-slick .epc-card.prdct-epcslide{
	position:absolute;
	background: #f3f0f0;
    position: relative;
    padding:20px;
    display: flex;
    aspect-ratio:2.8/ 4;
    flex-direction: column;
    align-items: flex-start;
    gap:10px;
}
.epc-slick .epc-card.prdct-epcslide img{margin-top:-15px; width:80px; height:80px; position:relative; z-index:99;}
.epc-slick .epc-card.prdct-epcslide h2{font-size: 16px; line-height:22px;}
.epc-slick .epc-card.prdct-epcslide h3{text-align: left; font-size: 16px;}
.epc-slick .epc-card.prdct-epcslide p{font-size:16px; text-align:left; margin-bottom:0;}
.epc-slick .epc-card.prdct-epcslide ul{padding-inline-start: 20px;}
.epc-slick .epc-card.prdct-epcslide ul li{font-size:15px; line-height:18px; margin-bottom: 5px;  padding-bottom: 5px;}
.whtbx h1.sltntxt{text-align:left;}
.prvcycntnr{gap:50px; margin-bottom:100px; grid-template-columns: 1fr 1fr 1fr;}
.prvcycntnr h4{text-align:left; font-size:25px; font-weight:700; margin:0; color:#0039a3;}
.prvcycntnr div{
	display: flex;
    flex-direction: column;
    gap: 10px;
}
.prvcycntnr p{font-size:16px; line-height:22px; font-weight:200;}
#whatSection { position: relative; overflow: hidden;}
.ap-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;   /* extra height gives room for the translateY movement */
  overflow: hidden;
  z-index: 0;
  will-change: transform;
}
.ap-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.what-content {  position: relative; z-index: 1;}
.powerslider.epc-slick .epc-card{
	border-radius: 22px;
    aspect-ratio: auto;
    background:transparent;
    padding-bottom: 0;
}
.powerslider.epc-slick .epc-card.cpbltsbx img{border-radius:22px;}
.powerslider .card-image::before{background:none;}
.cntctdtlsbx{background:#f0f0f0;}
.cntctdtlsbx h1{text-align:left; color:#0041bb; margin-bottom:50px;}
.cntctwrppr{
	display:grid;
	grid-template-columns:1.3fr 1.5fr;
	gap:40px;
}
.cntctwrpprbx{
	display:flex;
	flex-direction:column;
	gap:20px;
}
.cntctwrpprbx h3, .cntctwrpprbx h4{text-align:left; font-weight:700; color:#0041bb;}
.cntctwrpprbx p{margin-bottom:0;}
.cntctwrpprbx iframe{width:100%;}
/* MEDIA QUERY CSS STARTS HERE */
@media only screen and (orientation:portrait){}
@media screen and (max-width:1366px){}
@media screen and (max-width:1199px){}
@media screen and (max-width:1080px){}
@media(min-width: 981px) and ( max-width: 1024px) {} 
@media screen and (min-width:768px) and (max-width:991px) {}
@media all and (min-width:768px) and (max-width:991px) and (orientation:landscape) {}
@media screen and (max-width:991px){
	 h1{font-size:30px;}
	.services{padding: 100px 0;}
	.powergrid{flex-direction:column;}
	.powergrid.row-1{padding-left: 0;}
	.powergrid.row-2{padding-right: 0;}
	/* .bnnrsctn .evntbxbnnr{min-height:80vh;} */
	.mapsctn{padding: 25px 25px 100px;}
	.mapsctn .layout{gap: 50px;}
	.sprtbxcntnr{grid-template-columns: 1fr;}
	.projects-section{padding: 0 3vw 120px 3vw;}
	.projects-container{ flex-direction:column;}
    .project-card,
    .project-card.large,
    .project-card.medium,
    .view-projects{
        width:100%;
        min-width:100%;
        flex:unset;
    }
    .project-card{ min-height:320px;}
    .view-projects{ align-items:center; text-align:center;}
    .view-projects h2{ text-align:center; font-size:32px;}
	.cpbltswrpr{ grid-template-columns: repeat(2, 1fr);}
	/* .innrbnnr .evntbxbnnr{min-height: 50vh;} */
	.engine-tab-content{padding: 0 30px;}
	.ftrwrppr{grid-template-columns: repeat(3, 1fr);}
	.cpbltswrpr.prdctrngbx{grid-template-columns: repeat(3, 1fr);}
	.engine-tab-btn{ padding: 50px 50px 20px;}
	.pwrsltnwrpr{gap:20px;}
	.gaswrpr .pwrsltnwrprbx{padding: 30px;}
	.engine-tab-btn.diesel-tab-btn{padding: 20px 20px 20px;}
	.scndrow{grid-template-columns: repeat(2, 1fr); gap: 35px;}
	.frstrow{grid-template-columns: 1fr 1fr;}
	.whtbxnew p:before{top:-15px;}
	.frstrowbx{
		display: flex;
		gap:20px;
		justify-content: flex-start;
		flex-wrap: nowrap;
		align-items: center;
	}
	.whtbxnew .card-overlay p:before{top: -20px;}
	.mttrwrprbx .infrastcn{grid-template-columns: repeat(2, 1fr);}
	.mttrwrprbx .infrastcn .infrastcnbx .card-content p{line-height:16px;}
	.gear-animation{width:150px; height:150px;}
	.prdctsprtsctnbx{gap:0;}
	.projects-main{ grid-template-columns: 1fr 1fr;}
	.preview-overlay{bottom: 0;}
	.capabilities-grid-bottom{grid-template-columns: repeat(2, 1fr); margin-top: 15px;}
	.capabilities-content{padding: 30px 0 76px 0;}
	.epc-slick .epc-card{padding-bottom:266px; aspect-ratio:1.5/3;}
	.apprchcntnr{grid-template-columns: repeat(1, 1fr); gap:20px;}
	.apprchcntnr .apprchcntnrbx:first-child{gap: 25px;}
	.mttrwrprbx .infrastcn .infrastcnbx:nth-child(3){border-top-right-radius:0;}
	.card-grid{grid-template-columns: repeat(2, 1fr);}
	.costwrppr{ grid-template-columns: repeat(2, 1fr); gap: 30px;}
	.prflewrppr{grid-template-columns: 1fr;}
	.cards-grid{grid-template-columns: repeat(2, 1fr);}
	.card-name h2{font-size:30px;}
	.enerjsctn{grid-template-columns:1fr; gap:25px;}
	.mngmntsctnwrpr{grid-template-columns: repeat(1, 1fr); gap: 0; margin-top:40px;}
	.elctrctab-wrapper{overflow:auto;}
	.epc-slick .epc-card.prdct-epcslide{aspect-ratio:2.8/ 7;}
}
@media screen and (max-width:767px){
	.projects-section{ padding:50px 15px; background: linear-gradient(180deg, rgba(240, 240, 240, 1) 100%, rgba(255, 255, 255, 1) 16%);}
    .project-card,
    .view-projects{
        min-height:auto;
      }
      .project-content{ padding:25px; }
      .project-content p,
      .project-content span{
        font-size:14px;
      }
    .view-projects h2{ font-size:28px; }
	.parallax-section-service{background-size:cover;}
	.bnnrsctn .evntbxbnnr .bannrbx .bannrbxcntnt h1{font-size:40px;}
	.sprtbx .astntbx{
		width: 100%;
        justify-content: center;
        gap: 10px;
	}
	.sprtbx .astntbx:hover{transform: translateY(-8px);}
	.sprtbx .blubx-container:hover{transform: translateY(-8px);}
	.footerwrpr{grid-template-columns: 1fr;}
	.ftrtxtbx p a{margin: 0 3px;}
	.lwrfttr{grid-template-columns: repeat(2, 1fr);}
	.engine-tab-wrapper{overflow:auto;}
	.engine-tab-btn.diesel-tab-btn{padding: 17px 11px 17px;}
	.ftrwrppr { grid-template-columns: repeat(2, 1fr); }
	.cpbltswrpr.prdctrngbx{grid-template-columns: repeat(1, 1fr);}
	.pwrsltnwrpr{ grid-template-columns: repeat(1, 1fr);}
	.mttrwrprbx .infrastcn .infrastcnbx .card-content{ grid-template-columns: 1fr; gap:0px; }
	.pwrsltnwrpr {gap: 90px;}
	.prdctcntnr h2{margin-bottom:20px;}
	.services-grid .support-card:nth-child(1){grid-column: 1;}
	.services-grid .support-card:nth-child(2){grid-column:1;}
	.services-grid .support-card:nth-child(3){grid-column: 1;}
	.services-grid .support-card:nth-child(4){grid-column: 1;}
	.services-grid .support-card:nth-child(5){grid-column: 1;}
	.prdctimgbx img{display:none;}
	.prdctsprtsctnbx p{width:auto;}
	.services-grid{grid-template-columns: repeat(1, 1fr);}
	.preview-overlay h2{font-size:20px;}
	.lwrdsgnwrpr{grid-template-columns: repeat(1, 1fr);}
	.lwrdsgnwrprbx.whitebox{border-radius:15px 15px 0 0;}
	.prdctsltn-grid .cpbltswrpr{grid-template-columns: repeat(2, 1fr);}
	.lwrdsgnwrprbx{ padding: 35px 27px;}
	.lwrdsgnwrprbx img{
		position:relative;
		margin: 0 auto 25px;
		top:0;
		transform: translateX(0%);
	}
	.fuelcntnr{grid-template-columns:1fr; gap:25px; margin-top: 20px;}
	.cards-grid{grid-template-columns: repeat(1, 1fr);}
	.sprtbx .spprtblubx{ gap: 15px; align-items: stretch;}
	.enerjsctnbxparabx{gap: 25px;}
	.regnal-wrppr{grid-template-columns: repeat(2, 1fr);}
	.form-grid{grid-template-columns:repeat(2, 1fr);}
	.main-slider{width:33%; padding:60px;}
	.cntctwrppr{grid-template-columns:1fr; gap:20px;}
	.detail-image .title-block h2{font-size:22px;}
	.cable-parallax-wrap{display:none;}
	.epc-slick .epc-card{aspect-ratio:2.8/3;}
}
@media screen and (max-width:540px){}
@media (max-width:480px){
	.powerbx{padding: 30px 30px;}
	.scndrow{grid-template-columns: repeat(1, 1fr); gap: 35px;}
	.frstrow{grid-template-columns: 1fr;}
	.ftrwrppr { grid-template-columns: repeat(1, 1fr); }
	.form-grid{grid-template-columns: repeat(1, 1fr);}
	.mttrwrprbx .infrastcn{grid-template-columns: repeat(1, 1fr);}
	.mttrwrprbx .infrastcn .infrastcnbx .card-content{height:auto; gap: 10px; padding: 25px;}
	.elctrcprdctbx{background: linear-gradient(180deg, rgba(255, 255, 255, 1) 18%, rgba(0, 65, 187, 1) 18%);}
	.gasgrrnbx{padding: 15px;}
	.projects-list{position: relative; top:0; max-height: calc(50vh - 60px);}
	.projects-main{ grid-template-columns:1fr; gap:10px;}
	.capabilities-grid{grid-template-columns:1fr;}
	.capabilities-grid-bottom{grid-template-columns: repeat(1, 1fr);}
	.prdctsltn-grid .cpbltswrpr {grid-template-columns: repeat(1, 1fr);}
	.card-grid{grid-template-columns: repeat(1, 1fr);}
	.mngmntsctn h1{font-size:50px;}
	.enerjsctnbxparabx { gap: 15px; grid-template-columns: 1fr; }
	.regnal-wrppr{grid-template-columns: repeat(1, 1fr);}
	.engine-tab-content h2{font-size:25px;}
	.prdctbnnr .evntbxbnnr{min-height:90vh;}
	.powerbx .card-head{flex-direction: column;}
	.epc-slick .epc-card.prdct-epcslide{aspect-ratio:2.8/ 4;}
	.mapsctn h1{font-size:30px;}
	.sprtbx h1{font-size:35px;}
	.sprtbx h2{font-size:30px;}
	.sprtbxcntnr.sectnbx{padding:100px 0;}
	.innrbnnr .evntbxbnnr{min-height:80vh;}
	.sector-slider{padding-bottom:0;}
	.whtbx h1{font-weight:700;}
	.prdctbnnr .evntbxbnnr .bannrbx{top:0;}
	.parallax-section{background-position: -150px 7%;}
	.blackbxsctn h3.blcbxtxt{line-height:30px;}
	.eqpmntsctn h1{font-weight:700;}
	.frstrowbx.whtbxnew{padding:25px;}
	.clntsctn h1{font-weight:700;}
	.ftrtxtbx{grid-template-columns: 1fr;}
	.epcsctn h1{font-weight:700;}
	.fuelcntnrbx h2{font-size: 27px;}
	.fuelcntnrbx h3{font-size:22px;}
	.mngmntsctnbx img{margin:0 auto 30px; width:80%;}
	.mngmntsctnwrpr p{text-align:center;}
	.sprtbx .blubx-container{padding: 15px;}
	.prdctbnnr .evntbxbnnr .bannrbx .bannrbxcntnt h1{font-size:30px;}
	.innrbnnr .evntbxbnnr .bannrbx .bannrbxcntnt h1{font-size:30px;}
	.innrbnnr .evntbxbnnr.mobile-banner{justify-content: flex-end; padding-bottom:100px;}
	.bnnrsctn .evntbxbnnr .imgbx img{height:auto; object-fit: contain;}
}
@media (max-width:390px){
	h1{font-size: 35px;}
	.innrbnnr .evntbxbnnr{min-height:90vh;}
}
@media (max-width:375px){}
@media (max-width:320px){}