 
    @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");


    *{
          margin: 0;
      padding: 0;
      box-sizing: border-box;
        list-style: none;
    }
   
.categories-wrapper {
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.categories-list {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 20px 0;
}

.category-item {
    min-width: 200px;
    text-align: center;
}

.category-item img {
    width: 200px;
    height: 150px;
    border-radius: 10px;
    margin-bottom: 10px;
    object-fit: cover;
}

.category-item span {
    display: block;
    font-size: 16px;
    color: #333;
}

.category-title {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}



.close-button {
        background: none;
        border: none;
        font-size: 24px;
        color: #aaa;
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .close-button:hover {
        color: #000;
    }
    .Grating {
        position: relative; /* Needed to position the close button */
    }



.left-scroll {
    left: 0;
}

.right-scroll {
    right: 0;
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
    .category-item {
        min-width: 200px;
    }

    .category-item img {
        width: 200px;
        height: 150px;
    }
}


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

.inner-div {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    text-align: center;
    flex: 1 1 calc(33.33% - 20px); /* 3 divs per row on desktop/tablet */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.inner-div img {
    width: 150px;
    height: 100px;
    border-radius: 5px;
}

.inner-div p {
    font-weight: bold;
    margin-top: 10px;
}

/* Responsive design */
@media (max-width: 768px) {
    .inner-div {
        flex: 1 1 calc(50% - 20px); /* 2 divs per row on mobile */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .inner-div {
        flex: 1 1 calc(33.33% - 20px); /* 3 divs per row on tablets */
    }
}

@media (min-width: 1025px) {
    .inner-div {
        flex: 1 1 calc(33.33% - 20px); /* 3 divs per row on desktop */
    }
}


/*ending category list styling */
    
    #category{
			border-radius: 10px; 
	height: 30px;
    border: none;
	outline: none;
    
		
	margin-left: 8px; 
	box-shadow: 1px 2px 3px #bababa;
		}
    
    .description{
        margin: 0;
        padding: 0;
    }
    
    .price{
        font-size: 15px;
        font-weight: bold;
         color: #fc6044;
		margin-left: 5px;
    }
    
    
    .listings_ul_ist {
         display: flex;
        flex-direction: row;
        flex-wrap: wrap; /* Added to wrap items onto the next line */
        overflow-x: scroll;
        
    }
    
    .listings_ul_ist::-webkit-scrollbar{
        display: none;
    }
    



    .btns{
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
       transform: translatey(100px);
        height: 40px;
    }
    
    .wp{
         display:flex;
         text-align: center;
        justify-content: center;
        align-items: center;
        border: none;
        width: 120px;
        height: 42px;
        background: white !important;
        color:  #32a604;
		margin-top: 10px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        
		cursor: pointer;
		transform: translateY(-5.5px);
        
    }

.logged {
	transform: translateY(-5.5px);
	margin-top:10px;
}
    
    .wp a {
        color: black;
        font-size: 15px;
    }
    
    .bm_user_selector__control .css-13cymwt-control{
        display: none;
    }
    
    .wp img{
        height: 60px;
        width: 60px;
        margin-right: 5px;
        
    }
    
    
    .listings_ul_list li {
		display: flex ;
		flex-direction: row;
        list-style: none;
        border-radius: 20px;
        box-shadow: 1px 2px 8px #e3e3e3;
        padding: 10px;
        margin-bottom: 20px;
       
        box-sizing: border-box;
        flex: 1 0 calc(33.333% - 10px);
        margin-right: 10px;
    }


.gridd {
	
     /* Set a height for the divs */
    background-color:white; /* Just for visualization */
    margin: 0 5px; /* Optional margin between divs */
}

.frist, .last {
	
    flex: 1; /* Make first and last divs equal width */
}

.last {
	justify-content: center;
	align-items: center;
	border-left: 0.5px solid black;
}

.second {
    flex: 2; 
	display: flex;
	flex-direction: column;
	/* Make middle div twice as wide as the others */
}

.npric{
	display: flex;
	flex-direction: row ;
}

.additional_data{
	display: flex;
	flex-direction: row ;
}

.mg_l{
	margin-left: 5px;
}

    .prop {
        display: flex;
        text-align: center;
    }
    
    .prop img {
        height: 100px;
        width: 100px;
        margin-right: 10px;
    }
    
    
    .prop .name {
        padding-right: 10px;
        font-size: 25px;
		font-size: bold;
    }
    
    .title {
        font-size: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .revdate{
        display: flex;
        flex-direction: row;
    }
    .revdate p{
        margin: 5px;
        padding: 2px;
        padding-left: 7px;
        padding-right: 7px;
        border-radius: 8px;
        background: #f0f2f0;
    }
    .store_link {
        border: none;
        background: #e3e3e3;
        color: #116b34;
        font-size: 15px;
        padding: 5px 8px 5px 8px;
        font-weight: bold;
        border-radius: 8px;
    }
    
    .message_link{
		
        margin-bottom:20px;
    }
    
    #redirectButton{
        border: none;
        background: #32a604;
        
        font: 2em;
		
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
        
        
    }

.PaymentSolt{
	margin-bottom: 8px;
}
    
.paycontent{
	font : 16px;
	padding: 5px;
	border: 1px solid black;
	border-radius: 20px;
	margin-top: 10px;
	margin: 5px;
}

/*review btn*/
   
.reviewform {
    background-color: #4CAF50; /* Green background */
    border: none; /* Remove default border */
    color: white; /* White text color */
    padding: 6px 12px; /* Padding for a comfortable size */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make the button inline-block */
    font-size: 14px; /* Increase font size */
    margin: 10px 2px; /* Small margin around the button */
    cursor: pointer; /* Show a pointer cursor on hover */
    border-radius: 25px; /* Rounded corners */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition effects */
}

.reviewform:hover {
    background-color: #45a049; /* Darker green on hover */
    transform: scale(1.05); /* Slightly increase size on hover */
}

.reviewform:active {
    background-color: #3e8e41; /* Even darker green when clicked */
    transform: scale(0.98); /* Slightly decrease size when clicked */
    box-shadow: 0 5px #666; /* Add a shadow */
}

.reviewform:focus {
    outline: none; /* Remove default outline */
}

    
    /*subcategories list */
    
    .subcategories-list{
        display: flex;
        flex-direction: row;
    }
    
    .subcategories-list li{
        margin: 5px;
        border: 1px solid #000000;
        padding: 2px 8px 2px 8px;
        color: white;
        font-size: 10px;
        font-weight: bold;
        color: #000000;
        border-radius: 10px;
    }
    
    .cont {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    
    .contp {
        margin: 10px;
        font-size: 15px;
        font-weight: bold;
    }
    
    .timeSlot {
        display: inline-block;
        margin: 10px;
        font-size: 15px;
        text-align: center;
        background-color: white;
        padding: 8px;
        border-radius: 10px;
        border: 1px solid black;
        width: calc(20% - 20px); 
        box-sizing: border-box;
    }
    
    
    /*filter optimization */
    
    #filter_form{
        display: flex;
        flex-direction: column;
    }
    
    .formBox{
        display: none;
    }
    
    .fchange{
        border: none;
        outline: none;
    }
    .prop {
        display: flex;
          text-align: left;
            align-items: center;
            justify-content: center;
    }
    
    /* Rating styles*/
    .rating {
      display: flex;
      align-items: center;
      -moz-column-gap: 0.75rem;
      column-gap: 0.75rem;
      background-color: #fff;
      padding: 1rem 1rem;
      border-radius: 1rem;
      border: 1px solid black;
      padding-top: 17px;
      text-align: center;
      align-items: center;
      justify-content: center;
        height: 30px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .rating__stars {
      position: relative;
      display: inline-block;
      width: -webkit-max-content;
      width: -moz-max-content;
      width: max-content;
    }
    .rating__number {
      display: flex;
      align-items: center;
      -moz-column-gap: 0.75rem;
           column-gap: 0.75rem;
      font-size: 1rem;
      font-weight: 600;
    }

   #bg_filter{
	   display: flex;
	 background: #68ad4d;
	   height: 40vh;
	   width: 100vw;
	   justify-content: center;
	   align-items: center;
	   text-align: center;
  }
    
#bg_filter input{
	border-radius: 10px; 
	height: 30px;
    border: none;
	outline: none;
	margin-left: 8px; 
	
	box-shadow: 1px 2px 3px #bababa;
}


#subbtn {
  background: #116b34;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-size: 16px;
  padding-left: 10px;
  padding-right: 10px; 
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#subbtn:hover {
  background: #76bd3c;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

#subbtn:active {
  background: #76bd3c;
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#locationForm{
	display: flex;
}

#listing_text{
	display: flex;
	flex-direction: column;
	color: black;
	text-align: center;
	justify-content: center;
	align-items: center;
}
    
