body.sticky-header-mobile{
    margin-top: 100px;
    margin: 0;
    font-family: 'work-sans-semibold', sans-serif;
    overflow: hidden; /* Optional, to prevent scrollbars if the rectangle is too big */
}
/*Whole mobile sticky header*/
.sticky-mobileheader{
    background: rgb(148, 188, 252);
    position: fixed;
    top: 0;
    height: 45px;
    width: 100%;
    box-shadow: 0 0 100px rgb(0,0,0, 0.6);
    display: fixed;
    z-index: 1;
}

/*Whole floating navbar*/
.floater-navbar{
  top: 81%;
  height: 68px;
  width: 100%;
  justify-content: space-evenly; /* position items to the right of the screen*/
  align-items: center; /* align items in the center horozontaly*/
  position: fixed;
  display: flex;
}
  /*Navbar background*/
  .img-mobile-navbar{
    top: 81%;
    height: 68px;
    width: 95vw;
    justify-content: center; /* position items to the right of the screen*/
    align-items: center; /* align items in the center horozontaly*/
    position: fixed;
    display: flex;
    left: 50%; /* Position 50% from the left */
    transform: translate(-50%); /* Shift the element back by half its width and height */

  }
    /*Search navbar*/
    .sticky-mobile-search {
      display: flex;
      top: 79.6%;
      height: 66px;
      width: 66px;
      background-color: rgb(148, 188, 252);
      border-radius: 50%;
      justify-content: center;
      align-items: center;
      position: fixed;
      text-align: center;
      left: 50%;
      transform: translateX(-50%);
    }
      /*Search icon*/
      .img-mobile-search{
        display: flex;
        height: 30px;
        width: 30px;
        justify-content: center;
        align-items: center;
        margin: 26%;
      }
    /*Icons*/
    .img-mobile-menu,
    .img-mobile-saved,
    .img-mobile-basket,
    .img-mobile-profile{
      height: 30px;
      width: 30px;
      justify-content: center;
      margin: 0 3%;
      display: flex;
      z-index: 1000;
      
    }
    .img-mobile-menu:hover,
    .img-mobile-saved:hover,
    .img-mobile-basket:hover,
    .img-mobile-profile:hover {
        background-color: rgb(148, 188, 252);
        border-radius: 30%; /* Makes the background circular */
        display: flex;
        justify-content: center;
        align-items: center;
}

      /*Containers*/
      .floater-navbar-leftside{
        justify-content: space-around;
        align-items: center;
        height: 68px;
        width: 25%;
        margin-left: 30%;
        display: flex;
        top: 81%;
        position: fixed;
        z-index: 300;
        margin-right: 70%;
        
      }
      .floater-navbar-rightside{
        justify-content: space-around;
        align-items: center;
        height: 68px;
        width: 25%;
        margin-right: 30%;
        display: flex;
        top: 81%;
        position: fixed;
        z-index: 30;
        margin-left: 70%;
        
      }
.mobile-sticky-menu{
  height: 82%;
  width: 250px;
  margin: 0 0 0 -25px;
  position: fixed;
  display: flex; /* Or another display type as needed */
 

}
  .mobile-sticky-menu-background{
    display: flex;
    flex-direction: column; /* Align children vertically */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    background-color: rgba(148, 188, 252, 0.896); /* Background color */
    width: 100%;
    border-radius: 15%;
    font-weight: bolder;
    text-decoration: none;

    
  }
  .mobile-sticky-menu-background hr {
    margin: 9px 0; /* Consistent with the links */
}

  a, a:visited, a:hover, a:active, a:link {
    text-decoration: none;
    color: black; /* Or any color you prefer */
    transition: all .5s linear;
}

a:hover {
    color: rgb(54, 67, 149);
}

  .mobile-menu-line {
    height: 1.5px; /* Height of the line */
    width: 80%; /* Adjust the width as needed */
    border: none;
    background: linear-gradient(to right, 
                                transparent, 
                                rgba(37, 73, 131, 0.8), 
                                transparent);
}
.mobile-sticky-menu-hidden {
  display: none;
}

  
    
@media only screen and (max-width: 768px) and (orientation: portrait) {
  .sticky-header-mobile,
  .floater-navbar,
  .img-mobile-navbar {
      display: flex !important; /* Changed from 'none' to 'flex' */
  }
  .sticky-header-nav a {
    font-size: 0.8rem; /* Smaller font size for mobile devices */
  }
  .sticky-header,
  .img-sticky-header-sparkles {
    display: none !important;
  }
}
@media only screen and (max-width: 1024px) and  (orientation: landscape) {
  .sticky-header-mobile,
  .floater-navbar,
  .img-mobile-navbar {
      display: flex !important; /* Changed from 'none' to 'flex' */
  }
  .sticky-header-nav a {
    font-size: 0.8rem; /* Smaller font size for mobile devices */
  }
  .sticky-header,
  .img-sticky-header-sparkles{
    display: none !important;
  }
}
@media only screen and (min-width: 768px){
  .sticky-header-mobile,
  .floater-navbar,
  .img-mobile-navbar {
      display: none;
  }
}
@media only screen and (min-width: 1024px) {
  .mobile-sticky-menu {
      display: none !important;
  }
}