.ins-card2{
    position:relative;
    height:270px;
    padding:35px;
    border-radius:45px;
    overflow:hidden;
    transition:0.4s;
    background: #0d1b3d; /* fallback */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ICON */
.ins-icon{
    width:70px;
    position:absolute;
    top:35px;
    left:35px;
    transition:0.4s;
}

/* CONTENT WRAPPER (assuming title and desc are just flow content now, but we need to match the hover effect) */
/* Actually, let's just make the title and desc push each other naturally */
.ins-card2 .ins-title {
    margin: 0 0 10px 0;
    transition: 0.4s;
    color: #fff;
    transform: translateY(40px);
}

.ins-card2 .ins-desc {
    margin: 0;
    line-height: 1.5;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: 0.4s;
    transform: translateY(40px);
    opacity: 0;
}

/* ARROW WRAPPER */
.ins-arrow2-wrapper {
    position:absolute;
    top:35px;
    right:35px;
    width:25px;
    height:25px;
    transition:transform 0.4s ease;
}

.ins-arrow2-normal,
.ins-arrow2-hover {
    width: 100%;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.ins-arrow2-hover {
    opacity: 0;
}

/* HOVER STATES */
.ins-card2:hover .ins-icon{
    opacity:0;
    transform:scale(0.5);
}

.ins-card2:hover .ins-title {
    transform: translateY(0);
}

.ins-card2:hover .ins-desc {
    transform: translateY(0);
    opacity: 1;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.ins-card2:hover .ins-arrow2-wrapper {
    transform:rotate(180deg);
}

.ins-card2:hover .ins-arrow2-normal {
    opacity: 0;
}

.ins-card2:hover .ins-arrow2-hover {
    opacity: 1;
}

.ins-card2 .ins-title,
.ins-card2 .ins-desc,
.ins-icon{
    transition:all 0.4s ease;
}