/* For REsponsive */
/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
/* Responsive Image */
img {
    max-width: 100%;
    height: auto;
}
/* Navbar Styling */
#navbar {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    align-items: center;
    padding: 10px;
    /* background: #ff6600; */
    padding: 10px;    
}
#logo img {
    width: 120px;   
}
/* Make Grocery Items Grid */
.grocery {
    background-color: #f6eded;
    border:solid;
    border-color: #0073e6;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    padding: 20px;
}
.grosItem {
    text-align: center;
}
/* Responsive Design with Media Queries */
@media (max-width: 1024px) {
    #header2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
@media (max-width: 768px) {
    #navbar {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .search-box {
        width: 80%;
    }

    .grocery {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

@media (max-width: 480px) {
    #logo img {
        width: 80px;
    }

    .grocery {
        grid-template-columns: repeat(2, 1fr);
    }

    .grosItem h4 {
        font-size: 14px;
    }
}
/* For REsponsive Ends */

/* CSS RESEST */
*{
    margin: 0%;
    padding: 0%;
}
/* Headers */
#header1{
    background-color: orange;
    color: white;
    font-weight: bold;
    height: 42px;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#header2{
    display: flex;
    height: 42px;
    color: blue;
    text-align: center;
    font-size: 1rem;
    justify-content: space-between;
    align-items: center;
}
.search-box{
    align-items: center;
    position: relative;
    left: 30%;
    display: flex;
    height: 80%;
    width: 40%;
    max-width: 400px;
}
.search-box input {
    border: none;
    outline: none;
    padding: 5px;
    width: 250px; /* Adjust width as needed */
    border-radius: 20px;
    background-color: rgb(155, 155, 229);
    opacity: 0.3;
    font-size: 1em;
     /* Make font bright, bold, and black */
     font-weight: bold;
     color: black;
     opacity: 1; /* Ensure text is fully visible */
}
.search-box input[type="submit"] {
    background: none; /* Removes background */
    border: none; /* Removes border */
    cursor: pointer; /* Makes it clickable */
    font-size: 1.2em; /* Adjust size */
    color: black; /* Icon color */
    padding: 5px;
}


.search-box button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    color: #333; /* Button color */
}
#symbolList{
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap: 5px;
    padding-right: 40px;
}
.symbol{
    height: 36px;
    position: relative;
    display: inline-block;
}
/* The actual tooltip text */
.symbol::after {
    content: attr(title); /* Fetch title attribute for message */
    position: absolute;
    top: 100%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333; /* Dark background */
    color: #fff; /* White text */
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 15px;
    opacity: 0; /* Initially hidden */
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
}
/* Show the tooltip when hovering */
.symbol:hover::after {
    opacity: 1;
    visibility: visible;
}
.symbol img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.symbol img:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

/* NAvifation Bar: Logo And Image */
#logo{
    margin: 3px 4px;
}

/* NAvifation Bar: List Styling */
.navbar {
    /* background-color: green; */
    padding: 0;
    justify-content: flex-start; /* Align items to the left */
    padding-left: 0; /* Remove any extra padding */
    margin: 0;
    list-style: none;
    display: flex;
  }
#navbar{
    position: relative;
}
#navbar::before{
    content: "";
    background-color: green;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.6;
} 
.navbar > li {
    position: relative;
    text-align: left;
    /* font-size: 1.3rem; */
}
  .navbar a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    display: block;
    padding-left: 15px; /* Add some space on the left for readability */
}
.navbar ul {
    display: none;
    position: absolute;
    /* background: #ff6600; */
    list-style: none;
    padding: 0;
    width: 200px;
    max-height: 300px;
    overflow-y: auto;
    transition: width 0.3s ease-in-out;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
    background: #ffffff; /* Light background */

}

/* Responsive dropdown adjustments */
@media (max-width: 1024px) {
    .navbar ul {
       /* max-height: 250px;  Adjust height for tablets */
        width: 200px; /* Smaller width on tablets */

    }
}

@media (max-width: 768px) {
    .navbar ul {
        max-height: 200px; /* Adjust height for mobile */
        width: 100%; /* Full width on mobile */
        max-width: 300px; /* Set max-width so it doesn’t get too wide */
        left: 0;
    }
}

.navbar li:hover > ul {
    display: block;
}
.navbar ul li {
    width: 100%;
}

.navbar ul li a {
    padding: 10px;
    font-size: 14px;
}

