/* 3D Icon System - Modern Colorful Design */
.category-icon,
.icon-3d {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    position: relative;
    transition: all 0.3s ease;
                0 2px 4px rgba(0, 0, 0, 0.1),
                inset 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.category-icon::before,
.icon-3d::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    border-radius: 16px 16px 0 0;
    pointer-events: none;
}

.category-card:hover .category-icon,
.category-card:hover .icon-3d {
    transform: translateY(-4px);
                0 4px 8px rgba(0, 0, 0, 0.15),
                inset 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.category-icon svg,
.category-icon i,
.icon-3d svg,
.icon-3d i {
    color: white !important;
    font-size: 36px;
    z-index: 1;
}

/* Vibrant Gradient Colors for Each Category (51 total) */
.icon-gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.icon-gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.icon-gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.icon-gradient-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.icon-gradient-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.icon-gradient-6 { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
.icon-gradient-7 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
.icon-gradient-8 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
.icon-gradient-9 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
.icon-gradient-10 { background: linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%); }
.icon-gradient-11 { background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%); }
.icon-gradient-12 { background: linear-gradient(135deg, #f77062 0%, #fe5196 100%); }
.icon-gradient-13 { background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%); }
.icon-gradient-14 { background: linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%); }
.icon-gradient-15 { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); }
.icon-gradient-16 { background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%); }
.icon-gradient-17 { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); }
.icon-gradient-18 { background: linear-gradient(135deg, #cfd9df 0%, #e2ebf0 100%); }
.icon-gradient-19 { background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%); }
.icon-gradient-20 { background: linear-gradient(135deg, #74ebd5 0%, #acb6e5 100%); }
.icon-gradient-21 { background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%); }
.icon-gradient-22 { background: linear-gradient(135deg, #ffa8a8 0%, #fcff00 100%); }
.icon-gradient-23 { background: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%); }
.icon-gradient-24 { background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%); }
.icon-gradient-25 { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.icon-gradient-26 { background: linear-gradient(135deg, #e9defa 0%, #fbfcdb 100%); }
.icon-gradient-27 { background: linear-gradient(135deg, #52c234 0%, #061700 100%); }
.icon-gradient-28 { background: linear-gradient(135deg, #d9afd9 0%, #97d9e1 100%); }
.icon-gradient-29 { background: linear-gradient(135deg, #7028e4 0%, #e5b2ca 100%); }
.icon-gradient-30 { background: linear-gradient(135deg, #13547a 0%, #80d0c7 100%); }
.icon-gradient-31 { background: linear-gradient(135deg, #506d84 0%, #b8d4be 100%); }
.icon-gradient-32 { background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%); }
.icon-gradient-33 { background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); }
.icon-gradient-34 { background: linear-gradient(135deg, #a8ff78 0%, #78ffd6 100%); }
.icon-gradient-35 { background: linear-gradient(135deg, #f83600 0%, #f9d423 100%); }
.icon-gradient-36 { background: linear-gradient(135deg, #0fd850 0%, #f9f047 100%); }
.icon-gradient-37 { background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%); }
.icon-gradient-38 { background: linear-gradient(135deg, #f12711 0%, #f5af19 100%); }
.icon-gradient-39 { background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%); }
.icon-gradient-40 { background: linear-gradient(135deg, #108dc7 0%, #ef8e38 100%); }
.icon-gradient-41 { background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%); }
.icon-gradient-42 { background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%); }
.icon-gradient-43 { background: linear-gradient(135deg, #eacda3 0%, #d6ae7b 100%); }
.icon-gradient-44 { background: linear-gradient(135deg, #02aab0 0%, #00cdac 100%); }
.icon-gradient-45 { background: linear-gradient(135deg, #cb2d3e 0%, #ef473a 100%); }
.icon-gradient-46 { background: linear-gradient(135deg, #348f50 0%, #56b4d3 100%); }
.icon-gradient-47 { background: linear-gradient(135deg, #3a7bd5 0%, #3a6073 100%); }
.icon-gradient-48 { background: linear-gradient(135deg, #f2709c 0%, #ff9472 100%); }
.icon-gradient-49 { background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%); }
.icon-gradient-50 { background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%); }
.icon-gradient-51 { background: linear-gradient(135deg, #00d2ff 0%, #3a47d5 100%); }

/* Small icon variant */
.icon-3d-sm {
    width: 60px;
    height: 60px;
    border-radius: 16px;
}

.icon-3d-sm svg,
.icon-3d-sm i {
    font-size: 28px;
}

/* Large icon variant */
.icon-3d-lg {
    width: 100px;
    height: 100px;
    border-radius: 24px;
}

.icon-3d-lg svg,
.icon-3d-lg i {
    font-size: 48px;
}