diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index aba3174..97cca49 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -7,7 +7,7 @@
 {% if banners %}
 <!-- Carousel Section -->
 <section class="banner-carousel mb-4 mt-n1">
-    <div id="mainBannerCarousel" class="carousel slide" data-bs-pause="hover">
+    <div id="mainBannerCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-pause="hover" data-bs-interval="{% if CURRENT_LANG == 'ar' %}15000{% else %}10000{% endif %}">
         <div class="carousel-indicators">
             {% for banner in banners %}
             <button type="button" data-bs-target="#mainBannerCarousel" data-bs-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active" aria-current="true"{% endif %} aria-label="Slide {{ forloop.counter }}"></button>
@@ -15,7 +15,7 @@
         </div>
         <div class="carousel-inner">
             {% for banner in banners %}
-            <div class="carousel-item {% if forloop.first %}active{% endif %}">
+            <div class="carousel-item {% if forloop.first %}active{% endif %}" data-bs-interval="{% if CURRENT_LANG == 'ar' %}15000{% else %}10000{% endif %}">
                 <div class="banner-wrapper position-relative" style="height: 450px; overflow: hidden;">
                     <img src="{{ banner.image.url }}" class="d-block w-100 h-100" style="object-fit: cover;" alt="{{ banner.display_title }}">
                     <div class="carousel-caption d-none d-md-block text-start start-0 bottom-0 mb-5 ms-5 p-4 rounded" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); max-width: 600px;">
@@ -49,27 +49,6 @@
         {% endif %}
     </div>
 </section>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    var myCarouselElement = document.querySelector('#mainBannerCarousel');
-    if (myCarouselElement) {
-        // Set higher interval for Arabic to allow more reading time
-        var interval = {% if CURRENT_LANG == 'ar' %}15000{% else %}10000{% endif %};
-        
-        var carousel = new bootstrap.Carousel(myCarouselElement, {
-            interval: interval,
-            wrap: true,
-            pause: 'hover'
-        });
-        
-        // Manually trigger the cycle to ensure it starts even if ride was false
-        carousel.cycle();
-        
-        console.log('Carousel initialized with interval:', interval);
-    }
-});
-</script>
 {% endif %}
 
 <!-- Hero Section (Only show if no banners) -->
diff --git a/static/css/custom.css b/static/css/custom.css
index 6171ce3..f2bf94d 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -80,21 +80,16 @@ body {
     margin-bottom: 40px;
 }
 
-/* Carousel Adjustments */
+/* Carousel Adjustments - Minimalist */
 .carousel-item {
-    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
+    transition: transform 1.2s ease-in-out; /* Slightly slower for elegance */
 }
 
-.carousel-item.active {
-    display: block !important;
-    opacity: 1 !important;
-}
-
-/* Ensure captions are visible in RTL */
+/* Fix for captions in RTL if needed, but B5 RTL usually handles it */
 [dir="rtl"] .carousel-caption {
-    right: 5% !important;
-    left: auto !important;
-    text-align: right !important;
+    text-align: right;
+    right: 5%;
+    left: auto;
 }
 
 .carousel-caption {
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index 6171ce3..f2bf94d 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -80,21 +80,16 @@ body {
     margin-bottom: 40px;
 }
 
-/* Carousel Adjustments */
+/* Carousel Adjustments - Minimalist */
 .carousel-item {
-    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
+    transition: transform 1.2s ease-in-out; /* Slightly slower for elegance */
 }
 
-.carousel-item.active {
-    display: block !important;
-    opacity: 1 !important;
-}
-
-/* Ensure captions are visible in RTL */
+/* Fix for captions in RTL if needed, but B5 RTL usually handles it */
 [dir="rtl"] .carousel-caption {
-    right: 5% !important;
-    left: auto !important;
-    text-align: right !important;
+    text-align: right;
+    right: 5%;
+    left: auto;
 }
 
 .carousel-caption {