* {
       font-family: 'Inter', system-ui, -apple-system, sans-serif;
   }

   body {
       background-color: #f8fafc;
   }

   .gradient-circle {
       width: 5rem;
       height: 5rem;
       background: linear-gradient(135deg, #2563eb, #9333ea);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto;
   }

   .category-item {
       background-color: #f8fafc;
       border-radius: 0.75rem;
       padding: 1rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
   }

   .note-box {
       background-color: #eff6ff;
       border: 1px solid #bfdbfe;
       border-radius: 0.75rem;
       padding: 1rem;
       color: #1e40af;
   }

   .progress-custom {
       height: 0.5rem;
       background-color: #e2e8f0;
       border-radius: 999px;
   }

   .progress-bar-custom {
       background: linear-gradient(90deg, #2563eb, #9333ea);
       border-radius: 999px;
   }

   .question-option {
       width: 100%;
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1rem;
       border: 2px solid #e2e8f0;
       border-radius: 0.75rem;
       background: white;
       transition: all 0.1s;
       text-align: left;
   }

   .question-option:hover {
       border-color: #94a3b8;
   }

   .question-option.selected {
       border-color: #2563eb;
       background-color: #eff6ff;
   }

   .question-option:disabled {
       opacity: 0.6;
       cursor: not-allowed;
   }

   .dot-indicator {
       width: 0.5rem;
       height: 0.5rem;
       border-radius: 50%;
       background-color: #e2e8f0;
       transition: all 0.2s;
   }

   .dot-indicator.active {
       width: 1.5rem;
       background-color: #2563eb;
       border-radius: 999px;
   }

   .dot-indicator.answered {
       background-color: #93c5fd;
   }

   .profile-circle {
       width: 40px;
       height: 40px;
       background: #2563eb;
       color: white;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 600;
   }


@media (max-width: 991.98px) {
    .nav-link {
        padding: 10px 0;
        margin-top: 10px ;
        border-bottom: 1px solid #f8f9fa;
        text-align: end;
    }
}