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

body {
    font-family: 'Poppins', sans-serif;
}

/* --- UTILITIES --- */

/* Gradient Background */
.gradient-bg {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
}

/* Card Hover Effects */
.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px -12px rgba(245, 158, 11, 0.25);
}

/* --- ANIMATIONS --- */

/* Fade In */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Pulse Badge */
.pulse-badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Floating Product Cards */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Shine Animation (For Buttons) */
@keyframes shine {
    100% { left: 125%; }
}

.group-hover\:animate-shine:hover {
    animation: shine 0.75s;
}

/* Wiggle Animation (For Phone Icon) */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.group-hover\:animate-wiggle:hover {
    animation: wiggle 0.5s ease-in-out infinite;
}

/* --- DECORATIVE ELEMENTS --- */

/* Ribbon Effect */
.ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}

/* Wave Animations */
.waves {
    position: relative;
    width: 100%;
    height: 100px;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px;
}

.parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax>use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax>use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax>use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }

@keyframes move-forever {
    0% { transform: translate3d(-90px, 0, 0); }
    100% { transform: translate3d(85px, 0, 0); }
}

@media (max-width: 768px) {
    .waves {
        height: 60px;
        min-height: 60px;
    }
}

/* --- TABS SYSTEM STYLING --- */

/* Tab Buttons Container */
.tab-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 20px;
    margin-right: 10px;
    color: #6b7280; /* Gray color for inactive */
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

/* Active Tab (Green) */
.tab-button.active-tab {
    color: #16a34a !important; /* Force Green */
    border-bottom: 3px solid #16a34a !important;
}

/* Hover Effect */
.tab-button:hover {
    color: #16a34a;
}

/* Tab Content Animation */
.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* --- CRITICAL MENU FIXES --- */

/* 1. Remove generic .hidden override so Tailwind works */
/* We rely on Tailwind's 'hidden' class now. */

/* 2. Force Desktop Menu to show on large screens */
@media (min-width: 768px) {
    nav.md\:flex {
        display: flex !important;
    }
    
    /* Ensure links inside nav are visible */
    nav.md\:flex a {
        display: inline-block !important;
    }
    
    /* Force Hide Mobile Button on Desktop */
    button.md\:hidden {
        display: none !important;
    }
}