body{
  margin: 0;
}

.Bckbtn{
    padding: 12px 25px;
    font-size: 1rem;
    background-color: red;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    float: right;
}

.Bckbtn:hover{
    background-color: red;
    transform:transleteY(-2px);
}
.referrals_count_num_div{
    background-color: red;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align-last: center;
}
/* Style the skeleton or loader */
.header {
            display: flex;
            flex-direction: column;
            background: #ffffff;
            padding: 10px 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-skeleton {
            width: 50px;
            height: 50px;
            border-radius: 5px;
        }

        .search-bar-skeleton {
            width: 60%;
            height: 40px;
            border-radius: 20px;
        }

        .button-skeleton {
            width: 80px;
            height: 40px;
            border-radius: 20px;
        }

        .header-bottom {
            margin-top: 10px;
            display: flex;
          
        }

        .category-skeleton {
            width: 100px;
            height: 30px;
            border-radius: 15px;
        }

        .skeleton {
            background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        @keyframes shimmer {
            from {
                background-position: -200% 0;
            }
            to {
                background-position: 200% 0;
            }
        }
        .banner-skeleton {
            width: 100%;
            height: 400px;
            border-radius: 10px;
        }

        .category-skeletons {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            background: #ffffff;
            padding: 20px;
        }

        .category-item-skeleton {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        .skeleton{
            align-items: center;
        }
        .crad-sec{
            background: #ffffff;
            padding: 10px 20px;
            height: 300px;
        }
        .card-top{
           
            width: 20%;
    height: 20px;
    
    border-radius: 5px;
        }
        .card-item-skeleton{
            width:  30%;
            height: 200px;
            border-radius: 5px;


        }
        .card-bottom{
            display: flex;
            gap: 5%;
            margin-top: 30px;
        }
        .card-name{
            width:80%;
            height:30px;
            border-radius:5px;
        }

/* Hide the content container initially */
#content-container {
  display: none;
}

.count{
    color:white;
}
.invite-section_counts{
    display:flex;
}
  header {
    background-color: #f0f0f0; /* Adjust background color as desired */
    position:fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    
  }
   .countdown-container{
      display:flex;
  }
  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color:#f0f0f0;
  
  }
  .nav1 {
       
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%; /* Adjust max-width as needed */
    margin: 0 auto;
  }
  nav ul li {
    display: inline-block;
    list-style: none;
   
    /* margin: 10px 20px; */
  }
  #sidemenu li a {
    color: black;
    text-decoration: none;
    font-size: 18px;
    position: relative;
  
  }
  #sidemenu li a::after {
    content: "";
    width: 0%;
    height: 3px;
    background: #76abae;
    position: absolute;
    left: 0;
    bottom: -6px;
    transition: 0.5s;
  }
  #sidemenu li a:hover::after {
    width: 100%;
  }
  .nav_elements{
    margin: 10px 20px;
  }



  
  .logo {
    font-size: 20px;
    text-decoration: none;
    color: #000;
    width: 30px;
  }
  .logo2{
      width:30px;
      height:30px;
      
  }
  
  .search-bar {
    display: flex;
    align-items: center;
  }
  
  .search-bar input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    flex: 1; /* Allow input to grow */
    width: 500px;
  }
  
  .search-bar button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #333;
    color: #fff;
    cursor: pointer;
  }
  
  
  .login-button {
    text-decoration: none;
    color: #333;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 50px;
    cursor: pointer;
  }
  
  /*wallet slider starts*/
  
  .wallet-trigger {

  color: #fff;

  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.wallet-slider {
  position: fixed;
  top: 0;
  right: -40%; /* width of slider */
  height: 100vh;
  width: 40%;
  background-color: #fff;
  transition: right 0.5s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.wallet-slider.openwallet {
  right: 0;
}
.openwallet{
    right:0;
}

.wallet-content {
  padding: 20px;
}

.wallet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff0000;
  color: #fff;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.Transactions{
    padding:30px;
}
.Transactions-details{
    display: flex;
    gap: 25%;
    padding:10px;
}


  
  /*wallet slider stop*/
  
  /*refral link will open*/
  .referrals {
  position: relative;
}

.share-popup {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  width: 200px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1;
  border-radius: 5px;
}

.share-popup h4 {
  margin-top: 0;
}

.share-popup ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.share-popup li {
  margin-bottom: 10px;
}

.share-popup a {
  text-decoration: none;
  color: #337ab7;
}

.share-popup a:hover {
  color: #23527c;
}


  
  /*refral off*/

/*//notification on */

.notification {
  position: relative;
}

.notification-dropdown {
  position: absolute;
  top: 15px;
  right: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  width: 250px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1;
  border-radius: 5px;
}

.notification-dropdown h4 {
  margin-top: 0;
}

.notification-dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notification-dropdown li {
  margin-bottom: 10px;
}

.notification-dropdown a {
  text-decoration: none;
  color: #337ab7;
}

.notification-dropdown a:hover {
  color: #23527c;
}

.view-all {
  display: block;
  text-align: center;
  margin-top: 10px;
}


/*notification off*/

  
  /* Styles for the dropdown list (initially hidden) */
  .category-dropdown {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .cart-icon {
    position: relative;
    font-size: 24px;
    cursor: pointer;
    display:none;
  }
  .cart-icon2{
      font-size:30;
  }
  .cart-icon-attr{
      color:#049504;
  }
  .icon-attr{
      color:#080862;
  }
  .item-count {
    
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }
  






.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
       height: 500px;
    overflow: scroll;
    width:300px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    margin-bottom: 10px;
    position: relative;
}

.dropdown-menu li:last-child {
    margin-bottom: 0;
}

.sub-dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 100%;
    top: 0;
    transition: opacity 2.0s;
    opacity: 0;
}

