/* Base styles */
body {
    font-family: Arial, sans-serif; /* Using a common font for simplicity */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: linear-gradient(to bottom,#f8f8ff,rgba(255, 255, 255, 0.9));
}

/* header */
header {
    width: 100%;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
.header-logo {
    height: 60px;
    /* Smaller logo for mobile screens */
}

.header-top-row {
    display: flex;
    justify-content:space-around;
    align-items: center;
    background-color: #333c8b; 
    /* Navy blue */
    color: white;
    padding:8px auto;
    padding-left: 15px;
    padding-right: 15px;
    
    
}
.header-top-row :hover{
    color:#F0D422;

}

.header-search-bar form {
    display: flex;
    flex-grow: 1;
    max-width: 800px; /* Slightly larger search bar */
    margin: 0 20px;
    padding-top: -20px;
}

.header-search-bar input[type="text"] {
    flex-grow: 1;
    padding: 4px 80px;
    border: 2px solid #F0D422; /* Mustard yellow border */
    font-size: 16px; /* Larger font size for readability */
    color: #2a2e6a; /* Navy blue text for contrast */
    background-color: #fff; /* White background */
    border-radius: 10px; /* Rounded borders */
}

.header-search-bar button {
    padding: 5px 10px;
    background-color: #F0D422; /* Mustard yellow */
    color: #2a2e6a; /* Navy blue text */
    border: none;
    font-size: 16px; /* Matching font size with input */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover */
    border-radius: 10px; /* Rounded borders */
}


.header-cart-login a, nav a {
    text-decoration: none;
    color: white;
    padding: 0 15px;
    font-size: 16px; /* Slightly larger font size for navigation links */
    transition: color 0.3s; /* Smooth transition for hover effect */
}


.header-search-bar button:hover {
    background-color: #e8c52f; /* Lighter shade of yellow */
    color: white; /* White text for better visibility */
}

.header-cart-login a:hover, nav a:hover {
    color: #f0f422; /* Mustard yellow text on hover */
}
@media (max-width: 991px) {
    .btn-sm i {
        font-size: 1rem;
    }

    .navbar-toggler {
        border: none;
        background: transparent;
    }
}
@media (max-width: 360px) {
    .header-icons {
        gap: 2px !important;
    }

    .header-icons .btn {
        padding: 2px 4px !important;
    }

    .header-icons i {
        font-size: 13px !important;
    }
}
.header-icons .icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    /* Adjust icon size */
    background-color: transparent;
    /* or desired bg */
    border: none;
    /* if using buttons */
    margin: 0 4px;
    /* small space between icons */
    padding: 0;
}

/* On very small screens */
@media (max-width: 360px) {
    .header-icons .icon-btn {
        width: 30px;
        height: 30px;
        font-size: 16px;
        margin: 0 2px;
    }
}.header-icons .icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px; /* Adjust icon size */
    background-color: transparent; /* or desired bg */
    border: none; /* if using buttons */
    margin: 0 4px; /* small space between icons */
    padding: 0;
}

/* On very small screens */
@media (max-width: 360px) {
    .header-icons .icon-btn {
        width: 30px;
        height: 30px;
        font-size: 16px;
        margin: 0 2px;
    }
}
/* Dropdown panel */
#navbarToggleExternalContent {
    background-color: #1d237e;
    border-radius: 8px;
    margin: 20px;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: fadeSlideDown 0.3s ease;
}

/* Menu links */
#navbarToggleExternalContent a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease-in-out;
}

/* Remove border for last item */
#navbarToggleExternalContent a:last-child {
    border-bottom: none;
}

/* Icon color and animation */
#navbarToggleExternalContent i {
    color: #ffc107;
    font-size: 1rem;
}

/* Hover style */
#navbarToggleExternalContent a:hover {
    background-color: #2a318f;
    padding-left: 8px;
    border-radius: 4px;
}

/* Fade + slide animation */
@keyframes fadeSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Padding for all screens */
.responsive-container {
    padding: 0 15px;
    /* Adds left and right padding */
}

/* Increase padding on medium and larger screens for better spacing */
@media (min-width: 768px) {
    .responsive-container {
        padding: 0 30px;
    }
}

@media (min-width: 1200px) {
    .responsive-container {
        padding: 0 60px;
    }
}

/* Footer Styling */
/* Basic Footer Styling */
.site-footer {
    background-color: #2a2e6a;
    color: #fff;
    padding: 40px 20px;
    font-family: Arial, sans-serif;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-column {
    flex: 1 1 200px;
    /* Flexible base, minimum width 200px */
    margin: 20px;
}

.footer-column h4 {
    margin-bottom: 15px;
    font-size: 18px;
    border-bottom: 2px solid #555;
    padding-bottom: 5px;
}

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

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

.footer-column ul li a {
    color: #ccc;
    text-decoration: none;
}

.footer-column ul li a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-column p {
    font-size: 14px;
    line-height: 1.5;
}

.social-media-links a {
    color: #ccc;
    font-size: 20px;
    margin-right: 15px;
    text-decoration: none;
}

.social-media-links a:hover {
    color: #fff;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-column {
        margin: 15px 0;
    }

    .social-media-links {
        margin-top: 15px;
    }
}


/* Basic styling for the carousel container */
#heroCarousel {
    
    width: 100%;
    /* Ensures the carousel takes the full width */
    margin: auto;
    /* Center align the carousel if needed */
    
}

