.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 25s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

.mobile-menu {
    transition: all 0.3s ease;
}

body {
    background: linear-gradient(to bottom, #f0fff4, #fffbeb);
    background-attachment: fixed;
}

.text-shadow-lg {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

.card-hover:hover {
    transform: translateY(-5px);
}


.gender-tab {
            transition: all 0.3s ease;
        }
        .gender-tab.active {
            background: linear-gradient(to right, #16a34a, #84cc16);
            color: white;
        }
        .nutrition-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .nutrition-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .progress-bar {
            height: 8px;
            border-radius: 4px;
            background-color: #e5e7eb;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 1.5s ease-in-out;
        }
        
        /* Improved Food Pyramid */
        .pyramid-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
        }
        
        .pyramid-row {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-bottom: 5px;
        }
        
        .pyramid-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 12px 8px;
            border-radius: 8px;
            margin: 0 4px;
            color: white;
            font-weight: 500;
            text-align: center;
            min-height: 80px;
            width: 100%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .pyramid-item:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        .pyramid-item i {
            font-size: 24px;
            margin-bottom: 8px;
        }
        
        .pyramid-item span {
            font-size: 12px;
        }
        
        .row-1 { width: 20%; background: linear-gradient(to right, #ef4444, #f97316); } /* Fats & Oils */
        .row-2 { width: 40%; background: linear-gradient(to right, #3b82f6, #0ea5e9); } /* Protein */
        .row-3 { width: 60%; background: linear-gradient(to right, #22c55e, #84cc16); } /* Fruits & Veggies */
        .row-4 { width: 80%; background: linear-gradient(to right, #eab308, #f59e0b); } /* Grains */
        
        .gender-icon {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 50px;
            color: white;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        .male-icon {
            background: linear-gradient(to bottom right, #3b82f6, #1e40af);
        }
        
        .female-icon {
            background: linear-gradient(to bottom right, #ec4899, #be185d);
        }