diff --git a/resources/views/abouts.blade.php b/resources/views/abouts.blade.php
index e73552b..d61ed88 100644
--- a/resources/views/abouts.blade.php
+++ b/resources/views/abouts.blade.php
@@ -30,75 +30,140 @@
     margin-bottom:40px;
 }
 
-.about-box{
+.about-box {
     background:#fff;
-    border-radius:15px;
-    padding:25px;
-    box-shadow:0 5px 20px rgba(0,0,0,.08);
-    transition:.3s;
+    border-radius:20px;
+    padding:35px 25px;
+    box-shadow:0 10px 30px rgba(0,0,0,.05);
+    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    border: 1px solid #efeff4;
 }
 
-.about-box:hover{
-    transform:translateY(-6px);
+.about-box:hover {
+    transform: translateY(-10px) scale(1.02);
+    box-shadow: 0 20px 40px rgba(94, 36, 78, 0.1);
+    border-color: var(--primary);
 }
 
-.icon-circle{
-    width:70px;
-    height:70px;
+.icon-circle {
+    width:75px;
+    height:75px;
     background:var(--primary);
     color:#fff;
     border-radius:50%;
     display:flex;
     align-items:center;
     justify-content:center;
-    font-size:26px;
+    font-size:28px;
     margin:auto;
+    transition: all 0.4s ease;
+}
+
+.about-box:hover .icon-circle {
+    background: var(--secondary);
+    transform: rotateY(180deg); /* කාඩ් එක උඩට යද්දී අයිකන් එක කැරකෙනවා */
+}
+
+/* ========================================================
+   Advanced CSS Scroll Animations
+   ======================================================== */
+.animate-item {
+    opacity: 0;
+    will-change: transform, opacity;
+    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+/* 1. පල්ලෙහා ඉඳන් උඩට එන ඇනිමේෂන් */
+.fade-up-init {
+    transform: translateY(40px);
+}
+
+/* 2. වමේ ඉඳන් දකුණට (රූපය සඳහා) */
+.slide-left-init {
+    transform: translateX(-50px);
+}
+
+/* 3. දකුණේ ඉඳන් වමට (විස්තරය සඳහා) */
+.slide-right-init {
+    transform: translateX(50px);
+}
+
+/* 4. Zoom වෙලා bounce වෙන්න (කාඩ්ස් සඳහා) */
+.zoom-in-init {
+    transform: scale(0.85);
+}
+
+/* Active Class (Scroll කරද්දී apply වේ) */
+.animate-item.animated {
+    opacity: 1;
+    transform: translate(0) scale(1);
+}
+
+/* CTA බටන් එක ගැස්සෙන ඇනිමේෂන් එකක් */
+@keyframes pulse-btn {
+    0% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0.4); }
+    70% { box-shadow: 0 0 0 15px rgba(94, 36, 78, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0); }
+}
+
+.cta-btn {
+    background: var(--primary);
+    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: var(--secondary);
+    transform: scale(1.05);
 }
 </style>
 
 <!-- HERO -->
 <section class="hero-about">
     <div class="container">
-        <h1 class="fw-bold">About Our Institute</h1>
-        <p class="mt-3">
-            We are committed to delivering high-quality automotive education
-            with practical training and industry-focused learning.
-        </p>
+        <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">
+<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="row align-items-center">
-
-<div class="col-md-6">
-    <img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
-         class="img-fluid rounded shadow"
-         alt="About Image">
-</div>
-
-<div class="col-md-6">
-    <h2>Who We Are</h2>
-    <p class="text-muted">
-        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">
-        We focus on building skilled professionals who are ready for
-        the global automotive industry.
-    </p>
-
-    <a href="{{ route('courses') }}" class="btn btn-dark mt-3">
-        View Courses
-    </a>
-</div>
-
-</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="{{ route('courses') }}" class="btn btn-dark btn-lg px-4 rounded-pill">
+                View Courses
+            </a>
+        </div>
+    </div>
 </div>
 </section>
 
@@ -106,71 +171,85 @@
 <section class="py-5 bg-light">
 <div class="container">
 
-<div class="section-title">
-    <h2>Why Choose Us</h2>
+<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">
+    <!-- කාඩ් එකින් එක Zoom-in වේ -->
+    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
+        <div class="about-box text-center">
+            <div class="icon-circle">
+                <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">
-<div class="about-box text-center">
-<div class="icon-circle">
-<i class="fa-solid fa-chalkboard-user"></i>
-</div>
-<h4 class="mt-3">Expert Lecturers</h4>
-<p class="text-muted">
-Experienced industry professionals guiding your learning journey.
-</p>
-</div>
-</div>
-
-<div class="col-md-4">
-<div class="about-box text-center">
-<div class="icon-circle">
-<i class="fa-solid fa-screwdriver-wrench"></i>
-</div>
-<h4 class="mt-3">Practical Training</h4>
-<p class="text-muted">
-Hands-on workshop experience with real vehicles and tools.
-</p>
-</div>
-</div>
-
-<div class="col-md-4">
-<div class="about-box text-center">
-<div class="icon-circle">
-<i class="fa-solid fa-certificate"></i>
-</div>
-<h4 class="mt-3">Certified Courses</h4>
-<p class="text-muted">
-Industry-recognized certifications to boost your career.
-</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">
-<div class="container">
-
-<h2>Start Your Automotive Career Today</h2>
-<p class="text-muted">
-Join our institute and become a skilled automotive professional.
-</p>
-
-
-
-<div style="display: flex; justify-content:center; width: 100%; ">
-    <a href="/apply" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium transition" style="color:#5E244E">
-       Apply Courses
-    </a>
-
+<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');
+                observer.unobserve(entry.target); 
+            }
+        });
+    }, {
+        threshold: 0.15 // Element එකෙන් 15%ක් පෙනෙද්දීම ඇනිමේෂන් එක පටන් ගනී
+    });
+
+    animatedElements.forEach(el => observer.observe(el));
+});
+</script>
+
 @endsection
