diff --git a/resources/views/abouts.blade.php b/resources/views/abouts.blade.php
index 704987b..9529c4c 100644
--- a/resources/views/abouts.blade.php
+++ b/resources/views/abouts.blade.php
@@ -1,500 +1,416 @@
 @extends('layouts.app')
 
-@section('title','About Us')
-
-@section('content')
-
-<style>
-:root{
-    /* 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(185, 205, 253, 0.31), rgb(0, 0, 0)), url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg');
-    background-size:cover;
-    background-position:center;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    text-align:center;
-    color:#fff;
-} */
-    .hero-about {
-    min-height: 60vh;
-    background: linear-gradient(rgba(194, 217, 255, 0.75), rgba(0, 0, 0, 0.85)), url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&w=1600&q=80');
-    background-size: cover;
-    background-position: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    color: #fff;
-}
-
-.section-title{
-    text-align:center;
-    margin-bottom:40px;
-}
-
-.about-box {
-    background:#fff;
-    border-radius:20px;
-    padding:35px 25px;
-    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 var(--card-border);
-}
-
-.about-box:hover {
-    transform: translateY(-10px) scale(1.02);
-    box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
-    border-color: var(--primary-light);
-}
-
-.icon-circle {
-    width:75px;
-    height:75px;
-    background: #6e3232;
-    color: #f6e983;
-    border-radius:50%;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    font-size:28px;
-    margin:auto;
-    transition: all 0.4s ease;
-}
-
-.about-box:hover .icon-circle {
-    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);
-}
-
-/* ========================================================
-   Advanced CSS Scroll Animations
-   ======================================================== */
-.animate-item {
-    opacity: 0;
-    will-change: transform, opacity;
-    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
-}
-
-.fade-up-init {
-    transform: translateY(40px);
-}
-
-.slide-left-init {
-    transform: translateX(-50px);
-}
-
-.slide-right-init {
-    transform: translateX(50px);
-}
-
-.zoom-in-init {
-    transform: scale(0.85);
-}
-
-.animate-item.animated {
-    opacity: 1;
-    transform: translate(0) scale(1);
-}
-
-/* Automotive Theme Glow Pulse Button */
-@keyframes pulse-btn {
-    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-light);
-    color: #fff !important;
-    padding: 14px 35px;
-    border-radius: 50px;
-    font-weight: 600;
-    text-decoration: none;
-    transition: 0.3s;
-    animation: pulse-btn 2s infinite;
-}
-
-.cta-btn:hover {
-    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); 
-}  */
-   
-    
-    .btn-view-courses{
-    background: #822424;
-    color: #fff;
-    /* padding: 14px ; */
-    border-radius: 40px;
-    font-weight: 600;
-    transition: all 0.3s ease;
-    font-weight: bolder;
-}
-
-.btn-view-courses: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);
-}
-
- 
-</style>
-
-<!-- HERO -->
-<section class="hero-about">
-    <div class="container">
-        <div class="animate-item animated fade-up-init">
-            <h1 class="fw-bold display-4">About Our Institute</h1>
-            <p class="mt-3 lead" style="max-width: 700px; margin: auto;">
-                We are committed to delivering high-quality automotive education
-                with practical training and industry-focused learning.
-            </p>
-        </div>
-    </div>
-</section>
-
-<!-- ABOUT CONTENT -->
-<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">
-                Our institute specializes in automotive engineering education,
-                offering hands-on training in modern vehicle technologies,
-                mechanical systems, and electric vehicles.
-            </p>
-            <p class="text-muted mb-4">
-                We focus on building skilled professionals who are ready for
-                the global automotive industry.
-            </p>
-            <a href="/courses" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
-                View Courses@extends('layouts.app')
-
-@section('title','About Us')
+@section('title', 'About Us')
 
 @section('content')
 
 <style>
 :root {
-    /* 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-main: #0F172A;         /* 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);
+    --card-border: rgba(226, 232, 240, 0.9);
 }
 
+/* ===== HERO SECTION ===== */
 .hero-about {
-    min-height: 60vh;
-    background: linear-gradient(rgba(194, 217, 255, 0.75), rgba(0, 0, 0, 0.85)),url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=1600&q=80');
+    position: relative;
+    min-height: 48vh;
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 41, 59, 0.82) 50%, rgba(15, 23, 42, 0.92) 100%), 
+                url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&w=1600&q=80');
     background-size: cover;
     background-position: center;
