/* Features section animations and mobile enhancements */
@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.featurs .featurs-item {
    animation: slideInRight 0.8s ease-out forwards;
    opacity: 0;
}

.featurs .col-md-6:nth-child(1) .featurs-item {
    animation-delay: 0.1s;
}

.featurs .col-md-6:nth-child(2) .featurs-item {
    animation-delay: 0.3s;
}

.featurs .col-md-6:nth-child(3) .featurs-item {
    animation-delay: 0.5s;
}

.featurs .col-md-6:nth-child(4) .featurs-item {
    animation-delay: 0.7s;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .featurs .row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem;
        margin: 0 -15px;
        scrollbar-width: none;
    }

    .featurs .row::-webkit-scrollbar {
        display: none;
    }

    .featurs .col-md-6 {
        flex: 0 0 85%;
        min-width: 85%;
        scroll-snap-align: center;
        padding: 0 15px;
    }

    .featurs .featurs-item {
        animation: slideInFromBottom 0.6s ease-out forwards;
        transition: transform 0.3s ease-out;
        margin-bottom: 0;
    }

    .featurs .featurs-item:hover {
        transform: translateY(-10px) scale(1.02) !important;
    }

    /* Scroll indicator animation */
    .featurs::after {
        content: "→";
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        color: #198754;
        animation: scrollIndicator 1.5s infinite;
        opacity: 0.7;
        pointer-events: none;
    }

    @keyframes scrollIndicator {
        0%, 100% {
            transform: translate(0, -50%);
            opacity: 0.7;
        }
        50% {
            transform: translate(10px, -50%);
            opacity: 0.3;
        }
    }

    /* Active card scale effect */
    .featurs .featurs-item:active {
        transform: scale(0.98);
        transition: transform 0.2s;
    }
}