diff --git a/README.md b/README.md
index 874d97bb7..f9e1f3dd3 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
   <br>
   <a href="http://www.amexio.tech/"><img src="https://image.ibb.co/kdy6Ev/logo.png" alt="Amexio" width="200"></a>
   <br>
-    Amexio Angular EXtensions v5.13.1
+    Amexio Angular EXtensions v5.14.0
   <br>
 </h1>
 
diff --git a/package.json b/package.json
index 3ec559da7..825bb6557 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "amexio-ng-extensions",
     "description": "Angular UI library",
-    "version": "5.13.1",
+    "version": "5.14.0",
     "homepage": "https://www.amexio.tech/",
     "author": {
         "name": "MetaMagic Global",
diff --git a/src/styles/css/at-md-army-olive.css b/src/styles/css/at-md-army-olive.css
index 8a932e21e..acae4edd5 100644
--- a/src/styles/css/at-md-army-olive.css
+++ b/src/styles/css/at-md-army-olive.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-ash-stone-black.css b/src/styles/css/at-md-ash-stone-black.css
index ec2cbf960..cad8927d7 100644
--- a/src/styles/css/at-md-ash-stone-black.css
+++ b/src/styles/css/at-md-ash-stone-black.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-black.css b/src/styles/css/at-md-black.css
index 9565e3ecd..f7c9ee532 100644
--- a/src/styles/css/at-md-black.css
+++ b/src/styles/css/at-md-black.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-blue-grey.css b/src/styles/css/at-md-blue-grey.css
index cd68a6728..4b4d7af02 100644
--- a/src/styles/css/at-md-blue-grey.css
+++ b/src/styles/css/at-md-blue-grey.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-blue.css b/src/styles/css/at-md-blue.css
index a0478b683..1e31cf6ca 100644
--- a/src/styles/css/at-md-blue.css
+++ b/src/styles/css/at-md-blue.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-bruntor-tangerine.css b/src/styles/css/at-md-bruntor-tangerine.css
index 94f862784..9ea2f78b9 100644
--- a/src/styles/css/at-md-bruntor-tangerine.css
+++ b/src/styles/css/at-md-bruntor-tangerine.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-cerise-magenta.css b/src/styles/css/at-md-cerise-magenta.css
index 1e5a24ce8..60fbb39dd 100644
--- a/src/styles/css/at-md-cerise-magenta.css
+++ b/src/styles/css/at-md-cerise-magenta.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-charcoal-iron.css b/src/styles/css/at-md-charcoal-iron.css
index c4ea78e50..da80e571c 100644
--- a/src/styles/css/at-md-charcoal-iron.css
+++ b/src/styles/css/at-md-charcoal-iron.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-chocolate-russet.css b/src/styles/css/at-md-chocolate-russet.css
index 472f0af63..db49afd5f 100644
--- a/src/styles/css/at-md-chocolate-russet.css
+++ b/src/styles/css/at-md-chocolate-russet.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-darkgreen-darkolivegreen.css b/src/styles/css/at-md-darkgreen-darkolivegreen.css
index 20a97309b..426f318c9 100644
--- a/src/styles/css/at-md-darkgreen-darkolivegreen.css
+++ b/src/styles/css/at-md-darkgreen-darkolivegreen.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-darkgreen-teal.css b/src/styles/css/at-md-darkgreen-teal.css
index 87957a067..77cef3485 100644
--- a/src/styles/css/at-md-darkgreen-teal.css
+++ b/src/styles/css/at-md-darkgreen-teal.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-darkkhaki-moccasin.css b/src/styles/css/at-md-darkkhaki-moccasin.css
index bbc7af21d..f13afa0c1 100644
--- a/src/styles/css/at-md-darkkhaki-moccasin.css
+++ b/src/styles/css/at-md-darkkhaki-moccasin.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-darkmagenta-darkorchid.css b/src/styles/css/at-md-darkmagenta-darkorchid.css
index f97ac381d..21a242d78 100644
--- a/src/styles/css/at-md-darkmagenta-darkorchid.css
+++ b/src/styles/css/at-md-darkmagenta-darkorchid.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-darkslateblue-indigo.css b/src/styles/css/at-md-darkslateblue-indigo.css
index 6af1bd262..9ab504058 100644
--- a/src/styles/css/at-md-darkslateblue-indigo.css
+++ b/src/styles/css/at-md-darkslateblue-indigo.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-darkslategray-dimgray.css b/src/styles/css/at-md-darkslategray-dimgray.css
index 6eb1a5381..749ede005 100644
--- a/src/styles/css/at-md-darkslategray-dimgray.css
+++ b/src/styles/css/at-md-darkslategray-dimgray.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-darkturquoise-aquamarine.css b/src/styles/css/at-md-darkturquoise-aquamarine.css
index 9e4bb5b15..b554c81c0 100644
--- a/src/styles/css/at-md-darkturquoise-aquamarine.css
+++ b/src/styles/css/at-md-darkturquoise-aquamarine.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-fern-lime.css b/src/styles/css/at-md-fern-lime.css
index b4a4653c0..6b4656264 100644
--- a/src/styles/css/at-md-fern-lime.css
+++ b/src/styles/css/at-md-fern-lime.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-firebrick-crimson.css b/src/styles/css/at-md-firebrick-crimson.css
index 780d01569..88f764989 100644
--- a/src/styles/css/at-md-firebrick-crimson.css
+++ b/src/styles/css/at-md-firebrick-crimson.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-frenchrose-mulberry.css b/src/styles/css/at-md-frenchrose-mulberry.css
index eced5f39c..6450941a1 100644
--- a/src/styles/css/at-md-frenchrose-mulberry.css
+++ b/src/styles/css/at-md-frenchrose-mulberry.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-gingerbread.css b/src/styles/css/at-md-gingerbread.css
index bc03a5c4e..c4966dba7 100644
--- a/src/styles/css/at-md-gingerbread.css
+++ b/src/styles/css/at-md-gingerbread.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-gold-amber.css b/src/styles/css/at-md-gold-amber.css
index aaee27727..19d92d950 100644
--- a/src/styles/css/at-md-gold-amber.css
+++ b/src/styles/css/at-md-gold-amber.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-grape-violet.css b/src/styles/css/at-md-grape-violet.css
index 36d6329d7..ac09fc70e 100644
--- a/src/styles/css/at-md-grape-violet.css
+++ b/src/styles/css/at-md-grape-violet.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-honey-mustard.css b/src/styles/css/at-md-honey-mustard.css
index 9011021dc..17f1af684 100644
--- a/src/styles/css/at-md-honey-mustard.css
+++ b/src/styles/css/at-md-honey-mustard.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-hot-pink-fuchsia.css b/src/styles/css/at-md-hot-pink-fuchsia.css
index cc9241630..32731a052 100644
--- a/src/styles/css/at-md-hot-pink-fuchsia.css
+++ b/src/styles/css/at-md-hot-pink-fuchsia.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-hot-pink-violetred.css b/src/styles/css/at-md-hot-pink-violetred.css
index 85aa2b504..946b0a093 100644
--- a/src/styles/css/at-md-hot-pink-violetred.css
+++ b/src/styles/css/at-md-hot-pink-violetred.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-indianred-salmon.css b/src/styles/css/at-md-indianred-salmon.css
index 33d8ba86b..39324a351 100644
--- a/src/styles/css/at-md-indianred-salmon.css
+++ b/src/styles/css/at-md-indianred-salmon.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-indigo-darkviolet.css b/src/styles/css/at-md-indigo-darkviolet.css
index 138257943..4b44528b0 100644
--- a/src/styles/css/at-md-indigo-darkviolet.css
+++ b/src/styles/css/at-md-indigo-darkviolet.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-indigo-slateblue.css b/src/styles/css/at-md-indigo-slateblue.css
index cbfad16f9..b1c31ec55 100644
--- a/src/styles/css/at-md-indigo-slateblue.css
+++ b/src/styles/css/at-md-indigo-slateblue.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-indigo.css b/src/styles/css/at-md-indigo.css
index 82fcd575f..ccf5bda2e 100644
--- a/src/styles/css/at-md-indigo.css
+++ b/src/styles/css/at-md-indigo.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-jungle-mint.css b/src/styles/css/at-md-jungle-mint.css
index e10550617..c120cc306 100644
--- a/src/styles/css/at-md-jungle-mint.css
+++ b/src/styles/css/at-md-jungle-mint.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-mahogany-barny-red.css b/src/styles/css/at-md-mahogany-barny-red.css
index 578e0633d..61e242dca 100644
--- a/src/styles/css/at-md-mahogany-barny-red.css
+++ b/src/styles/css/at-md-mahogany-barny-red.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-mauve-orchid.css b/src/styles/css/at-md-mauve-orchid.css
index 7a480ae21..4610375b7 100644
--- a/src/styles/css/at-md-mauve-orchid.css
+++ b/src/styles/css/at-md-mauve-orchid.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-maya.css b/src/styles/css/at-md-maya.css
index 0f2fee9b2..359d75eb8 100644
--- a/src/styles/css/at-md-maya.css
+++ b/src/styles/css/at-md-maya.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-mediumblue-deepskyblue.css b/src/styles/css/at-md-mediumblue-deepskyblue.css
index a23420230..e87afcbd4 100644
--- a/src/styles/css/at-md-mediumblue-deepskyblue.css
+++ b/src/styles/css/at-md-mediumblue-deepskyblue.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-mediumblue-slateblue.css b/src/styles/css/at-md-mediumblue-slateblue.css
index d2e735057..5e9328920 100644
--- a/src/styles/css/at-md-mediumblue-slateblue.css
+++ b/src/styles/css/at-md-mediumblue-slateblue.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-mediumvioletred-hotpink.css b/src/styles/css/at-md-mediumvioletred-hotpink.css
index 911e1b804..65f30c9db 100644
--- a/src/styles/css/at-md-mediumvioletred-hotpink.css
+++ b/src/styles/css/at-md-mediumvioletred-hotpink.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-navy-egyptian.css b/src/styles/css/at-md-navy-egyptian.css
index 22d143eb5..c2c6bef54 100644
--- a/src/styles/css/at-md-navy-egyptian.css
+++ b/src/styles/css/at-md-navy-egyptian.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-navy-royalblue.css b/src/styles/css/at-md-navy-royalblue.css
index 65e909e67..222e99ba1 100644
--- a/src/styles/css/at-md-navy-royalblue.css
+++ b/src/styles/css/at-md-navy-royalblue.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-orangered-tomato.css b/src/styles/css/at-md-orangered-tomato.css
index 6e888455a..9492f1edf 100644
--- a/src/styles/css/at-md-orangered-tomato.css
+++ b/src/styles/css/at-md-orangered-tomato.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-pineapple-flaxen.css b/src/styles/css/at-md-pineapple-flaxen.css
index 33fbbcfd9..180dd85fb 100644
--- a/src/styles/css/at-md-pineapple-flaxen.css
+++ b/src/styles/css/at-md-pineapple-flaxen.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-pumpkin-fire.css b/src/styles/css/at-md-pumpkin-fire.css
index 5341a0e47..8dd5e4ccf 100644
--- a/src/styles/css/at-md-pumpkin-fire.css
+++ b/src/styles/css/at-md-pumpkin-fire.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-rasberry-sangria.css b/src/styles/css/at-md-rasberry-sangria.css
index 4edd6b957..fe1da540e 100644
--- a/src/styles/css/at-md-rasberry-sangria.css
+++ b/src/styles/css/at-md-rasberry-sangria.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-rebeccapurple-orchid.css b/src/styles/css/at-md-rebeccapurple-orchid.css
index 110f4019f..ed0b11b75 100644
--- a/src/styles/css/at-md-rebeccapurple-orchid.css
+++ b/src/styles/css/at-md-rebeccapurple-orchid.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-red-maroon.css b/src/styles/css/at-md-red-maroon.css
index 0a79ce46e..9565309a6 100644
--- a/src/styles/css/at-md-red-maroon.css
+++ b/src/styles/css/at-md-red-maroon.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-royalblue-dodgerblue.css b/src/styles/css/at-md-royalblue-dodgerblue.css
index 92db1d4dc..391b67f77 100644
--- a/src/styles/css/at-md-royalblue-dodgerblue.css
+++ b/src/styles/css/at-md-royalblue-dodgerblue.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-sacramento-jade.css b/src/styles/css/at-md-sacramento-jade.css
index a72884ab4..fb705f3de 100644
--- a/src/styles/css/at-md-sacramento-jade.css
+++ b/src/styles/css/at-md-sacramento-jade.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-saddlebrown-peru.css b/src/styles/css/at-md-saddlebrown-peru.css
index dd586c3ca..9f791ff21 100644
--- a/src/styles/css/at-md-saddlebrown-peru.css
+++ b/src/styles/css/at-md-saddlebrown-peru.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-sienna-rosybrown.css b/src/styles/css/at-md-sienna-rosybrown.css
index cd5f3ad71..ee702a0fc 100644
--- a/src/styles/css/at-md-sienna-rosybrown.css
+++ b/src/styles/css/at-md-sienna-rosybrown.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-tronbone-royal.css b/src/styles/css/at-md-tronbone-royal.css
index 078334625..83073fba2 100644
--- a/src/styles/css/at-md-tronbone-royal.css
+++ b/src/styles/css/at-md-tronbone-royal.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-yale-azure.css b/src/styles/css/at-md-yale-azure.css
index c181eb4e5..7224b5474 100644
--- a/src/styles/css/at-md-yale-azure.css
+++ b/src/styles/css/at-md-yale-azure.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-z-flag-bahamas.css b/src/styles/css/at-md-z-flag-bahamas.css
index 84d979cc1..611686d48 100644
--- a/src/styles/css/at-md-z-flag-bahamas.css
+++ b/src/styles/css/at-md-z-flag-bahamas.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-z-flag-france.css b/src/styles/css/at-md-z-flag-france.css
index 372960c6a..0a562dbff 100644
--- a/src/styles/css/at-md-z-flag-france.css
+++ b/src/styles/css/at-md-z-flag-france.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-z-flag-germany.css b/src/styles/css/at-md-z-flag-germany.css
index 583532026..4fc3bd14f 100644
--- a/src/styles/css/at-md-z-flag-germany.css
+++ b/src/styles/css/at-md-z-flag-germany.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-z-flag-india.css b/src/styles/css/at-md-z-flag-india.css
index cc217a222..67564725e 100644
--- a/src/styles/css/at-md-z-flag-india.css
+++ b/src/styles/css/at-md-z-flag-india.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-z-flag-italy.css b/src/styles/css/at-md-z-flag-italy.css
index 414bba328..21d47dd70 100644
--- a/src/styles/css/at-md-z-flag-italy.css
+++ b/src/styles/css/at-md-z-flag-italy.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-z-flag-japan.css b/src/styles/css/at-md-z-flag-japan.css
index 308304016..511a42ff5 100644
--- a/src/styles/css/at-md-z-flag-japan.css
+++ b/src/styles/css/at-md-z-flag-japan.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox 
diff --git a/src/styles/css/at-md-z-flag-usa.css b/src/styles/css/at-md-z-flag-usa.css
index 6355b4632..a3dabbe54 100644
--- a/src/styles/css/at-md-z-flag-usa.css
+++ b/src/styles/css/at-md-z-flag-usa.css
@@ -303,7 +303,6 @@ Spin animation for .loading-mask::after
     transform: rotate(359deg); } }
 label {
   display: inline-block;
-  margin-top: 5px;
   max-width: 100%;
   font-size: 14px;
   font-weight: 500; }
