.product-item {
    padding: 10px; /* Optional: Adds spacing around products */
}

.product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 400px; /* Set a fixed height for uniformity */
    border: 1px solid #ddd;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 5px; /* Optional: Adds rounded corners */
    overflow: hidden; /* Ensures content doesn't overflow */
}

.product-image {
    width: 100%;
    height: 300px; /* Fixed height for consistency */
    overflow: hidden; /* Ensures content doesn't overflow the container */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px; /* Optional: to add rounded corners */
}

.product-image img {
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
    object-fit: cover; /* Ensures the image covers the container while maintaining aspect ratio */
    border-radius: 8px; /* Match the container's border radius */
}

.product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 10px; /* Adjusts spacing between image and info */
}

.product-name {
    font-size: 16px;
    margin: 10px 0;
}
.custom-bg {
    background: url('assets/images/ecommerce/ser.png') no-repeat center center/cover;
    background-size: cover;
}

.product-price {
    margin-bottom: 10px;
}

.product-action a {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.product-action a:hover {
    background-color: #0056b3;
}

.product:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow on hover */
    transform: translateY(-5px); /* Slight lift effect */
    transition: all 0.3s ease;
}

/* Section Title */
h3.mb-3 {
    font-size: 24px; /* Adjust font size as needed */
    font-weight: 600; /* Adjust font weight */
    margin-bottom: 1rem; /* Adjust spacing */
}

/* Section Description */
.text-muted.fs-15 {
    font-size: 15px; /* Match the fs-15 class */
    color: #6c757d; /* Muted text color */
    margin-bottom: 0;
}

/* Product Name */
.product-name a {
    font-size: 16px; /* Adjust font size as needed */
    font-weight: 500; /* Adjust font weight */
    color: #333; /* Text color */
    text-decoration: none; /* Remove underline */
}

/* Product Price */
.product-price .price {
    font-size: 16px; /* Adjust font size as needed */
    font-weight: 600; /* Adjust font weight */
    color: #333; /* Text color */
}

.product-price .price-before-discount {
    font-size: 12px; /* Match the fs-12 class */
    color: #6c757d; /* Muted text color */
    text-decoration: line-through; /* Strike-through effect */
}

/* Product Action Button */
.btn-primary {
    background-color: #007bff; /* Adjust button color */
    border-color: #007bff;
    color: #fff; /* Text color */
}

.btn-primary:hover {
    background-color: #0056b3; /* Adjust button hover color */
    border-color: #004085;
}

/* Price Wrapper for consistency */
.product-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px; /* Adjust spacing */
}

/* Float End for Rating */
.float-end {
    font-size: 14px; /* Adjust font size as needed */
    color: #000; /* Text color */
}

/* General styling for sections */
.section {
    padding: 60px 0;
}

/* Styling for the carousel items to fit well on the screen */
.ecommerce-home {
    min-height: 400px; /* Adjust height as needed */
    background-size: cover;
    background-position: center;
}

/* Button alignment and spacing */
.mt-4.text-center {
    margin-top: 20px; /* Spacing above the button */
    clear: both; /* Ensures it clears floated elements above */
    text-align: center; /* Centers the button */
    width: 100%; /* Ensures it spans the width of its container */
}

/* Product gallery layout */
/* Ensuring the button is correctly spaced and aligned */
.gallery-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers items */
    gap: 20px; /* Spacing between products */
}

.mt-4 {
    margin-top: 20px !important; /* Adds spacing between product list and button */
}

.text-center {
    text-align: center; /* Centers text and button */
}

.btn-hover {
    margin-top: 15px; /* Optional: Add margin to separate the button from products */
}


/* Individual product items */
.gallery-wrapper .element-item {
    flex: 0 0 25%; /* Four items per row in larger screens */
    max-width: 100%; /* Ensures items don’t exceed their container */
}

/* Product banners styling */
.product-banner-1 {
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Adds rounded corners */
    transition: transform 0.3s ease-in-out; /* Smooth scaling effect */
}

.product-banner-1:hover {
    transform: scale(1.05); /* Slightly enlarges on hover */
}

/* Media queries for responsive adjustments */
@media (max-width: 992px) {
    .gallery-wrapper .element-item {
        flex: 0 0 50%; /* Two items per row on medium screens */
    }
}

@media (max-width: 576px) {
    .gallery-wrapper .element-item {
        flex: 0 0 100%; /* One item per row on small screens */
    }
}
/* Adjust spacing for button under product images */
.gallery-wrapper + .mt-4 {
    margin-top: 1.5rem; /* Adjust as needed */
}

.btn-hover {
    margin-top: 20px; /* Ensure some space between products and button */
}

.btn-dark-grey {
    background-color: #6c757d; /* Dark Grey */
    color: #fff; /* Text color */
    border: none; /* Remove border */
}

.btn-dark-grey:hover {
    background-color: #5a6268; /* Darker grey on hover */
    color: #fff;
}

.btn-dark-grey:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); /* Focus shadow */
}

.extended-video {
    width: 100%;
    max-width: 1400px; /* Adjust to your desired width */
    height: auto; /* Keep height auto to maintain the aspect ratio */
}

.dropdown-menu .dropdown-item {
        transition: background-color 0.3s ease, color 0.3s ease; /* เพิ่ม transition สำหรับการเปลี่ยนสี */
    }

    .dropdown-menu .dropdown-item:hover {
        background-color: #a8baba !important; /* เปลี่ยนสีเมื่อเมาส์เลื่อนทับ */
        color: white !important; /* เปลี่ยนสีตัวอักษรเป็นขาวเมื่อเมาส์เลื่อนทับ */
    }