#listing_text h2{
	font-size: 20px;
	color:white;
}

#listing_text p{
	font-size: 12px;
	color:white;
}
    @media screen and (max-width: 480px) {
        
		.npric{
			justify-content: space-between ; 
		}
		
		
		.additional_data p{
	  font-size:  15px ;
			width: 100%;
}
		
		
		#locationForm{
	display: flex;
			flex-direction: column;
			width: 100vw;
}
		
		.message_link{
			font-size: 11px;
			width: 110px;
        height: 31px;
			
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
			transform: translatey(10px);
		}
		
		#category{
			border-radius: 10px; 
	height: 30px;
    border: none;
	outline: none;
    margin-top: 8px;
			margin-bottom: 8px;
	margin-left: 8px; 
	box-shadow: 1px 2px 3px #bababa;
		}
            
       #subcategory1{
			border-radius: 10px; 
	height: 30px;
    border: none;
	outline: none;
    margin-top: 8px;
			margin-bottom: 8px;
	margin-left: 8px; 
	box-shadow: 1px 2px 3px #bababa;
		}
        
        
    
        
        .listings_ul_list li {
			display: flex;
			flex-direction: column;
        list-style: none;
        font-size: 7px;
        border-radius: 8px;
        background-color: rgb(255, 255, 255);
        padding: 5px;
        margin-bottom: 20px;
        box-sizing: border-box;
        width: 100%;
        transform: translatex(-15px);
    }
        
        .prop {
        display: flex;
          text-align: left;
            
        
    }
        
      .title {
        font-size: 20px;
    }
        
        .prop img {
        height: 60px;
        width: 60px;
        margin-right: 10px;
    }
        
       .name {
        font-size: 20px;
            font-weight: bold;
    }
        
        .price{
			 transform: translatey(7px);
        transform: translatex(6px);
            display: flex;
        font-size: 15px;
          font-weight: bold;
         color: #fc6044;
    }
        
      
        
        .revdate p{
        margin: 5px;
        padding: 2px;
        padding-left: 7px;
        padding-right: 7px;
        border-radius: 8px;
        background: #f0f2f0;
            font-size: 10px;
    }
        
        
        .cont {
        display: flex;
        flex-wrap: wrap;
        gap: 1px;
        margin-bottom: 20px;
    }
    
        .timeSlot {
        font-size: 12px;
            font-weight: bold;
        background-color: white;
        padding: 8px;
            text-align: center;
        margin: 5px;
        border-radius: 10px;
        box-sizing: border-box;
            width: auto;
    }
        
        
        .des{
			margin-top: 5px;
            font-size: 15px;
        }
		
		.btns{
        display: flex;
        flex-direction: row;
        text-align: center;
        align-items: center;
			width: 90%;
		justify-content: space-between;
        height: 60px;
		margin-top: 50px;
		transform:translatey(-20px);
    }
        
        
        .wp {
       display:flex;
         text-align: center;
        justify-content: center;
        align-items: center;
        border: none;
        width: 120px;
        height: 42px;
        background: transparent !important;
        
		margin-top: 10px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        
		cursor: pointer;
		transform: translateY(-5.5px);
	    transform: translateX(50px);
        
        }
        .wp a{
            font-size: 15px;
			color: black;
			background: transparent;
        }
        
   
		.wp img{
			height: 50px;
			width: 50px;
		} 
		/*Review system style*/
		
		.rating {
    display: none;
    direction: rtl;
    unicode-bidi: bidi-override;
    height: 20vw;
    width: 50vw;
    border-radius:10px;
    box-shadow: 1px 2px 5px black;
    background-color: white;
}


		
		/*end of style */
        
        .btns{
        display: flex;
        flex-direction: row;
        text-align: center;
        align-items: center;
        height: 60px;
			width: 90%;
			margin-top: 50px;
			transform:translatey(-20px);
    }
		.last 
		{
border: none;}
    }
    


/*review popup */

 .reviewshoww {
            background-color: black;
            color: white;
            padding: 10px 10px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 10px;
        }

.review-btn:hover{
	background: green;
}


