:root {
    --primary-green: #456A75;    /* Corporate matte teal */
    --dark-green: #2D4A54;       /* Deep corporate teal */
    --light-green: #D8E5E9;      /* Light corporate teal */
    --accent-green: #FF4B2B;     /* ACS corporate red-orange */
    --text-color: #2D3E4F;       /* Corporate dark blue */
    --light-bg: #F0F2F5;         /* Light corporate background */
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --gradient: linear-gradient(135deg, var(--accent-green), var(--primary-green));
        /* sustainability */
        --primary-green: #2F6A47;        /* Rich forest green */
        --dark-green: #1E4B34;           /* Deep pine green */
        --light-green: #A8D8A2;          /* Soft mint */
        --accent-green: #5F9B6E;         /* Warm olive */
        --software-gradient: linear-gradient(135deg, #2F6A47, #1E4B34);  /* Green gradient */
        
        --sustainability-card-gradient-1: linear-gradient(135deg, #2E8B57 0%, #3CB371 100%);  /* Fresh forest green */
        --sustainability-card-gradient-2: linear-gradient(135deg, #228B22 0%, #32CD32 100%);  /* Vibrant lime green */
        --sustainability-card-hover: linear-gradient(135deg, #006400 0%, #228B22 100%);      /* Deep evergreen */
        
}

/* Hero Section */
.eco-hero {
    position: relative;
    min-height: 400px;
    background: var(--gradient);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 40px 20px;
}

.sustainability-page .solutions-hero{
    background: #2F6A47;
}
.sustainability-page .project-card {
    background: var(--sustainability-card-gradient-1);
}
.sustainability-page .solution-card {
    background: var(--light-green);
    border-color: rgba(146, 64, 14, 0.1);
}
.sustainability-page .solution-card::before{
    background: var(--primary-green);
}
.sustainability-page .tech-feature {
    background: var(--light-green);
}
.eco-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0,166,127,0.2) 0%, rgba(0,200,151,0.2) 100%);
    animation: moveBackground 20s linear infinite;
}

.eco-hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.eco-hero h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    animation: fadeInUp 1s ease-out;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.eco-hero p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0.95;
    animation: fadeInUp 1.2s ease-out;
}

/* Content Sections */
.eco-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.eco-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px 0;
}

.eco-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 166, 127, 0.1);
}

.eco-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 166, 127, 0.1);
    border-color: var(--primary-green);
}

.eco-card__image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
}

.eco-card__image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,166,127,0.1) 100%);
}

.eco-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.eco-card:hover .eco-card__image img {
    transform: scale(1.1);
}

.eco-card__content {
    padding: 25px;
}

.eco-card h3 {
    color: var(--primary-green);
    font-size: 1.3rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.eco-card p {
    color: #666;
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

/* Stats Section */
.eco-stats {
    background: var(--light-green);
    padding: 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.eco-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0,166,127,0.05) 0%, rgba(0,200,151,0.05) 100%);
}

.eco-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.eco-stat {
    padding: 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,166,127,0.1);
    transition: transform 0.3s ease;
}

.eco-stat:hover {
    transform: translateY(-3px);
}

.eco-stat__number {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 8px;
    line-height: 1;
}

.eco-stat__label {
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.4;
}

/* Commitment Section */
.eco-commitment {
    padding: 50px 0;
    background: white;
    position: relative;
    overflow: hidden;
}

.eco-commitment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient);
}

.eco-commitment__content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.eco-commitment h2 {
    color: var(--primary-green);
    font-size: 2rem;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

.eco-commitment h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--gradient);
    border-radius: 2px;
}

.eco-commitment p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 25px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes moveBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 100%;
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .eco-hero h1 {
        font-size: 2.2rem;
    }

    .eco-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .eco-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .eco-hero h1 {
        font-size: 1.8rem;
    }

    .eco-hero p {
        font-size: 1rem;
    }

    .eco-grid {
        grid-template-columns: 1fr;
    }

    .eco-stats__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}