/* Styling for carousel items */
.carousel-item {
    width: 100%;
    /* Ensures each item takes the full width of the carousel */
    transition: transform 0.5s ease;
    /* Smooth transition for sliding */
}

/* Image styles to ensure they are responsive and cover the area well */
.carousel-item img {
    width: 100%;
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    /* Remove extra space below images */
}



/* Styling for carousel controls icons to ensure they are visible and properly sized */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #000;
        /* Adding background color for better visibility */
        border-radius: 50%;
        /* Circular background */
        padding: 10px;
        /* Space around the arrow icons */
}

.carousel-indicators{
    position: relative !important;;
    margin-bottom: -20px !important;
    color:#2d2e6a !important;
}

/* Ensure carousel indicators are visible and easy to interact with */

/* Responsive adjustments */
@media (max-width: 768px) {

    

   
}

@media (max-width: 576px) {
    .carousel-item img {
        height: 200px !important;
        /* Set a fixed height for very small devices */
    }

    
}

.company-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 100px;
    background-color: #f8f8f8de;

    /* Light gray back
    ground */
    
}

.company-text h2 {
    font-size: 26px;
    /* Larger size for heading */
    font-weight: bold;
    /* Bolder font weight for emphasis */
    color: #333;
    /* Darker color for better readability */
}

.company-text span.intro {
    font-size: 26px;
    /* Slightly larger font size for introductory text */
    color: #555;
    /* Slightly lighter than the heading */
    font-weight: normal;
    /* Normal weight to differentiate from the heading */
}

.company-text p {
    font-size: 16px;
    /* Standard text size */
    color: #666;
    /* Lighter color for regular text */
    margin-top: 10px;
    /* Space between paragraphs */
}

.company-text,
.services {
    flex-basis: 50%;
    /* Sets each child to take up 50% of the parent container's width */
    padding: 10px;
    /* Adds padding inside each section for some internal spacing */
}

.services {
    display: flex;
    justify-content: space-evenly;
    /* Distributes space evenly between items */
    align-items: center;
    /* Centers items vertically */
    padding: 20px;
    gap: 10px;
    /* Optional: adds some space between the boxes */
}

.service-item {
    text-align: center;
    /* Centers the text and icon */
    padding: 20px;
    flex: 1;
    /* Each service item will take equal space */
    min-width: 50px;
    /* Minimum width of each service box */
    min-height: 100px;
    background-color: #ffffff;
    /* White background for each service box */
    border: 1px solid #ccc;
    /* Subtle border for the boxes */
    border-radius: 5px;
    /* Rounded corners for the boxes */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
    flex-direction: column;
    /* Stacks icon and text vertically */
    justify-content: center;
    /* Aligns content vertically centered */
    align-items: center;
    /* Aligns content horizontally centered */
}

.service-item i {
    font-size: 30px;
    /* Icon size */
    color: #2d2e6a;
    /* Icon color matching your theme */
    margin-bottom: 50px 10px;
    /* Space between the icon and text */
}

.service-item p {
    margin: 0;
    /* Removes default margin to handle spacing */
}

.service-item img,
.service-item i {
    width: 50px;
    /* Size of the icon */
    height: 50px;
    /* Maintain aspect ratio */
    margin-bottom: 10px;
    /* Space between icon and text */
}
/* Company Details Section
.company-detail {
    max-width: 1400px;
    background: linear-gradient(to right, #9294f5, rgba(255, 255, 255, 0.9));
    background-size: cover;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    text-align: center;
    color: #333;
    /* Darker text for better contrast */
    /* font-size: 18px; */
    /* Slightly larger font size */
    /* font-style: italic; */
    /* font-weight:600; */
/* } */

/* .company-details:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
} */

/* .company-title {
    color: #2d2e6a;
    Deep blue
    margin-bottom: 20px;
    transition: color 0.3s ease;
} */

/* .company-title:hover {
    color: #a5cd36;
    Vibrant green
} */

/* .company-description {
    background: #ffffff;
    Light background to stand out
    padding: 20px 40px;
    /* Ample padding around the text */
    /* border-radius: 8px; */
    /* Slightly rounded corners for a modern look */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    /* Subtle shadow for depth */
    /* margin: 20px auto; */
    /* Centering the block with some margin */
    /* max-width: 80%; */
    /* Limiting width for better readability */
    /* font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; */
    /* Modern, readable font */
    /* line-height: 1.6; */
    /* Improved line spacing */
    /* color: #333; */
    /* Darker text for better contrast */
    /* font-size: 20px; */
    /* Slightly larger font size */
    /* font-style:italic; */
/* }  */


/* spacer */
.custom-spacer {
    height: 30px; /* or whatever height you prefer */
}

/* Categories */
/* Base container styling */
.card-container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    text-align: center; /* Ensures everything inside is centered */
}

/* Heading Style */
h3 {
    
    color: #2d2e6a;
    font-size: 24px;
}

/* Card Category Styling */
.card-category {
    border: 1px solid #ddd; /* subtle border */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* subtle shadow */
    transition: all 0.3s ease; /* smooth transition for hover effects */
    border-radius: 8px; /* rounded corners */
    overflow: hidden; /* ensures no overflow from child elements */
    margin: auto; /* Center the card */
    width: 90%; /* Increase width to make the card larger */
    
}

.card-category:hover {
    transform: translateY(-5px); /* slight raise */
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); /* more prominent shadow on hover */
}

