course finder and course detail page create

asstes/css/style.css

@@ -1,10 +1,151 @@
  :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 */
@@ -13,22 +154,23 @@
      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-link {
+     text-decoration: none;
+     color: #6c757d;
+     border-radius: 0.375rem 0.375rem 0 0;
+     cursor: pointer;
+ }
 
-.tab-active {
-    background-color: var(--primary-color);
-    color: #fff !important;
-}
+ .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);
@@ -64,4 +206,27 @@
 
  .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;
+     }
  }