From 37cd68f170a002276c8a3fa37c72dd79192afe2d Mon Sep 17 00:00:00 2001
From: imadhigp <imadhigp@gmail.com>
Date: Fri, 17 Jul 2026 17:01:32 +0530
Subject: [PATCH] change themes blue and red

---
 resources/views/layouts/app.blade.php |  75 ++--
 resources/views/welcome.blade.php     | 600 ++++++++++++--------------
 2 files changed, 328 insertions(+), 347 deletions(-)

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 9eb751d..6c6635c 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -12,13 +12,12 @@
     <style>
         body {
             font-family: 'Segoe UI', sans-serif;
-            background: #f5f7fb;
-           
+            background: #F6F6F6;
             padding-top: 56px; 
         }
 
         .navbar {
-            background: #5E244E;
+            background: #1D2861;
             z-index: 1000;
             position: fixed;
             top: 0;
@@ -35,37 +34,37 @@
         }
 
         .navbar-brand:hover {
-            color: #ffc107;
+            color: #FFEA85;
         }
 
         .nav-link {
-            color: rgba(255, 255, 255, 0.85) !important;
+            color: rgba(255, 255, 255, 0.9) !important;
             margin-left: 20px;
             transition: 0.2s ease;
-            font-weight:bold;
-
+            font-weight: bold;
         }
  
         .nav-link:hover,
         .nav-link.active-page {
-            color: #ffc107 !important;
-            font-weight:bold;
+            /* color: #FFEA85 !important; */
+           color: #FF4040FC !important;
+            font-weight: bold;
         }
 
         .site-footer {
-            background: #2F1027;
-            color: #f1e9ee;
+            background: #1D2861;
+            color: #ffffff;
             padding: 60px 0 30px;
         }
 
         .site-footer h4 {
-            color: #fff;
+            color: #FFEA85;
             font-weight: 700;
             margin-bottom: 18px;
         }
 
         .site-footer p {
-            color: #d8c7d3;
+            color: #f1f3f9;
             line-height: 1.6;
         }
 
@@ -80,7 +79,7 @@
         }
         
         .user-dropdown-toggle:hover {
-            color: #ffc107;
+            color: #FFEA85;
         }
 
         .user-profile-name {
@@ -97,48 +96,61 @@
         }
 
         .footer-links a {
-            color: #d8c7d3;
+            color: #f1f3f9;
             text-decoration: none;
             transition: .2s;
         }
 
         .footer-links a:hover {
-            color: #FFC107;
+            color: #FFEA85;
             padding-left: 4px;
         }
 
         .footer-contact li {
             margin-bottom: 14px;
-            color: #d8c7d3;
+            color: #f1f3f9;
             display: flex;
             align-items: flex-start;
             gap: 10px;
         }
 
         .footer-contact i {
-            color: #FFC107;
+            color: #FFEA85;
             margin-top: 3px;
         }
 
         .footer-contact a {
-            color: #d8c7d3;
+            color: #f1f3f9;
             text-decoration: none;
         }
 
         .footer-contact a:hover {
-            color: #FFC107;
+            color: #FFEA85;
         }
 
         .site-footer hr {
-            border-color: rgba(255,255,255,.15);
+            border-color: rgba(255,255,255,.2);
             margin: 40px 0 20px;
         }
 
         .footer-bottom {
-            color: #b8a6b3;
+            color: #e2e5f3;
             font-size: 14px;
         }
 
+        /* Custom Theme Overrides for Buttons */
+        .btn-theme-register {
+            background-color: #F73F52;
+            color: white;
+            border: none;
+            transition: background-color 0.2s;
+        }
+
+        .btn-theme-register:hover {
+            background-color: #df2c3e;
+            color: white;
+        }
+
         .animate {
             animation-duration: 0.2s;
             animation-fill-mode: both;
@@ -160,10 +172,10 @@
         }
 
         @media (min-width: 1400px) {
-  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
-    max-width: 1435px;
-  }
-}
+            .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
+                max-width: 1435px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -208,7 +220,7 @@
                             $displayName = Auth::user()->first_name . ' ' . Auth::user()->last_name;
                         @endphp
                         <div class="dropdown" style="padding-left:325px;">
-                            <a class="user-dropdown-toggle  text-white" 
+                            <a class="user-dropdown-toggle text-white" 
                                href="#" 
                                role="button" 
                                id="userMenu" 
