/* Mobile Specific Styles */
/* These styles apply when the viewport is 768px or smaller */

:root {
    --header-height: 60px;
}

.about-image-container {
    max-width: 100%;
}

.about-content {
    margin-top: 1.5rem;
    padding: 1.5rem;
}

/* Mobile Navigation Menu Animation */
.nav-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Mobile Hero Adjustments */
.hero-title {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
}

.hero-subtitle {
    font-size: 1rem !important;
}

/* Stack badges vertically on small mobile */
.trust-badges {
    flex-direction: column;
    gap: 0.5rem;
}

/* Floating WhatsApp Button Position for Mobile */
.whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 24px;
}

/* Step Number Border Glow Animation */
@keyframes border-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4);
        border-color: #115e59;
    }
    50% {
        box-shadow: 0 0 15px 0 rgba(249, 115, 22, 0.8);
        border-color: #f97316;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4);
        border-color: #115e59;
    }
}

.step-number {
    animation: border-glow 2s infinite ease-in-out;
}