/* Why 1 ---------------------------------- */ 
@media (min-width: 1300px) {
    .img-box2 {
        margin-left: 50px;
    }
}
.img-box2 {
    position: relative;
    z-index: 3;
    .img1 {
        position: relative;
        img {
            max-width: fit-content;
        }
    }
    .icon-btn {
        --btn-size: 120px;
        background-color: $theme-color;
        color: $white-color;
        border: 1px solid $theme-color;
        position: absolute;
        bottom: 100%;
        right: -10px;
    }
}
.why-sec1 {
    background-size: auto;
    background-position: top left;
}
.choose-feature {
    &-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    background-color: $white-color;
    padding: 0 20px 30px 30px;
    border-radius: 10px;
    margin-top: 18px;
    &_icon {
        font-size: 36px;
        margin-bottom: 20px;
        color: $theme-color;
        margin-top: -18px;
        i {
            background-color: $white-color;
            border-radius: 50%;
        }
    }
    .box-title {
        margin-bottom: 10px;
    }
    &_text {
        margin: 0 auto -0.5em auto;
    }
}

.choose-counter {
    &-wrap {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: space-between;
        background-color: $smoke-color;
        padding: 32px 0;
        margin-top: 80px;
        position: relative;
        z-index: 2;
        &:before {
            content: '';
            height: 100%;
            width: 1570px;
            position: absolute;
            top: 0;
            left: -350px;
            z-index: -1;
            background-color: inherit;
        }
    }
    &_number {
        color: $theme-color;
        font-weight: 400;
        font-size: 36px;
        margin-bottom: 0;
        margin-top: -0.3em;
    }
    .counter-number {
        font-weight: 600;
        color: $title-color;
    }
    &_text {
        margin-bottom: -0.5em;
    }
}

@include lg {
    .img-box2 {
        .img1 {
            img {
                max-width: 100%;
                width: 100%;
            }
        }
        .icon-btn {
            top: 0;
            right: 0;
            bottom: unset;
        }
    }
    .why-sec1 {
        background-position: bottom left;
        background-color: $title-color;
    }
    .choose-feature {
        padding: 0 30px 30px 30px;
    }
}

@include sm {
    .choose-feature {
        padding: 0 15px 30px 15px;
    }
}

@include xs {
    .choose-feature {
        &-wrap {
            grid-template-columns: repeat(1, 1fr);
        }
        padding: 0 30px 30px 30px;
    }
    .choose-counter {
        &-wrap {
            grid-template-columns: auto auto;
            gap: 30px;
            justify-content: space-evenly;
        }
    }
}

/* Why 2 ---------------------------------- */ 
@media (min-width: 1300px) {
    .img-box4 {
        margin-left: 40px;
    }
}
.img-box4 {
    position: relative;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    .play-btn {
        position: absolute;
        top: 6%;
        left: 6%;
        > i {
            --icon-size: 100px;
            background-color: $theme-color;
            color: $white-color;
        }
        &:before,
        &:after {
            background-color: $theme-color;
        }
    }
}

.skill-feature {
    text-align: left;
    &:not(:last-child) {
        margin-bottom: 30px;
    }
    &_title,
    .progress-value {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 10px;
        margin-top: -0.2em;
        font-family: $title-font;
        color: $title-color;
    }
    .progress {
        position: relative;
        height: 10px;
        background-color: $border-color;
        overflow: visible;
        border-radius: 10px;
    }
    .progress-bar {
        background-color: $theme-color;
        height: 4px;
        margin: 3px;
        border-radius: inherit;
        overflow: visible;
        position: relative;
        &:before {
            content: '';
            height: 18px;
            width: 18px;
            background-color: $title-color;
            position: absolute;
            bottom: calc(100% - 8px);
            right: -10px;
            clip-path: path("M7.5 14L0.138784 0.5H14.8612L7.5 14Z");
        }
    }
    .progress-value {
        position: absolute;
        top: -34px;
        right: -8px;
    }
}

@include lg {
    .img-box4 {
        margin-left: auto;
        margin-right: auto;
        max-height: 640px;
        max-width: 640px;
    }
}
@include xs {
    .img-box4 {
        .icon-btn {
            --btn-size: 80px;
        }
    }
}