/* mobile css */
@media (min-width: 992px) {  /* Remove Media query to enable in responsive */

	.opacity-on-hover .menu-container > .menu-item > .menu-link {
		transition: color .3s ease;
		color: #111 !important;
	}
  
	.opacity-on-hover .menu-container:hover > .menu-item:not(:hover):not(.current) > .menu-link { color: #D5D5D5 !important; }
  
  }
.logo {
  display: flex;
  align-items: center; /* Vertically center the logo */
}


.loader__container {
	 --dot-size: 15px;
	 --bs-white-rgb: 255, 255, 255;
	 position: fixed;
	 inset: 0;
	 background-color: rgba(255, 255, 255, 0.5);
	 backdrop-filter: blur(1rem);
	 z-index: 999999;
	 display: flex;
	 place-items: center;
	 place-content: center;
	 gap: calc(var(--dot-size) / 4);
 }

.loader__dot {
	width: var(--dot-size);
	height: var(--dot-size);
	aspect-ratio: 1 / 1;
	border-radius: calc(var(--dot-size) / 2);
	background-color: var(--bs-primary);
	animation: slide 1.5s infinite;
}

.loader__dot:nth-child(1) {
	animation-delay: 0.1s;
	background: #28e200;
}

.loader__dot:nth-child(2) {
	animation-delay: 0.2s;
	background: #ff251b;
}

.loader__dot:nth-child(3) {
	animation-delay: 0.3s;
	background: #f9dd05;
}

.loader__dot:nth-child(4) {
	animation-delay: 0.4s;
	background: #00bfa3;
}

.loader__dot:nth-child(5) {
	animation-delay: 0.5s;
	background: #7803e9;
}

@keyframes slide {
	0% {
		scale: 1;
	}
	50% {
		scale: 2;
		opacity: 0.3;
	}
	100% {
		scale: 1;
	}
}

/* Hide the loader after 5 seconds */
.hidden {
	display: none;
}

.logo img {
  max-height: 50px; /* Adjust the height as needed */
}
.border-add{
  border:1px solid #E1E4ED;
  border-radius: 10px !important;
}
.card{
	border:1px solid #E1E4ED;
  	border-radius: 20px !important;
}



.owl-dots{
	display: none !important
}

.sub-heading{
  font-size: 30px !important;
  font-weight: 800 !important;
}

.cat-text{
	font-size: medium !important;
}

#carousel-tabs.tabs,
		#carousel-tabs .tab-content {
			--cnvs-tab-padding-width: 0;
			--bs-nav-link-padding-y: .75rem;
			--bs-nav-link-font-size: .9125rem;
			--bs-nav-link-font-weight:	400;
			--bs-nav-tabs-border-width: 0;
			--bs-nav-link-color: var(--cnvs-contrast-1000);
			--bs-nav-link-hover-color: var(--cnvs-contrast-900);
			--bs-nav-tabs-link-active-bg: rgba(var(--bs-danger-rgb), 0.1);
			--bs-nav-tabs-link-active-color: var(--bs-danger);
			--cnvs-tabs-bg-color:rgba(var(--cnvs-contrast-rgb), 0.04);
		}

		.dark #carousel-tabs.tabs,
		.dark #carousel-tabs .tab-content {
			--bs-nav-tabs-link-active-bg: rgba(var(--bs-danger-rgb),1);
			--bs-nav-tabs-link-active-color: var(--bs-light);
		}

		#carousel-tabs .nav-link:not(.active) {
      border: 2px solid #2C96FF;
      border-radius: 30px;
		}

		#carousel-tabs .nav-link {
			border-radius: var(--bs-border-radius);
			font-weight: 500;
		}

		/* #carousel-tabs .nav-link.active {
			font-weight: 600;
      font-size: 18px !important;
		} */

		.carousel-blur-left::before,
		.carousel-blur-right::after {
			--cnvs-carousel-blur-size: 70px;
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: auto;
			width: var(--cnvs-carousel-blur-size);
			height: 100%;
			z-index: 1;
			/* background: linear-gradient(to right, var(--cnvs-body-bg) 50%, transparent); */
		}

		/* .carousel-blur-right::after {
			left: auto;
			right: 0;
			background: linear-gradient(to left, var(--cnvs-body-bg) 50%, transparent);
		} */

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
      color: #FFF !important;
      background-color: #2C96FF !important;
      border-radius: 30px !important;
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
      color: #FFF !important;
      background-color: #2C96FF !important;
      border-radius: 30px !important;
    }

    .grid-switch-content:not(.col-grid) > div {
			-ms-flex: 0 0 100%;
		    flex: 0 0 100%;
		    max-width: 100%;
			-ms-flex-direction: column !important;
			flex-direction: column !important;
		}

		.grid-switch-content .card-img {
			-ms-flex: 1 1 auto !important;
   			flex: 1 1 auto !important;
   			border-radius: 0.25rem 0.25rem 0 0;
		}

		@media (min-width: 768px) {
			.grid-switch-content:not(.col-grid) .card-img {
			    -ms-flex: 0 0 33.333333%;
			    flex: 0 0 33.333333%;
			    max-width: 33.333333%;
			}
			.grid-switch-content .col-full .card-img { border-radius: 0.25rem 0 0 0.25rem; }
		}

    /* .card-title{
      font-size: 22px !important;
      font-weight: 600 !important;
    } */

    .sub-text{
      font-size: 12px !important;
      color: #636363 !important;
      font-weight: 600 !important;
    }

	.sub-rate{
		font-size: 24px;
		font-weight: 800;
		line-height: 32px;
		color: #19213D;
	}

	.sub-month{
		font-size: 20px;
		font-weight: 800;
		line-height: 28px;
		color: #19213D;
	}

	.button-dark:hover{
		color: #FFF !important;
      	background-color: #2C96FF !important;
	}

	.button-dark, .rounded-face{
		color: #2C96FF !important;
		border: 2px solid #2C96FF !important;
	}

	.btn-circle.btn-xl {
		width: 30px;
    	height: 30px;
		padding: 6px 0px;
		border-radius: 15px;
		text-align: center;
		font-size: 12px;
		line-height: 1.42857;
		color: #2C96FF !important;
		border: 2px solid #2C96FF !important;
	}
	.btn-default {
		color: #333;
		background-color: #fff;
		border-color: #ccc;
	}
	.w-85{
		width: 85% !important;
	}

	.ribbon {
		position: absolute;
		right: -5px;
		top: -5px;
		z-index: 1;
		overflow: hidden;
		width: 93px;
		height: 93px;
		text-align: right;
	  }
	  .ribbon span {
		font-size: 0.6rem;
		color: #fff;
		text-transform: uppercase;
		text-align: center;
		font-weight: bold;
		line-height: 18px;
		transform: rotate(45deg);
		width: 125px;
		display: block;
		background: #79a70a;
		background: linear-gradient(#9bc90d 0%, #79a70a 100%);
		box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
		position: absolute;
		top: 17px;
		right: -29px;
	  }
	  
	  .ribbon span::before {
		 content: '';
		 position: absolute; 
		 left: 0px; top: 100%;
		 z-index: -1;
		 border-left: 3px solid #79A70A;
		 border-right: 3px solid transparent;
		 border-bottom: 3px solid transparent;
		 border-top: 3px solid #79A70A;
	  }
	  .ribbon span::after {
		 content: '';
		 position: absolute; 
		 right: 0%; top: 100%;
		 z-index: -1;
		 border-right: 3px solid #79A70A;
		 border-left: 3px solid transparent;
		 border-bottom: 3px solid transparent;
		 border-top: 3px solid #79A70A;
	  }

	  .badge.bg-yellow.bg-color2 {
		background-color: #F6B704;
		display: block;
		position: absolute;
		left: 20px;
		z-index: 1;
		font-size: 10px;
		padding: 6px 10px;
		font-weight: 500;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		line-height: 14px;
	}

	button.owl-dot{
    background-color: #c7c7c7 !important;
    transition: width 0.5s !important;
	}


	button.owl-dot.active{
		width: 1.25rem !important;
      background-color: #4E9FFF !important;
	  border-radius: 1rem !important;
	}

	.cate-sec .owl-dots {
		display: none;
	}
	
	.img-round{
		border-radius: 35px !important;
	}

	.owl-next{
		opacity: 1 !important;
		right: -10px !important;
	}

	.owl-prev{
		opacity: 1 !important;
		left: -10px !important;
	}

	.sub-card{
		font-size: 20px !important;
	}
	.btn-color{
		color: #2C96FF !important;
		font-size: 16px !important;
		font-weight: 600;
	}
	.sub-text1{
		font-size: 14px !important;
		font-weight: 400 !important;
		color: #6D758F;
	}

	.sub-text2{
		/* font-size: 22px !important; */
		font-weight: 400 !important;
		color: #6D758F;
	}
	.category-button {
		border: 1px solid #e0e0e0;
		background-color: #fff;
		cursor: pointer;
	}
	.category-button.active {
		background-color: #e0e9f1;
		border-color: #007bff;
	}
	.price-button {
		border: 1px solid #e0e0e0;
		background-color: #fff;
		cursor: pointer;
		margin-bottom: 10px;
	}
	.price-button:hover {
		background-color: #f8f9fa;
	}

	@-webkit-keyframes scaleIn {
		to {
			transform: scale(1.3, 1.3);
		}
		}
		@keyframes scaleIn {
		to {
			transform: scale(1.3, 1.3);
		}
	}
	.scaleIn {
		-webkit-animation-name: scaleIn;
		animation-name: scaleIn;
	}

	@-webkit-keyframes scaleOut {
		from {
			transform: scale(1.3, 1.3);
		}
		}
		@keyframes scaleOut {
		from {
			transform: scale(1.3, 1.3);
		}
	}
	.scaleOut {
		-webkit-animation-name: scaleOut;
		animation-name: scaleOut;
	}

	.fw-medium{
		font-size: 18px !important;
		font-weight: 600 !important;
	}

	.custom-card {
		border: none;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		overflow: hidden;
		text-align: center;
	}
	.custom-card img {
		width: 100%;
		height: auto;
	}
	.custom-card .card-body {
		padding: 20px;
	}
	.custom-card .card-title {
		font-size: 1.5rem;
		margin-bottom: 10px;
	}
	.custom-card .card-text {
		color: #6c757d;
		font-size: 1rem;
	}
	/* .owl-item{
		width: auto !important;
	} */

	.grey-dot {
		width: 7px;
		height: 7px;
		background-color: #4E9FFF;
		border-radius: 50%;
		display: inline-block;
		margin-right: 5px;
	}

	#video-slider-mute {
		position: absolute;
		top: auto;
		left: auto;
		right: 20px;
		bottom: 10px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: var(--cnvs-contrast-0);
		color: var(--cnvs-contrast-1000);
		font-size: 1.25rem;
		border: 0;
	}
	
	#video-slider-mute i {
		position: relative;
		left: 1px;
	}
	
	#video-slider-mute i:nth-of-type(2),
	#video-slider-mute.video-muted i:nth-of-type(1) { display: none; }
	
	#video-slider-mute.video-muted i:nth-of-type(2) { display: block; }


	.bg-color-sec{
		background-color: #19213D !important;
	}

	.bg-dark1{
		color: #ffffff !important;
		background-color: #2C96FF !important;
		border: 2px solid #2C96FF !important;
	}




	.bg-image {
		position: absolute;
		/* top: 10px; */
		right: 0px;
		bottom: 0;
		width: 33vw;
		background: url('../images/home/bg-imagee.png');
		background-size: cover;
		/* padding: 10% !important; */
		background-size: cover;
		background-position: center;
		height: 44vh;
		}
	
	  @media (max-width: 991.98px) {
		.bg-image {
		  width: 100%;
		  height: 50%;
		  background-position: center bottom;
		}
	  }

	  .owl-carousel.with-carousel-dots .owl-nav [class*="owl-"]{
		background-color: #000 !important;
		color: #fff !important;
	  }

	  

	  @media only screen and (max-width: 768px) {
.iframe-vdo{
			height: 200px !important;
		}
		.padding-mobile-0 {
			padding: 5px !important;
			padding-top: 25px !important;
			padding-left: 12px !important;
			padding-right: 12px !important;
		}
		.padding-mobile-4{
			padding: 5px !important;
		}
		.padding-mobile-none{
			padding: 0 !important;
		}
		.fs-4 {
			font-size: calc(0.8rem + 1.3vw) !important;
		}
		.franc-work{
			font-size: 12px !important;
		}
		.card-equal{
			min-height: auto;
			height: 235px !important;
		}
		.padding-mobile-1{
		  padding-right: 15px !important;
		  padding-left: 15px !important;
		  padding-top: 10px !important;
	  }
	  .padding-mobile-2{
		padding-right: 0px !important;
		padding-left: 20px !important;
		padding-top: 0px !important;
	}
	.padding-mobile-3{
		padding-top: 30px !important;
    padding-right: 30px !important;
    padding-left: 40px !important;
	}
	.footer-logo{
		margin: auto !important;
	}
	.text-center-mobile{
		text-align: center !important;
	}
	.center-icon-mob{
		display: flex;
		justify-content: space-evenly;
	}
	.padding-mob-footer{
		padding-left: 30px !important;
	  }
	#searchQueryInput {
		padding: 0 1.5rem 0 1.5rem !important;
		height: 2.3rem !important;
	}
	.sb-mobile{		
		width: 50% !important;
	}
	.hide-mob{
		display: none !important;
	}
	  .sub-heading{
		font-size: 24px !important;
		font-weight: 800 !important;
		margin-top: 10px !important;
	  }
	  #carousel-tabs .nav-link {
		font-size: 12px !important;
    	padding: 10px;
	}
	.sub-rate {
		font-size: 24px !important;
		font-weight: 800;
		line-height: 32px;
		color: #19213D;
	}
	.text-step{
		font-size: 16px !important;
	}
	.img-size-step{
		margin-right: 15px !important;
    width: 40%;
	}
	.margin-mobile{
		margin-top: 40px !important;
	}
	.margin-b{
		margin-bottom: 1px !important;
	}
	.logo img {
		padding: 10px !important;
	  }
	  .carousel-control-prev-icon {
		background-image: url(/images/home/Arrow-left.png) !important;
		width: 75% !important;
    	height: 75% !important;
	}

	.carousel-control-next-icon {
		background-image: url(/images/home/Arrow-Right.png) !important;
		width: 75% !important;
    	height: 75% !important;
	}
	.slider-arrow-left{
		left: 5px !important;
	}
	.slider-arrow-right{
		right: -5px !important;
	}
	.banner-mobsize{
		height: 100% !important;
		min-height: 500px !important;
		background-size: cover !important;
		background-position: center center !important;
	}
	}

	.card-equal{
		min-height: auto;
		height: 235px;
	}

	.portfolio-desc{
		min-height: auto;
		height: 315px;
	}
	
	img.padding-banner {
		padding-top: 50px;
		padding-bottom: 50px;
		padding-right: 50px;
		padding-left: 50px;
		background-color: #fff !important;
	}



	.carousel-control-prev-icon {
		background-image: url(/images/home/Arrow-left.png) !important;
		width: 80%;
    	height: 80%;
	}

	.carousel-control-next-icon {
		background-image: url(/images/home/Arrow-Right.png) !important;
		width: 80%;
    	height: 80%;
	}

	.portfolio-single-content h2 {
		font-size: 1.75rem;
	}
	.portfolio-meta {
		font-size: 1rem;
	}
	.portfolio-meta li {
		margin-bottom: 1rem;
	}
	/* Swiper */
	.slider-top .swiper-slide {
		width: 100%;
		height: 100%;
		min-height: 500px;
		background-size: cover;
		background-position: center center;
	}

	@media (min-width: 992px) {
		.slider-top .swiper-slide {
			width: 85%;
			min-height: 550px;
		}
	}
	.slider-thumbs {
		padding: 10px 0;
	}
	.slider-thumbs .swiper-slide {
		width: 23%;
		height: 100%;
		opacity: 0.3;
	}
	.slider-thumbs .swiper-slide-active {
		opacity: 1;
	}

	.flex-next:hover, .flex-prev:hover, .slider-arrow-bottom-sm:hover, .slider-arrow-left:hover, .slider-arrow-right:hover, .slider-arrow-top-sm:hover{
		background-color: transparent !important;
	}

	.slider-arrow-left, .slider-arrow-right{
		background-color: transparent !important;
	}

	.padding-banner {
		padding-top: 50px;
		padding-bottom: 50px;
		padding-right: 50px;
		padding-left: 50px;
		background-color: #fff !important;
	}
	.slider-arrow-left{
		left: 50px;
	}
	.slider-arrow-right{
		right: 50px;
	}

	.swiper_wrapper{
		background-color: #fafafa !important;
	}

	#canvas-TabContent{
		background-color: var(--cnvs-body-bg) !important;
	}

	.container-fluid{
		background-color: var(--cnvs-body-bg) !important;
	}
	#content{
		background-color: #fafafa !important;
	}

	/* .owl-prev{
		top: -25% !important;
		position: absolute !important;
		left: 89% !important;
	}
	.owl-next{
		top: -25% !important;
		position: absolute !important;
		left: 93% !important;
	}
	 */
	 .testimonial{
		width: 90% !important;
	 }

	 .w-15{
		width: 15% !important;
	 }


	 .btn-category {
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        color: #495057;
        margin-right: 10px;
      }
      .btn-category.active {
        background-color: #e9ecef;
        border-color: #adb5bd;
        color: #212529;
      }
      .btn-price {
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        color: #495057;
        margin-right: 10px;
      }

	  .btn-cat .col.active a {
		background-color: #E3EFFF !important;
		border-radius: .25rem;
		box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
		transition: none;
	}

	.ed-effect{
		border-radius: .25rem;
		box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
		transition: none;
	}

	.support-button {
		position: fixed;
		top: 90%;
		right: 0;
		transform: translateY(-50%);
		background-color: #e6f4f9;
		border-radius: 8px 0   0 8px;
		padding: 20px 20px;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		z-index: 9999;
		border: 2px solid #C3DDFF;
	}
	.support-button img {
		width: 24px;
		height: 24px;
		/* margin-right: 10px; */
	}


	.popupformmodel button.btn-close {
		position: absolute;
		cursor: pointer;
		height: 30px;
		width: 30px;
		right: -9px;
		top: -15px;
		padding: 0px;
		color: #ffffff;
		font-family: Arial;
		font-weight: 100;
		font-size: 17px !important;
		line-height: 29px !important;
		border: 2px solid #ffffff;
		border-radius: 26px !important;
		box-shadow: 0px 0px 15px 1px rgb(2 2 2 / 75%);
		text-shadow: 0px 0px 0px rgb(0 0 0 / 23%);
		background-color: rgba(0, 0, 0, 1);
		font-size: 15px;
		line-height: 15px;
		opacity: 1;
		background-size: 16px;
		z-index: 3;
		position: absolute;
		text-align: center;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
	
	}


	.card-hei{
		min-height: auto;
		height: 55px !important;
	}


	/* footer */
	#footer{
		--cnvs-footer-top-border:none !important;
	}

	.footer-logo{
		width: 50% !important;
	}

	.text-semidark{
		color: #6D758F !important;
	}



	.card-hei-blog{
		min-height: auto;
		height: 90px;
	}



	

	.searchBar {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	  }
	  
	  #searchQueryInput {
		width: 100%;
		height: 2.8rem;
		background: #f5f5f5;
		outline: none;
		border: none;
		border-radius: 1.625rem;
		padding: 0 10.5rem 0 1.5rem;
		font-size: 1rem;
	  }
	  
	  #searchQuerySubmit {
		width: 3.5rem;
		height: 2.8rem;
		margin-left: -3.5rem;
		background: none;
		border: none;
		outline: none;
	  }
	  
	  #searchQuerySubmit:hover {
		cursor: pointer;
	  }


	  .button-header {
		background-image: linear-gradient(to bottom, #00B1FF, #006BFF);
		border: 0 !important;
	}


	.menu-container .menu-link{
		padding: 20px !important;
	}



	@media (min-width: 768px) and (max-width: 1180px) {
  
		.padding-tab{
			padding: 10px !important;
		}

		.iframe-vdo{
			height: 300px;
		}

		.banner-tab{
			min-height: 292px !important;
		}

		.slider-top .swiper-slide{
			min-height: 0px !important;
		}
		
	  }
	  
	  .banner-tab,
.banner-mobsize {
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  width: 100%;
}

/* Desktop */
.banner-tab {
  background-size: cover;
  min-height: 550px;
 
}


/* Mobile */
@media (max-width: 767.98px) {
  .slider-element {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0;
  }

  .swiper-slide {
    height: 100vh; /* Full screen height */
  }

  .banner-mobsize {
    height: 100%;
    background-size: cover !important; /* Show image with no gap, might crop */
  }

  .swiper-wrapper,
  .swiper-parent {
    height: 100%;
  }
}
.badge-trusted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #00a30e; /* Red */
  color: #fff;
  position: absolute;
  left: 10px;
  top: 5px;
  z-index: 1;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 20px;
  font-weight: 400;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.badge-trusted i {
  font-size: 14px;
}



.badge-trusted ::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Start the shine from the left */
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    animation: shine 2s infinite; /* Apply the shine animation */
}
@keyframes shine {
    0% {
        left: -100%; /* Start from the left */
    }
    100% {
        left: 100%; /* Move to the right */
    }
}
@keyframes pulseGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
  }
}
  .modern-search-bar {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 1rem;
	
}

