/* Custom CSS for Fourways Lock & Key Website */

/* Keyframes for subtle blob animation (for hero section backgrounds) */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}
.animate-blob {
    animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.animation-delay-2000 {
    animation-delay: 2s;
}

/* Keyframes for phone shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Keyframes for bounce animation (for WhatsApp) */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Apply animations on hover */
.group:hover .group-hover\:animate-shake {
    animation: shake 0.5s ease-in-out infinite;
}
.group:hover .group-hover\:animate-bounce {
    animation: bounce 0.8s infinite;
}

/* Custom select arrow for better appearance in forms */
select {
    /* Existing Tailwind classes handle basic styling */
    /* Add custom arrow using background image and no default arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%232D63B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5em;
    -webkit-appearance: none; /* Remove default arrow for Chrome, Safari, Edge */
    -moz-appearance: none; /* Remove default arrow for Firefox */
    appearance: none; /* Remove default arrow for modern browsers */
    padding-right: 2.5rem; /* Make space for the custom arrow */
}