.paragraph--type--inner-banner-carousel .banner-carousel-items,
.paragraph--type--inner-banner-carousel .owl-stage-outer,
.paragraph--type--inner-banner-carousel .owl-stage,
.paragraph--type--inner-banner-carousel .owl-item {
	height: 100%;
}

.banner-carousel-controls {
	display: none;
}

.banner-carousel-nav {
	position: absolute;
	left: 0;
	bottom: 50px;
	z-index: 2;
	margin-top: 20px;
	gap: 5%;
	flex-wrap: wrap;
}

.banner-carousel-nav .banner-carousel-nav-item-content {
	position: relative;
	width: 300px;
	z-index: 1;
}

.banner-carousel-nav-item {
	position: relative;
	text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.35);
	transition: all 0.2s ease;
}

.banner-carousel-nav-item.active {
	font-weight: bold;
}

.paragraph--type--inner-banner-carousel .progress-bar-container {
	background-color: rgba(255, 255, 255, 0.65);
	border-radius: 50rem;
	height: 6px;
	margin-top: 4px;
	width: 100%;
	transition: all 0.2s ease;
	overflow: hidden;
}

.paragraph--type--inner-banner-carousel .progress-bar {
	height: 100%;
	background: linear-gradient(to right, #3ac6af, #7e5ebc);
	width: 0%;
}

.banner-carousel-nav .active .progress-bar-container {
	background-color: #fff;
}

.banner-carousel-nav .progress-text-wrapper {
	position: relative;
	display: inline-block;
}

.banner-carousel-nav .progress-text-wrapper .clip-progress {
	color: var(--petronas-green);
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
	overflow: hidden;
	width: 0%;
	pointer-events: none;
}

.paragraph--type--inner-banner-carousel.JmasterInnerRow1Container .JindexImgContent {
	bottom: unset !important;
	top: calc(50% + 35px) !important;
	transform: translateY(-50%);
}

.paragraph--type--inner-banner-carousel .JindexImgContent h1 {
	font-size: 36px;
}

.paragraph--type--inner-banner-carousel .link-read-more.animate-icon.invert i {
	background-image: url(../../images/read-more.svg);
}

.paragraph--type--inner-banner-carousel .link-read-more.animate-icon.invert p {
	color: #fff;
}

@media only screen and (min-width: 1025px) {
	.banner-carousel-nav-item::before {
		/*background: url(../../images/banner-carousel-hover.gif) no-repeat center center;*/
		background: linear-gradient(to right, var(--petronas-green), var(--petronas-purple));
		background-size: cover;
		content: " ";
		display: block;
		height: 100%;
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		transition: all 0.2s ease;
		width: 100%;
	}

	.banner-carousel-nav-item:hover {
		cursor: pointer;
	}

	/*.banner-carousel-nav-item:hover::before {
        opacity: 1;
    }

    .banner-carousel-nav-item:hover .progress-bar-container {
        opacity: 0;
    }*/

	.banner-carousel-nav-item .progress-bar-container {
		display: none !important;
	}
}

@media only screen and (max-width: 1024px) {
	/*.banner-carousel-nav {
        gap: 15px;
    }

    .banner-carousel-nav > div {
        width: 80px;
    }

    .banner-carousel-nav > div.active {
        width: 280px;
    }

    .banner-carousel-nav > div:not(.active) .banner-title,
    .banner-carousel-nav > div:not(.active) .progress-text-wrapper,
    .banner-carousel-nav > div .progress-text-wrapper .clip-progress {
        display: none;
    }*/

	.banner-carousel-controls {
		align-items: center;
		bottom: 100px;
		color: #fff;
		display: flex;
		font-weight: bold;
		gap: 0 8px;
		position: absolute;
		right: 15px;
		z-index: 5;
	}

	.banner-carousel-controls button {
		background: var(--petronas-green) url(../../images/icon-right-w.png) no-repeat center center;
		background-size: 18px auto;
		border: 0;
		border-radius: 50rem;
		height: 40px;
		width: 40px;
	}

	.banner-carousel-controls button.carousel-prev {
		background-image: url(../../images/icon-left-w.png);
	}

	.banner-carousel-controls .carousel-index {
		display: block;
		min-width: 34px;
	}

	.banner-carousel-nav {
		bottom: 95px;
	}

	.banner-carousel-nav > div:not(.active) {
		position: absolute;
		left: -9999px;
	}

	.banner-carousel-nav {
		flex-direction: column;
	}

	.banner-carousel-nav .progress-bar-container {
		display: none;
	}

	.banner-carousel-nav .banner-carousel-nav-item-content {
		width: 100%;
	}

	.banner-carousel-nav-item.active {
		font-weight: normal;
	}
}

@media only screen and (max-width: 767px) {
	.paragraph--type--inner-banner-carousel .JindexImgContent h1 {
		line-height: 1;
	}
}

/*New Changes as of December 29th for myMesra*/
/*---------------------------------------------
                HOMEPAGE
---------------------------------------------*/

/*---------------------------------------------
                Hero Section
---------------------------------------------*/
/* Base styles for the dynamic diesel banner */
.homepage-carousel-1 .JindexImg01Inner {
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Desktop - 1920px (default) */
.homepage-carousel-1 .JindexImg01Inner {
	background-position: 30%;
}

/* Tablet portrait - 768px */
@media (max-width: 768px) {
	.homepage-carousel-1 .JindexImg01Inner {
		background-position: 20%;
	}
}

/*Carousel-Title and Controls*/
@media only screen and (max-width: 1024px) {
	.banner-carousel-controls {
		bottom: 30px;
	}

	.banner-carousel-nav {
		bottom: 25px;
	}
}

/*remove the title if needed*/
.no-title-text .JindexImgContent h1 {
	display: none;
}

/*Changing the font sizing*/
.myMesraHomepage .JindexImgContent p {
	font-size: 24px;
	font-weight: 500;
	text-shadow: none;
}

/*Changing the CTA hover state*/
.myMesraHomepage .JindexContainerInner .JindexImgContent a:hover {
	color: #007d73;
	text-decoration: underline;
	opacity: 1;
}

.myMesraHomepage .no-title-text .JindexImgContent a:hover p {
	color: #007d73;
	opacity: 1;
}

.no-title-text .link-read-more.invert i {
	background-image: url(/sites/default/files/uploads/content/2025/homepage/cta-icon-green.svg);
}

/*Moving the CTA*/
/* .paragraph--type--inner-banner-carousel.JmasterInnerRow1Container .JindexImgContent {
	width: 50%;
	left: 0px !important;
	display: flex;
	justify-content: center;
	top: 80% !important;
} */

/* Full banner Link */
.paragraph--type--inner-banner-carousel .JindexImg01 {
	position: relative; /* needed for absolute positioning */
}

.paragraph--type--inner-banner-carousel .banner-link-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5; /* make sure it's above images but below content if needed */
}

.navDark .banner-carousel-nav-item {
	text-shadow: none;
	color: black;
}
.navDark.banner-carousel-controls .carousel-index {
	color: #000000;
}

.banner-carousel-items .link-read-more.invert p {
	color: #fff;
}
.banner-carousel-items .link-read-more.invert i {
	background-image: url("/sites/default/files/uploads/content/2025/dynamic-diesel/cta-icon-white.svg");
}