/* Image styling inside cards */
.product-img {
    width: auto;
    height: 150px; /* Increased height for bigger images */
    margin: 0 auto 20px; /* Center aligning and spacing below the image */
    object-fit: contain; /* Ensures the image is properly scaled */
}

/* Card body styling */
.card-body {
    padding: 0px; /* padding inside the card for spacing */
}

/* Text styling within cards */
.card-text-category {
    font-size: 16px; /* visible font size */
    color: #2d2e6a; /* dark blue */
    font-weight: bold; /* bold text */
}
/* Button styling */
.btn-primary {
    background-color: #a5cd36; /* Brand color for button */
    color: #fff; /* White text for contrast */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px; /* Suitable font size for buttons */
    transition: background-color .3s; /* Transition for hover effect */
}

.btn-primary:hover {
    background-color: #98bf2f; /* Darker shade on hover for interaction feedback */
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .card-category {
        width: 95%; /* Slightly larger width on smaller screens for better visibility */
    }
}
@media (max-width: 991px) {
    .card-category {
        width: 100%;
        margin-bottom: 20px; /* Increased spacing on smaller screens */
    }

    h3 {
        font-size: 20px; /* Slightly smaller font size on smaller screens */
    }
}

@media (max-width: 768px) {
    .card-category {
        width: 100%;
        flex-basis: 100%; /* Full width cards on very small screens */
    }

    .product-img {
        height: 80px; /* Smaller images on smaller screens */
    }
}

@media (max-width: 576px) {
    .btn-primary {
        padding: 8px 16px; /* Smaller padding for smaller buttons */
        font-size: 14px; /* Smaller font size for better fit */
    }
}

/* General Section Title Styling */
.section-title {
    font-size: 1em;
    color: #2d2e6a;
    text-transform: uppercase;
    text-align: center;
    margin: 20px auto;
    padding: 10px 0;
    position: relative;
    display: inline-block;
    width: auto;
}

.section-title::before,
.section-title::after {
    content: "";
    display: inline-block;
    width: 50px;
    height: 1px;
    background-color: #ccc;
    vertical-align: middle;
    margin: 0 20px;
}

/* For tablets and smaller: shrink the lines */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.5rem;
        padding: 0 10px;
        display: block;
        /* Makes heading full width if needed */
    }

    .section-title::before,
    .section-title::after {
        width: 30px;
        /* Make the lines shorter */
        margin: 0 10px;
        /* Reduce spacing between text and lines */
    }
}

/* For very small screens: optionally hide the lines */
@media (max-width: 576px) {
    .section-title {
        font-size: 1.25rem;
    }

    .section-title::before,
    .section-title::after {
        display: none;
        /* Hide the lines on small mobiles */
    }
}

/* Ensuring that both titles have the same class applied */
#featured-brands h2,
#product-categories h2 {
    class: "section-title";
    /* This line is pseudo-code to illustrate the need for uniform class application */
}

/* Ensure that the container centers the content */
#featured-brands {
    text-align: center;
    width: 80%;
    /* Control the width of the entire card container */
    margin: 0 auto;
    /* This will center the container */
}
@media (max-width: 768px) {
    #featured-brands .section-title {
        font-size: 1.5rem;
        /* Reduce font size for smaller screens */
        text-align: center;
        /* Ensure center alignment */
        padding: 0 10px;
        /* Add some side padding */
        display: block;
        /* Prevent overflow with inline styles */
        border-bottom: none;
        /* Optional: Remove underline if it looks crowded */
    }
}

@media (max-width: 576px) {
    #featured-brands .section-title {
        font-size: 1.25rem;
        /* Further reduce font size for very small screens */
    }
}

/* Adjust the card size and the background image */
.brand-card {
    
    background-size: contain;
    /* Adjust from 'cover' to 'contain' to ensure the entire image is visible */
    background-position: center;
    background-repeat: no-repeat;
    background-color: #333c8b;
    color: #fff4c430;
    /* Ensures the image does not repeat */
    height: 150px;
    /* Adjust height accordingly */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    /* Ensure the card uses up all available width in the column */
}

/* Smaller hover effect */
.brand-card:hover {
    transform: scale(1.03);
    /* Slightly reduce the scale effect for subtlety */
    z-index: 10;
}

/* Full opacity overlay initially hidden, shown on hover */
.brand-overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    /* Keep initial transparent */
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background-color 0.5s ease-in-out, opacity 0.5s ease;
    opacity: 0;
}

.brand-card:hover .brand-overlay {
    background-color: rgba(0, 0, 0, 0.75);
    /* Darker for better readability */
    opacity: 1;
}

/* Adjust text and button positioning */
.brand-name {
    font-size: 1em;
    /* Adjust size for better fit */
    font-weight: bold;
    margin: 0;
    padding: 10px 0;
}

.shop-now-btn {
    background-color: #ffa500;
    border: none;
    padding: 8px 16px;
    text-decoration: none;
    color: white;
    border-radius: 4px;
    transition: background-color 0.3s, transform 0.3s;
    transform: translateY(10px);
    /* Less movement for a subtler effect */
    opacity: 0;
}

.brand-card:hover .shop-now-btn {
    transform: translateY(0);
    opacity: 1;
}

/* Category Card Adjustments */
#product-categories {
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.categ-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 6px;
    /* Rounded corners for the card */
    border: 1px solid #ccc;
    /* Optional: adds a light border around the card */
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Optional: adds shadow for better depth */
    background-color: white;
    
}

.categ-card:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    /* Larger shadow on hover for a "lifting" effect */
}

