coursefinder/asstes/css/style.css

 :root {
     --primary-color: #16a34a;
     --primary-hover: #15803d;
     --primary: #6f5bf3;
     --gray: #e5e7eb;
     --text: #111827;
 }

 



 body {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     background: #f9fafb;
     display: flex;
     justify-content: center;
     padding: 40px;
     background-color: #f3f4f6;

 }

 .card {
     background: #fff;
     width: 100%;
     /* max-width: 900px; */
     border-radius: 24px;
     padding: 40px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
     margin-bottom: 40px;
 }
.card.card1{
    padding: 0px;
}
 h1 {
     text-align: center;
     margin-bottom: 8px;
 }

 .subtitle {
     text-align: center;
     color: #555;
     margin-bottom: 40px;
 }

 .stepper {
     display: flex;
     align-items: center;
     margin-bottom: 40px;
 }

 .step {
     display: flex;
     align-items: center;
     flex: 1;
 }

 .circle {
     width: 20px;
     height: 20px;
     border-radius: 5px;
     border: 2px solid var(--gray);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     background: #fff;
     color: #999;
     font-size: 13px;
     transition: all .3s ease;
 }

 .circle.active,
 .circle.completed {
     border-color: var(--primary);
     background: var(--primary);
     color: #fff;
 }

 .line {
     height: 4px;
     flex: 1;
     background: var(--gray);
     /* margin: 0 8px; */
     /* border-radius: 2px; */
     overflow: hidden;
 }

 .line-fill {
     height: 100%;
     width: 0%;
     background: var(--primary);
     transition: width .4s ease;
 }

 .question {
     font-size: 18px;
     margin-bottom: 16px;
 }

 select {
     width: 100%;
     padding: 14px;
     border-radius: 12px;
     border: 1px solid #d1d5db;
     font-size: 16px;
     background-position: right 16px center;
 }

 select {
     width: 100%;
     padding: 14px 48px 14px 14px;
     border-radius: 12px;
     border: 1px solid #d1d5db;
     font-size: 16px;

     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;

     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 16px center;
     background-size: 14px;
 }

 .actions {
     display: flex;
     justify-content: flex-end;
     margin-top: 40px;
 }

 button {
     padding: 14px 28px;
     border-radius: 999px;
     border: none;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: .2em;
     cursor: not-allowed;
     background: #c7c3fa;
     color: #fff;
     transition: background .3s ease;
 }

 button.enabled {
     background: var(--primary);
     cursor: pointer;
 }

 /* Primary buttons */
 .btn-primary-custom {
     background-color: var(--primary-color);
     color: #ffffff;
     border: none;
 }

 .tab-link {
     text-decoration: none;
     color: #6c757d;
     border-radius: 0.375rem 0.375rem 0 0;
     cursor: pointer;
 }

 .tab-link:hover {
     color: inherit;
     /* background: transparent; */
 }

 .tab-active {
     background-color: var(--primary-color);
     color: #fff !important;
 }

 .btn-primary-custom:hover {
     background-color: var(--primary-hover);
 }

 .btn:hover {
     color: white !important;
     background-color: var(--primary-hover);
     border-color: var(--primary-hover);
 }


 /* Primary text links */
 .text-primary-custom {
     color: var(--primary-color);
     text-decoration: none;
 }

 .text-primary-custom:hover {
     text-decoration: underline;
 }

 /* Tab active state */
 .tab-active {
     background-color: var(--primary-color);
     color: #ffffff;
 }

 .sticky-box {
     position: sticky;
     top: 1.5rem;
 }

 .rounded-xl {
     border-radius: 0.75rem;
 }

 select:focus,
 .form-select:focus,
 input:focus,
 textarea:focus {
     outline: none;
     /* removes default blue border */
     box-shadow: none;
     /* removes focus shadow */
     border-color: #ced4da;
     /* optional: reset to normal border color */
 }

 .list {
     display: flex;
     list-style: none;
 }

 @media(max-width:576px) {
     .intake {
         margin-bottom: 12px;
     }
 }