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,6 +24,8 @@ const Card = ({ title, title2, title3, about, length, current, onClick }: datapr
     }, [title])
     return (
         <div className={styles.card}>
+            <div className={styles.title}>
+
                 <h6 className={styles["title-sm"]}>
                     {title}
                 </h6>
@@ -31,12 +33,16 @@ const Card = ({ title, title2, title3, about, length, current, onClick }: datapr
                     {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);