.product-img {
    width: 100%;
    /* Ensures the image covers the full width of the card */
    /* height: auto; */
    /* Adjusts height automatically to maintain the aspect ratio */
    object-fit: contain;
    /* Ensures the image covers the area, cropping if necessary */
    border-radius: 10px 10px 0 0;
    /* Rounded corners at the top of the image */
}

.card-body {
    padding: 0px;
    /* Reduced padding */
    
}

.categ-card-title {
    font-size: 0.9em;
    /* Reduced font size */
    font-weight: bold;
    color: white;
    background-color: #2d2e6a;
    padding:10px;
    
}

.category-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    z-index: 10;
    padding: 10px;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
}

.categ-card:hover .category-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.subcategory-links {
    list-style: none;
    padding: 0;
    text-align: center;
    margin: 0;
}

.subcategory-links li a {
    color: white;
    text-decoration: none;
    padding: 3px;
    /* Reduced padding */
    display: block;
    font-size: 0.8em;
    /* Reduced font size */
    transition: background-color 0.3s;
}

.subcategory-links li a:hover {
    background-color: #ffa500;
    /* Highlight links on hover */
}

.view-all-link {
    font-weight: bold;
    color: #a5cd36;
    margin-top: 5px;
    /* Adjusted for better spacing */
}

/* Base container styling */
.product-table-container {
    max-width: 1100px;
    margin: 0 auto;
    /* Center the container */
    padding: 20px;
}

/* Sidebar for categories */
.category-sidebar {
    border: 2px solid transparent;
        /* Prepares a border for active/hover states */
        border-radius: 5px;
        /* Rounded corners for tabs */
        padding: 10px 20px;
        /* Padding inside each tab */
        transition: all 0.3s ease;
        /* Smooth transition for background and border changes */
        background-color: #2d2e6a !important;
        /* Active and hover background */
        color: white !important;
        /* White text for active and hover states */
        border-color: #2d2e6a !important;
        /* Border color to match background */
}

.category-item {
    margin-bottom: 10px;
}

.category-toggle {
    width: 100%;
    background-color: #2d2e6a;
    /* Dark blue background */
    color: white;
    /* White text */
    padding: 8px 15px;
    /* Padding inside the button */
    border: none;
    /* No border */
    border-radius: 4px;
    /* Rounded corners */
    text-align: left;
    /* Aligns text to the left */
    font-size: 16px;
    /* Larger font size for readability */
    cursor: pointer;
    /* Cursor indicates it's clickable */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
    margin-bottom: 5px;
    /* Reduced bottom margin to bring closer to the divider */
}
.category-item.active .category-toggle {
    background-color: #41458D;
    /* Darker shade for active state */
    color: white;
}

/* Active state styling for subcategories */
.subcategory-item a.active {
    background-color: #41458D;
    /* Darker shade for active subcategory */
    color: white;
    padding: 8px;
    border-radius: 4px;
}

/* Styling for the divider */
.category-divider {
    border: none;
    /* No border */
    height: 1px;
    /* Thin line */
    background-color: #ccc;
    /* Light gray color */
    margin-top: 5px;
    /* Small space above the divider */
    margin-bottom: 10px;
    /* Slightly larger space below the divider to separate from next category */
}

/* Optionally, remove the divider after the last category item */
.category-item:last-child .category-divider {
    display: none;
    /* Hide the last divider */
}

.subcategory-list {
    list-style-type: none;
    padding-left: 20px;
    line-height: 70%;
    /* Increased padding for better alignment */
}

.subcategory-item a {
    display: block;
    padding: 5px 10px;
    color: white;
    font-size: 14px;
    text-decoration: none;
    /* Removes underline from links */
}

/* Base styles for the product table navigation */
.nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #2d2e6a;
    /* Dark blue background for the navbar */
}

.table-nav-item {
    flex-grow: 0;
    /* Ensure that nav items evenly distribute the space */
}

.table-nav-link {
    display: block;
    text-align: center;
    padding: 12px 20px;
    text-decoration: none;
    color: white;
    /* White text color */
    background-color: #2d2e6a;
    /* Dark blue background for non-active links */
    border: none;
    transition: background-color 0.3s ease;
    /* Smooth transition for hover effect */
}

.table-nav-link:hover
 {
    background-color: #0057b8;
    color:white;
    /* Lighter blue on hover */
}

.table-nav-link.active {
    background-color: #4CAF50;
    /* Green background for the active link */
    transform: scale(1.07); 
}

 .product-table-container .row {
     flex-wrap: nowrap;
 }

 .category-sidebar,
 .product-table-container .col-md-9 {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }

 .category-item,
 #products-display {
     flex: 1;
     overflow: hidden;
 }

/* Product Display Area */
#products-display {
    border: 2px solid transparent;
    border-color: white !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* Creates a responsive grid layout */
    grid-gap: 20px;
    /* Space between cards */
    padding: 20px;
    /* Padding around the grid */
    background-color: white;
    /* Light background color for the grid area */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 767.98px) {
    .product-table-container>.row {
        flex-direction: column;
    } }
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    /* White background for each card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
    border: none;
    /* No borders */
    border-radius: 8px;
    /* Rounded corners for the cards */
    overflow: hidden;
    /* Ensures nothing overflows from the card */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* Smooth transition for hover effects */
    height:200px;
}

.card:hover {
    transform: scale(1.03);
    /* Slight scale up on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* Increased shadow on hover for a "lifting" effect */
}

