body {

}
    /* Custom CSS provided by the user */

        .menubar {
            padding: 18px !important;
            background-color: #393939;
        }


        
               span.menutxt {
            color:#B0B0B0;
            font-size:14px;
            font-weight:medium;
        }

.icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
   
}

svg.feather.feather-user.icon.sign-in {
    color: white;
}


svg.feather.feather-search.icon.serachicon {
    margin-top: 3px;
}


a.menutxt
 {
       color:#B0B0B0 !important;
       font-size:14px;
}

        .navbar {
            padding: 1rem 2rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Re-add shadow from previous version */
            border-radius: 0 0 0.25rem 0.25rem; /* Re-add rounded corners from previous version */
        }
        .navbar-brand {
            font-weight: 600;
            letter-spacing: 2px;
        }
        .search-wrapper {
            flex: 1;
            max-width: 400px;
        }
        .search-box {
            border-radius: 50px;
            padding-left: 1rem;
            border: 1px solid #ddd;
        }
        .search-box input {
            border: none;
            outline: none;
            box-shadow: none;
        }
        .nav-middle {
            gap: 2rem;
        }
        .nav-icons a {
            color: #000;
            font-size: 1.2rem;
        }
        .nav-icons a:hover {
            color: #555;
        }
        .logo-img {
            height: 39px;
            margin-right: 8px;
        }


.custom-search {
    width: 312px;
    position: relative;
    display: flex;
    height: 34px;
    border: 1px solid #ccc; /* Or a lighter grey for the first screenshot */
    border-radius: 24px;
    /* Adjust padding to control the space within the search box */
    /* We will primarily use this padding to create space for the icon. */
    padding: 0 12px 0 16px; /* Reduced right padding to bring input closer to the edge, will be fine-tuned by icon position */
    margin-left: 41px;
    /* For the lighter screenshot (image_50caa9.png), you might want a very light border */
    /* border: 1px solid #e0e0e0; */ /* Example for a lighter border */
}

.custom-search input {
    border: none;
    outline: none;
    width: 100%; /* Input fills the available flex space */
    height: 100%;
    border-radius: 24px;
    /* Ensure no extra padding on the input itself that pushes content too far left */
    padding-right: 0; /* Important: Remove any inherent right padding from the input */
    background-color: transparent; /* If the input itself has a default background */
    font-size: 16px; /* Adjust as needed */
    color: #333; /* Adjust text color as needed */
    /* For the lighter screenshot, the placeholder text looks a bit lighter */
    /*
    &::placeholder {
        color: #a0a0a0;
    }
    */
}

