/*******************************/
/******* products Header CSS *******/
/*******************************/
.products-header {
    position: relative;
    margin-bottom: 30px;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://organiainnovationlab.blob.core.windows.net/organia/auproductcoverimg.jpg);
    background-repeat: no-repeat; /* Prevent image from repeating */
    background-size: cover; /* Ensures the image covers the entire area */
    height: 525px; /* Set a fixed height for the header */
    display: flex; /* Use flexbox for centering content */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
}

.products-header h2 {
    position: relative;
    color: #00b14a;
    font-size: 60px;
    font-weight: 700;
    margin: 20px 0; /* Adjusted margins for heading */
    padding-bottom: 5px;
    text-align: center; /* Center text */
}

.products-header h2::after {
    position: absolute;
    content: "";
    width: 100px;
    height: 2px;
    left: calc(50% - 50px);
    bottom: -10px; /* Position the line closer to the heading */
    background: #00b14a;
}

.products-header a {
    position: relative;
    padding: 0 12px;
    font-size: 22px;
    color: #ffffff;
}

.products-header a:hover {
    color: #00b14a;
}

.products-header a::after {
    position: absolute;
    content: "/";
    width: 8px;
    height: 8px;
    top: -2px;
    right: -7px;
    text-align: center;
    color: #ffffff;
}

.products-header a:last-child::after {
    display: none;
}

@media (max-width: 991.98px) {
    .products-header {
        height: auto; /* Allow height to adjust based on content */
        padding: 40px 0; /* Adjust padding for smaller devices */
        background-size: cover; /* Maintain full image visibility */
    }
    
    .products-header h2 {
        font-size: 45px; /* Smaller font size for headings */
        margin: 10px 0; /* Reduced margin for smaller devices */
    }
    
    .products-header a {
        font-size: 20px; /* Smaller font size for links */
    }
}

@media (max-width: 767.98px) {
    .products-header {
        width: 100vw; /* Full width of the viewport */
        height: 100vw; /* Square height based on viewport width */
        padding: 0; /* Remove extra padding for mobile */
        background-size: cover; /* Maintain full image visibility */
    }
    
    .products-header h2 {
        font-size: 30px; /* Further reduce font size for small devices */
        margin: 5px 0; /* Further reduced margin for small devices */
    }
    
    .products-header a {
        font-size: 18px; /* Further reduce font size for links */
    }
}


/******* buynow quantity *******/

/* Action Row Container */
.action-row {
    display: flex;
    gap: 10px; /* Space between containers */
    align-items: center;
}

/* Container Size */
.container-size {
    flex: 1; /* Ensures both containers take equal space */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px; /* Uniform height */
    min-width: 250px; /* Adjust as necessary */
    margin-top: 25px;
}

/* Quantity Container */
.quantity-container {
    display: flex;
    width: 100%; /* Fill the container */
    font-size: larger;
    font-size: 20px; /* Same font size as Buy Now button */
    background-color: #ffffff; /* White background */
    border: 4px solid #00b336; /* Green border with same thickness as Buy Now button */
    border-radius: 25px; /* Rounded corners for pill shape */
    overflow: hidden;
    height: 100%; /* Match container height */
}

/* Quantity Buttons */
.quantity-btn {
    background: none;
    border: none;
    background-color: #ffffff; /* White background */
    color: #00b336; /* Green color for the buttons */
    font-size: 20px; /* Same font size as Buy Now button */
    width: 33%; /* Each button takes up 1/3 of the container */
    cursor: pointer;
    padding: 0;
    height: 100%; /* Match container height */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Specific styles for the quantity buttons */
.quantity-btn.decrease {
    border-right: 2px solid #003fb3; /* Blue divider between buttons */
}

.quantity-btn.increase {
    border-left: 2px solid #004eb3; /* Blue divider between buttons */
}

/* Responsive Design for Mobile */
@media (max-width: 600px) {
    /* Adjust the action-row for mobile */
    .action-row {
        flex-direction: column; /* Stack containers vertically */
        gap: 5px; /* Reduce space for smaller screens */
    }

    .container-size {
        width: 100%; /* Full width on small screens */
        margin-top: 12px;
    }

    /* Adjust quantity container to make it responsive */
    .quantity-container {
        width: 100%; /* Make quantity container full-width on small screens */
        font-size: 16px; /* Slightly smaller font size for mobile */
        display: flex; /* Ensure it's a flex container for equal sizing */
        gap: 0; /* Remove any gap between items */
    }

    /* Ensure each part (input and buttons) take equal space */
    .quantity-btn, #quantity1, #quantity2, #quantity3 {
        width: 33.33%; /* Each part takes up 1/3 of the container */
        height: 40px; /* Match height for consistency */
        font-size: 20px; /* Keep the font size the same */
    }

    /* Adjust the height for buttons and input */
    .quantity-btn {
        height: 40px; /* Ensure buttons' height matches input height */
    }

    /* Ensure Buy Now button also fits properly */
    .btn-custom {
        height: 50px; /* Ensure Buy Now button height matches the others */
    }
}

/* Custom Button */
.btn-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00b336; /* Button color */
    color: #fff;
    border-radius: 5px; /* Rounded corners */
    text-decoration: none;
    width: 100%; /* Fill the container */
    height: 100%; /* Match the container height */
    padding: 0; /* Remove padding */
}

.btn-custom:hover {
    background-color: #0056b3; /* Hover effect */
}

/* Quantity Input Fields */
#quantity1, #quantity2, #quantity3 {
    text-align: center;
    border: none; /* Remove all borders */
    border-left: 4px solid #00b336; /* Left border in green */
    border-right: 4px solid #00b336; /* Right border in green */
    background: transparent;
    color: #000000; /* Black text color */
    font-size: 20px; /* Same font size as Buy Now button */
    width: 34%; /* Input takes up 1/3 of the container */
    padding: 0;
    margin: 0;
    outline: none; /* Remove focus outline */
}