Updated About Us Page

src/components/About/About.css

@@ -1,3 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&display=swap');
+
+* {
+  font-family: "ABeeZee", sans-serif;
+}
+
 @keyframes moveInLeft {
   0% {
     opacity: 0;
@@ -399,7 +405,7 @@ body {
 .composition {
   position: relative;
 }
-.composition__photo {
+.composition__grp {
   width: 55%;
   box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
   border-radius: 2px;
@@ -408,25 +414,25 @@ body {
   transition: all 0.2s;
   outline-offset: 2rem;
 }
-.composition__photo--p1 {
+.composition__grp--p1 {
   left: 0;
   top: -2rem;
 }
-.composition__photo--p2 {
+.composition__grp--p2 {
   right: 0;
   top: 2rem;
 }
-.composition__photo--p3 {
+.composition__grp--p3 {
   left: 20%;
   top: 10rem;
 }
-.composition__photo:hover {
+.composition__grp:hover {
   outline: 1.5rem solid #3b4bb1;
   transform: scale(1.05) translateY(-0.5rem);
   box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
   z-index: 20;
 }
-.composition:hover .composition__photo:not(:hover) {
+.composition:hover .composition__grp:not(:hover) {
   transform: scale(0.95);
 }
 
@@ -994,3 +1000,113 @@ body {
   width: 50%;
   padding: 6rem;
 } /*# sourceMappingURL=main.css.map */
+
+
+/* About us Section Features */
+
+.about-us-block {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.about-us-community, .about-us-product, .about-us-event, .about-us-location {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 38%;
+  background: transparent;
+  height: 17rem;
+  border: 1px solid rgba(206, 212, 218, 1);
+  border-radius: 8px;
+  margin-bottom: 21px;
+}
+
+.about-us-community {
+  border: 2px solid rgb(26, 99, 245);
+}
+
+.about-us-community:hover {
+  background: rgb(26, 99, 245);
+  color: white;
+}
+
+.about-us-location {
+  border: 2px solid rgb(26, 99, 245);
+}
+
+.about-us-location:hover {
+  background: rgb(26, 99, 245);
+  color: white;
+}
+
+.about-us-product {
+  border: 2px solid rgb(26, 99, 245);
+}
+
+.about-us-product:hover {
+  background: rgb(26, 99, 245);
+  color: white;
+}
+
+.about-us-event {
+  border: 2px solid rgb(26, 99, 245);
+}
+
+.about-us-event:hover {
+  background: rgb(26, 99, 245);
+  color: white;
+}
+
+.about-us-blk-text {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 30px;
+  letter-spacing: 0em;
+  text-align: left;
+  margin-top: 1rem;
+}
+
+.about-us-blk-para {
+  font-size: 16px;
+  font-weight: 400;
+  font-weight: 400;
+  line-height: 25px;
+  letter-spacing: 0em;
+  text-align: left;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+@media only screen and (max-width: 768px) {
+  .about-us-block {
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+  }
+
+  .about-us-community, .about-us-event, .about-us-location, .about-us-product {
+      width: 90%;
+      height: 100%;
+      padding: 0.5rem;
+  }
+}
+
+@media only screen and (max-width: 1020px) {
+  .about-us-block {
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+  }
+
+  .about-us-community, .about-us-event, .about-us-location, .about-us-product {
+      width: 90% !important;
+      height: 100%;
+      padding: 0.5rem;
+  }
+}
+
+@media only screen and (max-width: 1250px) {
+  .about-us-community, .about-us-event, .about-us-location, .about-us-product {
+      width: 45%;
+  }
+}