:root {
         --primary: #35D1D1;
         --secondary: #000;
         --white: #fff;
     }
     
     body {
         font-family: 'Poppins', sans-serif;
     }
     
     .font-merriweather {
         font-family: 'Merriweather', serif;
     }
     
     .bg-primary-custom {
         background-color: var(--primary);
     }
     
     .text-primary-custom {
         color: var(--primary);
     }
     
     .border-primary-custom {
         border-color: var(--primary);
     }
     
     .hover-lift {
         transition: all 0.3s ease;
     }
     
     .hover-lift:hover {
         transform: translateY(-8px);
         box-shadow: 0 15px 40px rgba(53, 209, 209, 0.25);
     }
     
     .nav-link-custom {
         position: relative;
         color: #000;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         padding: 0.5rem 0;
         transition: color 0.3s ease;
     }
     
     .nav-link-custom::after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 0;
         width: 0;
         height: 3px;
         background: var(--primary);
         transition: width 0.3s ease;
     }
     
     .nav-link-custom:hover {
         color: var(--primary);
     }
     
     .nav-link-custom:hover::after {
         width: 100%;
     }
     
     .hero-gradient {
         background: linear-gradient(135deg, #000 0%, #1a1a1a 50%, #000 100%);
         position: relative;
         overflow: hidden;
     }
     
     .hero-gradient::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: radial-gradient(circle at 30% 30%, rgba(53, 209, 209, 0.2) 0%, transparent 60%), radial-gradient(circle at 70% 70%, rgba(53, 209, 209, 0.2) 0%, transparent 60%);
         animation: pulse 20s ease-in-out infinite;
     }
     
     @keyframes pulse {
         0%,
         100% {
             opacity: 1;
             transform: scale(1);
         }
         50% {
             opacity: 0.7;
             transform: scale(1.05);
         }
     }
     
     .category-tab {
         border-bottom: 3px solid transparent;
         transition: all 0.3s ease;
         cursor: pointer;
     }
     
     .category-tab:hover,
     .category-tab.active {
         color: var(--primary) !important;
         border-bottom-color: var(--primary);
         background: rgba(53, 209, 209, 0.08);
     }
     
     .blog-image {
         height: 280px;
         background: linear-gradient(135deg, #35D1D1 0%, #2ab8b8 100%);
         position: relative;
         overflow: hidden;
     }
     
     .blog-image::before {
         content: '📰';
         position: absolute;
         font-size: 10rem;
         opacity: 0.15;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%) rotate(-15deg);
         transition: all 0.4s ease;
     }
     
     .hover-lift:hover .blog-image::before {
         transform: translate(-50%, -50%) rotate(15deg) scale(1.1);
     }
     
     .gradient-1 {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     }
     
     .gradient-2 {
         background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
     }
     
     .gradient-3 {
         background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
     }
     
     .gradient-4 {
         background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
     }
     
     .gradient-5 {
         background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
     }
     
     .gradient-6 {
         background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
     }
     
     .gradient-7 {
         background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
     }
     
     .gradient-8 {
         background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
     }
     
     .trending-number {
         font-size: 2rem;
         font-weight: 900;
         color: var(--primary);
         min-width: 50px;
         display: inline-block;
     }
     
     .tag-cloud .badge {
         transition: all 0.3s ease;
         cursor: pointer;
     }
     
     .tag-cloud .badge:hover {
         background-color: var(--primary) !important;
         color: white !important;
         transform: translateY(-2px);
     }
     
     .spinner-border-custom {
         color: #35D1D1 !important;
     }
     
     @media (max-width: 768px) {
         .hero-title {
             font-size: 2.5rem !important;
         }
     }