From 283b82aaed41b2ecd24f60f175d029ad11d50005 Mon Sep 17 00:00:00 2001
From: Shoban <shoban.s2007@gmail.com>
Date: Tue, 22 Jul 2025 21:38:08 +0530
Subject: [PATCH] =?UTF-8?q?Fix:=20Center=20hero=20section=20content=20for?=
 =?UTF-8?q?=20=E2=89=A4799px=20screens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles.css | 251 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 171 insertions(+), 80 deletions(-)

diff --git a/styles.css b/styles.css
index 61e7b49a..419d2e2b 100644
--- a/styles.css
+++ b/styles.css
@@ -380,71 +380,7 @@ body {
   background: #475569;
 }
 
-/* Responsive Styles */
-@media (max-width: 1024px) {
-  .hero__content {
-    grid-template-columns: 1fr;
-    text-align: center;
-  }
-  .hero__cta {
-    justify-content: center;
-  }
-  .hero__visual {
-    margin: 0 auto;
-    max-width: 400px;
-  }
-}
-
-@media (max-width: 768px) {
-  .header__container {
-    height: 60px;
-  }
-  .nav__list {
-    position: absolute;
-    top: 60px;
-    right: 0;
-    background: #ffffff;
-    flex-direction: column;
-    width: 200px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-    padding: 1rem;
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility 0.3s, opacity 0.3s;
-  }
-  [data-theme="dark"] .nav__list {
-    background: #1a1a1a;
-  }
-  .nav__list.open {
-    visibility: visible;
-    opacity: 1;
-    display: flex;
-  }
-  .nav__link {
-    padding: 0.8rem 1.5rem;
-    font-size: 1.1rem;
-  }
-  .header__toggle {
-    display: flex;
-  }
-  .hero__title {
-    font-size: 2.5rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .container {
-    padding: 0 1rem;
-  }
-  .header__logo .logo-text {
-    font-size: 1.4rem;
-  }
-  .hero__title {
-    font-size: 2rem;
-  }
-}
-
-
+/* Content Section - Fixed for proper centering */
 .content {
   max-width: 1024px;
   width: 100%;
@@ -454,21 +390,16 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap; /* Added to handle multiple cards better */
 }
 
-@media screen and (max-width: 767px) {
-  .content {
-    padding-top: 300px;
-    flex-direction: column;
-  }
-}
-
+/* Card Styles */
 .card {
   width: 100%;
   max-width: 300px;
   min-width: 200px;
   height: 250px;
-  background-color: var(--background-color, #292929); /* fallback to #292929 if variable isn't set */
+  background-color: var(--background-color, #292929);
   margin: 10px;
   border-radius: 10px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
@@ -483,17 +414,18 @@ body {
   cursor: pointer;
 }
 
-
 [data-theme="dark"] .card {
   --background-color: #292929;
 }
 
 [data-theme="light"] .card {
-  --background-color: #C9D9F6; /* or #f9f9f9 if you prefer */
+  --background-color: #C9D9F6;
 }
+
 [data-theme="light"] .title {
   --color: #212121;
 }
+
 [data-theme="light"] .text {
   --color: #212121;
 }
@@ -514,11 +446,8 @@ body {
   background-size: 200px;
 }
 
-
-
 .material-icons.md-36 { font-size: 36px; }
 
-
 .card .title {
   width: 100%;
   margin: 0;
@@ -530,7 +459,6 @@ body {
   letter-spacing: 3px;
 }
 
-
 .card .text {
   width: 80%;
   margin: 0 auto;
@@ -571,6 +499,169 @@ body {
   opacity: 1;
   transition: all 0.3s ease;
 }
+
 a {
   text-decoration: none;
-}
\ No newline at end of file
+}
+
+/* Responsive Styles */
+@media (max-width: 1024px) {
+  .hero__content {
+    /*grid-template-columns: 1fr;*/
+    text-align: center;
+  }
+  .hero__cta {
+    justify-content: center;
+  }
+  .hero__visual {
+    margin: 0 auto;
+    max-width: 400px;
+  }
+
+
+}
+
+
+@media screen and (max-width: 799px) {
+  /* Full centering for hero */
+  .hero {
+    padding: 2rem 0;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .hero .container {
+    width: 100%;
+    padding: 0 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .hero__content {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+    display: flex;
+    gap: 2rem;
+  }
+
+  .hero__text {
+    width: 100%;
+    max-width: unset;
+    margin: 0 auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .hero__subtitle,
+  .hero__title,
+  .hero__description {
+    text-align: center;
+    width: 100%;
+  }
+
+  .hero__cta {
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .hero__visual {
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    max-width: 400px;
+  }
+}
+
+  .content {
+    padding-top: 50px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .card {
+    margin: 15px 0;
+  }
+
+
+@media (max-width: 768px) {
+  .header__container {
+    height: 60px;
+  }
+  .nav__list {
+    position: absolute;
+    top: 60px;
+    right: 0;
+    background: #ffffff;
+    flex-direction: column;
+    width: 200px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+    padding: 1rem;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0.3s, opacity 0.3s;
+  }
+  [data-theme="dark"] .nav__list {
+    background: #1a1a1a;
+  }
+  .nav__list.open {
+    visibility: visible;
+    opacity: 1;
+    display: flex;
+  }
+  .nav__link {
+    padding: 0.8rem 1.5rem;
+    font-size: 1.1rem;
+  }
+  .header__toggle {
+    display: flex;
+  }
+  .hero__title {
+    font-size: 2.5rem;
+  }
+  
+  .content {
+    padding-top: 300px;
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding: 0 1rem;
+  }
+  .header__logo .logo-text {
+    font-size: 1.4rem;
+  }
+  .hero__title {
+    font-size: 2rem;
+  }
+  
+  /* Ensure hero still uses full width on mobile and centers content */
+  .hero .container {
+    padding: 0 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .hero__content {
+    text-align: center;
+    justify-items: center;
+  }
+}
+
+