updated css

css/style.css

@@ -9821,27 +9821,45 @@ textarea.form-control {
     height: 250px;
 }
 
+.hero-wrap {
+  position: relative; /* Ensure stacking context for children */
+  z-index: 1;
+}
+
+.home-slider {
+  position: relative; /* Ensure stacking context for slider items */
+  z-index: 1;
+}
+
+.slider-item {
+  position: relative; /* Ensure stacking context for overlay and content */
+  z-index: 1;
+}
+
 .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); /* Example overlay style */
+  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1; /* Ensure the overlay has a z-index */
+  z-index: 2; /* Overlay should be above the slider-item's base */
 }
 
 .banner-logo {
-  position: relative; /* Or absolute/fixed, but needs to be positioned */
+  position: relative; /* Maintain its position in the flow */
-  z-index: 2; /* Make sure the logo's container has a higher z-index */
+  z-index: 10; /* Ensure it's above the overlay */
 }
 
 .banner-logo a {
-  display: block; /* Or inline-block, to ensure the link itself can be positioned if needed */
+  display: block; /* To ensure the link respects z-index */
+  z-index: 11;
 }
 
 .banner-logo img {
-  /* You might need to ensure the image itself respects the z-index */
+  display: block; /* To ensure the image respects z-index */
-  position: relative; /* Or absolute/fixed */
+  z-index: 12;
-  z-index: 3; /* Give the image an even higher z-index */
+  max-width: none; /* Reset any max-width that might be causing issues */
+  height: auto;    /* Maintain aspect ratio */
+  width: auto;     /* Ensure it sizes according to its container */
 }