:root {
    --primary-color: #43A047;
    /* Forest Green */
    --primary-light: #1B64A4;
    /* Vibrant Green */
    --primary-dark: #1B5E20;
    --secondary-color: #D62928;
    /* Vibrant Orange */
    --secondary-hover: #B51B1A;
    --text-dark: #111;
    --text-muted: #666;
    --bg-light: #F5F5F5;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --footer-blue: #0A3D73;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-dark);
}

.text-primary {
    color: var(--primary-light) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.btn-primary {
    background: linear-gradient(90deg, #1B5E20 0%, #43A047 100%);
    border: none;
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 12px 32px;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 124, 0, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(90deg, #1B5E20 0%, #43A047 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 124, 0, 0.4);
}

.btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: white;
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 10px 32px;
    text-transform: uppercase;
    font-size: 0.9rem;
    border-radius: 4px;
    background: transparent;
    transition: all 0.3s;
}

.btn-outline-light:hover {
    background-color: white;
    color: var(--primary-dark);
}

.section-padding {
    padding: 80px 0;
}

/* Navbar */
.navbar {
    padding: 15px 0;
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

.navbar-brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary-dark) !important;
}

.nav-link {
    font-weight: 600;
    color: #333 !important;
    margin: 0 10px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: var(--secondary-color) !important;
}

/* Dropdown on Hover */
@media (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

.dropdown-menu {
    border-radius: 8px;
    padding: 10px 0;
    margin-top: 10px;
    animation: fadeIn 0.3s ease;
}

.dropdown-item {
    font-size: 0.9rem;
    font-weight: 500;
    color: #444;
    transition: all 0.2s;
    padding: 8px 20px;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: var(--secondary-color);
    padding-left: 25px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Section (Full Width) */
.hero-wrapper {
    padding-top: 76px;
    /* Reduced to navbar height */
    padding-bottom: 0px;
    background-color: transparent;
}


.hero-card {
    position: relative;
    border-radius: 0;
    min-height: 850px;
    overflow: hidden;
    /* Removed box-shadow for full width */
    background-color: #000;
}

/* New class for carousel item background */
.hero-slide-bg {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 850px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #081c2ef2 0%, #081c2ef2 45%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 60px;
    color: white;
}

.hero-pill {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
}

.hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 550px;
    margin-bottom: 40px;
    line-height: 1.6;
}

.btn-hero-primary {
    background-color: #43A047;
    color: white;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-hero-primary:hover {
    background-color: #43A047;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px #43A04766;
}

.btn-hero-glass {
    background-color: rgba(33, 37, 41, 0.6);
    color: white;
    padding: 14px 32px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    transition: all 0.3s;
    text-decoration: none;
    backdrop-filter: blur(4px);
}

.btn-hero-glass:hover {
    background-color: white;
    color: #fff;
    border-color: white;
    transform: translateY(-2px);
}

/* Stats Section */
.stats-section {
    padding: 60px 0;
    background-color: white;
}

.stat-item h3 {
    font-size: 2.5rem;
    color: var(--primary-light);
    margin-bottom: 5px;
    font-weight: 800;
}

.stat-item p {
    font-size: 0.8rem;
    font-weight: 700;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* About Section */
.about-image {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.about-content h6 {
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.about-content h2 {
    font-size: 2.2rem;
    margin-bottom: 25px;
    color: var(--primary-dark);
}

.about-content p {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 20px;
}

/* Sector Expertise */
.sector-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.view-all-link {
    color: #43A047;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
}

.view-all-link:hover {
    color: #43A047;
    text-decoration: none;
}

/* Card Styling - Removing borders/backgrounds */
.sector-card {
    background: transparent;
    height: 100%;
}

.sector-img-wrap {
    position: relative;
    height: autopx;
    /* Taller images */
    border-radius: 16px;
    /* Fully rounded */
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.sector-card:hover .sector-img-wrap {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.sector-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sector-card:hover .sector-img-wrap img {
    transform: scale(1.05);
}

/* Branding Icon Overlay */
.sector-branding {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    color: #43A047;
    /* Green Icon */
    font-size: 1.2rem;
    z-index: 2;
}

/* Text Content below image */
.sector-body {
    padding: 0;
}

.sector-body h5 {
    font-weight: 700;
    color: #1B64A4;
    /* Dark Blue Title */
    margin-bottom: 10px;
    font-size: 1.25rem;
}

.sector-body p {
    font-size: 0.95rem;
    color: #546E7A;
    /* Blue Grey Text */
    margin: 0;
    line-height: 1.5;
}

/* Completed Projects */
.project-card {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.project-card h5 {
    font-weight: 700;
    color: #1B64A4;
    /* Dark Blue Title */
    margin-bottom: 10px;
    font-size: 1.25rem;
}

.project-img-box {
    position: relative;
    height: 220px;
}

.project-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.status-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    border-radius: 3px;
}

.status-completed {
    background-color: var(--primary-color);
}

.status-ongoing {
    background-color: #F9A825;
    /* Yellow/Gold */
    color: #212121;
}

.project-details {
    padding: 20px;
}

.project-details h5 {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.project-details small {
    color: #9E9E9E;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 15px;
}

.project-link {
    color: var(--secondary-color);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* CTA Footer */
.cta-footer-section {
    background: linear-gradient(135deg, #2E7D32 0%, #66BB6A 100%);
    padding: 80px 0;
    color: white;
    text-align: center;
}

/* Footer Links */
.footer-main {
    background-color: var(--footer-blue);
    color: white;
    /* Default text white */
    padding-top: 60px;
    padding-bottom: 30px;
}

.footer-heading {
    color: white;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
}

.footer-link {
    color: rgba(255, 255, 255, 0.85);
    /* Slightly muted white */
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 2.2;
    /* Spacing out list items */
    transition: opacity 0.2s;
}

.footer-link:hover {
    text-decoration: none;
    color: white;
    opacity: 1;
}

.brand-green-text {
    color: #84BD00 !important;
    /* Bright green from image */
}

/* Social Icons */
.social-icons-wrapper {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.social-icon-box {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--footer-blue);
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.social-icon-box:hover {
    transform: translateY(-2px);
    color: var(--footer-blue);
}

/* Address Box */
.address-box {
    background-color: rgba(255, 255, 255, 0.08);
    /* Transparent Overlay */
    padding: 15px 20px;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 300px;
}

/* Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 50px;
    padding-top: 30px;
}

.footer-bottom-text {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.9;
}

.footer-bottom-link {
    color: white;
    font-weight: 700;
    font-size: 0.75rem;
    text-decoration: none;
    letter-spacing: 0.5px;
    margin-left: 25px;
    text-transform: uppercase;
    opacity: 0.9;
}

.footer-bottom-link:hover {
    text-decoration: underline;
    color: white;
}

/* Update About Section Styles (New Layout) */
.about-section-wrapper {
    position: relative;
    /* padding handled by section-padding */
}

/* Image Container with Custom Shapes */
.about-img-container-custom {
    position: relative;
    margin: 30px;
    /* Space for the shapes */
    z-index: 1;
    /* Above background */
}

/* Top Left Shape (Light Blue) */
.about-img-shape-top {
    position: absolute;
    top: -30px;
    left: -30px;
    width: 120px;
    height: 120px;
    background-color: #E3F2FD;
    /* Light Blue 50 */
    border-radius: 20px 0 0 0;
    /* Rounded top-left corner only if square, or all */
    border-radius: 20px;
    z-index: -1;
}

/* Bottom Right Shape (Grey Shadow or Shape) */
.about-img-shape-bottom {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 150px;
    height: 150px;
    background-color: #ECEFF1;
    /* Blue Grey 50 */
    border-radius: 20px;
    z-index: -1;
}

/* Main Image Styling */
.about-main-img {
    width: 100%;
    border-radius: 20px;
    /* box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); */
    /* Stronger shadow */
    position: relative;
    z-index: 2;
    display: block;
}


/* Content Side */
.about-label-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Space between line and text */
    margin-bottom: 20px;
}

.about-label-line {
    width: 30px;
    height: 2px;
    background-color: #3C8712;
    /* Green Line */
}

.about-label-text {
    color: #3C8712;
    /* Green Text */
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.about-heading-custom {
    color: #1B64A4;
    /* Dark Blue Heading */
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 2.4em;
    line-height: 1.2;
    margin-bottom: 30px;
}

.about-text-custom {
    color: #546E7A;
    /* Blue Grey Text for contrast */
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 400;
    margin-bottom: 25px;
}

.btn-read-more-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #43A047;
    color: white;
    padding: 14px 35px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px #43A04766;
    margin-top: 10px;
}

.btn-read-more-custom:hover {
    background-color: #43A047;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px #43A04766;
}

/* Hero Slider Section */
.hero-slider-section {
    position: relative;
    padding-top: 76px;
    /* Offset for fixed navbar */
}

/* Custom Carousel Styling */
#heroCarousel .carousel-item {
    height: 85vh;
    min-height: 600px;
    background-color: #000;
}

#heroCarousel .carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    opacity: 0.7;
    /* Darken image slightly */
}

.hero-slide-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
    color: white;
}

.hero-tag-badge {
    display: inline-block;
    background-color: rgba(30, 60, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 8px 16px;
    border-radius: 30px;
    margin-bottom: 25px;
    backdrop-filter: blur(5px);
}

.hero-slide-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-slide-title span {
    color: #43A047;
    /* Brand Orange */
}

.hero-slide-text {
    font-size: 1.1rem;
    max-width: 600px;
    margin-bottom: 40px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Custom Buttons for Slider */
.btn-slider-primary {
    background-color: #43A047;
    color: white;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 600;
    text-transform: capitalize;
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-slider-primary:hover {
    background-color: #43A047;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px #43A04766;
}

.btn-slider-outline {
    background-color: rgba(33, 37, 41, 0.6);
    /* Dark semi-transparent */
    color: white;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
    backdrop-filter: blur(4px);
}

.btn-slider-outline:hover {
    background-color: white;
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4);
}

/* Specific styling for new nested cards */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Carousel Indicators */
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 6px;
    background-color: white;
    opacity: 0.5;
    border: none;
}

.carousel-indicators .active {
    opacity: 1;
    background-color: #43A047;
}

/* Rounded corners container if needed, but styling full screen first as standard hero */
@media (min-width: 1400px) {
    /* Optional: Limit width on very large screens if desired, but user image looks contained. 
       Let's stick to full width based on previous design unless user asks for boxed. 
       The user image has rounded corners, so let's check index.html if we want to add a container. */
}



/* CTA Banner Section */
/* CTA Banner Section */
.cta-banner-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: url('https://images.unsplash.com/photo-1541976590-713941681591?q=80&w=2670&auto=format&fit=crop') no-repeat center center/cover;
    background-attachment: fixed;
}

/* Dark Overlay */
.cta-banner-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-dark);
    opacity: 0.8;
    /* Dark Slate / Navy Overlay */
    z-index: 1;
}

.cta-banner-section .container {
    position: relative;
    z-index: 2;
}

/* Diagonal Overlay Effect approx - Optional, removing or keeping subtle */
.cta-banner-section::after {
    display: none;
    /* Removing old effect to prefer clean image overlay */
}

/* Title and Text must be above overlay */
.cta-banner-section .container {
    position: relative;
    z-index: 2;
}

.cta-banner-title {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    margin-bottom: 20px;
}

.cta-banner-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.btn-cta-primary {
    background-color: #43A047;
    color: white;
    padding: 14px 35px;
    border-radius: 6px;
    font-weight: 600;
    text-transform: capitalize;
    transition: all 0.3s;
    border: none;
    text-decoration: none;
    display: inline-block;
}

.btn-cta-primary:hover {
    background-color: #43A047;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-cta-outline {
    background-color: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 14px 35px;
    border-radius: 6px;
    font-weight: 600;
    text-transform: capitalize;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-cta-outline:hover {
    background-color: white;
    color: #2E7D32;
    border-color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* -----------------------------------------------------------
   ANIMATIONS & HOVER EFFECTS
   ----------------------------------------------------------- */

/* 1. Hero Slider Text Animations */
@keyframes fadeInUpCustom {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animation when slide is active */
.carousel-item.active .hero-pill {
    animation: fadeInUpCustom 6s ease backwards;
    animation-delay: 0.2s;
}

.carousel-item.active .hero-title {
    animation: fadeInUpCustom 6s ease backwards;
    animation-delay: 0.4s;
}

.carousel-item.active .hero-subtitle {
    animation: fadeInUpCustom 6s ease backwards;
    animation-delay: 0.6s;
}

/* Also animate the buttons inside the active slide */
.carousel-item.active .d-flex {
    animation: fadeInUpCustom 6s ease backwards;
    animation-delay: 0.8s;
}


/* 2. Project Card Hover Zoom */
.project-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.project-img-box {
    overflow: hidden;
    /* Ensure image doesn't overflow when scaled */
}

.project-card:hover .project-img-box img {
    transform: scale(1.1);
    transition: transform 0.6s ease;
}


/* 3. Status Badge Pulse */
@keyframes pulse-badge {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 152, 0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
    }
}

/* Only pulse 'ongoing' projects strongly */
.status-ongoing {
    animation: pulse-badge 2s infinite;
}

/* Transparent Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
    width: 6%;
    opacity: 0.8;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent);
}

.carousel-control-next:hover {
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1), transparent);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.6));
}

/* Stats Section (Background + Overlay) */
.stats-section {
    position: relative;
    padding: 80px 0;
    color: white;
    /* Use a construction/infrastructure themed image */
    background: url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=2670&auto=format&fit=crop') no-repeat center center/cover;
    background-attachment: fixed;
    z-index: 0;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Brand Dark Blue with 90% opacity */
    background-color: rgba(6, 78, 137, 0.9);
    z-index: -1;
}

/* Ensure content is above overlay */
.stats-section .container {
    position: relative;
    z-index: 2;
}

.stat-item h3 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.stat-item p {
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.stat-item i {
    font-size: 2.5rem;
    color: #43A047;
    /* Brand Orange */
    margin-bottom: 20px;
    display: block;
}

/* Logo Marquee Slider */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 20px 0;
}

.marquee-content {
    display: inline-block;
    animation: marquee 30s linear infinite;
}

.marquee-content:hover {
    animation-play-state: paused;
}

.partner-logo {
    display: inline-block;
    margin: 0 40px;
    height: 150px;
    /* Adjust height as needed */
    object-fit: contain;
    /* filter: grayscale(100%); */
    opacity: 0.7;
    transition: all 0.3s ease;
    mix-blend-mode: multiply;
    /* Makes white background transparent */
}

.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Contact Section with Background */
.contact-section-bg {
    position: relative;
    /* Industrial/Office meeting background */
    background: url('https://images.unsplash.com/photo-1590579491624-f98f36d4c763?q=80&w=2692&auto=format&fit=crop') no-repeat center center/cover;
    background-attachment: fixed;
    color: white;
    /* Default text color in this section */
    z-index: 0;
}

/* Dark Blue Overlay */
.contact-section-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 78, 137, 0.9);
    /* Brand Blue with high opacity */
    z-index: -1;
}

/* Ensure content is readable */
.contact-section-bg .container {
    position: relative;
    z-index: 2;
}

/* Override existing text colors */
.contact-section-bg h2,
.contact-section-bg h5,
.contact-section-bg label,
.contact-section-bg p,
.contact-section-bg .text-muted {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Override input styles for dark background */
.contact-section-bg .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white;
}

.contact-section-bg .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.contact-section-bg .form-control:focus {
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* Ken Burns Effect for Hero Slider */
@keyframes kenBurns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
        /* Subtle zoom */
    }
}

.carousel-item .hero-slide-bg {
    transition: transform 10s ease-out;
    /* Smooth transition */
}

.carousel-item.active .hero-slide-bg {
    animation: kenBurns 10s ease-out forwards;
    /* Zoom while active */
}

/* Ensure overflow is hidden on hero card so image doesn't spill out */
.hero-card {
    overflow: hidden;
}

/* Icons */
.contact-section-bg .d-flex.align-items-center.rounded {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.contact-section-bg i.fa-solid {
    color: #43A047 !important;
    /* Keep brand orange for icons */
}

/* Make the right column card transparent */
.contact-section-bg .bg-white,
.contact-section-bg .shadow-lg {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Floating Action Buttons */
.floating-btn-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.floating-btn {
    width: 60px;
    height: 60px;
    background-color: #25D366;
    /* WhatsApp Green */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    cursor: pointer;
    font-size: 30px;
    border: none;
}

.floating-btn:hover {
    transform: scale(1.1);
    color: white;
}

.floating-btn.contact-btn {
    background-color: #43A047;
    /* Brand Orange */
}

/* Tooltip on hover */
.floating-btn::before {
    content: attr(data-tooltip);
    position: absolute;
    right: 70px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    font-family: var(--font-body);
    /* default font if var not available here, but should be fine */
}

.floating-btn:hover::before {
    opacity: 1;
}