.services{
    padding: 20px 5%;
    max-width:100%;
    /* margin:auto; */
    display:flex;
    /* grid-template-columns:repeat(4,1fr); */
    gap:25px;
      /* flex-wrap: wrap; */
      justify-content: space-around;
  
}

.service-card{
    position:relative;
    overflow:hidden;
    border-radius:12px;
    cursor:pointer;
    transition:.4s;
    

}

.service-card img{
    width:300px;
    height:400px;
    object-fit:cover;
    display:block;
}

.service-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.25);
    transition:.4s;
}

.service-card:hover::before{
    background:rgba(0,0,0,.45);
}

.service-card:hover{
    transform:translateY(-10px);
}

/* Bottom Box */

.content{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    z-index: 2;
   
    border-top: 2px solid #e9a00f;
    padding:30px 20px 25px;
    text-align:center;

 background: linear-gradient(180deg, #087d5c 0%, #467623 100%);
}

.content::after {
    content: "";
    position: absolute;
    top: -29px;
    left: 30px;
    right: 30px;
    height: 30px;
    background-color:#087d5c;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    z-index: 6;
}
.content:before {
    content: "";
    position: absolute;
    top: -31px;
    left: 30px;
    right: 30px;
    height: 30px;
    background-color:#f1ab21;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    /* z-index: -1; */
}
.content h3{
    color:#fff;
    font-size:20px;
    margin-bottom:8px;
}

.content p{
    color:#dbeee8;
    font-size:15px;
}

/* Center Plus Icon */
.plus-icon{
    position: absolute;
    top: 245px; /* +243px এর বদলে */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.plus-icon i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    background:#f1ab21;
    border-radius:50%;
    color:#fff; /* icon visible হবে */
    border:4px solid #087d5c;
    font-size:20px;
    position:relative;
}


.plus-icon i::after{
    content:"";
    position:absolute;
    top: -6px;
    left: -5.5px;
    width: 59px;
    height: 26px;
    z-index: -30;
    /* border-radius:50%; */
    border:3px solid #f1ab21;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.plus-icon i:hover {
  /* color:#087d5c; */
  background-color:white;
}
/* .plus-icon i::before {
 content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    width: 60px;
    height: 28px;
    border: 2px solid;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    z-index: -1;
} */
.active .content h3{
    color:#f4b21b;
}

@media (max-width:1024px){

    .services{
        flex-wrap:wrap;
        justify-content:center;
        gap:20px;
    }

    .service-card img{
        width:280px;
        height:380px;
    }

    .plus-icon{
        top:225px;
    }
}
@media (max-width:768px){

    .services{
        flex-wrap:wrap;
        gap:20px;
        justify-content:center;
    }

    .service-card{
        width:calc(50% - 10px);
    }

    .service-card img{
        width:100%;
        height:350px;
    }

    .plus-icon{
        top:195px;
    }

    .content{
        padding:25px 15px 20px;
    }

    .content h3{
        font-size:18px;
    }

    .content p{
        font-size:14px;
    }
}
@media (max-width:576px){

    .services{
        flex-direction:column;
        align-items:center;
        gap:25px;
    }

    .service-card{
        width:100%;
        max-width:350px;
    }

    .service-card img{
        width:100%;
        height:400px;
    }

    .plus-icon{
        top:245px;
    }

    .plus-icon i{
        width:55px;
        height:55px;
        font-size:18px;
    }

    .content{
        padding:25px 15px;
    }

    .content h3{
        font-size:18px;
    }

    .content p{
        font-size:14px;
    }

    .content::after,
    .content::before{
        left:20px;
        right:20px;
    }
}