.pop-menu {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
.pop-menu { 
    position: absolute; /* Ensure it's positioned over other content */
    z-index: 9999; /* Highest z-index */
    width: 80%; 
    background: #fff; 
    /* position: absolute;  */
    overflow: hidden; 
    z-index: 99; 
    padding: 25px; 
    box-shadow: 0 15px 36px -12px rgba(0,0,0,0.5); 
    margin-top: 47px; 
    left: 0; 
    transition: all .3s ease; 
    visibility: hidden; 
    opacity: 0; 
    transform: translateY(15px);
} 
.pop-menu.ani { 
    visibility: visible; 
    opacity: 1; 
    /* transform: translateY(0px);  */
    overflow: initial;
} 
.pop-menu *, .pop-menu :before, .pop-menu :after {
    box-sizing: border-box;
}
.pop-menu :before {
    font-family: "Material Icons";
    position: absolute;
    font-size: 18px;
    color: #9d9a98;
    font-weight: 500;
}
/* check one  */
.pop-menu:after { 
    content: ''; 
    position: absolute; 
    background: #fff url('../images/bg/city-bg.webp');
    background-position: right bottom; 
    background-size: 460px; 
    width: 100%; 
    height: 72px; 
    animation: animatedBackground 80s linear infinite; 
    bottom: 0; 
    z-index: -1; 
    left: 0;
} 
.pop-menu .clopme  { 
    right: 0; 
    position: absolute; 
    top: 0; 
    font-size: 30px; 
    cursor: pointer; 
    color: #333;
} 
.pmenu-spri { 
    float: left; 
    width: 22%; 
    padding: 0 0 10px;
} 
.pmenu-cat { 
    float: left; 
    width: 78%; 
    border-left: 1px solid #d6d6d6; 
    padding: 0 0 20px 30px; 
    min-height: 460px; 
    overflow: hidden; 
    overflow-y: auto;
} 
/* here */
.dir-home-nav-bot { 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
    border-top: 1px solid #d6d6d6; 
    padding: 35px 15px 0; 
    font-weight: 600;
} 
.pmenu-cat h4  { 
    font-size: 20px; 
    font-weight: 600; 
    padding-bottom: 15px; 
    border-bottom: 1px solid #e2e2e2; 
    margin-bottom: 20px;
} 

.dir-home-nav-bot ul  { 
    margin-bottom: 0;
} 
li { 
    list-style-type: none;
} 
.pmenu-spri ul li  { 
    float: left; 
    width: 100%;
} 
.pmenu-spri ul li  { 
    transition: all .3s ease; 
    opacity: 0; 
    transform: translateX(-15px);
} 
.pop-menu.ani .pmenu-spri ul li  { 
    transition: all .3s ease; 
    opacity: 1; 
    transform: translateX(0px);
} 
.pop-menu.ani .pmenu-spri ul li:nth-child(1)  { 
    transition-delay: 0;
} 
.pop-menu.ani .pmenu-spri ul li:nth-child(2)  { 
    transition-delay: .1s;
} 
.pop-menu.ani .pmenu-spri ul li:nth-child(3)  { 
    transition-delay: .2s;
} 
.pop-menu.ani .pmenu-spri ul li:nth-child(4)  { 
    transition-delay: .3s;
} 
.pop-menu.ani .pmenu-spri ul li:nth-child(5)  { 
    transition-delay: .4s;
} 
.pop-menu.ani .pmenu-spri ul li:nth-child(6)  { 
    transition-delay: .5s;
} 
.pop-menu.ani .pmenu-spri ul li:nth-child(7)  { 
    transition-delay: .6s;
} 
.pop-menu.ani .pmenu-spri ul li:nth-child(8)  { 
    transition-delay: .7s;
} 
.pop-menu.ani .pmenu-spri ul li:nth-child(9)  { 
    transition-delay: .8s;
} 
.pop-menu.ani .pmenu-spri ul li:nth-child(10)  { 
    transition-delay: .9s;
} 
.pop-menu.ani .pmenu-spri ul li:nth-child(11)  { 
    transition-delay: 1s;
} 
.pmenu-cat ul li  { 
    float: left; 
    width: 25%; 
    padding: 0 10px 6px 20px; 
    position: relative;
} 
.dir-home-nav-bot ul li  { 
    border-right: 0 solid #dedede; 
    background: none; 
    float: left;
} 
.dir-home-nav-bot ul li:nth-child(1)  { 
    width: 58%; 
    font-weight: 500;
} 
.dir-home-nav-bot ul li:nth-child(2)  { 
    margin-right: 8px;
} 
a { 
    color: #007bff; 
    text-decoration: none; 
    background-color: transparent;
} 
.pmenu-spri ul li a  { 
    color: #000; 
    font-weight: 600; 
    font-size: 13px; 
    display: inline-block; 
    padding: 9px 20px; 
    width: 100%; 
    text-transform: uppercase; 
    position: relative;
} 
.pmenu-spri ul li a:hover { 
    color: #0b78cf; 
    text-decoration: underline; 
    padding-left: 25px;
} 
.pmenu-cat ul li a  { 
    color: #58677b; 
    font-size: 14px; 
    font-weight: 500; 
    transition: all .2s ease; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: pre; 
    display: inline-block; 
    width: 100%;
} 
.menu:after, .pmenu-cat ul li a::before,.al:after { 
    content: ''; 
    background: url(../svg/down-arrow.svg); 
    transition: all .5s ease;
} 
.pmenu-cat ul li a::before { 
    margin: 5px 0 0 -20px; 
    color: #9d9faa; 
    transition: all .2s ease; 
    width: 9px; 
    height: 9px; 
    transform: rotate(-90deg); 
    opacity: .6;
} 
.pmenu-cat ul li a:hover { 
    color: #1051b7; 
    text-decoration: underline; 
    transition: all .2s ease;
} 
.pmenu-cat ul li a:hover::before { 
    color: #1051b7; 
    transition: all .2s ease;
} 
.menu::after, .pmenu-cat ul li a::before, .al::after { 
    content: ''; 
    background: url(../svg/down-arrow.svg); 
    transition: all .5s ease;
} 
.dir-home-nav-bot ul li span  { 
    display: block; 
    font-size: 32px; 
    color: #6f6347; 
    padding-top: 0; 
    font-weight: 600;
} 
.dir-home-nav-bot ul li a  { 
    font-size: 14px; 
    margin-right: 10px; 
    height: inherit; 
    padding: 15px 15px 15px 25px; 
    color: #fff; 
    display: inline-block; 
    width: 100%; 
    font-weight: 500; 
    border-radius: 5px; 
    background: #8d18c0; 
    background: linear-gradient(39deg,#d90c55,#8d18ba 80%);
} 
img { 
    vertical-align: middle; 
    border-style: none;
} 
.pmenu-spri ul li a img  { 
    width: 30px; 
    margin-right: 15px;
} 
.pmenu-cat ul li a span  { 
    color: #97a8bf; 
    font-weight: 400;
} 
.dir-home-nav-bot ul li a i  { 
    vertical-align: sub; 
    color: #fff; 
    font-size: 20px; 
    padding-right: 5px;
} 
.nav-holder nav li a {
    padding: 10px 10px 27px;
}
.nav-holder nav li ul {
    top: 60px;
}
#megamenu {
    display: none; /* Hide the megamenu initially */
    top: 2%; 
    left: 10% !important;
    z-index: 1000; /* Make sure it's on top */
}

.scrolls{
    max-height: 400px;
    overflow-y: scroll;

}

/* Hide on screen sizes larger than 1024px (desktop) */
@media only screen and (min-width: 1024px) {
    .hide-on-pc {
        display: none;
    }
    .threerow{
        width: 33% !important;
    }
    .fwid{
        width: 50% !important;
    }
}


.search-header {
    display: flex;
    align-items: center; /* Aligns items vertically in the center */
    justify-content: space-between; /* Creates space between the heading and the input */
}

.search-header span {
    font-size: 20px; /* Adjust font size as needed */
    font-weight: bold;
    margin-right: 15px; /* Adds space between the text and the input */
}

#pg-sear {
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 50%; /* Adjust the width as needed */
    outline: none;
    transition: border-color 0.3s ease;
}

