diff --git a/resources/views/abouts.blade.php b/resources/views/abouts.blade.php
index d61ed88..4b7e0c3 100644
--- a/resources/views/abouts.blade.php
+++ b/resources/views/abouts.blade.php
@@ -6,15 +6,29 @@
 
 <style>
 :root{
-    --primary:#5E244E;
-    --secondary:#8B3A74;
-    --light:#f8f4f7;
+    /* Premium Modern Automotive Palette */
+    --primary: #3E51B8;           /* Tech Blue */
+    --primary-light: #0a67df;     /* Vibrant Electric Blue */
+    --secondary: #BC1A1A;         /* Deep Racing Red */
+    --secondary-hover: #822424;   /* Dark Burnt Red */
+    --accent-dark: #753939;       /* Muted Crimson */
+    --bg-light: #F8FAFC;          /* Soft slate light gray */
+    
+    /* Semantic Adjustments */
+    --text-main: #1E293B;         /* Slate dark grey */
+    --text-muted: #64748B;        /* Neutral gray */
+    --card-border: rgba(62, 81, 184, 0.1);
+}
+
+body {
+    font-family: 'Segoe UI', Arial, sans-serif;
+    color: var(--text-main);
 }
 
 .hero-about{
     min-height:60vh;
     background:
-    linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),
+    linear-gradient(rgba(62, 81, 184, 0.85), rgba(117, 57, 57, 0.8)),
     url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg');
     background-size:cover;
     background-position:center;
@@ -34,21 +48,21 @@
     background:#fff;
     border-radius:20px;
     padding:35px 25px;
-    box-shadow:0 10px 30px rgba(0,0,0,.05);
+    box-shadow: 0 10px 30px rgba(0,0,0,.04);
     transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-    border: 1px solid #efeff4;
+    border: 1px solid var(--card-border);
 }
 
 .about-box:hover {
     transform: translateY(-10px) scale(1.02);
-    box-shadow: 0 20px 40px rgba(94, 36, 78, 0.1);
-    border-color: var(--primary);
+    box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
+    border-color: var(--primary-light);
 }
 
 .icon-circle {
     width:75px;
     height:75px;
-    background:var(--primary);
+    background: var(--primary);
     color:#fff;
     border-radius:50%;
     display:flex;
@@ -60,8 +74,9 @@
 }
 
 .about-box:hover .icon-circle {
-    background: var(--secondary);
-    transform: rotateY(180deg); /* කාඩ් එක උඩට යද්දී අයිකන් එක කැරකෙනවා */
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
+    transform: rotateY(180deg); 
+    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
 }
 
 /* ========================================================
@@ -73,41 +88,36 @@
     transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
-/* 1. පල්ලෙහා ඉඳන් උඩට එන ඇනිමේෂන් */
 .fade-up-init {
     transform: translateY(40px);
 }
 
-/* 2. වමේ ඉඳන් දකුණට (රූපය සඳහා) */
 .slide-left-init {
     transform: translateX(-50px);
 }
 
-/* 3. දකුණේ ඉඳන් වමට (විස්තරය සඳහා) */
 .slide-right-init {
     transform: translateX(50px);
 }
 
-/* 4. Zoom වෙලා bounce වෙන්න (කාඩ්ස් සඳහා) */
 .zoom-in-init {
     transform: scale(0.85);
 }
 
-/* Active Class (Scroll කරද්දී apply වේ) */
 .animate-item.animated {
     opacity: 1;
     transform: translate(0) scale(1);
 }
 
-/* CTA බටන් එක ගැස්සෙන ඇනිමේෂන් එකක් */
+/* Automotive Theme Glow Pulse Button */
 @keyframes pulse-btn {
-    0% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0.4); }
-    70% { box-shadow: 0 0 0 15px rgba(94, 36, 78, 0); }
-    100% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0); }
+    0% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0.4); }
+    70% { box-shadow: 0 0 0 15px rgba(10, 103, 223, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0); }
 }
 
 .cta-btn {
-    background: var(--primary);
+    background: var(--primary-light);
     color: #fff !important;
     padding: 14px 35px;
     border-radius: 50px;
@@ -118,8 +128,21 @@
 }
 
 .cta-btn:hover {
-    background: var(--secondary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     transform: scale(1.05);
+    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.4);
+}
+
+.btn-view-courses {
+    background: var(--primary);
+    color: #fff;
+    transition: all 0.3s ease;
+}
+
+.btn-view-courses:hover {
+    background: var(--secondary);
+    color: #fff;
+    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.2);
 }
 </style>
 
@@ -140,14 +163,12 @@
 <section class="py-5 overflow-hidden">
 <div class="container">
     <div class="row align-items-center g-5">
-        <!-- වමේ සිට දකුණට පැමිණේ -->
         <div class="col-md-6 animate-item slide-left-init">
             <img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
                  class="img-fluid rounded shadow-lg"
                  alt="About Image">
         </div>
 
-        <!-- දකුණේ සිට වමට පැමිණේ -->
         <div class="col-md-6 animate-item slide-right-init">
             <h2 class="fw-bold mb-3">Who We Are</h2>
             <p class="text-muted fs-5">
@@ -159,7 +180,7 @@
                 We focus on building skilled professionals who are ready for
                 the global automotive industry.
             </p>
-            <a href="{{ route('courses') }}" class="btn btn-dark btn-lg px-4 rounded-pill">
+            <a href="{{ route('courses') }}" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
                 View Courses
             </a>
         </div>
@@ -177,7 +198,6 @@
 </div>
 
 <div class="row g-4">
-    <!-- කාඩ් එකින් එක Zoom-in වේ -->
     <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
         <div class="about-box text-center">
             <div class="icon-circle">
