/* Keyframe animation for sliding in */
    @keyframes slideIn {
      0% {
        left: -220px; /* Start off-screen to the left */
      }
      100% {
        left: 10px; /* Final position */
      }
    }

    #customMenuPanel {
      display: none;
    position: fixed;
    bottom: 60px;
    left: 0;
    right: -220;
    top: 0;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
      animation: none; /* No animation by default */
    }

    #customMenuPanel.visible {
      display: block;
      animation: slideIn 0.5s ease-in-out; /* Apply animation when visible */
    }

    .menuPanelHeader {
      display: flex;
     
      align-items: center;
      padding: 0.5rem 1rem;
      font-weight: bold;
      border-bottom: 1px solid #dee2e6;
      background-color: #f8f9fa;
    }

    
  .menuCloseBtn {
    float: right;
    cursor: pointer;
    font-size: 1.5rem;
  }

    .menuPanelItem {
      padding: 0.5rem 1rem;
      display: block;
      text-decoration: none;
      color: #212529;
    }

    .menuPanelDivider {
      height: 1px;
      background-color: #dee2e6;
      margin: 0.5rem 0;
    }

    /* 👇 Hide menu panel and button on large screens (992px and up) */
    @media (min-width: 992px) {
      .fixed-bottom {
        display: none !important;
      }
    }
  
  
    /* .search-heading */


    .search-heading {
      font-size: 2rem;
      font-weight: lighter;
      text-align: center;
      color: #0094ff;
      margin: 40px 0 20px;
      font-family: 'Orbitron', sans-serif; /* or any futuristic font */
    }

    .search-bar {
      background-color: #e6f3fe;
      border-radius: 30px;
      padding: 10px 20px;
      max-width: 100%;

      margin: 0 auto;
      display: flex;
      align-items: center;
      border: 1px solid #d4e6f1;
    }

    .search-bar input {
      border: none;
      background: transparent;
      flex: 1;
      outline: none;
      font-style: italic;
    }

    .search-bar i {
      color: gray;
      font-size: 1.2rem;
    }

    .search-bar input::placeholder {
      color: #666;
    }

    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');
   

    /* popular-products */
    .popular-products {
      padding: 40px 0;
    }

    .popular-products h2 {
      text-align: center;
      font-weight: bold;
      color: #3d2e1e;
      margin-bottom: 30px;
    }

    .scroll-wrapper {
      display: flex;
      gap: 1rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 10px;
    }

    .scroll-wrapper::-webkit-scrollbar {
      height: 8px;
    }

    .scroll-wrapper::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 4px;
    }

    .product-card {
      flex: 0 0 auto;
      width: 180px;
      background-color: #fff;
      border-radius: 15px;
      overflow: hidden;
      transition: transform 0.2s;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      scroll-snap-align: start;
    }

    .product-card:hover {
      transform: scale(1.02);
    }

    .product-card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }

    .product-title {
      padding: 12px;
      text-align: center;
      font-weight: 500;
      color: #000;
    }
  
  .wall-decor-section {
      padding: 40px 0;
    }

    .wall-decor-section h2 {
      text-align: center;
      font-weight: bold;
      margin-bottom: 40px;
      color: #000;
    }

    .decor-card {
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      text-align: center;
      transition: transform 0.2s;
    }

    .decor-card:hover {
      transform: scale(1.03);
    }

    .decor-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 10px;
    }

    .decor-title {
      font-weight: 500;
      margin-top: 12px;
      color: #000;
    }

    .decor-price {
      color: #007bff;
      font-weight: 500;
      margin-bottom: 16px;
    }
    /* desk */
     .dd-title {
      text-align: center;
      font-weight: bold;
      font-size: 2rem;
      margin: 30px 0 20px;
      color: #6b2c38;
    }
    .dd-card {
      background-color: white;
      border: none;
      border-radius: 8px;
      padding: 10px;
      text-align: center;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      height: 100%;
    }
    .dd-img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 8px;
    }
    .dd-name {
      font-weight: 600;
      margin-top: 10px;
      font-size: 1rem;
      color: #333;
    }
    .dd-price {
      font-size: 0.95rem;
      color: #d63384;
    }
    .dd-strike {
      text-decoration: line-through;
      color: gray;
      font-size: 0.85rem;
      margin-right: 5px;
    }
    .dd-container {
      max-width: 1200px;
      margin: auto;
      padding-bottom: 40px;
    }

    .our-vision-box {
      background-color: #fff;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .homegrown-box {
      background-color: #000;
      color: #fff;
      border-radius: 15px;
      padding: 30px;
      height: 100%;
    }
    .homegrown-box h4 span {
      color: #f99c1c;
    }
    .homegrown-box .divider {
      border-top: 1px solid #fff;
      margin: 10px 0;
    }
    .highlight-icon {
      width: 80px;
      height: 40px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }
    .stats-box h5 {
      font-weight: bold;
    }
     .delivery-box {
      background-color: #eaf7f8;
      padding: 10px;
      border-radius: 15px;
    }

    .form-control {
      border-color: #20b2aa;
      border-right: none;
      border-radius: 0.375rem 0 0 0.375rem;
      box-shadow: none;
    }

    .btn-check {
      background-color: #20b2aa;
      color: #fff;
      border-radius: 0 0.375rem 0.375rem 0;
      border-color: #20b2aa;
    }

    .btn-check:hover {
      background-color: #1aa095;
    }
