.top-bar {
   background-color: var(--dark_blue);
   box-shadow: 0 0.46875rem 2.1875rem rgb(4 9 20 / 3%),
    0 0.9375rem 1.40625rem rgb(4 9 20 / 3%),
    0 0.25rem 0.53125rem rgb(4 9 20 / 5%), 0 0.125rem 0.1875rem rgb(4 9 20 / 3%);
   position: fixed;
   width: 100%;
   top: 0;
   z-index: 10;
   transition: all 0.2s;
}
  .top-bar-content {
   height: 65px;
}
  .logo-bg {
   background-color: var(--dark_blue);
   width: 65px;
   height: 65px;
}
  .search-input {
   background: #fff url(../images/search-icon.png) no-repeat 340px 10px;
   min-width: 375px;
}
.user-dropdown {
  background: var(--lite_orange) url(../images/user-demo-icon.png) no-repeat -3px -4px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.user-md {
  background: var(--lite_orange) url(../images/user-demo-icon.png) no-repeat -3px -4px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.notification-count {
   width: 20px;
   height: 20px;
   line-height: 17px;
   background-color: #00a2ff;
   color: #fff;
   position: absolute;
   top: -10px;
   right: -10px;
   border: 3px solid #00a2ff;
}
.notification-f11 {
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.notification-count-header {
  width: 20px;
  height: 20px;
  line-height: 17px;
  background-color: #fff;
  color: black;
  position: absolute;
  top: -10px;
  right: -10px;
  border: 3px solid #fff;
}
.page-heading-xs {
   font-size: 14px;
}
.show-xs {
   display: none;
}
#menu {
   width: 20px;
   height: 20px;
   transition: 0.5s;
   z-index: 10;
}
.menu-line1 {
   width: 100%;
   height: 2px;
   background: #fff;
   transition: 0.6s;
}
.menu-line2 {
   width: 80%;
   height: 2px;
   margin-top: 4px;
   background: #fff;
   transition: 0.6s;
}
.rotate {
   transform: rotateZ(180deg);
}
.rotate1 {
   background: #fff;
   transform: rotateZ(45deg);
}
.rotate2 {
   background: #fff;
   width: 100%;
   transform: translate(0, -0.38rem) rotateZ(-45deg);
}
.nav-page1 {
   position: fixed;
   top: 0;
   left: 0;
   background: var(--side_blue);
   width: 100%;
   height: 70vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   color: #212121;
   transform: translate(0, -100%);
   transition: 1.5s;
   z-index: 10;
}
.nav-page1 span {
   padding: 1rem;
   color: #fff;
}
.nav-page2 {
   position: fixed;
   top: 0;
   left: 60%;
   background: var(--side_blue);
   width: 40%;
   height: 70vh;
   transition: 0.9s;
   transform: translate(0, -100%);
   z-index: 9;
}
.transform {
   transform: translate(0, 0);
}
/* .accordion-count {
   display: inline-flex;
   justify-content: center; 
   align-items: center;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: #00a2ff;
   color: white;
   margin-left: 8px;
   font-size: 12px;
   font-weight: 600;
   line-height: 1;
   vertical-align: middle;
} */

.accordion-count {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: #00a2ff;
   color: white;
   font-size: 12px;
   font-weight: 600;
   vertical-align: middle;
   padding-left: 8px;
   }