.card-img-top {
    width: 100%;
    /* Full width of the card */
    height: 100px;
    /* Fixed height for images */
    object-fit: contain;
    /* Ensures images cover the area well without stretching */
}

.card-body {
    padding: 15px;
    /* Padding within the card body */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    /* Allows the body to fill the space not taken by the image */
}

.card-title {
    text-decoration:none;
    font-size: 1rem;
    /* Appropriate font size for titles */
    color: #2d2e6a;
    /* Dark color for text */
    margin-bottom: 5px;
    /* Space below the title */
}

.card-text {
    text-decoration: none;
    font-size: 1rem;
    /* Smaller font size for additional text */
    color: red;
    /* Lighter text color for price or other info */
    margin-bottom: 10px;
    /* Space below the text */
}
.card-title,
.card-text,
.card-text small,
/* Targeting the small tag specifically */
.card-text a,
/* In case there are any anchor tags */
.card-link {
    /* If the whole card is a link */
    text-decoration: none;
    /* Removes underline from text and links */
    color: inherit;
    /* Ensures text color is consistent and not overridden by link styles */
}

/* Additional styling to handle any hover effects that might introduce underlines */
.card-link:hover,
.card-link a:hover,
.card-title:hover,
.card-text:hover,
.card-text a:hover {
    text-decoration: none;
    /* Ensure no underline appears on hover */
}

/* Add a subtle separator inside the card if needed */
.card-footer {
    padding: 10px 15px;
    /* Padding for the footer */
    background: #f8f8f8;
    /* Slightly different background for the footer */
    border-top: 1px solid #eee;
    /* Separator line */
}

.view-all-container {
    width: 100%;
    /* Full width of the container */
    margin-top: auto;
    /* Push to the bottom */
    padding: 1rem 0;
    /* Padding for aesthetics */
}
/* Responsive adjustments */
@media (max-width: 992px) {
    #products-display {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns for medium screens */
    }
}

@media (max-width: 768px) {
    #products-display {
        grid-template-columns: 1fr;
        /* 1 column for smaller screens */
    }

    .card {
        height: auto;
        /* Allows variable height based on content */
    }
}

/* General Styling for the Testimonials Section */
.testimonials-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    /* Center the container */
    padding: 20px;
}

.testimonials-container h3 {
    font-size: 1.8em;
    text-transform: uppercase;
    font-weight: bold;
    color: #2d2e6a;
    margin-bottom: 30px;
    text-align: center;
}

.blockquote {
    background: #fff;
    /* Light background for contrast */
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
    /* Rounded corners for modern look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
    transition: all 0.3s ease-in-out;
}

.blockquote:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* Increased shadow on hover for dynamic effect */
}

.blockquote p {
    font-size: 16px;
    /* Smaller font size for elegance */
    line-height: 1.6;
    color: #555;
}

.blockquote-footer {
    text-align: right;
    color: #666;
    margin-top: 10px;
    font-style: normal;
}

/* news section */
.news-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.news-container h3 {
    font-size: 1.8em;
    text-transform: uppercase;
    font-weight: bold;
    color: #2d2e6a;
    margin-bottom: 30px;
    text-align: center;
}

.news-item {
    background: #fff;
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.news-item:hover {
    transform: translateY(-5px);
    /* Slight lift effect on hover */
    border-color: #2d2e6a;
}

.news-item h4 {
    color: #333;
    font-size: 20px;
}

.news-item p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

/* Services Section */
.product-service-offers {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #f9f9fa;
    /* Light background for the section */
    padding: 20px 0;
    margin-top: 20px;
    border-top: 1px solid #ccc;
    /* Optional top border for distinction */
    border-bottom: 1px solid #ccc;
    /* Optional bottom border */
}

.product-service-item {
    text-align: center;
    flex-basis: 22%;
    /* Adjust based on the number of items */
    padding: 10px;
    margin: 10px;
    background: white;
    /* White background for each item */
    border-radius: 8px;
    /* Rounded corners for a softer look */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for 3D effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transitions for hover effects */
}

.product-service-item i {
    color: #0056b3;
    /* Theme color for icons */
    margin-bottom: 8px;
}

.product-service-item span {
    display: block;
    color: #333;
    /* Dark grey color for text */
    font-size: 14px;
    /* Slightly smaller font size for a compact look */
}

.product-service-item:hover {
    transform: translateY(-5px);
    /* Slight raise effect on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* Enhanced shadow on hover for depth */
}

/* products nav link */
.products-container .nav-tabs {
    border-bottom: none;
    /* Removes the default bottom border */
    display: flex;
    justify-content: flex-start;
    /* Aligns tabs at the start */
    background-color: #ffffff;
    /* White background for the nav container */
    padding: 0.5rem 1rem;
    /* Adds padding around the tabs for better spacing */
    margin-top: 10px;
    margin-left: 50px;
    /* Adjusts the left margin for alignment */
}

.products-container .nav-item {
    margin-right: 5px;
    /* Adds spacing between tabs */
    font-weight: bold;
    /* Bold font for better readability */
}

.products-container .nav-link {
    border: 2px solid transparent;
    /* Sets up potential borders for hover/active states */
    border-radius: 10px;
    /* Rounded corners for a softer look */
    padding: 10px 20px;
    /* Adequate padding within each tab */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth transition for colors */

    color: #2d2e6a;
    /* Default state text color, dark grey */
    text-transform: uppercase;
    /* Makes all letters uppercase */
    background-color: #A5CD36 !important;
}

.products-container .nav-link:hover,
.products-container .nav-link .active {
    background-color: #2d2e6a !important;
    /* Active state background color, a strong blue */
    color: #ffffff !important;
    /* White text on hover/active */
    border-color: #2d2e6a;
    /* Border color changes on hover/active to match */
}

.tab-content{
    padding: 20px;
    max-width: 1300px;
    margin: 0 auto;

}
/* Subcategory Product detailed views */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    border: 1px solid #070707;
}

