ui chngs:

app/Http/Controllers/DocumentDownloadController.php

@@ -0,0 +1,333 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Dompdf\Dompdf;
+use Dompdf\Options;
+
+class DocumentDownloadController extends Controller
+{
+    /**
+     * Check if student is authenticated via session or auth guard
+     */
+    private function isAuthenticated(Request $request)
+    {
+        return $request->session()->has('student_id') || 
+               $request->session()->has('student_log_id') || 
+               auth()->check();
+    }
+
+    /**
+     * Academic Calendar PDF Download
+     */
+    public function downloadAcademicCalendar(Request $request)
+    {
+        if (!$this->isAuthenticated($request)) {
+            return redirect()->route('students')->with('error', 'Please login first to download official academic documents!');
+        }
+
+        $title = "Official Academic Calendar 2026";
+        $subtitle = "Semester Schedules, Lecture Weeks, Holidays & Important Deadlines";
+        $refNo = "REF: AC-2026-CAL";
+
+        $tables = [
+            [
+                'title' => '1. SEMESTER DATES & LECTURE WEEKS',
+                'headers' => ['Academic Event / Phase', 'Start Date', 'End Date', 'Status'],
+                'rows' => [
+                    ['Semester 1 Commencement', 'January 15, 2026', 'March 20, 2026', 'Active'],
+                    ['Mid-Semester Recess', 'March 21, 2026', 'March 29, 2026', 'Scheduled'],
+                    ['Practical Lab Intensive Weeks', 'March 30, 2026', 'May 15, 2026', 'Scheduled'],
+                    ['Semester 1 Final Examinations', 'June 01, 2026', 'June 20, 2026', 'Scheduled'],
+                    ['Semester 2 Commencement', 'July 15, 2026', 'November 30, 2026', 'Upcoming']
+                ]
+            ],
+            [
+                'title' => '2. INSTITUTIONAL & PUBLIC HOLIDAYS',
+                'headers' => ['Holiday / Event Name', 'Date(s)', 'Impact on Classes'],
+                'rows' => [
+                    ['National Independence Day', 'February 04, 2026', 'Campus Closed'],
+                    ['Sinhala & Tamil New Year Vacation', 'April 12 - April 18, 2026', 'No Lectures / Workshops'],
+                    ['Vesak Festival Holiday', 'May 23 - May 25, 2026', 'Campus Closed'],
+                    ['Annual Automotive Tech Symposium', 'August 20, 2026', 'Special Event (Mandatory Attendance)']
+                ]
+            ],
+            [
+                'title' => '3. CRITICAL ACADEMIC DEADLINES',
+                'headers' => ['Deadline Description', 'Cut-off Date', 'Action Required'],
+                'rows' => [
+                    ['Course Module Drop / Add Period', 'February 10, 2026', 'Submit online form'],
+                    ['Mid-Term Assignment 1 Submission', 'March 18, 2026', 'Upload via Portal'],
+                    ['Examination Fee Clearance', 'May 15, 2026', 'Settle at Finance Office']
+                ]
+            ]
+        ];
+
+        return $this->renderPdf($title, $subtitle, $refNo, $tables, "Academic_Calendar_2026.pdf");
+    }
+
+    /**
+     * Student Handbook PDF Download
+     */
+    public function downloadStudentHandbook(Request $request)
+    {
+        if (!$this->isAuthenticated($request)) {
+            return redirect()->route('students')->with('error', 'Please login first to download official academic documents!');
+        }
+
+        $title = "Student Handbook & Code of Conduct";
+        $subtitle = "Academic Regulations, Workshop Safety Rules & Grading Policies";
+        $refNo = "REF: HB-2026-REG";
+
+        $tables = [
+            [
+                'title' => '1. ATTENDANCE & ACADEMIC INTEGRITY POLICIES',
+                'headers' => ['Regulation Category', 'Requirement / Policy Detail', 'Penalty for Violation'],
+                'rows' => [
+                    ['Class Attendance', 'Minimum 80% attendance required for practical labs and lectures.', 'Barred from Final Exams'],
+                    ['Academic Honesty', 'Zero tolerance for plagiarism, cheating, or proxy attendance.', 'Disciplinary Hearing & Grade F'],
+                    ['Enrollment Status', 'Students must maintain continuous registration every term.', 'De-registration after 30 days']
+                ]
+            ],
+            [
+                'title' => '2. WORKSHOP & HIGH-VOLTAGE LAB SAFETY RULES',
+                'headers' => ['Safety Protocol', 'Required Equipment / PPE', 'Compliance Rule'],
+                'rows' => [
+                    ['General Workshop PPE', 'Safety boots (steel toe), protective eyewear, lab coats', 'Mandatory at all times'],
+                    ['Hybrid / EV High Voltage Labs', 'Class 0 rated insulated safety gloves (1000V rated)', 'Strict supervision required'],
+                    ['Vehicle Lift Operation', 'Hydraulic lift locks must be verified before underbody work', 'Never operate alone']
+                ]
+            ],
+            [
+                'title' => '3. ACADEMIC GRADING SCHEME',
+                'headers' => ['Grade', 'Percentage Range', 'GPA Value', 'Classification'],
+                'rows' => [
+                    ['A+', '90% - 100%', '4.00', 'High Distinction'],
+                    ['A', '80% - 89%', '3.70', 'Distinction'],
+                    ['B', '70% - 79%', '3.00', 'Credit Pass'],
+                    ['C', '55% - 69%', '2.00', 'Pass'],
+                    ['F', 'Below 50%', '0.00', 'Fail (Re-sit Required)']
+                ]
+            ]
+        ];
+
+        return $this->renderPdf($title, $subtitle, $refNo, $tables, "Student_Handbook_2026.pdf");
+    }
+
+    /**
+     * Exam Code of Conduct PDF Download
+     */
+    public function downloadExamCode(Request $request)
+    {
+        if (!$this->isAuthenticated($request)) {
+            return redirect()->route('students')->with('error', 'Please login first to download official academic documents!');
+        }
+
+        $title = "Exam Code of Conduct & Rules";
+        $subtitle = "Examination Hall Admission, Practical Station Rules & Disciplinary Code";
+        $refNo = "REF: EX-2026-RULES";
+
+        $tables = [
+            [
+                'title' => '1. EXAMINATION HALL ADMISSION RULES',
+                'headers' => ['Rule Item', 'Requirement Detail', 'Enforcement'],
+                'rows' => [
+                    ['Student Identification', 'Valid Student ID Card & Exam Admission Ticket required.', 'Strictly Enforced'],
+                    ['Entry Time Limit', 'Candidates admitted up to 30 minutes after commencement.', 'No extra time given'],
+                    ['Prohibited Items', 'Mobile phones, smartwatches, programmable notes, bags.', 'Immediate Confiscation']
+                ]
+            ],
+            [
+                'title' => '2. PRACTICAL DIAGNOSTIC EXAMINATIONS',
+                'headers' => ['Station Requirement', 'Procedure Standard', 'Evaluator Note'],
+                'rows' => [
+                    ['Station Attire', 'Clean workshop overall and non-slip safety shoes required.', 'Visual inspection at entry'],
+                    ['Tool Calibration', 'Verify diagnostic scan tools before beginning fault-finding.', 'Instructor verification'],
+                    ['Safety Shutoff', 'Always disengage high-voltage battery service plug first.', 'Immediate disqualification if missed']
+                ]
+            ]
+        ];
+
+        return $this->renderPdf($title, $subtitle, $refNo, $tables, "Exam_Code_of_Conduct_2026.pdf");
+    }
+
+    /**
+     * Student Helpdesk Guide PDF Download
+     */
+    public function downloadHelpdeskGuide(Request $request)
+    {
+        if (!$this->isAuthenticated($request)) {
+            return redirect()->route('students')->with('error', 'Please login first to download official academic documents!');
+        }
+
+        $title = "Student Helpdesk & Support Directory";
+        $subtitle = "Portal Assistance, Technical Enquiries & Department Contact List";
+        $refNo = "REF: HD-2026-SUPP";
+
+        $tables = [
+            [
+                'title' => '1. PORTAL & IT SUPPORT CHANNELS',
+                'headers' => ['Support Issue', 'Resolution Method', 'Response Time'],
+                'rows' => [
+                    ['Password & PIN Reset', 'Self-service PIN reset or visit IT Help Desk (Level 2)', 'Instant / 15 Mins'],
+                    ['Module Material Access', 'Email portal-support@autoedu.lk with Student ID', 'Within 2 Hours'],
+                    ['Wi-Fi & Email Setup', 'Visit Student IT Counter with Student ID Card', 'Immediate']
+                ]
+            ],
+            [
+                'title' => '2. DEPARTMENT CONTACT DIRECTORY',
+                'headers' => ['Department Name', 'Location', 'Extension', 'Official Email'],
+                'rows' => [
+                    ['Student Affairs & Registration', 'Admin Block - Ground Floor', 'Ext. 101', 'students@autoedu.lk'],
+                    ['Finance & Tuition Payments', 'Admin Block - Room 104', 'Ext. 104', 'finance@autoedu.lk'],
+                    ['Examinations & Results Branch', 'Academic Wing - Room 202', 'Ext. 108', 'exams@autoedu.lk'],
+                    ['Automotive Workshop Office', 'Lab Complex - Block B', 'Ext. 112', 'workshop@autoedu.lk']
+                ]
+            ]
+        ];
+
+        return $this->renderPdf($title, $subtitle, $refNo, $tables, "Student_Helpdesk_Support_Guide.pdf");
+    }
+
+    /**
+     * Render HTML to DomPDF output
+     */
+    private function renderPdf($title, $subtitle, $refNo, $tables, $filename)
+    {
+        $studentName = session('student_name', 'Authenticated Student');
+        $studentId = session('student_id', 'STU-2026-0042');
+        $dateStr = date('F d, Y');
+
+        $tablesHtml = '';
+        foreach ($tables as $table) {
+            $tablesHtml .= '<div class="section-header">' . htmlspecialchars($table['title']) . '</div>';
+            $tablesHtml .= '<table class="content-table"><thead><tr>';
+            foreach ($table['headers'] as $th) {
+                $tablesHtml .= '<th>' . htmlspecialchars($th) . '</th>';
+            }
+            $tablesHtml .= '</tr></thead><tbody>';
+            foreach ($table['rows'] as $row) {
+                $tablesHtml .= '<tr>';
+                foreach ($row as $cell) {
+                    $tablesHtml .= '<td>' . htmlspecialchars($cell) . '</td>';
+                }
+                $tablesHtml .= '</tr>';
+            }
+            $tablesHtml .= 'tbody></table>';
+        }
+
+        $html = '
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <meta charset="utf-8">
+            <title>' . htmlspecialchars($title) . '</title>
+            <style>
+                @page { margin: 25px 35px; }
+                body { font-family: "Helvetica", "Arial", sans-serif; color: #1E293B; font-size: 11px; line-height: 1.5; }
+                
+                .header-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; border-bottom: 3px solid #3E51B8; padding-bottom: 10px; }
+                .logo-title { font-size: 20px; font-weight: bold; color: #0F172A; text-transform: uppercase; letter-spacing: 0.5px; }
+                .logo-sub { font-size: 10px; color: #64748B; margin-top: 3px; font-weight: normal; }
+                .meta-badge { background: #0F172A; color: #FFE618; font-size: 9.5px; font-weight: bold; padding: 4px 10px; border-radius: 4px; display: inline-block; text-align: right; }
+                
+                .doc-banner { background: #3E51B8; color: #ffffff; padding: 14px 18px; border-radius: 6px; margin-bottom: 18px; }
+                .doc-banner h1 { margin: 0; font-size: 16px; font-weight: bold; text-transform: uppercase; }
+                .doc-banner p { margin: 4px 0 0 0; font-size: 10.5px; color: #E2E8F0; }
+                
+                .student-info-bar { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 6px; padding: 8px 14px; margin-bottom: 18px; width: 100%; border-collapse: collapse; }
+                .student-info-bar td { font-size: 10px; color: #334155; }
+                .student-info-bar td strong { color: #0F172A; }
+
+                .section-header { background: #F1F5F9; border-left: 4px solid #BC1A1A; padding: 6px 10px; font-size: 11.5px; font-weight: bold; color: #0F172A; margin-top: 16px; margin-bottom: 8px; text-transform: uppercase; }
+                
+                .content-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
+                .content-table th { background: #3E51B8; color: #ffffff; padding: 7px 10px; text-align: left; font-size: 10px; text-transform: uppercase; font-weight: bold; }
+                .content-table td { padding: 7px 10px; border-bottom: 1px solid #E2E8F0; font-size: 10.5px; color: #334155; }
+                .content-table tr:nth-child(even) td { background: #F8FAFC; }
+                
+                .footer-box { margin-top: 25px; border-top: 1px solid #CBD5E1; padding-top: 10px; width: 100%; border-collapse: collapse; }
+                .footer-box td { font-size: 9px; color: #64748B; }
+                .stamp-box { border: 1.5px dashed #94A3B8; border-radius: 6px; padding: 8px; text-align: center; color: #475569; font-size: 8.5px; font-weight: bold; }
+            </style>
+        </head>
+        <body>
+
+            <!-- Header -->
+            <table class="header-table">
+                <tr>
+                    <td>
+                        <div class="logo-title">AutoEdu Automotive Academy</div>
+                        <div class="logo-sub">Department of Automotive Engineering & Applied Research | ISO 9001 Certified</div>
+                    </td>
+                    <td style="text-align: right;">
+                        <div class="meta-badge">' . htmlspecialchars($refNo) . '</div>
+                    </td>
+                </tr>
+            </table>
+
+            <!-- Document Banner -->
+            <div class="doc-banner">
+                <h1>' . htmlspecialchars($title) . '</h1>
+                <p>' . htmlspecialchars($subtitle) . '</p>
+            </div>
+
+            <!-- Student Info Bar -->
+            <table class="student-info-bar">
+                <tr>
+                    <td>Issued To: <strong>' . htmlspecialchars($studentName) . '</strong></td>
+                    <td>Student ID: <strong>' . htmlspecialchars($studentId) . '</strong></td>
+                    <td style="text-align: right;">Issue Date: <strong>' . htmlspecialchars($dateStr) . '</strong></td>
+                </tr>
+            </table>
+
+            <!-- Main Content Tables -->
+            ' . $tablesHtml . '
+
+            <!-- Footer -->
+            <table class="footer-box">
+                <tr>
+                    <td style="vertical-align: top;">
+                        <strong>AutoEdu Automotive Engineering Institute</strong><br>
+                        Main Campus, Academic Complex, Colombo, Sri Lanka<br>
+                        Hotline: +94 11 234 5678 | Email: support@autoedu.lk | Web: www.autoedu.lk<br>
+                        <em>Notice: This is an official computer-generated document verified for active student session.</em>
+                    </td>
+                    <td style="text-align: right; vertical-align: top; width: 150px;">
+                        <div class="stamp-box">
+                            <span style="color: #BC1A1A; font-weight: bold;">[ OFFICIAL SEAL ]</span><br>
+                            AUTHENTICATED DIGITAL COPY
+                        </div>
+                    </td>
+                </tr>
+            </table>
+
+        </body>
+        </html>
+        ';
+
+        try {
+            $options = new Options();
+            $options->set('isHtml5ParserEnabled', true);
+            $options->set('isRemoteEnabled', true);
+            
+            $dompdf = new Dompdf($options);
+            $dompdf->loadHtml($html);
+            $dompdf->setPaper('A4', 'portrait');
+            $dompdf->render();
+
+            return response($dompdf->output(), 200, [
+                'Content-Type' => 'application/pdf',
+                'Content-Disposition' => 'attachment; filename="' . $filename . '"',
+                'Cache-Control' => 'private, max-age=0, must-revalidate',
+                'Pragma' => 'public'
+            ]);
+        } catch (\Exception $e) {
+            // Fallback response if rendering fails
+            return response($html, 200, [
+                'Content-Type' => 'text/html',
+            ]);
+        }
+    }
+}

app/Http/Controllers/StudentPortalController.php

@@ -80,14 +80,126 @@ class StudentPortalController extends Controller
             return view('StudentProfile', compact('student'));
         }
 
-    public function studentlogout(Request $request)
+    public function updateProfile(Request $request)
-        {
+    {
-            $request->session()->forget(['student_id', 'student_log_id', 'student_name']);
+        $log_id = $request->session()->get('student_log_id');
-            $request->session()->invalidate();
+        $student_code = $request->session()->get('student_id');
-            $request->session()->regenerateToken();
 
-            return response()->json(['success' => true]);
+        if (!$log_id && !$student_code) {
+            return redirect('/')->with('error', 'Please login first!');
         }
 
-    
+        $request->validate([
+            'full_name'      => 'required|string|max:255',
+            'nic_passport'   => 'nullable|string|max:100',
+            'date_of_birth'  => 'nullable|date',
+            'gender'         => 'nullable|string|max:20',
+            'email'          => 'required|email|max:255',
+            'phone'          => 'nullable|string|max:50',
+            'qualification'  => 'nullable|string|max:255',
+            'institute'      => 'nullable|string|max:255',
+            'year_completed' => 'nullable|string|max:50',
+            'profile_image'  => 'nullable|image|mimes:jpeg,png,jpg,gif|max:5120',
+        ]);
+
+        $student = DB::table('student_details')
+            ->where(function ($query) use ($log_id, $student_code) {
+                if ($log_id) {
+                    $query->where('student_portal_log_id', $log_id);
+                }
+                if ($student_code) {
+                    if ($log_id) {
+                        $query->orWhere('student_id', $student_code);
+                    } else {
+                        $query->where('student_id', $student_code);
+                    }
+                }
+            })
+            ->first();
+
+        if (!$student) {
+            return redirect()->back()->with('error', 'Student profile record not found!');
+        }
+
+        $updateData = [
+            'full_name'      => $request->full_name,
+            'nic_passport'   => $request->nic_passport,
+            'date_of_birth'  => $request->date_of_birth,
+            'gender'         => $request->gender,
+            'email'          => $request->email,
+            'phone'          => $request->phone,
+            'qualification'  => $request->qualification,
+            'institute'      => $request->institute,
+            'year_completed' => $request->year_completed,
+            'updated_at'     => now(),
+        ];
+
+        // 1. Check if user requested to REMOVE image
+        if ($request->input('remove_profile_image') == '1') {
+            if (!empty($student->image) && file_exists(public_path($student->image))) {
+                @unlink(public_path($student->image));
+            }
+            $updateData['image'] = null;
+        } 
+        // 2. Check if user provided CROPPED Base64 image
+        elseif (!empty($request->input('cropped_image_data'))) {
+            $base64Image = $request->input('cropped_image_data');
+            if (preg_match('/^data:image\/(\w+);base64,/', $base64Image, $type)) {
+                $data = substr($base64Image, strpos($base64Image, ',') + 1);
+                $type = strtolower($type[1]);
+                if (in_array($type, ['jpg', 'jpeg', 'gif', 'png'])) {
+                    $data = base64_decode($data);
+                    if ($data !== false) {
+                        $filename = time() . '_' . uniqid() . '.png';
+                        $destinationPath = public_path('uploads/student_images');
+                        if (!file_exists($destinationPath)) {
+                            mkdir($destinationPath, 0777, true);
+                        }
+                        file_put_contents($destinationPath . '/' . $filename, $data);
+                        
+                        // Delete old image if existed
+                        if (!empty($student->image) && file_exists(public_path($student->image))) {
+                            @unlink(public_path($student->image));
+                        }
+                        
+                        $updateData['image'] = 'uploads/student_images/' . $filename;
+                    }
+                }
+            }
+        } 
+        // 3. Fallback to normal direct file upload
+        elseif ($request->hasFile('profile_image')) {
+            $file = $request->file('profile_image');
+            $filename = time() . '_' . uniqid() . '.' . $file->getClientOriginalExtension();
+            $destinationPath = public_path('uploads/student_images');
+            if (!file_exists($destinationPath)) {
+                mkdir($destinationPath, 0777, true);
+            }
+            $file->move($destinationPath, $filename);
+            
+            if (!empty($student->image) && file_exists(public_path($student->image))) {
+                @unlink(public_path($student->image));
+            }
+            
+            $updateData['image'] = 'uploads/student_images/' . $filename;
+        }
+
+        DB::table('student_details')
+            ->where('id', $student->id)
+            ->update($updateData);
+
+        if (!empty($student->student_portal_log_id)) {
+            DB::table('student_portal_logs')
+                ->where('id', $student->student_portal_log_id)
+                ->update([
+                    'email' => $request->email,
+                    'updated_at' => now(),
+                ]);
+        }
+
+        $request->session()->put('student_name', $request->full_name);
+        $request->session()->put('student_email', $request->email);
+
+        return redirect()->back()->with('success', 'Profile updated successfully!');
+    }
 }

composer.json

@@ -7,6 +7,7 @@
     "license": "MIT",
     "require": {
         "php": "^8.2",
+        "barryvdh/laravel-dompdf": "^3.1",
         "laravel/framework": "^12.0",
         "laravel/tinker": "^2.10.1"
     },

composer.lock

@@ -4,8 +4,85 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "53b5d56b3b7e3cbac1713e68c8850f6c",
+    "content-hash": "bf969a713724ba1caaf90ec885c262c2",
     "packages": [
+        {
+            "name": "barryvdh/laravel-dompdf",
+            "version": "v3.1.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/barryvdh/laravel-dompdf.git",
+                "reference": "ee3b72b19ccdf57d0243116ecb2b90261344dedc"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/barryvdh/laravel-dompdf/zipball/ee3b72b19ccdf57d0243116ecb2b90261344dedc",
+                "reference": "ee3b72b19ccdf57d0243116ecb2b90261344dedc",
+                "shasum": ""
+            },
+            "require": {
+                "dompdf/dompdf": "^3.0",
+                "illuminate/support": "^9|^10|^11|^12|^13.0",
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "larastan/larastan": "^2.7|^3.0",
+                "orchestra/testbench": "^7|^8|^9.16|^10|^11.0",
+                "phpro/grumphp": "^2.5",
+                "squizlabs/php_codesniffer": "^3.5"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "aliases": {
+                        "PDF": "Barryvdh\\DomPDF\\Facade\\Pdf",
+                        "Pdf": "Barryvdh\\DomPDF\\Facade\\Pdf"
+                    },
+                    "providers": [
+                        "Barryvdh\\DomPDF\\ServiceProvider"
+                    ]
+                },
+                "branch-alias": {
+                    "dev-master": "3.0-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Barryvdh\\DomPDF\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Barry vd. Heuvel",
+                    "email": "barryvdh@gmail.com"
+                }
+            ],
+            "description": "A DOMPDF Wrapper for Laravel",
+            "keywords": [
+                "dompdf",
+                "laravel",
+                "pdf"
+            ],
+            "support": {
+                "issues": "https://github.com/barryvdh/laravel-dompdf/issues",
+                "source": "https://github.com/barryvdh/laravel-dompdf/tree/v3.1.2"
+            },
+            "funding": [
+                {
+                    "url": "https://fruitcake.nl",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/barryvdh",
+                    "type": "github"
+                }
+            ],
+            "time": "2026-02-21T08:51:10+00:00"
+        },
         {
             "name": "brick/math",
             "version": "0.14.8",
@@ -377,6 +454,161 @@
             ],
             "time": "2024-02-05T11:56:58+00:00"
         },
+        {
+            "name": "dompdf/dompdf",
+            "version": "v3.1.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dompdf/dompdf.git",
+                "reference": "6d4b4eb8500f7a786da8868ba463a71b725a4005"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dompdf/dompdf/zipball/6d4b4eb8500f7a786da8868ba463a71b725a4005",
+                "reference": "6d4b4eb8500f7a786da8868ba463a71b725a4005",
+                "shasum": ""
+            },
+            "require": {
+                "dompdf/php-font-lib": "^1.0.0",
+                "dompdf/php-svg-lib": "^1.0.0",
+                "ext-dom": "*",
+                "ext-mbstring": "*",
+                "masterminds/html5": "^2.0",
+                "php": "^7.1 || ^8.0"
+            },
+            "require-dev": {
+                "ext-gd": "*",
+                "ext-json": "*",
+                "ext-zip": "*",
+                "mockery/mockery": "^1.3",
+                "phpunit/phpunit": "^7.5 || ^8 || ^9 || ^10 || ^11",
+                "squizlabs/php_codesniffer": "^3.5",
+                "symfony/process": "^4.4 || ^5.4 || ^6.2 || ^7.0"
+            },
+            "suggest": {
+                "ext-gd": "Needed to process images",
+                "ext-gmagick": "Improves image processing performance",
+                "ext-imagick": "Improves image processing performance",
+                "ext-zlib": "Needed for pdf stream compression"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Dompdf\\": "src/"
+                },
+                "classmap": [
+                    "lib/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-2.1"
+            ],
+            "authors": [
+                {
+                    "name": "The Dompdf Community",
+                    "homepage": "https://github.com/dompdf/dompdf/blob/master/AUTHORS.md"
+                }
+            ],
+            "description": "DOMPDF is a CSS 2.1 compliant HTML to PDF converter",
+            "homepage": "https://github.com/dompdf/dompdf",
+            "support": {
+                "issues": "https://github.com/dompdf/dompdf/issues",
+                "source": "https://github.com/dompdf/dompdf/tree/v3.1.6"
+            },
+            "time": "2026-07-20T12:29:38+00:00"
+        },
+        {
+            "name": "dompdf/php-font-lib",
+            "version": "1.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dompdf/php-font-lib.git",
+                "reference": "a6e9a688a2a80016ac080b97be73d3e10c444c9a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dompdf/php-font-lib/zipball/a6e9a688a2a80016ac080b97be73d3e10c444c9a",
+                "reference": "a6e9a688a2a80016ac080b97be73d3e10c444c9a",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": "^7.1 || ^8.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^7.5 || ^8 || ^9 || ^10 || ^11 || ^12"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "FontLib\\": "src/FontLib"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-2.1-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "The FontLib Community",
+                    "homepage": "https://github.com/dompdf/php-font-lib/blob/master/AUTHORS.md"
+                }
+            ],
+            "description": "A library to read, parse, export and make subsets of different types of font files.",
+            "homepage": "https://github.com/dompdf/php-font-lib",
+            "support": {
+                "issues": "https://github.com/dompdf/php-font-lib/issues",
+                "source": "https://github.com/dompdf/php-font-lib/tree/1.0.2"
+            },
+            "time": "2026-01-20T14:10:26+00:00"
+        },
+        {
+            "name": "dompdf/php-svg-lib",
+            "version": "1.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dompdf/php-svg-lib.git",
+                "reference": "8259ffb930817e72b1ff1caef5d226501f3dfeb1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dompdf/php-svg-lib/zipball/8259ffb930817e72b1ff1caef5d226501f3dfeb1",
+                "reference": "8259ffb930817e72b1ff1caef5d226501f3dfeb1",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": "^7.1 || ^8.0",
+                "sabberworm/php-css-parser": "^8.4 || ^9.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^7.5 || ^8 || ^9 || ^10 || ^11"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Svg\\": "src/Svg"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-3.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "The SvgLib Community",
+                    "homepage": "https://github.com/dompdf/php-svg-lib/blob/master/AUTHORS.md"
+                }
+            ],
+            "description": "A library to read, parse and export to PDF SVG files.",
+            "homepage": "https://github.com/dompdf/php-svg-lib",
+            "support": {
+                "issues": "https://github.com/dompdf/php-svg-lib/issues",
+                "source": "https://github.com/dompdf/php-svg-lib/tree/1.0.2"
+            },
+            "time": "2026-01-02T16:01:13+00:00"
+        },
         {
             "name": "dragonmantank/cron-expression",
             "version": "v3.6.0",
@@ -2025,6 +2257,73 @@
             ],
             "time": "2026-03-08T20:05:35+00:00"
         },
+        {
+            "name": "masterminds/html5",
+            "version": "2.10.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Masterminds/html5-php.git",
+                "reference": "fd5018f6815fff903946d0564977b44ce8010e29"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Masterminds/html5-php/zipball/fd5018f6815fff903946d0564977b44ce8010e29",
+                "reference": "fd5018f6815fff903946d0564977b44ce8010e29",
+                "shasum": ""
+            },
+            "require": {
+                "ext-dom": "*",
+                "php": ">=5.3.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^4.8.35 || ^5.7.21 || ^6 || ^7 || ^8 || ^9 || ^10"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.7-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Masterminds\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Matt Butcher",
+                    "email": "technosophos@gmail.com"
+                },
+                {
+                    "name": "Matt Farina",
+                    "email": "matt@mattfarina.com"
+                },
+                {
+                    "name": "Asmir Mustafic",
+                    "email": "goetas@gmail.com"
+                }
+            ],
+            "description": "An HTML5 parser and serializer.",
+            "homepage": "http://masterminds.github.io/html5-php",
+            "keywords": [
+                "HTML5",
+                "dom",
+                "html",
+                "parser",
+                "querypath",
+                "serializer",
+                "xml"
+            ],
+            "support": {
+                "issues": "https://github.com/Masterminds/html5-php/issues",
+                "source": "https://github.com/Masterminds/html5-php/tree/2.10.1"
+            },
+            "time": "2026-06-23T18:43:15+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "3.10.0",
@@ -3299,6 +3598,86 @@
             },
             "time": "2026-06-18T03:57:49+00:00"
         },
+        {
+            "name": "sabberworm/php-css-parser",
+            "version": "v9.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/MyIntervals/PHP-CSS-Parser.git",
+                "reference": "fd3bf9fb173e0df649bc4e3e0d088a1b2417c08f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/MyIntervals/PHP-CSS-Parser/zipball/fd3bf9fb173e0df649bc4e3e0d088a1b2417c08f",
+                "reference": "fd3bf9fb173e0df649bc4e3e0d088a1b2417c08f",
+                "shasum": ""
+            },
+            "require": {
+                "ext-iconv": "*",
+                "php": "^7.2.0 || ~8.0.0 || ~8.1.0 || ~8.2.0 || ~8.3.0 || ~8.4.0 || ~8.5.0",
+                "thecodingmachine/safe": "^1.3 || ^2.5 || ^3.4"
+            },
+            "require-dev": {
+                "php-parallel-lint/php-parallel-lint": "1.4.0",
+                "phpstan/extension-installer": "1.4.3",
+                "phpstan/phpstan": "1.12.33 || 2.2.2",
+                "phpstan/phpstan-phpunit": "1.4.2 || 2.0.16",
+                "phpstan/phpstan-strict-rules": "1.6.2 || 2.0.11",
+                "phpunit/phpunit": "8.5.52",
+                "rawr/phpunit-data-provider": "3.3.1",
+                "rector/rector": "1.2.10 || 2.4.6",
+                "rector/type-perfect": "1.0.0 || 2.1.3",
+                "squizlabs/php_codesniffer": "4.0.1",
+                "thecodingmachine/phpstan-safe-rule": "1.2.0 || 1.4.3"
+            },
+            "suggest": {
+                "ext-mbstring": "for parsing UTF-8 CSS"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "9.5.x-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/Rule/Rule.php",
+                    "src/RuleSet/RuleContainer.php"
+                ],
+                "psr-4": {
+                    "Sabberworm\\CSS\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Raphael Schweikert"
+                },
+                {
+                    "name": "Oliver Klee",
+                    "email": "github@oliverklee.de"
+                },
+                {
+                    "name": "Jake Hotson",
+                    "email": "jake.github@qzdesign.co.uk"
+                }
+            ],
+            "description": "Parser for CSS Files written in PHP",
+            "homepage": "https://www.sabberworm.com/blog/2010/6/10/php-css-parser",
+            "keywords": [
+                "css",
+                "parser",
+                "stylesheet"
+            ],
+            "support": {
+                "issues": "https://github.com/MyIntervals/PHP-CSS-Parser/issues",
+                "source": "https://github.com/MyIntervals/PHP-CSS-Parser/tree/v9.4.0"
+            },
+            "time": "2026-06-18T15:10:53+00:00"
+        },
         {
             "name": "symfony/clock",
             "version": "v7.4.8",
@@ -5808,6 +6187,149 @@
             ],
             "time": "2026-06-08T20:24:16+00:00"
         },
