/*==================================================
                OUR WORK HERO
==================================================*/

.our-work-hero {

    position: relative;

    padding: 170px 0 120px;

    background: linear-gradient(135deg, #F8FBFE, #EEF6FC);

    overflow: hidden;

}

.hero-shape {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    opacity: .25;

}

.hero-shape-1 {

    width: 380px;

    height: 380px;

    background: #124E78;

    top: -150px;

    right: -120px;

}

.hero-shape-2 {

    width: 260px;

    height: 260px;

    background: #D9A404;

    left: -80px;

    bottom: -80px;

}

.hero-title {

    font-size: clamp(3rem, 6vw, 5rem);

    font-weight: 800;

    line-height: 1.1;

    margin: 25px 0;

}

.hero-text {

    color: #64748B;

    line-height: 1.9;

    font-size: 17px;

}

.hero-buttons {

    display: flex;

    gap: 18px;

    margin-top: 40px;

    flex-wrap: wrap;

}

.btn-primary-custom {

    background: #124E78;

    color: #fff;

    padding: 15px 32px;

    border-radius: 50px;

    font-weight: 600;

}

.btn-primary-custom:hover {

    background: #0B2E4F;

    color: #fff;

}

.btn-outline-custom {

    border: 2px solid #124E78;

    color: #124E78;

    padding: 15px 32px;

    border-radius: 50px;

    font-weight: 600;

}

.btn-outline-custom:hover {

    background: #124E78;

    color: #fff;

}

.hero-image-wrapper {

    position: relative;

}

.hero-placeholder {

    height: 560px;

}

.floating-info {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 15px;

    background: #fff;

    padding: 18px 22px;

    border-radius: 18px;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);

}

.floating-info i {

    width: 55px;

    height: 55px;

    border-radius: 15px;

    background: #124E78;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

}

.info-1 {

    top: 40px;

    left: -30px;

}

.info-2 {

    right: -30px;

    bottom: 40px;

}

/*==================================================
            AREAS OF IMPACT
==================================================*/

.impact-section {

    padding: 120px 0;

    background: #fff;

}

.impact-card {

    background: #fff;

    border-radius: 24px;

    padding: 40px 35px;

    text-align: center;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .06);

    transition: .35s;

    height: 100%;

}

.impact-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 60px rgba(18, 78, 120, .10);

}

.impact-icon {

    width: 85px;

    height: 85px;

    margin: auto;

    border-radius: 22px;

    background: #EEF6FC;

    color: #124E78;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 34px;

    margin-bottom: 25px;

}

.impact-card h4 {

    font-weight: 700;

    margin-bottom: 18px;

}

.impact-card p {

    color: #64748B;

    line-height: 1.8;

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:991px) {

    .our-work-hero {

        padding: 140px 0 90px;

        text-align: center;

    }

    .hero-buttons {

        justify-content: center;

    }

    .floating-info {

        position: relative;

        left: 0;

        right: 0;

        top: 0;

        bottom: 0;

        margin: 20px auto;

        max-width: 350px;

    }

    .hero-placeholder {

        height: 420px;

    }

}

@media(max-width:767px) {

    .hero-title {

        font-size: 2.5rem;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .hero-buttons .btn {

        width: 100%;

    }

    .hero-placeholder {

        height: 320px;

    }

    .impact-section {

        padding: 90px 0;

    }

}

/*==================================================
            FEATURED PROJECTS
==================================================*/

.featured-projects {

    background: #F8FBFE;

}

.project-item {

    padding: 50px;

    background: #fff;

    border-radius: 30px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .06);

}

.project-image .image-placeholder {

    height: 420px;

}

.project-status {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 20px;

}

.project-status.ongoing {

    background: #EAF7EE;

    color: #1B7A3C;

}

.project-status.completed {

    background: #EEF6FC;

    color: #124E78;

}

.project-item h3 {

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 20px;

}

.project-item p {

    color: #64748B;

    line-height: 1.9;

}

.project-list {

    list-style: none;

    padding: 0;

    margin: 30px 0;

}

.project-list li {

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    gap: 12px;

    font-weight: 500;

}

.project-list i {

    color: #D9A404;

}

@media(max-width:991px) {

    .project-item {

        padding: 35px;

    }

    .project-image {

        margin-bottom: 30px;

    }

}

/*==================================================
            IMPACT STATS
==================================================*/

.impact-stats {

    padding: 120px 0;

    background: #fff;

}


.counter-card {

    text-align: center;

    padding: 40px 25px;

    border-radius: 25px;

    background: #F8FBFE;

    transition: .35s;

}


.counter-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 60px rgba(0, 0, 0, .08);

}


.counter-card i {

    font-size: 45px;

    color: #124E78;

    margin-bottom: 20px;

}


.counter-card h2 {

    font-size: 3rem;

    font-weight: 800;

    color: #124E78;

}


.counter-card p {

    color: #64748B;

    font-weight: 600;

}



/*==================================================
            PROCESS
==================================================*/


.process-section {

    padding: 120px 0;

    background: #F8FBFE;

}


.process-wrapper {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}


.process-step {

    background: #fff;

    padding: 40px 30px;

    border-radius: 25px;

    position: relative;

    text-align: center;

    transition: .35s;

}


.process-step:hover {

    transform: translateY(-10px);

}


.process-number {

    width: 70px;

    height: 70px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: #124E78;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 800;

    font-size: 22px;

}


.process-step h4 {

    font-weight: 700;

    margin-bottom: 15px;

}


.process-step p {

    color: #64748B;

    line-height: 1.8;

}



@media(max-width:991px) {


    .process-wrapper {

        grid-template-columns: repeat(2, 1fr);

    }


}



@media(max-width:575px) {


    .process-wrapper {

        grid-template-columns: 1fr;

    }


    .counter-card h2 {

        font-size: 2.5rem;

    }


}