.catgory-menu {
    padding: 10px;
    border-radius: 8px; /* Rounded corners */
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
}

.catgoryname-heading {
    margin-right: 20px;
}

h2.headings {
    font-size: 50px; /* Set font size */
    font-weight: bold; /* Make text bold */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    color: #000; /* Set text color to black */
    display: inline-block; /* Align heading text within the container */
}

.headings {
    position: relative; /* Needed for positioning the pseudo-element */
    padding-bottom: 5px; /* Adds space between text and underline */
}

@media (max-width: 768px) {
    h2.headings {
        font-size: 18px; /* Adjust font size for mobile devices */
    }

    .headings {
        padding-bottom: 3px; /* Adjust padding for better spacing */
    }
}

@media (max-width: 480px) {
    h2.headings {
        font-size: 18px; /* Further reduce font size for very small screens */
    }

    .headings {
        padding-bottom: 2px; /* Further adjust padding */
    }
}
.containerr {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping of subcategories */
    margin-top: 40px;
    margin-right: 5px; /* Margin for the entire container */
    gap: 9px; /* Space between items */
}


.right-side {
    display: flex; /* Display as flex container */
    flex-wrap: wrap; /* Allow items to wrap */
    align-content: flex-start; /* Align items to the top */
}
.subcategory {
    background-color: rgb(255, 255, 255);
    transition: box-shadow .25s, transform .25s;
    width: 200px; /* Fixed width */
    height: 250px; /* Fixed height */
    border: solid #e6e6e6;
  
    border-width: 1px 1px 1px 1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; /* Needed for positioning the text */
}
.subcategory h3 {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 16px;
    letter-spacing: .038rem;
    line-height: normal;
    color: #333;
    text-align: center;
    white-space: normal;     /* allow text to wrap */
    word-break: break-word;  /* break long words */
    max-width: 100%;
    padding: 2px 5px;
}

.subcategory:hover {
    background-color: rgb(255, 255, 255); /* Change background color on hover */
    border-color: rgb(255, 255, 255); /* Change border color on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Increase shadow for a lifted effect */
    transform: scale(1.05); /* Slightly scale up the element */
}

.subcategory-image-container {
    width: 100%; /* Ensure container takes full width */
    height: auto; /* Maintain aspect ratio */
    display: flex;
    justify-content: center; /* Center the image horizontally */
}


.h2-section__name {
    position: relative; /* Needed for positioning the underline */
    display: inline-block; /* To allow control of underline width */
/*    padding-bottom: 5px;  Adds some space between the text and the underline 
*/}

.h2-section__name::after {
    content: ""; /* Creates a pseudo-element */
    display: block; /* Makes the underline behave like a block */
    width: 100px; /* Width of the small underline */
    border-bottom: 5px solid rgb(251, 125, 0); /* Underline color and thickness */
    position: absolute; /* Positions it relative to the parent element */
    bottom: 0; /* Aligns it to the bottom of the text */
    right: 340px; /* Aligns the underline to the center */
    transform: translateX(-50%); /* Centers the underline under the text */
}
@media (max-width: 1024px) {
  .h2-section__name::after {
  content: ""; /* Creates a pseudo-element */
    display: block; /* Makes the underline behave like a block */
    width: 100px; /* Width of the small underline */
    border-bottom: 5px solid rgb(251, 125, 0); /* Underline color and thickness */
    position: absolute; /* Positions it relative to the parent element */
    bottom: 0; /* Aligns it to the bottom of the text */
    right: 250px; /* Aligns the underline to the center */
    transform: translateX(-50%); /* Centers the underline under the text */

  }
}
/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .h2-section__name::after {
        right: 220%; /* Center the underline under the text */
        transform: translateX(50%); /* Correct centering */
        width: 80px; /* Adjust the width for mobile */
    }
}

@media (max-width: 480px) {
    .h2-section__name::after {
        right: 220%; /* Center the underline */
        transform: translateX(50%); /* Correct centering */
    }
}
.headings::after {
    content: ""; /* Creates a pseudo-element */
    display: block; /* Makes the pseudo-element a block */
    width: 100px; /* Width of the small underline */
    border-bottom: 5px solid #FF5722; /* Underline color and thickness */
    position: absolute; /* Positions it relative to the parent element */
    left: 0; /* Aligns it to the start of the text */
    margin-left: 1px;
}

/* Subcategory images */
.subcategory-image {
    width: 150px; /* Fixed width for subcategory images */
    height: 106px; /* Fixed height for subcategory images */
    border-radius: 4px; /* Optional: Rounded corners */
    object-fit: cover; /* Ensure image covers the box and maintains aspect ratio */
    position: relative; /* Required for positioning */
    top: -20px; /* Move the image up by 60px */
}


@media (max-width: 992px) {
    .category-menu {
        flex-direction: column; /* Stack category items vertically on smaller screens */
    }

    .containerr {
        flex-direction: row; /* Keep subcategories in rows */
        justify-content: space-between; /* Space between subcategories */
    }

    .subcategory {
        width: calc(33.33% - 6px); /* Three boxes per row with spacing */
    }
}

@media (max-width: 768px) {
    .subcategory {
        width: calc(50% - 6px); /* Two boxes per row on medium screens */
    }
}

@media (max-width: 480px) {
    .subcategory {
        width: 100%; /* One box per row on smaller screens */
    }
}




/* Centers items and maintainscotrcet but when sir remove then remove this consistent spacing */

.containerr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    margin-top: 40px;
    margin-right: 5px;
    gap: 9px; /* Consistent gap */
}

.product-box { 
    width: calc(25% - 9px); /* Adjust width for better spacing */
    max-width: 250px; /* Limit maximum size */
    min-width: 150px; /* Ensures smaller screens show fewer items */
}
@media (max-width: 768px) {
    .product-box {
        width: calc(50% - 9px); /* 2 items per row on smaller screens */
    }
}

@media (max-width: 480px) {
    .product-box {
        width: 100%; /* Single column on very small screens */
    }
}