/* Why 1 ---------------------------------- */ 
.choose-feature {
    &-wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        border-radius: 50px 50px 50px 0;
        background-color: $smoke-color;
        padding: 80px;
        margin: 10px -80px 0 -260px;
        position: relative;
        z-index: 3;
        @include ml {
            margin: 0 -60px 0 -260px;
            padding: 60px;
        }
        @include lg {
            margin: 0 auto;
            border-radius: 40px;
        }
        @include md {
            padding: 30px;
        }
        @include sm {
            padding: 40px 20px;
            border-radius: 20px;
            grid-template-columns: repeat(1, 1fr);
            gap: 30px;
            justify-content: center;
        }
        @include xs {
            grid-template-columns: repeat(1, 1fr);
        }
    }
    text-align: center;
    @include lg {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
    .box-icon {
        margin-bottom: 30px;
        img {
            transition: 0.4s ease-in-out;
        }
    }
    .box-title {
        margin-bottom: 15px;
    }
    &:hover {
        .box-icon {
            img {
                transform: rotateY(180deg);
            }
        }
    }
}

.img-box6 {
    position: relative;
    z-index: 2;
    margin-left: -340px;
    height: 100%;
    @include ml {
        margin-left: -100px;
    }
    @include lg {
        margin-left: 0;
    }
    .play-btn {
        --icon-size: 100px;
        font-size: 24px;
        position: absolute;
        top: calc(50% - var(--icon-size)/2);
        left: calc(50% - var(--icon-size)/2);
        z-index: 3;
        @include sm {
            --icon-size: 70px;
            font-size: 18px;
        }
        &:before,
        &:after {
            background-color: $white-color;
        }
    }
    .img1 {
        height: 100%;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0 50px 50px 0;
            @include hd {
                border-radius: 50px;
            }
            @include lg {
                border-radius: 40px;
            }
            @include sm {
                border-radius: 20px;
            }
        }
    }
}