:root {
    --primary: #3d8b40;
    --accent: #0a5807;
    --bg: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--bg);
    font-family: 'Source Sans 3', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Animated Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 15px 0;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.header.hidden {
    transform: translateY(-100%);
}

.logo {
    height: 70px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: rotate(-5deg) scale(1.05);
}

/* Ensure main content starts below the header */
.main-content {
    margin-top: 100px;
    padding: 20px 15px 100px;
}

/* Base Styles for Larger Screens (Desktop) */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 12px; /* Reduced gap for better performance */
    padding: 12px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Category Card Styling */
.category-card {
    width: 100%; /* Cards take full width of grid cell */
    height: auto;
    padding: 12px;
    box-sizing: border-box;
    background-color: #ffffff; /* Pure white background */
    border-radius: 8px;
    box-shadow: none; /* Removed shadow */
}


/* For Medium Screens (Tablets) */
@media (max-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px; /* Slightly smaller gap */
        padding: 10px;
    }
}

/* For Small Screens (Mobile Devices) */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px; /* Smaller gap */
        padding: 8px;
    }

    .category-card {
        padding: 10px; /* Reduce card padding */
    }
}

/* For Very Small Screens (Phones like iPhone X, Samsung S3, Xiaomi A2) */
@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns even on small screens */
        gap: 8px; /* Smaller gap */
        padding: 8px;
    }

    .category-card {
        padding: 8px; /* Reduce padding for better performance */
    }
}