.product {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures space distribution that pushes actions to the bottom */
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    height: 100%; /* Optional, depending on your design */
}

.product img {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.product-info {
    flex: 1; /* This ensures that it takes up any available space */
}

.product-info p, .product-info h4 {
    font-size: smaller; /* Adjusts the font size to be smaller than the inherited size */
    line-height: 1.2; /* Reduces the line spacing to make it tighter */
}

.product-info h4 {
    font-size: 1em; /* Ensures the heading isn't too large compared to the text */
}

.product-actions {
    display: flex;
    justify-content: space-between; /* Space between availability and actions */
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.availability {
    flex-grow: 1; /* Allows the availability to take necessary space */
    text-align: left; /* Aligns text to the left */

}

.actions-right {
    display: flex;
    gap: 10px; /* Space between input and button */

}

.quantity-input {
    width: 40px;
    padding: 5px;
    text-align: center;
    height: 40px;
    display: flex;
    justify-content: center;
    margin-bottom:-20px;
}

.cart-btn {
    background-color: #2d2e6a;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.in-stock {
    background-color: rgb(110, 255, 110); /* Green color for in-stock items */
    padding:5px 20px;
    border-radius :2px;
}

.out-of-stock {
    background-color: rgb(255, 132, 132); /* Red color for out-of-stock items */
    padding:5px 20px;
    border-radius :2px;
}

/* Base styles for the filter sidebar */
#filter-sidebar {
    position: sticky;
    top: 20px;
    /* Adjust this value based on your header's height or desired distance from the top */
    height: calc(100vh - 20px);
    /* Adjusts the height to take into account the top value, ensures it doesn't overflow the viewport */
   
    overflow-y: auto;
    /* Allows scrolling within the sidebar if content is taller than the viewport */
}

.filter-section {
    background-color: #f8f9fa;
    /* Light grey background for the filter area */
    padding: 10px;
    border-right: 1px solid #ddd;
    /* Subtle separation from the product display area */
}

.collapsible {
    background-color: #ffffff;
    color: #333;
    cursor: pointer;
    padding: 10px 0px;
    /* Reduced padding for a more compact appearance */
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 14px;
    /* Reduced font size for a cleaner look */
    border-bottom: 1px solid #ccc;
    /* Adds a line between each collapsible button */
}

.collapsible:hover {
    background-color: #f0f0f0;
}

.collapsible.active {
    background-color: #e9ecef;
    color: #0056b3;
    /* Highlight active section */
}

.content {
    padding: 5px 10px;
    /* Reduced padding inside collapsible content */
    display: none;
    overflow: hidden;
    background-color: #ffffff;
}

.content div {
    margin-bottom: 5px;
    /* Reduced vertical spacing between checkboxes */
    font-size:medium;
}

/* Styling for checkboxes */
input[type="checkbox"] {
    margin-right: 10px;
    /* Space between checkbox and label */
}

/* Button styling */
.filter-section button {
    width: 100%;
    background-color: #2d2e6a;
    /* Bootstrap primary color */
    color: white;
    border-color: white;
    padding: 8px;
    /* Slightly reduced padding for the button */
    border: solid;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 0px;
    /* Space from the last filter */
}

.filter-section button:hover {
    background-color: #A5CD36;
    /* Darker blue on hover */
}

.filter-section #filter-apply {
    width: 100%;
    background-color: #a5cd36;
    /* Bootstrap primary color */
    color: black;
    padding: 8px;
    /* Slightly reduced padding for the button */
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
    width:fit-content;
    
   
}

.filter-section #filter-apply:hover {
    background-color: #4A90E2;
    /* Darker blue on hover */
}

/* SubCategory Views */
.product-list-info{
    font-size: medium; /* Adjusts the font size to be smaller than the inherited size */
    line-height: 1.6; /* Reduces the line spacing to make it tighter */
}

.product-list .row {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.product-list .img-fluid {
    max-width: 40px; /* Set a fixed size for images */
}

.text-success {
    color: green;
}

.text-danger {
    color: red;
}

#sortProducts, #perPage{
    font-size: 14px;
}

.view-link {
    font-size: 14px;
    color: #2d2e6a; /* Bootstrap's default link color for consistency */
    text-decoration: none; /* Removes underline by default */
    margin-left: 10px; /* Adds spacing between links */
    /* margin-right: 5px; Adjust spacing between links if necessary */
}

.view-link:hover {
    color: black;
    text-decoration: underline; /* Adds underline on hover for better user interaction feedback */
}

.text-smaller {
    font-size: 0.9rem; /* Smaller text size */
}
.text-smaller select, .text-smaller a {
    font-size: 0.9rem; /* Ensures the select and links are also smaller */
}


.view-links {
    display: flex; /* Ensures the links are laid out inline */
    justify-content :flex-end;
    align-items: center; /* Aligns the links vertically in the center */
}

