:root {
    --primary: #082171;
}
/* a:focus{
    color:#082171;
} */

/* a:hover{
    color:#082171 !important;
} */


#footer {
    background-color: #082171;
    border-top: 4px solid #082171;
    font-size: 0.9em;
    margin-top: 0px;
    padding: 0;
    position: relative;
    clear: both;
}

#footer .footer-copyright {
    background: #082171 !important;
}

.header-body.border-top-0.bg-dark.box-shadow-none {
    background-color: #ffffff;
}

/* Card Styling */
.card-3 {
    position: relative;
    border: none;
    background-color: transparent;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Optional: adds shadow for better visibility */
    border-radius: 10px; /* Rounded corners */
}

/* Card Image Wrapper */
.card-3 .card-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Image Styling */
.card-3 .card-img-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container */
    border-radius: 10px; /* Optional: rounded corners for images */
}

/* Dark Overlay */
.card-3 .dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dark overlay */
    z-index: 1; /* Ensures the overlay appears in front of the image */
}

/* Card Body */
.card-3 .card-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* Ensures text appears in front of the overlay */
    text-align: center;
    color: white;
    padding: 20px; /* Adds space around text */
    width: 90%; /* Ensures the text has room to breathe */
    transition: transform 0.3s ease;
}

/* Card Title */
.card-3 .card-body h5 {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.4; /* Ensures line spacing for better readability */
}

/* Card Description (optional) */
.card-3 .card-body p {
    font-size: 1rem;
    margin: 10px 0 0; /* Adds space below the heading */
    opacity: 0.9;
    line-height: 1.5;
}

/* Hover Effect for Cards */
.card-3:hover .card-body {
    transform: translate(-50%, -40%); /* Slightly moves the text upwards on hover */
}

/* Owl Carousel Adjustments */
.owl-carousel .item {
    padding: 10px; /* Adds space around each card */
}

/* Responsiveness */
@media (max-width: 576px) {
    .card-3 .card-body h5 {
        font-size: 1rem; /* Adjust heading size on small screens */
    }

    .card-3 .card-body p {
        font-size: 0.875rem; /* Adjust text size for better readability */
    }
}

@media (max-width: 768px) {
    .card-3 .card-body h5 {
        font-size: 1.1rem; /* Adjust heading size on medium screens */
    }

    .card-3 .card-body p {
        font-size: 0.95rem;
    }
}



.video-bg-container-2 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio */
    overflow: hidden;
}

.c50bannerBG {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.c50bannerBG iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Remove any border */
}

#video-banner {
    pointer-events: none; /* Disable interaction with the video */
}


.text-overlay {
	position: absolute;
	top: 50%;
	left: 10%;
	transform: translateY(-50%);
	color: white;
	z-index: 2; /* Ensures it appears above the video */
	pointer-events: none; /* Prevents interaction interference with the video */
}



/* Responsive adjustments */
@media (max-width: 768px) {
    .video-bg-container-2 {
        padding-bottom: 75%; /* Adjust for smaller screens, preserving aspect ratio */
    }
}


p {
    font-size: 16px;
}


iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

p.logo {
    margin: 0px;
    /* padding: 0px; */
    /* line-height: 26px; */
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    color: #000000;
    position: absolute;
    left: 50px;
    top: 0px;
    max-width: 250px;
}

p.tagline {
    position: absolute;
    left: 50px;
    top: 30px;
    margin: 0px;
    padding: 0px;
    line-height: 14px;
    color: #999;
    width: 270px;
    display: block;
    border: 0px solid #f00;
}

.card-body h4 {
    padding-top: 25px;
}

.card {
    border: 0;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.card-body li {
    text-align: left;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-1:hover>.card-body h4 {
    color: #fff !important;
}
.card-1:hover .img-core01 {
    content: url('/staging/img/image/core01(white).png'); /* Change image on hover */
}

.card-1:hover .img-core02 {
    content: url('/staging/img/image/core02(white).png'); /* Change image on hover */
}

.card-1:hover .img-core03 {
    content: url('/staging/img/image/core03(white).png'); /* Change image on hover */
}
.card-body {
    text-align: center;
    padding: 40px 20px;
    /* Adjust padding as needed */

}

.card-1:hover {
    background-color: #082171;
}

.card-body:hover p {
    color: white;
}

.card-2:hover>.card-body h4 {
    color: #000000 !important;
}

.card-2:hover>.card-body p {
    color: #000000 !important;
}

.card-2 .card-body h4 {
    padding-top: 0 !important;
}

.benefit-card {
    min-height: 360px;
}

.timeline-date {
    background: #082171 !important;
}

.btn-primary:hover {
    background-color: #082171 !important;
    border-color: #082171;
    color: #fff;
}

.btn-primary:active {
    background-color: #082171 !important;
    border-color: #082171;
    color: #fff;
}

.btn-primary{
    border-color:#082171 !important;
}

.btn-primary:active:not(.bg-transparent), .btn-primary.active:not(.bg-transparent) {
    background-color: #082171 !important;
    border-color: #082171;
    color: #fff;
}

.btn-primary:focus:not(.bg-transparent), .btn-primary.focus:not(.bg-transparent) {
    background-color: #082171 !important;
    border-color: #082171;
    color: #fff;
}


.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /* Maintain 16:9 aspect ratio */
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -75%) scale(1.2);
    /* Scale the video content */
}

.process-step:hover .step-color-1 {
    background-color: #4CAF50 !important; /* Green for sustainability */
}

