fixed bugs

src/App.css

@@ -15,8 +15,8 @@
 }
 
 /* body {
-    max-width: 1200px;
-    margin-inline: auto;
+    max-width: 1500px;
+    margin: 0 auto;
 } */
 
 li,

src/Components/Card/Card.module.css

 .card {
     color: var(--white);
     height: 60%;
-    padding: 1rem 1rem;
+    padding: 1.5rem;
     /* border: 2px solid red; */
+    display: flex;
+    flex-direction: column;
+    gap: 45px;
+    align-items: start;
+}
+
+.card>* {
+    width: 100%;
+}
+
+.title {
+    justify-self: start;
+    align-self: baseline;
 }
 
 .title-bg,
@@ -15,7 +28,6 @@
 .title-sm {
     font-size: 18px;
     color: var(--orange);
-    padding: 10px 0px;
     font-weight: 600;
     letter-spacing: 8px;
 }
@@ -23,7 +35,6 @@
 .title-bg {
     font-size: 30px;
     font-weight: 600;
-    padding: 0 0 20px 0px;
     font-weight: bolder;
     letter-spacing: 2px;
 }
@@ -31,7 +42,7 @@
 .title-final {
     font-weight: 700;
     font-size: 25px;
-    padding: 1rem 0;
+    padding: 10px 0;
 }
 
 .about {
@@ -40,14 +51,13 @@
 }
 
 .wrapper {
-    /* border: 2px solid red; */
-    padding: 10px;
     display: flex;
     gap: 10px;
-    margin-block: 2rem;
+    align-self: end;
 }
 
 @media (min-width:500px) {
+
     .title-sm {
         font-size: 1.5rem;
     }
@@ -66,15 +76,13 @@
     }
 }
 
-@media (min-width:1100px) {
+@media (min-width:1000px) {
     .card {
-        max-height: 90vh;
+        min-height: 100vh;
         flex-basis: 50%;
-        padding: 2rem;
-    }
+        padding: 1.3rem;
+        justify-content: space-evenly;
 
-    .wrapper {
-        margin-top: 30%;
     }
 
     .card>* {
@@ -88,16 +96,16 @@
     }
 
     .title-bg {
-        font-size: 3.8rem;
+        font-size: 4.5rem;
     }
 
     .title-final {
-        font-size: 2.4rem;
-        margin-top: 3rem;
+        font-size: 2.7rem;
+        margin-top: 2rem;
     }
 
     .about {
-        font-size: 16px;
+        font-size: 20px;
         line-height: 30px;
         font-weight: 500;
         margin-bottom: 3rem;

src/Components/Card/Card.tsx

@@ -24,19 +24,25 @@ const Card = ({ title, title2, title3, about, length, current, onClick }: datapr
     }, [title])
     return (
         <div className={styles.card}>
-            <h6 className={styles["title-sm"]}>
-                {title}
-            </h6>
-            <h4 className={styles["title-bg"]}>
-                {title2}
-            </h4>
+            <div className={styles.title}>
 
-            <h5 className={styles["title-final"]}>
-                {title3}
-            </h5>
-            <p className={styles.about}>
-                {about}
-            </p>
+                <h6 className={styles["title-sm"]}>
+                    {title}
+                </h6>
+                <h4 className={styles["title-bg"]}>
+                    {title2}
+                </h4>
+
+            </div>
+            <div className={styles.abouts}>
+
+                <h5 className={styles["title-final"]}>
+                    {title3}
+                </h5>
+                <p className={styles.about}>
+                    {about}
+                </p>
+            </div>
             <div className={styles.wrapper}>
                 {
                     count.map((data, index) => {

src/Components/Carousel/Carousel.module.css

@@ -35,9 +35,9 @@
 
 
 
-@media (min-width:1100px) {
+@media (min-width:1000px) {
     .carasole {
-        max-height: 100vh;
+        min-height: 100vh;
         overflow: hidden;
     }
 }
\ No newline at end of file

src/Components/Carousel/Carousel.stories.tsx

 import type { Meta, StoryObj } from "@storybook/react";
 import Carasole from "./Carousel";
-import Carousel1 from "../../Hooks/Carousel1";
 
 const meta: Meta<typeof Carasole> = {
     title: "Base",

src/Components/Carousel/Carousel.tsx

@@ -28,7 +28,7 @@ const Carasole = () => {
         return () => {
             clearInterval(autoPlayInterval);
         };
-    }, []);
+    }, [currentIndex]);
 
     const customChange = (index: number) => {
         setcurrentIndex(index);