/* product details page */
/* Custom Carousel Styling */
.carousel-inner img {
    height: 200px;
    /* Adjust height as needed */
    object-fit: contain;
    /* Keeps the aspect ratio */
    width: 100%;
    /* Ensures the image is not wider than the carousel */
    
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #000;
    /* Add background color for visibility */
    border-radius: 50%;
    /* Circle shape */
    padding: 10px;
    /* Padding around arrows */
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: #555;
    /* Darker on hover for better interaction feedback */
}

.carousel-indicators li {
    background-color: #000;
    /* Makes the carousel indicators more prominent */
}

/* products details */
.product-descrp {
    background-color: #f8f9fa;
    /* Light gray background similar to Fastenal */
    border: 1px solid #ddd;
    /* Light border for separation */
    padding: 10px;
    /* Padding inside the container */
    margin-top: 10px;
    /* Space above the section */
}

.product-descrp h4 {
    color: #333;
    /* Dark text for better readability */
    font-size: 18px;
    /* Slightly larger font size for the product name */
    margin-bottom: 5px;
    /* Space below the product name */
}

.product-details-table {
    width: 100%;
    /* Full width of the container */
    border-collapse: collapse;
    /* Removes space between borders */
}

.product-details-table td {
    padding: 8px;
    /* Padding in cells for space around text */
    border-bottom: 1px solid #eee;
    /* Separator for each item */
    font-size: 14px;
    /* Consistent font size */
}

.product-details-table tr:last-child td {
    border-bottom: none;
    /* Remove border for the last row */
}

.product-detail-page .quantity input {
    width: auto;
    display: inline-block;
}

.product-detail-page button {
    width: 100%;
    padding: 8px;
    
}

.supply-chain p {
    margin-bottom: 5px;
}
.product-details h4 {
    color: #333; /* Customize the color to fit your design */
    margin-bottom: 20px;
}

.product-details ul {
    padding: 0;
    list-style: none;
    font-size:12px;
}

.product-details li {
    margin-bottom: 10px;
    line-height: 1.5;
    font-size: 16px; /* Adjust font size as needed */
}

.catalog-item {
    margin-top: 10px;
    padding: 10px;
    background-color: #f0f0f0; /* Light gray background for catalog items */
    border-left: 5px solid #007bff; /* Blue left border for emphasis */
    color: #333;
    font-style: italic;
    font-size:medium;
}
.product-attributes-heading {
    padding: 8px 12px; /* Padding around the text */
    background-color: #e9ecef; /* Light gray background, similar to Bootstrap's default colors */
    margin-top: 20px; /* Adds space above the heading */
    font-weight: bold; /* Optional: Makes text bold */
    border-radius: 5px; /* Optional: Rounds the corners */
}

.price-container h4 {
    color: #333;
    font-size: 20px;
    margin-bottom: 10px;
}

.price-container p {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.price-container strong {
    color: #0088cc;
    font-size: 16px;
}

.price-container span {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
}
/* Home Brands */
.brand-image-container .brand-img {
    width: 400px;  /* Adjust size as needed */
    /* height: 200px; Adjust size as needed */
    /* border-radius: 80%; Makes the image round */
    border-width: 100px;
    border-color: black;
    object-fit: cover; /* Ensures the image covers the area without distorting aspect ratio */
    margin-bottom: 10px; /* Space between the image and the manufacturer name */
}

.brand-image-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* timeline */
/* Timeline Base Styles */
.timeline {
    position: relative;
    padding-left: 50px;
    list-style: none;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #d4d9df;
    top: 0;
    bottom: 0;
    left: 18px;
    margin-left: -3px;
}

.timeline-item {
    margin-bottom: 50px;
    position: relative;
}

.timeline-icon {
    width: 36px;
    height: 36px;
    background-color: #A5CD36; /* Gold color */
    color: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
}

.timeline-content {
    position: relative;
    margin-left: 60px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.timeline-content::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -15px;
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #f8f9fa transparent transparent;
}

.timeline-content h4 {
    margin-top: 0;
    color: #333;
    font-weight: bold;
}

.timeline-content p {
    margin-bottom: 0;
}


/* Hover Effect */
.timeline-item:hover .timeline-content {
    background-color: #e9ecef;
}

.feature-box {
    padding: 30px;
    background-color: #f8f9fa;
    border-left: 5px solid #007bff; /* Consider using a gradient here if suitable */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    margin-bottom: 20px; /* Ensures consistent spacing between rows */
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.feature-box h3 {
    color: #007bff; /* Or another color that fits the design */
    font-size: 20px; /* Larger font size for headers */
    font-weight: bold;
}

.feature-box p {
    font-size: 16px; /* Slightly larger font size for body text */
    color: #333;
    line-height: 1.5; /* Improved line spacing for better readability */
}
.quality-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    margin-top: 20px;
}

.quality-icon {
    font-size: 40px;
    color: #4A90E2; /* Blue color for icons */
    margin-bottom: 15px;
}

.quality-card h3 {
    color: #333;
    font-size: 20px;
    font-weight: bold;
}

.quality-card p {
    font-size: 16px;
    color: #666;
    margin-top: 10px;
}

.quality-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
    .quality-card {
        padding: 15px;
    }
}


