:root{
    --web-background-color: white;
    --button-color: #352a10;
    --main-color: white;
    --search-bar-color: #a68c37;
    /* the brown #352a10 */
    /* the background #fcfcfc */
    /* the gold #a68c37 */
}
html{
	width: 100% !important;
	overflow-x: hidden !important;
}
a{
	text-decoration: none;
}
.bx-active{
	color: var(--search-bar-color);
}
.button-theme-color{
	color: var(--search-bar-color);
	background-color: white;
}
.top-nav1{
	display: flex;
	justify-content: space-between;
	width: 100%;
	background-color: var(--search-bar-color);
}
.top-nav1 div address h5{
	font-size: 15px;
	color: white;
}
.left_part{
	align-items: center;
}
.top-nav2{
	padding-bottom: 20px !important;
	padding-top: 1rem;

}
.logo{
	width: 14rem;
	height: initial;
	overflow: hidden;
}
.logo img{
	width: 100%;
	height: initial;
}
.search_and_category{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:  1rem;
	
}
.search_bar{
	width: 100%;
	height: 26px;
	display: flex;
	justify-content: center;
}
.search_bar input{
	flex-grow: 1;
	padding-left: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border: solid 1px var(--search-bar-color);
	border-right: none;
	width: 50vw;

}
.search_bar button{
	padding: 1rem 1rem 1rem 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 1px var(--search-bar-color);
	border-left: none;
}
.other a{
	font-size: 16px;
}
.customer-care-icon{
        mask: url("assets/icon/customer-care.png") center/contain no-repeat;
        -webkit-mask: url("assets/icon/customer-care.png") center/contain no-repeat;
        width: 16px;
        height: 16px;
        background: white;
    }
 
 .sfs a{
 	font-size: 13px;
 }
 .sfs a.active{
 	color: var(--search-bar-color);
 	border:  none;
 	border-bottom: solid 1px var(--search-bar-color);
 }

 .sold_icon{
        mask: url("assets/icon/Sold-Out-PNG-File.png") center/contain no-repeat;
        -webkit-mask: url("assets/icon/Sold-Out-PNG-File.png") center/contain no-repeat;
        width: 16px;
        height: 16px;
        background: red;
    }
  .available_icon{
        mask: url("assets/icon/available.png") center/contain no-repeat;
        -webkit-mask: url("assets/icon/available.png") center/contain no-repeat;
        width: 16px;
        height: 16px;
        background: green;
    }

.product_arrangement .card{
	width: 250px;
}
.product_arrangementb .card{
	width: 220px;
}
.bxm{
	display: none;
}
.dxx{
	width: 75%;
	height: 400px;
}
#b-ad{
	position: relative;
	transition: all 0.5s ease-in;
	gap:  10vw;
	min-width: 100%;
	
	display: flex;
	grid-row-start: 100%;
	grid-row-end: 100%;
	/* overflow-x: hidden; */
	
}
.slider{
	width:30px;
	height:30px;
	border-radius:50%;
	border:solid 1px white;
	background-color: white;
}
.slider:hover{
	border-color: white;
}
.slider.selected{
	background-color: var(--button-color);
}
.b-ad-m{
	width: 100%;
	/*border: solid 1px black;*/
	justify-content: center;
	/* overflow-x: hidden; */
	
}
.b-ad-m img{
	min-width: 40%;
    width: 20rem;
    		
    	}
.b-ad-m div{
    		width: 55vw;
    		
    	}
 .get_bigger{
 	animation: get_bigger 0.5s linear;
 	transition: all 0.5s ease-in;
 }
 @keyframes get_bigger{
 	0%{
 		display: none;
 		width: 0%;
 	}
 	50%{
 		display: block;
 		width: 30%;
 	}
 	100%{
 		display: block;
 		width: 100%;
 	}
 }
 .get_smaller{
 	animation: get_smaller 0.5s linear;
 	transition: all 0.5s ease-in;
 }
 @keyframes get_smaller{
 	0%{
 		display: block;
 		width: 100%;
 	}
 	50%{
 		display: block;
 		width: 30%;
 	}
 	100%{
 		display: none;
 		width: 0%;
 	}
 }
 .search_bar button:hover{
	background-color: var(--search-bar-color);
	color: white;
 }

 .slider{
	width: 10px !important;
	height: 10px !important;
}
.product_arrangement{
	columns: 300px;
	display: grid;
	grid-template-columns: auto auto auto auto auto;
}
.product_arrangementb{
	display: grid;
	grid-template-columns: auto auto auto auto;
}
.product_arrangement a{
	overflow-x: auto;
}