.sub-dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 100%;
    top: 0;
    transition: opacity 2.0s;
    opacity: 0;
}

.sub2-dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 100%;
    top: 0;
    transition: opacity 2.0s;
    opacity: 0;
}

.sub3-dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 100%;
    top: 0;
    transition: opacity 2.0s;
    opacity: 0;
}

.sub4-dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 100%;
    top: 0;
    transition: opacity 2.0s;
    opacity: 0;
}
.dropdown-menu li:hover .sub-dropdown-menu {
    display: block;
    opacity: 1;
    transition: opacity 2.5s;
}


.sub_dropdown-menu li:hover .sub2-dropdown-menu {
    display: block;
    opacity: 1;
    transition: opacity 2.5s;
}

.sub2_dropdown-menuli:hover .sub3-dropdown-menu {
    display: block;
    opacity: 1;
    transition: opacity 2.5s;
}

.sub3_dropdown-menu li:hover .sub4-dropdown-menu {
    display: block;
    opacity: 1;
    transition: opacity 2.5s;
}

#copy-text-btn {
  background-color: #2196F3; /* Blue */
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#copy-text-btn:hover {
  background-color: #1A76D2; /* Darker blue on hover */
}

#copy-text-btn:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

#copy-text-btn:active {
  transform: scale(0.9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}





.sub-dropdown-menu:hover {
    opacity: 1;
    transition: opacity 2.0s;
}

.sub2-dropdown-menu:hover {
    opacity: 1;
    transition: opacity 2.0s;
}
.sub3-dropdown-menu:hover {
    opacity: 1;
    transition: opacity 2.0s;
}
.sub4-dropdown-menu:hover {
    opacity: 1;
    transition: opacity 2.0s;
}

.categories_content {
    width: 300px;
    height: 40px;
}

.sub_categories {
    width: 300px;
    height: 40px;
}

.sub2_categories {
    width: 300px;
    height: 40px;
}

.sub3_categories {
    width: 300px;
    height: 40px;
}

.product_categories {
    width: 300px;
    height: 40px;
}


#sidemenu2 {
  list-style: none;
  padding: 0;
  margin: 0;
  /* background-color: #333; */
  position: fixed;
  left: 170px;
 
}


