diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index 51bddb9..aba3174 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-ride="carousel" data-bs-interval="{% if CURRENT_LANG == 'ar' %}12000{% else %}8000{% endif %}" data-bs-pause="hover">
+    <div id="mainBannerCarousel" class="carousel slide" data-bs-pause="hover">
         <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>
@@ -51,19 +51,24 @@
 </section>
 
 <script>
-    // Explicitly re-initialize to ensure custom interval is respected
-    document.addEventListener('DOMContentLoaded', function() {
-        var myCarousel = document.querySelector('#mainBannerCarousel');
-        if (myCarousel) {
-            var interval = {% if CURRENT_LANG == 'ar' %}12000{% else %}8000{% endif %};
-            var carousel = new bootstrap.Carousel(myCarousel, {
-                interval: interval,
-                ride: 'carousel',
-                pause: 'hover'
-            });
-            console.log("Carousel initialized with interval:", interval);
-        }
-    });
+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 %}
 
diff --git a/static/css/custom.css b/static/css/custom.css
index 92270ae..6171ce3 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -18,11 +18,6 @@ body {
     overflow-x: hidden;
 }
 
-[lang="ar"] body {
-    direction: rtl;
-    text-align: right;
-}
-
 .navbar {
     background-color: var(--white);
     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
@@ -85,51 +80,29 @@ body {
     margin-bottom: 40px;
 }
 
-.role-card {
-    background: var(--white);
-    padding: 40px;
-    border-radius: 20px;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
-    transition: all 0.3s ease;
-    border: 1px solid transparent;
-    height: 100%;
-    cursor: pointer;
+/* Carousel Adjustments */
+.carousel-item {
+    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
 }
 
-.role-card:hover {
-    border-color: var(--secondary-color);
-    transform: translateY(-10px);
+.carousel-item.active {
+    display: block !important;
+    opacity: 1 !important;
 }
 
-.role-icon {
-    font-size: 3rem;
-    color: var(--secondary-color);
-    margin-bottom: 20px;
+/* Ensure captions are visible in RTL */
+[dir="rtl"] .carousel-caption {
+    right: 5% !important;
+    left: auto !important;
+    text-align: right !important;
 }
 
-.role-title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--primary-color);
-}
-
-.role-desc {
-    color: var(--text-muted);
-    margin-bottom: 25px;
+.carousel-caption {
+    z-index: 10;
 }
 
 footer {
     background-color: var(--primary-color);
     color: var(--white);
     padding: 50px 0;
-}
-
-/* RTL Adjustments */
-[lang="ar"] .ms-auto {
-    margin-right: auto !important;
-    margin-left: 0 !important;
-}
-/* Carousel transition speed */
-.carousel-item {
-    transition: transform 1.5s ease-in-out !important;
 }
\ No newline at end of file
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index 92270ae..6171ce3 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -18,11 +18,6 @@ body {
     overflow-x: hidden;
 }
 
-[lang="ar"] body {
-    direction: rtl;
-    text-align: right;
-}
-
 .navbar {
     background-color: var(--white);
     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
@@ -85,51 +80,29 @@ body {
     margin-bottom: 40px;
 }
 
-.role-card {
-    background: var(--white);
-    padding: 40px;
-    border-radius: 20px;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
-    transition: all 0.3s ease;
-    border: 1px solid transparent;
-    height: 100%;
-    cursor: pointer;
+/* Carousel Adjustments */
+.carousel-item {
+    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
 }
 
-.role-card:hover {
-    border-color: var(--secondary-color);
-    transform: translateY(-10px);
+.carousel-item.active {
+    display: block !important;
+    opacity: 1 !important;
 }
 
-.role-icon {
-    font-size: 3rem;
-    color: var(--secondary-color);
-    margin-bottom: 20px;
+/* Ensure captions are visible in RTL */
+[dir="rtl"] .carousel-caption {
+    right: 5% !important;
+    left: auto !important;
+    text-align: right !important;
 }
 
-.role-title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--primary-color);
-}
-
-.role-desc {
-    color: var(--text-muted);
-    margin-bottom: 25px;
+.carousel-caption {
+    z-index: 10;
 }
 
 footer {
     background-color: var(--primary-color);
     color: var(--white);
     padding: 50px 0;
-}
-
-/* RTL Adjustments */
-[lang="ar"] .ms-auto {
-    margin-right: auto !important;
-    margin-left: 0 !important;
-}
-/* Carousel transition speed */
-.carousel-item {
-    transition: transform 1.5s ease-in-out !important;
 }
\ No newline at end of file