\ No newline at end of file
diff --git a/resources/views/contacts.blade.php b/resources/views/contacts.blade.php
index b947e78..180f8c0 100644
--- a/resources/views/contacts.blade.php
+++ b/resources/views/contacts.blade.php
@@ -11,6 +11,10 @@
     --light:#f8f4f7;
 }
 
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
 .hero-contact{
     min-height:50vh;
     background:
@@ -27,26 +31,39 @@
 
 .contact-box{
     background:#fff;
-    border-radius:15px;
-    padding:25px;
-    box-shadow:0 5px 20px rgba(0,0,0,.08);
+    border-radius:20px;
+    padding:35px;
+    box-shadow: 0 10px 30px rgba(0,0,0,.05);
+    border: 1px solid #efeff4;
 }
 
 .form-control{
     border-radius:10px;
     padding:12px;
+    border: 1px solid #ced4da;
+    transition: all 0.3s ease;
+}
+
+.form-control:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 0.25rem rgba(94, 36, 78, 0.25);
 }
 
 .btn-contact{
     background:var(--primary);
     color:#fff;
-    /* border-radius:30px; */
-    padding:10px 30px;
+    border-radius:10px;
+    padding:12px 30px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    border: none;
 }
 
 .btn-contact:hover{
     background:var(--secondary);
     color:#fff;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
 }
 
 .info-card{
@@ -54,56 +71,96 @@
     border-radius:15px;
     padding:20px;
     text-align:center;
-    box-shadow:0 5px 15px rgba(0,0,0,.08);
+    box-shadow: 0 5px 20px rgba(0,0,0,.04);
+    border: 1px solid #efeff4;
     transition:.3s;
 }
 
 .info-card:hover{
     transform:translateY(-5px);
+    border-color: var(--primary);
+    box-shadow: 0 10px 25px rgba(94, 36, 78, 0.08);
+}
+
+/* Icons වල පාට වෙනස් කිරීම */
+.info-card i {
+    color: var(--primary) !important;
+}
+
+/* ========================================================
+   Custom CSS Scroll Animations
+   ======================================================== */
+.animate-item {
+    opacity: 0;
+    will-change: transform, opacity;
+    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+/* 1. පල්ලෙහා ඉඳන් උඩට (Hero & Map) */
+.fade-up-init {
+    transform: translateY(30px);
+}
+
+/* 2. වමේ ඉඳන් දකුණට (Form එක සඳහා) */
+.slide-left-init {
+    transform: translateX(-40px);
+}
+
+/* 3. එකපාර (Fade In) මතු වෙන්න (Info Cards සඳහා) */
+.fade-in-init {
+    transform: scale(0.98);
+}
+
+/* Active Class */
+.animate-item.animated {
+    opacity: 1;
+    transform: translate(0) scale(1);
 }
 </style>
 
 <!-- HERO -->
 <section class="hero-contact">
     <div class="container">
-        <h1 class="fw-bold">Contact Us</h1>
-        <p>We are here to help you. Reach us anytime.</p>
+        <div class="animate-item animated fade-up-init">
+            <h1 class="fw-bold display-4">Contact Us</h1>
+            <p class="fs-5">We are here to help you. Reach us anytime.</p>
+        </div>
     </div>
 </section>
 
-<!-- CONTACT SECTIONs-->
-<section class="py-5">
+<!-- CONTACT SECTION -->
+<section class="py-5 overflow-hidden">
 <div class="container">
 
 <div class="row g-4">
 
-<!-- Contact Form -->
-<div class="col-md-6">
+<!-- Contact Form (Slide Left) -->
+<div class="col-md-6 animate-item slide-left-init">
 <div class="contact-box">
 
-<h3 class="mb-4">Send Message</h3>
+<h3 class="mb-4 fw-bold" style="color: #1c1d1f;">Send Message</h3>
 
 <form action="#" method="POST">
 @csrf
 
 <div class="mb-3">
-    <label>Name</label>
-    <input type="text" name="name" class="form-control" placeholder="Your Name">
+    <label class="form-label fw-semibold">Name</label>
+    <input type="text" name="name" class="form-control" placeholder="Your Name" required>
 </div>
 
 <div class="mb-3">
-    <label>Email</label>
-    <input type="email" name="email" class="form-control" placeholder="Your Email">
+    <label class="form-label fw-semibold">Email</label>
+    <input type="email" name="email" class="form-control" placeholder="Your Email" required>
 </div>
 
 <div class="mb-3">
-    <label>Subject</label>
-    <input type="text" name="subject" class="form-control" placeholder="Subject">
+    <label class="form-label fw-semibold">Subject</label>
+    <input type="text" name="subject" class="form-control" placeholder="Subject" required>
 </div>
 
 <div class="mb-3">
-    <label>Message</label>
-    <textarea name="message" rows="5" class="form-control" placeholder="Your Message"></textarea>
+    <label class="form-label fw-semibold">Message</label>
+    <textarea name="message" rows="5" class="form-control" placeholder="Your Message" required></textarea>
 </div>
 
 <button type="submit" class="btn btn-contact w-100">
@@ -115,31 +172,31 @@ Send Message
 </div>
 </div>
 
-<!-- Contact Info -->
-<div class="col-md-6">
+<!-- Contact Info (සියල්ල එකපාර Fade In වේ) -->
+<div class="col-md-6 animate-item fade-in-init">
 
 <div class="info-card mb-3">
-<i class="fa-solid fa-location-dot fa-2x text-primary"></i>
-<h5 class="mt-2">Address</h5>
-<p>No 12, Colombo Road, Sri Lanka</p>
+<i class="fa-solid fa-location-dot fa-2x"></i>
+<h5 class="mt-3 fw-bold">Address</h5>
+<p class="text-muted mb-0">No 12, Colombo Road, Sri Lanka</p>
 </div>
 
 <div class="info-card mb-3">
-<i class="fa-solid fa-phone fa-2x text-success"></i>
-<h5 class="mt-2">Phone</h5>
-<p>+94 77 123 4567</p>
+<i class="fa-solid fa-phone fa-2x"></i>
+<h5 class="mt-3 fw-bold">Phone</h5>
+<p class="text-muted mb-0">+94 77 123 4567</p>
 </div>
 
 <div class="info-card mb-3">
-<i class="fa-solid fa-envelope fa-2x text-danger"></i>
-<h5 class="mt-2">Email</h5>
-<p>info@automotiveacademy.lk</p>
+<i class="fa-solid fa-envelope fa-2x"></i>
+<h5 class="mt-3 fw-bold">Email</h5>
+<p class="text-muted mb-0">info@automotiveacademy.lk</p>
 </div>
 
 <div class="info-card">
-<i class="fa-solid fa-clock fa-2x text-warning"></i>
-<h5 class="mt-2">Working Hours</h5>
-<p>Mon - Fri: 8.00 AM - 5.00 PM</p>
+<i class="fa-solid fa-clock fa-2x"></i>
+<h5 class="mt-3 fw-bold">Working Hours</h5>
+<p class="text-muted mb-0">Mon - Fri: 8.00 AM - 5.00 PM</p>
 </div>
 
 </div>
@@ -150,7 +207,7 @@ Send Message
 </section>
 
 <!-- MAP -->
-<section class="pb-5">
+ <section class="pb-5">
 <div class="container">
 
 <!-- <iframe
@@ -170,9 +227,36 @@ Send Message
   allowfullscreen=""
   loading="lazy">
 </iframe>
-
-
+<!-- <section class="pb-5">
+<div class="container animate-item fade-up-init">
+<iframe
+  src="https://www.google.com/maps/embed/pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk"
+  width="100%"
+  height="350"
+  style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.05);"
+  allowfullscreen=""
+  loading="lazy">
+</iframe>
 </div>
