/* Modern Mobile Features Design (Horizontal Swipe Cards) */
@media (max-width: 767px) {
    .features-section { position: relative; background-color: var(--bg-primary); }
    .features-section .row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 15px 15px; /* Space for shadows and bottom padding */
        gap: 5px;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        align-items: stretch;
    }
    /* Hide scrollbar */
    .features-section .row::-webkit-scrollbar { display: none; }
    .features-section .row { -ms-overflow-style: none; scrollbar-width: none; }

    .feature-box-wrapper {
        flex: 0 0 60%; /* Set a base width for the card's layout space */
        width: 60%; /* Explicitly set width as requested */
        min-height: 180px; /* Ensure consistent height for all cards */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        scroll-snap-align: center;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 20px !important;
        overflow: hidden !important;
        padding: 20px 15px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        border: 1px solid transparent;
        margin: 0 !important;
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        transform: scale(0.85) !important; /* Scale down inactive cards */
        opacity: 0.7;
        z-index: 1;
    }

    /* New: Hover effect for inactive cards on mobile */
    .features-section .row .feature-box-wrapper:hover:not(.active-card) {
        transform: scale(0.9) !important; /* Slightly larger than inactive, but smaller than active */
        opacity: 0.85; /* Slightly more opaque than inactive */
        box-shadow: 0 15px 45px rgba(0,0,0,0.15); /* More prominent shadow on hover */
    }

    .feature-box-wrapper.active-card {
        transform: scale(1.0) !important; /* Active card is at its natural, larger size */
        opacity: 1;
        background-color: #f0f7ff;
        /* Apply the pulsing animation for glow effect */
        animation: pulse-glow 2s infinite ease-in-out;
        z-index: 10;
        border: 2px solid #ff69b4 !important; /* Use pink color for border */
    }

    /* Enhanced Icon for Mobile Cards */
    .feature-box-wrapper .feature-icon {
        width: 60px;
        height: 60px;
        line-height: 60px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        opacity: 1 !important;
        transform: scale(1);
        transition: none !important;
    }

    /* Icon Spin Animation on Active */
    @keyframes iconSpin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .feature-box-wrapper.active-card .feature-icon i {
        animation: iconSpin 0.6s ease-in-out;
    }

    /* Icon Pulse Animation on Active Card */
    @keyframes iconPulse {
        0% { transform: scale(1); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
        50% { transform: scale(1.15); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        100% { transform: scale(1); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
    }
    .feature-box-wrapper.active-card .feature-icon {
        animation: iconPulse 2s infinite ease-in-out !important;
}

    @keyframes pulse-glow {
        0% {
            box-shadow: 0 8px 10px var(--shadow-color), 0 0 15px rgba(255, 105, 180, 0.6);
        }
        50% {
            box-shadow: 0 8px 10px var(--shadow-color), 0 0 25px rgba(255, 105, 180, 0.8);
        }
        100% {
            box-shadow: 0 8px 10px var(--shadow-color), 0 0 15px rgba(255, 105, 180, 0.6);
        }
    }