@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.c1{
    width: 225px;
    height: 325px;
}

.card .fa-solid.fa-trowel {
    position: absolute;
    bottom: -100px;
    background-color: #255b09;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.675);
    opacity: 0;
    transform: translateY(50%);
    transition: all 0.5s ease;
}

.card:hover .fa-solid.fa-trowel {
    bottom: 0px;
    opacity: 1;
}

.card .fa-solid.fa-trowel-bricks,
.fa-solid.fa-helmet-safety,
.fa-solid.fa-person-digging {
    font-size: 40px;
    background-color: #0000000d;
    height: 100px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #4e9525;
}

.card .h4 {

    font-weight: 700;
}

.container .content {
    max-width: 250px;
}

.container .content .h-6 {
    padding: 10%;
    color: #4e9525;
    font-weight: 600;
}

.container .content .btn.btn-primary {
    padding: 15px;
    background-color: #f3f6f2;
    color: #4e9525;
    border-radius: 5px;
    border: none;
    box-shadow: none;
}

.card:hover .fa-solid.fa-trowel-bricks,
.card:hover .fa-solid.fa-helmet-safety,
.card:hover .fa-solid.fa-person-digging {
    color: rgb(243, 241, 233);
    background-color: #50861a;
}

@media (max-width:990px) {
    .container .content {
        max-width: 100%;
    }
}

@media (max-width:500px) {
    body {
        padding: 25px;
    }

    .card {
        width: 100%;
    }

    .content {
        padding: 25px;
    }
}

#progress_container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1000; /* Adjust the z-index as needed */    
}