:root {
    --primary-color: #1B64A4;
    /* Forest Green */
    --primary-light: #43A047;
    /* Vibrant Green */
    --primary-dark: #1B5E20;
    --secondary-color: #F06C2A;
    /* Vibrant Orange */
    --secondary-hover: #F06C2A;
    --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, #FF9800 0%, #F57C00 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, #F57C00 0%, #E65100 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;
}

/* 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, rgba(8, 28, 46, 0.95) 0%, rgba(8, 28, 46, 0.7) 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: #F06C2A;
    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: #E65100;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(240, 108, 42, 0.4);
}

.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: #F57C00;
    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: #E65100;
    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: #F57C00;
    /* Orange */
    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 rgba(245, 124, 0, 0.4);
    margin-top: 10px;
}

.btn-read-more-custom:hover {
    background-color: #EF6C00;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245, 124, 0, 0.5);
}

/* 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: #F06C2A;
    /* 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: #F06C2A;
    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: #E65100;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(240, 108, 42, 0.4);
}

.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: rgba(255, 255, 255, 0.9);
    color: #111;
    border-color: white;
    transform: translateY(-2px);
}

/* 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: #F06C2A;
}

/* 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 {
    background: linear-gradient(135deg, #388E3C 0%, #2E7D32 50%, #1B5E20 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* Diagonal Overlay Effect approx */
.cta-banner-section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(to bottom left, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    z-index: 1;
}

/* 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: #F57C00;
    /* Orange */
    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: #EF6C00;
    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 0.8s ease backwards;
    animation-delay: 0.2s;
}

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

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

/* Also animate the buttons inside the active slide */
.carousel-item.active .d-flex {
    animation: fadeInUpCustom 0.8s 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));
}