@media (max-width: 768px) {
    .feature-box {
        padding: 20px;
        margin-bottom: 10px;
    }

    .feature-box:hover {
        transform: none; /* Disables hover effect on mobile devices */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
}


/* Responsive Adjustments */
@media (max-width: 767px) {
    .timeline {
        padding-left: 25px;
    }

    .timeline::after {
        left: 12px;
    }

    .timeline-icon {
        left: -6px;
    }

    .timeline-content {
        margin-left: 40px;
    }
}


/* careers */
.job-listings .job {
    background: #f9f9f9;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.job h3 {
    color: #007BFF; /* Bootstrap primary color */
    margin-bottom: 10px;
}

.job p {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
}

.job a.btn {
    margin-top: 10px;
}

.job a.btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* Why Work With Us section */
#work-with-us {
    background-color: #f8f9fa; /* Light background for the whole row */
    padding: 20px 0; /* Adds padding around the content */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.work-with-us-text h2 {
    color: #007bff; /* Theme primary color for heading */
    font-weight: 700; /* Makes the font bolder */
    margin-bottom: 15px; /* Spacing below the heading */
}

.work-with-us-text p {
    font-size: 18px; /* Larger font size for the introductory text */
    color: #555; /* Darker grey for better readability */
    margin-bottom: 20px; /* Space before the list starts */
}

.work-with-us-text ul {
    list-style: inside disc; /* Bullets inside to save horizontal space */
    padding-left: 0; /* Removes default padding */
}

.work-with-us-text ul li {
    font-size: 16px; /* Slightly larger font for list items */
    line-height: 1.6; /* More line height for readability */
    padding: 5px 0; /* Adds vertical padding for each list item */
}

.work-with-us-image img {
    border-radius: 8px; /* Rounded corners for the image */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.15); /* Adds shadow to the image */
    transition: transform 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.work-with-us-image img:hover {
    transform: scale(1.05); /* Scales up the image on hover */
}

@media (max-width: 768px) {
    .work-with-us-text, .work-with-us-image {
        text-align: center; /* Centers text and image on smaller screens */
    }

    .work-with-us-image img {
        margin-top: 20px; /* Adds space between the text and image on small screens */
    }
}


/* Apply Section */
.btn-success {
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 5px;
    transition: background-color 0.3s, border-color 0.3s;
}

.btn-success:hover {
    background-color: #218838; /* Darker shade for hover effect */
    border-color: #1e7e34;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    
    .job {
        padding: 15px;
    }

    .btn {
        width: 100%;
    }
}

#cart-container {
    width: 95%;
    margin: auto;
    padding-top: 20px;
}

#cart-header h2 {
    color: #333;
    margin-bottom: 20px;
}

#cart-table {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
    border: 1px solid #ccc;
}

#cart-table th, #cart-table td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ccc;
}

#cart-table thead {
    background-color: #f8f8f8;
}

#cart-table tfoot {
    font-weight: bold;
    background-color: #e0e0e0;
}

#cart-actions {
    text-align: right;
    margin-top: 20px;
}

.btn {
    padding: 10px 20px;
    margin-left: 10px;
    border: none;
    cursor: pointer;
}

#update-cart {
    background-color: #007bff;
    color: white;
}

#empty-cart {
    background-color: #6c757d;
    color: white;
}

#checkout {
    background-color: #28a745;
    color: white;
}

/* Overall Style Adjustments for the Authentication Form */
.auth-container {
    max-width: 300px; /* Reduced width for a more compact form */
    margin: 2rem auto; /* Centering the form with automatic margins */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow for depth */
    background-color: #f8f9fa; /* Lighter background for contrast */
}

.auth-card-header {
    background-color: #004186 !important; /* Changed to a less intense blue */
    color: #ffffff;
    font-size: 18px; /* Smaller font size */
    padding: 10px; /* Optimal padding */
    border-bottom: 2px solid #004085; /* Adding a border for definition */
}

.form-control {
    font-size: 14px; /* Reduced font size */
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    line-height: 1.5; /* Adjusting line height for better readability */
}

.btn-primary {
    background-color: #007bff; /* Vibrant primary blue for the button */
    border: none;
    padding: 10px;
    font-size: 14px; /* Match input text size */
    margin-top: 10px;
}

.btn-link {
    color: #0056b3; /* Harmonizing with header color */
    padding: 5px;
    font-size: 14px;
    margin-top: 5px; /* Reduced space between links */
    display: block;
}

/* Adjusting the checkbox size and spacing */
.form-check-input {
    margin-top: 0.3rem;
    margin-left: 0;
}

/* Label styling */
.label {
    font-size: 14px;
    color: #495057;
}

/* Helper classes for better alignment and spacing */
.offset-md-4 {
    margin-left: 25%; /* Adjusting for smaller overall form width */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .auth-container {
        width: 95%;
        margin-top: 20px;
    }
    .offset-md-4 {
        margin-left: 0;
    }
}


/* Responsive Design */
@media (max-width: 768px) {
    
    /* hero section */
    .hero-section {
        padding: 50px 10px;
    }

    .hero-section h1 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .hero-section p {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .shop-now-btn {
        font-size: 14px;
        padding: 8px 16px;
    }

    /* Company details */
    .services {
        flex-direction: column;
        align-items: center;
    }

    .services-item {
        width: 100%; /* Full width for better mobile responsiveness */
        margin-bottom: 10px; /* Adds space between stacked items */
    }

    /* product carousel */
    .product-carousel {
        flex-direction: column;
        align-items: center;
    }
    .product-box {
        width: 90%; /* Makes each box take up most of the screen on small devices */
        margin: 10px auto; /* Centers the boxes and adds margin for spacing */
    }

    
        

    /* Services */
    .service-offers {
        flex-direction: column;
    }

    .product-service-item {
        margin-bottom: 20px;
    }

    

    .payment-methods {
        justify-content: center; /* Center payment icons */
    }
}