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


        /* Slider Wrapper Container */
        .slider-container {
            position: relative;
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            padding: 0 40px;
            box-sizing: border-box;
        }

        /* Hide Scrollbar but keep functionality */
        .slider-track {
            display: flex;
            gap: 30px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 20px 0;
            scrollbar-width: none; /* Firefox */
        }

        .slider-track::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

        /* Individual Card Design */
        .category-card {
            flex: 0 0 calc(25% - 22.5px); /* 4 items per view on large screens */
            min-width: 220px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            user-select: none;
        }

        /* Circle Container with Dashed Border */
        .circle-frame {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 2px dashed #9cb3a8;
            background-color: #f4f8f5;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s ease, border-color 0.3s ease;
            cursor: pointer;
        }

        .circle-frame:hover {
            transform: scale(1.05);
            border-color: #5d7e6f;
        }

        /* Image styling */
        .circle-frame img {
            width: 90%;
            height: 90%;
            object-fit: fill;
            border-radius: 50%;
        }

        /* Typography matching the image */
        .category-title {
            font-family: 'Playfair Display', serif;
            font-size: 22px;
            color: #1a2b23;
            margin: 20px 0 5px 0;
            font-weight: 700;
        }

        .item-count {
            font-size: 14px;
            color: #7b8e84;
            margin: 0;
        }

        /* Navigation Buttons */
        .nav-btn {
            position: absolute;
            top: 40%;
            transform: translateY(-50%);
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            color: #333;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: all 0.2s ease;
            z-index: 10;
        }

        .nav-btn:hover {
            background-color: #5d7e6f;
            color: white;
            border-color: #5d7e6f;
        }

        .prev-btn { left: 0; }
        .next-btn { right: 0; }