@@ -6444,7 +6443,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   height: inherit; }
 
 .topnavmainbar-mobile {
-  flex-direction: column; }
+  flex-direction: column;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden; }
 
 .topnavmainbaritems {
   display: flex;
@@ -6650,6 +6652,13 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; }
 
+.mobileModeNav {
+  position: relative !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  height: 250px !important;
+  overflow-y: auto !important; }
+
 /****************************************************************************
     Component Name : Paginator
     Version : Amexio v4.0 onwards
@@ -6887,7 +6896,6 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   overflow: auto; }
 
 .nav-badge {
-  margin-left: 10px;
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -7142,6 +7150,10 @@ amexio-homepage-centerpanel .homepage-centerpanel {
   background-color: var(--componentActiveBGColor);
   color: var(--componentActiveFontColor); }
 
+.accordion-transparent:focus, .accordion-transparent:hover {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentActiveFontColor); }
+
 .accordion:after {
   color: #dc143c; }
 
@@ -8084,6 +8096,9 @@ fieldset {
   height: 96%;
   margin-top: 5%; }
 
+.amexio-root-window-content {
+  position: relative; }
+
 .amexio-root-window-content > * {
   padding: 10px 16px; }
 
@@ -8654,6 +8669,9 @@ amexio-layout amexio-layout-item {
   top: 0;
   left: 0; }
 
+.amexio-root-window-content-ce {
+  position: relative; }
+
 .amexio-root-window-content-ce {
   display: flex;
   flex-direction: column;
@@ -8679,7 +8697,7 @@ amexio-layout amexio-layout-item {
   flex-direction: row;
   align-items: center;
   position: relative;
-  z-index: 2; }
+  z-index: 0; }
 
 .creative-header .creative-header-div {
   height: auto; }
@@ -9101,7 +9119,7 @@ amexio-layout-columns amexio-layout-item {
   box-shadow: none; }
 
 /** creative card - Structure CSS **/