-</section>
+</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');
+                observer.unobserve(entry.target); 
+            }
+        });
+    }, {
+        threshold: 0.10
+    });
+
+    animatedElements.forEach(el => observer.observe(el));
+});
+</script>
 
 @endsection
\ No newline at end of file
diff --git a/resources/views/courses.blade.php b/resources/views/courses.blade.php
index 801ef54..fad36b3 100644
--- a/resources/views/courses.blade.php
+++ b/resources/views/courses.blade.php
@@ -14,6 +14,10 @@
     --success-green: #1f8a4c;
 }
 
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
 .hero {
     background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)), 
                       url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
@@ -217,12 +221,6 @@
     text-align: left;
 }
 
-.feature-box:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
-    border-color: var(--primary);
-}
-
 .feature-icon-wrapper {
     width: 50px;
     height: 50px;
@@ -234,6 +232,23 @@
     justify-content: center;
     font-size: 22px;
     margin-bottom: 20px;
+    transition: transform 0.5s ease; /* Icon එක කැරකෙන්න transition එකක් දුන්නා */
+}
+
+/* Card එක උඩට mouse එක ගෙනිච්චම වෙන වෙනස්කම් */
+.feature-box:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
+    border-color: var(--primary);
+}
+
+/* Card එක hover කරද්දී Icon එක අංශක 360ක් රොටේට් වෙන කොටස */
+.feature-box:hover .feature-icon-wrapper i {
+    transform: rotate(360deg);
+}
+
+.feature-icon-wrapper i {
+    transition: transform 0.5s ease; /* Smooth rotate වෙන්න */
 }
 
 .feature-box h5 {
@@ -256,25 +271,44 @@
     color: #666;
     margin-top: 20px;
 }