@@ -245,7 +265,7 @@ document.addEventListener('DOMContentLoaded', function () {
             }
         });
     }, {
-        threshold: 0.15 // Element එකෙන් 15%ක් පෙනෙද්දීම ඇනිමේෂන් එක පටන් ගනී
+        threshold: 0.15 
     });
 
     animatedElements.forEach(el => observer.observe(el));
diff --git a/resources/views/contacts.blade.php b/resources/views/contacts.blade.php
index 5c97db8..7481419 100644
--- a/resources/views/contacts.blade.php
+++ b/resources/views/contacts.blade.php
@@ -6,19 +6,29 @@
 
 <style>
 :root{
-    --primary:#5E244E;
-    --secondary:#8B3A74;
-    --light:#f8f4f7;
+    /* Premium Modern Automotive Palette */
+    --primary: #3E51B8;           /* Tech Blue */
+    --primary-light: #0a67df;     /* Vibrant Electric Blue */
+    --secondary: #BC1A1A;         /* Deep Racing Red */
+    --secondary-hover: #822424;   /* Dark Burnt Red */
+    --accent-dark: #753939;       /* Muted Crimson */
+    --bg-light: #F8FAFC;          /* Soft slate light gray */
+    
+    /* Semantic Adjustments */
+    --text-main: #1E293B;         /* Slate dark grey */
+    --text-muted: #64748B;        /* Neutral gray */
+    --card-border: rgba(62, 81, 184, 0.1);
 }
 
 body {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: 'Segoe UI', Arial, sans-serif;
+    color: var(--text-main);
 }
 
 .hero-contact{
     min-height:50vh;
     background:
-    linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),
+    linear-gradient(rgba(62, 81, 184, 0.85), rgba(117, 57, 57, 0.8)),
     url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg');
     background-size:cover;
     background-position:center;
@@ -33,37 +43,39 @@ body {
     background:#fff;
     border-radius:20px;
     padding:35px;
-    box-shadow: 0 10px 30px rgba(0,0,0,.05);
-    border: 1px solid #efeff4;
+    box-shadow: 0 10px 30px rgba(0,0,0,.04);
+    border: 1px solid var(--card-border);
 }
 
 .form-control{
     border-radius:10px;
     padding:12px;
-    border: 1px solid #ced4da;
+    border: 1px solid #cbd5e1;
     transition: all 0.3s ease;
 }
 
 .form-control:focus {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 0.25rem rgba(94, 36, 78, 0.25);
+    border-color: var(--primary-light);
+    box-shadow: 0 0 0 4px rgba(10, 103, 223, 0.15);
+    outline: 0;
 }
 
 .btn-contact{
-    background:var(--primary);
+    background: var(--primary);
     color:#fff;
     border-radius:10px;
     padding:12px 30px;
     font-weight: 600;
     transition: all 0.3s ease;
     border: none;
+    box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
 }
 
 .btn-contact:hover{
-    background:var(--secondary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     color:#fff;
     transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
+    box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
 }
 
 .info-card{
@@ -72,19 +84,23 @@ body {
     padding:20px;
     text-align:center;
     box-shadow: 0 5px 20px rgba(0,0,0,.04);
-    border: 1px solid #efeff4;
+    border: 1px solid var(--card-border);
     transition:.3s;
 }
 
 .info-card:hover{
     transform:translateY(-5px);
-    border-color: var(--primary);
-    box-shadow: 0 10px 25px rgba(94, 36, 78, 0.08);
+    border-color: var(--primary-light);
+    box-shadow: 0 10px 25px rgba(62, 81, 184, 0.1);
 }
 
- 
 .info-card i {
     color: var(--primary) !important;
+    transition: color 0.3s ease;
+}
+
+.info-card:hover i {
+    color: var(--secondary) !important;
 }
 
 /* ========================================================
@@ -96,17 +112,14 @@ body {
     transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
- 
 .fade-up-init {
     transform: translateY(30px);
 }
 
- 
 .slide-left-init {
     transform: translateX(-40px);
 }
 
- 
 .fade-in-init {
     transform: scale(0.98);
 }
@@ -123,7 +136,7 @@ body {
     <div class="container">
         <div class="animate-item animated fade-up-init">
             <h1 class="fw-bold display-4">Contact Us</h1>
-            <p class="fs-5">We are here to help you. Reach us anytime.</p>
+            <p class="fs-5 text-white-50">We are here to help you. Reach us anytime.</p>
         </div>
     </div>
 </section>
@@ -138,37 +151,34 @@ body {
 <div class="col-md-6 animate-item slide-left-init">
 <div class="contact-box">
 
-<h3 class="mb-4 fw-bold" style="color: #1c1d1f;">Send Message</h3>
+<h3 class="mb-4 fw-bold" style="color: var(--text-main);">Send Message</h3>
 
-
- 
 @if(session('success'))
     <div class="alert alert-success">
         {{ session('success') }}
     </div>
 @endif
 
-
 <form action="{{ route('contact.store') }}" method="POST">
 @csrf
 
 <div class="mb-3">
-    <label class="form-label fw-semibold">Name</label>
+    <label class="form-label fw-semibold text-secondary-emphasis">Name</label>
     <input type="text" name="name" class="form-control" placeholder="Your Name" required>
 </div>
 
 <div class="mb-3">
-    <label class="form-label fw-semibold">Email</label>
+    <label class="form-label fw-semibold text-secondary-emphasis">Email</label>
     <input type="email" name="email" class="form-control" placeholder="Your Email" required>
 </div>
 
 <div class="mb-3">
-    <label class="form-label fw-semibold">Subject</label>
+    <label class="form-label fw-semibold text-secondary-emphasis">Subject</label>
     <input type="text" name="subject" class="form-control" placeholder="Subject" required>
 </div>
 
 <div class="mb-3">
-    <label class="form-label fw-semibold">Message</label>
+    <label class="form-label fw-semibold text-secondary-emphasis">Message</label>
     <textarea name="message" rows="5" class="form-control" placeholder="Your Message" required></textarea>
 </div>
 
@@ -181,7 +191,7 @@ Send Message
 </div>
 </div>
 
- 
+<!-- Info Cards -->
 <div class="col-md-6 animate-item fade-in-init">
 
 <div class="info-card mb-3">
@@ -216,38 +226,18 @@ Send Message
 </section>
 
 <!-- MAP -->
- <section class="pb-5">
-<div class="container">
-
-<!-- <iframe
-  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=place_id:ChIJXdB3Sy_84joRYNze2w86UjQ"
-  width="100%"
-  height="300"
-  style="border:0;border-radius:15px;"
-  allowfullscreen=""
-  loading="lazy">
-</iframe> -->
-
+<section class="pb-5">
+<div class="container animate-item fade-up-init">
 <iframe
   src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk"
   width="100%"
-  height="300"
-  style="border:0;border-radius:15px;"
-  allowfullscreen=""
-  loading="lazy">
-</iframe>
-<!-- <section class="pb-5">
-<div class="container animate-item fade-up-init">
-<iframe
-  src="https://www.google.com/maps/embed/pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk"
-  width="100%"
   height="350"
-  style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.05);"
+  style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.04); border: 1px solid var(--card-border);"
   allowfullscreen=""
   loading="lazy">
 </iframe>
 </div>
-</section> -->
+</section>
 
 <script>
 document.addEventListener('DOMContentLoaded', function () {
@@ -267,5 +257,7 @@ document.addEventListener('DOMContentLoaded', function () {
     animatedElements.forEach(el => observer.observe(el));
 });
 </script>
+|
+
 
 @endsection
\ No newline at end of file
diff --git a/resources/views/courses.blade.php b/resources/views/courses.blade.php
index 16081d5..3293b14 100644
--- a/resources/views/courses.blade.php
+++ b/resources/views/courses.blade.php
@@ -1,60 +1,77 @@
 @extends('layouts.app')
 
-@section('title','Our Courses')
+@section('title', 'Our Courses')
 
 @section('content')
 
 <style>
-:root{
-    --primary:#5E244E;
-    --secondary:#8B3A74;
-    --light:#f8f4f7;
-    --card-border: #efeff4;
-    --text-muted: #6a6f73;
-    --success-green: #1f8a4c;
+:root {
+    /* Premium Modern Automotive Palette (Updated based on your custom inputs) */
+    --primary: #3E51B8;           /* Tech Blue / Main Brand Color */
+    --primary-light: #0a67df;     /* Vibrant Electric Blue */
+    --secondary: #BC1A1A;         /* Deep Racing Red */
+    --secondary-hover: #822424;   /* Dark Burnt Red */
+    --accent-dark: #753939;       /* Muted Crimson */
+    --accent-light: rgba(227, 100, 20, 0.1); /* Soft Amber/Orange tint for badges */
+    --accent-orange: #e36414;     /* Warning/Industrial Orange */
+    --accent-yellow: #FFE618;     /* High-Visibility Electric Yellow */
+    --bg-light: #F8FAFC;          /* Soft slate light gray */
+    
+    /* Semantic Adjustments */
+    --text-main: #1E293B;         /* Slate dark grey */
+    --text-muted: #64748B;        /* Neutral gray */
+    --card-border: rgba(62, 81, 184, 0.1);
+    --shadow-color: rgba(15, 44, 89, 0.05);
+    --success-green: #10B981;     /* Modern emerald green */
 }
 
 body {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: 'Segoe UI', Arial, sans-serif;
+    color: var(--text-main);
+    background-color: #ffffff;
 }
 
+/* ===== Hero Section ===== */
 .hero {
-    background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)), 
+    background-image: linear-gradient(rgba(10, 103, 223, 0.9), rgba(117, 57, 57, 0.85)), 
                       url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     color: #ffffff;
