.blog-sec {
    .blog-card {
        box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 0px;
        padding: clamp(18px, 1.25vw, 48px);
        display: flex;
        flex-direction: column;
        gap: $gap-16;
        background-color: $white;
        border-radius: $br-12;
        transition: $transition;
        .card-img {
            overflow: hidden;
            border-radius: 8px;
            width: 100%;
            img {
                transition: $transition;
                border-radius: 8px;
                width: 100%;
            }
        }
        .card-content {
            .svg {
                width: clamp(16px, 1.042vw, 40px);
                height: clamp(16px, 1.042vw, 40px);
            }
            .cus-btn {
                height: clamp(42px, 2.5vw, 99px);
                border-radius: $br-20;
                .icon {
                    width: clamp(32px, 1.856vw, 94px);
                    height: clamp(32px, 1.856vw, 94px);
                    border-radius: $br-12;
                    &::before {
                        width: clamp(32px, 1.856vw, 94px);
                        height: clamp(32px, 1.856vw, 94px);
                        left: 0.417vw;
                        top: 0.309vw;
                        @include media-query(1399px) {
                            top: 5px;
                        }
                        @include media-query(520px) {
                            left: 5px;
                        }
                    }
                }
                &:hover {
                    .icon {
                        &::before {
                            width: calc(100% - 16px) !important;
                        }
                    }
                }
            }
        }
        &:hover {
            box-shadow: rgba(149, 157, 165, 0.2) 0px 9px 25px;
            .card-img {
                img {
                    transform: scale(1.05);
                }
            }
        }
    }
}
