@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

.hero-bg {
    background-image: linear-gradient(to bottom, rgba(22, 101, 52, 0.8), rgba(6, 182, 212, 0.8)), url('https://images.unsplash.com/photo-1583512603805-3cc6b41f3edb?q=80&w=1480&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
}

/* Custom dog paw icon for comparison table */
.dog-paw-icon::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%2316a34a'%3E%3Cpath d='M298.1 36.7c-10.3-8.4-25.4-6.4-33.8 4L175.4 149.1C124.7 211.1 75 272.7 48.3 315.7c-19 30.7-22.9 68.1-12.4 102.3l57.7 178.9c6.3 19.6 24.9 32.7 45.2 30.8L288 630.7l150.2 20.9c20.3 1.9 38.9-11.2 45.2-30.8l57.7-178.9c10.5-34.2 6.6-71.6-12.4-102.3-26.6-43-76.3-104.6-127-166.6L311.8 40.7c-8.4-10.3-23.5-12.4-33.8-4zM288 424l-19.1-19.1c-5.1-5.1-13.3-5.1-18.4 0L241 405.1c-5.1 5.1-5.1 13.3 0 18.4l19.1 19.1c5.1 5.1 13.3 5.1 18.4 0L288 442.4l9.5-9.5c5.1-5.1 13.3-5.1 18.4 0l19.1 19.1c5.1 5.1 13.3 5.1 18.4 0L355 442.4c5.1-5.1 5.1-13.3 0-18.4l-19.1-19.1c-5.1-5.1-13.3-5.1-18.4 0L288 424z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 8px;
    vertical-align: middle;
}

/* Floating animation for hero image */
.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Hover effect for feature cards */
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.feature-card {
    transition: all 0.3s ease;
}

/* For FAQ accordion */
[x-cloak] { display: none !important; }