/* 🛠️ Responsive Styles */
@media (max-width: 1024px) {
    .navbar {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .navbar {
        display: none; /* Hide menu initially on mobile */
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .navbar li {
        display: block;
        width: 100%;
    }

    .navbar ul {
        position: static;
        width: 100%;
    }

    .navbar ul li a {
        font-size: 13px;
    }

    /* Hamburger Menu */
    .menu-icon {
        display: block;
        cursor: pointer;
        font-size: 30px;
        color: white;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .navbar ul li a {
        font-size: 12px;
        padding: 8px;
    }
}

/* For Hamburger Menu */
/* Hide the hamburger menu on desktop */
.menu-icon {
    display: none;
}

/* Show the menu icon only on small screens */
@media (max-width: 768px) {
    .menu-icon {
        display: block;  /* Show ☰ on mobile */
        cursor: pointer;
        font-size: 30px;
        color: white;
        padding: 10px;
    }

    /* Hide the full navbar by default */
    .navbar {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .navbar li {
        display: block;
        width: 100%;
    }

    .navbar ul {
        position: static;
        width: 100%;
    }
}

/* When the menu is toggled, show it */
@media (max-width: 768px) {
    .navbar.active {
        display: flex;
    }
}
/* Hamburger Menu Finish */


/* Mine old */
  .navbar > li > a {
    text-decoration: none;
    border-radius: 20px;
    color: white;
    padding: 15px 20px;
    display: block;
  }

  /* mine old */
  .navbar > li > a:hover {
    background-color: white;
    color: black;
  }
  /* Dropdown styling */
  .navbar > li > ul {
    display: none;
    position: absolute;
    top: 100%; /* Position dropdown below the parent */
    left: 0;
    background-color: #fff;
    border-radius: 0.5;
    list-style: none;
    margin: 0;
    padding: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    width: 800px; /* Set width for multi-column layout */
    /*display: grid;  Use CSS grid for layout */
    display: none;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; /* Two columns */
    gap: 15px; /* Space between columns */
  }
  
  .navbar > li > ul > li {
    /* position: relative; */
    list-style: none;
    padding: 5px 0;
    font-size: 1.2rem;
  }
  
  .navbar > li > ul > li > a {
    text-decoration: none !important ;
    color: black;
    padding: 5px 0;
    display: block;
  }
  .navbar > li > ul > li > a:hover {
    background-color: #f1f1f1;
  }
  /* Show dropdown on hover */
  .navbar > li:hover > ul {
    display: grid;
  }

/* Limit items per column */
.navbar > li > ul {
    grid-auto-rows: minmax(20px, auto); /* Adjust row height as needed */
    grid-template-rows: repeat(4, auto); /* Four items per column */
}

  .navbar > li > ul > li > ul {
    text-decoration: none;
    list-style: none; /* Removes bullets from child li elements */
    padding: 0; /* Optional: Removes default padding */
    margin: 0; /* Optional: Removes default margin */
  }
   /* .navbar > li > ul > li > ul >a{
    text-decoration: none !important;
    font-size: 0.5rem;
  }  */
.search-box input:focus {
    width: 200px; /* Expands when focused */
    transition: width 0.3s ease;
}

/* Home Section */
#home{
    width: 100vw;
    height: 300px;
    text-align: center;
    padding: 0px;
    margin: 0;
    overflow: hidden;
    position: relative;
     display: flex;
    align-items: center; 
    justify-content: center; 

}
#home img{

        max-width: 100vw;
        max-height: 100%;
        object-fit: cover;
        display: block;
        /* opacity: 0.50;; */
        border-radius: 0px; /* Optional: Adds rounded corners */

}
@media (max-width: 768px) { /* Tablets and smaller */
    #home {
        height: 200px; /* Adjust height for smaller screens */
    }
}

@media (max-width: 480px) { /* Mobile */
    #home {
        height: 150px; /* Adjust height for mobile screens */
    }
}


/* Main Categories */