.category-card {
    position: relative;
    border-radius: 20px; /* Balanced rounded corners */
    padding: 25px; /* Increased padding for better spacing */
    min-height: 220px; /* 20% taller cards for better proportions */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    background: linear-gradient(45deg, var(#ffffff) 0%, #ffffff67 100%);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0;
    transform: translateY(20px);
    border: 2px solid var(--primary); /* Green border */
}
/* Sequential Fade-In Animation for Cards */
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animation delay to each card */
.category-card:nth-child(1) { animation: fadeIn 0.5s ease-out 0.1s forwards; }
.category-card:nth-child(2) { animation: fadeIn 0.5s ease-out 0.2s forwards; }
.category-card:nth-child(3) { animation: fadeIn 0.5s ease-out 0.3s forwards; }
.category-card:nth-child(4) { animation: fadeIn 0.5s ease-out 0.4s forwards; }
.category-card:nth-child(5) { animation: fadeIn 0.5s ease-out 0.5s forwards; }
.category-card:nth-child(6) { animation: fadeIn 0.5s ease-out 0.6s forwards; }
.category-card:nth-child(7) { animation: fadeIn 0.5s ease-out 0.7s forwards; }
.category-card:nth-child(8) { animation: fadeIn 0.5s ease-out 0.8s forwards; }
.category-card:nth-child(9) { animation: fadeIn 0.5s ease-out 0.9s forwards; }
.category-card:nth-child(10) { animation: fadeIn 0.5s ease-out 1s forwards; }
.category-card:nth-child(11) { animation: fadeIn 0.5s ease-out 1.1s forwards; }
.category-card:nth-child(12) { animation: fadeIn 0.5s ease-out 1.2s forwards; }
.category-card:nth-child(13) { animation: fadeIn 0.5s ease-out 1.3s forwards; }
.category-card:nth-child(14) { animation: fadeIn 0.5s ease-out 1.4s forwards; }
.category-card:nth-child(15) { animation: fadeIn 0.5s ease-out 1.5s forwards; }
.category-card:nth-child(16) { animation: fadeIn 0.5s ease-out 1.6s forwards; }
.category-card:nth-child(17) { animation: fadeIn 0.5s ease-out 1.7s forwards; }
.category-card:nth-child(18) { animation: fadeIn 0.5s ease-out 1.8s forwards; }
.category-card:nth-child(19) { animation: fadeIn 0.5s ease-out 1.9s forwards; }
.category-card:nth-child(20) { animation: fadeIn 0.5s ease-out 2s forwards; }
.category-card:nth-child(21) { animation: fadeIn 0.5s ease-out 2.1s forwards; }
.category-card:nth-child(22) { animation: fadeIn 0.5s ease-out 2.2s forwards; }
.category-card:nth-child(23) { animation: fadeIn 0.5s ease-out 2.3s forwards; }
.category-card:nth-child(24) { animation: fadeIn 0.5s ease-out 2.4s forwards; }
.category-card:nth-child(25) { animation: fadeIn 0.5s ease-out 2.5s forwards; }



/* Circular Image */
.food-image {
    position: absolute;
    top: 25px; /* Adjusted for taller card */
    left: 50%;
    transform: translateX(-50%);
    width: 100px; /* Larger image for better visibility */
    height: 100px; /* Larger image for better visibility */
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent); /* Slightly thicker border */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 2;
}

/* Hover Effect for Images */
.category-card:hover .food-image {
    transform: translateX(-50%) scale(1.15); /* Slightly larger on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
}

/* Curved Top for the Green Background */
.category-card::before {
    content: '';
    position: absolute;
    top: 25px; /* Adjusted for taller card */
    left: 50%;
    transform: translateX(-50%);
    width: 100px; /* Match the image size */
    height: 100px; /* Match the image size */
    background: inherit;
    border-radius: 50%;
    z-index: 1;
    clip-path: inset(0 0 50% 0);
}

/* Content area adjustments */
.category-content {
    position: relative;
    z-index: 3;
    background: rgba(255, 255, 255, 0.95); /* Slightly more opaque */
    border-radius: 10px; /* Adjusted for smooth corners */
    padding: 15px 20px;
    text-align: center;
    width: 100%;
}
.category-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
    color: var(--primary); /* Make title more prominent */
}
.category-description {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

/* Pagination buttons */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination a {
    padding: 10px 15px;
    background: var(--primary);
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.pagination a:hover {
    background: var(--accent);
}

.pagination a.disabled {
    background: #ccc;
    pointer-events: none;
}



.category-name {
    font-family: 'EB Garamond', serif;
    color: var(--primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; /* Ensure text takes full width of the card */
}
/* Adjust font size on smaller screens based on the length of text */
@media (max-width: 768px) {
    .category-name {
        font-size: calc(1rem - 0.05vw); /* Reduce size for smaller screens */
    }

    .category-name.long-text {
        font-size: calc(0.8rem - 0.05vw); /* Even smaller for long text */
    }
}

@media (max-width: 480px) {
    .category-name {
        font-size: calc(0.8rem - 0.05vw); /* Reduce font size for very small screens */
    }

    .category-card {
        min-height: 150px; /* Reduce card height for very small screens */
        padding: 10px; /* Reduce padding for very small screens */
    }

    .food-image {
        width: 70px; /* Smaller image size for very small screens */
        height: 70px; /* Smaller image size for very small screens */
        top: 10px; /* Adjust image position */
    }

    .category-content {
        margin-top: 80px; /* Adjust content position */
        padding: 8px; /* Reduce padding for very small screens */
    }
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 30px;
    padding: 15px;
    display: flex;
    gap: 20px; /* Increased gap for better spacing */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, opacity 0.3s ease; /* Added opacity transition */
    overflow: hidden; /* Ensure the animation doesn't overflow */
    z-index: 1000; /* Ensure it's above other content */
}

/* Hide bottom nav */
.bottom-nav.hide {
    transform: translateX(-50%) translateY(150%); /* Slide down */
    opacity: 0; /* Fade out */
}

/* Idle Animation for Bottom Nav */
.bottom-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.1;
    animation: idleGlow 3s infinite ease-in-out; /* Subtle glow animation */
    z-index: -1; /* Ensure it stays behind the buttons */
}

/* Keyframes for idle glow animation */
@keyframes idleGlow {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
.nav-item {
    width: 45px; /* Slightly larger size for better touch targets */
    height: 45px; /* Slightly larger size for better touch targets */
    border-radius: 50%;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    transition: all 0.3s ease;
}

.nav-item:active {
    background: rgba(61, 139, 64, 0.1);
    transform: scale(0.9);
}

/* Scroll Top Button */
.scroll-top {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.scroll-top.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Bottom Navigation for Smaller Screens */
@media (max-width: 768px) {
    .bottom-nav {
        bottom: 10px; /* Adjust bottom distance */
        padding: 10px 15px; /* Reduced padding */
        gap: 10px; /* Reduced gap for compact layout */
    }

    .bottom-nav i {
        font-size: 16px; /* Reduced icon size to make the nav smaller */
    }
}
/* Bottom Navigation for Smaller Screens (e.g., Samsung Galaxy S3) */
@media (max-width: 360px) {
    .bottom-nav {
        bottom: 8px; /* Adjust bottom distance */
        padding: 8px 10px; /* Smaller padding for more compact design */
        gap: 10px; /* Adjusted gap for better spacing on small devices */
    }

    .bottom-nav i {
        font-size: 14px; /* Smaller icon size for tight fit */
    }
}
.flag-icon {
    width: 24px; /* Adjust the width as needed */
    height: 16px; /* Adjust the height as needed (typical flag aspect ratio) */
    vertical-align: middle; /* Align the image properly with text */
    border: 1px solid #ccc; /* Optional: Add a border for better visibility */
    border-radius: 3px; /* Optional: Add rounded corners */
}
 .copyright-bar {
            background-color: var(--primary);
            color: white;
            padding: 15px 20px;
            text-align: center;
            font-family: 'Source Sans 3', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
            margin-top: 30px;
        }

        .copyright-text {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .social-links {
            display: flex;
            gap: 15px;
        }

        .social-link {
            color: white;
            background-color: var(--accent);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }

        /* Add your existing :root variables and other CSS here */
        :root {
            --primary: #3d8b40;
            --accent: #0a5807;
            --bg: #ffffff;
        }