+
+/* ========================================================
+   Custom Pure CSS Animations (Scroll Animations)
+   ======================================================== */
+/* .animate-on-scroll {
+    opacity: 0;
+    transition: all 0.8s ease-out;
+}
+
+.fade-up-init {
+    transform: translateY(30px);
+}
+
+.animate-on-scroll.animated {
+    opacity: 1;
+    transform: translateY(0);
+} */
 </style>
 
 {{-- Hero --}}
 <section class="hero">
     <div class="container">
-        <h1>Our Courses</h1>
-        <p>
-            Build your future in the automotive industry through practical
-            training and internationally recognized learning experiences.
-        </p>
-        <div class="search-box">
-            <input
-                type="text"
-                id="courseSearch"
-                placeholder="Search Courses by title, level or description..."
-            >
-            <button type="button">
-                <i class="fas fa-search"></i>
-            </button>
+        <div class="animate-on-scroll animated fade-up-init">
+            <h1>Our Courses</h1>
+            <p>
+                Build your future in the automotive industry through practical
+                training and internationally recognized learning experiences.
+            </p>
+            <div class="search-box">
+                <input
+                    type="text"
+                    id="courseSearch"
+                    placeholder="Search Courses by title, level or description..."
+                >
+                <button type="button">
+                    <i class="fas fa-search"></i>
+                </button>
+            </div>
         </div>
     </div>
 </section>