-    padding: 120px 0;
+    padding: 130px 0;
     text-align: center;
 }
 
-.hero h1{
-    font-size:50px;
-    font-weight:700;
+.hero h1 {
+    font-size: 55px;
+    font-weight: 800;
+    text-shadow: 0 2px 15px rgba(0,0,0,0.4);
 }
 
-.hero p{
-    max-width:700px;
-    margin:auto;
-    font-size:18px;
+.hero p {
+    max-width: 700px;
+    margin: auto;
+    font-size: 19px;
+    color: #F1F5F9;
 }
 
-/* --- Search Box Styling --- */
+/* --- Premium Search Box Styling --- */
 .search-box {
-    max-width: 500px;
-    margin: 30px auto 0 auto;
+    max-width: 550px;
+    margin: 35px auto 0 auto;
     position: relative;
     display: flex;
-    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
     overflow: hidden;
     background: #fff;
     border-radius: 100px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .search-box input {
     width: 100%;
-    padding: 15px 25px;
+    padding: 16px 28px;
     border: none;
     outline: none;
     font-size: 16px;
@@ -62,92 +79,111 @@ body {
 }
 
 .search-box button {
-    background: var(--primary);
+    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
     color: #fff;
     border: none;
-    padding: 0 25px;
+    padding: 0 30px;
     cursor: pointer;
-    transition: 0.3s;
+    transition: all 0.3s ease;
     font-size: 18px;
 }
 
 .search-box button:hover {
-    background: var(--secondary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
 }
 
+/* ===== HIGHLY SATISFYING HORIZONTAL COURSE CARDS ===== */
 .course-card {
     border: 1px solid var(--card-border);
-    border-radius: 20px;
     overflow: hidden;
     background: #fff;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: none;
-    scale: .99;
+    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    box-shadow: 0 8px 30px var(--shadow-color);
 }
 
 .course-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
+    transform: translateY(-6px);
+    box-shadow: 0 20px 40px rgba(62, 81, 184, 0.15);
+    border-color: var(--primary-light);
 }
 
 .course-image-wrapper {
-    padding: 16px;
+    padding: 20px;
+    height: 100%;
 }
 
 .course-card img {
-    height: 200px;
+    height: 220px;
     width: 100%;
     object-fit: cover;
-    /* border-radius: 14px; */
+    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.course-card:hover img {
+    transform: scale(1.04);
 }
 
 .course-card .card-body {
-    padding: 24px;
+    padding: 32px 32px 32px 10px;
     display: flex;
     flex-direction: column;
 }
 
+@media (max-width: 767px) {
+    .course-card .card-body {
+        padding: 0 24px 24px 24px;
+    }
+}
+
 .course-title {
-    font-size: 21px;
-    font-weight: 700;
+    font-size: 23px;
+    font-weight: 750;
     line-height: 1.3;
-    color: #1c1d1f;
+    color: var(--primary);
     margin-bottom: 8px;
+    transition: color 0.3s ease;
+}
+
+.course-card:hover .course-title {
+    color: var(--secondary);
 }
 
 .course-author {
     font-size: 14px;
-    color: var(--text-muted);
-    margin-bottom: 12px;
+    font-weight: 600;
+    color: var(--primary-light);
+    margin-bottom: 14px;
 }
 
 .course-short-desc {
-    font-size: 14px;
-    color: #4f5357;
-    margin-bottom: 16px;
-    line-height: 1.5;
+    font-size: 14.5px;
+    color: #556575;
+    margin-bottom: 20px;
+    line-height: 1.6;
 }
 
 .course-meta-row {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 8px;
-    margin-bottom: 14px;
+    gap: 12px;
+    margin-bottom: 18px;
 }
 
 .badge-bestseller {
-    background-color: #ece3f1;
-    color: var(--primary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
+    color: #fff;
     font-weight: 700;
-    font-size: 11px;
-    padding: 3px 10px;
-    border-radius: 4px;
+    font-size: 10.5px;
+    padding: 4px 12px;
+    border-radius: 30px;
     text-transform: uppercase;
+    letter-spacing: 0.05em;
+    box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2);
 }
 
 .rating-star {
-    color: #b4690e;
+    color: #f39c12;
     font-weight: 700;
     font-size: 14px;
     display: flex;
@@ -157,20 +193,21 @@ body {
 
 .rating-count {
     color: var(--text-muted);
-    font-size: 13px;
+    font-size: 13.5px;
+    font-weight: 500;
 }
 
 .course-features {
     display: flex;
-    gap: 15px;
-    font-size: 13px;
+    gap: 20px;
+    font-size: 13.5px;
     color: var(--success-green);
-    margin-bottom: 20px;
-    font-weight: 500;
+    margin-bottom: 24px;
+    font-weight: 600;
 }
 
 .course-features span i {
-    margin-right: 4px;
+    margin-right: 6px;
 }
 
 .course-footer {
@@ -178,116 +215,134 @@ body {
 }
 
 .read-btn {
-    background: var(--primary);
+    background: var(--primary-light);
     color: #fff;
-    padding: 12px 20px;
+    padding: 13px 28px;
     font-weight: 600;
-    border-radius: 8px;
     font-size: 15px;
-    transition: 0.2s;
-    border: none;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    border: 2px solid transparent;
     text-decoration: none;
     display: block;
     text-align: center;
+    box-shadow: 0 4px 12px rgba(10, 103, 223, 0.2);
 }
 
 .read-btn:hover {
-    background: var(--secondary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     color: #fff;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 18px rgba(188, 26, 26, 0.3);
 }
 
 /* --- Modernized Why Study With Us Section --- */
 .features-section {
-    background-color: #f8f9fa;
-    border-radius: 24px;
-    padding: 60px 40px;
-    margin-bottom: 60px;
+    background-color: var(--bg-light);
+    border-radius: 32px;
+    padding: 80px 40px;
+    margin-bottom: 40px;
+    background-image: radial-gradient(rgba(62, 81, 184, 0.04) 1px, transparent 0);
+    background-size: 20px 20px;
 }
 
 .features-section h2 {
-    font-size: 32px;
-    font-weight: 700;
-    color: #1c1d1f;
-    margin-bottom: 40px;
+    font-size: 36px;
+    font-weight: 800;
+    color: var(--primary);
+    margin-bottom: 12px;
+}
+
+.section-divider {
+    height: 4px;
+    width: 65px;
+    background: linear-gradient(90deg, var(--secondary) 0%, var(--accent-yellow) 100%);
+    margin: 0 auto 45px auto;
+    border-radius: 10px;
 }
 
 .feature-box {
     background: #fff;
-    padding: 30px 24px;
-    border-radius: 16px;
+    padding: 40px 28px;
+    border-radius: 24px;
     height: 100%;
-    transition: all 0.3s ease;
-    border: 1px solid #efeff4;
+    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    border: 1px solid var(--card-border);
     text-align: left;
+    box-shadow: 0 6px 20px rgba(62, 81, 184, 0.02);
 }
 
 .feature-icon-wrapper {
-    width: 50px;
-    height: 50px;
-    background-color: #ece3f1;
+    width: 58px;
+    height: 58px;
+    background-color: rgba(62, 81, 184, 0.08);
     color: var(--primary);
-    border-radius: 12px;
+    border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 22px;
-    margin-bottom: 20px;
-    transition: transform 0.5s ease;  
+    font-size: 24px;
+    margin-bottom: 24px;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
- 
 .feature-box:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
-    border-color: var(--primary);
+    transform: translateY(-8px);
+    box-shadow: 0 15px 35px rgba(62, 81, 184, 0.12);
+    border-color: rgba(188, 26, 26, 0.2);
 }
 
- 
-.feature-box:hover .feature-icon-wrapper i {
-    transform: rotate(360deg);
+.feature-box:hover .feature-icon-wrapper {
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
+    color: #fff;
+    transform: rotateY(180deg);
+    box-shadow: 0 8px 15px rgba(188, 26, 26, 0.25);
 }
 
 .feature-icon-wrapper i {
-    transition: transform 0.5s ease;  
+    transition: transform 0.4s ease;
+}
+
+.feature-box:hover .feature-icon-wrapper i {
+    transform: rotateY(-180deg);
 }
 
 .feature-box h5 {
-    font-size: 18px;
+    font-size: 19px;
     font-weight: 700;
-    color: #1c1d1f;
-    margin-bottom: 10px;
+    color: var(--primary);
+    margin-bottom: 12px;
 }
 
 .feature-box p {
-    font-size: 14px;
+    font-size: 14.5px;
     color: var(--text-muted);
     margin-bottom: 0;
-    line-height: 1.5;
+    line-height: 1.6;
 }
 
 #noResults {
     font-size: 18px;
     font-weight: bold;
-    color: #666;
-    margin-top: 20px;
+    color: var(--text-muted);
+    margin-top: 30px;
 }
 
 /* ========================================================
    Custom Pure CSS Animations (Scroll Animations)
    ======================================================== */
-/* .animate-on-scroll {
+.animate-on-scroll {
     opacity: 0;
-    transition: all 0.8s ease-out;
+    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .fade-up-init {
-    transform: translateY(30px);
+    transform: translateY(40px);
 }
 
 .animate-on-scroll.animated {
     opacity: 1;
     transform: translateY(0);
-} */
+}
 </style>
 
 {{-- Hero --}}
@@ -406,7 +461,7 @@ $courses=[
                             <div class="col-md-8">
                                 <div class="card-body">
                                     <h4 class="course-title">{{ $course['title'] }}</h4>
-                                    <div class="course-author">{{ $course['author'] }}</div>
+                                    <div class="course-author"><i class="fa-solid fa-user-gear me-1"></i> {{ $course['author'] }}</div>
                                     
                                     <p class="course-short-desc">{{ $course['desc'] }}</p>
                                     
@@ -443,6 +498,7 @@ $courses=[
     <div class="container">
         <div class="features-section text-center animate-on-scroll fade-up-init">
             <h2>Why Study With Us?</h2>
+            <div class="section-divider"></div>
             
             <div class="row g-4">
                 <div class="col-xl-3 col-md-6">
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 6c6635c..94cd23a 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -17,7 +17,7 @@
         }
 
         .navbar {
-            background: #1D2861;
+            background:  #3E51B8;
             z-index: 1000;
             position: fixed;
             top: 0;
@@ -34,7 +34,7 @@
         }
 
         .navbar-brand:hover {
-            color: #FFEA85;
+            color: #f4f4f8;
         }
 
         .nav-link {
@@ -52,7 +52,7 @@
         }
 
         .site-footer {
-            background: #1D2861;
+            background: #182EA4;
             color: #ffffff;
             padding: 60px 0 30px;
         }
diff --git a/resources/views/students.blade.php b/resources/views/students.blade.php
index af4d44e..98a8188 100644
--- a/resources/views/students.blade.php
+++ b/resources/views/students.blade.php
@@ -5,74 +5,88 @@
 @section('content')
 
 <style>
-:root{
-    --primary:#5E244E;
-    --secondary:#8B3A74;
-    --light:#f8f4f7;
+:root {
+    /* Premium Modern Automotive Palette matched from previous page */
+    --primary: #3E51B8;           /* Tech Blue */
+    --primary-light: #0a67df;     /* Vibrant Electric Blue */
+    --secondary: #BC1A1A;         /* Deep Racing Red */
+    --secondary-hover: #822424;   /* Dark Burnt Red */
+    --accent-dark: #753939;       /* Muted Crimson */
+    --accent-orange: #e36414;     /* Warning/Industrial Orange */
+    --accent-yellow: #FFE618;     /* High-Visibility Electric Yellow */
+    --bg-light: #F8FAFC;          /* Soft slate light gray */
+    
+    /* Semantic Adjustments */
+    --text-main: #1E293B;         /* Slate dark grey */
+    --text-muted: #64748B;        /* Neutral gray */
+    --card-border: rgba(62, 81, 184, 0.1);
 }
 
 body {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: 'Segoe UI', Arial, sans-serif;
+    color: var(--text-main);
 }
 
-.hero{
-    background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
+.hero {
+    background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(117, 57, 57, 0.8)),
     url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
-    background-size:cover;
-    background-position:center;
-    color:#fff;
-    padding:80px 0; 
-    text-align:center;
+    background-size: cover;
+    background-position: center;
+    color: #fff;
+    padding: 80px 0; 
+    text-align: center;
 }
 
-.portal-card{
-    border:none;
-    border-radius:15px;
-    transition:.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-    box-shadow:0 5px 20px rgba(0,0,0,.08);
-    border: 1px solid #efeff4;
+.portal-card {
+    border: none;
+    border-radius: 15px;
+    transition: .4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    box-shadow: 0 5px 20px rgba(0,0,0,.04);
+    border: 1px solid var(--card-border);
+    cursor: pointer;
 }
 
-.portal-card:hover{
-    transform:translateY(-8px);
-    border-color: var(--primary);
-    box-shadow: 0 15px 30px rgba(94, 36, 78, 0.1);
+.portal-card:hover {
+    transform: translateY(-8px);
+    border-color: #5f3131;
+    box-shadow: 0 15px 30px rgba(62, 81, 184, 0.12);
 }
 
-.portal-icon{
-    width:70px;
-    height:70px;
-    background:#5E244E;
-    color:#fff;
-    border-radius:50%;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    font-size:28px;
-    margin:auto;
+.portal-icon {
+    width: 70px;
+    height: 70px;
+    background: #4361ba;
+    color: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    margin: auto;
     transition: 0.4s ease;
 }
 
 .portal-card:hover .portal-icon {
-    background: var(--secondary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     transform: scale(1.1);
+    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
 }
 
-.btn-portal{
-    background:#5E244E;
-    color:#fff;
-    padding:12px 35px;
+.btn-portal {
+    background: var(--primary-light);
+    color: #fff;
+    padding: 12px 35px;
     border: none;
     border-radius: 8px;
     font-weight: 600;
     transition: all 0.3s ease;
 }
 
-.btn-portal:hover{
-    background:#8B3A74;
-    color:#fff;
+.btn-portal:hover {
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
+    color: #fff;
     transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
+    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
 }
  
 .modal-content {
@@ -81,8 +95,6 @@ body {
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }
 
-
-
 .modal.fade .modal-dialog {
     transform: scale(0.85);
     transition: transform 0.3s ease-out;
@@ -131,14 +143,14 @@ body {
 }
  
 .form-control:focus {
-    border-color: var(--secondary);
-    box-shadow: 0 0 0 4px rgba(139, 58, 116, 0.12);
+    border-color: var(--primary-light);
+    box-shadow: 0 0 0 4px rgba(10, 103, 223, 0.15);
     outline: 0;
 }
 
 .input-group:focus-within .input-group-text {
-    border-color: var(--secondary);
-    color: var(--secondary);
+    border-color: var(--primary-light);
+    color: var(--primary-light);
 }
 
 .modal-footer {
@@ -170,17 +182,17 @@ body {
     border: none;
     font-weight: 600;
     padding: 10px 0;
-    box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2);
+    box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
     transition: all 0.2s;
     width: 100%;
     border-radius: 8px;
 }
 
 .btn-modal-login:hover {
-    background: var(--secondary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     color: #fff;
     transform: translateY(-1px);
-    box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3);
+    box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
 }
 
 /* ========================================================
@@ -236,7 +248,6 @@ body {
             </p>
         </div>
 
-     
         <div class="row g-4 animate-item fade-in-init">
             <div class="col-md-4">
                 <div class="card portal-card h-100 text-center p-4" onclick="studentlogin()">
@@ -304,11 +315,11 @@ body {
 <!-- QUICK LINKS -->
 <section class="py-5 bg-light overflow-hidden">
     <div class="container">
-        <div class="text-center mb-5 animate-item fade-up-init" onclick="studentlogin()">
+        <div class="text-center mb-5 animate-item fade-up-init">
             <h2 class="fw-bold">Quick Links</h2>
         </div>
 
-        <div class="row text-center animate-item slide-right-init" onclick="studentlogin()">
+        <div class="row text-center animate-item slide-right-init">
             <div class="col-md-3 mb-3">
                 <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Academic Calendar</a>
             </div>
@@ -409,6 +420,4 @@ document.addEventListener('DOMContentLoaded', function () {
 });
 </script>
 
-
-
 @endsection
\ No newline at end of file
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 582535d..3da763b 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -14,23 +14,23 @@
 <style>
 :root {
     /* Modern, Sleek Automotive Palette */
-    --primary: #0F2C59;           /* Deep Navy (Professional, Academic, Trustworthy) */
-    --secondary: #E36414;         /* Electric Industrial Orange (Perfect automotive accent, highly visible) */
-    --secondary-hover: #C5530E;   /* Deeper burnt orange for polished hover effects */
-    --accent-light: #E6FFFA;      /* Ice Blue/Teal Mint tint for readable overlay text */
-    --accent-blue: #3085C3;       /* Premium Tech Blue for badges and active states */
-    --bg-light: #F4F6F9;          /* Soft slate light gray to prevent pure-white eyesore */
+    --primary: #0F2C59;           /* Deep Navy */
+    --secondary: #E36414;         /* Electric Industrial Orange */
+    --secondary-hover: #C5530E;   /* Deeper burnt orange */
+    --accent-light: #E6FFFA;
+    --accent-blue: #3085C3;       /* Premium Tech Blue */
+    --bg-light: #F4F6F9;          /* Soft slate light gray */
     
     /* Semantic Adjustments */
-    --text-main: #1E293B;         /* Slate dark grey (much easier to read than bright blue) */
-    --text-muted: #64748B;        /* Neutral gray for subtitles */
+    --text-main: #1E293B;         
+    --text-muted: #64748B;        
     --card-border: rgba(15, 44, 89, 0.08);
     --shadow-color: rgba(15, 44, 89, 0.06);
 }
 
 /* ===== Global Improvements ===== */
 body {
-    font-family: 'Segoe UI', Arial, sans-serif; /* Cleaner modern font stack */
+    font-family: 'Segoe UI', Arial, sans-serif;
     color: var(--text-main);
     background-color: #ffffff;
 }
@@ -47,13 +47,13 @@ body {
 
 /* ===== Premium Theme Buttons ===== */
 .btn-theme {
-    background: #3B4E73;
+    background: #305CB1;
     color: #fff;
-    border: 2px solid #FFF;
     padding: 14px 35px;
     border-radius: 40px;
     font-weight: 600;
     transition: all 0.3s ease;
+    font-weight: bolder;
 }
 
 .btn-theme:hover {
@@ -101,7 +101,6 @@ body {
 /* ===== Hero Section ===== */
 .hero {
     height: 650px;
-    /* Deep blue to slate blue gradient for rich tech aesthetic */
     background: linear-gradient(rgba(207, 226, 255, 0.88), rgba(0, 9, 15, 0.75)), url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80');
     background-position: center;
     background-size: cover;
@@ -130,51 +129,52 @@ body {
     color: #E2E8F0;
 }
 
-/* ===== Academic Courses Section ===== */
+/* ===== NEW & IMPROVED COURSES CARD DESIGN ===== */
 .courses-section {
     background-color: var(--bg-light);
 }
 
 .course-card {
     border: 1px solid var(--card-border);
-    /* border-radius: 16px; */
+    /* border-radius: 12px !important; */
     overflow: hidden;
     background: #fff;
-    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-    box-shadow: 0 8px 30px var(--shadow-color);
+    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    box-shadow: 0 5px 15px var(--shadow-color);
 }
 
 .course-card:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 16px 40px rgba(15, 44, 89, 0.12);
-    border-color: rgba(48, 133, 195, 0.3);
+    transform: translateY(-6px);
+    box-shadow: 0 15px 35px rgba(15, 44, 89, 0.12);
+    border-color: rgba(48, 133, 195, 0.25);
 }
 
 .course-image-wrapper {
     position: relative;
     overflow: hidden;
+    height: 210px;
 }
 
 .course-card img {
-    height: 220px;
+    height: 100%;
     width: 100%;
     object-fit: cover;
-    transition: transform 0.5s ease;
+    transition: transform 0.6s ease;
 }
 
 .course-card:hover img {
-    transform: scale(1.05);
+    transform: scale(1.06);
 }
 
 .badge-floating {
     position: absolute;
-    top: 20px;
-    left: 20px;
+    top: 15px;
+    left: 15px;
     background: #BC1A1A;
     color: #fff;
     font-weight: 700;
     font-size: 11px;
-    padding: 6px 14px;
+    padding: 5px 12px;
     border-radius: 30px;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -184,20 +184,29 @@ body {
 
 .course-card .card-body {
     padding: 24px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
 }
 
 .course-title {
-    font-size: 22px;
+    font-size: 20px;
     font-weight: 700;
     color: var(--primary);
-    margin-bottom: 10px;
+    margin-bottom: 8px;
+    line-height: 1.4;
+    transition: color 0.3s ease;
+}
+
+.course-card:hover .course-title {
+    color: #914040;
 }
 
 .course-author {
-    font-size: 14px;
+    font-size: 13.5px;
     font-weight: 500;
     color: var(--accent-blue);
-    margin-bottom: 15px;
+    margin-bottom: 12px;
     display: flex;
     align-items: center;
     gap: 6px;
@@ -207,14 +216,14 @@ body {
     font-size: 14px;
     color: #556575;
     line-height: 1.6;
-    margin-bottom: 20px;
+    margin-bottom: 15px;
 }
 
 .course-features-container {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    margin-bottom: 20px;
+    margin-bottom: 15px;
 }
 
 .feature-pill {
@@ -222,20 +231,24 @@ body {
     color: var(--accent-blue);
     font-size: 12px;
     font-weight: 600;
-    padding: 6px 12px;
-    border-radius: 8px;
+    padding: 4px 10px;
+    border-radius: 6px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }
 
+.course-footer {
+    margin-top: auto; /* Pushes the footer area to the exact bottom of the card */
+    padding-top: 15px;
+    border-top: 1px solid rgba(15, 44, 89, 0.08);
+}
+
 .course-meta-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding-top: 15px;
-    border-top: 1px solid rgba(15, 44, 89, 0.08);
-    margin-bottom: 20px;
+    margin-bottom: 15px;
 }
 
 .rating-star {
@@ -250,12 +263,12 @@ body {
 }
 
 .read-btn {
-    background: transparent;
-    color: var(--primary);
-    border: 2px solid var(--primary);
-    padding: 12px 24px;
+    background: #3E51B8;
+    color: white;
+    /* border: 2px solid var(--primary); */
+    padding: 10px 20px;
     font-weight: 700;
-    border-radius: 30px;
+    border-radius: 6px;
     font-size: 14px;
     transition: all 0.3s ease;
     text-decoration: none;
@@ -264,8 +277,8 @@ body {
 }
 
 .course-card:hover .read-btn {
-    background: var(--primary);
-    border-color: var(--primary);
+    background: #0a67df;
+    border-color: #0a67df;
     color: #fff;
 }
 
@@ -276,18 +289,11 @@ body {
     left: 0; 
     width: 100%; 
     height: 100%;
-    background: linear-gradient(rgba(81, 78, 117, 0.94), rgba(0, 9, 15, 0.88)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80');
+    background: linear-gradient(rgba(117, 57, 57, 0.94), rgba(0, 9, 15, 0.88)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80');
     background-position: center;
     background-size: cover;
     z-index: 1;
 }
-/* .why-overlay {
-    position: absolute;
-    top: 0; left: 0; width: 100%; height: 100%;
-    background: linear-gradient(rgba(207, 226, 255, 0.88), rgba(0, 9, 15, 0.75)), url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80')
-    
-    z-index: 1;
-} */
 
 .why-content-wrapper {
     position: relative;
@@ -358,7 +364,7 @@ body {
             <p class="mb-4">Driving Innovation Through Education, Research &amp; Technology</p>
 
             <div class="d-flex flex-wrap justify-content-center gap-3" >
-                <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme" style="background: #822424;">
+                <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme" style="background: #822424;border: 2px solid #FFF;">
                     <i class="fa-solid fa-user-plus me-2" ></i>Apply Now
                 </a>
                 <a href="/courses" class="btn btn-outline-theme">
@@ -372,13 +378,13 @@ body {
     </div>
 </section>
 
-{{-- ===================== COURSES SECTION ===================== --}}
+{{-- ===================== IMPROVED COURSES SECTION ===================== --}}
 <section class="section courses-section" aria-labelledby="courses-heading">
     <div class="container">
         
         <div class="text-center mb-5 animate-on-scroll fade-up-init">
             <span class="text-uppercase fw-bold small d-block mb-2" style="color: var(--secondary); letter-spacing: 0.1em;">Academic Programs</span>
-            <h2 id="courses-heading" class="display-5 mb-2">Our Top Courses</h2>
+            <h2 id="courses-heading" class="display-5 mb-2" style="font-weight: normal;">Our Top Courses</h2>
             <p class="text-muted fs-5">Explore our professional, industry-recognized automotive engineering curriculums.</p>
         </div>
 
@@ -416,27 +422,28 @@ body {
 
         <div class="row g-4 mb-5">
             @foreach($courses as $key => $course)
-                <div class="col-lg-4 col-md-6 animate-on-scroll fade-up-init" style="transition-delay: {{ $key * 100 }}ms;">
-                    <div class="card course-card h-100">
+                <div class="col-lg-4 col-md-6 d-flex align-items-stretch animate-on-scroll fade-up-init" style="transition-delay: {{ $key * 100 }}ms;">
+                    <div class="card course-card w-100 d-flex flex-column">
+                        
                         <div class="course-image-wrapper">
                             <span class="badge-floating">{{ $course['badge'] }}</span>
                             <img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy">
                         </div>
-                        <div class="card-body d-flex flex-column justify-content-between">
-                            <div>
-                                <h4 class="course-title">{{ $course['title'] }}</h4>
-                                <div class="course-author">
-                                    <i class="fa-solid fa-graduation-cap"></i> {{ $course['author'] }}
-                                </div>
-                                <p class="course-short-desc">{{ $course['desc'] }}</p>
-                                
-                                <div class="course-features-container">
-                                    <span class="feature-pill"><i class="fas fa-tools"></i> Practical Labs</span>
-                                    <span class="feature-pill"><i class="fas fa-certificate"></i> Accredited</span>
-                                </div>
+                        
+                        <div class="card-body">
+                            <h4 class="course-title">{{ $course['title'] }}</h4>
+                            <div class="course-author">
+                                <i class="fa-solid fa-graduation-cap"></i> {{ $course['author'] }}
+                            </div>
+                            <p class="course-short-desc">{{ $course['desc'] }}</p>
+                            
+                            <div class="course-features-container">
+                                <span class="feature-pill"><i class="fas fa-tools"></i> Practical Labs</span>
+                                <span class="feature-pill"><i class="fas fa-certificate"></i> Accredited</span>
                             </div>
 
-                            <div>
+                            <!-- Footer wrapped inside card-body with margin-top: auto to perfectly align elements -->
+                            <div class="course-footer">
                                 <div class="course-meta-row">
                                     <span class="rating-star">
                                         <i class="fas fa-star me-1"></i>{{ $course['rating'] }}
@@ -447,6 +454,7 @@ body {
                                 <a href="/courses" class="read-btn">View Details</a>
                             </div>
                         </div>
+
                     </div>
                 </div>
             @endforeach
@@ -461,48 +469,8 @@ body {
     </div>
 </section>
 
+
 {{-- ===================== WHY CHOOSE US ===================== --}}
-<!-- <section class="section why-section text-white" aria-labelledby="why-us-heading">
-    <div class="why-overlay"></div>
-    <div class="position-absolute top-0 start-0 w-100 h-100">
-        <img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=1600&q=80" 
-             alt="Background Lab" class="w-100 h-100" style="object-fit: cover; opacity: 0.15;">
-    </div>
-
-    <div class="container why-content-wrapper">
-        <div class="text-center mb-5 animate-on-scroll fade-up-init">
-            <h2 id="why-us-heading" class="display-5 text-white mb-0">Why Choose Us?</h2>
-            <div class="section-divider"></div>
-        </div>
-
-        <div class="row g-4 justify-content-center animate-on-scroll fade-up-init">
-            <div class="col-md-6 col-lg-4">
-                <div class="custom-feature-card h-100">
-                    <div class="icon-box"><i class="fa-solid fa-flask-vial fs-4"></i></div>
-                    <h4 class="text-white fs-5 mb-2">Modern Laboratories</h4>
-                    <p class="text-white-50 small mb-0">State-of-the-art facilities equipped with latest industrial testing tools.</p>
-                </div>
-            </div>
-
-            <div class="col-md-6 col-lg-4">
-                <div class="custom-feature-card h-100">
-                    <div class="icon-box"><i class="fa-solid fa-graduation-cap fs-4"></i></div>
-                    <h4 class="text-white fs-5 mb-2">Qualified Lecturers</h4>
-                    <p class="text-white-50 small mb-0">Learn directly from veteran automotive engineers and researchers.</p>
-                </div>
-            </div>
-
-            <div class="col-md-6 col-lg-4">
-                <div class="custom-feature-card h-100">
-                    <div class="icon-box"><i class="fa-solid fa-car fs-4"></i></div>
-                    <h4 class="text-white fs-5 mb-2">Hands-on Training</h4>
-                    <p class="text-white-50 small mb-0">Gain real-world diagnostics experience inside our dedicated workshop floors.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</section> -->
-
 <section class="section why-section text-white position-relative overflow-hidden" aria-labelledby="why-us-heading" style="background-attachment: fixed;">
     <div class="why-overlay"></div>
     <div class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 0;">
@@ -513,11 +481,9 @@ body {
     <div class="container why-content-wrapper position-relative" style="z-index: 2;">
         <div class="text-center mb-5 animate-on-scroll fade-up-init">
             <h2 id="why-us-heading" class="display-5 text-white mb-0 fw-bold" style="letter-spacing: -0.02em;">Why Choose Us?</h2>
-            <!-- <div class="section-divider" style="transform: scaleX(1.2);"></div> -->
         </div>
 
         <div class="row g-4 justify-content-center animate-on-scroll fade-up-init">
-            {{-- Modern Laboratories --}}
             <div class="col-md-6 col-lg-4">
                 <div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
                     <div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;">
@@ -528,7 +494,6 @@ body {
                 </div>
             </div>
 
-            {{-- Qualified Lecturers --}}
             <div class="col-md-6 col-lg-4">
                 <div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
                     <div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;">
@@ -539,7 +504,6 @@ body {
                 </div>
             </div>
 
-            {{-- Hands-on Training --}}
             <div class="col-md-6 col-lg-4">
                 <div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
                     <div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;">