-.card-container-ce-main {
+.card-container-ce-main1 {
   position: relative;
   height: 100%; }
 
@@ -9131,29 +9149,127 @@ amexio-layout-columns amexio-layout-item {
   background-color: var(--componentHoverBGColor);
   color: var(--componentFontColor); }
 
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px; }
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); }
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden; }
+
+/* dn */
+/* dn */
+.flip-card-back {
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  transform: rotateY(180deg); }
+
+.maincontainer {
+  position: relative;
+  /* width: 250px;
+  height: 320px; */
+  background: none;
+  /* top: 50%;
+  left: 50%; */
+  /* transform: translate(-50%, -50%); */ }
+
+.card-container-ce-main {
+  /* position: relative; */
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: all 0.8s ease; }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  background-color: var(--componentHoverBGColor);
+  color: var(--componentFontColor);
+  text-align: center;
+  transform: rotateY(180deg); }
+
+.card-container-ce-main:hover {
+  transform: rotateY(180deg); }
+
 /****************************************************************************
     Component Name : Creative Menus
     Version : Amexio v5.12 onwards
 *****************************************************************************/
 /** creative card - var CSS **/
 /** creative card - Visual CSS **/
+.bmenu1 a {
+  color: transparent;
+  text-shadow: 0px 0px 5px black; }
+
+.bmenu1 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu2 a {
+  color: transparent;
+  text-shadow: 0px 0px 6px black; }
+
+.bmenu2 a:hover {
+  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }
+
+.bmenu3 a {
+  text-shadow: 0px 0px 4px black; }
+
+.bmenu3 a:hover {
+  color: var(--componentHoverFontColor);
+  text-shadow: 0px 0px 1px black; }
+
+.bmenu4 a {
+  color: transparent;
+  text-shadow: 0px 0px 3px black; }
+
+.bmenu4 a:hover {
+  color: var(--componentHoverFontColor);
+  background: var(--componentHoverBGColor); }
+
+.bmenu4 a:hover {
+  text-shadow: none; }
+
+/** creative card - Structure CSS **/
 .textLeftPosition {
   width: max-content;
-  padding-left: 3%;
-  float: left;
+  display: grid;
+  justify-content: center;
   position: relative; }
 
 .textRightPosition {
   width: max-content;
-  padding-right: 7%;
+  text-align: right;
   float: right;
   position: relative; }
 
 .textCenterPosition {
   text-align: center;
   position: relative;
-  padding-left: 30%;
-  width: max-content; }
+  width: 100%; }
 
 .bmenu {
   padding: 0px;
@@ -9161,10 +9277,8 @@ amexio-layout-columns amexio-layout-item {
   position: relative; }
 
 .bmenu1 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 5px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
@@ -9174,16 +9288,12 @@ amexio-layout-columns amexio-layout-item {
   text-decoration: none; }
 
 .bmenu1 a:hover {
-  /* color: black; */
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   padding-left: 10px; }
 
 .bmenu2 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 6px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
@@ -9197,7 +9307,6 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.6s linear; }
 
 .bmenu2 a:hover {
-  text-shadow: 0px 0px 1px var(--componentHeaderBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
@@ -9205,10 +9314,8 @@ amexio-layout-columns amexio-layout-item {
   transform: scale(1); }
 
 .bmenu3 a {
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 4px black;
   letter-spacing: 1px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
@@ -9217,16 +9324,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.2s ease-in-out; }
 
 .bmenu3 a:hover {
-  color: var(--componentHoverFontColor);
-  text-shadow: 0px 0px 1px black;
   padding-left: 10px; }
 
 .bmenu4 a {
   white-space: nowrap;
-  color: transparent;
   display: block;
   text-transform: uppercase;
-  text-shadow: 0px 0px 3px black;
   letter-spacing: 1px;
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
@@ -9240,16 +9343,12 @@ amexio-layout-columns amexio-layout-item {
   transition: all 0.4s linear; }
 
 .bmenu4 a:hover {
-  text-shadow: none;
-  color: var(--componentHoverFontColor);
-  background: var(--componentHoverBGColor);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1); }
 
-/** creative card - Structure CSS **/
 /** Initialze Animation variables ------------ */
 /****************************************************************************
                 Animation CSS for Checkbox