#pg-sear:focus {
    border-color: #007BFF; /* Change border color on focus */
}

#pg-sear::placeholder {
    color: #bbb;
    font-style: italic;
}

.fc{
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}

.ra{
    cursor: pointer;
    width: 100%;
    /* z-index: 3; */
    background-color: #384f95;
}



                .faded-background {
    background-color: rgba(0, 0, 0, 0.18); /* Semi-transparent black background */
    padding: 20px; /* Inner padding */
    border-radius: 8px; /* Optional: rounded corners */
    position: relative; /* Position for the pseudo-element */
    overflow: hidden; /* Ensure the pseudo-element stays within bounds */
}

.faded-background::before {
    content: '';
    position: absolute;
    top: -10px; /* Adjust as needed */
    left: -10px; /* Adjust as needed */
    right: -10px; /* Adjust as needed */
    bottom: -10px; /* Adjust as needed */
    background: linear-gradient(to all, rgba(0, 0, 0, 0.18), transparent); /* Faded effect */
    border-radius: 12px; /* Match this to the parent’s border-radius */
    z-index: -1; /* Place it behind the content */
}




.main-search-input-wrap {
    position: relative; /* Set the parent container to relative */
}

.suggestions {
    /* border: 1px solid #ddd; */
    background-color: white;
    position: absolute; /* Position it absolutely relative to the parent */
    z-index: 9999; /* Increase z-index to ensure it appears above other elements */
    width: calc(100% - 2px); /* Adjust width to account for border */
    max-height: 200px; /* Optional: Set a max height */
    overflow-y: auto; /* Optional: Enable scrolling if too many suggestions */
    left: 0; /* Align suggestions to the left */
    top: 100%; /* Position below the input */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); Add subtle shadow */
    border-radius: 4px; /* Optional: Add rounded corners */
    display: none; /* Hide suggestions by default */
}