#sidemenu2 li a {
  /* display: block; */
  padding: 20px;
  /* color: #fff; */
  text-decoration: none;
}


#sidemenu2 li:last-child {
  border-bottom: none;
}
.mobile-slider {
  position: fixed;
  top: 0;
  left: -50%; /* slider width */
  width: 50%;
  height: 100%;
  background-color: #fff;
  transition: left 0.5s ease;
  z-index: 1000;
}

.slider-content {
  padding: 20px;
}

.slider-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.open {
  left: 0;
  overflow: overlay;
}

.menu-icon {
 
  top: 10px;
  left: 10px;
  cursor: pointer;
}

.menu-icon span {
  display: block;
  width: 17px;
  height: 2.5px;
  background-color: #333;
  margin-bottom: 2px;
}

/*mobile veiw starts */


.mobile_navs {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile_navs li {
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.mobile_navs li:last-child {
  border-bottom: none;
}

.mobile_navs a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  transition: color 0.3s ease-in-out;
}

.mobile_navs a:hover {
  color: #666;
}

.mobile_navs .my-account {
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

.mobile_navs .my-account a {
  color: #fff;
}

/* Menu Header */

.menu-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Invite Section */

.invite-section {
  padding: 20px;
  background-color: #f7f7f7;
  border-top: 1px solid #ccc;
}

.invite-section span {
  font-size: 16px;

}

.whatappshare {
  background-color: #25D366;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.whatappshareicon {
  margin-right: 10px;
}

#copy-text-btn {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#copy-text-btn:hover {
  background-color: #444;
}


.shortcuts{
     display: flex;
    gap: 20px;
  
}




/*mobile veiw ends */

@media only screen and (min-width:481px) and (max-width: 768px) {
    .category-item-skeleton {
            width: 30px;
            height: 30px;
            
        }
        
        .banner-skeleton{
            height: 200px;
            
        }
        .logo-skeleton {
            width: 30px;
            height: 30px;
            border-radius: 5px;
        }
         .search-bar-skeleton {
           
            height: 30px;
            border-radius: 20px;
        }

        .button-skeleton {
          
            height: 30px;
           
        }
 
    .accRes{
            font-size: x-small;
    padding: 5px;
    }
    
    .shortcuts{
     gap: 10px;
    font-size: 18px;   
    }
    .wallet-slider {
    width:60%;
    right:-60%;
        
    }
   
  .nav1 {
    flex-direction: row;
   
  }
   .cart-icon2{
      font-size:30;
  }
   nav ul li a b{
      font-size:60%;
      
  }
  
  .cart-count {
    position: absolute;
    top: 16%;
    right: 31%;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    display:none;
  }
  .category-dropdown{
    display: none;
  }
  .search-bar input[type="text"] {
    width: 50%;
        height: 2px;
        border-radius: 50px;
  }
  .login-button {
    width: 12%;
    text-align: center;
  }
  .cart-icon {
    font-size: 18px;
  }
  .cart-count {
    font-size: 10px;
  }
  .cart-icon {
    display:none;
    }
     nav ul li a{
              font-size: 9px;
      
  }
  .nav_elements{
    display: none;
  }
  .nav-elements-mobile{
    font-size: 100%;
    display: ruby-text;
    margin-left: 10%;

  }
 
nav ul{
  font-size:15px;
  margin: 0;
  padding:0;

}
.search-bar button {
   
    border: none;
    border-radius: 50px;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    width:25px;
    height:25px;
    padding:0;
  }
  .item-count{
        width:18px;
        height:18px;
        
    }
    
}
@media only screen and (max-width: 480px) {
    .category-item-skeleton {
            width: 30px;
            height: 30px;
            
        }
        
        .banner-skeleton{
            height: 200px;
            
        }
        .logo-skeleton {
            width: 30px;
            height: 30px;
            border-radius: 5px;
        }
         .search-bar-skeleton {
           
            height: 30px;
            border-radius: 20px;
        }

        .button-skeleton {
          
            height: 30px;
           
        }
        
    .accRes{
            font-size: x-small;
    padding: 5px;
    }
    .referrals{
     display:none;   
    }
    #wallet-btn{
     display:none;   
    }
    .shortcuts{
     gap: 10px;
    font-size: 15px;   
    }
    .item-count{
        width:15px;
        height:15px;
        
    }
    .wallet-slider {
    right:-60%;
    width:60%;
        
    }
    
  
  .nav1 {
    flex-direction: row;
   
  }
  .search-bar button {
   
    border: none;
    border-radius: 50px;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    width:25px;
    height:25px;
    padding:0;
  }
  .nav{
    
  }
 
  .nav-elements-mobile{
    font-size: 100%;
    display: ruby-text;
    margin-left: 10%;

  }

  

  
  
  .search-bar input[type="text"] {
    width: 50%;
        height: 2px;
        border-radius: 50px;
  }
  .category-dropdown {
    width: 30%;
  }
  .login-button {
    font-size: 12px;
    
  }
  .cart-icon {
  display:none;
  }
  

  .category-dropdown{
      display:none;
  }
  /*.logo{*/
  /*    width:20%;*/
  /*}*/
  .login.div{
      width:25%;
      
  }
  .login-div{
      display:flex;
              width: 25%;
  }
  .cart-count{
      display:none
  }
  .login-cart{
      display:flex;
  }
  nav ul{
         font-size:15px;
         margin: 0;
         padding:0;
      
  }
  nav ul li a b{
      font-size:60%;
      
  }
  .dropdown a{
      
  }
  .nav_elements{
    display: none;
      
  }
  
  
}


