new changes

src/App.css

@@ -9,7 +9,7 @@
 }
 
 body {
-  max-width: 1980px;
+  max-width: 198rem;
   margin-inline: auto;
 }
 html {
@@ -17,8 +17,8 @@ html {
 }
 nav {
   position: fixed;
-  height: 50px !important;
-  padding: 8px 30px;
+  height: 5rem !important;
+  padding: 0.8rem 3rem;
 }
 
 nav img {
@@ -51,20 +51,20 @@ image {
 
 .card .about h5 {
   font-weight: 100;
-  font-size: 16px;
+  font-size: 1.6rem;
   text-transform: uppercase;
 }
 
 .card .about hr {
-  height: 1px;
+  height: 0.1rem;
   background-color: white;
   border: none;
-  border-radius: 1px;
+  border-radius: 0.1rem;
 }
 
 .card .about .logo {
   width: 6rem;
-  margin-block: 7px;
+  margin-block: 0.7rem;
 }
 
 .card .about img {
@@ -124,10 +124,10 @@ nav {
   gap: 3rem;
   min-height: 100vh;
 }
-.card .about .logo {
-  width: 6rem;
-  margin-block: 7px;
 
+.card .about .logo {
+  width: 5rem;
+  margin-block: 0.7rem;
 }
 
 .card > :nth-child(2) img {
@@ -143,8 +143,8 @@ nav {
 .card .about h4,
 .card .about hr {
   width: 100%;
-  margin-block: 10px;
-  font-size: 18px;
+  margin-block: 1rem;
+  font-size: 1.7rem;
   font-weight: 700;
   text-transform: uppercase;
 }
@@ -159,6 +159,11 @@ nav {
   min-height: 30rem;
   transform: scale(1.2);
 }
+.card-1 > :nth-child(2) img {
+  aspect-ratio: 1/2;
+  height: 50rem;
+}
+
 @media (min-width: 640px) {
   .main {
     display: grid;
@@ -170,13 +175,13 @@ nav {
   }
 
   .card {
-    padding: 33px;
+    padding: 3.3rem;
     grid-template-columns: repeat(2, 1fr);
     min-height: 50vh;
   }
- 
 }
-@media (min-width: 769px) {
+
+@media (min-width: 768px) {
   nav {
     background: transparent;
     position: fixed;
@@ -187,16 +192,16 @@ nav {
     grid-template-columns: 1fr 1fr;
   }
   .card {
-    padding: 20px;
+    padding: 2rem;
     gap: 2rem;
   }
   .card .about h4 {
-    font-size: 15px;
+    font-size: 1.5rem;
     text-transform: capitalize;
     font-weight: 400;
   }
   .card .about h5 {
-    font-size: 14px;
+    font-size: 1.4rem;
     text-transform: uppercase;
     font-weight: 100;
   }
@@ -204,6 +209,7 @@ nav {
     min-height: 100%;
   }
 }
+
 @media (min-width: 1024px) {
   .main {
     display: grid;
@@ -212,21 +218,21 @@ nav {
   .card {
     padding-left: 5rem;
   }
-.card > :nth-child(2) img{
-  height: 330px;
-  margin-top:50px;
-}
-.card .about .logo {
+  .card > :nth-child(2) img {
+    height: 33rem;
+    margin-top: 5rem;
+  }
+  .card .about .logo {
     width: 5rem;
-  margin-block: 7px;
-  
-}
+    margin-block: 0.7rem;
+  }
   .card-6 > :nth-child(2) img {
     transform: scale(1.2);
     margin-left: 0.6rem;
     margin-top: 6rem;
   }
-  .card-1 > :nth-child(2) img{
-    margin-top: 5px;
+  .card-1 > :nth-child(2) img {
+    margin-top: 0.5rem;
   }
+ 
 }