@@ -222,7 +234,7 @@
                             <ul class="dropdown-menu dropdown-menu-md-end shadow animate slideIn" aria-labelledby="userMenu">
                                 <li>
                                     <a class="dropdown-item" href="{{ route('profile.view') }}">
-                                        <i class="fa-solid fa-user "></i> Profile
+                                        <i class="fa-solid fa-user"></i> Profile
                                     </a>
                                 </li>
                                 <li><hr class="dropdown-divider"></li>
@@ -236,7 +248,8 @@
                     @else
                         <div class="d-flex gap-2" style="padding-left:214px;">
                             <a href="/signin" class="btn btn-outline-light btn-sm px-3">Sign In</a>
-                            <a href="/signup" class="btn btn-warning btn-sm px-3">Register</a>
+                            <!-- Swapped btn-warning for our new custom primary brand color button -->
+                            <a href="/signup" class="btn btn-theme-register btn-sm px-3" style="background: #822424;border: 2px solid #FFF;">Register</a>
                         </div>
                     @endif
                 </li>
@@ -245,13 +258,11 @@
     </div>
 </nav>
 
-
-
 <main>
     @yield('content')
 </main>
 
-<footer class="site-footer" role="contentinfo" >
+<footer class="site-footer" role="contentinfo">
     <div class="container">
         <div class="row g-4">
             <div class="col-md-4">
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 028627f..582535d 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -12,163 +12,165 @@
 @section('content')
 
 <style>
-:root{
-    --primary:#5E244E;
-    --secondary:#8B3A74;
-    --light:#F8F4F7;
-    --dark:#2F1027;
-    --gold:#FFC107;
-    --card-border: rgba(94, 36, 78, 0.06);
-    --text-muted: #6a6f73;
-    --success-green: #1f8a4c;
-    --accent-blue: #17a2b8;
+: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 */
     
-    /* Why Choose Us Premium Theme Colors */
-    --why-primary: #1A052E;
-    --why-gold: #FFC107;
-    --why-dark: #0F031C;
+    /* Semantic Adjustments */
+    --text-main: #1E293B;         /* Slate dark grey (much easier to read than bright blue) */
+    --text-muted: #64748B;        /* Neutral gray for subtitles */
+    --card-border: rgba(15, 44, 89, 0.08);
+    --shadow-color: rgba(15, 44, 89, 0.06);
 }
 
