From 6ce841b77bcbed85248af0d0b47347737fd2687a Mon Sep 17 00:00:00 2001
From: Aayush Shukla <oreus.aks@gmail.com>
Date: Wed, 26 Jun 2024 12:48:58 +0530
Subject: [PATCH 01/10] Add .idea to .gitignore

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index 4d29575..5bfd2bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# ide files
+.idea
+
 # dependencies
 /node_modules
 /.pnp

From 4c03f4156d7b8578e96954bbd123e66976017786 Mon Sep 17 00:00:00 2001
From: Aayush Shukla <oreus.aks@gmail.com>
Date: Wed, 26 Jun 2024 13:04:06 +0530
Subject: [PATCH 02/10] Fix footer on tablet screens

---
 src/components/footer.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/footer.jsx b/src/components/footer.jsx
index f2ec324..2b5dbd5 100644
--- a/src/components/footer.jsx
+++ b/src/components/footer.jsx
@@ -10,7 +10,7 @@ const Footer = () => {
       <div className="w-[90vw] border mx-auto"></div>
       <div className="bg-transparent relative z-0 p-16 scale-90">
         <footer className="font-montserrat">
-          <div className="text-gray-800 hidden lg:grid lg:grid-cols-4 items-center place-items-center">
+          <div className="text-gray-800 hidden xl:grid xl:grid-cols-4 items-center place-items-center">
             <a
               href="https://ieeecsvitc.com"
               className="self-center order-4 lg:order-1 md:flex-col md:flex sm:flex sm:flex-col"

From cd49bdb4fbea042d8d29c7ab0471dad9f5fcde43 Mon Sep 17 00:00:00 2001
From: Aayush Shukla <oreus.aks@gmail.com>
Date: Wed, 26 Jun 2024 13:09:31 +0530
Subject: [PATCH 03/10] Updated the image accordian element to stay on the
 currently active header, and updated styles

---
 src/components/Accordian/imageAccordian.jsx | 1 -
 src/components/Accordian/style.css          | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/Accordian/imageAccordian.jsx b/src/components/Accordian/imageAccordian.jsx
index 4e4090a..f8095e8 100644
--- a/src/components/Accordian/imageAccordian.jsx
+++ b/src/components/Accordian/imageAccordian.jsx
@@ -21,7 +21,6 @@ const ImageAccordian = ({ itemms, setActiveItem }) => {
                 key={item.header}
                 className={`image-accordion-item ${isActive}`}
                 onMouseEnter={() => handleToggle(index)}
-                onMouseLeave={() => setActive(null)}
               >
                 <h2 className="out_content -rotate-90 self-center">
                   {item.header}
diff --git a/src/components/Accordian/style.css b/src/components/Accordian/style.css
index 3dc8ebe..8b8ce4b 100644
--- a/src/components/Accordian/style.css
+++ b/src/components/Accordian/style.css
@@ -17,7 +17,7 @@
     align-items: center; /* Center vertically */
     background: linear-gradient(to bottom, #061b24, #072031, #061b24);
     opacity: 1;
-    transition: 2s;
+    transition: width 2s, opacity 2s;
 }
 
 
@@ -40,14 +40,14 @@
     transform: translate(-50%, -50%);
     z-index: 1;
     opacity: 0;
-    transition: 0.5s;
+    transition: opacity 0.5s;
     display:none;
 }
 
 .image-accordion-item .out_content {
     z-index: 1;
     text-align: center;
-    transition: 0.5s;
+    transition: opacity 0.5s, padding 0.5s;
     padding:0px 20px;
     
 }

From aa9e349a6fb2a67e1a4f471fb32bcc6b8bed051d Mon Sep 17 00:00:00 2001
From: Aayush Shukla <oreus.aks@gmail.com>
Date: Wed, 26 Jun 2024 13:12:37 +0530
Subject: [PATCH 04/10] Fixed a typo causing major issue

---
 src/components/Accordian/hAccord.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Accordian/hAccord.jsx b/src/components/Accordian/hAccord.jsx
index d9c2164..e44189b 100644
--- a/src/components/Accordian/hAccord.jsx
+++ b/src/components/Accordian/hAccord.jsx
@@ -64,7 +64,7 @@ function HAccord() {
               </div>
               <div>
                 <p className={accord === index ? "active" : "inactive"}>
-                  {item.content3}
+                  {item.content}
                 </p>
               </div>
             </div>

From bbe47dd2e8f16da2fe04e468d3144cc60962ee10 Mon Sep 17 00:00:00 2001
From: Aayush Shukla <oreus.aks@gmail.com>
Date: Wed, 26 Jun 2024 13:35:54 +0530
Subject: [PATCH 05/10] Add all elements in the items array for better
 modularity

---
 src/data/homedata.js | 85 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 72 insertions(+), 13 deletions(-)

diff --git a/src/data/homedata.js b/src/data/homedata.js
index f589626..497ffb3 100644
--- a/src/data/homedata.js
+++ b/src/data/homedata.js
@@ -1,24 +1,83 @@
+import socialMediaLinks from "./socialMediaLinks";
+
 const items = [
   {
-    header: "About Us",
-    content3:
-      "IEEE Computer Society VIT Chennai is a zealous community of diverse minds striving to Learn, Create (sometimes Break!), Develop, and Explore. Here we combine an infectious desire to grow together, and a stubborn persistence to keep going, with a healthy ambition for the next audacious challenge. Come join us on this journey!",
+    header: "ABOUT US",
+    content: (
+      <div className="about-us-content">
+        IEEE Computer Society VIT Chennai is a zealous community of diverse minds striving to Learn, Create (sometimes Break!), Develop, and Explore. Here we combine an infectious desire to grow together, and a stubborn persistence to keep going, with a healthy ambition for the next audacious challenge. Come join us on this journey!
+      </div>
+    ),
   },
-
   {
-    header: "Our Vision",
-    content3:
-      "At IEEE Computer Society VITC, our belief is grounded in the principles of mutual learning and growth. We believe in empowering the community to innovate, develop, create, and to empower itself, which for us is, the greatest Return on Investment for a Technical Society. With a transcendent passion for Tech, and a solemn cognizance of people's struggles, we aspire to solve the great problems of today, and prepare together for a brighter tomorrow.",
+    header: "OUR VISION",
+    content: (
+      <div className="our-vision-content">
+        At IEEE Computer Society VITC, our belief is grounded in the principles of mutual learning and growth. We believe in empowering the community to innovate, develop, create, and to empower itself, which for us is, the greatest Return on Investment for a Technical Society. With a transcendent passion for Tech, and a solemn cognizance of people's struggles, we aspire to solve the great problems of today, and prepare together for a brighter tomorrow.
+      </div>
+    ),
   },
-
   {
-    header: "Newsletter",
-    content3:
-      " Want to stay updated with the latest news about IEEE CS VITC? Enter you email address and allow notifications.",
+    header: "NEWSLETTER",
+    content: (
+      <div className="newsletter-content text-center">
+        Want to stay updated with the latest news about IEEE CS VITC? Enter your email address and allow notifications.
+        <input
+          type="email"
+          className="border-2 border-teal-300/[0.8] bg-gradient-to-r from-[#123838]  to-[#0C2B38] rounded-lg mt-12 mb-3  text-md px-2 py-1 w-full text-center "
+        />
+        <button className="hover:scale-110 duration-200 transition border-2 border-cyan-100/[0.6] bg-gradient-to-r from-[#123838]  to-[#0C2B38] rounded-2xl my-4 text-xl px-4 p-2 text-center text-blue-100/[0.8]">
+          Subscribe
+        </button>
+      </div>
+    ),
   },
   {
-    header: "Contact",
-    content3: "",
+    header: "CONTACT",
+    content: (
+      <div className="contact-content">
+        <div>
+          <div className="flex flex-col">
+            <div className="text-lg sm:self-center md:self-center lg:text-base text-blue-200 inline-block mb-3 font-bold">
+              Email
+            </div>
+            <a
+              href="mailto:ieeecomputersociety@vit.ac.in"
+              target="_blank"
+              rel="noreferrer"
+              className="my-3 block text-white hover:text-white/[0.8] text-base lg:text-lg lg:text-left hover:scale-125 transition duration-200"
+            >
+              ieeecomputersociety@vit.ac.in
+            </a>
+          </div>
+        </div>
+        <div className="my-4 w-full flex flex-col justify-center lg:order-4">
+          <div className="text-lg lg:text-base lg:text-center text-blue-200 inline-block mb-3 md:self-center sm:self-center font-bold">
+            Social Media
+          </div>
+          <div className="grid grid-cols-4 place-items-center">
+          {socialMediaLinks.map((link, index) => (
+            <div
+              key={index}
+              className="hover:scale-150 transition duration-200"
+            >
+              <a
+                href={link.url}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <img
+                  src={link.icon}
+                  alt={link.platform}
+                  className="h-7 my-5 "
+                />
+              </a>
+            </div>
+          ))}
+          </div>
+        </div>
+      </div>
+    ),
   },
 ];
 

From c1182dac2198af07309cfe6f9df6b29f985ea897 Mon Sep 17 00:00:00 2001
From: Aayush Shukla <oreus.aks@gmail.com>
Date: Wed, 26 Jun 2024 14:17:37 +0530
Subject: [PATCH 06/10] Modularized HAccord component for better
 maintainibility

---
 src/components/Accordian/hAccord.jsx | 87 +++++++++-------------------
 1 file changed, 26 insertions(+), 61 deletions(-)

diff --git a/src/components/Accordian/hAccord.jsx b/src/components/Accordian/hAccord.jsx
index e44189b..a18d5f2 100644
--- a/src/components/Accordian/hAccord.jsx
+++ b/src/components/Accordian/hAccord.jsx
@@ -1,77 +1,42 @@
 import React, { useState } from "react";
 import "./style_h.css";
-const items = [
-  {
-    header: "ABOUT US",
-    header2: "ABOUT US",
-    content: "IEEE Computer Society VIT Chennai is a zealous community of diverse minds striving to Learn, Create (sometimes Break!), Develop, and Explore. Here we combine an infectious desire to grow together, and a stubborn persistence to keep going, with a healthy ambition for the next audacious challenge. Come join us on this journey!",
 
-  },
-
-  {
-    header: "OUR VISION",
-    header2: "OUR VISION",
-    content: "At IEEE Computer Society VITC, our belief is grounded in the principles of mutual learning and growth. We believe in empowering the community to innovate, develop, create, and to empower itself, which for us is, the greatest Return on Investment for a Technical Society. With a transcendent passion for Tech, and a solemn cognizance of people's struggles, we aspire to solve the great problems of today, and prepare together for a brighter tomorrow.",
-
-
-  },
-
-  {
-    header: "NEWSLETTER",
-    header2: "NEWSLETTER",
-    content: " Want to stay updated with the latest news about IEEE CS VITC? Enter you email address and allow notifications.",
-  },
-  {
-    header: "CONTACT",
-    header2: "CONTACT",
-    content: "",
-  },
-];
-
-
-
-function HAccord() {
+const HAccord = ({items}) => {
   const [accord, setActiveAccord] = useState(-1);
 
   const toggleAccordion = (index) => {
     setActiveAccord(index);
   };
+
   return (
-    <>
-      <div className="text-white h_accord_main flex flex-col items-center">
-        {" "}
-        {/* */}
-        {items.map((item, index) => {
-          return (
-            <div key={index} onClick={() => toggleAccordion(index)}>
-              <div className="flex justify-between max-[640px]:justify-between p-6 max-[640px]:p-3">
-                <div className="h_accord_heading">
-                  <h3 className={accord === index ? "active" : ""}>
-                    {item.header}
-                  </h3>
-                </div>
-                <div>
-                  {accord === index ? (
-                    <>
-                      <span className="verticle">-</span>
-                    </>
-                  ) : (
-                    <>
-                      <span className="verticle">+</span>
-                    </>
-                  )}
-                </div>
+    <div className="text-white h_accord_main flex flex-col items-center">
+      {items.map((item, index) => {
+        return (
+          <div key={index} onClick={() => toggleAccordion(index)}>
+            <div className="flex justify-between max-[640px]:justify-between p-6 max-[640px]:p-3">
+              <div className="h_accord_heading">
+                <h3 className={accord === index ? "active" : ""}>
+                  {item.header}
+                </h3>
               </div>
               <div>
-                <p className={accord === index ? "active" : "inactive"}>
-                  {item.content}
-                </p>
+                {accord === index ? (
+                  <span className="verticle">-</span>
+                ) : (
+                  <span className="verticle">+</span>
+                )}
               </div>
             </div>
-          );
-        })}
-      </div>
-    </>
+            <div>
+              <p className={accord === index ? "active" : "inactive"}>
+                {item.content}
+              </p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
   );
 }
+
 export default HAccord;

From 9e373e882cbc20f7b23d7a388bcad473b3b760b9 Mon Sep 17 00:00:00 2001
From: Aayush Shukla <oreus.aks@gmail.com>
Date: Wed, 26 Jun 2024 14:20:07 +0530
Subject: [PATCH 07/10] Modularized ImageAccord component for better
 maintainibility

---
 src/components/Accordian/imageAccordian.jsx | 41 +++++++++------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/components/Accordian/imageAccordian.jsx b/src/components/Accordian/imageAccordian.jsx
index f8095e8..b678307 100644
--- a/src/components/Accordian/imageAccordian.jsx
+++ b/src/components/Accordian/imageAccordian.jsx
@@ -8,32 +8,27 @@ const ImageAccordian = ({ itemms, setActiveItem }) => {
 
   const handleToggle = (index) => {
     setActive(index);
-    setActiveItem(itemms[index]);
+    setActiveItem(items[index]);
   };
+
   return (
-    <>
-      <div className="relative z-2 flex justify-center items-center">
-        {items.map((item, index) => {
-          const isActive = active === index ? "active" : "";
-          return (
-            <div className="rounded-[20px] mx-1 p-0.5 bg-gradient-to-b from-b_col3 to-b_col4 items-center text-center">
-              <div
-                key={item.header}
-                className={`image-accordion-item ${isActive}`}
-                onMouseEnter={() => handleToggle(index)}
-              >
-                <h2 className="out_content -rotate-90 self-center">
-                  {item.header}
-                </h2>
-                <h2 className="content -rotate-90 xl:rotate-0">
-                  {item.header}
-                </h2>
-              </div>
+    <div className="relative z-2 flex justify-center items-center">
+      {items.map((item, index) => {
+        const isActive = active === index ? "active" : "";
+        return (
+          <div className="rounded-[20px] mx-1 p-0.5 bg-gradient-to-b from-b_col3 to-b_col4 items-center text-center">
+            <div
+              className={`image-accordion-item ${isActive}`}
+              onMouseEnter={() => handleToggle(index)}
+              onMouseLeave={() => setActive(index)}
+            >
+              <h2 className="out_content -rotate-90 self-center">{item.header}</h2>
+              <h2 className="content -rotate-90 xl:rotate-0">{item.header}</h2>
             </div>
-          );
-        })}
-      </div>
-    </>
+          </div>
+        );
+      })}
+    </div>
   );
 };
 

From ea3d4629f7e814cebd7fc7f379498d022e7fac29 Mon Sep 17 00:00:00 2001
From: Aayush Shukla <oreus.aks@gmail.com>
Date: Wed, 26 Jun 2024 14:20:56 +0530
Subject: [PATCH 08/10] Implemented the modified ImageAccordian and HAccord
 elements

---
 src/pages/homepage.jsx | 94 +++++++-----------------------------------
 1 file changed, 14 insertions(+), 80 deletions(-)

diff --git a/src/pages/homepage.jsx b/src/pages/homepage.jsx
index 8d4a109..74f97a7 100644
--- a/src/pages/homepage.jsx
+++ b/src/pages/homepage.jsx
@@ -4,7 +4,6 @@ import Footer from "../components/footer";
 import { useRef } from "react";
 import { motion } from "framer-motion";
 import { useInView } from "react-intersection-observer";
-import socialMediaLinks from "../data/socialMediaLinks";
 import HAccord from "../components/Accordian/hAccord";
 import { routes } from "../data/routes";
 import HomepageRouterCircles from "../components/homepageroutercircles";
@@ -30,7 +29,7 @@ const AnimatedSection = ({ children, delay, className }) => {
 };
 
 const Homepage = () => {
-  const [activeItem, setActiveItem] = useState(items[0]);
+  const [activeItem, setActiveItem] = useState(items && items.length > 0 ? items[0] : null);
   const ref = useRef(null);
   const handleClick = () => {
     ref.current?.scrollIntoView({ behavior: "smooth" });
@@ -89,91 +88,26 @@ const Homepage = () => {
           className="min-h-screen scale-[40%] lg:scale-100 flex-col justify-center items-center hidden lg:flex"
         >
           <div className="flex justify-around px-24 w-full">
-            <ImageAccordian itemms={items} setActiveItem={setActiveItem} />
+            <ImageAccordian items={items} setActiveItem={setActiveItem} />
             <div className="rounded-[36px] p-0.5 bg-gradient-to-b from-b_col3 to-b_col4 h-[555px] w-[430px] shadow-2xl shadow-[#7ac4ec]/30">
               <div className="rounded-[calc(36px-1px)]  bg-gradient-to-b  from-[#061b24] from-2% via-[#072031] to-[#000b11] to-9% h-[549px] relative">
                 <div className="absolute -right-[100px] -bottom-14 z-15"></div>
-                <div className="flex flex-col rounded-[calc(36px-2px)] justify-center text-center z-20 w-full h-full items-center">
-                  <h2 className="text-4xl mb-12 font-semibold text-center items-center text-[#7DFEF7]">
-                    {activeItem.header}
-                  </h2>
-                  <p
-                    className={`text-md px-12 ${
-                      activeItem.header === "Newsletter"
-                        ? "text-center"
-                        : "text-left"
-                    } items-center text-[#7DFEF7]`}
-                  >
-                    {activeItem.content3}
-                    {activeItem.header === "Newsletter" ? (
-                      <>
-                        <input
-                          type="email"
-                          className="border-2 border-teal-300/[0.8] bg-gradient-to-r from-[#123838]  to-[#0C2B38] rounded-lg mt-12 mb-3  text-md px-2 py-1 w-full text-center "
-                        />
-                        <button className="hover:scale-110 duration-200 transition border-2 border-cyan-100/[0.6] bg-gradient-to-r from-[#123838]  to-[#0C2B38] rounded-2xl my-4 text-xl px-4 p-2 text-center text-blue-100/[0.8]">
-                          Subscribe
-                        </button>{" "}
-                        {/*make sure to call a POST method*/}
-                      </>
-                    ) : (
-                      <></>
-                    )}
-
-                    {activeItem.header === "Contact" ? (
-                      <>
-                        <div>
-                          <div className="flex flex-col">
-                            <div className="text-lg sm:self-center md:self-center lg:text-base text-blue-200 inline-block mb-3 font-bold">
-                              Email
-                            </div>
-                            <a
-                              href="mailto:ieeecomputersociety@vit.ac.in"
-                              target="_blank"
-                              rel="noreferrer"
-                              className="my-3 block text-white hover:text-white/[0.8] text-base lg:text-lg lg:text-left hover:scale-125 transition duration-200"
-                            >
-                              ieeecomputersociety@vit.ac.in
-                            </a>
-                          </div>
-                        </div>
-                        <div className="my-4 w-full flex flex-col justify-center lg:order-4">
-                          <div className="text-lg lg:text-base lg:text-center text-blue-200 inline-block mb-3 md:self-center sm:self-center font-bold">
-                            Social Media
-                          </div>
-                          <div className="grid grid-cols-4 place-items-center">
-                            {socialMediaLinks.map((link, index) => (
-                              <div
-                                key={index}
-                                className="hover:scale-150 transition duration-200"
-                              >
-                                <a
-                                  href={link.url}
-                                  target="_blank"
-                                  rel="noreferrer"
-                                >
-                                  <img
-                                    src={link.icon}
-                                    alt={link.platform}
-                                    className="h-7 my-5 "
-                                  />
-                                </a>
-                              </div>
-                            ))}
-                          </div>
-                        </div>
-                      </>
-                    ) : (
-                      <></>
-                    )}
-                  </p>
+                  <div className="flex flex-col rounded-[calc(36px-2px)] justify-center text-center z-20 w-full h-full items-center">
+                    <h2 className="text-4xl mb-12 font-semibold text-center items-center text-[#7DFEF7]">
+                      {activeItem.header}
+                    </h2>
+                    <p
+                      className="text-md px-12 items-center text-[#7DFEF7]"
+                    >
+                      {activeItem.content}
+                    </p>
+                  </div>
                 </div>
               </div>
-            </div>
           </div>
         </div>
-        <div className="mt-0 pb-16 mx-32 opacity-100 lg:hidden flex items-center justify-center min-h-screen ">
-          <HAccord />
+        <div className="mt-0 pb-16 mx-32 opacity-100 lg:hidden flex items-center justify-center min-h-screen">
+          <HAccord items={items} />
         </div>
         <div className="min-h-screen flex flex-col lg:flex-row justify-center items-center mb-16">
           {routes.map((data, idx) =>

From b754ae1d93755d4382554d451565bc91b5f6eddd Mon Sep 17 00:00:00 2001
From: Aayush Shukla <oreus.aks@gmail.com>
Date: Wed, 26 Jun 2024 14:38:46 +0530
Subject: [PATCH 09/10] Removed redundant parent div

---
 src/data/homedata.js | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/data/homedata.js b/src/data/homedata.js
index 497ffb3..29b3db5 100644
--- a/src/data/homedata.js
+++ b/src/data/homedata.js
@@ -36,20 +36,18 @@ const items = [
     header: "CONTACT",
     content: (
       <div className="contact-content">
-        <div>
-          <div className="flex flex-col">
-            <div className="text-lg sm:self-center md:self-center lg:text-base text-blue-200 inline-block mb-3 font-bold">
-              Email
-            </div>
-            <a
-              href="mailto:ieeecomputersociety@vit.ac.in"
-              target="_blank"
-              rel="noreferrer"
-              className="my-3 block text-white hover:text-white/[0.8] text-base lg:text-lg lg:text-left hover:scale-125 transition duration-200"
-            >
-              ieeecomputersociety@vit.ac.in
-            </a>
+        <div className="flex flex-col">
+          <div className="text-lg sm:self-center md:self-center lg:text-base text-blue-200 inline-block mb-3 font-bold">
+            Email
           </div>
+          <a
+            href="mailto:ieeecomputersociety@vit.ac.in"
+            target="_blank"
+            rel="noreferrer"
+            className="my-3 block text-white hover:text-white/[0.8] text-base lg:text-lg lg:text-left hover:scale-125 transition duration-200"
+          >
+            ieeecomputersociety@vit.ac.in
+          </a>
         </div>
         <div className="my-4 w-full flex flex-col justify-center lg:order-4">
           <div className="text-lg lg:text-base lg:text-center text-blue-200 inline-block mb-3 md:self-center sm:self-center font-bold">

From d581bb61e2a75f09f4e205cd6393733640ebe86b Mon Sep 17 00:00:00 2001
From: Aayush Shukla <oreus.aks@gmail.com>
Date: Wed, 26 Jun 2024 14:39:18 +0530
Subject: [PATCH 10/10] Fixed email overflow issue in haccord and reformatted
 the file

---
 src/components/Accordian/style_h.css | 53 ++++++++++++++--------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/components/Accordian/style_h.css b/src/components/Accordian/style_h.css
index 8faa1b4..eebe2cc 100644
--- a/src/components/Accordian/style_h.css
+++ b/src/components/Accordian/style_h.css
@@ -1,46 +1,47 @@
 .h_accord_main .inactive {
-    display:none;
+    display: none;
 }
 
 .h_accord_main >div {
     background-image: linear-gradient(to bottom, #061b24 2%, #072031, #000b11 91%);
     border: 2px solid #319795;
-    margin-bottom:20px;
-    padding:0px 20px;
-    border-radius:15px;
-    cursor:pointer;
-    width:80%;
-    
+    margin-bottom: 20px;
+    padding: 0px 20px;
+    border-radius: 16px;
+    cursor: pointer;
+    width: 100%;
 }
+
 .h_accord_heading {
-    display:flex;
-    justify-content:space-between;
-    align-items:center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
+
 .h_accord_heading .active {
-    color:#05FFF0;
+    color: #05FFF0;
 }
+
 .h_accord_heading h3 {
-    color:rgb(20 184 166 / var(--tw-border-opacity));
-    font-weight:600;
-    font-size:larger;
+    color: rgb(20 184 166 / var(--tw-border-opacity));
+    font-weight: 600;
+    font-size: larger;
 }
+
 .h_accord_main p {
-    margin:2px;
     padding: 20px;
     text-align:center;
     color:#05FFF0;
-    line-height:1.4;
-
 }
+
 @media screen and (max-width:640px) {
-.h_accord_main >div {
-    background-image: linear-gradient(to bottom, #061b24 2%, #072031, #000b11 91%);
-    border: 2px solid #319795;
-    margin-bottom:20px;
-    padding:0px 5px;
-    border-radius:15px;
-    cursor:pointer;
-    min-width:250px;
+    .h_accord_main >div {
+        background-image: linear-gradient(to bottom, #061b24 2%, #072031, #000b11 91%);
+        border: 2px solid #319795;
+        margin-bottom:20px;
+        padding:0px 5px;
+        border-radius:15=6px;
+        cursor:pointer;
+        min-width:250px;
+    }
 }
-}
\ No newline at end of file