.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1001;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
 
  
  transition: 0.5s;
  padding-top: 60px;
  display: none; /* Initially hide side navigation */
}


.sidenav ul {
  list-style-type: none;
  padding: 0;
  color: #FF8604 !important;
}

.sidenav ul li a{
  padding: 10px 8px 8px 32px;
  text-decoration: none;
  font-size: 20px;
  color: #c2b4b4;
  display: block;
  transition: 0.3s;

}

.sidenav ul li a:hover {
  color: #ffffff;
}

.closebtn {
  position: absolute;
  top: 0;
  left: 200px;
  font-size: 36px;
  margin-right: 50px;
  color: #c2b4b4;
}
.closebtn:hover{
  color: white;
}
#navToggle {
  font-size: 24px;
  cursor: pointer;
  margin-right: 4%;
  color: #ffffff;
  /* Add more styles as needed */
}


/* Media Query for small screens */
@media screen and (max-width: 900px) {
  .header .logo img {
            position: relative;
            
           }
  .sidenav {
    width: 250px; /* Set width to show side navigation */
  }
  #overlay {
  display: none; /* Initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  z-index: 999; /* Ensure overlay is below side navigation */
} 
}
@media screen and (min-width: 1200px) {
  #linksNormal {
    display: block; /* Show normal links */
  }
  #navToggle {
    display: none; /* Hide navigation toggle button */
  }
  #mySidenav {
    display: none; /* Hide side navigation */
  }
}
@media screen and (max-width: 600px) {
        .header .logo img {
            width:210px;
            position: relative !important;
            align-items: center;
            left: 80px !important;
           }

    }


        @media (min-width: 1200px) {
            #navToggle {
                display: none !important;
            }
        }
  
  
  @media (max-width: 1200px) {
        .sidenav {
            display: block !important;
        }
        
    }

    /* Hide the mainNav links on screens smaller than 800px */
    @media (max-width: 1200px) {
        #mainNav {
            display: none !important;
        }
        #overlay {
  display: none; /* Initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  z-index: 999; /* Ensure overlay is below side navigation */
} 
        
        
        
    }
 
   #mainNav {
  display: flex;
  flex-wrap: wrap;
  /* margin-left: -30%; */
 
}
#mainNav ul {
  display: flex;
  list-style-type: none; /* Remove bullet points */
  margin-left: -5%;
  

  
}
#mainNav ul li a {
    
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 600;
    color: #000000 !important;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
    padding: 0 10px !important;
    
  
}
#mainNav ul li a::before{
  content: ''; /* Add pseudo-element */
  position: absolute; /* Set position to absolute */
  margin-bottom: -5%;
  bottom: 0; /* Align at the bottom */
  left: 0; /* Start from the left */
  width: 0; /* Initially, the width is 0 */
  height: 2px; /* Height of the underline */
  background-color: #fe7600; /* Yellow color */
  transition: width 0.3s ease;
}
#mainNav ul li a:hover::before{
  width: 100%;
}

#mainNav ul:first-child  {
  margin: 0px 80px 8px -16px !important;
}



@media screen and (max-width: 500px) {
  .dropdown-content {
    position: fixed; 
    top: 50%;        
    left: 40%;       
    transform: translate(-50%, -50%); 
    min-width: 300px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    background: white; 
    border-radius: 8px; 
  }
}






      .cart-icon {
    position: relative !important;
    display: inline-block !important;
    margin-right: 5% !important;
    margin-top: 2px !important;

}

.cart-icon i {
    font-size: 22px !important; /* Adjust the icon size */
    color: white !important;
}

/* Cart count style */
.cart-icon span {
    position: absolute !important;
    padding-top: -12% !important;
    margin-top: 6% !important;
    top: -4px !important; /* Adjust top position as needed */
    right: -16px !important; /* Adjust right position as needed */
    background-color: red !important; /* Change background color as needed */
    color: white !important; /* Change text color as needed */
    border-radius: 50% !important; /* Make it round */
    font-size: 12px !important; /* Adjust font size as needed */
    padding-bottom: 15px !important;
    padding-left: 15% !important;
}
#navbar > ul:first-child {
  margin-right: 14% !important;
}

@media screen and (max-width: 768px) {
  .cart-icon i {
    font-size: 16px !important; 
    
}
.cart-icon span {
  top: -10px !important; /* Adjust top position for smaller screens */
        right: -16px !important; /* Adjust right position for smaller screens */
        padding: -4px 4px 6px !important; /* Adjust padding for smaller screens */
        font-size: 10px !important; 
        padding-left: 25% !important;
        margin-top: 16% !important;

}

  }
#mainNav ul li .dropdown-content a {
  color: black !important; /* Link text color */
  text-decoration: none; /* Remove underline */
 
}

#mainNav ul li .dropdown-content a:hover {
  color: white !important; /* Text color on hover */
}

#mainNav ul li .dropdown-content a::before {
  content: none; /* Remove the pseudo-element */
}

#mainNav ul li .dropdown-content a {
  margin-top: 5% !important;
  color: black !important; /* Link text color */
  text-decoration: none; /* Remove underline */
 
}

#mainNav ul li .dropdown-content a:hover {
  color: white !important; /* Text color on hover */
}

#mainNav ul li .dropdown-content a::before {
  content: none; /* Remove the pseudo-element */
}
.sidenav .dropdown-content a {
  color: black !important; /* Link text color */
  font-size: 14px !important;
  margin-left: -15px;
}

.sidenav .dropdown-content a:hover {
  color: white !important; /* Background color on hover */
  
}
.closebtn {
 
  left: 218px !important;

}
#navToggle {
    color: black;
}
 .as_cart_list li a {
      color: #000;
    }

    .dropbtn {

      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 2;
    }

    .dropdown-content a {
      color: #373c42;
      padding: 5px 16px;
      text-decoration: none;
      display: block;
      font-weight: normal;
    }

    /*.dropdown-content a:hover {background-color: #f1f1f1}*/
    .dropdown-content a {
      font-size: 15px;
    }

    .dropdown:hover .dropdown-content {
      display: block;
      background-color: #feb22f;
      color: white;
      border-radius: 5px;
      margin-top:5% !important;
    }


    /*.dropdown:hover .dropbtn {*/
    /*  background-color: #3e8e41;*/
    /*}*/

    .main-logout i {

      font-size: 50px;
      margin-left: 90px;
   }
   .cart-icon{
       position:relative;
   }
   
      .cart-icon span {
    position: absolute;
    top: -8px;
    right: -3px;
    border: 0px;
    padding: 0;
    font-size: 12px;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #FF8604;
    z-index: 999;
    padding: 1px 0 1px 3px;
}
  #google_translate_element{
           margin-right: 50px;
            margin-top: 30px;
             padding: 10px;
             max-width: 170px;
       }
     #google_translate_element  .skiptranslate{
         color:#742086;
     }
      #google_translate_element select{
           padding:10px;
           background-color:#FFB129;
           color:white;
           font-weight:bold;
       }
        #google_translate_element a{
          display:none;
       }