@@ -358,8 +392,8 @@ $courses=[
         </div>
 
         <div class="row g-4" id="courseContainer">
-            @foreach($courses as $course)
-                <div class="col-12 course-item">
+            @foreach($courses as $index => $course)
+                <div class="col-12 course-item animate-on-scroll fade-up-init" style="transition-delay: {{ $index * 100 }}ms;">
                     <div class="card course-card h-100">
                         <div class="row g-0 align-items-center">
                             
@@ -404,10 +438,10 @@ $courses=[
     </div>
 </section>
 
-{{-- Modernized Why Study With Us Section --}}
+{{-- Why Study With Us Section --}}
 <section class="pb-5">
     <div class="container">
-        <div class="features-section text-center">
+        <div class="features-section text-center animate-on-scroll fade-up-init">
             <h2>Why Study With Us?</h2>
             
             <div class="row g-4">
@@ -457,29 +491,49 @@ $courses=[
 </section>
 
 <script>
-document.getElementById('courseSearch').addEventListener('keyup', function() {
-    let filter = this.value.toLowerCase();
-    let courseItems = document.querySelectorAll('.course-item');
-    let hasResults = false;
+document.addEventListener('DOMContentLoaded', function () {
+    // === 1. Course Search Feature ===
+    document.getElementById('courseSearch').addEventListener('keyup', function() {
+        let filter = this.value.toLowerCase();
+        let courseItems = document.querySelectorAll('.course-item');
+        let hasResults = false;
 
-    courseItems.forEach(function(item) {
-        let title = item.querySelector('.course-title').textContent.toLowerCase();
-        let desc = item.querySelector('.course-short-desc').textContent.toLowerCase();
+        courseItems.forEach(function(item) {
+            let title = item.querySelector('.course-title').textContent.toLowerCase();
+            let desc = item.querySelector('.course-short-desc').textContent.toLowerCase();
 
-        if (title.includes(filter) || desc.includes(filter)) {
-            item.style.setProperty('display', '', 'important');  
-            hasResults = true;
+            if (title.includes(filter) || desc.includes(filter)) {
+                item.style.setProperty('display', '', 'important');  
+                hasResults = true;
+                item.classList.add('animated');
+            } else {
+                item.style.setProperty('display', 'none', 'important');  
+            }
+        });
+
+        let noResultsMsg = document.getElementById('noResults');
+        if (hasResults) {
+            noResultsMsg.classList.add('d-none');
         } else {
-            item.style.setProperty('display', 'none', 'important');  
+            noResultsMsg.classList.remove('d-none');
         }
     });
 
-    let noResultsMsg = document.getElementById('noResults');
-    if (hasResults) {
-        noResultsMsg.classList.add('d-none');
-    } else {
-        noResultsMsg.classList.remove('d-none');
-    }
+    // === 2. Pure Intersection Observer Scroll Animation ===
+    const animatedElements = document.querySelectorAll('.animate-on-scroll');
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animated');
+                observer.unobserve(entry.target); 
+            }
+        });
+    }, {
+        threshold: 0.10
+    });
+
+    animatedElements.forEach(el => observer.observe(el));
 });
 </script>
 
diff --git a/resources/views/students.blade.php b/resources/views/students.blade.php
index bbcbcae..45bc4e1 100644
--- a/resources/views/students.blade.php
+++ b/resources/views/students.blade.php
@@ -11,6 +11,10 @@
     --light:#f8f4f7;
 }
 
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
 .hero{
     background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
     url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
@@ -24,12 +28,15 @@
 .portal-card{
     border:none;
     border-radius:15px;
-    transition:.3s;
+    transition:.4s cubic-bezier(0.165, 0.84, 0.44, 1);
     box-shadow:0 5px 20px rgba(0,0,0,.08);
+    border: 1px solid #efeff4;
 }
 
 .portal-card:hover{
     transform:translateY(-8px);
+    border-color: var(--primary);
+    box-shadow: 0 15px 30px rgba(94, 36, 78, 0.1);
 }
 
 .portal-icon{
@@ -43,28 +50,46 @@
     justify-content:center;
     font-size:28px;
     margin:auto;
+    transition: 0.4s ease;
+}
+
+.portal-card:hover .portal-icon {
+    background: var(--secondary);
+    transform: scale(1.1);
 }
 
 .btn-portal{
     background:#5E244E;
     color:#fff;
-    padding:10px 30px;
+    padding:12px 35px;
     border: none;
-    transition: 0.2s ease;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
 }
 
 .btn-portal:hover{
     background:#8B3A74;
     color:#fff;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
 }
  
-
 .modal-content {
     border: none;
     border-radius: 16px; 
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }
 
+/* Modal එක Open වෙද්දී Zoom-In වෙන්න */
+.modal.fade .modal-dialog {
+    transform: scale(0.85);
+    transition: transform 0.3s ease-out;
+}
+.modal.show .modal-dialog {
+    transform: scale(1);
+}
+
 .modal-header {
     background: transparent; 
     border-bottom: none;
@@ -81,7 +106,6 @@
     padding: 10px 25px 20px;
 }
 
-
 .input-group-text {
     background-color: #f8fafc;
     border-color: #cbd5e1;
@@ -111,7 +135,6 @@
     outline: 0;
 }
 
-
 .input-group:focus-within .input-group-text {
     border-color: var(--secondary);
     color: var(--secondary);
@@ -122,7 +145,6 @@
     border-top: none;
     padding: 0 25px 30px;
 }
-
  
 .btn-modal-cancel {
     background: transparent;
@@ -132,6 +154,7 @@
     padding: 10px 0;
     transition: all 0.2s;
     width: 100%;
+    border-radius: 8px;
 }
 
 .btn-modal-cancel:hover {
@@ -149,6 +172,7 @@
     box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2);
     transition: all 0.2s;
     width: 100%;
+    border-radius: 8px;
 }
 
 .btn-modal-login:hover {
@@ -157,39 +181,69 @@
     transform: translateY(-1px);
     box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3);
 }
+
+/* ========================================================
+   Custom 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(30px);
+}
+
+.fade-in-init {
+    transform: scale(0.98);
+}
+
+.slide-right-init {
+    transform: translateX(30px);
+}
+
+.animate-item.animated {
+    opacity: 1;
+    transform: translate(0) scale(1);
+}
 </style>
 
 <section class="hero">
     <div class="container">
-        <h1 class="fw-bold">Student Portal</h1>
-        <p class="mt-3">
-            Access your courses, timetable, assignments, examination results,
-            payments and profile from one place.
-        </p>
+        <div class="animate-item animated fade-up-init">
+            <h1 class="fw-bold display-5">Student Portal</h1>
+            <p class="mt-3 fs-5" style="max-width: 700px; margin: auto;">
+                Access your courses, timetable, assignments, examination results,
+                payments and profile from one place.
+            </p>
 
-        <button onclick="studentlogin()" class="btn btn-portal mt-3">
-            Student Login
-        </button>
+            <button onclick="studentlogin()" class="btn btn-portal mt-4 shadow">
+                Student Login
+            </button>
+        </div>
     </div>
 </section>
 
-<section class="py-5">
+<!-- SERVICES SECTION -->
+<section class="py-5 overflow-hidden">
     <div class="container">
-        <div class="text-center mb-5">
-            <h2>Student Services</h2>
+        <div class="text-center mb-5 animate-item fade-up-init">
+            <h2 class="fw-bold">Student Services</h2>
             <p class="text-muted">
                 Everything you need during your academic journey.
             </p>
         </div>
 
-        <div class="row g-4">
+        <!-- සේවා කාඩ් සියල්ල එකපාර ලස්සනට Fade-in වේ -->
+        <div class="row g-4 animate-item fade-in-init">
             <div class="col-md-4">
                 <div class="card portal-card h-100 text-center p-4">
                     <div class="portal-icon">
                         <i class="fa-solid fa-book"></i>
                     </div>
-                    <h4 class="mt-4">My Courses</h4>
-                    <p class="text-muted">View enrolled courses and learning materials.</p>
+                    <h4 class="mt-4 fw-bold">My Courses</h4>
+                    <p class="text-muted mb-0">View enrolled courses and learning materials.</p>
                 </div>
             </div>
 
@@ -198,8 +252,8 @@
                     <div class="portal-icon">
                         <i class="fa-solid fa-calendar-days"></i>
                     </div>
-                    <h4 class="mt-4">Class Timetable</h4>
-                    <p class="text-muted">Check your weekly lecture schedule.</p>
+                    <h4 class="mt-4 fw-bold">Class Timetable</h4>
+                    <p class="text-muted mb-0">Check your weekly lecture schedule.</p>
                 </div>
             </div>
 
@@ -208,8 +262,8 @@
                     <div class="portal-icon">
                         <i class="fa-solid fa-file-lines"></i>
                     </div>
-                    <h4 class="mt-4">Assignments</h4>
-                    <p class="text-muted">Submit assignments and download resources.</p>
+                    <h4 class="mt-4 fw-bold">Assignments</h4>
+                    <p class="text-muted mb-0">Submit assignments and download resources.</p>
                 </div>
             </div>
 
@@ -218,8 +272,8 @@
                     <div class="portal-icon">
                         <i class="fa-solid fa-square-poll-vertical"></i>
                     </div>
-                    <h4 class="mt-4">Exam Results</h4>
-                    <p class="text-muted">View semester and final examination results.</p>
+                    <h4 class="mt-4 fw-bold">Exam Results</h4>
+                    <p class="text-muted mb-0">View semester and final examination results.</p>
                 </div>
             </div>
 
@@ -228,8 +282,8 @@
                     <div class="portal-icon">
                         <i class="fa-solid fa-credit-card"></i>
                     </div>
-                    <h4 class="mt-4">Fee Payments</h4>
-                    <p class="text-muted">Pay course fees and download payment receipts.</p>
+                    <h4 class="mt-4 fw-bold">Fee Payments</h4>
+                    <p class="text-muted mb-0">Pay course fees and download payment receipts.</p>
                 </div>
             </div>
 
@@ -238,47 +292,51 @@
                     <div class="portal-icon">
                         <i class="fa-solid fa-user"></i>
                     </div>
-                    <h4 class="mt-4">Student Profile</h4>
-                    <p class="text-muted">Update your personal information securely.</p>
+                    <h4 class="mt-4 fw-bold">Student Profile</h4>
+                    <p class="text-muted mb-0">Update your personal information securely.</p>
                 </div>
             </div>
         </div>
     </div>
 </section>
 
-<section class="py-5 bg-light">
+<!-- QUICK LINKS -->
+<section class="py-5 bg-light overflow-hidden">
     <div class="container">
-        <div class="text-center mb-5">
-            <h2>Quick Links</h2>
+        <div class="text-center mb-5 animate-item fade-up-init">
+            <h2 class="fw-bold">Quick Links</h2>
         </div>
 
-        <div class="row text-center">
+        <!-- දකුණේ සිට වමට Slide වේ -->
+        <div class="row text-center animate-item slide-right-init">
             <div class="col-md-3 mb-3">
-                <a href="#" class="btn btn-outline-dark w-100">Academic Calendar</a>
+                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Academic Calendar</a>
             </div>
             <div class="col-md-3 mb-3">
-                <a href="#" class="btn btn-outline-dark w-100">Student Handbook</a>
+                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Student Handbook</a>
             </div>
             <div class="col-md-3 mb-3">
-                <a href="#" class="btn btn-outline-dark w-100">Examination Notices</a>
+                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Examination Notices</a>
             </div>
             <div class="col-md-3 mb-3">
-                <a href="#" class="btn btn-outline-dark w-100">Contact Support</a>
+                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Contact Support</a>
             </div>
         </div>
     </div>
 </section>
 
-<section class="py-5">
-    <div class="container text-center">
-        <h2>Ready to Access Your Student Account?</h2>
-        <p class="text-muted">Log in to manage your academic activities and stay updated.</p>
-        <button onclick="studentlogin()" class="btn btn-portal mt-3">
+<!-- BOTTOM CTA -->
+<section class="py-5 bg-white">
+    <div class="container text-center animate-item fade-up-init">
+        <h2 class="fw-bold">Ready to Access Your Student Account?</h2>
+        <p class="text-muted fs-5">Log in to manage your academic activities and stay updated.</p>
+        <button onclick="studentlogin()" class="btn btn-portal mt-3 shadow">
             Student Login
         </button>
     </div>
 </section>
 
+<!-- LOGIN MODAL -->
 <div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
@@ -289,8 +347,7 @@
                 </h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-            <!-- <form action="#" method="POST" id="studentLoginForm"> -->
-                <form action="{{ route('student.login.submit') }}" method="POST" id="studentLoginForm">
+            <form action="{{ route('student.login.submit') }}" method="POST" id="studentLoginForm">
                 @csrf
                 
                 <div class="modal-body">
@@ -320,8 +377,8 @@
                 </div>
                 
                 <div class="modal-footer d-flex gap-2 justify-content-center">
-                    <button type="button" class="btn btn-modal-cancel " data-bs-dismiss="modal">Cancel</button>
-                    <button type="submit" class="btn btn-modal-login "> Login </button>
+                    <button type="button" class="btn btn-modal-cancel" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-modal-login"> Login </button>
                 </div>
             </form>
         </div>
@@ -333,6 +390,23 @@ function studentlogin() {
     var myModal = new bootstrap.Modal(document.getElementById('studentLoginModal'));
     myModal.show();
 }
+
+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');
+                observer.unobserve(entry.target); 
+            }
+        });
+    }, {
+        threshold: 0.10
+    });
+
+    animatedElements.forEach(el => observer.observe(el));
+});
 </script>
 
 @endsection
\ No newline at end of file
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 392175e..6cef10d 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -151,7 +151,7 @@ body{
     padding: 20px 24px 24px 24px;
     display: flex;
     flex-direction: column;
-    text-align: left; /* Left alignment for Udemy Style */
+    text-align: left;
 }
 
 .course-title {
@@ -245,6 +245,7 @@ body{
 /* ===== Why Choose Us ===== */
 .why-section {
     background: #F8F4F7;
+    overflow-x: hidden;
 }
 
 .why-section li {
@@ -256,12 +257,46 @@ body{
     color: #5E244E;
 }
 
+/* ========================================================
+   Custom Pure CSS Animations (No external libraries needed)
+   ======================================================== */
+.animate-on-scroll {
+    opacity: 0;
+    transition: all 1s ease-out;
+}
+
+/* Fade Up effect */
+.fade-up-init {
+    transform: translateY(40px);
+}
+
+/* Fade Left (Slide from Right) effect */
+.fade-left-init {
+    transform: translateX(50px);
+}
+
+/* Fade Right (Slide from Left) effect */
+.fade-right-init {
+    transform: translateX(-50px);
+}
+
+/* Zoom In effect */
+.zoom-in-init {
+    transform: scale(0.9);
+}
+
+/* Animation එක active වූ පසු (JS මඟින් මේ class එක එකතු කරයි) */
+.animate-on-scroll.animated {
+    opacity: 1;
+    transform: translateY(0) translateX(0) scale(1);
+}
 </style>
 
 {{-- ===================== HERO ===================== --}}
 <section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction">
     <div class="container">
-        <div class="hero-content text-center">
+        <!-- Hero එක load වෙද්දිම animate වෙන්න කෙලින්ම animated දැම්මා -->
+        <div class="hero-content text-center animate-on-scroll animated fade-up-init">
             <h1 class="display-4 fw-bold">
                 Automobile Engineering Academy
             </h1>
@@ -290,7 +325,7 @@ body{
 <section class="section py-5" aria-labelledby="courses-heading">
     <div class="container py-5">
 
-        <div class="text-center mb-5">
+        <div class="text-center mb-5 animate-on-scroll fade-up-init">
             <h2 id="courses-heading">Our Courses</h2>
             <p class="text-muted">
                 Explore our professional automotive engineering courses.
@@ -330,8 +365,9 @@ body{
         @endphp
 
         <div class="row g-4 mb-5">
-            @foreach($courses as $course)
-                <div class="col-lg-4 col-md-6">
+            @foreach($courses as $index => $course)
+                <!-- Cards ටික එකින් එක delay වෙන්න inline style එකක් දැම්මා -->
+                <div class="col-lg-4 col-md-6 animate-on-scroll fade-up-init" style="transition-delay: {{ $index * 150 }}ms;">
                     <div class="card course-card h-100">
                         
                         <div class="course-image-wrapper">
@@ -367,7 +403,7 @@ body{
             @endforeach
         </div>
 
-        <div class="text-center">
+        <div class="text-center animate-on-scroll fade-up-init">
             <a href="/courses" class="btn btn-theme" style="border-radius: 40px;">
                 View All Courses <i class="fa-solid fa-arrow-right ms-2"></i>
             </a>
@@ -381,7 +417,8 @@ body{
     <div class="container">
         <div class="row align-items-center g-5">
 
-            <div class="col-lg-6">
+            <!-- Image: Slides from Left -->
+            <div class="col-lg-6 animate-on-scroll fade-right-init">
                 <img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80"
                      alt="Automotive Engineering Lab"
                      class="img-fluid rounded shadow-sm"
@@ -391,7 +428,8 @@ body{
                      decoding="async">
             </div>
 
-            <div class="col-lg-6">
+            <!-- Content: Slides from Right -->
+            <div class="col-lg-6 animate-on-scroll fade-left-init">
                 <h2 id="why-us-heading" class="fw-bold mb-4">
                     Why Choose Us?
                 </h2>
@@ -420,7 +458,7 @@ body{
 </section>
 
 {{-- ===================== CALL TO ACTION ===================== --}}
-<section class="section py-5">
+<section class="section py-5 animate-on-scroll zoom-in-init">
     <div class="container text-center">
         <h2 class="fw-bold mb-3">
             Join the Future of Automotive Engineering
@@ -435,4 +473,24 @@ body{
     </div>
 </section>
 
+<!-- බාහිර කිසිම script එකක් ඕනේ නැහැ, මේ සරල කෑල්ල කෙලින්ම වැඩ කරනවා -->
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const animatedElements = document.querySelectorAll('.animate-on-scroll');
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animated');
+                    observer.unobserve(entry.target); // එක පාරක් වැඩ කළාම ඇති නිසා නැවත check කරන්නේ නැත
+                }
+            });
+        }, {
+            threshold: 0.15 // Section එකෙන් 15%ක් screen එකට ආපු ගමන් animate වේ
+        });
+
+        animatedElements.forEach(el => observer.observe(el));
+    });
+</script>
+
 @endsection
\ No newline at end of file