/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Base styles */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Account for sticky header */
}

/* Enhanced smooth scrolling */
* {
    scroll-behavior: smooth;
}

/* Ensure smooth scrolling works even if JavaScript is slow */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f7f9fb; /* Light background for contrast */
    color: #000000; /* Black for all main text */
}

/* Custom Tailwind Configuration - This will be applied via inline script in HTML */
/* The colors defined here are for reference:
   primary-brand-50: #FFF1E6
   primary-brand-500: #FF7A1A
   primary-brand-700: #E06B16
   content-black: #000000
*/

/* Floating Action Buttons - Continuous Bouncing Animation */
.floating-btn {
    animation: bounce-continuous 1s ease-in-out infinite;
    position: relative;
}

.floating-btn:hover {
    animation: none;
}

@keyframes bounce-continuous {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Additional bouncing ring effect */
.floating-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    animation: ripple-bounce 1s ease-in-out infinite;
    pointer-events: none;
}

.whatsapp-btn::before {
    background-color: rgba(37, 211, 102, 0.3);
}

.phone-btn::before {
    background-color: rgba(255, 122, 26, 0.3);
}

@keyframes ripple-bounce {
    0%, 100% {
        transform: scale(1) translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2) translateY(-5px);
        opacity: 0.3;
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 640px) {
    #floating-buttons {
        bottom: 1rem !important;
        right: 1rem !important;
    }
    
    .floating-btn {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
}