-/* ===== Font & Base ===== */
-body{
-    font-family: Arial, Helvetica, sans-serif;
+/* ===== Global Improvements ===== */
+body {
+    font-family: 'Segoe UI', Arial, sans-serif; /* Cleaner modern font stack */
+    color: var(--text-main);
+    background-color: #ffffff;
 }
 
-.section{
-    padding:90px 0;
+.section {
+    padding: 53px 0;
 }
 
-.section-title, h2, h3, h4, h5, h6{
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight:700;
-    color:#5E244E;
+.section-title, h2, h3, h4, h5, h6 {
+    font-family: 'Segoe UI', Arial, sans-serif;
+    font-weight: 700;
+    color: var(--primary);
 }
 
-/* ===== Buttons ===== */
-.btn-theme{
-    background:#5E244E;
-    color:#fff;
-    border:2px solid #5E244E;
-    padding:14px 35px;
-    border-radius:40px;
-    font-weight:600;
-    transition:.3s;
+/* ===== Premium Theme Buttons ===== */
+.btn-theme {
+    background: #3B4E73;
+    color: #fff;
+    border: 2px solid #FFF;
+    padding: 14px 35px;
+    border-radius: 40px;
+    font-weight: 600;
+    transition: all 0.3s ease;
 }
 
-.btn-theme:hover{
-    background:#8B3A74;
-    border-color:#8B3A74;
-    color:#fff;
-    transform:translateY(-3px);
+.btn-theme:hover {
+    background: var(--secondary-hover);
+    border-color: var(--secondary-hover);
+    color: #fff;
+    transform: translateY(-3px);
+    box-shadow: 0 8px 20px rgba(227, 100, 20, 0.3);
 }
 
-.btn-outline-theme{
-    background:transparent;
-    color:#fff;
-    border:2px solid #fff;
-    padding:12px 32px;
-    border-radius:40px;
-    font-weight:600;
-    transition:.3s;
+.btn-outline-theme {
+    background: transparent;
+    color: #fff;
+    border: 2px solid #fff;
+    padding: 12px 32px;
+    border-radius: 40px;
+    font-weight: 600;
+    transition: all 0.3s ease;
 }
 
-.btn-outline-theme:hover{
-    background:#fff;
-    color:#5E244E;
+.btn-outline-theme:hover {
+    background: #fff;
+    color: var(--primary);
+    transform: translateY(-3px);
 }
 
-.btn-outline-light-custom{
-    background:#FFC107;
-    color:#000;
-    border:2px solid #FFC107;
-    padding:12px 32px;
-    border-radius:40px;
-    font-weight:600;
-    transition:.3s;
+.btn-outline-light-custom {
+    background: #f2e862;
+    color: #000000;
+    border: 2px solid rgba(255, 255, 255, 0.25);
+    padding: 12px 32px;
+    border-radius: 40px;
+    font-weight: 600;
+    backdrop-filter: blur(5px);
+    transition: all 0.3s ease;
 }
 
-.btn-outline-light-custom:hover{
-    background:#ffcd39;
-    border-color:#ffcd39;
-    color:#000;
+.btn-outline-light-custom:hover {
+    background: #fff;
+    color: var(--primary);
+    border-color: #fff;
+    transform: translateY(-3px);
 }
 
-/* ===== Hero ===== */
+/* ===== Hero Section ===== */
 .hero {
-    height:650px;
-    background: linear-gradient(rgba(0, 0, 0, 0.65),rgba(30,10,25,.65)),
-                url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80');
-    background-size: cover;
+    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;
 }  
 
-.hero-content{
-    height:100%;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    flex-direction:column;
-    color:#fff;
+.hero-content {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: #fff;
     padding-top: 38px;
 }
 
-.hero h1{
-    font-size:60px;
-    font-weight:700;
-    margin-top: 75px;
+.hero h1 {
+    font-size: 60px;
+    font-weight: 800;
+    margin-top: -87px;
+    text-shadow: 0 2px 15px rgba(0,0,0,0.3);
 }
 
-.hero p{
-    font-size:22px;
-    max-width:700px;
+.hero p {
+    font-size: 22px;
+    max-width: 700px;
+    color: #E2E8F0;
 }
 
-/* ===== PREMIUM COURSES SECTION (NEW CONCEPT) ===== */
+/* ===== Academic Courses Section ===== */
 .courses-section {
-    background-color: #fbfafc;
+    background-color: var(--bg-light);
 }
 
 .course-card {
     border: 1px solid var(--card-border);
-    /* border-radius: 24px; */
+    /* border-radius: 16px; */
     overflow: hidden;
     background: #fff;
     transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-    box-shadow: 0 10px 30px rgba(94, 36, 78, 0.02);
+    box-shadow: 0 8px 30px var(--shadow-color);
 }
 
 .course-card:hover {
     transform: translateY(-8px);
-    box-shadow: 0 20px 40px rgba(94, 36, 78, 0.08);
-    border-color: rgba(94, 36, 78, 0.15);
+    box-shadow: 0 16px 40px rgba(15, 44, 89, 0.12);
+    border-color: rgba(48, 133, 195, 0.3);
 }
 
 .course-image-wrapper {
     position: relative;
-    padding: 12px;
     overflow: hidden;
 }
 
 .course-card img {
-    height: 200px;
+    height: 220px;
     width: 100%;
     object-fit: cover;
-    /* border-radius: 18px; */
-    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition: transform 0.5s ease;
 }
 
 .course-card:hover img {
-    transform: scale(1.04);
+    transform: scale(1.05);
 }
 
-/* Floating Badge with glass effect */
 .badge-floating {
     position: absolute;
-    top: 24px;
-    left: 24px;
-    background: rgba(94, 36, 78, 0.85);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+    top: 20px;
+    left: 20px;
+    background: #BC1A1A;
     color: #fff;
     font-weight: 700;
     font-size: 11px;
@@ -176,36 +178,26 @@ body{
     border-radius: 30px;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    box-shadow: 0 4px 15px rgba(94, 36, 78, 0.15);
     z-index: 2;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
 }
 
 .course-card .card-body {
     padding: 24px;
-    padding-top: 12px;
-    display: flex;
-    flex-direction: column;
-    text-align: left;
 }
 
 .course-title {
-    font-size: 21px;
-    font-weight: 800;
-    line-height: 1.3;
-    color: var(--dark);
-    margin-bottom: 8px;
-    transition: color 0.3s ease;
-}
-
-.course-card:hover .course-title {
-    color: var(--secondary);
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--primary);
+    margin-bottom: 10px;
 }
 
 .course-author {
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 500;
-    color: var(--text-muted);
-    margin-bottom: 16px;
+    color: var(--accent-blue);
+    margin-bottom: 15px;
     display: flex;
     align-items: center;
     gap: 6px;
@@ -213,12 +205,11 @@ body{
 
 .course-short-desc {
     font-size: 14px;
-    color: #55595d;
-    margin-bottom: 20px;
+    color: #556575;
     line-height: 1.6;
+    margin-bottom: 20px;
 }
 
-/* Premium Feature Pills */
 .course-features-container {
     display: flex;
     flex-wrap: wrap;
@@ -227,12 +218,12 @@ body{
 }
 
 .feature-pill {
-    background: rgba(31, 138, 76, 0.06);
-    color: var(--success-green);
+    background: rgba(48, 133, 195, 0.08);
+    color: var(--accent-blue);
     font-size: 12px;
     font-weight: 600;
     padding: 6px 12px;
-    border-radius: 10px;
+    border-radius: 8px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
@@ -243,168 +234,152 @@ body{
     align-items: center;
     justify-content: space-between;
     padding-top: 15px;
-    border-top: 1px dashed rgba(94, 36, 78, 0.1);
+    border-top: 1px solid rgba(15, 44, 89, 0.08);
     margin-bottom: 20px;
 }
 
 .rating-star {
-    color: #e5981d;
+    color: #f39c12; 
     font-weight: 700;
     font-size: 14px;
-    display: flex;
-    align-items: center;
-    gap: 4px;
 }
 
 .rating-count {
     color: var(--text-muted);
-    font-size: 13px;
     font-weight: 500;
 }
 
-.course-footer {
-    margin-top: auto;
-}
-
-/* Clean Premium Action Button */
 .read-btn {
     background: transparent;
     color: var(--primary);
     border: 2px solid var(--primary);
-    padding: 11px 30px;
+    padding: 12px 24px;
     font-weight: 700;
     border-radius: 30px;
     font-size: 14px;
     transition: all 0.3s ease;
     text-decoration: none;
-    display: inline-block;
+    display: block;
     text-align: center;
-    width: 100%;
 }
 
-.read-btn:hover {
+.course-card:hover .read-btn {
     background: var(--primary);
+    border-color: var(--primary);
     color: #fff;
-    box-shadow: 0 8px 20px rgba(94, 36, 78, 0.2);
-    transform: translateY(-2px);
 }
 
-/* ===== WHY CHOOSE US ===== */
-.why-section {
-    background: var(--why-primary);
-    overflow-x: hidden;
+/* ===== Why Choose Us ===== */
+.why-overlay {
+    position: absolute;
+    top: 0; 
+    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-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;
+    z-index: 2;
 }
 
-.why-section h2 {
-    color: #fff !important;
-}
-
-.backdrop-blur {
-    background: rgba(255, 255, 255, 0.04);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+.section-divider {
+    height: 4px;
+    width: 60px;
+    background-color: var(--secondary);
+    margin: 15px auto 0 auto;
+    border-radius: 2px;
 }
 
 .custom-feature-card {
-    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    background: rgba(255, 255, 255, 0.43);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    padding: 30px;
+    transition: all 0.3s ease;
 }
 
 .custom-feature-card:hover {
     transform: translateY(-5px);
-    background: rgba(255, 255, 255, 0.08);
-    border-color: rgba(255, 193, 7, 0.3) !important;
+    background: rgba(255, 255, 255, 0.07);
+    border-color: rgba(255, 255, 255, 0.2);
 }
 
-.custom-feature-card .icon-box {
+.icon-box {
+    background: rgba(255, 255, 255, 0.1);
+    color: #FFE618;
+    width: 60px;
+    height: 60px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
     transition: all 0.3s ease;
-    background: rgba(255, 193, 7, 0.1) !important;
-}
-
-.custom-feature-card .icon-box i {
-    color: var(--why-gold) !important;
 }
 
 .custom-feature-card:hover .icon-box {
-    background: var(--why-gold) !important;
-}
-
-.custom-feature-card:hover .icon-box i {
-    color: var(--why-dark) !important;
+    background: white;
+    color: #FFE618;
 }
 
 /* ===== Animations ===== */
 .animate-on-scroll {
     opacity: 0;
-    transition: all 1s ease-out;
-}
-
-.fade-up-init {
-    transform: translateY(40px);
-}
-
-.fade-left-init {
-    transform: translateX(50px);
-}
-
-.fade-right-init {
-    transform: translateX(-50px);
-}
-
-.zoom-in-init {
-    transform: scale(0.9);
+    transition: all 0.8s ease-out;
 }
 
+.fade-up-init { transform: translateY(30px); }
+.zoom-in-init { transform: scale(0.95); }
 .animate-on-scroll.animated {
     opacity: 1;
-    transform: translateY(0) translateX(0) scale(1);
+    transform: translateY(0) scale(1);
 }
-
-.z-2 { z-index: 2; }
-.fw-extrabold { font-weight: 800; }
-.tracking-wider { letter-spacing: 0.15em; }
 </style>
 
 {{-- ===================== HERO ===================== --}}
-<section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction">
-    <div class="container">
+<section class="hero" role="banner" aria-label="Automobile Engineering Academy Introduction">
+    <div class="container h-100">
         <div class="hero-content text-center animate-on-scroll animated fade-up-init">
-            <h1 class="display-4 fw-bold">
-                Automobile Engineering Academy
-            </h1>
-            <p>
-                Driving Innovation Through Education, Research &amp; Technology
-            </p>
+            <h1 class="display-4">Automobile Engineering Academy</h1>
+            <p class="mb-4">Driving Innovation Through Education, Research &amp; Technology</p>
 
-            <div class="d-flex flex-wrap justify-content-center gap-3 mt-3">
-                <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme">
-                    <i class="fa-solid fa-user-plus me-2"></i> Apply Now
+            <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;">
+                    <i class="fa-solid fa-user-plus me-2" ></i>Apply Now
                 </a>
-
                 <a href="/courses" class="btn btn-outline-theme">
-                    <i class="fa-solid fa-book-open me-2"></i> Explore Courses
+                    <i class="fa-solid fa-book-open me-2"></i>Explore Courses
                 </a>
-
                 <a href="mailto:imadhigp@gmail.com" class="btn btn-outline-light-custom">
-                    <i class="fa-solid fa-phone me-2"></i> Contact Admissions
+                    <i class="fa-solid fa-phone me-2"></i>Contact Admissions
                 </a>
             </div>
         </div>
     </div>
 </section>
 
-{{-- ===================== OUR COURSES ===================== --}}
-<section class="section py-5 courses-section" aria-labelledby="courses-heading">
-    <div class="container py-5">
-
+{{-- ===================== 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 tracking-wider fw-bold small mb-2 d-block" style="color: var(--primary) !important;">Academic Programs</span>
-            <h2 id="courses-heading" class="display-5 fw-extrabold mb-3 position-relative d-inline-block">
-                Our Top Courses
-            </h2>  
-            <p class="text-muted mt-3 fs-5">
-                Explore our professional, industry-recognized automotive engineering curriculums.
-            </p>
+            <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>
+            <p class="text-muted fs-5">Explore our professional, industry-recognized automotive engineering curriculums.</p>
         </div>
 
         @php
@@ -412,7 +387,7 @@ body{
                 [
                     'image' => 'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=800&q=80',
                     'title' => 'Automotive Engineering Course',
-                    'desc'  => 'Learn vehicle design, engine technology, diagnostics and manufacturing.',
+                    'desc'  => 'Learn vehicle design, engine technology, diagnostics and manufacturing workflows comprehensively.',
                     'author' => 'Automotive Engineering Dept.',
                     'rating' => '4.9',
                     'students' => '1.2k students',
@@ -421,7 +396,7 @@ body{
                 [
                     'image' => 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=800&q=80',
                     'title' => 'Mechanical Systems Course',
-                    'desc'  => 'Study transmission systems, suspension, braking and vehicle maintenance.',
+                    'desc'  => 'Study power transmission systems, active suspension, breaking dynamics and diagnostics.',
                     'author' => 'Tech & Service Campus',
                     'rating' => '4.7',
                     'students' => '850 students',
@@ -429,62 +404,56 @@ body{
                 ],
                 [
                     'image' => 'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=800&q=80',
-                    'title' => 'Electric Vehicle Technology Course',
-                    'desc'  => 'Master EV batteries, powertrains, charging systems and smart mobility.',
+                    'title' => 'Electric Vehicle Tech Course',
+                    'desc'  => 'Master advanced EV battery management, powertrains, smart networks and electric mobility.',
                     'author' => 'EV Research Institute',
                     'rating' => '4.8',
                     'students' => '640 students',
                     'badge' => 'New'
-                ],
+                ]
             ];
         @endphp
 
         <div class="row g-4 mb-5">
-            @foreach($courses as $index => $course)
-                <div class="col-lg-4 col-md-6 animate-on-scroll fade-up-init" style="transition-delay: {{ $index * 150 }}ms;">
+            @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="course-image-wrapper">
                             <span class="badge-floating">{{ $course['badge'] }}</span>
-                            <img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy" decoding="async">
+                            <img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy">
                         </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>
-
-                            <!-- Modern Soft Pill Badges -->
-                            <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 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>
 
-                            <div class="course-meta-row">
-                                <span class="rating-star">
-                                    <i class="fas fa-star"></i> {{ $course['rating'] }}
-                                    <span class="rating-count">({{ $course['students'] }})</span>
-                                </span>
-                                <span class="text-success fw-bold small"><i class="fa-solid fa-circle-check me-1"></i> Active</span>
-                            </div>
-
-                            <div class="course-footer">
-                                <a href="/courses" class="read-btn">
-                                    View Details <i class="fa-solid fa-arrow-right ms-1 small"></i>
-                                </a>
+                            <div>
+                                <div class="course-meta-row">
+                                    <span class="rating-star">
+                                        <i class="fas fa-star me-1"></i>{{ $course['rating'] }}
+                                        <span class="rating-count">({{ $course['students'] }})</span>
+                                    </span>
+                                    <span class="small fw-bold" style="color: #2ecc71;"><i class="fa-solid fa-circle-check me-1"></i>Active</span>
+                                </div>
+                                <a href="/courses" class="read-btn">View Details</a>
                             </div>
                         </div>
-
                     </div>
                 </div>
             @endforeach
         </div>
 
         <div class="text-center animate-on-scroll fade-up-init">
-            <a href="/courses" class="btn btn-theme" style="border-radius: 40px;">
+            <a href="/courses" class="btn btn-theme">
                 View All Courses <i class="fa-solid fa-arrow-right ms-2"></i>
             </a>
         </div>
@@ -493,105 +462,109 @@ body{
 </section>
 
 {{-- ===================== WHY CHOOSE US ===================== --}}
-<section class="why-section position-relative overflow-hidden text-white" aria-labelledby="why-us-heading" style="min-height: 600px;">
-    <div class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 1;">
-        <img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=1600&q=80"
-             alt="Automotive Engineering Lab"
-             class="w-100 h-100"
-             style="object-fit: cover;" 
-             loading="lazy"
-             decoding="async">
-        <div class="position-absolute top-0 start-0 w-100 h-100" 
-             style="background: linear-gradient(135deg, rgba(26, 5, 46, 0.96) 0%, rgba(15, 3, 28, 0.85) 100%);">
-        </div>
+<!-- <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 position-relative py-5 z-2">
-        <div class="row justify-content-center text-center mb-5">
-            <div class="col-lg-8 animate-on-scroll fade-up-init">
-                <h2 id="why-us-heading" class="fw-extrabold display-4 mb-3 text-uppercase position-relative d-inline-block" style="color: #fff;">
-                    Why Choose Us?
-                    <span class="position-absolute start-50 translate-middle-x bottom-0 bg-warning rounded" style="height: 4px; width: 60px; bottom: -10px !important; background-color: var(--why-gold) !important;"></span>
-                </h2>
-            </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 p-4 rounded-4 shadow-sm border backdrop-blur">
-                    <div class="icon-box mb-3 rounded-3 p-3 d-inline-block">
-                        <i class="fa-solid fa-flask-vial fs-3"></i>
-                    </div>
-                    <h4 class="fs-5 fw-bold mb-2 text-white">Modern Laboratories</h4>
-                    <p class="small text-white-50 mb-0">State-of-the-art facilities equipped with the latest technology for practical learning.</p>
+                <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 p-4 rounded-4 shadow-sm border backdrop-blur">
-                    <div class="icon-box mb-3 rounded-3 p-3 d-inline-block">
-                        <i class="fa-solid fa-graduation-cap fs-3"></i>
-                    </div>
-                    <h4 class="fs-5 fw-bold mb-2 text-white">Qualified Lecturers</h4>
-                    <p class="small text-white-50 mb-0">Learn from experienced industry professionals and academic experts.</p>
+                <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 p-4 rounded-4 shadow-sm border backdrop-blur">
-                    <div class="icon-box mb-3 rounded-3 p-3 d-inline-block">
-                        <i class="fa-solid fa-car fs-3"></i>
+                <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;">
+        <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.12; filter: grayscale(30%) brightness(80%);">
+    </div>
+
+    <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;">
+                        <i class="fa-solid fa-flask-vial fs-3 fa-beat-hover" style="--fa-animation-duration: 1.5s;"></i>
                     </div>
-                    <h4 class="fs-5 fw-bold mb-2 text-white">Hands-on Training</h4>
-                    <p class="small text-white-50 mb-0">Gain real-world experience through direct practical training on vehicles.</p>
+                    <h4 class="text-white fs-5 mb-3 fw-semibold">Modern Laboratories</h4>
+                    <p class="text-white-50 small mb-0 lh-base">State-of-the-art facilities equipped with latest industrial testing tools.</p>
                 </div>
             </div>
 
-            <div class="col-md-6 col-lg-6">
-                <div class="custom-feature-card h-100 p-4 rounded-4 shadow-sm border backdrop-blur">
-                    <div class="icon-box mb-3 rounded-3 p-3 d-inline-block">
-                        <i class="fa-solid fa-charging-station fs-3"></i>
+            {{-- 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;">
+                        <i class="fa-solid fa-graduation-cap fs-3 fa-bounce-hover"></i>
                     </div>
-                    <h4 class="fs-5 fw-bold mb-2 text-white">EV Research Center</h4>
-                    <p class="small text-white-50 mb-0">Advanced research center dedicated to Hybrid and Electric Vehicle technologies.</p>
+                    <h4 class="text-white fs-5 mb-3 fw-semibold">Qualified Lecturers</h4>
+                    <p class="text-white-50 small mb-0 lh-base">Learn directly from veteran automotive engineers and researchers.</p>
                 </div>
             </div>
 
-            <div class="col-md-6 col-lg-6">
-                <div class="custom-feature-card h-100 p-4 rounded-4 shadow-sm border backdrop-blur">
-                    <div class="icon-box mb-3 rounded-3 p-3 d-inline-block">
-                        <i class="fa-solid fa-briefcase fs-3"></i>
+            {{-- 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;">
+                        <i class="fa-solid fa-car fs-3 fa-shake-hover"></i>
                     </div>
-                    <h4 class="fs-5 fw-bold mb-2 text-white">Internship Opportunities</h4>
-                    <p class="small text-white-50 mb-0">Guaranteed industrial placements to kickstart your professional career.</p>
+                    <h4 class="text-white fs-5 mb-3 fw-semibold">Hands-on Training</h4>
+                    <p class="text-white-50 small mb-0 lh-base">Gain real-world diagnostics experience inside our dedicated workshop floors.</p>
                 </div>
             </div>
-
         </div>
     </div>
 </section>
 
 {{-- ===================== CALL TO ACTION ===================== --}}
-<section class="section py-5 animate-on-scroll zoom-in-init">
-    <div class="container text-center">
-        <h2 class="fw-bold mb-3">
-            Join the Future of Automotive Engineering
-        </h2>
-        <p class="text-muted mb-4">
-            Shape the future with innovation, technology and practical learning.
-        </p>
-
-        <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme">
-            <i class="fa-solid fa-user-plus me-2"></i> Apply Now
-        </a>
+<section class="section py-5 text-center animate-on-scroll zoom-in-init">
+    <div class="container">
+        <h2 class="display-6 mb-3">Join the Future of Automotive Engineering</h2>
+        <p class="text-muted mb-4 max-width-600 mx-auto">Shape your technical career through modern innovation, practical mastery, and expert guidance.</p>
+        <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme" style="background: #822424;">Apply Now</a>
     </div>
 </section>
 
 <script>
     document.addEventListener('DOMContentLoaded', function () {
         const animatedElements = document.querySelectorAll('.animate-on-scroll');
-
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
@@ -599,10 +572,7 @@ body{
                     observer.unobserve(entry.target);  
                 }
             });
-        }, {
-            threshold: 0.15  
-        });
-
+        }, { threshold: 0.1 });
         animatedElements.forEach(el => observer.observe(el));
     });
 </script>