course finder page create

asstes/css/style.css

@@ -0,0 +1,67 @@
+ :root {
+     --primary-color: #16a34a;
+     --primary-hover: #15803d;
+ }
+
+ body {
+     background-color: #f3f4f6;
+ }
+
+ /* 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;
+ }