/*============================
    27. Feature
============================*/

@use "../utils/mixins" as *;
@use '../variables' as *;

.feature-sec {
    margin-bottom: 60px;
    @include respond-below(lg) {
        margin-bottom: 50px;
    }
}
.feature-item {
    background: $light;
    padding: 24px;
    border: 1px solid $border-color;
    border-radius: $border-radius-md;
    display: flex;
    align-items: center;
    .feature-icon {
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: $border-radius-md;
        background: $white;
        margin-right: 12px;
        flex-shrink: 0;
    }
    p {
        font-size: 16px;
    }
    &-two {
        background: $white;
        border-radius: $border-radius-md;
        padding: 20px;
        box-shadow: $box-shadow;
        gap: 20px;
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        @include respond-below(lg) {
            margin-bottom: 20px;
        }
        &:last-child {
            margin-bottom: 0;
        }
        span {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: $orange;
            flex-shrink: 0;
            aspect-ratio: 1;
            --g:/20.56% 20.56% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
            mask: 100% 50% var(--g),93.301% 75% var(--g),75% 93.301% var(--g),50% 100% var(--g),25% 93.301% var(--g),6.699% 75% var(--g),0% 50% var(--g),6.699% 25% var(--g),25% 6.699% var(--g),50% 0% var(--g),75% 6.699% var(--g),93.301% 25% var(--g),radial-gradient(100% 100%,#000 38.366%,#0000 calc(38.366% + 1px));
        }
    }
}
.feature-img {
    position: relative;
    border-radius: 270px;
    padding: 8px;
    margin: 0 16px;
    &::before {
        content: '';
        position: absolute;
        inset: 0; 
        border: 5px solid transparent;
        background: rgba(var(--white-rgb), 0.1);
        background: linear-gradient($primary-transparent, $primary-transparent) padding-box,
               linear-gradient(90deg, #6B9C4C 0%, #008979 100%) border-box;
        background-origin: border-box;
        background-clip: padding-box, border-box;
        z-index: -1;
        border-radius: 270px;
        padding: 26px;
        animation: moveGradient 3s linear infinite;
        background-size: 300% 300%;
        background-position: 0% 50%, 0% 50%;
    }
    img {
        border-radius: 270px;
    }
    @keyframes moveGradient {
        0% { background-position: 0% 50%, 0% 50%; }
        100% { background-position:  200% 50%, 200% 50%; }
    }
    .feature-bg-04 {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -2;
        animation: updown 3.5s ease-in-out 0s infinite alternate;
    }
}
.section-heading {
    margin: 0 auto;
    margin-bottom: 40px;
    max-width: 617px;
}
.item-padding {
    padding: 20px;
}
.item-shadow {
    box-shadow: $box-shadow;
}
.item-hover {
    transition: .4s;
    &:hover {
        transform: translateY(-10px);
    }
    &.one {
        &:hover {
            background-color: $pink-100;
            .offer-icon {
                background: $pink;
                img {
                    filter: invert(1) brightness(45.5);
                }
            }
        }
    }
    &.two {
        &:hover {
            background-color: $teal-100;
            .offer-icon {
                background: $teal;
                img {
                    filter: invert(1) brightness(45.5);
                }
            }
        }
    }
    &.three {
        &:hover {
            background-color: $purple-100;
            .offer-icon {
                background: $purple;
                img {
                    filter: invert(1) brightness(45.5);
                }
            }
        }
    }
}
.item-margin {
    margin-bottom: 20px;
}
.row-margin {
    margin-bottom: 40px;
}
.feature-item-wrapper {
    position: relative;
    .feature-bg-03 {
        position: absolute;
        left: 3%;
        top: 50%;
        @include transform(translateY(-50%));
        z-index: -1;
    }
}
.feature-section {
    position: relative;
    .feature-bg-01 {
        position: absolute;
        top: 5%;
        left: 0;
        z-index: -1;
        animation: updown 3.5s ease-in-out 0s infinite alternate;
    }
    .feature-bg-02 {
        position: absolute;
        right: 3%;
        bottom: 5%;
        z-index: -1;
        animation: updown 3.5s ease-in-out 0s infinite alternate;
    }
}
@keyframes updown {
    0% {
        @include transform(translateY(0));
    }
    50% {
        @include transform(translateY(-4px));
    }
    100% {
        @include transform(translateY(0));
    }
}