/* Slider */

.hero-slider-container.full-width {
    width: 100%;
}

.hero-slider-container.half-width {
    max-width: 1920px; /* Bootstrap container width */
    margin: 0 auto;
}
.hero-slider-container {
	margin-bottom: 100px;
}
@media (max-width: 768px) {
	.hero-slider-container {
		margin-bottom: 75px;
	}
}
.swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden;  /* Prevent horizontal scrolling */
}
.hero-slider-container .swiper-slide .jumbotron {
	min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slider-container .pdp-display {
    margin-bottom: 0;
}
.hero-slider-container .pdp-header {
	max-width: 100%;
}
.hero-slider-container .jumbotron {
    padding: 12rem 0;
}
.hero-slider .pdp-display .lead {
	font-size: 1.5rem;
}
.hero-slider {
    width: 100%;
    /*max-width: 1920px;*/
    margin: 0 auto;
}

.hero-slider-nav {
    position: absolute;
    bottom: 20px; /* Adjust the distance from the bottom */
    left: 0; /* Align to the left of the container */
    z-index: 999;
    max-width: 1920px;
    width: 100%;
    padding: 0 0 50px 0;
    display: flex;
    justify-content: flex-start; /* Align buttons to the left */
    gap: 10px; /* Space between buttons */
}

.hero-slider-nav .swiper-slide {
    display: inline-block; /* Ensure the slides are displayed inline */
}

.hero-slider-container {
    position: relative;
}

/* Navigation Button Styles */
.hero-nav-btn {
    background: transparent;
    position: relative;
    border: 0 none;
    color: #fff;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    border-radius: 0;
    font-family: 'Akzidenz', Helvetica, Arial, "sans-serif";
    margin: 0 10px;
}

/* Active State */
.hero-nav-btn:after {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    background: #fff;
    left: 0;
}
.hero-nav-btn {
    border: none;
	width: 100%;
}

.hero-nav-btn:focus,
.hero-nav-btn:active,
.hero-nav-btn:hover {
    outline: none; /* Remove default browser outline */
    border: none; /* Add orange bottom border */
}
.hero-nav-btn:focus:after,
.hero-nav-btn:active:after,
.hero-nav-btn:hover:after {
    outline: none; /* Remove default browser outline */
    border: none; /* Add orange bottom border */
	background-color: #db582e;
    content: '';
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: 0;
}

/* Active & Hover State */
.hero-nav-btn:hover,
.swiper-slide-active .hero-nav-btn {
    background: transparent;
    color: #fff;
}

.hero-nav-btn:hover:after,
.hero-nav-btn.active:after {
    content: '';
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: 0;
    background: #fff;
}
.hero-slider-nav {
    display: flex; /* Ensures the nav bar remains a flex container */
    justify-content: center; /* Centers everything inside */
	left: 0;
	right: 0;
	max-width: 1920px;
	margin: 0 auto;
}
.hero-slider-nav .nav-item {
	width: 20%;
}
.hero-slider-nav .container {
    display: flex; /* Keeps buttons aligned in a row */
    gap: 15px; /* Adjusts spacing between buttons */
}
@media (max-width: 768px) {
    .hero-slider-container .jumbotron {
        padding: 10rem 0;
    }
    .hero-slider-nav {
        flex-wrap: wrap;
        bottom: 10px; /* Moves it up slightly on mobile */
    }
    .hero-nav-btn {
        min-width: 120px;
        padding: 8px 16px;
    }
    .hero-nav-btn {
        min-width: 40px; /* Adjust button size */
        padding: 5px 10px;
        font-size: 16px;
        text-align: center;
	}

}
.hero-slider-container .swiper-button-next, .hero-slider-container .swiper-button-prev {
    color: #fff;
}

/* Image Overlay Content Module */
.featured-product-container {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
}

.featured-product-container .product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fully covers the container */
    z-index: -1; /* Pushes the image behind the content */
}

.featured-product-content {
    position: relative;
    background: white;
    padding: 2rem;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}


@media (max-width: 991px) {
    .featured-product-image {
        max-height: 300px;
    }
}