.process-step:hover .step-color-2 {
    background-color: #2196F3 !important; /* Blue for energy efficiency */
}

.process-step:hover .step-color-3 {
    background-color: #FFC107 !important; /* Yellow for waste reduction */
}

.process-step:hover .step-color-4 {
    background-color: #673AB7 !important; /* Purple for water management */
}

.process-step:hover .step-color-5 {
    background-color: #F44336 !important; /* Red for long-term goals */
}

/* Default styles for the circle and icons */
.process-step-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.process-step-circle-content {
    color: white; /* Keeps icons white */
}

.table-bordered {
    border: 2px solid white;
    border-collapse: collapse;
}
.table-bordered td {
    background-color: transparent;
    border: 1px solid white;
}

#googlemaps {
    width: 100%; /* Ensures it spans only within the parent container */
    height: 300px; /* Set the height of the map */
    position: relative; /* Ensures it's positioned correctly within the parent */
    overflow: hidden; /* Prevents content from overflowing */
    border: 1px solid #ddd; /* Optional: Adds a border */
    border-radius: 5px; /* Optional: Adds rounded corners */
}

#googlemaps iframe {
    width: 100%; /* Makes the iframe responsive to the container */
    height: 100%; /* Ensures it fits the container height */
    border: 0; /* Removes any default border */
    display: block; /* Prevents unwanted white space around the iframe */
}

.solution-box {
	position: relative;
}

@media only screen and (min-width: 992px){
/* Horizontal dotted line for the first two boxes */
.solution-box:not(:nth-child(3))::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -52px; /* Adjust spacing as needed */
    width: 100px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #082171 0px, #082171 5px, transparent 5px, transparent 10px);
    transform: translateY(-50%);
}

/* Vertical dotted line below the third box */
.solution-box:nth-child(3)::after {
    content: "";
    position: absolute;
    left: 52%;
    bottom: -50px; /* Ensure enough space */
    width: 2px;
    height: 50px; /* Adjust height as needed */
    background: repeating-linear-gradient(0deg, #082171 0px, #082171 5px, transparent 5px, transparent 10px);
    transform: translateX(-50%);
}

/* Remove dotted line for box 6 */
.solution-box:nth-child(6)::after, .solution-box:nth-child(9)::after, .solution-box:nth-child(12)::after {
    display: none !important;
}

/* Right and Bottom dotted lines for box 4 */
.solution-box:nth-child(4)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -52px;
    width: 100px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #082171 0px, #082171 5px, transparent 5px, transparent 10px);
    transform: translateY(-50%);
}

.solution-box:nth-child(4)::before, .solution-box:nth-child(9)::before {
    content: "";
    position: absolute;
    bottom: -42px;
    left: 52%;
    width: 2px;
    height: 42px;
    background: repeating-linear-gradient(0deg, #082171 0px, #082171 5px, transparent 5px, transparent 10px);
    transform: translateX(-50%);
}


.solution-circle-left {
	background: #082171;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    left: 40px;
    top: 47.5%;
}

.solution-circle-right {
	background: #082171;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    right: 40px;
    top: 47.5%;
}

.solution-circle-top {
	background: #082171;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
	top: -6px;
}

.solution-circle-bottom {
	background: #082171;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
	bottom: -8px;
}
}

@media only screen and (max-width: 991px){
	.solution-box::after {
		content: "";
		position: absolute;
		bottom: -50px;
		left: 51.5%;
		width: 2px;
		height: 50px;
		background: repeating-linear-gradient(0deg, #082171 0px, #082171 5px, transparent 5px, transparent 10px);
		transform: translateX(-50%);
	}
	
	.solution-box:nth-child(10)::after {
		content: none !important;
	}
	
	.solution-circle-mobile {
		background: #082171;
    	width: 15px;
    	height: 15px;
    	border-radius: 50%;
    	position: absolute;
    	left: 50%;
		top: -8px;
	}
}

.solution-box img {
	width: 100%;
	border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

.solution-body {
    background: #fff;
    padding: 20px;
    display: flex;
    flex-wrap: nowrap;
	justify-content: space-between;
	border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.solution-body h4 {
    font-size: 16px;
}

.order-1 {
	order: 1;
}

.order-2 {
	order: 2;
}

.order-3 {
	order: 3;
}

.order-4 {
	order: 4;
}

.order-5 {
	order: 5;
}

.order-6 {
	order: 6;
}

.order-7 {
	order: 7;
}

.order-8 {
	order: 8;
}

.order-9 {
	order: 9;
}

.order-10 {
	order: 10;
}

.order-11 {
	order: 11;
}

.order-12 {
	order: 12;
}

@media only screen and (min-width: 992px){
	.order-lg-1 {
		order: 1 !important;
	}

	.order-lg-2 {
		order: 2 !important;
	}

	.order-lg-3 {
		order: 3 !important;
	}

	.order-lg-4 {
		order: 4 !important;
	}

	.order-lg-5 {
		order: 5 !important;
	}

	.order-lg-6 {
		order: 6 !important;
	}

	.order-lg-7 {
		order: 7 !important;
	}

	.order-lg-8 {
		order: 8 !important;
	}

	.order-lg-9 {
		order: 9 !important;
	}

	.order-lg-10 {
		order: 10 !important;
	}

	.order-lg-11 {
		order: 11 !important;
	}

	.order-lg-12 {
		order: 12 !important;
	}
}