.home-choose .home-choose-card {
    display: grid;
    grid-template-columns: repeat(4, 24%);
    justify-content: space-between;
}

.home-choose-card .choose-card {
    flex: 0 50%;
    background: var(--secondary);
    box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2),
        0 5px 15px 0 rgba(37, 44, 97, 0.15);
    border-radius: 15px;
    padding: 10px 15px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 265px;
    transition: 0.7s;
}

.home-choose-card .choose-card:before {
    content: "";
    position: absolute;
    background: rgb(85 108 214 / 5%);
    width: 170px;
    height: 400px;
    z-index: -1;
    transform: rotate(42deg);
    right: -56px;
    top: -23px;
    border-radius: 35px;
}

.choose-card h3 {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: var(--fw-xxl);
    margin-block: 15px;
}

.choose-card h6 {
    color: var(--text-secondary);
    height: 100px;
    font-size: 15px;
    font-weight: var(--fw-sm);
}

.hover_color_bubble {
    position: absolute;
    background: rgb(54 81 207 / 15%);
    width: 100rem;
    height: 100rem;
    left: 0;
    right: 0;
    z-index: -1;
    top: 16rem;
    border-radius: 50%;
    transform: rotate(-36deg);
    left: -18rem;
    transition: 0.7s;
}

.home-choose-card .choose-card .choose-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--secondary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-choose-card .choose-card .choose-icon img {
    width: 35px;
    height: 45px;
    object-fit: contain;
}

.home-choose-card .choose-card:hover .hover_color_bubble {
    top: 0;
}

.home-choose-card .choose-card:hover {
    background: var(--primary);
    color: var(--secondary);
    transform: scale(1.1);
    z-index: 9;
}

.home-choose-card .choose-card:hover::before {
    background: rgb(85 108 214 / 10%);
}

.home-choose-card .choose-card:hover h3,
.home-choose-card .choose-card:hover h6 {
    color: var(--secondary);
}

@media screen and (max-width: 767px) {
    .home-choose .home-choose-card {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        align-items: center;
        justify-content: space-between;
    }
}

@media screen and (min-width: 767px) and (max-width: 1023px) {
    .home-choose .home-choose-card {
        display: grid;
        grid-template-columns: repeat(3, 33%);
        justify-content: space-between;
    }
}

@media screen and (min-width: 1023px) and (max-width: 1250px) {
    .home-choose .home-choose-card {
        display: grid;
        grid-template-columns: repeat(4, 24%);
        justify-content: space-between;
    }

    .choose-card h3 {
        font-size: 15px;
    }

    .choose-card h6 {
        font-size: 14px;
    }
}