.submenuitem{
margin-left:20px;
	display:none
}
.search-bar-container{
	
	border-bottom:1px solid rgb(0,0,0,0.3);
	border-left:1px solid rgb(0,0,0,0.3);
	border-right:1px solid rgb(0,0,0,0.3);
	border-radius:30px;
	position:relative;
	max-width:100%;
	
	
}
.search-bar-content{
padding:20px;
	display:none;
	height:300px;
	overflow-y:scroll;
	position:absolute;
	background:white;
	box-shadow:0 0 10px rgb(0,0,0,0.3);
	z-index:99999;
	width:100%;
	border-radius:1rem
	
}
.search-bar-main-content hr{
margin:10px
}
.search-bar-main-content .search-bar-link{
	text-decoration:none;
	color:rgb(0,0,0,0.7);
	font-size:15px;
}
.orderPopupDiv{
height:fit-content;
width:fit-content;
background:White;
position:fixed;
bottom:20px;
right:20px;
box-shadow:0 0 20px rgb(0,0,0,0.3);
border-radius:0.5rem;
padding:10px;
padding-right:30px;
	z-index:9999;
	display:none
}

.orderPopupDiv .orderPopupInnerDiv{
display:flex;
} 
.orderPopupDiv img{
height:80px;
width:80px;
border-radius:100%;
object-fit:cover;
	margin: 0 10px 0 0
}

.orderPopupDiv .content .title{
font-size:18px;
font-weight:500
}
.orderPopupDiv .content .product{
font-size:15px;
}
.orderPopupDiv .content .time{
font-size:15px;
}
.orderPopupDiv .content .time i{
color:green
}
.orderPopupDiv .content a{
color:dodgerblue;
	text-decoration:none;
	font-weight:600
}
.orderPopupDiv .orderPopupCloseDiv{
	cursor:pointer;
position:absolute;
	right:10px;
	top:10px;
	font-size:20px
	
}
		@media only screen and (max-width:500px) {
	.orderPopupDiv{
		bottom:150px
		
			}
}
		@media only screen and (max-width:400px) {
	.orderPopupDiv{
		right:0px;
		width:90%;
	}
	.orderPopupDiv .content .title{
		font-size:14px
	}
			.orderPopupDiv .content .product{
		font-size:12px
	}
			.orderPopupDiv .content .time{
		font-size:12px
	}
			.orderPopupDiv img{
		height:50px;
		width:50px;
	}
			
}