implement logo container and handle rtl styles

src/pages/menu/menu.module.css

@@ -49,20 +49,28 @@
 
 .logo {
   position: absolute;
-  left: 33px;
+  left: 19px;
   top: -64px;
   border-radius: 50%;
   /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
-  z-index: 10;
-  border: 3px solid var(--background);
-  width: 72px !important;
-  height: 72px !important;
+  z-index: 111;
+  width: 70px !important;
+  height: 70px !important;
+  border-image-source: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
 }
 
 :global(.darkApp) .logo {
   border-color: var(--background);
 }
 
+:global(.ant-app-rtl) .logo {
+  right: 19px;
+}
+
 .services {
   height: 36px;
   position: absolute;
@@ -669,4 +677,15 @@
   .navButton {
     display: none !important;
   }
-}
+}
+
+.logoContainerIcon {
+  position: absolute !important;
+  left: 0px !important;
+  top: 127px !important;
+  z-index: 10 !important;
+}
+
+:global(.ant-app-rtl) .logoContainerIcon {
+  right: -10px !important;
+}