* {box-sizing: border-box;}

.header {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 5px;
  background-color: #ffff;
}

.logo img {
  height: 50px; /* Adjust as needed */
  width: auto;
  display: block;
  margin-left:10px;
  
}
.menu {
  width: 100%;
  font-size: 17px;
  padding:15px; 
}
.menu ul {
  list-style: none;
  display: flex;
  float: right;
   margin-left: 10px;
}

.menu li {
  margin-left:2px;
  padding:10px;
}

.menu a {
  text-decoration: none;
  color: #333;
  display: block;
  text-align: center;
  text-decoration: none;

}
.menu a:hover {
  background-color: #008000e3;
  color: #ffff;
  padding: 5px 3px;
}


#searchbar{
	margin-left:10px;
	padding:10px;
    background-color: #fdfeff;
}

.searchbarWide {
	width:20%;	
	border: 1px solid #c6ecff;
    border-radius: 5px;
	cursor: pointer;
    margin-left:10px;
    background: #fdfeff;
}

input[type=text] {
    font-size: 16px;
	width: 100%;
	-webkit-transition: width 0.15s ease-in-out;
	transition: width 0.15s ease-in-out;
}

/* When the input field gets focus,
		change its width to 100% */
input[type=text]:focus {
	width: 99%;
	
}
.carousel-img {
    border: 2px solid #F74B00; 
    border-radius: 5%; 
    width: 95%; height: auto;
}
.carousel-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<!-----------------------
/* Create a right-aligned (split) link inside the navigation bar-----------
.topnav a.split {
  float: right;
  color: #000;
}
.topnav a.split:hover {
  background-color: #008000e3;
  color: #ffff;
}

 /*Hide on Mobile 
@media (max-width: 664px) { 
  .hide-on-mobile {
    display: none;
  }
  .body {
  font-family: Arial, Helvetica, sans-serif;  
}}
--------------------*/>
            .whatsapp-float {
                position: fixed;
                bottom: 20px; /* Adjust vertical position */
                left: 20px; /* Adjust horizontal position */
                z-index: 1000;
                background-color: #25D366;
                color: white;
                border-radius: 50%;
                padding: 15px;
                font-size: 24px; /* Icon size */
                box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
            }
        
            .whatsapp-float:hover {
                color: white;
                box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
            }
            /* Hide the .whatsapp-float element on mobile devices */
            @media (max-width: 768px) {
                .whatsapp-float {
                    display: none;
                }
            }
            .stock-out-overlay {
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: 100%;
                background-color: white;
                color: black;
                font-size: 1em;
                opacity:0.8;
                font-weight: bold;
                text-align: center;
                padding: 10px 0;
                overflow: hidden;
                white-space: nowrap;
            }
            /* Facebook icon */
            .social_list .fa-facebook-f {
                padding:5px 8px;
                color:white;
                background-color: #3b5998; 
                
            }
            
            .social_list .fa-facebook-f:hover {
                background-color: #2d4373;  /* Darker Facebook blue on hover */
            }
            
            /* Twitter icon */
            .social_list .fa-twitter {
                padding:5px 8px;
                color:white;
                background-color: #1da1f2;  /* Twitter blue */
            }
            
            .social_list .fa-twitter:hover {
                padding:5px 8px;
                color:white;
                background-color: #0c85d0;  /* Darker Twitter blue on hover */
            }
            
            /* Instagram icon */
            .social_list .fa-instagram {
                padding:5px 8px;
                color:white;
                background-color: #e4405f;  /* Instagram pink */
            }
            
            .social_list .fa-instagram:hover {
                padding:5px 8px;
                color:white;
                background-color: #bc2a8d;  /* Darker Instagram purple-pink on hover */
            }
            
            /* LinkedIn icon */
            .social_list .fa-linkedin {
                padding:5px 8px;
                color:white;
                background-color: #0077b5;  /* LinkedIn blue */
            }
            
            .social_list .fa-linkedin:hover {
                background-color: #005983;  /* Darker LinkedIn blue on hover */
            }
            
            /* WhatsApp icon */
            .social_list .fa-whatsapp {
                padding:5px 8px;
                color:white;
                background-color: #25d366;  /* WhatsApp green */
            }
            
            .social_list .fa-whatsapp:hover {
                background-color: #128c7e;  /* Darker WhatsApp green on hover */
            }
            
            /* YouTube icon */
            .social_list .fa-youtube {
                padding:5px 8px;
                color:white;
                background-color: #ff0000;  /* YouTube red */
            }
            
            .social_list .fa-youtube:hover {
                background-color: #cc0000;  /* Darker YouTube red on hover */
            }