+    background-attachment: fixed;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
-    color: #fff;
+    color: #ffffff;
+    padding: 70px 20px;
+    overflow: hidden;
 }
 
-.section-title {
-    text-align: center;
-    margin-bottom: 40px;
+.hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    color: #FFE618;
+    font-size: 12px;
+    font-weight: 750;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 7px 18px;
+    border-radius: 999px;
+    margin-bottom: 18px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 }
 
-.about-box {
-    background: #fff;
+.hero-about h1 {
+    font-size: clamp(2.3rem, 4vw, 3.6rem);
+    font-weight: 800;
+    line-height: 1.15;
+    letter-spacing: -0.03em;
+    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+.hero-about p.lead {
+    font-size: clamp(1rem, 1.2vw, 1.25rem);
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 700px;
+    margin: 16px auto 0;
+    line-height: 1.6;
+}
+
+/* ===== STATS BAR ===== */
+.stats-container {
+    margin-top: -38px;
+    position: relative;
+    z-index: 10;
+}
+
+.stat-glass-card {
+    background: #ffffff;
+    border: 1px solid rgba(226, 232, 240, 0.9);
     border-radius: 20px;
-    padding: 35px 25px;
-    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 var(--card-border);
+    padding: 20px 16px;
+    text-align: center;
+    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
+    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.stat-glass-card:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 18px 40px rgba(62, 81, 184, 0.14);
+    border-color: rgba(62, 81, 184, 0.3);
+}
+
+.stat-icon {
+    width: 44px;
+    height: 44px;
+    background: rgba(62, 81, 184, 0.08);
+    color: var(--primary);
+    border-radius: 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
+.stat-number {
+    font-size: 26px;
+    font-weight: 800;
+    color: var(--text-main);
+    line-height: 1;
+    margin-bottom: 4px;
+}
+
+.stat-label {
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--text-muted);
+}
+
+/* ===== MINIMALIST VISION & MISSION ===== */
+.minimal-icon-badge {
+    width: 52px;
+    height: 52px;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    flex-shrink: 0;
+    transition: transform 0.3s ease;
+}
+
+.animate-item:hover .minimal-icon-badge {
+    transform: scale(1.1) rotate(4deg);
+}
+
+@media (min-width: 768px) {
+    .border-start-md {
+        border-left: 1px solid rgba(226, 232, 240, 0.9) !important;
+    }
+}
+
+/* ===== FEATURE BOXES ===== */
+.about-box {
+    position: relative;
+    background: #ffffff;
+    border-radius: 22px;
+    padding: 34px 24px;
+    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    border: 1px solid rgba(226, 232, 240, 0.9);
+    height: 100%;
+    overflow: hidden;
+}
+
+.about-box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #3E51B8 0%, #FFE618 50%, #BC1A1A 100%);
+    opacity: 0.35;
+    transition: opacity 0.4s ease;
+}
+
+.about-box:hover::before {
+    opacity: 1;
 }
 
 .about-box:hover {
-    transform: translateY(-10px) scale(1.02);
-    box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
-    border-color: var(--primary-light);
+    transform: translateY(-8px);
+    box-shadow: 0 20px 45px -10px rgba(62, 81, 184, 0.14);
+    border-color: rgba(62, 81, 184, 0.3);
 }
 
 .icon-circle {
-    width: 75px;
-    height: 75px;
-    background: #6e3232;
-    color: #fffefa;;
-    border-radius: 50%;
+    width: 64px;
+    height: 64px;
+    background: linear-gradient(135deg, rgba(62, 81, 184, 0.1) 0%, rgba(10, 103, 223, 0.06) 100%);
+    color: var(--primary);
+    border-radius: 20px;
+    border: 1px solid rgba(62, 81, 184, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 28px;
-    margin: auto;
-    transition: all 0.4s ease;
+    font-size: 26px;
+    margin: 0 auto 20px;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .about-box:hover .icon-circle {
-    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);
+    background: linear-gradient(135deg, #0F2C59 0%, #3E51B8 100%);
+    color: #ffffff;
+    border-color: transparent;
+    transform: scale(1.12) rotate(6deg);
+    box-shadow: 0 10px 25px rgba(62, 81, 184, 0.35);
 }
 
-/* ========================================================
-   Advanced CSS Scroll Animations
-   ======================================================== */
+/* ===== CTA BUTTON ===== */
+.cta-btn {
+    background: linear-gradient(135deg, #0F2C59 0%, #3E51B8 100%);
+    color: #ffffff !important;
+    padding: 13px 36px;
+    border-radius: 999px;
+    font-weight: 750;
+    font-size: 14.5px;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    transition: all 0.35s ease;
+    box-shadow: 0 8px 24px rgba(62, 81, 184, 0.25);
+}
+
+.cta-btn:hover {
+    background: linear-gradient(135deg, #BC1A1A 0%, #822424 100%);
+    transform: translateY(-3px) scale(1.02);
+    box-shadow: 0 12px 30px rgba(188, 26, 26, 0.35);
+}
+
+.cta-btn i {
+    transition: transform 0.3s ease;
+}
+
+.cta-btn:hover i {
+    transform: translateX(6px);
+}
+
+/* ===== SCROLL ANIMATIONS ===== */
 .animate-item {
     opacity: 0;
     will-change: transform, opacity;
     transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
-.fade-up-init {
-    transform: translateY(40px);
-}
-
-.slide-left-init {
-    transform: translateX(-50px);
-}
-
-.slide-right-init {
-    transform: translateX(50px);
-}
-
-.zoom-in-init {
-    transform: scale(0.85);
-}
+.fade-up-init { transform: translateY(30px); }
+.slide-left-init { transform: translateX(-40px); }
+.slide-right-init { transform: translateX(40px); }
+.zoom-in-init { transform: scale(0.94); }
 
 .animate-item.animated {
     opacity: 1;
     transform: translate(0) scale(1);
 }
-
-/* Automotive Theme Glow Pulse Button */
-@keyframes pulse-btn {
-    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-light);
-    color: #fff !important;
-    padding: 14px 35px;
-    border-radius: 50px;
-    font-weight: 600;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    animation: pulse-btn 2s infinite;
-}
-
-.cta-btn:hover {
-    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);
-} */
-
-  .cta-btn{
-    background: #822424;
-    color: #fff;
-    padding: 14px 35px;
-    border-radius: 40px;
-    font-weight: 600;
-    transition: all 0.3s ease;
-    font-weight: bolder;
-}
-
-.cta-btn: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-view-courses {
-    background: var(--secondary-hover);
-    color: #fff;
-    padding: 14px 35px;
-    border-radius: 40px;
-    font-weight: 600;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    /* border: none; */
-}
-
-.btn-view-courses:hover {
-    background: var(--secondary);
-    color: #fff;
-    transform: translateY(-3px);
-    box-shadow: 0 8px 20px rgba(188, 26, 26, 0.3);
-}
 </style>
 
-<!-- HERO -->
+<!-- HERO SECTION -->
 <section class="hero-about">
     <div class="container">
         <div class="animate-item animated fade-up-init">
-            <h1 class="fw-bold display-4">About Our Institute</h1>
-            <p class="mt-3 lead" style="max-width: 700px; margin: auto;">
-                We are committed to delivering high-quality automotive education
-                with practical training and industry-focused learning.
+            <span class="hero-badge"><i class="fa-solid fa-graduation-cap"></i> Pioneering Automotive Academy</span>
+            <h1 class="fw-bold">Empowering Future Mobility Leaders</h1>
+            <p class="lead">
+                We are committed to delivering world-class automotive engineering education with hands-on workshop mastery, TVEC accredited qualifications, and cutting-edge EV technology training.
             </p>
         </div>
     </div>
 </section>
 
-<!-- ABOUT CONTENT function -->
-<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">
+<!-- FLOATING STATS COUNTER -->
+<div class="container stats-container">
+    <div class="row g-3 justify-content-center">
+        <div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 100ms;">
+            <div class="stat-glass-card">
+                <div class="stat-icon"><i class="fa-solid fa-user-graduate"></i></div>
+                <div class="stat-number count-up" data-count-target="2500" data-count-suffix="+">0+</div>
+                <div class="stat-label">Graduated Technicians</div>
+            </div>
         </div>
+        <div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 200ms;">
+            <div class="stat-glass-card">
+                <div class="stat-icon"><i class="fa-solid fa-screwdriver-wrench"></i></div>
+                <div class="stat-number">100%</div>
+                <div class="stat-label">Practical Lab Mastery</div>
+            </div>
+        </div>
+        <div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 300ms;">
+            <div class="stat-glass-card">
+                <div class="stat-icon"><i class="fa-solid fa-award"></i></div>
+                <div class="stat-number">15+</div>
+                <div class="stat-label">Years of Excellence</div>
+            </div>
+        </div>
+        <div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 400ms;">
+            <div class="stat-glass-card">
+                <div class="stat-icon"><i class="fa-solid fa-briefcase"></i></div>
+                <div class="stat-number">95%</div>
+                <div class="stat-label">Job Placement Rate</div>
+            </div>
+        </div>
+    </div>
+</div>
 
-        <div class="col-md-6 animate-item slide-right-init">
-            <h2 class="fw-bold mb-3">Vision</h2>
-            <p class="text-muted fs-5" style="justfy-content: justify;">
-             To be a global leader in automotive education, driving the future of mobility by empowering the next generation of engineers, technicians, and innovators.
-            </p>
-            <h2 class="fw-bold mb-3">Mission</h2>
-            <p class="text-muted fs-5" style="justfy-content: justify;">
-               To foster technical mastery and critical thinking through immersive, practical learning environments, strong industry partnerships, and a commitment to eco-friendly automotive practices.
-            </p>
-
+<!-- VISION & MISSION MINIMALIST 1-ROW SECTION -->
+<section class="py-5 bg-white">
+    <div class="container py-3">
+        <div class="row g-4 align-items-stretch">
             
-            <!-- <a href="/courses" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
-                View Courses
-            </a> -->
+            <!-- VISION (LEFT COLUMN) -->
+            <div class="col-md-6 animate-item slide-left-init">
+                <div class="p-4 rounded-4 bg-light border border-light-subtle h-100">
+                    <div class="d-flex align-items-center gap-3 mb-3">
+                        <div class="minimal-icon-badge bg-primary-subtle text-primary">
+                            <i class="fa-solid fa-lightbulb"></i>
+                        </div>
+                        <div>
+                            <span class="badge bg-primary-subtle text-primary fw-bold text-uppercase px-2 py-1 rounded-2 small mb-1" style="font-size: 11px;">GLOBAL GOAL</span>
+                            <h3 class="fw-bold text-dark mb-0 fs-4">Our Vision</h3>
+                        </div>
+                    </div>
+                    <p class="text-secondary fs-6 lh-base mb-0">
+                        To be a global leader in automotive education, driving the future of mobility by empowering the next generation of engineers, technicians, and EV innovators.
+                    </p>
+                </div>
+            </div>
+
+            <!-- MISSION (RIGHT COLUMN) -->
+            <div class="col-md-6 animate-item slide-right-init">
+                <div class="p-4 rounded-4 bg-light border border-light-subtle h-100">
+                    <div class="d-flex align-items-center gap-3 mb-3">
+                        <div class="minimal-icon-badge bg-danger-subtle text-danger">
+                            <i class="fa-solid fa-bullseye"></i>
+                        </div>
+                        <div>
+                            <span class="badge bg-danger-subtle text-danger fw-bold text-uppercase px-2 py-1 rounded-2 small mb-1" style="font-size: 11px;">CORE PURPOSE</span>
+                            <h3 class="fw-bold text-dark mb-0 fs-4">Our Mission</h3>
+                        </div>
+                    </div>
+                    <p class="text-secondary fs-6 lh-base mb-0">
+                        To foster technical mastery and critical thinking through immersive, practical learning environments, strong industry partnerships, and a commitment to eco-friendly automotive practices.
+                    </p>
+                </div>
+            </div>
+
         </div>
     </div>
-</div>
 </section>
 
-<!-- FEATURES -->
-<section class="py-5 bg-light">
-<div class="container">
+<!-- ADVANTAGES / WHY CHOOSE US -->
+<section class="py-5 bg-light position-relative">
+    <div class="container py-4">
+        <div class="text-center mb-5 animate-item fade-up-init">
+            <span class="text-uppercase fw-bold small text-primary letter-spacing-1"><i class="fa-solid fa-award me-1"></i> Core Advantage</span>
+            <h2 class="display-6 fw-bold text-dark mt-2">Why Study With AutoEdu?</h2>
+            <p class="text-muted fs-5 max-width-600 mx-auto">We combine academic excellence with real-world workshop diagnostic training.</p>
+        </div>
 
-<div class="section-title animate-item fade-up-init">
-    <h2 class="fw-bold">Why Choose Us</h2>
-    <p class="text-muted">We provide the best learning experience</p>
-</div>
-
-<div class="row g-4">
-    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
-        <div class="about-box text-center">
-            <div class="icon-circle">
-                <i class="fa-solid fa-chalkboard-user"></i>
+        <div class="row g-4">
+            <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
+                <div class="about-box text-center">
+                    <div class="icon-circle">
+                        <i class="fa-solid fa-chalkboard-user"></i>
+                    </div>
+                    <h4 class="fw-bold text-dark mb-3">Expert Lecturers</h4>
+                    <p class="text-muted mb-0 lh-base">
+                        Learn directly from veteran automotive engineers, diagnostic specialists, and TVEC certified master instructors.
+                    </p>
+                </div>
+            </div>
+
+            <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 250ms;">
+                <div class="about-box text-center">
+                    <div class="icon-circle">
+                        <i class="fa-solid fa-screwdriver-wrench"></i>
+                    </div>
+                    <h4 class="fw-bold text-dark mb-3">Practical Training</h4>
+                    <p class="text-muted mb-0 lh-base">
+                        Hands-on workshop experience working on modern EFI engines, EV battery test bays, and automated gearboxes.
+                    </p>
+                </div>
+            </div>
+
+            <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 400ms;">
+                <div class="about-box text-center">
+                    <div class="icon-circle">
+                        <i class="fa-solid fa-certificate"></i>
+                    </div>
+                    <h4 class="fw-bold text-dark mb-3">Certified Qualifications</h4>
+                    <p class="text-muted mb-0 lh-base">
+                        Earn internationally recognized NVQ Level 4/5 diplomas and certifications that accelerate your global career.
+                    </p>
+                </div>
             </div>
-            <h4 class="mt-4 fw-bold">Expert Lecturers</h4>
-            <p class="text-muted mb-0">
-                Experienced industry professionals guiding your learning journey.
-            </p>
         </div>
     </div>
-  
-    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 250ms;">
-        <div class="about-box text-center">
-            <div class="icon-circle">
-                <i class="fa-solid fa-screwdriver-wrench"></i>
-            </div>
-            <h4 class="mt-4 fw-bold">Practical Training</h4>
-            <p class="text-muted mb-0">
-                Hands-on workshop experience with real vehicles and tools.
-            </p>
-        </div>
-    </div>
-
-    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 400ms;">
-        <div class="about-box text-center">
-            <div class="icon-circle">
-                <i class="fa-solid fa-certificate"></i>
-            </div>
-            <h4 class="mt-4 fw-bold">Certified Courses</h4>
-            <p class="text-muted mb-0">
-                Industry-recognized certifications to boost your career.
-            </p>
-        </div>
-    </div>
-</div>
-
-</div>
 </section>
 
-<!-- CTA -->
-<section class="py-5 text-center bg-white overflow-hidden">
-<div class="container py-4 animate-item fade-up-init">
-    <h2 class="fw-bold mb-3">Start Your Automotive Career Today</h2>
-    <p class="text-muted fs-5 mb-5">
-        Join our institute and become a skilled automotive professional.
-    </p>
-    <div class="d-flex justify-content-center">
-        <a href="/apply" class="cta-btn shadow">
-           Apply Courses
-        </a>
+<!-- CALL TO ACTION (CTA) -->
+<section class="py-5 text-center bg-white overflow-hidden position-relative">
+    <div class="container py-4 animate-item fade-up-init">
+        <div class="p-5 rounded-4 shadow-sm position-relative overflow-hidden" style="background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);">
+            <span class="badge bg-warning text-dark font-monospace mb-3 px-3 py-2 rounded-pill"><i class="fa-solid fa-bolt me-1"></i> ADMISSIONS OPEN 2026</span>
+            <h2 class="display-6 fw-bold text-white mb-3">Start Your Automotive Career Today</h2>
+            <p class="text-white-50 fs-5 mb-4 max-width-600 mx-auto">
+                Take the first step toward becoming a certified automotive engineer or high-voltage EV specialist.
+            </p>
+            <div class="d-flex justify-content-center">
+                <a href="/apply" class="cta-btn">
+                    Apply For Courses <i class="fa-solid fa-arrow-right"></i>
+                </a>
+            </div>
+        </div>
     </div>
-</div>
 </section>
 
 <script>
 document.addEventListener('DOMContentLoaded', function () {
+    // Scroll animations observer
     const animatedElements = document.querySelectorAll('.animate-item');
-
     const observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
@@ -507,99 +423,32 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 
     animatedElements.forEach(el => observer.observe(el));
-});
-</script>
 
-@endsection
-            </a>
-        </div>
-    </div>
-</div>
-</section>
-
-<!-- FEATURES -->
-<section class="py-5 bg-light">
-<div class="container">
-
-<div class="section-title animate-item fade-up-init">
-    <h2 class="fw-bold">Why Choose Us</h2>
-    <p class="text-muted">We provide the best learning experience</p>
-</div>
-
-<div class="row g-4">
-    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
-        <div class="about-box text-center">
-            <div class="icon-circle">
-                <i class="fa-solid fa-chalkboard-user"></i>
-            </div>
-            <h4 class="mt-4 fw-bold">Expert Lecturers</h4>
-            <p class="text-muted mb-0">
-                Experienced industry professionals guiding your learning journey.
-            </p>
-        </div>
-    </div>
-
-    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 250ms;">
-        <div class="about-box text-center">
-            <div class="icon-circle">
-                <i class="fa-solid fa-screwdriver-wrench"></i>
-            </div>
-            <h4 class="mt-4 fw-bold">Practical Training</h4>
-            <p class="text-muted mb-0">
-                Hands-on workshop experience with real vehicles and tools.
-            </p>
-        </div>
-    </div>
-
-    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 400ms;">
-        <div class="about-box text-center">
-            <div class="icon-circle">
-                <i class="fa-solid fa-certificate"></i>
-            </div>
-            <h4 class="mt-4 fw-bold">Certified Courses</h4>
-            <p class="text-muted mb-0">
-                Industry-recognized certifications to boost your career.
-            </p>
-        </div>
-    </div>
-</div>
-
-</div>
-</section>
-
-<!-- CTA -->
-<section class="py-5 text-center bg-white overflow-hidden">
-<div class="container py-4 animate-item fade-up-init">
-    <h2 class="fw-bold mb-3">Start Your Automotive Career Today</h2>
-    <p class="text-muted fs-5 mb-5">
-        Join our institute and become a skilled automotive professional.
-    </p>
-    <div class="d-flex justify-content-center">
-        <a href="/apply" class="cta-btn shadow">
-           Apply Courses
-        </a>
-    </div>
-</div>
-</section>
-
-<script>
-document.addEventListener('DOMContentLoaded', function () {
-    const animatedElements = document.querySelectorAll('.animate-item');
-
-    const observer = new IntersectionObserver((entries) => {
+    // Stats Number Counter Animation
+    const counterElements = document.querySelectorAll('.count-up');
+    const counterObserver = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
-                entry.target.classList.add('animated');
-                observer.unobserve(entry.target); 
+                const el = entry.target;
+                const target = parseInt(el.getAttribute('data-count-target') || '0', 10);
+                const suffix = el.getAttribute('data-count-suffix') || '';
+                let current = 0;
+                const increment = Math.ceil(target / 40);
+                const timer = setInterval(() => {
+                    current += increment;
+                    if (current >= target) {
+                        current = target;
+                        clearInterval(timer);
+                    }
+                    el.textContent = current.toLocaleString() + suffix;
+                }, 30);
+                counterObserver.unobserve(el);
             }
         });
-    }, {
-        threshold: 0.15 
-    });
+    }, { threshold: 0.5 });
 
-    animatedElements.forEach(el => observer.observe(el));
+    counterElements.forEach(el => counterObserver.observe(el));
 });
 </script>
 
-
 @endsection
\ No newline at end of file