.grocery{
    /* background-color: antiquewhite; */
    z-index: 1;
    margin: 10px 10px;
    display: grid;
    /* grid-template-columns: repeat(6, auto); */
    position: relative;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Dynamic grid */
    /* justify-content: center; */
   justify-items: center;
   gap: 15px;
   padding: 20px;

}
.grosItem{
    height: 190px;
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background-color: aqua; */
    margin: 20px;
}
.proName{
   text-align: center;
   text-decoration: none;
}
.grosIMG{
    height: 150px; /* Fixed height for the circle */
    width: 150px; /* Fixed width for the circle */
    overflow: hidden;
    border-radius: 50%; /* Make it a circle */
    display: flex; /* Ensure child image stays centered */
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0; /* Optional background color for placeholder */

}
.grosItem a{
    color: inherit; /* Keeps the text color the same after clicking */
    text-decoration: none;
}
.grosItem a:visited {
    color: inherit; /* Ensures visited links do not change color */
}
.grosIMG img{
    width: 100%; /* make the image scale to fill the width */
    height: 100%; /* make it scale to fill the height */
    object-fit: cover;
    border-radius: 50%; /* Ensures the image itself is clipped into a circle */

}


/* ============================= */
/* Responsive Adjustments */
/* ============================= */
@media (max-width: 1024px) {
    /* Tablet View */
    .grocery {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

@media (max-width: 768px) {
    /* Mobile View */
    .grocery {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }

    .proName {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    /* Small Mobile View */
    .grocery {
        grid-template-columns: repeat(2, 1fr); /* Two items per row */
    }

    .proName {
        font-size: 12px;
    }
}

/* ============================= */
/* Responsive Adjustments */
/* ============================= */

/* Utility Classes */
.h-primary{
    font-size: 3.3rem;
    padding: 12px;
}

/* spices-masala.php */

#home-spices{
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-content: center;
    overflow: hidden;
}
#home-spices img{
    height: 100%;
    width: 100%;
    display: block;
    margin: 10px 10px;
}
.filters{
    margin: 10px, 10px;
    padding-top: 10px;;

}
.filters form{

    margin-top: 20px
}
.subfilter{
    background-color: rgb(242, 243, 243);

    border: solid #0073e6;
    padding: 30px 30px;
    margin-bottom: 15px; /* Adds space below each subfilter */
    text-align: start;
}
/* On tablets (max-width: 1024px), reduce width */
@media (max-width: 1024px) {
    .subfilter {
        width: 30%; /* Reduce width */
        padding: 20px;
        margin: 10px auto; /* Center align */
    }
}

/* On mobile devices (max-width: 600px), further reduce width */
@media (max-width: 600px) {
    .subfilter {
        width: 90%; /* Almost full width, but not too broad */
        padding: 15px;
        margin: 8px auto;
    }
}
.subfilter h3 {
    margin-bottom: 5px; /* Space between the heading and checkboxes */
}
.subfilter a{
    color: inherit;
    text-decoration: none;
}
.subfilter a:visited{
    color: inherit;
}
.spices{
    background-color: #ece1e1;
    display: grid;
    grid-template-columns: 15% auto;
    /* margin: 10px, 10px; */
    justify-items: center;
    gap: 20px;

}
/* On tablets (max-width: 1024px), make sidebar smaller */
@media (max-width: 1024px) {
    .spices {
        grid-template-columns: 25% auto; /* Sidebar takes 25% width */
    }
}

/* On mobile devices (max-width: 768px), stack filters on top */
@media (max-width: 768px) {
    .spices {
        grid-template-columns: 1fr; /* Single column layout */
    }

    .filters {
        width: 100%; /* Full width */
        text-align: center;
    }
}

.spicesList{
 
    margin: 10px, 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
   justify-items: center;
   gap: 20px;
   padding: 10px;
}
/* For tablets (max-width: 1024px) */
@media (max-width: 1024px) {
    .spicesList {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row */
    }
}

/* For mobile devices (max-width: 600px) */
@media (max-width: 600px) {
    .spicesList {
        grid-template-columns: repeat(1, 1fr); /* 1 item per row */
    }
}
.spiceItem{
    height: auto; /* Adjust height dynamically */
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background-color: aqua; */
    margin: 10px;
}
/* On tablets (max-width: 1024px) */
@media (max-width: 1024px) {
    .spiceItem {
        width: 180px;
    }
}

/* On mobile devices (max-width: 600px) */
@media (max-width: 600px) {
    .spiceItem {
        width: 90%; /* Full width */
    }
}
.spiceIMG{
    width: 120px;  /* Fixed width for image container */
    height: 120px; /* Fixed height for image container */
    overflow: hidden;
    border-radius: 50%;
    margin-bottom: 15px; /* Add space between image and header */
    position: relative;
}
.spiceIMG img{
    width: 100%; /* make the image scale to fill the width */
    height: 100%; /* make it scale to fill the height */
    object-fit: cover;
}
/* On tablets */
@media (max-width: 1024px) {
    .spiceIMG {
        width: 140px;
        height: 140px;
    }
}

/* On mobile */
@media (max-width: 600px) {
    .spiceIMG {
        width: 160px;
        height: 160px;
    }
}

.specialOffer {
    position: absolute;
    /*width: calc(100% + 20px);  Extend the label width beyond the image */
    width: 80%;
    height: 30px; /* Adjust the height as needed */
    top: 10px; /* Position the rectangle slightly above the image */
    left: 10%; /* Center the rectangle by offsetting */
    background-color: rgba(252, 248, 248, 0.8); /* Semi-transparent white background */
    color: red; /* Red text color */
    padding: 5px 0; /* Add padding for text spacing */
    font-size: 14px; /* Adjust font size */
    font-weight: bold; /* Make the text bold */
    border-radius: 5px; /* Rounded corners for the rectangle */
    text-align: center; /* Center the text */
    z-index: 10; /* Ensure the label is on top of the image */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add a shadow for a better appearance */
}
.spiceName h4 {
    margin: 0; /* Remove any margin from the product name */
    font-size: 14px; /* Adjust font size as needed */
    color: #333; /* Darker text for the name */
    text-align: center; /* Center-align the text */
}
.spiceName h4 a{
    color: inherit;
    text-decoration: none;
}
.spiceName h4 a:visited{
    color: inherit;
}
.spicePrice {
    margin-top: 5px; /* Add spacing between the name and price */
    font-size: 12px; /* Adjust font size for the price */
    color: #666; /* Use a lighter color for the price */
    text-align: center; /* Center-align the price */
    font-size: 1.2rem;
}

/* Style for buttons container */
.imageButtons {
    position: absolute;
    top: 0;
    /* left: 0; */
    right: 0;
    /* width: 100%; */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-right: 5px;
    background-color: rgba(246, 245, 245, 0.942); /* Semi-transparent overlay */
    opacity: 0; /* Hide buttons initially */
    transition: opacity 0.3s ease; /* Smooth fade-in effect */
}

/* Style for individual buttons */
.imageButtons button {
    background-color: white;
    color: black;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.imageButtons button:hover {
    background-color: #ff6347; /* Change color on hover */
    color: white;
}

/* Show buttons when hovering over the .spiceIMG container */
.spiceIMG:hover .imageButtons {
    opacity: 1;
}

.spiceName {
    text-align: center;
    width: 100%;      /* Ensures the name spans the width of the container */
}
.spiceItem h4 {
    font-size: 1em;
    /* text-align: center; */
    margin: 0;
    
    /*white-space: nowrap;       /* Prevents text from wrapping */
    /*overflow: hidden;          /* Hides overflow text */
    /*text-overflow: ellipsis;   /* Adds ellipsis (...) if text is too long */
    /*width: 100%;               /* Makes header width fixed */
    word-wrap: break-word;
}

.spicesList {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-items: center;
    gap: 20px;
}

/* Style pagination under spicesList */
.pagination {
    grid-column: 1 / -1;       /* Span across all columns */
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.pagination a {
    padding: 8px 12px;
    text-decoration: none;
    color: #0073e6;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.pagination a:hover {
    background-color: #f0f0f0;
}

.pagination .current-page {
    padding: 8px 12px;
    color: white;
    background-color: #0073e6;
    border-radius: 4px;
    font-weight: bold;
}


/* product Page */
.product{
    margin: 0 auto;
    padding: 10px 10px;
    display: flex;
    flex-direction: row;
    /* grid-template-columns: repeat(2, auto); */
   /* justify-content: center; */
    justify-items: center;
    gap: 30px;
    width: 80%; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport, optional */

}
.product-image{
    background-color: #ff6347;
    border: 1px solid #ccc; /* Optional: Visual aid */
    width: 50%;

}
.product-description {
    display: grid;
    grid-template-rows: 2fr 1fr 1fr 1fr 1fr 2fr 1fr; /* Proportional space for each element */
    gap: 10px;
    padding-left: 20px;
    background-color: antiquewhite;
    border: 1px solid #252525; /* Optional: Visual aid */
    width: 50%;
}
.product-description h2{
    margin-top: 15px;
    color: #0d0c2d;
    align-content: center;
    text-align: center;
    text-transform: uppercase;
}
.prodQty h4 {
    margin: 0;
}
.prodQty {
    display: flex;
    flex-direction: column; /* Ensure items are stacked vertically */
    align-items: flex-start; /* Align child elements (like .counter-container) to the left */
    gap: 10px; /* Optional: Space between child elements */
}
/* product Quantity Counter */
.counter-container {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    font-family: Arial, sans-serif;
}
.counter-container button {
    width: 40px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
button:hover {
    background-color: #e0e0e0;
}
#counter {
    font-size: 20px;
    min-width: 40px;
    text-align: center;
}
/* product Quantity counter completed */
.prodPrice{
    margin-top: 7px;
}
.addToWishlist {
    display: flex;
    align-items: center;
    width: 55px;              
    height: 55px;              /* Set a smaller height */
    font-size: 45px;           /* Set a smaller font size */
    padding: 5px 10px;         /* Adjust padding to make it smaller */
    background-color: #ee7b15; /* Button background */
    border: 1px solid #ccc;    /* Button border */
    color: white;             /*  colour of heart */
    border-radius: 5px;        /* Rounded corners */
    cursor: pointer;          /* Pointer on hover */
    text-align: center;          /* Align the text to the left */
    justify-content: center;
    margin-left: 0;            /* Ensure it aligns to the left of its container */
}

.addToWishlist:hover {
    background-color: #2e25e4; /* Darker background on hover */
}
.extraText{
    margin-top: 12px;
}
.addTOcart{
    align-items: center;
    margin-right: 10px;
    margin-bottom: 0;
}

/* On mobile */
@media (max-width: 600px) {
    .addToCart,
    .addToWishlist {
        padding: 12px 16px;
        font-size: 20px;
    }
}
.addTOcart button{
    width: 100%;              
    height: 55px;              /* Set a smaller height */
    font-size: 30px;           /* Set a smaller font size */
    padding: 10px 10px;         /* Adjust padding to make it smaller */
    background-color: #ee7b15; /* Button background */
    border: 1px solid #ccc;    /* Button border */
    color: white;             /*  colour of heart */
    border-radius: 15px;        /* Rounded corners */
    cursor: pointer;          /* Pointer on hover */
    text-align: center;          /* Align the text to the left */
    justify-content: center;
    margin-left: 0; 
}
.pickupText{
    text-align: center;
    margin-top: 0;  /* Remove any space above */
    margin-bottom: 25px;  /* Remove any space below */
    padding-top: 5px;  /* Optional: Add small padding for better alignment */

}

/* checkOut page */
.outHeader{
    height: 150px;
    width: 100%;
    background-color: #ee7b15;
}
/*.container{
    padding: 10px 10px;
    display: flex;
    width: 100%;
}
 .outLeft{
    flex: 1;
}
.outRight{
    flex: 1;
}
.outLeft ul{
    display: flex;
    list-style: none;
    flex-direction: row;
    gap: 25px;
}
.outLeft ul li{
    font-size: 1.5rem;
}
.outLeft ul li a{
    text-decoration: none;
    border-radius: 20px;
}
.outLeft ul li a:hover{
    color: black;
    background-color: rgb(218, 145, 44);
    
} */
/* General container styling */
.container {
    display: flex; /* Enables flexbox layout */
    flex-direction: row; /* Arrange children in a row */
    width: 100%; /* Full width */
    min-height: 100vh; /* Ensure it fills the viewport height */
    margin: 0 auto;
    box-sizing: border-box; /* Includes padding in width/height */
}

/* Left section styling */
.outLeft {
    flex: 1; /* Takes up 50% of the container */
    background-color: #f2f2f2; /* Optional: light gray background */
    padding: 20px; /* Add some spacing */
    box-sizing: border-box; /* Includes padding in width/height */
    display: flex;
    max-width: 50%; /* Ensure it doesn’t exceed half the container */

    flex-direction: column; /* Stack child elements vertically */
    align-items: flex-start; /* Align content to the left */
    justify-content: flex-start; /* Start content at the top */
        word-wrap: break-word; /* Break long words */
        overflow-wrap: break-word; /* Break long content */    
    
    overflow: hidden; /* Prevent content from overflowing */
}

/* Right section styling */
.outRight {
    flex: 3; /* Takes up 50% of the container */
    background-color: #fff; /* Optional: white background */
    padding: 20px; /* Add some spacing */
    box-sizing: border-box; /* Includes padding in width/height */
    display: flex;
    max-width: 50%; /* Ensure it doesn’t exceed half the container */

    flex-direction: column; /* Stack child elements vertically */
    align-items: flex-start; /* Align content to the left */
    justify-content: flex-start; /* Start content at the top */
    overflow: hidden; /* Prevent content from overflowing */
}

/* Styling for .outLeft's ul */
.outLeft ul {
    display: flex;
    flex-direction: row; /* Arrange items in a row */
    list-style: none;
    gap: 25px;
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.outLeft ul li {
    font-size: 1.5rem;
}

.outLeft ul li a {
    text-decoration: none;
    border-radius: 20px;
    padding: 5px 10px;
}

.outLeft ul li a:hover {
    color: black;
    background-color: rgb(218, 145, 44);
}

/* Ensure the inner divs align properly */
.outLeft > div {
    margin-top: 15px; /* Add space between divs */
    width: 100%; /* Stretch divs to full width */
}


.login{
    
    display: flex; /* Enables flexbox layout */
    flex-direction: column;
    justify-content: flex-start; /* Centers horizontally */
    align-items: center; /* Centers vertically */

    padding-top: 25px;
    height: 100vh; /* Optional: full viewport height */
}

/* logineed user's Link */
#userLinks{
    position: relative;
    margin-top: 10px;
}
#userLinks ul{
    display: flex;
}
#userLinks::before{
    content: "";
    background-color: rgb(19, 36, 222);
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.6;
}
#userLinks ul li{
    list-style: none;
    font-size: 1.3rem;
}
#userLinks ul li a{
    color: white;
     display: block;
     padding: 3px 9px;
     border-radius: 20px;
     text-decoration: none;
}
#userLinks ul li a:hover{
    color: black;
    background-color: white;
}
/* second section on inxex page for brands */
.brand{
    /* background-color: lightgray;

    margin: 10px, 10px;
    display: grid;
    grid-template-columns: repeat(5, auto);
   /* justify-content: center; */
   /* justify-items: center;
   gap: 10px; */ 
      /* background-color: antiquewhite; */
      background-color: #f6eded;
      border:solid;
      border-color: #0073e6;
      margin: 10px, 10px;
      display: grid;
      /* grid-template-columns: repeat(6, auto); */
  
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Dynamic grid */
      /* justify-content: center; */
     justify-items: center;
     gap: 15px;
     padding: 20px;
}
.brandTitle {
    text-align: left; /* Center-align the title */
    font-size: 28px; /* Set a larger font size */
    margin-bottom: 10px; /* Spacing below the title */
    margin-top: 10; /* Remove any default top margin */
    margin-left: 10px;
    padding: 0; /* Remove padding */
    color: #333; /* Title color */
    font-weight: bold; /* Bold title */
}

