@use '../../utils' as *;

/*----------------------------------------*/
/* Why choose styles
/*----------------------------------------*/
.td-why-choose-us-section {
    [class*="col-"] {
        &:nth-child(2n) {
            .why-choose-item {
                position: relative;

                &::before {
                    position: absolute;
                    content: "";
                    height: 100%;
                    width: 1px;
                    top: 0;
                    right: -15px;
                    background: linear-gradient(95.42deg, rgb(3, 3, 3) 0.4999999888%, rgba(189, 124, 240, 0.5) 49.5000004768%, rgb(3, 3, 3) 100%);
                }
            }
        }
    }
}

.why-choose-item {
    padding: 30px;

    @media #{$xs,$sm} {
        padding: 30px 0;
    }
    &:hover {
        .icon {
            transform: translateY(-5px);
            @include td-transition();
        }
    }

    .icon {
        margin-bottom: 15px;

        span {
            background: linear-gradient(95.42deg, rgba(108, 115, 255, 0.16) 0%, rgba(56, 64, 247, 0.16) 100%);
            border-radius: 12px;
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            img {
                width: 40px;
                height: 40px;
            }
        }
    }

    .contents {
        .title {
            font-size: 20px;
            margin-bottom: 12px;
        }

        .description {
            font-size: 14px;
        }
    }
}