.product_arrangement .card:hover{
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5) !important;
}
.product_arrangementb .card:hover{
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5) !important;
}

    @media screen and (max-width: 800px){
		.product_arrangement a{
			overflow-x: hidden;
		}
    	.product_arrangement .card{
    		width: 100%;
			padding: 1px 1px 1px 1px !important;
			
			overflow: hidden !important;
    	}
		.product_arrangement .card:hover{
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5) !important;
		}
    	.product_arrangement{
			gap: 0 !important;
			padding-left: 0 !important;
			grid-template-columns: auto auto;
			place-items: center;
		}

		.product_arrangement .card .card-img-top{
    		width: 100% !important;
    	}

		.product_arrangement .card .card-img-top img{
			width: 100% !important;
			height: 100% !important;
		}

		.product_arrangementb .card{
    		width: 100%;
    	}
		.product_arrangementb{
			gap: 1 !important;
			padding-left: 0 !important;
			grid-template-columns: auto auto;
			place-items: center;
		}
    	.top-nav1{
    		display: none;
    	}
		.search_bar{
			width: 100vw;
			padding-left: 20vw;
			padding-bottom: 70px;
			padding-top: 50px;
		}
    	.search_bar input{
    		width: 800px;
			height: 50px;
			display: none;
			border: solid 2px var(--search-bar-color);
    	}
		.search_bar button{
    		width: 100px;
			height: 50px;
			display: none;
			border: solid 2px var(--search-bar-color);
    	}
    	.sfs .btn{
    		display: none;
    	}
    	.bxm{
    		display: flex;
    	}
    	.b-ad-m{
    		
    		width: calc(100vw - 3rem);
    	}
    	.b-ad-m div{
    		width: 100vw;
    	}
    	.b-ad-m img{
    		width: 100vw;
    	}
    	.dxx{
    		width: 100%;
    		height: 150px;
    	}
		.top-nav2{
			flex-direction: column !important;
		}
		.cxs{
            display: none;
          }
		  .logo{
			display: none;
		  }
		  .top-nav2{
			display: none;
		  }

		  .col-md-12{
			padding-left: 0px !important;
			padding-right: 0px !important;
		}
		.product_description{
			font-size: 0.9rem !important;
			text-transform: capitalize;
		}
		.card-body{
			width: 150px !important;
		}
		.card-body p{
			font-size: 0.9rem !important;
		}

    }

    @media screen and (max-width: 600px){
    	.product_arrangement .card{
    		width: 100%;
    	}
		.product_arrangement{
			gap: 1 !important;
			padding-left: 0 !important;
		}
		.product_arrangement .card img{
			width: 100% !important;
			height: 100% !important;
		}

		.product_arrangementb .card{
    		width: 100%;
    	}

		.product_arrangementb{
			gap: 1px !important;
			padding-left: 0 !important;
			width: 100%;
		}

		.search_bar input{
    		width: 400px;
			height: 50px;
			display: none;
			border: solid 2px var(--search-bar-color);
    	}
		.search_bar button{
    		width: 100px;
			height: 50px;
			display: none;
			border: solid 2px var(--search-bar-color);
    	}
    	
    	.b-ad-m{
    		flex-wrap: wrap-reverse;
    		width: calc(100vw - 3rem);
    	}
    	.b-ad-m div h1{ 
    		width: 100vw;
    		
    	}
    	.b-ad-m img{
    		width: 100vw;
    		height: initial;
    	}
    	#b-ad{
	
	
}
.logo{
	display: none;
  }
.top-nav2{
	flex-direction: column !important;
	display: none;
}

.slider{
	width: 10px !important;
	height: 10px !important;
}


    }
    
.card-img-top input{
	max-height: initial !important;
}

.trending_products{
	
	scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.trending_products a{
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	scroll-snap-align: start;
}
.trending_products a img{
	max-width: 200px !important;
}