/*============================
    26. Support
============================*/

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

.support-section {
    padding: 20px 0;
}
.support-item {
    position: relative;
    margin-right: 24px;
    padding-right: 44px;
    &::after {
        position: absolute;
        content: "";
        top: 50%;
        @include transform(translateY(-50%));
        right: 0;
        background: url('../img/icons/support-icon.svg') no-repeat;
        width: 22px;
        height: 22px;
    }
    p {
        font-size: 16px;
        font-weight: $font-weight-bold;
        white-space: nowrap;
        color: $darkmode-white;
        margin-bottom: 0;
    }
}
.support-section-two {    
    .support-item {
        &::after {
            background: url('../img/icons/support-icon-02.svg') no-repeat;
        }
        h6 {
            color: $darkmode-white;
        }
    }
}
.support-section-five {
    background: $primary-linear-gradient;
    transform: rotate(0.5deg);
    margin: -8px 0px 0px 0px;
    position: relative;
    z-index: 1;
    .support-item {
        &::after {
            background: url('../img/home-5/icons/support-slide-icon.svg');
        }
    }
}

.animate-updown {
	-webkit-animation: updown 1.5s ease-in-out 0s infinite alternate;
	animation: updown 1.5s ease-in-out 0s infinite alternate;
	animation-duration: 3s;
}
@keyframes updown {
    0% {
        @include transform(rotateX(0deg) translateY(0));
    }
    50% {
        @include transform(rotateX(0deg) translateY(-20px));
    }
    100% {
        @include transform(rotateX(0deg) translateY(0));
    }
}
.horizontal-slide {
    overflow: hidden;
    &[data-direction="right"] {
        --_animation-direction: reverse;
    }
    &[data-direction="left"] {
        --_animation-direction: forwards;
    }
    &[data-speed="fast"] {
        --_animation-duration: 30s;
    }
    &[data-speed="slow"] {
        --_animation-duration: 120s;
    }
    .slide-list {
        width: max-content;
        flex-wrap: nowrap;
        animation: scroll var(--_animation-duration, 60s) var(--_animation-direction, forwards) linear infinite;
        &:hover {
            animation-play-state: paused;
        }
    }
}
@keyframes scroll {
    to {
        transform: translate(calc(-50% - .5rem))
    }
}