.custom-search i {
    position: absolute;
    /* Tweak this 'right' value. A smaller value moves it closer to the edge. */
    /* This value will depend on the icon's size and the desired visual alignment. */
    right: 8px; /* Start with a smaller value, then adjust */
    top: 50%;
    transform: translateY(-50%);
    color: #999; /* Adjust icon color for the lighter screenshot, it looks lighter */
    /* color: #b0b0b0; */ /* Example for lighter icon */
    pointer-events: none;
    font-size: 18px; /* Adjust icon size if needed */
}
        /* HeroCategories.css */

        /* General styling for the section */




        .banner-section {
     
            min-height: 400px; 
            background-image: url('../Images/home_banner.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
            padding: 20px; /* Add some padding around the content */
            height:90vh;
        }



               .tiletxt {
             font-size:26px;
             width: 77%;
        }

p.casualtxtpara {
    width: 77%;
    font-size: 18px;
    color: #121212;
}

p.casualtpara {
    font-size: 18px;
    color: #121212;
}

               .explorebtn {
            border: 2px solid #121212;
    padding: 9px 28px;
    font-size:11px;
    border-radius:24px;
     cursor: pointer;
        }



        .banner-content {
            text-align:left;
            width: 100%;
            margin-left: 56%;
            margin-top: 18%;
        }

      
        .btn-more-details {
            background-color: #ffffff; /* White background for the button */
            color: #343a40; /* Dark text for the button */
            border: 1px solid #ffffff; /* White border */
            padding: 8px 20px;
            border-radius: 5px;
            text-decoration: none; /* Remove underline from link */
        }

        .btn-more-details:hover {
            background-color: #f0f0f0; /* Slightly darker white on hover */
            color: #343a40;
            border: 1px solid #f0f0f0;
        }



.offset-lg-6 {
    margin-left: 0px;
    margin-top: 0px;
    }


.banner-para {
font-size: 26px;
    }















.text-white {
  color: #fff !important;
}

.bg-corporate {
             min-height: 457px; 
            background-image: url('../Images/corporate.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
            border-radius: 41px;
}


.bg-education {
              min-height:457px; 
            background-image: url('../Images/Education.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
             border-radius: 41px;
}



.bg-healthcare {
              min-height:457px; 
            background-image: url('../Images/Healthcare.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
             border-radius: 41px;
}

.bg-hospitality {
               min-height:470px; 
            background-image: url('../Images/Hospitality.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
             border-radius: 41px;
}





.bg-industrial {
               min-height:470px; 
            background-image: url('../Images/Industrial.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
             border-radius: 41px;
}





.bg-transport {
               min-height:470px; 
            background-image: url('../Images/AviationTransport.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
             border-radius: 41px;
}





main.container-fluid.d-flex.align-items-center.justify-content-center.alto100.mt-5.gird-width {
    max-width: 90vw;
}



    /* Adjust text and button styles for better match */
    .bg-corporate p.h3 {
        font-size: 37px; /* Adjust font size as needed */
        font-weight: 500;
        color:white;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Optional: text shadow for better readability */
    }

    .bg-corporate .btn {
        transition: all 0.3s ease;
    }

 




.container-fluid.sportsection-width {
    max-width:90vw;
    margin-top: 17px;
}


.container-fluid.bannersec.mx-auto.w-full {
    --bs-gutter-x: 0rem;
}


   .sports {
       height: 29vh !important;
    background-color: aquamarine;
   
    }


      .sports1 {
       height: 29vh !important;
    background-color: pink;
  
    }





.bg-sports {
               min-height:470px; 
            background-image: url('../Images/Teesports.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
             border-radius: 41px;
}


    .txtbox {
        transform: translate(6%, 48%);
    }




    .casualtitle {
        font-size: 51.62px;
        color:#121212;
    }

      .browsebtn {
        border:1px solid black;
    }


   .lintxt {
    font-size: 64px;
    text-align: left;
    color: #F65D1B;
    
   font-family: "Inter", sans-serif;
} 


   .linenpara {
    font-size: 22px;
    text-align: left;
    color: #121212;
    margin-top:14px;
     font-family: "Inter", sans-serif;
} 


      .inter{

   font-family: "Inter", sans-serif;
} 


.bg-bath {
               min-height:470px; 
            background-image: url('../Images/Bath Linens.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
             border-radius: 41px;
}



.bg-Beddings {
               min-height:470px; 
            background-image: url('../Images/Beddings.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
             border-radius: 41px;
}




.bg-KitchenLinens {
               min-height:470px; 
            background-image: url('../Images/Kitchen Linens.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
             border-radius: 41px;
}





.bg-TableLinens {
               min-height:470px; 
            background-image: url('../Images/Table Linens.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
             border-radius: 41px;
}



.bg-UpholsteryCovers {
               min-height:470px; 
            background-image: url('../Images/UpholsteryCovers.png'); /* Replace with your actual image URL */
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            display: flex; 
            align-items: center;
            color: #ffffff;
             border-radius: 41px;
}



        .carousel-indicators.carousel-indicators-right {
            position: absolute;
            right: 20px; /* Adjust as needed */
            left: auto; /* IMPORTANT: Override Bootstrap's default 'left: 0' */
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column; /* Stack dots vertically */
            margin: 0; /* Remove default margins */
            padding: 0; /* Remove default padding */
            list-style: none; /* Remove list style */
            width: auto; /* Allow content to dictate width */
            justify-content: center; /* Center dots vertically within their column */
            align-items: center; /* Center dots horizontally within their column */
            z-index: 10; /* Ensure it's above other carousel content */
        }

        .carousel-indicators.carousel-indicators-right [data-bs-target] {
            width: 10px; /* Dot size */
            height: 10px; /* Dot size */
            margin: 8px 0; /* Vertical spacing between dots */
            border-radius: 50%; /* Make dots circular */
            background-color: #fff; /* Default dot color */
            opacity: 0.7; /* Default opacity */
            border: none; /* Remove default border */
            transition: opacity 0.6s ease;
         
        }

        .carousel-indicators.carousel-indicators-right .active {
            opacity: 1; /* Active dot opacity */
            background-color: #EE5A25; /* Active dot color (Bootstrap primary) */
          
        }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 768px) {
            .carousel-indicators.carousel-indicators-right {
                right: 10px; /* Smaller right margin on mobile */
                margin: 0; /* Ensure no extra margins */
            }
            .carousel-indicators.carousel-indicators-right [data-bs-target] {
                width: 8px;
                height: 8px;
                margin: 6px 0;
            }
        }

        /* Basic styling for banner content */
        .banner-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 900px; /* Adjust banner height as needed */
            color: white;
            font-size: 2.5rem;
            text-align: center;
            background-size: cover;
            background-position: center;
            
            overflow: hidden; /* Ensure content stays within rounded corners */
            position: relative;
        }

        .banner-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*background: rgba(0, 0, 0, 0.3); /* Dark overlay for text readability */*/
            z-index: 1;
        }


        /* Example background images - replace with your own! */
        .banner-item.bg-1 { background-image: url('../Images/home_banner1.png'); }
        .banner-item.bg-2 { background-image: url('../Images/home_banner2.png'); }
        .banner-item.bg-3 { background-image: url('../Images/home_banner3.png'); }

        /* Container padding for visual appeal */
        .carousel-container {
            padding: 1rem;
        }

        
 
            .tabbed-navigation-container {
        position: absolute;
        top: 20px; /* Adjust as needed */
        right: 20px; /* Adjust as needed */
        z-index: 10; /* Ensure it's above the carousel content */
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

.uniform-tab.active .divide {
    display: none;
}

    .uniform-tabs {
        display: flex;
        background-color:#555555; /* Dark background with transparency */
        border-radius: 20px;
        overflow: hidden;
        margin-bottom: 10px; /* Space between tabs and dropdown */
        border: 1px solid #7D7D7D;
    }

    .uniform-tab {
        padding: 10px 15px;
        color: rgba(255, 255, 255, 0.7); /* Lighter text for inactive */
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
        white-space: nowrap;
    }

    .uniform-tab.active {
    background-color:#343434;
    color: white;
    border-radius: 20px;
    }



    
        .divide {
        margin-left:5px;
        color: rgba(255, 255, 255, 0.7); /* Lighter text for inactive */
       display:none;
    }


        .bathcol {
        width:28%;
   
       
    }


        .kitchcol {
        width:44%;
   
       
    }


    .uniform-dropdown {
        background-color: #474747; /* Darker background for dropdown */
        border-radius: 10px;
        overflow: hidden;
        width: 200px; /* Adjust width as needed */
        max-height: 0; /* Initially hidden */
        opacity: 0;
        transition: max-height 0.5s ease-out, opacity 0.3s ease-in-out;
        will-change: max-height, opacity; /* For smoother animation */
        position: absolute; /* Position dropdowns relative to the container */
        right: 0;
        top: calc(100% + 10px); /* Position below the tabs with some space */
    }

    /* JavaScript will add this class to show the dropdown */
    .uniform-dropdown.show {
        max-height: 300px; /* Sufficient height to show all items */
        opacity: 1;
    }

    .dropdown-item {
        padding: 10px 20px;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }




  /*Style need to update above */



        /* Adjust text alignment for smaller screens */
        @media (max-width: 767.98px) {
            .main-hero-content {
                max-width: 90%;
                margin: auto; /* Center content on small screens */
                text-align: center;
            }
            .main-hero-bg-img {
                height: 70%; /* Adjust image size for smaller screens */
                width: auto;
                object-fit: cover; /* Cover the area */
                right: 0;
                left: 0;
                margin: auto;
                opacity: 0.6; /* More transparent on small screens */
            }
        }

/* Category Cards specific styles (Chef's wear, Casual wears) */
.category-card {
    position: relative; /* KEEP THIS - CRUCIAL for absolute positioning of children */
    min-height: 180px; /* Minimum height for consistency */
    display: flex; /* KEEP THIS - useful for aligning content within the card if needed */
    align-items: center; /* KEEP THIS - Vertically center content, although absolute positioning will take over for .category-content */
    background-color: #e6e3df; /* Default background for these cards (if no image) */
    /* Add border-radius, shadow, etc., from your HTML if they are specific to the card */
    border-radius: 1rem; /* Assuming 'rounded-4' translates to 1rem border-radius */
    overflow: hidden; /* KEEP THIS - Ensures nothing overflows the rounded corners */
}

.category-card:nth-child(2) {
    /* You had this empty. If you want a different background or specific style for the second card, add it here. */
    /* Example: background-color: #f0f0f0; */
}

/* Updated styles for the background image */
.category-bg-img {
    position: absolute; /* KEEP THIS - Make image fill the card */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: inherit;
    z-index: 1; 
}

.category-card:nth-child(1) .category-bg-img {
    object-position: right center; 
}

.category-content {
    position: absolute; 
    z-index: 2; 

  
    top: 41%;           
    left: 53%;        
    transform: translate(-50%, -50%); 

    width: 100%;       
    box-sizing: border-box; 
    padding: 0 20px;    
    text-align: center; 

    font-size: 48px; 
    color: #fff; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 

   
    /*
    @media (max-width: 768px) {
        font-size: 36px;
    }
    @media (max-width: 576px) {
        font-size: 28px;
        padding: 0 15px;
    }
    */
}

h3.cheftitle {
    font-size: 38px; /* Make it inherit from .category-content for consistency */
    margin: 0; /* Remove default margin from h3 */
    line-height: 1.2; /* Adjust line height for multi-line titles */
    text-align:left;
    color: #2C4040; 
    font-weight:400;
   
}


     .para {
    font-size: 15px;
    text-align: left;
    margin-top: 11px;
        }






        .comfort-image {
            background-image: url('../Images/comfort.png'); /* Placeholder for Card4.webp */
            background-repeat: no-repeat;
            background-size: cover;
            background-position: bottom;
            height: 100%;
            border-radius: 31px;
            position: relative;
            padding: 2rem;
            min-height: 400px;
        }

.comforttxt {
    position: absolute;
    top: 5%;
    left: 46%;
    font-size: 44px;
    color: #3b2e2e;
}

        .wear-image {
            background-image: url('../Images/wear.png'); /* Placeholder for Card5.webp */
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            border-radius: 31px;
            height: 100%;
            position: relative;
            padding: 2rem;
            min-height: 400px;
        }

        .weartxt {
            position: absolute;
            top: 25%;
            left: 34%;
            font-size: 44px;
            color: #3b2e2e;
        }

.wear-desc {
    position: absolute;
    top: 35%;
    left: 47%;
    width: 60%;
    font-size: 16px;
}

.activeweartxt {
    position: absolute;
    top: 8%;
    left: 6%;
    font-size: 44px;
    color: #3b2e2e;
}



.activewear-desc {
    position: absolute;
    top: 37%;
    left: 7%;
    width: 60%;
    font-size: 16px;
}


        .feature-card {
            background-color: #f5f5f5;
            transition: all 0.3s ease;
            height: 138px;
        }

        .feature-card:hover {
            transform: translateY(-3px);
        }

        .container-fluid.my-5.featuresection {
            max-width: 1480px;
        }

        h6.featuretitles {
            font-size: 20px;
            color: #484848;
        }

        .featurepara {
            font-size: 20px;
            color: #484848;
        }

        .hero-banner {
            background: url('../Images/herobg.png') no-repeat center center; /* Placeholder for herobg.png */
            background-size: cover;
            min-height: 664px;
            border-radius: 32px;
            color: white;
            overflow: hidden;
        }

        .whyConatiner {
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        .shoptxt {
            font-size: 40px;
            color: #121212;
        }

        .shopsection {
            margin-top: 40px;
        }

        .outfitcontainer {
            width: 100%;
            max-width: 1640px;
            margin: 0 auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        


        .outfit-image {
            height: 538px;
            object-fit: contain;
        }

        .combinetxt {
            font-size: 60px;
            letter-spacing: -2px;
            line-height: 65px;
        }



            .footercontainer {
            width: 100%;
            max-width: 1640px;
            margin: 0 auto;
            padding-left: 15px;
            padding-right: 15px;
        }





        /* Custom CSS for the Footer */
        .footer {
background-color: #121212;
    color: #ffffff;
    padding: 60px 0;
    font-family: 'Inter', sans-serif;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .footer-logo img {
            height: 24px; /* Adjust logo height as needed */
            margin-right: 10px;
        }

        .footer-logo-text {
            font-weight: 600;
            font-size: 1.2rem;
            letter-spacing: 1px;
            color: #ff5722; /* Orange color for 'J2' */
        }

        .footer-logo-text span {
            color: #ffffff; /* White color for 'VESTURES' */
        }

        .footer-description {
            font-size: 0.9rem;
            line-height: 1.6;
            color: #cccccc; /* Lighter grey for description */
            margin-bottom: 30px;
        }

        .subscribe-input-group {
            display: flex;
            gap: 10px;
        }

        .subscribe-input {
            background-color: #333333; /* Darker input background */
            border: 1px solid #555555; /* Border for input */
            color: #ffffff;
            padding: 10px 15px;
            border-radius: 25px; /* Rounded corners for input */
            flex-grow: 1;
            max-width: 250px; /* Limit input width */
        }

        .subscribe-input::placeholder {
            color: #aaaaaa; /* Placeholder text color */
        }

        .subscribe-button {
            background-color: #ffffff; /* White button */
            color: #1a1a1a; /* Dark text for button */
            border: none;
            padding: 10px 25px;
            border-radius: 25px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .subscribe-button:hover {
            background-color: #e0e0e0; /* Slightly darker on hover */
        }

        .footer-links-column h5 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .footer-links-column ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links-column ul li {
            margin-bottom: 10px;
        }

        .footer-links-column ul li a {
            color: #cccccc; /* Lighter grey for links */
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .footer-links-column ul li a:hover {
            color: #ffffff; /* White on hover */
        }




#mainhero {
    margin-left: 4%;
}

.img-fluid {
    max-width: 93%;
    height: auto;
}


.shadow-sm {
    box-shadow: none !important;
}



        @media (min-width: 1745px) {
  #mainhero {
    margin-left: 4% !Important;
}

.img-fluid {
    max-width: 93% !important;
    height: auto !important;
}

            }










        /* Ensure images don't stretch excessively on very large screens */
        @media (min-width: 1400px) {
            .main-hero-bg-img {
                max-height: 100%;
                width: auto;
            }
            .main-hero-card {
                position: relative;
                min-height: 499px ;
                border-radius: 38px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                padding-top: 100px;
                box-sizing: border-box;
            }
        }

        @media (max-width: 1440px) {

            .banner-para {
    font-size: 21px;
}


            .main-hero-card {
                position: relative;
                min-height: 623px !important;
                border-radius: 38px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                padding-top: 100px;
                box-sizing: border-box;
            }


  .main-hero-content
 {

    margin-top: -71px;
}


      .main-hero-content {
        top: 36% !important;
        left: 19%;
        box-sizing: border-box;
    }


        }


      @media (max-width: 1536px) {

        .banner-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 670px; /* Adjust banner height as needed */
            color: white;
            font-size: 2.5rem;
            text-align: center;
            background-size: cover;
            background-position: center;
            
            overflow: hidden; /* Ensure content stays within rounded corners */
            position: relative;
        }






.img-fluid {
    max-width: 97% !important;
    height: auto;
}

#mainhero {
    margin-left: 3%;
}


.category-content {
    position: absolute;
    z-index: 2;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);

}
.comforttxt {
    position: absolute;
    top: 5%;
    left: 46%;
    font-size: 31px;
    color: #3b2e2e;
}


.wear-desc {
    position: absolute;
    top: 27%;
    left: 47%;
    width: 60%;
    font-size: 14px;
}


.activeweartxt {
    position: absolute;
    top: 4%;
    left: 6%;
    font-size: 31px;
    color: #3b2e2e;
}


.activewear-desc {
    position: absolute;
    top: 27%;
    left: 7%;
    width: 60%;
    font-size: 14px;
}


.main-hero-content {
    top: 28%;
    left: 19%;
    box-sizing: border-box;
}


}


        @media (max-width: 1024px) {

            .banner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    color: white;
    font-size: 2.5rem;
    text-align: center;
    background-size: contain;
    background-position: center;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
}




            .txtbox {
    transform: translate(2%, 5%);
}
            .main-hero-card {
                position: relative;
                min-height: 492px !important;
                border-radius: 38px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                padding-top: 100px;
                box-sizing: border-box;
            }

                .main-hero-content {
        margin-top: -38px;
    }



h2.indust_uniforms {
    text-align: center;
    font-size: 44px;
    margin-bottom: 20px;
    line-height: 1.1;
}


.main-hero-content .btn {
    display: block;
    margin: 0 auto;
    max-width: 227px;
    margin-top: -22px;
}




    .category-content {
        top: 56%;
        left: 50%;
    }


h3.cheftitle {
    font-size: 25px;
    margin: 0;
    line-height: 1.2;
}

    .comforttxt {
        position: absolute;
        top: 5%;
        left: 37%;
        font-size: 26px;
        color: #3b2e2e;
    }



    .wear-desc {
        position: absolute;
        top: 23%;
        left: 39%;
        width: 60%;
        font-size: 12px;
    }


       .activeweartxt {
        position: absolute;
        top: 5%;
        left: 7%;
        font-size: 26px;
        color: #3b2e2e;
    }



    .activewear-desc {
        position: absolute;
        top: 23%;
        left: 8%;
        width: 60%;
        font-size: 12px;
    }


        }

        /* Specific adjustments for screenshot layout */
        /* Ensure nav items are next to search bar on large screens */
        @media (min-width: 992px) { /* Applies only on large screens and up */
            .navbar-nav.main-nav {
                flex-grow: 0; /* Prevent these nav items from taking full width */
                margin-left: 1.5rem !important; /* Space between search and menu items */
            }
            .navbar-nav.icon-nav {
                margin-left: auto !important; /* Push icons to the far right */
            }
        }

        /* Adjust spacing for collapsed menu items on smaller screens */
        @media (max-width: 991.98px) {
            .navbar-collapse .nav-item {
                margin-top: 0.5rem;
            }
            .navbar-collapse .icon-nav .nav-link {
                margin-right: 1rem !important; /* Add space between icons when collapsed */
            }
            .navbar-collapse .icon-nav {
                justify-content: flex-start; /* Align icons to the left when collapsed */
                margin-left: 0 !important; /* Remove ms-auto on collapse */
            }
            .main-hero-content {
        max-width: 85%;
        top: 18% !important;
        left: 26% !important;
    }

.category-card.card.rounded-4.shadow-sm.position-relative.overflow-hidden.chef
 {
    height: 31vh;
}

    .category-content {
        top: 22% !important;
        left: 53% !important;
    }




        }

        @media (max-width: 991.98px) {
            .main-hero-card {
                min-height: 650px; /* Slightly reduce height */
                padding-top: 80px; /* Reduce top padding */
            }
            .main-hero-bg-img {
                max-height: 100%; /* Adjust image height if needed */
            }
            h2.indust_uniforms {
                font-size: 48px; /* Smaller font size */
                letter-spacing: -2px;
            }
            p.collectiontxt {
                font-size: 17px;
            }
            .main-hero-content {
                max-width: 85%; /* Allow content to take more width */
            }

            .category-card.card.rounded-4.h-50.position-relative.overflow-hidden.chef {
    min-height: 630px;
}


.category-card.card.rounded-4.h-50.position-relative.overflow-hidden.casual.thirdcard
 {
       min-height: 630px;
}


    .category-content {
        top: 34%;
        left: 50%;
    }


        h3.cheftitle {
        font-size: 42px;
        margin: 0;
        line-height: 1.2;
    }


        }

        /* For devices smaller than 768px (e.g., most mobile phones) */
        @media (max-width: 767.98px) {


                        
  


            .banner-section {
                min-height: 300px; /* Smaller height for smaller screens */
            }
            .banner-content p, .banner-content a {
                font-size: 0.9em; /* Slightly smaller text on small screens */
            }
            .main-hero-card {
                min-height: 550px; /* Further reduce height for mobile */
                padding-top: 60px; /* Further reduce top padding */
                border-radius: 20px; /* Smaller border-radius for mobile */
            }
            .main-hero-bg-img {
                max-height: 70%; /* Adjust image height for mobile */
            }
            h2.indust_uniforms {
                font-size: 38px; /* Significantly smaller font size for mobile */
                letter-spacing: -1.5px;
            }
            p.collectiontxt {
                font-size: 15px; /* Smaller paragraph font size */
            }
            .main-hero-content {
                max-width: 95%; /* Allow content to take almost full width */
                padding: 0 15px; /* Adjust horizontal padding */
            }
            .main-hero-content .btn {
                font-size: 15px; /* Smaller button font size */
                padding: 10px 20px; /* Smaller button padding */
            }
            .category-content {
                left: 0; /* Reset left positioning for mobile */
                text-align: center; /* Center content on mobile */
                width: 100%; /* Ensure content takes full width */
                padding: 0 10px;
            }
            h3.cheftitle {
                font-size: 32px; /* Adjust font size for mobile category titles */
            }
            .securitytxt, .weartxt {
                font-size: 30px; /* Adjust font size for mobile security/wear titles */
                position: static; /* Remove absolute positioning on mobile */
                text-align: center;
                width: 100%;
            }
            .wear-desc {
                position: static; /* Remove absolute positioning on mobile */
                text-align: center;
                width: 100%;
                padding: 0 10px;
            }
            .combinetxt {
                font-size: 38px; /* Adjust font size for mobile combine text */
                line-height: 1.2;
            }
            .outfitcontainer .col-lg-6:last-child {
                text-align: center;
            }
            .custom-search {
                margin-left: 0; /* Remove margin on mobile */
                width: 100%; /* Full width on mobile */
            }
            .navbar-nav.flex-row {
                flex-direction: column !important; /* Stack nav items vertically on mobile */
                align-items: flex-start !important;
                gap: 0.5rem !important;
            }
            .nav-icons {
                width: 100%;
                justify-content: center !important; /* Center icons on mobile */
                margin-top: 1rem;
            }
        }

        /* For very small devices (optional, but good for edge cases) */
        @media (max-width: 480px) {


.lintxt {
    font-size: 31px;
    text-align: center;
}


.linenpara {
    font-size: 20px;
    text-align: center;
}

            .banner-item {
    background-size: contain;
    background-repeat: no-repeat;
    height: 200px;
}


            .tiletxt {
    font-size: 8px;
    width: 81%;
}

            .banner-section {
    background-size: contain !important;
    height: auto !important;
}


            .main-hero-card {
                min-height: 450px;
                padding-top: 40px;
            }
            h2.indust_uniforms {
                font-size: 30px;
            }
            p.collectiontxt {
                font-size: 14px;
            }
            .shoptxt {
                font-size: 30px;
            }
            .combinetxt {
                font-size: 30px;
            }

.category-card.card.rounded-4.shadow-sm.h-50.position-relative.overflow-hidden.casual.thirdcard {
    min-height: 741px;
}

  



        }








        /* Responsive adjustments */
        @media (max-width: 991.98px) { /* Medium devices and down */
            .footer {
                padding: 40px 0;
            }
            .footer-logo {
                justify-content: center;
            }
            .footer-description {
                text-align: center;
            }
            .subscribe-input-group {
                justify-content: center;
                flex-wrap: wrap; /* Allow wrapping on smaller screens */
            }
            .subscribe-input {
                max-width: 100%; /* Full width for input on smaller screens */
            }
            .footer-links-column {
                text-align: center;
                margin-top: 30px; /* Add space between columns on mobile */
            }
            .footer-links-column h5 {
                margin-bottom: 15px;
            }
            .footer-links-column ul li {
                margin-bottom: 8px;
            }


              .comforttxt {
        position: absolute;
        top: 5%;
        left: 44% !important;
        font-size: 26px;
        color: #3b2e2e;
    }


        .wear-desc {
        position: absolute;
        top: 23%;
        left: 45% !important;
        width: 60%;
        font-size: 12px;
    }
        }

        @media (max-width: 767.98px) { /* Small devices and down */
                                       
            .banner-section {
    background-size: contain !important;
    height: auto !important;
}


            .footer {
                padding: 30px 0;
            }
            .footer-description {
                font-size: 0.85rem;
            }
            .subscribe-input-group {
                flex-direction: column; /* Stack input and button vertically */
                align-items: center;
            }
            .subscribe-input, .subscribe-button {
                width: 100%;
                max-width: 280px; /* Constrain width for stacked elements */
            }
            .subscribe-button {
                margin-top: 10px; /* Space between input and button */
            }



                  .bathcol {
        width:100% !Important;
   
       
    }


        .kitchcol {
        width:100% !Important;
   
       
    }
        }


@media screen and (max-width: 768px) {
    .kitchcol {
        width:100%;
   
       
    }
    .commanclass.d-flex{
  display:block !Important;
 
    }

.menubar {
    padding: 18px !important;
    display: none;
}


    .custom-search {
        margin-left: 0;
        width: 100%;
        margin-top: 23px;
    }

}




@media screen and (max-width: 390px) {
    .banner-content {
    text-align: left;
    width: 100%;
    margin-left: 56%;
    margin-top: 22%;
}


.tiletxt {
        font-size: 7px;
        width: 81%;
    }


.explorebtn {
    border: 2px solid #121212;
    padding: 0px 28px;
    font-size: 11px;
    border-radius: 24px;
    cursor: pointer;
}
 
    }