@media only screen and (min-width:769px) and (max-width: 1024px) {
   
  .nav1 {
    flex-direction: row;
   
  }
   .cart-icon2{
      font-size:30;
  }
  .search-bar button {
   
    border: none;
    border-radius: 50px;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    height:35px;
    width:35px;
    padding:0;
  }
  
  .cart-count {
    position: absolute;
    top: 15%;
    right:15%;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    display:none;
  }
  .category-dropdown{
   width: 30%;
        border-radius: 50px;
        height: 40px;
  }
  .search-bar input[type="text"] {
   width: 50%;
        
        border-radius: 50px;
  }
  .login-button {
    width: 12%;
    text-align: center;
  }
  .cart-icon {
    font-size: 18px;
  }
  .cart-count {
    font-size: 10px;
  }
  .cart-icon {
    display:none;
    }
    


.nav-elements-mobile{
 display: none;

}
.logo{
    width:50px;
}
}

@media only screen and (min-width:1025px) and (max-width: 1440px) {
  .nav1 {
    flex-direction: row;
   
  }
  .nav-elements-mobile{
    display: none;
   
   }
    .cart-icon2{
      font-size:30;
  }
  
  .cart-count {
    position: absolute;
    
    right: 21%;
        top: 16%;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }
  .category-dropdown{
    width:30%;
  }
  .search-bar input[type="text"] {
    width: 50%;
  }
  .login-button {
    width: 12%;
    text-align: center;
  }
  .cart-icon {
    font-size: 18px;
  }
  .cart-count {
    font-size: 10px;
  }
  .logo{
    width:50px;
}

}
@media only screen and (min-width:1441px) and (max-width: 1920px) {
  .nav1 {
    flex-direction: row;
   
  }
   .cart-icon2{
      font-size:30;
  }
  
  .cart-count {
    position: absolute;
   
    right: 23%;
    top:23%;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }
  .category-dropdown{
    width:30%;
  }
  .search-bar input[type="text"] {
    width: 50%;
  }
  .login-button {
    width: 12%;
    text-align: center;
  }
  .cart-icon {
    font-size: 18px;
  }
  .cart-count {
    font-size: 10px;
  }
  .nav-elements-mobile{
    display: none;
   
   }
   .logo{
    width:50px;
}
 
}