Exam Carousel Back And Forward Button Fixed

src/components/exam/Carousel/index.css

@@ -60,15 +60,20 @@
     direction: ltr;
     font-size: 15px;
     font-family: IRANSans;
-    color: #df1452;
+    /* color: #df1452; */
   }
   
   .melc-h-move-btns *{
     font-size: 30px;
-    color: #df1452;
+    /* color: #df1452; */
     cursor: pointer;
   }
-  
+  .back-btn{
+    color:#df1452;
+  }
+  .forward-btn{
+    color:#ececec
+  }
   
   .melc-content{
     width: 100%;
@@ -99,7 +104,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    transition: all 0.1s ease;
+    transition: all 0.4s ease;
   }
   
   .melc-content-item-more{

src/components/exam/Carousel/index.js

@@ -186,13 +186,27 @@ const MyExamList = ({isMobile}) => {
   if (window.innerWidth < 1170) {
     max_i--;
   }
-
+  
   const move_left = () => {
     if (i > max_i) {
       i--;
       let movment = i * 245;
       document.querySelector(".melc-content-item").style.right = `${movment}px`;
+      console.log(document.querySelector(".melc-content-item").style.right)
+      
+      if(document.querySelector(".melc-content-item").style.right !== 0){
+        // setRightBtnColor('#df1452')
+        document.querySelector('.forward-btn').style.color = '#df1452'
+      }else{
+        document.querySelector('.forward-btn').style.color = '#ececec'
+      }
+      if(i == max_i){
+        document.querySelector('.back-btn').style.color = '#ececec'
+      }else{
+        document.querySelector('.back-btn').style.color = '#df1452'
+      }
     }
+   
   };
 
   const move_right = () => {
@@ -200,6 +214,18 @@ const MyExamList = ({isMobile}) => {
       i++;
       let movment = i * 245;
       document.querySelector(".melc-content-item").style.right = `${movment}px`;
+      console.log(document.querySelector(".melc-content-item").style.right)
+      if(document.querySelector(".melc-content-item").style.right !== '0px'){
+        // setRightBtnColor('#df1452')
+        document.querySelector('.forward-btn').style.color = '#df1452'
+      }else{
+        document.querySelector('.forward-btn').style.color = '#ececec'
+      }
+      if(i == max_i){
+        document.querySelector('.back-btn').style.color = '#ececec'
+      }else{
+        document.querySelector('.back-btn').style.color = '#df1452'
+      }
     }
   };
   let s = 0;
@@ -276,8 +302,8 @@ const MyExamList = ({isMobile}) => {
             </div>
           ))}
           <div className="melc-h-move-btns">
-            <IoIosArrowBack onClick={move_left} />
+           <span className="back-btn"><IoIosArrowBack onClick={move_left}/></span> 
-            <IoIosArrowForward onClick={move_right} />
+           <span className="forward-btn"> <IoIosArrowForward onClick={move_right}/></span>
           </div>
         </div>
         <ScrollContainer className="melc-content">