.menu-card {
    padding: 15px 12px;
    margin-bottom: 15px;
}

.categories-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px;
    margin-bottom: 20px;
}


.categories-ul li .nav-link {
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 12px 35px;
    color: inherit;
    border-radius: 20px;

}

.categories-ul li .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(67, 90, 243, 1), rgba(86, 56, 255, 1));
}

.category-card-area .card {
    background-color: #fff;
    border: none;
    border-radius: 25px;
    padding: 20px 10px;
    overflow: hidden;
}

.category-card-area .card-header {
    background-color: #fff;
    border: 0;
}

.category-card-area .platform-card {
    display: flex;
    align-items: center;
}

.category-card-area .platform-card .service-count-badge {
    background-color: rgba(255, 106, 0, .1);
    color: rgba(255, 106, 0, 1);
    border-radius: 25px;
    font-size: 13px;
    padding: 5px 18px;
}

.category-card-area .platform-card .platform-info {
    flex-grow: 1;
}

.category-card-area .platform-card .platform-info .name {
    font-weight: 600;
    font-size: 17px
}

.category-card-area .platform-card .platform-info .browse {
    color: var(--text-secondary);
    font-size: 14px;
}

.category-card-area .platform-card .platform-icon-circle i {
    border-radius: 50%;
    padding: 15px;
    font-size: 30px;
    color: #fff;
    margin-right: 10px;
}

.package-hover {
    font-size: 0.75rem;
    padding: 10px 20px;
    border-radius: 25px;
    background-color: rgba(196, 67, 170, .1);
    font-weight: 500;
}

.discord-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(75, 96, 171, 1), rgba(33, 42, 75, 1));
}

.google-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(55, 71, 131, 1), rgba(67, 108, 161, 1));
}

.kick-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(110, 174, 51, 1), rgba(38, 68, 10, 1));
}

.instagram-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(147, 51, 234, 1), rgba(219, 39, 119, 1));
}

.tiktok-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(20, 22, 25, 1), rgba(24, 50, 69, 1));
}

.facebook-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(36, 97, 232, 1), rgba(12, 63, 175, 1));
}

.youtube-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgb(233, 39, 39), rgb(167, 11, 11));
}

.gmail-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(239, 68, 68, 1), rgb(156, 34, 34));
}

.twitter-package:hover .package-hover,
.threads-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(14, 14, 14, 1), rgba(25, 28, 33, 1));
}

.linkedin-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(54, 135, 222, 1), rgba(20, 53, 87, 1));
}

.spotify-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(33, 195, 93, 1), rgba(21, 131, 62, 1));
}

.whatsapp-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(33, 195, 93, 1), rgba(21, 131, 62, 1));
}

.twitch-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(166, 83, 245, 1), rgba(125, 34, 205, 1));
}

.telegram-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(97, 188, 231, 1), rgba(15, 94, 131, 1));
}

.snapchat-package:hover .package-hover {
    color: #000;
    background: linear-gradient(135deg, #fffc00, #ffe600);
}

.seo-package:hover .package-hover {
    color: #fff;
    background: linear-gradient(45deg, #1E3C72, #2A5298);
}

.more-button {
    border-radius: 25px;
    text-align: center;
    padding: 10px;
    background-color: rgba(245, 246, 251, 1);
}

.category-list-item .hidden-item {
    display: flex;
    max-height: 0;
    overflow: hidden;
    transition: all .5s ease;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.category-list-item .hidden-item.show {
    max-height: 200px;
    opacity: 1;
    padding: 15px 12px;
    margin-bottom: 15px;
    pointer-events: auto;
}

.flex-fill {
    flex: 1 1 !important;
}

@media (max-width: 992px) {


    .categories-ul {
        overflow-x: scroll;
        flex-wrap: nowrap;
        padding: 0 10px;
        gap: 5px;
    }

    .categories-ul li .nav-link {
        padding: 8px 12px;
        font-size: 13px;
        margin-bottom: 10px;
    }

    .category-card-area .card-header {
        padding: 0;
    }

    .menu-card {
        padding: 5px 8px;
    }

    .hidden-item {
        padding: 0;
    }

    .card-title .browse {
        font-size: 12px;
        text-wrap: nowrap;
    }

    .card-title .name {
        font-size: 14px;
    }

    .card-icon i {
        width: 35px;
        height: 35px;
        font-size: 22px;
    }

    .category-card-area .platform-card .platform-icon-circle i {
        font-size: 24px;
        padding: 10px;
    }

}