.suggestion-item  {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.2s; /* Smooth transition */
    text-align: left; /* Align text to the left */
    font-size: 16px; /* Increase font size */
    font-weight: 400; /* Make the text bold */
    color: #333; /* Set a darker color for better contrast */
}

.suggestion-item:hover {
    background-color: #f0f0f0; /* Highlight on hover */
}

.loading-spinner {
    position: absolute;
    right: 12px; /* Adjust to fit your design */
    top: 25%;
    transform: translateY(-50%);
    width: 30px; /* Size for visibility */
    height: 30px; /* Size for visibility */
    border: 4px solid rgba(255, 255, 255, 0.2); /* Light transparent border */
    border-top: 4px solid #3498db; /* Primary color */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* Smooth spinning */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Pulse effect for more dynamism */
.loading-spinner:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    background-color: rgba(52, 152, 219, 0.5); /* Light primary color */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: pulse 1.5s ease-in-out infinite; /* Pulse animation */
}
@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}


.listing-filters {
    display: flex;
    align-items: center;
    overflow: hidden; /* Prevents overflow outside the container */
    margin-bottom: 20px; /* Adds spacing below the filters */
}
.static-categories {
    margin-right: 20px; /* Space between "All Categories" and the scrollable part */
    white-space: nowrap; /* Prevent text wrapping */
}
.scrollable-categories {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* Horizontal scroll for dynamic categories */
    white-space: nowrap;
    flex: 1; /* Allow the scrollable part to take the remaining width */
    scroll-behavior: smooth; /* Smooth scrolling behavior */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.scrollable-categories::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}
.scrollable-categories a {
    flex: 0 0 auto; /* Prevent flex items from growing */
    padding: 10px 15px;
    margin-right: 5px;
    text-decoration: none;
    background: #f8f8f8; /* Background color for better visibility */
    border-radius: 5px; /* Rounded corners */
    transition: background 0.3s ease; /* Transition for hover effect */
}
.scrollable-categories a:hover {
    background: #e0e0e0; /* Darker background on hover */
}
/* Container for the suggestions list */
.suggestions-list {
margin-top: 13%;
position: absolute;
width: 100%;
background-color: white;
border: 1px solid #ddd;
border-radius: 4px;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
display: none;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
/* Individual suggestion item */
.suggestion-item {
border-bottom: 2px solid #cfcfcf;
padding: 10px;
font-size: 14px;
color: #333;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* Hover effect for suggestions */
.suggestion-item:hover {
background-color: #f1f1f1;
}
/* Active/Highlighted suggestion when using arrow keys (if implemented) */
.suggestion-item.active {
background-color: #ececec;
font-weight: bold;
}
/* Scrollbar customization for modern browsers */
.suggestions-list::-webkit-scrollbar {
width: 8px;
}
.suggestions-list::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius: 10px;
}
.suggestions-list::-webkit-scrollbar-thumb:hover {
background-color: #ccc;
}
/* No suggestions text */
.no-suggestions {
padding: 10px;
font-size: 14px;
color: #999;
text-align: center;
}



.category-icon{
    width: 30px !important ;
    height: 30px !important ;
}