.search-wrapper {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 40px;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    min-height: 48px; /* Minimum touch target size */
}

.search-wrapper:focus-within {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.search-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    padding: 0 0.625rem;
    color: #333;
    box-shadow: none !important;
    min-height: 32px; /* Ensure adequate touch target */
}

.search-wrapper input::placeholder {
    color: #999;
}

.search-wrapper i {
    color: #888;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 50%;
    min-width: 32px; /* Adequate touch target */
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-wrapper i:hover {
    color: #4285f4;
    background: rgba(66, 133, 244, 0.1);
}

.suggestions-box {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    max-height: 400px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    border: 1px solid #e0e0e0;
}

.suggestions-box.show {
    display: block;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.suggestion-item {
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px; /* Adequate touch target */
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: #e3f2fd;
    color: rgb(8, 8, 8);
    transform: translateX(5px);
}

.suggestion-item.no-results {
    font-style: italic;
    color: #666;
    cursor: default;
}

.suggestion-item.no-results:hover {
    background: none;
    color: #666;
    transform: none;
}

.suggestion-icon {
    font-size: 1rem;
    opacity: 0.7;
    min-width: 20px;
    flex-shrink: 0;
}

.suggestion-content {
    flex: 1;
    min-width: 0; /* Prevent flex item from overflowing */
}

.suggestion-title {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 0.95rem;
    word-wrap: break-word;
}

.suggestion-details {
    font-size: 0.875rem;
    opacity: 0.8;
    word-wrap: break-word;
}

.suggestion-price {
    font-weight: bold;
    color: #4285f4;
    font-size: 0.875rem;
    text-align: right;
    flex-shrink: 0;
}

.suggestion-item:hover .suggestion-price {
    color: rgb(9, 9, 9);
}

.suggestions-box::-webkit-scrollbar {
    width: 8px;
}

.suggestions-box::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.suggestions-box::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.suggestions-box::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.category-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(66, 133, 244, 0.1);
    color: #4285f4;
    border-radius: 12px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    margin-left: 5px;
}

.suggestion-item:hover .category-badge {
    background: rgba(16, 16, 16, 0.2);
    color: white;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
    .modern-search-bar {
        max-width: 600px;
    }
    
    .suggestions-box {
        max-height: 500px;
    }
}

/* Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .modern-search-bar {
        max-width: 500px;
    }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .modern-search-bar {
        max-width: 100%;
        padding: 0 1.5rem;
		margin-bottom: 10px;
    }
    
    .search-wrapper {
        padding: 0.75rem 1.25rem;
    }
    
    .search-wrapper input {
        font-size: 1rem;
        padding: 0 0.75rem;
    }
    
    .suggestion-item {
        padding: 1rem 1.25rem;
        flex-direction: row;
        align-items: center;
    }
    
    .suggestion-title {
        font-size: 0.95rem;
    }
    
    .suggestion-details {
        font-size: 0.875rem;
    }
    
    .suggestion-price {
        font-size: 0.875rem;
        text-align: right;
    }
    
    .suggestions-box {
        max-height: 350px;
    }
}

/* Mobile Large (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .modern-search-bar {
        max-width: 100%;
        padding: 0 1rem;
		margin-bottom: 10px;
    }
    
    .search-wrapper {
        padding: 0.5rem 1rem;
        border-radius: 35px;
    }
    
    .search-wrapper input {
        font-size: 0.9rem;
        padding: 0 0.5rem;
    }
    
    .search-wrapper i {
        font-size: 1rem;
        padding: 6px;
    }
    
    .suggestion-item {
        padding: 0.875rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .suggestion-title {
        font-size: 0.9rem;
    }
    
    .suggestion-details {
        font-size: 0.8rem;
    }
    
    .suggestion-price {
        font-size: 0.8rem;
        text-align: left;
        align-self: flex-start;
    }
    
    .suggestions-box {
        max-height: 300px;
        border-radius: 12px;
    }
}

/* Mobile Medium (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
    .modern-search-bar {
        max-width: 100%;
        padding: 0 0.75rem;
    }
    
    .search-wrapper {
        padding: 0.4rem 0.8rem;
        border-radius: 30px;
        min-height: 44px;
    }
    
    .search-wrapper input {
        font-size: 0.85rem;
        padding: 0 0.4rem;
    }
    
    .search-wrapper i {
        font-size: 0.9rem;
        padding: 5px;
        min-width: 28px;
    }
    
    .suggestion-item {
        padding: 0.75rem 0.875rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        min-height: 44px;
    }
    
    .suggestion-title {
        font-size: 0.85rem;
    }
    
    .suggestion-details {
        font-size: 0.75rem;
    }
    
    .suggestion-price {
        font-size: 0.75rem;
        text-align: left;
    }
    
    .suggestions-box {
        max-height: 280px;
        border-radius: 10px;
        margin-top: 6px;
    }
    
    .category-badge {
        font-size: 9px;
        padding: 1px 6px;
    }
}

/* Mobile Small (360px - 479px) */
@media (min-width: 360px) and (max-width: 479px) {
    .modern-search-bar {
        max-width: 100%;
        padding: 0 0.5rem;
		margin-bottom: 10px;
    }
    
    .search-wrapper {
        padding: 0.3rem 0.6rem;
        border-radius: 28px;
        min-height: 40px;
    }
    
    .search-wrapper input {
        font-size: 0.8rem;
        padding: 0 0.3rem;
    }
    
    .search-wrapper i {
        font-size: 0.8rem;
        padding: 4px;
        min-width: 24px;
    }
    
    .suggestion-item {
        padding: 0.625rem 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        min-height: 40px;
    }
    
    .suggestion-title {
        font-size: 0.8rem;
    }
    
    .suggestion-details {
        font-size: 0.7rem;
    }
    
    .suggestion-price {
        font-size: 0.7rem;
        text-align: left;
    }
    
    .suggestions-box {
        max-height: 250px;
        border-radius: 8px;
        margin-top: 4px;
    }
    
    .category-badge {
        font-size: 8px;
        padding: 1px 5px;
    }
	

}

/* Mobile Extra Small (320px - 359px) */
@media (max-width: 359px) {
    .modern-search-bar {
        max-width: 100%;
        padding: 0 0.25rem;
		margin-bottom: 10px;
		
    }
    
    .search-wrapper {
        padding: 0.25rem 0.5rem;
        border-radius: 25px;
        min-height: 36px;
    }
    
    .search-wrapper input {
        font-size: 0.75rem;
        padding: 0 0.25rem;
    }
    
    .search-wrapper i {
        font-size: 0.75rem;
        padding: 3px;
        min-width: 20px;
    }
    
    .suggestion-item {
        padding: 0.5rem 0.625rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        min-height: 36px;
    }
    
    .suggestion-title {
        font-size: 0.75rem;
    }
    
    .suggestion-details {
        font-size: 0.65rem;
    }
    
    .suggestion-price {
        font-size: 0.65rem;
        text-align: left;
    }
    
    .suggestions-box {
        max-height: 200px;
        border-radius: 6px;
        margin-top: 3px;
    }
    
    .category-badge {
        font-size: 7px;
        padding: 1px 4px;
    }
	
}

/* ===== ACCESSIBILITY & TOUCH IMPROVEMENTS ===== */

/* Ensure touch targets are at least 44px on mobile */
@media (max-width: 768px) {
    .search-wrapper i:active {
        transform: scale(0.95);
    }
    
    .suggestion-item:active {
        transform: scale(0.98);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .search-wrapper {
        border: 2px solid #000;
    }
    
    .suggestion-item {
        border-bottom: 2px solid #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .search-wrapper,
    .suggestion-item,
    .search-wrapper i {
        transition: none;
    }
    
    .suggestions-box.show {
        animation: none;
    }
    
    .suggestion-item:hover {
        transform: none;
    }
}


/* Highlight selected suggestion */

.search-clear-icon {
    font-size: 1.1rem;
    color: #888;
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
}
.search-clear-icon:hover {
    background: #f0f0f0;
    color: #0c2dc1;
}

/* Tablet: 768px to 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .modern-search-bar .search-wrapper {
    width: 100%;
	padding: 0.5rem 0.5rem;
   margin-top: 15px;
   margin-bottom: 5px;
    
  }

 .sticky-search-bar {
   background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.3);
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1050;
    padding: 1rem 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
  }

  .modern-search-bar {
    transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
    will-change: transform, box-shadow, background;
	
  }
}

/* Mobile: up to 767px */
@media (max-width: 767px) {
  .modern-search-bar .search-wrapper {
    max-width: 100%;
    margin: 0 auto;
  }

  .sticky-search-bar {
   background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.3);
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 1050;
    padding: 1rem 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
  }

  .modern-search-bar {
    transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
    will-change: transform, box-shadow, background;
  }
  .search-clear-icon {
    font-size: 1.1rem;
    color: #888;
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
}
}