/* pop up box css starts */
.popup-box {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid #444;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1000;
    width: 80%;
    max-width: 400px;
    padding: 20px;
    text-align: center;
}

.popup-box h2 {
    margin: 0;
    font-size: 18px;
    color: #ee7b15;
}

.popup-box p {
    margin: 15px 0;
    font-size: 14px;
    color: green;
}
.popup-box img {
    display: block;
    margin: 15px auto; /* Center the image horizontally */
    max-width: 90%; /* Ensure the image fits within the popup box */
    height: auto; /* Maintain aspect ratio */
    box-sizing: border-box; /* Include padding and borders in the width */
}

.popup-box button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
}

.popup-box button:hover {
    background-color: #0056b3;
}

/* Overlay styling */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}
/* pop up box css ends */

/* footer css */

.footer {
    background-color: #4CAF50; /* Match the green background */
    color: white;
    padding: 20px 0;
}

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

.footer-section {
    flex: 1 1 200px;
    margin: 10px;
    text-align: left;
}

.footer-section h4 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}

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

.footer-section ul li {
    margin: 5px 0;
}

.footer-section ul li a {
    color: white;
    text-decoration: none;
    font-size: 14px;
}

.footer-section ul li a:hover {
    text-decoration: underline;
}

.social-icons a img,
.payment-icons img {
    width: 30px;
    height: 30px;
    margin: 5px;
    display: inline-block;
}

.payment-icons img {
    margin-right: 10px;
}