+        {
+            "name": "thecodingmachine/safe",
+            "version": "v3.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thecodingmachine/safe.git",
+                "reference": "705683a25bacf0d4860c7dea4d7947bfd09eea19"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thecodingmachine/safe/zipball/705683a25bacf0d4860c7dea4d7947bfd09eea19",
+                "reference": "705683a25bacf0d4860c7dea4d7947bfd09eea19",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "php-parallel-lint/php-parallel-lint": "^1.4",
+                "phpstan/phpstan": "^2",
+                "phpunit/phpunit": "^10",
+                "squizlabs/php_codesniffer": "^3.2"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "lib/special_cases.php",
+                    "generated/apache.php",
+                    "generated/apcu.php",
+                    "generated/array.php",
+                    "generated/bzip2.php",
+                    "generated/calendar.php",
+                    "generated/classobj.php",
+                    "generated/com.php",
+                    "generated/cubrid.php",
+                    "generated/curl.php",
+                    "generated/datetime.php",
+                    "generated/dir.php",
+                    "generated/eio.php",
+                    "generated/errorfunc.php",
+                    "generated/exec.php",
+                    "generated/fileinfo.php",
+                    "generated/filesystem.php",
+                    "generated/filter.php",
+                    "generated/fpm.php",
+                    "generated/ftp.php",
+                    "generated/funchand.php",
+                    "generated/gettext.php",
+                    "generated/gmp.php",
+                    "generated/gnupg.php",
+                    "generated/hash.php",
+                    "generated/ibase.php",
+                    "generated/ibmDb2.php",
+                    "generated/iconv.php",
+                    "generated/image.php",
+                    "generated/imap.php",
+                    "generated/info.php",
+                    "generated/inotify.php",
+                    "generated/json.php",
+                    "generated/ldap.php",
+                    "generated/libxml.php",
+                    "generated/lzf.php",
+                    "generated/mailparse.php",
+                    "generated/mbstring.php",
+                    "generated/misc.php",
+                    "generated/mysql.php",
+                    "generated/mysqli.php",
+                    "generated/network.php",
+                    "generated/oci8.php",
+                    "generated/opcache.php",
+                    "generated/openssl.php",
+                    "generated/outcontrol.php",
+                    "generated/pcntl.php",
+                    "generated/pcre.php",
+                    "generated/pgsql.php",
+                    "generated/posix.php",
+                    "generated/ps.php",
+                    "generated/pspell.php",
+                    "generated/readline.php",
+                    "generated/rnp.php",
+                    "generated/rpminfo.php",
+                    "generated/rrd.php",
+                    "generated/sem.php",
+                    "generated/session.php",
+                    "generated/shmop.php",
+                    "generated/sockets.php",
+                    "generated/sodium.php",
+                    "generated/solr.php",
+                    "generated/spl.php",
+                    "generated/sqlsrv.php",
+                    "generated/ssdeep.php",
+                    "generated/ssh2.php",
+                    "generated/stream.php",
+                    "generated/strings.php",
+                    "generated/swoole.php",
+                    "generated/uodbc.php",
+                    "generated/uopz.php",
+                    "generated/url.php",
+                    "generated/var.php",
+                    "generated/xdiff.php",
+                    "generated/xml.php",
+                    "generated/xmlrpc.php",
+                    "generated/yaml.php",
+                    "generated/yaz.php",
+                    "generated/zip.php",
+                    "generated/zlib.php"
+                ],
+                "classmap": [
+                    "lib/DateTime.php",
+                    "lib/DateTimeImmutable.php",
+                    "lib/Exceptions/",
+                    "generated/Exceptions/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "PHP core functions that throw exceptions instead of returning FALSE on error",
+            "support": {
+                "issues": "https://github.com/thecodingmachine/safe/issues",
+                "source": "https://github.com/thecodingmachine/safe/tree/v3.4.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/OskarStark",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/shish",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/silasjoisten",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/staabm",
+                    "type": "github"
+                }
+            ],
+            "time": "2026-02-04T18:08:13+00:00"
+        },
         {
             "name": "tijsverkoyen/css-to-inline-styles",
             "version": "v2.4.0",

resources/views/StudentPortal.blade.php

@@ -1,294 +1,494 @@
 @extends('layouts.studentportalnav')
 
-@section('title', 'Dashboard')
+@section('title', 'Student Dashboard')
 
 @section('content')
 
 <style>
 :root {
-    --theme-navy: #2D355B;        /* Primary Dark Navy */
+    --theme-navy: #1E233E;
-    --theme-footer-navy: #1F2541; /* Darker Navy */
+    --theme-navy-dark: #15182C;
-    --theme-red: #822424;         /* Primary Accent Red */
+    --theme-red: #822424;
-    --theme-red-hover: #df2c3e;   /* Red Hover State */
+    --theme-red-hover: #df2c3e;
-    --theme-yellow: #FFEA85;      /* Accent Gold/Yellow */
+    --theme-yellow: #FFEA85;
-    --theme-bg: #F6F6F6;          /* Page Background */
+    --theme-bg: #F4F6F9;
-    --text-dark: #333333;
+    --text-dark: #1E293B;
 }
 
-body {
+/* Welcome Banner */
-    background-color: var(--theme-bg);
+.welcome-banner {
-    color: var(--text-dark);
+    background: linear-gradient(135deg, #1E233E 0%, #2A1F3B 50%, #4A1A24 100%);
+    position: relative;
+    overflow: hidden;
+    border: none;
+    box-shadow: 0 10px 30px rgba(30, 35, 62, 0.15);
 }
 
-/* Header */
+.welcome-banner::before {
-.dashboard-header {
+    content: '';
-    display: flex;
+    position: absolute;
-    justify-content: space-between;
+    top: -50%;
-    align-items: center;
+    right: -10%;
-    margin-bottom: 30px;
+    width: 350px;
-    padding-bottom: 15px;
+    height: 350px;
-    border-bottom: 2px solid #e2e8f0;
+    background: radial-gradient(circle, rgba(255, 234, 133, 0.12) 0%, rgba(255, 234, 133, 0) 70%);
-}
-
-.dashboard-header h2 {
-    font-weight: 700;
-    color: var(--theme-navy);
-    margin-bottom: 5px;
-}
-
-.dashboard-header p {
-    color: #6c757d;
-    margin: 0;
-    font-size: 0.95rem;
-}
-
-.avatar {
-    width: 55px;
-    height: 55px;
     border-radius: 50%;
-    background: var(--theme-navy);
+    pointer-events: none;
-    color: var(--theme-yellow);
+}
+
+.user-avatar-badge {
+    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
+}
+
+.avatar-circle {
+    width: 52px;
+    height: 52px;
+    border-radius: 14px;
+    background: linear-gradient(135deg, #FFEA85 0%, #F59E0B 100%);
+    color: #1E233E;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-weight: bold;
+    font-weight: 800;
-    font-size: 20px;
+    font-size: 22px;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
 }
 
-/* Statistic Cards */
+/* Stat Cards Modern */
-.stat-card {
+.stat-card-modern {
     background: #ffffff;
-    border-radius: 12px;
+    border-radius: 16px;
     padding: 24px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    border: 1px solid #E2E8F0;
-    transition: all 0.3s ease;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    position: relative;
     height: 100%;
-    border: 1px solid #e2e8f0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
-.stat-card:hover {
+.stat-card-modern:hover {
     transform: translateY(-5px);
-    box-shadow: 0 8px 20px rgba(45, 53, 91, 0.12);
+    box-shadow: 0 12px 28px rgba(30, 35, 62, 0.1);
-    border-color: var(--theme-navy);
+    border-color: rgba(30, 35, 62, 0.2);
 }
 
-.stat-icon {
+.stat-icon-wrapper {
-    width: 55px;
+    width: 52px;
-    height: 55px;
+    height: 52px;
-    border-radius: 10px;
+    border-radius: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #ffffff;
     font-size: 22px;
-    margin-bottom: 16px;
+    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
 }
 
-.stat-card h3 {
+.stat-number {
-    font-weight: 700;
+    font-size: 2.1rem;
-    color: var(--theme-navy);
+    font-weight: 800;
-    margin-bottom: 4px;
+    color: #0F172A;
+    line-height: 1.2;
+    margin-bottom: 2px;
+    letter-spacing: -0.5px;
 }
 
-.stat-card p {
+.stat-label {
-    color: #6c757d;
+    color: #64748B;
     font-size: 0.9rem;
     font-weight: 600;
-    margin: 0;
 }
 
-/* Services */
+/* Section Title Accent */
-.section-title {
+.title-accent {
-    font-size: 22px;
+    width: 6px;
-    font-weight: 700;
+    height: 24px;
-    color: var(--theme-navy);
+    background: linear-gradient(180deg, var(--theme-red) 0%, var(--theme-red-hover) 100%);
-    margin: 40px 0 20px;
+    border-radius: 4px;
+    display: inline-block;
+}
+
+/* Modern Service Card */
+.service-card-modern {
+    background: #ffffff;
+    border-radius: 16px;
+    padding: 28px 24px;
+    border: 1px solid #E2E8F0;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    text-decoration: none !important;
+}
+
+.service-card-modern:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 16px 32px rgba(130, 36, 36, 0.1);
+    border-color: rgba(130, 36, 36, 0.3);
+}
+
+.service-icon-box {
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
     display: flex;
     align-items: center;
-    gap: 10px;
+    justify-content: center;
-}
+    font-size: 24px;
-
+    margin-bottom: 20px;
-.section-title::before {
+    background: rgba(130, 36, 36, 0.08);
-    content: '';
-    display: inline-block;
-    width: 5px;
-    height: 24px;
-    background-color: var(--theme-red);
-    border-radius: 2px;
-}
-
-.service-card {
-    background: #ffffff;
-    border-radius: 12px;
-    padding: 30px 20px;
-    text-align: center;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-    height: 100%;
-    border: 1px solid #e2e8f0;
-}
-
-.service-card:hover {
-    transform: translateY(-6px);
-    box-shadow: 0 8px 22px rgba(0,0,0,0.1);
-    border-color: var(--theme-red);
-}
-
-.service-card i {
-    font-size: 40px;
     color: var(--theme-red);
-    margin-bottom: 16px;
+    transition: all 0.3s ease;
-    transition: transform 0.3s ease, color 0.3s ease;
 }
 
-.service-card:hover i {
+.service-card-modern:hover .service-icon-box {
-    transform: scale(1.1);
+    background: var(--theme-red);
+    color: #ffffff;
+    transform: scale(1.08);
+    box-shadow: 0 6px 16px rgba(130, 36, 36, 0.3);
+}
+
+.service-card-modern h5 {
+    font-weight: 700;
+    color: #0F172A;
+    font-size: 1.1rem;
+    margin-bottom: 8px;
+}
+
+.service-card-modern p {
+    color: #64748B;
+    font-size: 0.88rem;
+    margin: 0;
+    line-height: 1.55;
+}
+
+.action-link {
+    font-weight: 700;
+    font-size: 0.85rem;
+    color: var(--theme-red);
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 18px;
+    transition: gap 0.2s ease, color 0.2s ease;
+}
+
+.service-card-modern:hover .action-link {
+    gap: 10px;
     color: var(--theme-red-hover);
 }
 
-.service-card h5 {
+/* Document Card */
-    font-weight: 700;
+.doc-card {
-    color: var(--theme-navy);
+    background: #ffffff;
-    margin-bottom: 10px;
+    border-radius: 16px;
+    padding: 24px 20px;
+    border: 1px solid #E2E8F0;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    height: 100%;
 }
 
-.service-card p {
+.doc-card:hover {
-    color: #6c757d;
+    transform: translateY(-5px);
-    font-size: 13.5px;
+    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
-    margin: 0;
+    border-color: #CBD5E1;
-    line-height: 1.5;
+}
+
+.doc-icon-badge {
+    width: 52px;
+    height: 52px;
+    border-radius: 14px;
+    background: #FEF2F2;
+    color: #DC2626;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    margin: 0 auto 16px;
 }
 </style>
 
-<div class="container-fluid">
+<div class="portal-content-container">
 
-    <!-- Dashboard Header -->
+    <!-- Welcome Hero Banner -->
-    <div class="dashboard-header">
+    <div class="welcome-banner card rounded-4 mb-4">
-        <div>
+        <div class="card-body p-4 p-lg-5 d-flex align-items-center justify-content-between flex-wrap gap-3 position-relative" style="z-index: 1;">
-            <h2>Welcome Back, {{ Auth::check() ? Auth::user()->first_name : 'Student' }}!</h2>
+            <div>
-            <p>Manage your academic activities and course updates from your dashboard.</p>
+                <div class="d-flex align-items-center gap-2 mb-2 flex-wrap">
-        </div>
+                    <span class="badge bg-success bg-opacity-20 text-success border border-success border-opacity-20 px-3 py-2 rounded-pill fw-semibold" style="font-size: 0.78rem;">
-
+                        <i class="fa-solid fa-circle me-1" style="font-size: 7px; vertical-align: middle;"></i> Active Academic Year 2026
-        @if(Auth::check())
+                    </span>
-            <div class="avatar" title="{{ Auth::user()->first_name }}">
+                    <span class="text-white-50 small"><i class="fa-regular fa-calendar me-1"></i> {{ date('l, F j, Y') }}</span>
-                {{ strtoupper(substr(Auth::user()->first_name, 0, 1)) }}
+                </div>
+                <h2 class="fw-bold text-white mb-2" style="letter-spacing: -0.5px;">
+                    Welcome Back, {{ Auth::check() ? Auth::user()->first_name : 'Student' }}! 👋
+                </h2>
+                <p class="text-white-50 mb-0 fs-6" style="max-width: 580px;">
+                    Manage your academic activities, course schedules, and exam performance directly from your portal dashboard.
+                </p>
             </div>
-        @endif
+
+            @if(Auth::check())
+                <div class="user-avatar-badge d-flex align-items-center gap-3 bg-white bg-opacity-10 p-3 rounded-4 backdrop-blur border border-white border-opacity-10">
+                    <div class="avatar-circle">
+                        {{ strtoupper(substr(Auth::user()->first_name, 0, 1)) }}
+                    </div>
+                    <div class="text-white d-none d-sm-block">
+                        <div class="fw-bold fs-6">{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</div>
+                        <div class="small fst-italic text-warning opacity-75" style="font-size: 11px;">{{ Auth::user()->email }}</div>
+                    </div>
+                </div>
+            @endif
+        </div>
     </div>
 
-    <!-- Statistics Cards -->
+    <!-- Key Performance Metrics (Stat Cards) -->
-    <div class="row g-4">
+    <div class="row g-3 g-lg-4 mb-4">
 
-        <div class="col-lg-3 col-md-6">
+        <div class="col-xl-3 col-md-6">
-            <div class="stat-card">
+            <div class="stat-card-modern">
-                <div class="stat-icon" style="background: var(--theme-navy);">
+                <div class="d-flex align-items-center justify-content-between mb-3">
-                    <i class="fa-solid fa-book"></i>
+                    <div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);">
+                        <i class="fa-solid fa-book-open-reader"></i>
+                    </div>
+                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2.5 py-1.5 rounded-pill fw-semibold" style="font-size: 0.75rem;">
+                        <i class="fa-solid fa-circle-check me-1"></i> Active
+                    </span>
+                </div>
+                <div>
+                    <div class="stat-number">6</div>
+                    <div class="stat-label">Enrolled Courses</div>
                 </div>
-                <h3>6</h3>
-                <p>Enrolled Courses</p>
             </div>
         </div>
 
-        <div class="col-lg-3 col-md-6">
+        <div class="col-xl-3 col-md-6">
-            <div class="stat-card">
+            <div class="stat-card-modern">
-                <div class="stat-icon" style="background: #0d9488;">
+                <div class="d-flex align-items-center justify-content-between mb-3">
-                    <i class="fa-solid fa-file-lines"></i>
+                    <div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #10B981 0%, #047857 100%);">
+                        <i class="fa-solid fa-file-signature"></i>
+                    </div>
+                    <span class="badge bg-warning-subtle text-warning border border-warning-subtle px-2.5 py-1.5 rounded-pill fw-semibold" style="font-size: 0.75rem;">
+                        <i class="fa-solid fa-clock me-1"></i> Pending
+                    </span>
+                </div>
+                <div>
+                    <div class="stat-number">3</div>
+                    <div class="stat-label">Assignments Due</div>
                 </div>
-                <h3>3</h3>
-                <p>Assignments</p>
             </div>
         </div>
 
-        <div class="col-lg-3 col-md-6">
+        <div class="col-xl-3 col-md-6">
-            <div class="stat-card">
+            <div class="stat-card-modern">
-                <div class="stat-icon" style="background: #d97706;">
+                <div class="d-flex align-items-center justify-content-between mb-3">
-                    <i class="fa-solid fa-chart-column"></i>
+                    <div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);">
+                        <i class="fa-solid fa-chart-line"></i>
+                    </div>
+                    <span class="badge bg-success-subtle text-success border border-success-subtle px-2.5 py-1.5 rounded-pill fw-semibold" style="font-size: 0.75rem;">
+                        <i class="fa-solid fa-arrow-trend-up me-1"></i> Grade B+
+                    </span>
+                </div>
+                <div>
+                    <div class="stat-number">78%</div>
+                    <div class="stat-label">Average Result</div>
                 </div>
-                <h3>78%</h3>
-                <p>Average Result</p>
             </div>
         </div>
 
-        <div class="col-lg-3 col-md-6">
+        <div class="col-xl-3 col-md-6">
-            <div class="stat-card">
+            <div class="stat-card-modern">
-                <div class="stat-icon" style="background: var(--theme-red);">
+                <div class="d-flex align-items-center justify-content-between mb-3">
-                    <i class="fa-solid fa-bell"></i>
+                    <div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);">
+                        <i class="fa-solid fa-bell"></i>
+                    </div>
+                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2.5 py-1.5 rounded-pill fw-semibold" style="font-size: 0.75rem;">
+                        <i class="fa-solid fa-bullhorn me-1"></i> Upcoming
+                    </span>
+                </div>
+                <div>
+                    <div class="stat-number">2</div>
+                    <div class="stat-label">Exam Notices</div>
                 </div>
-                <h3>2</h3>
-                <p>Exam Notices</p>
             </div>
         </div>
 
     </div>
 
-    <!-- Student Services Section -->
+    <!-- Student Services Grid -->
-    <div class="section-title">
+    <div class="mb-4">
-        Student Services
+        <h5 class="fw-bold text-dark mb-3 d-flex align-items-center gap-2">
+            <span class="title-accent"></span> Student Services & Quick Actions
+        </h5>
+
+        <div class="row g-3 g-lg-4">
+
+            <div class="col-lg-4 col-md-6">
+                <a href="/mycourse" class="service-card-modern">
+                    <div>
+                        <div class="service-icon-box">
+                            <i class="fa-solid fa-book-bookmark"></i>
+                        </div>
+                        <h5>My Courses</h5>
+                        <p>Access all registered learning modules, video lectures, and syllabus materials.</p>
+                    </div>
+                    <div class="action-link">
+                        Explore Courses <i class="fa-solid fa-arrow-right"></i>
+                    </div>
+                </a>
+            </div>
+
+            <div class="col-lg-4 col-md-6">
+                <a href="/timetable" class="service-card-modern">
+                    <div>
+                        <div class="service-icon-box">
+                            <i class="fa-solid fa-calendar-days"></i>
+                        </div>
+                        <h5>Class Timetable</h5>
+                        <p>Check your weekly lecture schedules, classroom locations, and timing updates.</p>
+                    </div>
+                    <div class="action-link">
+                        View Schedule <i class="fa-solid fa-arrow-right"></i>
+                    </div>
+                </a>
+            </div>
+
+            <div class="col-lg-4 col-md-6">
+                <a href="/results" class="service-card-modern">
+                    <div>
+                        <div class="service-icon-box">
+                            <i class="fa-solid fa-award"></i>
+                        </div>
+                        <h5>Exam Results</h5>
+                        <p>Review semester examination grades, transcript records, and academic progress.</p>
+                    </div>
+                    <div class="action-link">
+                        View Marks <i class="fa-solid fa-arrow-right"></i>
+                    </div>
+                </a>
+            </div>
+
+            <div class="col-lg-4 col-md-6">
+                <a href="/Studentguidelines" class="service-card-modern">
+                    <div>
+                        <div class="service-icon-box">
+                            <i class="fa-solid fa-book-open"></i>
+                        </div>
+                        <h5>Student Guidelines</h5>
+                        <p>Read campus rules, academic regulations, safety procedures, and code of conduct.</p>
+                    </div>
+                    <div class="action-link">
+                        Read Guidelines <i class="fa-solid fa-arrow-right"></i>
+                    </div>
+                </a>
+            </div>
+
+            <div class="col-lg-4 col-md-6">
+                <a href="/Feedback&Complain" class="service-card-modern">
+                    <div>
+                        <div class="service-icon-box">
+                            <i class="fa-solid fa-comments"></i>
+                        </div>
+                        <h5>Feedback & Complaints</h5>
+                        <p>Submit inquiries, suggestions, or complaints directly to the student support team.</p>
+                    </div>
+                    <div class="action-link">
+                        Submit Inquiry <i class="fa-solid fa-arrow-right"></i>
+                    </div>
+                </a>
+            </div>
+
+            <div class="col-lg-4 col-md-6">
+                <a href="/StudentProfile" class="service-card-modern">
+                    <div>
+                        <div class="service-icon-box">
+                            <i class="fa-solid fa-id-card"></i>
+                        </div>
+                        <h5>Student Profile</h5>
+                        <p>View and update your personal contact details, credentials, and security PIN.</p>
+                    </div>
+                    <div class="action-link">
+                        Manage Profile <i class="fa-solid fa-arrow-right"></i>
+                    </div>
+                </a>
+            </div>
+
+        </div>
     </div>
 
-    <div class="row g-4">
+    <!-- Official Document Downloads Section -->
+    <div class="mb-5">
+        <h5 class="fw-bold text-dark mb-3 d-flex align-items-center gap-2">
+            <span class="title-accent"></span> Official Academic Documents (PDF)
+        </h5>
 
-        <div class="col-lg-4 col-md-6">
+        <div class="row g-3 g-lg-4">
-            <a href="/mycourse" class="text-decoration-none">
+            <div class="col-xl-3 col-md-6">
-                <div class="service-card">
+                <a href="{{ route('student.download.calendar') }}" class="text-decoration-none" target="_blank">
-                    <i class="fa-solid fa-book"></i>
+                    <div class="doc-card text-center">
-                    <h5>My Courses</h5>
+                        <div class="doc-icon-badge">
-                    <p>Access all learning materials, lectures, and course content.</p>
+                            <i class="fa-solid fa-file-pdf"></i>
-                </div>
+                        </div>
-            </a>
+                        <h6 class="fw-bold text-dark mb-1">Academic Calendar</h6>
+                        <small class="text-muted d-block mb-3">Semester dates & holidays</small>
+                        <span class="btn btn-sm btn-outline-danger rounded-pill px-3 fw-semibold">
+                            <i class="fa-solid fa-download me-1"></i> Download PDF
+                        </span>
+                    </div>
+                </a>
+            </div>
+
+            <div class="col-xl-3 col-md-6">
+                <a href="{{ route('student.download.handbook') }}" class="text-decoration-none" target="_blank">
+                    <div class="doc-card text-center">
+                        <div class="doc-icon-badge">
+                            <i class="fa-solid fa-file-pdf"></i>
+                        </div>
+                        <h6 class="fw-bold text-dark mb-1">Student Handbook</h6>
+                        <small class="text-muted d-block mb-3">Campus rules & policies</small>
+                        <span class="btn btn-sm btn-outline-danger rounded-pill px-3 fw-semibold">
+                            <i class="fa-solid fa-download me-1"></i> Download PDF
+                        </span>
+                    </div>
+                </a>
+            </div>
+
+            <div class="col-xl-3 col-md-6">
+                <a href="{{ route('student.download.examcode') }}" class="text-decoration-none" target="_blank">
+                    <div class="doc-card text-center">
+                        <div class="doc-icon-badge">
+                            <i class="fa-solid fa-file-pdf"></i>
+                        </div>
+                        <h6 class="fw-bold text-dark mb-1">Exam Code of Conduct</h6>
+                        <small class="text-muted d-block mb-3">Examination guidelines</small>
+                        <span class="btn btn-sm btn-outline-danger rounded-pill px-3 fw-semibold">
+                            <i class="fa-solid fa-download me-1"></i> Download PDF
+                        </span>
+                    </div>
+                </a>
+            </div>
+
+            <div class="col-xl-3 col-md-6">
+                <a href="{{ route('student.download.helpdesk') }}" class="text-decoration-none" target="_blank">
+                    <div class="doc-card text-center">
+                        <div class="doc-icon-badge">
+                            <i class="fa-solid fa-file-pdf"></i>
+                        </div>
+                        <h6 class="fw-bold text-dark mb-1">Helpdesk Support Guide</h6>
+                        <small class="text-muted d-block mb-3">IT & portal assistance</small>
+                        <span class="btn btn-sm btn-outline-danger rounded-pill px-3 fw-semibold">
+                            <i class="fa-solid fa-download me-1"></i> Download PDF
+                        </span>
+                    </div>
+                </a>
+            </div>
         </div>
-
-        <div class="col-lg-4 col-md-6">
-            <a href="/timetable" class="text-decoration-none">
-                <div class="service-card">
-                    <i class="fa-solid fa-calendar-days"></i>
-                    <h5>Class Timetable</h5>
-                    <p>View your weekly lecture schedule and upcoming classes.</p>
-                </div>
-            </a>
-        </div>
-
-        <div class="col-lg-4 col-md-6">
-            <a href="/results" class="text-decoration-none">
-                <div class="service-card">
-                    <i class="fa-solid fa-square-poll-vertical"></i>
-                    <h5>Exam Results</h5>
-                    <p>Check semester examination marks and performance reports.</p>
-                </div>
-            </a>
-        </div>
-
-        <div class="col-lg-4 col-md-6">
-            <a href="/Studentguidelines" class="text-decoration-none">
-                <div class="service-card">
-                    <i class="fa-solid fa-book-open"></i>
-                    <h5>Student Guidelines</h5>
-                    <p>Read campus rules, regulations, and academic guidelines.</p>
-                </div>
-            </a>
-        </div>
-
-        <div class="col-lg-4 col-md-6">
-            <a href="/Feedback&Complain" class="text-decoration-none">
-                <div class="service-card">
-                    <i class="fa-solid fa-comments"></i>
-                    <h5>Feedback & Complaint</h5>
-                    <p>Send feedback or submit inquiries directly to administration.</p>
-                </div>
-            </a>
-        </div>
-
-        <div class="col-lg-4 col-md-6">
-            <a href="/StudentProfile" class="text-decoration-none">
-                <div class="service-card">
-                    <i class="fa-solid fa-user"></i>
-                    <h5>Student Profile</h5>
-                    <p>Manage and update your personal student profile details.</p>
-                </div>
-            </a>
-        </div>
-
     </div>
 
 </div>

resources/views/abouts.blade.php

@@ -1,500 +1,416 @@
 @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-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('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 */
-    
+    --text-main: #0F172A;         /* Slate dark grey */
-    /* Semantic Adjustments */
-    --text-main: #1E293B;         /* Slate dark grey */
     --text-muted: #64748B;        /* Neutral gray */
-    --card-border: rgba(62, 81, 184, 0.1);
+    --card-border: rgba(226, 232, 240, 0.9);
-}
-
-body {
-    font-family: 'Segoe UI', Arial, sans-serif;
-    color: var(--text-main);
 }
 
+/* ===== HERO SECTION ===== */
 .hero-about {
-    min-height: 60vh;
+    position: relative;
-    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');
+    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 {
+.hero-badge {
-    text-align: center;
+    display: inline-flex;
-    margin-bottom: 40px;
+    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 {
+.hero-about h1 {
-    background: #fff;
+    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;
+    padding: 20px 16px;
-    box-shadow: 0 10px 30px rgba(0,0,0,.04);
+    text-align: center;
-    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
-    border: 1px solid var(--card-border);
+    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);
+    transform: translateY(-8px);
-    box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
+    box-shadow: 0 20px 45px -10px rgba(62, 81, 184, 0.14);
-    border-color: var(--primary-light);
+    border-color: rgba(62, 81, 184, 0.3);
 }
 
 .icon-circle {
-    width: 75px;
+    width: 64px;
-    height: 75px;
+    height: 64px;
-    background: #6e3232;
+    background: linear-gradient(135deg, rgba(62, 81, 184, 0.1) 0%, rgba(10, 103, 223, 0.06) 100%);
-    color: #fffefa;;
+    color: var(--primary);
-    border-radius: 50%;
+    border-radius: 20px;
+    border: 1px solid rgba(62, 81, 184, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 28px;
+    font-size: 26px;
-    margin: auto;
+    margin: 0 auto 20px;
-    transition: all 0.4s ease;
+    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%);
+    background: linear-gradient(135deg, #0F2C59 0%, #3E51B8 100%);
-    transform: rotateY(180deg); 
+    color: #ffffff;
-    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
+    border-color: transparent;
+    transform: scale(1.12) rotate(6deg);
+    box-shadow: 0 10px 25px rgba(62, 81, 184, 0.35);
 }
 
-/* ========================================================
+/* ===== CTA BUTTON ===== */
-   Advanced CSS Scroll Animations
+.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 {
+.fade-up-init { transform: translateY(30px); }
-    transform: translateY(40px);
+.slide-left-init { transform: translateX(-40px); }
-}
+.slide-right-init { transform: translateX(40px); }
-
+.zoom-in-init { transform: scale(0.94); }
-.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: 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>
+            <span class="hero-badge"><i class="fa-solid fa-graduation-cap"></i> Pioneering Automotive Academy</span>
-            <p class="mt-3 lead" style="max-width: 700px; margin: auto;">
+            <h1 class="fw-bold">Empowering Future Mobility Leaders</h1>
-                We are committed to delivering high-quality automotive education
+            <p class="lead">
-                with practical training and industry-focused learning.
+                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 -->
+<!-- FLOATING STATS COUNTER -->
-<section class="py-5 overflow-hidden">
+<div class="container stats-container">
-<div class="container">
+    <div class="row g-3 justify-content-center">
-    <div class="row align-items-center g-5">
+        <div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 100ms;">
-        <div class="col-md-6 animate-item slide-left-init">
+            <div class="stat-glass-card">
-            <img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
+                <div class="stat-icon"><i class="fa-solid fa-user-graduate"></i></div>
-                 class="img-fluid rounded shadow-lg"
+                <div class="stat-number count-up" data-count-target="2500" data-count-suffix="+">0+</div>
-                 alt="About Image">
+                <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">
+<!-- VISION & MISSION MINIMALIST 1-ROW SECTION -->
-            <h2 class="fw-bold mb-3">Vision</h2>
+<section class="py-5 bg-white">
-            <p class="text-muted fs-5" style="justfy-content: justify;">
+    <div class="container py-3">
-             To be a global leader in automotive education, driving the future of mobility by empowering the next generation of engineers, technicians, and innovators.
+        <div class="row g-4 align-items-stretch">
-            </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>
-
             
-            <!-- <a href="/courses" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
+            <!-- VISION (LEFT COLUMN) -->
-                View Courses
+            <div class="col-md-6 animate-item slide-left-init">
-            </a> -->
+                <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 -->
+<!-- ADVANTAGES / WHY CHOOSE US -->
-<section class="py-5 bg-light">
+<section class="py-5 bg-light position-relative">
-<div class="container">
+    <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">
+        <div class="row g-4">
-    <h2 class="fw-bold">Why Choose Us</h2>
+            <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
-    <p class="text-muted">We provide the best learning experience</p>
+                <div class="about-box text-center">
-</div>
+                    <div class="icon-circle">
-
+                        <i class="fa-solid fa-chalkboard-user"></i>
-<div class="row g-4">
+                    </div>
-    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
+                    <h4 class="fw-bold text-dark mb-3">Expert Lecturers</h4>
-        <div class="about-box text-center">
+                    <p class="text-muted mb-0 lh-base">
-            <div class="icon-circle">
+                        Learn directly from veteran automotive engineers, diagnostic specialists, and TVEC certified master instructors.
-                <i class="fa-solid fa-chalkboard-user"></i>
+                    </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 -->
+<!-- CALL TO ACTION (CTA) -->
-<section class="py-5 text-center bg-white overflow-hidden">
+<section class="py-5 text-center bg-white overflow-hidden position-relative">
-<div class="container py-4 animate-item fade-up-init">
+    <div class="container py-4 animate-item fade-up-init">
-    <h2 class="fw-bold mb-3">Start Your Automotive Career Today</h2>
+        <div class="p-5 rounded-4 shadow-sm position-relative overflow-hidden" style="background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);">
-    <p class="text-muted fs-5 mb-5">
+            <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>
-        Join our institute and become a skilled automotive professional.
+            <h2 class="display-6 fw-bold text-white mb-3">Start Your Automotive Career Today</h2>
-    </p>
+            <p class="text-white-50 fs-5 mb-4 max-width-600 mx-auto">
-    <div class="d-flex justify-content-center">
+                Take the first step toward becoming a certified automotive engineer or high-voltage EV specialist.
-        <a href="/apply" class="cta-btn shadow">
+            </p>
-           Apply Courses
+            <div class="d-flex justify-content-center">
-        </a>
+                <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
+    // Stats Number Counter Animation
-            </a>
+    const counterElements = document.querySelectorAll('.count-up');
-        </div>
+    const counterObserver = new IntersectionObserver((entries) => {
-    </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) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
-                entry.target.classList.add('animated');
+                const el = entry.target;
-                observer.unobserve(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.5 });
-        threshold: 0.15 
-    });
 
-    animatedElements.forEach(el => observer.observe(el));
+    counterElements.forEach(el => counterObserver.observe(el));
 });
 </script>
 
-
 @endsection

resources/views/courses.blade.php

@@ -154,74 +154,100 @@ h1, h2, h3, h4, h5, h6,
 
 /* ===== HORIZONTAL COURSE CARDS ===== */
 .course-card {
+    position: relative;
     overflow: hidden;
-    background: #fff;
+    background: #ffffff;
-    border: 1px solid var(--card-border);
+    border: 1px solid rgba(226, 232, 240, 0.9);
-    border-radius: 22px;
+    border-radius: 26px;
-    box-shadow: 0 8px 24px var(--shadow-color);
+    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06);
-    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.course-card::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, height 0.4s ease;
+    z-index: 4;
+}
+
+.course-card:hover::before {
+    opacity: 1;
+    height: 5px;
 }
 
 .course-card:hover {
-    transform: translateY(-7px);
+    transform: translateY(-8px);
-    box-shadow: 0 22px 48px rgba(62, 81, 184, 0.14);
+    box-shadow: 0 25px 50px -10px rgba(62, 81, 184, 0.18);
-    border-color: rgba(62, 81, 184, 0.25);
+    border-color: rgba(62, 81, 184, 0.3);
 }
 
 .course-image-wrapper {
-    padding: 20px;
+    padding: 16px;
     height: 100%;
+    position: relative;
     overflow: hidden;
 }
 
 .course-card img {
-    height: 220px;
+    height: 240px;
     width: 100%;
     object-fit: cover;
-    border-radius: 16px;
+    border-radius: 20px;
     transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 .course-card:hover img {
-    transform: scale(1.05);
+    transform: scale(1.08);
 }
 
 .course-card .card-body {
-    padding: 32px 32px 32px 10px;
+    padding: 28px 32px 28px 12px;
     display: flex;
     flex-direction: column;
 }
 
 @media (max-width: 767px) {
     .course-card .card-body {
-        padding: 0 24px 24px 24px;
+        padding: 16px 24px 24px 24px;
+    }
+    .course-image-wrapper {
+        padding: 16px 16px 0 16px;
     }
 }
 
 .course-title {
-    font-size: 23px;
+    font-size: 22px;
     font-weight: 750;
-    line-height: 1.3;
+    line-height: 1.35;
-    color:#2B2B2B;
+    color: #0F172A;
-    margin-bottom: 8px;
+    margin-bottom: 6px;
     transition: color 0.3s ease;
 }
 
 .course-card:hover .course-title {
-    color: var(--secondary);
+    color: #3E51B8;
 }
 
 .course-author {
-    font-size: 14px;
+    font-size: 13.5px;
     font-weight: 600;
-    color: #910909;
+    color: #3085C3;
-    margin-bottom: 14px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
 }
 
 .course-short-desc {
     font-size: 14.5px;
-    color: #556575;
+    color: #64748B;
-    margin-bottom: 20px;
+    margin-bottom: 18px;
     line-height: 1.6;
 }
 
@@ -234,30 +260,34 @@ h1, h2, h3, h4, h5, h6,
 }
 
 .badge-bestseller {
+    position: absolute;
+    top: 28px;
+    left: 28px;
+    z-index: 3;
     display: inline-flex;
     align-items: center;
-    gap: 5px;
+    gap: 6px;
-    background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
+    background: linear-gradient(135deg, #BC1A1A 0%, #E11D48 100%);
     color: #fff;
-    font-weight: 700;
+    font-weight: 800;
-    font-size: 10.5px;
+    font-size: 11px;
-    padding: 4px 12px;
+    padding: 6px 14px;
-    border-radius: 30px;
+    border-radius: 999px;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
+    letter-spacing: 0.06em;
-    box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 0 rgba(188, 26, 26, 0.4);
+    box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4);
     animation: badgePulse 2.4s ease-out infinite;
 }
 
 @keyframes badgePulse {
-    0% { box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 0 rgba(188, 26, 26, 0.4); }
+    0% { box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4), 0 0 0 0 rgba(188, 26, 26, 0.45); }
-    70% { box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 7px rgba(188, 26, 26, 0); }
+    70% { box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4), 0 0 0 8px rgba(188, 26, 26, 0); }
-    100% { box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 0 rgba(188, 26, 26, 0); }
+    100% { box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4), 0 0 0 0 rgba(188, 26, 26, 0); }
 }
 
 .rating-star {
-    color: #f39c12;
+    color: #f59e0b;
-    font-weight: 700;
+    font-weight: 750;
     font-size: 14px;
     display: flex;
     align-items: center;
@@ -283,7 +313,7 @@ h1, h2, h3, h4, h5, h6,
     overflow: hidden;
     white-space: nowrap;
     width: 0;
-    color: #f39c12;
+    color: #f59e0b;
     transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -292,7 +322,7 @@ h1, h2, h3, h4, h5, h6,
 }
 
 .rating-count {
-    color: var(--text-muted);
+    color: #64748B;
     font-size: 13.5px;
     font-weight: 500;
 }
@@ -301,49 +331,58 @@ h1, h2, h3, h4, h5, h6,
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
-    font-size: 12.5px;
+    font-size: 13px;
-    color: var(--success-green);
+    margin-bottom: 22px;
-    margin-bottom: 24px;
     font-weight: 600;
 }
 
 .course-features span {
     display: inline-flex;
     align-items: center;
-    background: rgba(16, 185, 129, 0.08);
+    background: rgba(62, 81, 184, 0.08);
-    padding: 5px 12px;
+    color: #3E51B8;
-    border-radius: 8px;
+    padding: 6px 14px;
-    transition: transform 0.3s ease, background-color 0.3s ease;
+    border-radius: 10px;
+    border: 1px solid rgba(62, 81, 184, 0.15);
+    transition: all 0.3s ease;
 }
 
 .course-card:hover .course-features span {
-    background: rgba(16, 185, 129, 0.14);
+    background: rgba(62, 81, 184, 0.15);
     transform: translateY(-2px);
 }
 
 .course-features span i {
     margin-right: 6px;
+    color: #3085C3;
 }
 
 .course-footer {
     margin-top: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 14px;
+    padding-top: 18px;
+    border-top: 1px dashed #E2E8F0;
 }
 
 .read-btn {
-    background: #822424;
+    background: linear-gradient(135deg, #0F2C59 0%, #3E51B8 100%);
     color: #fff;
-    padding: 13px 28px;
+    padding: 12px 28px;
-    font-weight: 600;
+    font-weight: 700;
-    font-size: 15px;
+    font-size: 14.5px;
-    border-radius: 14px;
+    border-radius: 999px;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-    border: 2px solid transparent;
+    border: none;
     text-decoration: none;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
-    box-shadow: 0 4px 12px rgba(10, 103, 223, 0.2);
+    box-shadow: 0 6px 18px rgba(62, 81, 184, 0.25);
 }
 
 .read-btn .read-btn-arrow {
@@ -351,130 +390,196 @@ h1, h2, h3, h4, h5, h6,
 }
 
 .read-btn:hover {
-    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
+    background: linear-gradient(135deg, #BC1A1A 0%, #822424 100%);
     color: #fff;
     transform: translateY(-2px);
-    box-shadow: 0 6px 18px rgba(188, 26, 26, 0.3);
+    box-shadow: 0 10px 24px rgba(188, 26, 26, 0.35);
 }
 
 .read-btn:hover .read-btn-arrow {
-    transform: translateX(4px);
+    transform: translateX(5px);
 }
 
 /* --- Features Section --- */
 .features-section {
-    background-color: var(--bg-light);
+    position: relative;
-    padding: 80px 40px;
+    border-radius: 32px;
+    padding: 85px 40px;
     margin-bottom: 40px;
-    background-image: radial-gradient(rgba(62, 81, 184, 0.04) 1px, transparent 0);
+    overflow: hidden;
-    background-size: 20px 20px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 .features-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    background: rgba(255, 255, 255, 0.12);
+    background: linear-gradient(135deg, rgba(255, 230, 24, 0.18) 0%, rgba(227, 100, 20, 0.22) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.25);
+    border: 1px solid rgba(255, 230, 24, 0.45);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     color: #FFE618;
-    font-size: 12.5px;
+    font-size: 13px;
     font-weight: 700;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.12em;
     text-transform: uppercase;
-    padding: 7px 18px;
+    padding: 8px 22px;
     border-radius: 999px;
-    margin-bottom: 16px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 18px rgba(255, 230, 24, 0.15);
+    transition: all 0.3s ease;
+}
+
+.features-eyebrow i {
+    animation: starPulse 2s infinite ease-in-out;
+}
+
+@keyframes starPulse {
+    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #FFE618); }
+    50% { transform: scale(1.25); filter: drop-shadow(0 0 8px #FFE618); }
 }
 
 .features-section h2 {
-    font-size: 45px;
+    font-size: clamp(2.2rem, 4.2vw, 3.2rem);
     font-weight: 800;
     color: #ffffff;
+    letter-spacing: -0.02em;
     margin-bottom: 54px;
+    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    position: relative;
+    display: inline-block;
+}
+
+.features-section h2::after {
+    content: '';
+    display: block;
+    width: 60px;
+    height: 4px;
+    background: linear-gradient(90deg, #3E51B8, #FFE618, #BC1A1A);
+    border-radius: 4px;
+    margin: 16px auto 0;
+    box-shadow: 0 0 12px rgba(255, 230, 24, 0.6);
 }
 
 .feature-box {
     position: relative;
-    background: #fff;
+    background: rgba(255, 255, 255, 0.08);
-    padding: 40px 28px;
+    backdrop-filter: blur(18px);
-    border-radius: 24px;
+    -webkit-backdrop-filter: blur(18px);
+    padding: 44px 28px 38px;
+    border-radius: 26px;
     height: 100%;
-    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    border: 1px solid var(--card-border);
+    border: 1px solid rgba(255, 255, 255, 0.14);
     text-align: center;
-    box-shadow: 0 6px 20px rgba(62, 81, 184, 0.02);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
     overflow: hidden;
+    z-index: 1;
+}
+
+.feature-box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: linear-gradient(90deg, #3E51B8 0%, #FFE618 50%, #BC1A1A 100%);
+    opacity: 0.35;
+    transition: opacity 0.4s ease, height 0.4s ease;
+}
+
+.feature-box:hover::before {
+    opacity: 1;
+    height: 5px;
 }
 
 .feature-index {
     position: absolute;
-    top: 14px;
+    top: 18px;
-    right: 18px;
+    right: 20px;
     font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
     font-size: 13px;
-    font-weight: 700;
+    font-weight: 800;
-    color: rgba(62, 81, 184, 0.25);
+    color: rgba(255, 255, 255, 0.5);
-    letter-spacing: 0.05em;
+    letter-spacing: 0.08em;
-}
+    background: rgba(255, 255, 255, 0.08);
-
+    padding: 3px 10px;
-.feature-icon-wrapper {
+    border-radius: 12px;
-    width: 58px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
-    height: 58px;
+    transition: all 0.4s ease;
-    background-color: rgba(62, 81, 184, 0.08);
-    color: var(--primary);
-    border-radius: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    margin: 0 auto 24px;
-    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.feature-box:hover  {
-    transform: translateY(-8px);
-    box-shadow: 0 15px 35px rgba(62, 81, 184, 0.12);
-    border-color: rgba(188, 26, 26, 0.2);
-    color:#6a2525 ;
 }
 
 .feature-box:hover .feature-index {
-    color: rgba(188, 26, 26, 0.35);
+    color: #FFE618;
+    background: rgba(255, 230, 24, 0.15);
+    border-color: rgba(255, 230, 24, 0.4);
+    transform: scale(1.05);
+}
+
+.feature-icon-wrapper {
+    width: 66px;
+    height: 66px;
+    background: linear-gradient(135deg, rgba(62, 81, 184, 0.35) 0%, rgba(10, 103, 223, 0.2) 100%);
+    color: #60A5FA;
+    border-radius: 20px;
+    border: 1px solid rgba(96, 165, 250, 0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 26px;
+    margin: 0 auto 26px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.feature-box:hover {
+    transform: translateY(-12px);
+    background: rgba(255, 255, 255, 0.14);
+    border-color: rgba(255, 255, 255, 0.32);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 30px rgba(62, 81, 184, 0.3);
 }
 
 .feature-box:hover .feature-icon-wrapper {
-    background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
+    background: linear-gradient(135deg, #3E51B8 0%, #BC1A1A 100%);
-    color: #fff;
+    color: #ffffff;
-    transform: rotateY(180deg);
+    border-color: transparent;
-    box-shadow: 0 8px 15px rgba(188, 26, 26, 0.25);
+    transform: scale(1.12) rotate(6deg);
+    box-shadow: 0 15px 30px rgba(188, 26, 26, 0.4), 0 0 20px rgba(62, 81, 184, 0.6);
 }
 
 .feature-icon-wrapper i {
     transition: transform 0.4s ease;
 }
 
-.feature-box:hover .feature-icon-wrapper i   {
+.feature-box:hover .feature-icon-wrapper i {
-    transform: rotateY(-180deg);
+    transform: scale(1.15);
 }
 
 .feature-box h5 {
-    font-size: 19px;
+    font-size: 20px;
-    font-weight: 700;
+    font-weight: 750;
-    color: #181818;
+    color: #ffffff;
-    margin-bottom: 12px;
+    margin-bottom: 14px;
+    transition: color 0.3s ease;
 }
 
-.feature-box h5:hover {
+.feature-box:hover h5 {
-    color: #822424 ;
+    color: #ffffff;
+    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
 }
 
 .feature-box p {
     font-size: 14.5px;
-    color: var(--text-muted);
+    color: #CBD5E1;
     margin-bottom: 0;
-    line-height: 1.6;
+    line-height: 1.65;
+    transition: color 0.3s ease;
+}
+
+.feature-box:hover p {
+    color: #F8FAFC;
 }
 
 #noResults {
@@ -543,8 +648,11 @@ h1, h2, h3, h4, h5, h6,
                         <div class="row g-0 align-items-center">
                             
                             {{-- Course Image --}}
-                            <div class="col-md-4">
+                            <div class="col-md-4 position-relative">
                                 <div class="course-image-wrapper">
+                                    @if($course->badge)
+                                        <span class="badge-bestseller"><i class="fa-solid fa-bolt"></i> {{ $course->badge }}</span>
+                                    @endif
                                     <img src="{{ $course->image }}" alt="{{ $course->title }}">
                                 </div>
                             </div>
@@ -552,45 +660,46 @@ h1, h2, h3, h4, h5, h6,
                             {{-- Course Details --}}
                             <div class="col-md-8">
                                 <div class="card-body">
-                                    <h4 class="course-title">{{ $course->title }}</h4>
+                                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-1">
+                                        <h4 class="course-title mb-0">{{ $course->title }}</h4>
+                                        @if($course->status)
+                                            <span class="small fw-bold status-chip" style="background: rgba(16, 185, 129, 0.1); color: #10B981; padding: 4px 12px; border-radius: 999px;"><i class="fa-solid fa-circle-check"></i> {{ ucfirst($course->status) }}</span>
+                                        @endif
+                                    </div>
                                     
                                     @if($course->author)
                                         <div class="course-author">
-                                            <i class="fa-solid fa-user-gear me-1"></i> {{ $course->author }}
+                                            <i class="fa-solid fa-graduation-cap me-1"></i> {{ $course->author }}
                                         </div>
                                     @endif
                                     
                                     <p class="course-short-desc">{{ $course->desc }}</p>
                                     
-                                    <div class="course-meta-row">
-                                        @if($course->badge)
-                                            <span class="badge-bestseller"><i class="fa-solid fa-bolt"></i> {{ $course->badge }}</span>
-                                        @endif
-
-                                        @if($course->rating)
-                                            <span class="rating-star">
-                                                <span class="star-rating" style="--rating: {{ $course->rating }};">
-                                                    <span class="star-rating-bg">★★★★★</span>
-                                                    <span class="star-rating-fill">★★★★★</span>
-                                                </span>
-                                                {{ $course->rating }}
-                                            </span>
-                                        @endif
-
-                                        @if($course->student)
-                                            <span class="rating-count">({{ $course->student }} students enrolled)</span>
-                                        @endif
-                                    </div>
-
                                     <div class="course-features">
-                                        <span><i class="fas fa-tools"></i> Level: {{ $course->level ?? 'General' }}</span>
+                                        <span><i class="fa-solid fa-layer-group"></i> Level: {{ $course->level ?? 'General' }}</span>
                                         @if($course->duration)
-                                            <span><i class="fas fa-certificate"></i> Duration: {{ $course->duration }}</span>
+                                            <span><i class="fa-solid fa-clock"></i> Duration: {{ $course->duration }}</span>
                                         @endif
                                     </div>
 
-                                    <div class="course-footer" style="max-width: 200px;">
+                                    <div class="course-footer">
-                                        <a href="/apply" class="read-btn">Apply Course <i class="fa-solid fa-paper-plane read-btn-arrow"></i></a>
+                                        <div class="d-flex align-items-center gap-2 flex-wrap">
+                                            @if($course->rating)
+                                                <span class="rating-star">
+                                                    <span class="star-rating" style="--rating: {{ $course->rating }};">
+                                                        <span class="star-rating-bg">★★★★★</span>
+                                                        <span class="star-rating-fill">★★★★★</span>
+                                                    </span>
+                                                    {{ $course->rating }}
+                                                </span>
+                                            @endif
+
+                                            @if($course->student)
+                                                <span class="rating-count">({{ $course->student }} students enrolled)</span>
+                                            @endif
+                                        </div>
+
+                                        <a href="/apply" class="read-btn">Apply Course <i class="fa-solid fa-arrow-right read-btn-arrow"></i></a>
                                     </div>
                                 </div>
                             </div>
@@ -612,7 +721,7 @@ h1, h2, h3, h4, h5, h6,
 <section class="pb-5 why-study-section">
     <div class="container">
         <div class="features-section text-center animate-on-scroll fade-up-init" 
-             style="background-image: linear-gradient(rgba(77, 103, 169, 0.61), rgba(0, 0, 0, 0.9)), url('https://images.pexels.com/photos/4489749/pexels-photo-4489749.jpeg?auto=compress&cs=tinysrgb&w=1600');
+             style="background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.88) 50%, rgba(15, 23, 42, 0.95) 100%), url('https://images.pexels.com/photos/4489749/pexels-photo-4489749.jpeg?auto=compress&cs=tinysrgb&w=1600');
                     background-size: cover;
                     background-position: center;
                     background-repeat: no-repeat;">

resources/views/layouts/adminnav.blade.php

@@ -231,9 +231,9 @@
         <div class="mobile-user-profile">
             @if(session()->has('admin_id'))
                 <div class="dropdown">
-                    <a class="text-white text-decoration-none dropdown-toggle d-flex align-items-center gap-2" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false">
+                    <a class="text-white text-decoration-none dropdown-toggle d-flex flex-column align-items-center justify-content-center gap-0" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false" style="line-height: 1.1;">
-                        <i class="fa-solid fa-circle-user" style="font-size: 26px; color: var(--theme-yellow);"></i>
+                        <i class="fa-solid fa-circle-user" style="font-size: 24px; color: var(--theme-yellow);"></i>
-                        <span class="fw-semibold small">{{ session('admin_name', 'Admin') }}</span>
+                        <span class="fst-italic" style="font-size: 11px;">{{ session('admin_name', 'Admin') }}</span>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="userMenuMobile">
                         <li>

resources/views/layouts/app.blade.php

@@ -178,10 +178,13 @@
             cursor: pointer;
             color: white;
             display: flex;
+            flex-direction: column;
             align-items: center;
-            gap: 8px;
+            justify-content: center;
+            gap: 2px;
             user-select: none;
             text-decoration: none !important;
+            line-height: 1.1;
         }
         
         .user-dropdown-toggle:hover {
@@ -189,12 +192,14 @@
         }
 
         .user-profile-name {
-            font-weight: 600;
+            font-weight: 500;
-            font-size: 14px;
+            font-style: italic;
-            max-width: 120px;
+            font-size: 11px;
+            max-width: 110px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            text-align: center;
         }
 
         .dropdown-menu {

resources/views/layouts/studentportalnav.blade.php

@@ -6,27 +6,28 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>@yield('title', 'Student Portal - Automobile Academic')</title>
      
-    <!-- Font Awesome Icons & Bootstrap 5 -->
+    <!-- Google Fonts & Font Awesome Icons & Bootstrap 5 -->
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     
     <style>
         :root {
-            --theme-navy: #2D355B;
+            --theme-navy: #1E233E;
-            --theme-footer-navy: #1F2541;
+            --theme-footer-navy: #15182C;
             --theme-red: #822424;
             --theme-red-hover: #df2c3e;
             --theme-yellow: #FFEA85;
-            --theme-bg: #F6F6F6;
+            --theme-bg: #F4F6F9;
             --sidebar-width: 260px;
-            --text-dark: #333333;
+            --text-dark: #1E293B;
         }
 
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'Segoe UI', sans-serif;
+            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         }
 
         body {
@@ -40,28 +41,61 @@
         .sidebar {
             width: var(--sidebar-width);
             height: 100vh;
-            background: var(--theme-navy);
+            background: linear-gradient(180deg, #1E233E 0%, #15182C 100%);
             color: #fff;
             position: fixed;
             top: 0;
             left: 0;
             padding: 24px 0;
-            transition: all 0.3s ease;
+            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
             z-index: 1030;
             display: flex;
             flex-direction: column;
-            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
+            box-shadow: 4px 0 20px rgba(0,0,0,0.08);
         }
 
         .sidebar .brand {
-            padding: 0 24px 20px;
+            padding: 0 20px 22px;
-            font-weight: 700;
-            font-size: 1.25rem;
-            color: #ffffff;
-            border-bottom: 1px solid rgba(255,255,255,.15);
-            margin-bottom: 12px;
             display: flex;
             align-items: center;
+            gap: 12px;
+            border-bottom: 1px solid rgba(255,255,255,.08);
+            margin-bottom: 20px;
+        }
+
+        .brand-logo-icon {
+            width: 42px;
+            height: 42px;
+            border-radius: 12px;
+            background: linear-gradient(135deg, var(--theme-red) 0%, var(--theme-red-hover) 100%);
+            color: #ffffff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+            box-shadow: 0 6px 16px rgba(130, 36, 36, 0.35);
+        }
+
+        .brand-text {
+            display: flex;
+            flex-direction: column;
+            line-height: 1.1;
+        }
+
+        .brand-text span {
+            font-weight: 800;
+            font-size: 1.25rem;
+            color: #ffffff;
+            letter-spacing: -0.5px;
+        }
+
+        .brand-sub {
+            font-size: 0.65rem;
+            font-weight: 700;
+            color: var(--theme-yellow);
+            letter-spacing: 1.5px;
+            opacity: 0.85;
+            margin-top: 2px;
         }
 
         .sidebar .nav {
@@ -69,67 +103,196 @@
             flex-direction: column;
             flex-grow: 1;
             overflow-y: auto;
+            padding: 0 14px;
+            gap: 4px;
         }
 
         .sidebar .nav-link {
-            color: rgba(255, 255, 255, 0.85);
+            color: rgba(255, 255, 255, 0.75);
-            padding: 14px 24px;
+            padding: 13px 18px;
-            font-size: 0.95rem;
+            font-size: 0.93rem;
             font-weight: 600;
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 14px;
-            transition: all 0.2s ease;
+            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-            border-left: 4px solid transparent;
+            border-radius: 14px;
             text-decoration: none;
+            position: relative;
         }
 
         .sidebar .nav-link i { 
-            width: 20px; 
+            width: 22px; 
-            text-align: center; 
+            text-align: center;
+            font-size: 1.1rem;
+            transition: transform 0.25s ease, color 0.25s ease;
         }
 
         .sidebar .nav-link:hover {
             background: rgba(255, 255, 255, 0.08);
             color: var(--theme-yellow) !important;
-            padding-left: 28px;
+            transform: translateX(4px);
+        }
+
+        .sidebar .nav-link:hover i {
+            transform: scale(1.15);
+            color: var(--theme-yellow);
         }
 
         .sidebar .nav-link.active {
-            background: var(--theme-footer-navy);
+            background: linear-gradient(90deg, rgba(255, 234, 133, 0.16) 0%, rgba(255, 234, 133, 0.06) 100%);
             color: var(--theme-yellow) !important;
-            border-left: 4px solid #F73F52;
             font-weight: 700;
+            border-left: 4px solid var(--theme-yellow);
+            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+            border-radius: 4px 14px 14px 4px;
+        }
+
+        .sidebar .nav-link.active i {
+            color: var(--theme-yellow);
         }
 
         .sidebar-user-profile {
-            padding: 15px 24px;
+            padding: 16px 18px;
-            border-top: 1px solid rgba(255,255,255,.15);
+            border-top: 1px solid rgba(255,255,255,.08);
             margin-top: auto;
-            background: var(--theme-footer-navy);
+            background: rgba(0, 0, 0, 0.25);
         }
         
         .sidebar-user-profile .user-dropdown-toggle {
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 12px;
             color: #fff;
             text-decoration: none;
-            font-size: 0.95rem;
+            transition: all 0.2s ease;
-            transition: color 0.2s ease;
+            padding: 8px 10px;
+            border-radius: 12px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.08);
         }
 
         .sidebar-user-profile .user-dropdown-toggle:hover {
+            background: rgba(255, 255, 255, 0.12);
+            border-color: rgba(255, 234, 133, 0.3);
+            color: #ffffff;
+        }
+
+        .user-avatar-badge-sm {
+            width: 38px;
+            height: 38px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-footer-navy) 100%);
+            border: 2px solid var(--theme-yellow);
             color: var(--theme-yellow);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 800;
+            font-size: 0.95rem;
+            flex-shrink: 0;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+        }
+
+        .user-info-text {
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            text-align: left;
+        }
+
+        .user-name-text {
+            font-weight: 700;
+            font-size: 0.88rem;
+            color: #ffffff;
+            line-height: 1.2;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .user-email-text {
+            font-size: 0.72rem;
+            font-style: italic;
+            color: rgba(255, 255, 255, 0.7);
+            line-height: 1.2;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* Dark Glassmorphic User Dropdown Popup */
+        .user-dropdown-menu {
+            background: linear-gradient(145deg, #1A1E36 0%, #111428 100%) !important;
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
+            border-radius: 16px !important;
+            margin-bottom: 12px !important;
+            padding: 8px !important;
+            width: 220px;
+            backdrop-filter: blur(16px);
+        }
+
+        .user-dropdown-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+            color: #ffffff !important;
+            text-decoration: none;
+            padding: 10px 12px;
+            border-radius: 12px;
+        }
+
+        .user-dropdown-item:hover {
+            background: rgba(255, 255, 255, 0.08) !important;
+            transform: translateX(3px);
+        }
+
+        .dropdown-item-icon-blue {
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            background: rgba(59, 130, 246, 0.15);
+            color: #60A5FA;
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.95rem;
+            flex-shrink: 0;
+        }
+
+        .dropdown-item-icon-red {
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            background: rgba(239, 68, 68, 0.15);
+            color: #F87171;
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.95rem;
+            flex-shrink: 0;
         }
 
         .main {
             margin-left: var(--sidebar-width);
             width: calc(100% - var(--sidebar-width));
             min-height: 100vh;
-            padding: 40px;
+            padding: 32px 40px;
             background: var(--theme-bg);
             transition: all 0.3s ease;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .portal-content-container {
+            width: 100%;
+            max-width: 1280px;
+            margin: 0 auto;
         }
 
         .mobile-header {
@@ -221,9 +384,9 @@
         <div class="mobile-user-profile">
             @if(session()->has('student_id'))
                 <div class="dropdown">
-                    <a class="text-white text-decoration-none dropdown-toggle d-flex align-items-center gap-2" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false">
+                    <a class="text-white text-decoration-none dropdown-toggle d-flex flex-column align-items-center justify-content-center gap-0" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false" style="line-height: 1.1;">
-                        <i class="fa-solid fa-circle-user" style="font-size: 26px; color: var(--theme-yellow);"></i>
+                        <i class="fa-solid fa-circle-user" style="font-size: 24px; color: var(--theme-yellow);"></i>
-                        <span class="fw-semibold small">{{ session('student_name') }}</span>
+                        <span class="fst-italic" style="font-size: 11px;">{{ session('student_name') }}</span>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="userMenuMobile">
                         <li>
@@ -250,11 +413,17 @@
     <!-- Sidebar Navigation -->
     <aside class="sidebar" id="sidebar">
         <div class="brand">
-            <i class="fa-solid fa-car-side me-2"></i> AutoEdu
+            <div class="brand-logo-icon">
+                <i class="fa-solid fa-car-side"></i>
+            </div>
+            <div class="brand-text">
+                <span>AutoEdu</span>
+                <small class="brand-sub">STUDENT ACADEMY</small>
+            </div>
         </div>
         
         <nav class="nav">
-            <a href="/Dashboard" class="nav-link {{ request()->is('Dashboard*') ? 'active' : '' }}">
+            <a href="/student-portal" class="nav-link {{ request()->is('Dashboard*') || request()->is('student-portal*') ? 'active' : '' }}">
                 <i class="fa-solid fa-gauge"></i> Dashboard
             </a>
             <a href="/mycourse" class="nav-link {{ request()->is('mycourse*') ? 'active' : '' }}">
@@ -281,27 +450,44 @@
            @if(session()->has('student_id'))
                 <div class="dropdown dropup">
                     <a class="user-dropdown-toggle dropdown-toggle" href="#" role="button" id="userMenuDesktop" data-bs-toggle="dropdown" aria-expanded="false">
-                        <i class="fa-solid fa-circle-user" style="font-size: 24px; color: var(--theme-yellow);"></i>
+                        <div class="user-avatar-badge-sm">
-                        <span class="text-truncate" style="max-width: 150px;">{{ session('student_name') }}</span>
+                            {{ strtoupper(substr(session('student_name', 'S'), 0, 1)) }}
+                        </div>
+                        <div class="user-info-text">
+                            <span class="user-name-text">{{ session('student_name', 'Student') }}</span>
+                            <span class="user-email-text">Active Session</span>
+                        </div>
                     </a>
                     
-                    <ul class="dropdown-menu dropdown-menu-start shadow w-100" aria-labelledby="userMenuDesktop">
+                    <ul class="dropdown-menu user-dropdown-menu shadow-lg p-2 animate slideIn" aria-labelledby="userMenuDesktop">
                         <li>
-                            <a class="dropdown-item" href="{{ route('StudentProfile') }}">
+                            <a class="dropdown-item user-dropdown-item py-2.5 px-3 rounded-3" href="{{ route('StudentProfile') }}">
-                                <i class="fa-solid fa-user me-2"></i> Profile
+                                <div class="dropdown-item-icon-blue">
+                                    <i class="fa-solid fa-user-gear"></i>
+                                </div>
+                                <div>
+                                    <span class="fw-bold d-block text-white" style="font-size: 0.88rem;">My Profile</span>
+                                    <small class="text-white-50" style="font-size: 0.72rem;">View & edit details</small>
+                                </div>
                             </a>
                         </li>
-                        <li><hr class="dropdown-divider"></li>
+                        <li><hr class="dropdown-divider border-white opacity-10 my-1"></li>
                         <li>
-                            <button type="button" onclick="submitLogout()" class="dropdown-item text-danger border-0 bg-transparent w-100 text-start">
+                            <button type="button" onclick="submitLogout()" class="dropdown-item user-dropdown-item py-2.5 px-3 rounded-3 border-0 bg-transparent w-100 text-start">
-                                <i class="fa-solid fa-right-from-bracket me-2"></i> Logout
+                                <div class="dropdown-item-icon-red">
+                                    <i class="fa-solid fa-right-from-bracket"></i>
+                                </div>
+                                <div>
+                                    <span class="fw-bold d-block text-danger" style="font-size: 0.88rem;">Logout</span>
+                                    <small class="text-danger-subtle opacity-75" style="font-size: 0.72rem;">Sign out of session</small>
+                                </div>
                             </button>
                         </li>
                     </ul>
                 </div>
             @else
                 <div class="d-flex gap-2">
-                    <a href="/" class="btn btn-outline-light btn-sm w-100">Sign In</a>
+                    <a href="/" class="btn btn-outline-light btn-sm w-100 rounded-pill">Sign In</a>
                 </div>
             @endif
         </div>

resources/views/timetable.blade.php

@@ -4,281 +4,463 @@
 
 @section('content')
 
-<!-- Bootstrap 5 -->
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-
-<!-- Font Awesome -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-
-<!-- Google Font -->
-<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
-
 <style>
 :root {
-    --theme-navy: #2D355B;        /* Primary Navy */
+    --theme-navy: #1E233E;
-    --theme-navy-dark: #1F2541;   /* Dark Navy */
+    --theme-navy-dark: #15182C;
-    --theme-red: #822424;         /* Primary Accent Red */
+    --theme-red: #822424;
-    --theme-red-hover: #df2c3e;   /* Red Hover */
+    --theme-red-hover: #df2c3e;
-    --theme-yellow: #FFEA85;      /* Accent Yellow/Gold */
+    --theme-yellow: #FFEA85;
-    --bg-light: #F6F6F6;          /* Page Background */
+    --theme-bg: #F4F6F9;
-    --white: #ffffff;
+    --text-dark: #1E293B;
 }
 
-body {
+/* Page Header Hero */
-    font-family: 'Poppins', sans-serif;
+.timetable-hero {
-    background: var(--bg-light);
+    background: linear-gradient(135deg, #1E233E 0%, #2A1F3B 50%, #4A1A24 100%);
-}
+    border-radius: 20px;
-
+    padding: 32px 38px;
-/* Page Header Hero Section */
+    margin-bottom: 28px;
-.page-header {
+    box-shadow: 0 12px 32px rgba(30, 35, 62, 0.16);
-    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
+    position: relative;
-    color: var(--white);
-    padding: 35px 30px;
-    border-radius: 16px;
-    margin-bottom: 30px;
-    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
-    border-left: 5px solid var(--theme-red);
-}
-
-.page-header h2 {
-    font-weight: 700;
-}
-
-.page-header p {
-    opacity: .85;
-}
-
-/* Info Cards & Wrapper */
-.info-card {
-    background: var(--white);
-    border: 1px solid #e2e8f0;
-    border-radius: 16px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
-}
-
-.today-card {
-    background: var(--white);
-    border: 1px solid #e2e8f0;
-    border-radius: 16px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
-    padding: 25px;
-    height: 100%;
-}
-
-.today-card h5, 
-.info-card h5 {
-    font-weight: 600;
-    color: var(--theme-navy);
-}
-
-/* Timetable Card Section */
-.table-card {
-    background: var(--white);
-    border: 1px solid #e2e8f0;
-    border-radius: 16px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
     overflow: hidden;
 }
 
-.table thead {
+.timetable-hero::before {
-    background: var(--theme-navy);
+    content: '';
-    color: var(--white);
+    position: absolute;
+    top: -50%;
+    right: -10%;
+    width: 350px;
+    height: 350px;
+    background: radial-gradient(circle, rgba(255, 234, 133, 0.15) 0%, rgba(255, 234, 133, 0) 70%);
+    border-radius: 50%;
+    pointer-events: none;
 }
 
-.table thead th {
+.btn-print {
-    font-weight: 600;
+    background: #ffffff;
-    padding: 15px 10px;
+    color: #1E233E;
+    font-weight: 700;
+    padding: 11px 26px;
+    border-radius: 50px;
+    border: none;
+    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
+    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.table td,
+.btn-print:hover {
-.table th {
+    background: var(--theme-yellow);
+    color: #1E233E;
+    transform: translateY(-2px);
+    box-shadow: 0 10px 24px rgba(255, 234, 133, 0.4);
+}
+
+/* Top Cards */
+.top-info-card {
+    background: #ffffff;
+    border: 1px solid #E2E8F0;
+    border-radius: 20px;
+    padding: 26px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+    height: 100%;
+}
+
+.card-title-heading {
+    font-size: 1.05rem;
+    font-weight: 700;
+    color: #0F172A;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+}
+
+/* Timeline Item for Today */
+.today-class-item {
+    border-radius: 14px;
+    padding: 14px 18px;
+    margin-bottom: 12px;
+    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.today-class-item:hover {
+    transform: translateX(4px);
+}
+
+.today-class-item.theory { 
+    background: linear-gradient(135deg, #EFF6FF 0%, #E0E7FF 100%);
+    border: 1px solid #C7D2FE;
+}
+
+.today-class-item.practical { 
+    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
+    border: 1px solid #FCA5A5;
+}
+
+.today-class-item.workshop { 
+    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
+    border: 1px solid #FDE68A;
+}
+
+/* Legend Badges */
+.legend-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 18px;
+    border-radius: 50px;
+    font-size: 0.84rem;
+    font-weight: 700;
+    margin-right: 10px;
+    margin-bottom: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+}
+
+.legend-pill.theory {
+    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
+    color: #1E40AF;
+    border: 1px solid #BFDBFE;
+}
+
+.legend-pill.practical {
+    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
+    color: #991B1B;
+    border: 1px solid #FCA5A5;
+}
+
+.legend-pill.workshop {
+    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
+    color: #92400E;
+    border: 1px solid #FDE68A;
+}
+
+.legend-pill.break {
+    background: linear-gradient(135deg, #FEFCE8 0%, #FEF08A 100%);
+    color: #713F12;
+    border: 1px solid #FDE047;
+}
+
+/* Timetable Grid Container */
+.timetable-wrapper {
+    background: #ffffff;
+    border-radius: 20px;
+    border: 1px solid #E2E8F0;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
+    overflow: hidden;
+}
+
+.table-modern {
+    margin-bottom: 0;
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+.table-modern thead tr {
+    background: linear-gradient(135deg, #1E233E 0%, #2D355B 100%);
+    color: #ffffff;
+}
+
+.table-modern thead th {
+    padding: 20px 16px;
+    font-size: 0.88rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+    border: none;
     text-align: center;
     vertical-align: middle;
-    min-width: 140px;
 }
 
-.table tbody th {
+.table-modern thead th.today-header {
-    background-color: #f8fafc;
+    background: linear-gradient(180deg, rgba(255, 234, 133, 0.22) 0%, rgba(255, 234, 133, 0.1) 100%);
-    color: var(--theme-navy);
+    color: var(--theme-yellow);
-    font-weight: 600;
+    border-bottom: 4px solid var(--theme-yellow);
 }
 
-/* Updated Status Badges */
+.table-modern tbody th.time-column {
-.badge-theory {
+    background: #F8FAFC;
-    background: var(--theme-navy) !important;
+    color: #334155;
-    color: var(--white) !important;
+    font-weight: 700;
+    font-size: 0.85rem;
+    padding: 20px 14px;
+    text-align: center;
+    vertical-align: middle;
+    border-right: 1px solid #E2E8F0;
+    border-bottom: 1px solid #E2E8F0;
+    width: 150px;
 }
 
-.badge-practical {
+.table-modern tbody td {
-    background: var(--theme-red) !important;
+    padding: 14px;
-    color: var(--white) !important;
+    vertical-align: middle;
+    text-align: center;
+    border-right: 1px solid #F1F5F9;
+    border-bottom: 1px solid #E2E8F0;
+    background: #ffffff;
+    transition: background 0.2s ease;
+    min-width: 165px;
 }
 
-.badge-workshop {
+.table-modern tbody td.today-cell {
-    background: #e67e22 !important; /* Workshop Accent */
+    background: rgba(255, 234, 133, 0.05);
-    color: var(--white) !important;
 }
 
-.badge-break {
+.table-modern tbody tr:hover td {
-    background: var(--theme-yellow) !important;
+    background: rgba(248, 250, 252, 0.85);
-    color: var(--theme-navy-dark) !important;
-    font-weight: 600;
 }
 
-.table tbody tr:hover {
+/* Vibrant Class Cards inside Cells */
-    background: rgba(45, 53, 91, 0.02);
+.class-cell-card {
-    transition: .3s;
+    border-radius: 14px;
+    padding: 12px 14px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
+    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+    cursor: default;
+    position: relative;
 }
 
-.lunch-row {
+.class-cell-card:hover {
-    background-color: rgba(255, 234, 133, 0.25) !important;
+    transform: translateY(-4px) scale(1.02);
-    color: var(--theme-navy-dark);
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
-    font-weight: 600;
 }
 
-.legend span {
+.class-cell-card.theory {
-    margin-right: 12px;
+    background: linear-gradient(135deg, #EFF6FF 0%, #E0E7FF 100%);
-    display: inline-block;
+    border: 1px solid #C7D2FE;
+}
+
+.class-cell-card.practical {
+    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
+    border: 1px solid #FCA5A5;
+}
+
+.class-cell-card.workshop {
+    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
+    border: 1px solid #FDE68A;
+}
+
+/* Badges inside Class Cell */
+.type-tag-modern {
+    font-size: 0.72rem;
+    font-weight: 800;
+    padding: 4px 12px;
+    border-radius: 50px;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
     margin-bottom: 8px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
 }
 
-.legend .badge {
+.type-tag-modern.theory {
-    padding: 8px 14px;
+    background: #ffffff;
-    font-size: 12px;
+    color: #1E40AF;
+    border: 1px solid #BFDBFE;
 }
 
-/* Custom Buttons */
+.type-tag-modern.practical {
-.download-btn {
+    background: #ffffff;
-    border-radius: 8px;
+    color: #991B1B;
-    padding: 10px 22px;
+    border: 1px solid #FCA5A5;
-    background-color: var(--theme-red) !important;
-    color: var(--white) !important;
-    border: none;
-    font-weight: 500;
-    transition: all 0.2s ease;
 }
 
-.download-btn:hover {
+.type-tag-modern.workshop {
-    background-color: var(--theme-red-hover) !important;
+    background: #ffffff;
-    color: var(--white) !important;
+    color: #92400E;
+    border: 1px solid #FDE68A;
 }
 
-@media(max-width:768px) {
+.subject-title {
-    .table td,
+    font-weight: 800;
-    .table th {
+    font-size: 0.9rem;
-        font-size: 13px;
+    line-height: 1.35;
-        min-width: 120px;
+    letter-spacing: -0.2px;
+}
+
+.subject-title.theory { color: #1E1B4B; }
+.subject-title.practical { color: #822424; }
+.subject-title.workshop { color: #78350F; }
+
+.empty-cell-badge {
+    color: #94A3B8;
+    font-size: 0.82rem;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    opacity: 0.6;
+}
+
+/* Lunch Break Row */
+.lunch-break-row td {
+    background: linear-gradient(90deg, #FEFCE8 0%, #FEF3C7 50%, #FEFCE8 100%) !important;
+    color: #713F12;
+    font-weight: 800;
+    font-size: 0.9rem;
+    padding: 16px !important;
+    border-bottom: 1px solid #FDE047 !important;
+    letter-spacing: 0.4px;
+}
+
+/* Print Optimization */
+@media print {
+    .sidebar, .mobile-header, .btn-print, .title-accent {
+        display: none !important;
     }
-
+    .main {
-    .page-header {
+        margin-left: 0 !important;
-        padding: 25px;
+        padding: 0 !important;
+        width: 100% !important;
+    }
+    .portal-content-container {
+        max-width: 100% !important;
+    }
+    .timetable-hero {
+        background: #1E233E !important;
+        color: #ffffff !important;
+        -webkit-print-color-adjust: exact;
     }
 }
 </style>
 
-<div class="container py-4">
+<div class="portal-content-container">
 
-    <!-- Header -->
+    <!-- Hero Header -->
-    <div class="page-header">
+    <div class="timetable-hero d-flex align-items-center justify-content-between flex-wrap gap-3">
-        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
+        <div class="position-relative" style="z-index: 1;">
-            <div>
+            <div class="d-flex align-items-center gap-2 mb-2">
-                <h2 class="mb-1"><i class="fas fa-calendar-alt me-2" style="color: var(--theme-yellow);"></i>My Class Timetable</h2>
+                <span class="badge bg-warning bg-opacity-20 text-warning border border-warning border-opacity-20 px-3 py-1.5 rounded-pill fw-semibold" style="font-size: 0.78rem;">
-                <p class="mb-0">
+                    <i class="fa-solid fa-calendar-days me-1"></i> Weekly Academic Schedule
-                    Automobile Engineering Academy Student Portal
+                </span>
-                </p>
             </div>
-
+            <h2 class="fw-bold text-white mb-1" style="letter-spacing: -0.5px;">
-            <button class="btn download-btn shadow-sm" onclick="window.print()">
+                My Class Timetable
-                <i class="fas fa-print me-2"></i>Print Timetable
+            </h2>
-            </button>
+            <p class="text-white-50 mb-0 fs-6">
+                Automobile Engineering Academy • Student Academic Schedule 2026
+            </p>
         </div>
+
+        <button class="btn btn-print shadow-sm" onclick="window.print()">
+            <i class="fa-solid fa-print me-2"></i>Print Timetable
+        </button>
     </div>
 
-    <!-- Top Grid Info -->
+    <!-- Top Grid Info Cards -->
-    <div class="row g-4 mb-4">
+    <div class="row g-3 g-lg-4 mb-4">
 
         <!-- Today's Schedule Card -->
-        <div class="col-lg-4">
+        <div class="col-lg-5">
-            <div class="today-card">
+            <div class="top-info-card">
-                <h5 class="mb-3">
+                <div class="card-title-heading">
-                    <i class="fas fa-clock me-2" style="color: var(--theme-red);"></i>
+                    <div class="rounded-3 bg-danger bg-opacity-10 text-danger p-2.5 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
-                    Today's Schedule ({{ $todayName ?? 'Today' }})
+                        <i class="fa-solid fa-clock-rotate-left fs-5"></i>
-                </h5>
+                    </div>
+                    <div>
+                        Today's Schedule 
+                        <span class="badge bg-danger-subtle text-danger border border-danger-subtle ms-1 fw-bold rounded-pill" style="font-size: 0.72rem;">
+                            {{ $todayName ?? 'Today' }}
+                        </span>
+                    </div>
+                </div>
 
                 @forelse($todaySchedule ?? [] as $todayItem)
                     @php
-                        $borderStyle = 'var(--theme-navy)';
+                        $typeClass = 'theory';
-                        $badgeClass = 'badge-theory';
+                        $iconClass = 'fa-book-open';
-                        
                         if(strtolower($todayItem->type) == 'practical') {
-                            $borderStyle = 'var(--theme-red)';
+                            $typeClass = 'practical';
-                            $badgeClass = 'badge-practical';
+                            $iconClass = 'fa-flask';
                         } elseif(strtolower($todayItem->type) == 'workshop') {
-                            $borderStyle = '#e67e22';
+                            $typeClass = 'workshop';
-                            $badgeClass = 'badge-workshop';
+                            $iconClass = 'fa-screwdriver-wrench';
                         }
                     @endphp
 
-                    <div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid {{ $borderStyle }};">
+                    <div class="today-class-item {{ $typeClass }}">
-                        <strong>{{ $todayItem->time_slot }}</strong><br>
+                        <div class="d-flex align-items-center justify-content-between mb-1">
-                        <span class="badge {{ $badgeClass }} me-1">{{ $todayItem->type }}</span>
+                            <span class="fw-bold text-dark small"><i class="fa-regular fa-clock me-1 text-secondary"></i> {{ $todayItem->time_slot }}</span>
-                        <span>{{ $todayItem->subject_name }}</span>
+                            <span class="type-tag-modern {{ $typeClass }} mb-0">
+                                <i class="fa-solid {{ $iconClass }}"></i> {{ $todayItem->type }}
+                            </span>
+                        </div>
+                        <div class="subject-title {{ $typeClass }}">{{ $todayItem->subject_name }}</div>
                     </div>
                 @empty
-                    <div class="p-3 text-center text-muted border rounded">
+                    <div class="p-4 text-center border rounded-4 bg-light bg-opacity-50">
-                        <i class="fas fa-coffee me-1"></i> No classes scheduled for today!
+                        <div class="rounded-circle bg-warning bg-opacity-20 text-warning d-inline-flex align-items-center justify-content-center p-3 mb-2" style="width: 54px; height: 54px;">
+                            <i class="fa-solid fa-mug-hot fs-3"></i>
+                        </div>
+                        <h6 class="fw-bold text-dark mb-1">No classes scheduled for today!</h6>
+                        <p class="small text-muted mb-0">Take time to review your course materials or relax.</p>
                     </div>
                 @endforelse
             </div>
         </div>
 
-        <!-- Legend Card -->
+        <!-- Timetable Legend & Guidelines Card -->
-        <div class="col-lg-8">
+        <div class="col-lg-7">
-            <div class="info-card p-4 h-100 d-flex flex-column justify-content-between">
+            <div class="top-info-card d-flex flex-column justify-content-between">
                 <div>
-                    <h5 class="mb-3">
+                    <div class="card-title-heading">
-                        <i class="fas fa-info-circle me-2" style="color: var(--theme-navy);"></i>
+                        <div class="rounded-3 bg-primary bg-opacity-10 text-primary p-2.5 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
-                        Timetable Legend
+                            <i class="fa-solid fa-sliders fs-5"></i>
-                    </h5>
+                        </div>
+                        <span>Timetable Legend & Session Types</span>
+                    </div>
 
-                    <div class="legend mb-2">
+                    <div class="mb-3">
-                        <span>
+                        <span class="legend-pill theory">
-                            <span class="badge badge-theory">Theory</span>
+                            <i class="fa-solid fa-book-open"></i> Theory Session
                         </span>
-                        <span>
+                        <span class="legend-pill practical">
-                            <span class="badge badge-practical">Practical</span>
+                            <i class="fa-solid fa-flask"></i> Practical Session
                         </span>
-                        <span>
+                        <span class="legend-pill workshop">
-                            <span class="badge badge-workshop">Workshop</span>
+                            <i class="fa-solid fa-screwdriver-wrench"></i> Workshop Training
                         </span>
-                        <span>
+                        <span class="legend-pill break">
-                            <span class="badge badge-break">Break</span>
+                            <i class="fa-solid fa-utensils"></i> Rest / Lunch Break
                         </span>
                     </div>
                 </div>
 
-                <div>
+                <div class="pt-3 border-top border-slate-100 mt-2">
-                    <hr class="text-muted">
+                    <div class="p-3 rounded-4 bg-danger bg-opacity-10 text-danger border border-danger border-opacity-10 d-flex align-items-center gap-3">
-                    <p class="mb-0 text-muted small">
+                        <div class="rounded-circle bg-danger text-white p-2 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 32px; height: 32px;">
-                        <i class="fas fa-exclamation-circle me-1" style="color: var(--theme-red);"></i>
+                            <i class="fa-solid fa-exclamation" style="font-size: 14px;"></i>
-                        Please arrive at least 15 minutes before each class. Attendance is compulsory for all practical sessions.
+                        </div>
-                    </p>
+                        <span class="small fw-semibold">
+                            Please arrive at least 15 minutes before each session. 100% attendance is mandatory for practical and workshop modules.
+                        </span>
+                    </div>
                 </div>
             </div>
         </div>
 
     </div>
 
-    <!-- Timetable Grid -->
+    <!-- Main Timetable Grid -->
-    <div class="table-card">
+    <div class="timetable-wrapper mb-5">
         <div class="table-responsive">
-            <table class="table table-bordered align-middle mb-0">
+            <table class="table table-modern align-middle mb-0">
                 <thead>
                     <tr>
-                        <th>Time</th>
+                        <th style="width: 150px;">
+                            <i class="fa-regular fa-clock me-1"></i> Time
+                        </th>
                         @foreach($days as $day)
-                            <th class="{{ ($todayName ?? '') == $day ? 'bg-danger text-white' : '' }}">
+                            @php
-                                {{ $day }} {{ ($todayName ?? '') == $day ? '(Today)' : '' }}
+                                $isToday = ($todayName ?? '') == $day;
+                            @endphp
+                            <th class="{{ $isToday ? 'today-header' : '' }}">
+                                {{ $day }}
+                                @if($isToday)
+                                    <span class="badge bg-warning text-dark px-2 py-1 rounded-pill ms-1 fw-bold" style="font-size: 0.7rem; box-shadow: 0 2px 8px rgba(255, 234, 133, 0.4);">
+                                        <i class="fa-solid fa-star me-1"></i>TODAY
+                                    </span>
+                                @endif
                             </th>
                         @endforeach
                     </tr>
@@ -286,7 +468,6 @@ body {
                 <tbody>
                     @forelse($timeSlots as $slot)
                         @php
-                            // Lunch/Break Check
                             $isBreakRow = false;
                             foreach($days as $d) {
                                 if(isset($schedule[$slot][$d]) && strtolower($schedule[$slot][$d]->type) == 'break') {
@@ -297,32 +478,49 @@ body {
                         @endphp
 
                         @if($isBreakRow)
-                            <tr class="lunch-row">
+                            <tr class="lunch-break-row">
-                                <th>{{ $slot }}</th>
+                                <th class="time-column">{{ $slot }}</th>
-                                <td colspan="5">
+                                <td colspan="5" class="text-center">
-                                    🍴 LUNCH BREAK / REST TIME
+                                    <i class="fa-solid fa-mug-hot me-2 text-warning"></i> LUNCH BREAK & REST TIME (12:30 PM - 01:30 PM)
                                 </td>
                             </tr>
                         @else
                             <tr>
-                                <th>{{ $slot }}</th>
+                                <th class="time-column">
+                                    <div class="d-flex align-items-center justify-content-center gap-1">
+                                        <i class="fa-regular fa-clock text-muted opacity-75" style="font-size: 0.8rem;"></i>
+                                        <span>{{ $slot }}</span>
+                                    </div>
+                                </th>
                                 @foreach($days as $day)
-                                    <td>
+                                    @php
+                                        $isToday = ($todayName ?? '') == $day;
+                                    @endphp
+                                    <td class="{{ $isToday ? 'today-cell' : '' }}">
                                         @if(isset($schedule[$slot][$day]))
                                             @php
                                                 $cell = $schedule[$slot][$day];
-                                                $typeClass = 'badge-theory';
+                                                $typeClass = 'theory';
+                                                $iconClass = 'fa-book-open';
                                                 
                                                 if(strtolower($cell->type) == 'practical') {
-                                                    $typeClass = 'badge-practical';
+                                                    $typeClass = 'practical';
+                                                    $iconClass = 'fa-flask';
                                                 } elseif(strtolower($cell->type) == 'workshop') {
-                                                    $typeClass = 'badge-workshop';
+                                                    $typeClass = 'workshop';
+                                                    $iconClass = 'fa-screwdriver-wrench';
                                                 }
                                             @endphp
-                                            <span class="badge {{ $typeClass }} mb-1">{{ $cell->type }}</span><br>
+                                            <div class="class-cell-card {{ $typeClass }}">
-                                            {{ $cell->subject_name }}
+                                                <div class="type-tag-modern {{ $typeClass }}">
+                                                    <i class="fa-solid {{ $iconClass }}"></i> {{ $cell->type }}
+                                                </div>
+                                                <div class="subject-title {{ $typeClass }}">{{ $cell->subject_name }}</div>
+                                            </div>
                                         @else
-                                            <span class="text-muted">-</span>
+                                            <div class="empty-cell-badge">
+                                                <i class="fa-solid fa-minus"></i>
+                                            </div>
                                         @endif
                                     </td>
                                 @endforeach
@@ -330,8 +528,9 @@ body {
                         @endif
                     @empty
                         <tr>
-                            <td colspan="6" class="text-center py-4 text-muted">
+                            <td colspan="6" class="text-center py-5 text-muted">
-                                <i class="fas fa-info-circle me-1"></i> No timetable data available right now.
+                                <i class="fa-solid fa-calendar-xmark text-secondary mb-2 fs-2 d-block"></i>
+                                <span class="fw-semibold">No timetable data available for this week.</span>
                             </td>
                         </tr>
                     @endforelse

resources/views/welcome.blade.php

@@ -172,7 +172,7 @@ body {
     position: absolute;
     inset: 0;
     z-index: 1;
-    background: linear-gradient(rgba(207, 226, 255, 0.88), rgba(0, 9, 15, 0.75));
+    background: linear-gradient(135deg, rgba(30, 35, 62, 0.88) 0%, rgba(21, 24, 44, 0.82) 50%, rgba(15, 18, 35, 0.92) 100%);
     pointer-events: none;
 }
 
@@ -181,8 +181,8 @@ body {
     position: absolute;
     inset: 0;
     z-index: 2;
-    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 28%),
+    background: radial-gradient(circle at top right, rgba(255, 234, 133, 0.15), transparent 35%),
-                radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.08), transparent 30%);
+                radial-gradient(circle at bottom left, rgba(130, 36, 36, 0.2), transparent 40%);
     pointer-events: none;
 }
 
@@ -205,22 +205,23 @@ body {
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    background: rgba(255, 255, 255, 0.12);
+    background: rgba(255, 234, 133, 0.12);
-    border: 1px solid rgba(255, 255, 255, 0.25);
+    border: 1px solid rgba(255, 234, 133, 0.3);
-    backdrop-filter: blur(12px);
+    backdrop-filter: blur(14px);
-    -webkit-backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(14px);
-    color: #fff;
+    color: var(--theme-yellow, #FFEA85);
     font-size: 13px;
-    font-weight: 600;
+    font-weight: 700;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.05em;
     text-transform: uppercase;
-    padding: 8px 18px;
+    padding: 9px 20px;
     border-radius: 999px;
-    margin-bottom: 22px;
+    margin-bottom: 24px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }
 
 .hero-badge i {
-    color: #f2e862;
+    color: #FFEA85;
 }
 
 .hero h1 {
@@ -229,14 +230,15 @@ body {
     margin: 0;
     line-height: 1.05;
     letter-spacing: -0.04em;
-    text-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
+    text-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
+    color: #ffffff;
 }
 
 .hero p {
     font-size: clamp(1rem, 1.2vw, 1.4rem);
     max-width: 760px;
     margin: 24px auto 0;
-    color: rgba(255, 255, 255, 0.92);
+    color: rgba(255, 255, 255, 0.9);
     letter-spacing: 0.01em;
 }
 
@@ -253,6 +255,58 @@ body {
     margin-left: 10px;
 }
 
+.btn-theme {
+    background: linear-gradient(135deg, #822424 0%, #df2c3e 100%) !important;
+    color: #ffffff !important;
+    padding: 14px 32px;
+    border-radius: 999px;
+    font-weight: 700;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 0 8px 24px rgba(130, 36, 36, 0.4) !important;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+
+.btn-theme:hover {
+    transform: translateY(-4px) !important;
+    box-shadow: 0 12px 30px rgba(130, 36, 36, 0.55) !important;
+}
+
+.btn-outline-theme {
+    background: rgba(255, 255, 255, 0.12) !important;
+    color: #ffffff !important;
+    border: 1px solid rgba(255, 255, 255, 0.35) !important;
+    padding: 14px 32px;
+    border-radius: 999px;
+    font-weight: 700;
+    backdrop-filter: blur(14px);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+
+.btn-outline-theme:hover {
+    background: rgba(255, 255, 255, 0.22) !important;
+    color: #ffffff !important;
+    border-color: #ffffff !important;
+    transform: translateY(-4px) !important;
+}
+
+.btn-outline-light-custom {
+    background: #FFEA85 !important;
+    color: #1E233E !important;
+    border: none !important;
+    padding: 14px 32px;
+    border-radius: 999px;
+    font-weight: 800;
+    box-shadow: 0 8px 24px rgba(255, 234, 133, 0.35) !important;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+
+.btn-outline-light-custom:hover {
+    background: #ffffff !important;
+    color: #1E233E !important;
+    transform: translateY(-4px) !important;
+    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.4) !important;
+}
+
 .hero-stats {
     display: flex;
     flex-wrap: wrap;
@@ -267,31 +321,33 @@ body {
     display: flex;
     align-items: center;
     gap: 10px;
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.12);
-    border: 1px solid rgba(255, 255, 255, 0.18);
+    border: 1px solid rgba(255, 255, 255, 0.22);
-    backdrop-filter: blur(12px);
+    backdrop-filter: blur(14px);
-    -webkit-backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(14px);
     border-radius: 999px;
-    padding: 10px 20px;
+    padding: 11px 22px;
     color: #fff;
     transition: transform 0.3s ease, background-color 0.3s ease;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
 }
 
 .hero-stat-pill:hover {
-    transform: translateY(-3px);
+    transform: translateY(-4px);
-    background: rgba(255, 255, 255, 0.16);
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 234, 133, 0.4);
 }
 
 .hero-stat-pill strong {
-    font-size: 17px;
+    font-size: 18px;
     font-weight: 800;
     line-height: 1;
-    font-variant-numeric: tabular-nums;
+    color: #FFEA85;
 }
 
 .hero-stat-pill span {
     font-size: 12px;
-    color: rgba(255, 255, 255, 0.78);
+    color: rgba(255, 255, 255, 0.88);
     display: block;
     letter-spacing: 0.02em;
 }
@@ -317,39 +373,51 @@ body {
 
 .course-card {
     position: relative;
-    border: 1px solid var(--card-border);
+    border: 1px solid rgba(226, 232, 240, 0.9);
-    border-radius: 18px;
+    border-radius: 26px;
     overflow: hidden;
-    background: #fff;
+    background: #ffffff;
-    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s ease;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    box-shadow: 0 5px 15px var(--shadow-color);
+    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06);
 }
 
-.course-card::after {
+.course-card::before {
     content: '';
     position: absolute;
-    inset: 0;
+    top: 0;
-    z-index: 3;
+    left: 0;
-    pointer-events: none;
+    right: 0;
-    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
+    height: 4px;
-    transform: translateX(-120%);
+    background: linear-gradient(90deg, #3E51B8 0%, #FFE618 50%, #BC1A1A 100%);
-    transition: transform 0.9s ease;
+    opacity: 0.35;
+    transition: opacity 0.4s ease, height 0.4s ease;
+    z-index: 4;
 }
 
-.course-card:hover::after {
+.course-card:hover::before {
-    transform: translateX(120%);
+    opacity: 1;
+    height: 5px;
 }
 
 .course-card:hover {
-    transform: translateY(-8px);
+    transform: translateY(-10px);
-    box-shadow: 0 24px 45px rgba(15, 44, 89, 0.16);
+    box-shadow: 0 25px 50px -10px rgba(62, 81, 184, 0.18);
-    border-color: rgba(48, 133, 195, 0.25);
+    border-color: rgba(62, 81, 184, 0.3);
 }
 
 .course-image-wrapper {
     position: relative;
     overflow: hidden;
-    height: 210px;
+    height: 220px;
+}
+
+.course-image-wrapper::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, transparent 60%);
+    pointer-events: none;
+    z-index: 1;
 }
 
 .course-card img {
@@ -360,7 +428,7 @@ body {
 }
 
 .course-card:hover img {
-    transform: scale(1.12);
+    transform: scale(1.09);
 }
 
 .courses-section .row.g-4 > div {
@@ -369,32 +437,32 @@ body {
 
 .badge-floating {
     position: absolute;
-    top: 15px;
+    top: 16px;
-    left: 15px;
+    left: 16px;
     display: inline-flex;
     align-items: center;
-    gap: 5px;
+    gap: 6px;
-    background: #BC1A1A;
+    background: linear-gradient(135deg, #BC1A1A 0%, #E11D48 100%);
     color: #fff;
-    font-weight: 700;
+    font-weight: 800;
     font-size: 11px;
-    padding: 5px 12px;
+    padding: 6px 14px;
-    border-radius: 30px;
+    border-radius: 999px;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
+    letter-spacing: 0.06em;
     z-index: 2;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.15), 0 0 0 0 rgba(188, 26, 26, 0.45);
+    box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4);
     animation: badgePulse 2.4s ease-out infinite;
 }
 
 @keyframes badgePulse {
-    0% { box-shadow: 0 4px 10px rgba(0,0,0,0.15), 0 0 0 0 rgba(188, 26, 26, 0.45); }
+    0% { box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4), 0 0 0 0 rgba(188, 26, 26, 0.45); }
-    70% { box-shadow: 0 4px 10px rgba(0,0,0,0.15), 0 0 0 8px rgba(188, 26, 26, 0); }
+    70% { box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4), 0 0 0 8px rgba(188, 26, 26, 0); }
-    100% { box-shadow: 0 4px 10px rgba(0,0,0,0.15), 0 0 0 0 rgba(188, 26, 26, 0); }
+    100% { box-shadow: 0 4px 14px rgba(188, 26, 26, 0.4), 0 0 0 0 rgba(188, 26, 26, 0); }
 }
 
 .course-card .card-body {
-    padding: 24px;
+    padding: 26px 24px 22px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -402,21 +470,21 @@ body {
 
 .course-title {
     font-size: 20px;
-    font-weight: 700;
+    font-weight: 750;
-    color: var(--primary);
+    color: #0F172A;
     margin-bottom: 8px;
-    line-height: 1.4;
+    line-height: 1.35;
     transition: color 0.3s ease;
 }
 
 .course-card:hover .course-title {
-    color: #914040;
+    color: #3E51B8;
 }
 
 .course-author {
     font-size: 13.5px;
-    font-weight: 500;
+    font-weight: 600;
-    color: var(--accent-blue);
+    color: #3085C3;
     margin-bottom: 12px;
     display: flex;
     align-items: center;
@@ -425,25 +493,29 @@ body {
 
 .course-short-desc {
     font-size: 14px;
-    color: #556575;
+    color: #64748B;
     line-height: 1.6;
-    margin-bottom: 15px;
+    margin-bottom: 16px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }
 
 .course-features-container {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    margin-bottom: 15px;
+    margin-bottom: 18px;
 }
 
 .feature-pill {
-    background: rgba(48, 133, 195, 0.08);
+    background: rgba(62, 81, 184, 0.08);
-    color: var(--accent-blue);
+    color: #3E51B8;
     font-size: 12px;
     font-weight: 600;
-    padding: 4px 10px;
+    padding: 5px 12px;
-    border-radius: 6px;
+    border-radius: 8px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
@@ -451,26 +523,26 @@ body {
 }
 
 .course-card:hover .feature-pill {
-    background: rgba(48, 133, 195, 0.15);
+    background: rgba(62, 81, 184, 0.15);
     transform: translateY(-2px);
 }
 
 .course-footer {
     margin-top: auto;
-    padding-top: 15px;
+    padding-top: 16px;
-    border-top: 1px solid rgba(15, 44, 89, 0.08);
+    border-top: 1px dashed #E2E8F0;
 }
 
 .course-meta-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 15px;
+    margin-bottom: 16px;
 }
 
 .rating-star {
-    color: #f39c12;
+    color: #f59e0b;
-    font-weight: 700;
+    font-weight: 750;
     font-size: 14px;
     display: inline-flex;
     align-items: center;
@@ -478,17 +550,21 @@ body {
 }
 
 .rating-count {
-    color: var(--text-muted);
+    color: #64748B;
     font-weight: 500;
+    font-size: 13px;
 }
 
 .status-chip {
     display: inline-flex;
     align-items: center;
     gap: 5px;
-    background: rgba(46, 204, 113, 0.1);
+    background: rgba(16, 185, 129, 0.1);
-    padding: 4px 10px;
+    color: #10B981;
+    padding: 4px 12px;
     border-radius: 999px;
+    font-size: 12px;
+    font-weight: 700;
 }
 
 .star-rating {
@@ -510,7 +586,7 @@ body {
     overflow: hidden;
     white-space: nowrap;
     width: 0;
-    color: #f39c12;
+    color: #f59e0b;
     transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -519,11 +595,11 @@ body {
 }
 
 .read-btn {
-    background:#822424;
+    background: linear-gradient(135deg, #0F2C59 0%, #3E51B8 100%);
-    color: white;
+    color: #ffffff;
-    padding: 12px 20px;
+    padding: 12px 24px;
     font-weight: 700;
-    border-radius: 14px;
+    border-radius: 999px;
     font-size: 14px;
     transition: all 0.3s ease;
     text-decoration: none;
@@ -531,6 +607,7 @@ body {
     align-items: center;
     justify-content: center;
     gap: 8px;
+    box-shadow: 0 6px 18px rgba(62, 81, 184, 0.25);
 }
 
 .read-btn .read-btn-arrow {
@@ -538,13 +615,13 @@ body {
 }
 
 .course-card:hover .read-btn {
-    background: #6a1c1c;
+    background: linear-gradient(135deg, #BC1A1A 0%, #822424 100%);
-    color: #fff;
+    color: #ffffff;
-    box-shadow: 0 8px 18px rgba(130, 36, 36, 0.3);
+    box-shadow: 0 10px 24px rgba(188, 26, 26, 0.35);
 }
 
 .course-card:hover .read-btn .read-btn-arrow {
-    transform: translateX(4px);
+    transform: translateX(5px);
 }
 
 /* ===== Why Choose Us ===== */
@@ -554,7 +631,7 @@ body {
     left: 0; 
     width: 100%; 
     height: 100%;
-    background: linear-gradient(rgba(17, 17, 39, 0.9), rgba(0, 9, 15, 0.6)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80');
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.88) 50%, rgba(15, 23, 42, 0.95) 100%), 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;
@@ -566,43 +643,64 @@ body {
 }
 
 .custom-feature-card {
-    background: rgba(255, 255, 255, 0.43);
+    position: relative;
-    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.08);
-    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(18px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    -webkit-backdrop-filter: blur(18px);
-    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
-    padding: 36px 30px;
+    border-radius: 26px;
-    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    padding: 44px 30px 38px;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
+    overflow: hidden;
+    height: 100%;
+}
+
+.custom-feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: linear-gradient(90deg, #3E51B8 0%, #FFE618 50%, #BC1A1A 100%);
+    opacity: 0.35;
+    transition: opacity 0.4s ease, height 0.4s ease;
+}
+
+.custom-feature-card:hover::before {
+    opacity: 1;
+    height: 5px;
 }
 
 .custom-feature-card:hover {
-    transform: translateY(-8px);
+    transform: translateY(-12px);
-    background: rgba(0, 0, 0, 0.07);
+    background: rgba(255, 255, 255, 0.14);
-    border-color: rgb(255, 255, 255);
+    border-color: rgba(255, 255, 255, 0.35);
-    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 30px rgba(62, 81, 184, 0.3);
 }
 
 .icon-box {
-    background: #6a2525;
+    width: 68px;
-    color: #FFE618;
+    height: 68px;
-    width: 64px;
+    background: linear-gradient(135deg, rgba(62, 81, 184, 0.35) 0%, rgba(10, 103, 223, 0.2) 100%);
-    height: 64px;
+    color: #60A5FA;
-    border-radius: 16px;
+    border-radius: 22px;
+    border: 1px solid rgba(96, 165, 250, 0.35);
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 22px;
+    margin-bottom: 26px;
-    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-    transition: all 0.35s ease;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .custom-feature-card:hover .icon-box {
-    transform: scale(1.08) rotate(-4deg);
+    background: linear-gradient(135deg, #3E51B8 0%, #BC1A1A 100%);
-}
+    color: #ffffff;
-
+    border-color: transparent;
-.custom-feature-card:hover .icon-box {
+    transform: scale(1.12) rotate(6deg);
-    background: #6a2525;
+    box-shadow: 0 15px 30px rgba(188, 26, 26, 0.4), 0 0 20px rgba(62, 81, 184, 0.6);
-    color: #faf9f5;
 }
 
 /* ===== Animations ===== */
@@ -789,12 +887,12 @@ body {
     </div>
     <div class="container h-100">
         <div class="hero-content text-center animate-on-scroll animated fade-up-init">
-            <span class="hero-badge"><i class="fa-solid fa-award"></i> Accredited Automotive Engineering Institute</span>
+            <span class="hero-badge"><i class="fa-solid fa-award me-1 text-warning"></i> Accredited Automotive Engineering Institute</span>
-            <h1 class="display-4">Automobile Engineering Academy</h1>
+            <h1 class="display-4 fw-extrabold text-white">Automobile Engineering Academy</h1>
-            <p class="mb-4">Driving Innovation Through Education, Research &amp; Technology</p>
+            <p class="mb-4 text-white-90 fs-5">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; border: 2px solid #FFF;">
+                <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme">
                     <i class="fa-solid fa-user-plus me-2"></i>Apply Now
                 </a>
                 <a href="/courses" class="btn btn-outline-theme">
@@ -1002,38 +1100,38 @@ 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">
-            <span class="section-eyebrow" style="background: rgba(255,255,255,0.12); color: #FFE618;"><i class="fa-solid fa-star"></i> Our Advantage</span>
+            <span class="section-eyebrow" style="background: linear-gradient(135deg, rgba(255, 230, 24, 0.18) 0%, rgba(227, 100, 20, 0.22) 100%); border: 1px solid rgba(255, 230, 24, 0.45); color: #FFE618; padding: 8px 22px; border-radius: 999px;"><i class="fa-solid fa-star"></i> Our Advantage</span>
-            <h2 id="why-us-heading" class="display-5 text-white mb-0 fw-bold" style="letter-spacing: -0.02em;">Why Choose Us?</h2>
+            <h2 id="why-us-heading" class="display-5 text-white mb-0 fw-bold mt-3" style="letter-spacing: -0.02em;">Why Choose Us?</h2>
         </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 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
+                <div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center">
-                    <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;">
+                    <div class="icon-box">
-                        <i class="fa-solid fa-flask-vial fs-3 fa-beat-hover"></i>
+                        <i class="fa-solid fa-flask-vial fs-3"></i>
                     </div>
-                    <h4 class="text-white fs-5 mb-3 fw-semibold">Modern Laboratories</h4>
+                    <h4 class="text-white fs-5 mb-3 fw-bold">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>
+                    <p class="small mb-0 lh-base" style="color: #CBD5E1;">State-of-the-art facilities equipped with latest industrial testing tools & high-voltage rigs.</p>
                 </div>
             </div>
 
             <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="custom-feature-card h-100 d-flex flex-column align-items-center text-center">
-                    <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;">
+                    <div class="icon-box">
-                        <i class="fa-solid fa-graduation-cap fs-3 fa-bounce-hover"></i>
+                        <i class="fa-solid fa-graduation-cap fs-3"></i>
                     </div>
-                    <h4 class="text-white fs-5 mb-3 fw-semibold">Qualified Lecturers</h4>
+                    <h4 class="text-white fs-5 mb-3 fw-bold">Qualified Lecturers</h4>
-                    <p class="text-white-50 small mb-0 lh-base">Learn directly from veteran automotive engineers and researchers.</p>
+                    <p class="small mb-0 lh-base" style="color: #CBD5E1;">Learn directly from veteran automotive engineers, researchers, and TVEC certified instructors.</p>
                 </div>
             </div>
 
             <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="custom-feature-card h-100 d-flex flex-column align-items-center text-center">
-                    <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;">
+                    <div class="icon-box">
-                        <i class="fa-solid fa-car fs-3 fa-shake-hover"></i>
+                        <i class="fa-solid fa-car fs-3"></i>
                     </div>
-                    <h4 class="text-white fs-5 mb-3 fw-semibold">Hands-on Training</h4>
+                    <h4 class="text-white fs-5 mb-3 fw-bold">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>
+                    <p class="small mb-0 lh-base" style="color: #CBD5E1;">Gain real-world diagnostics experience inside our dedicated workshop floors & EV testing bays.</p>
                 </div>
             </div>
         </div>

routes/web.php

@@ -19,6 +19,7 @@ use App\Http\Controllers\AdminProfileController;
 use App\Http\Controllers\AdminTimetableController;
 use App\Http\Controllers\AdminDashboardController;
 use App\Http\Controllers\welcomeController;
+use App\Http\Controllers\DocumentDownloadController;
 
 /*
 |--------------------------------------------------------------------------
@@ -42,6 +43,9 @@ Route::view('/abouts', 'abouts')->name('abouts');
 Route::view('/contact', 'contacts')->name('contact');
 
 Route::view('/signin', 'signin')->name('signin');
+Route::get('/login', function () {
+    return redirect()->route('signin')->with('error', 'Please sign in to your account to continue!');
+})->name('login');
 Route::view('/signup', 'signup')->name('signup');
 
 /*
@@ -95,6 +99,7 @@ Route::middleware(['web'])->group(function () {
     })->name('student.portal');
 
     Route::get('/StudentProfile', [StudentPortalController::class, 'showProfile'])->name('StudentProfile');
+    Route::post('/StudentProfile/update', [StudentPortalController::class, 'updateProfile'])->name('student.profile.update');
     Route::get('/results', [ResultsController::class, 'index'])->name('results');
 
     Route::get('/Dashboard', function () {
@@ -125,6 +130,12 @@ Route::middleware(['web'])->group(function () {
 
     Route::get('/mycourse', [CoureseAssignController::class, 'showMyCourse'])->name('mycourse');
     Route::get('/module/{id}', [CoureseAssignController::class, 'showModule'])->name('module.show');
+
+    /* Document Downloads */
+    Route::get('/student/download/calendar', [DocumentDownloadController::class, 'downloadAcademicCalendar'])->name('student.download.calendar');
+    Route::get('/student/download/handbook', [DocumentDownloadController::class, 'downloadStudentHandbook'])->name('student.download.handbook');
+    Route::get('/student/download/exam-code', [DocumentDownloadController::class, 'downloadExamCode'])->name('student.download.examcode');
+    Route::get('/student/download/helpdesk', [DocumentDownloadController::class, 'downloadHelpdeskGuide'])->name('student.download.helpdesk');
 });
 
 /*