.process-pill { @apply rounded-full py-3 px-6 flex items-center; @apply shadow-sm backdrop-blur-sm bg-opacity-80; @apply transition-all duration-300 hover:shadow-md; position: relative; overflow: hidden; } .process-pill::before { content: ''; @apply absolute inset-0; background: rgba(255, 255, 255, 0.7); z-index: -1; border-radius: 9999px; } .process-icon { @apply flex-shrink-0 h-10 w-10 rounded-full bg-white flex items-center justify-center; @apply shadow-sm text-gray-700; } .process-content { @apply ml-4; } .process-title { @apply text-gray-800 font-medium; font-size: 15px; } .process-desc { @apply text-gray-600 text-sm mt-1; } body { background-image: radial-gradient(circle at 10% 20%, rgba(200, 253, 255, 0.2) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(200, 240, 210, 0.2) 0%, transparent 20%); } /* Responsive adjustments */ @media (max-width: 768px) { .process-pill { @apply py-2 px-4; } .process-icon { @apply h-8 w-8; } .process-title { font-size: 14px; } }