*
{
	transition: all 0.5s ease-in-out;
	box-sizing: border-box;
	font-family: 'Rubik', sans-serif;
}
body
{
	margin:0px;
	background: #fff;
	color:#125;
	width:100%;
	height:100vh;
	/*display:grid;
	place-content: center;*/
display: flex;
	flex-direction: column;
/*		overflow:hidden;*/
}

.header
{
	position: fixed;
	width:100%;
	z-index:9999;
	background: inherit;
}
#app
{
	/*width:80vw;
	height:80vh;*/
	flex-grow: 1;
	padding-top:80px;
}
.loading-progress-container
{
/*	background: red;*/
	position: absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	display:grid;
	place-content: center;
	pointer-events: none;
}
.loading-spinner
{
	width:50px;
	height:50px;
	border-radius:50%;
	background: conic-gradient(transparent 10%,red,black,transparent 80%);
	position: relative;
	animation:spinner-animation 1s infinite linear;
}

.loading-spinner:after
{
	content:"";
	position: absolute;
	background: #fff;
	width:30px;
	height:30px;
	top:10px;
	left:10px;
	border-radius: 50%;
}

@keyframes spinner-animation
{
	0%
	{
  			transform: rotate(0deg);
	}

	100%
	{
		transform: rotate(360deg);
	}
}


/*------------------------------------------------------------------- 
|		Menu Styles here
--------------------------------------------------------------------*/

.menu-container
{
  box-shadow:0px 10px 20px rgba(0,0,0,0.3);
  padding:10px 20px;
  font-size:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  /*position: fixed;
  z-index:9999;*/
}

.menu-container .brand
{
	width:100px;
}
.brand img
{
	width:100%;
}

.center-links-container, .side-links-container
{
	display: flex;
	gap:10px;
}


.btn
{
/*   border:1px solid black; */
  padding:5px 10px;
  border-radius:20px;
  text-align: center;
  display: flex;
  gap:5px;
  align-items: center;
 	justify-content: center;
}

.btn-xl
{
	font-size:20px;
	padding:10px 20px;
}

.btn-icon
{
	width:20px;
	filter:invert(100%);

}

.btn-light
{
/*	background: linear-gradient(to right,#fff,#ddf);*/
	border:2px solid rgba(0,0,0,0.2);
}

.btn-light .btn-icon
{
	filter:invert(0);
}
.btn.btn-orange
{
	background: linear-gradient(to right,orange,red);
	color:#fff;
}

.btn.btn-yellow
{
	background: linear-gradient(to right,#9f0,#090);
	color:#fff;
}
.btn.btn-primary 
{
  /*background:#222;
  color:#fff;*/
  border:2px solid black;
}

.btn.btn-primary:hover 
{
  background:#000;
  color:#fff;
}
.btn.btn-primary:hover img
{
  filter:invert() brightness(400%);

}
a.link
{
  text-decoration:none;
  color:#555;
/*  font-weight:bold;*/
  display:flex;
  align-item:center;
  gap:5px;
  
}

.link img.link-icon
{
  width:20px;
  opacity:0.7;
}


.link.btn-primary img
{
  opacity:1;
/*  filter:invert() brightness(400%);*/
  
}


a.link:hover
{
   color:#000;
}

a.link:hover img.link-icon
{
  opacity:1;

  
}

/*------------------------------------------------------------------- 
|		Popup styles here
--------------------------------------------------------------------*/


.popup-overlay
{
	top:0px;
	left:0px;
	position:absolute;
	background:rgba(0,0,0,0.6);
	width:100%;
	height:100%;
	display: grid;
	place-content: center;
	backdrop-filter:blur(5px);
	z-index:9999;
	display:none;
}

/*------------------------------------------------------------------- 
|		Screen Style here
--------------------------------------------------------------------*/

.screen
{
	width:100%;
	padding:10px;
}

/*------------------------------------------------------------------- 
|		Card Style here
--------------------------------------------------------------------*/

.category-section-header
{
	display: flex;
	justify-content: space-between;
}
.category-container
{
	display:flex;
	gap:20px;
	justify-content: space-between;
/*	padding:20px;*/
	width:100%;
	min-height:100px;
}

.category-card img
{
	width:50px;
}
.card
{
/*	box-shadow:0px 10px 20px rgba(0,0,0,0.3);*/
	padding:20px 10px;
	display:flex;
	flex-direction: column;
	gap:5px;
	border-radius:5px;
}

/*------------------------------------------------------------------- 
|		anchor links style here
--------------------------------------------------------------------*/
a
{
	text-decoration: none;
	color:#000;
	font-family: inherit;
}

/*------------------------------------------------------------------- 
|		Product Container and product styles
--------------------------------------------------------------------*/

.product-display
{

	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding:20px 0px;
	
	min-height:320px;
}
.products-container
{
	display: flex;
	justify-content: center;
	padding:10px;
	gap:10px;
	flex-wrap:wrap;
/*	overflow: hidden;*/
}

.product-card
{
/*  border:1px solid rgba(0,0,0,0.1);*/
  width:140px !important;
  min-width:140px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;

}
.product-card:hover
{
/*	transform: translateY(-10px);*/
	box-shadow:0px 10px 20px rgba(0,0,0,0.1);
}

.product-card:hover .p-cover-image img
{
	transform: translateY(-10px) scale(1.2);
/*	margin:10px 0px;*/
}
.p-cover-image img
{
	width:100%;
	max-height:128px;
	object-fit: contain;
}
.category-title
{
	font-size:20px;
	font-weight:bold;
}
.p-title
{
	font-weight:bold;
	padding:10px 0px;
}
.p-price
{
	display:flex;
	flex-direction: column;
	align-items: start;
}
.p-mrp:before,.p-offer-price:before,.price:before
{
	content:"₹";
}
.p-mrp:after,.p-offer-price:after,.price:after
{
	content:"/-";
}
.product-card .p-mrp
{
	text-decoration:line-through;
	color:#888;
}


.product-tags-container
{
	display:flex;
	padding:10px 0px;
}
.product-ratings
{
 display: flex;
 gap:10px;
}
.rating
{
	background:#080;
	color:#fff;
	display:flex;
	gap:5px;
	align-items: center;
	padding:2px 5px;
	font-size:12px;
	border-radius:3px;
}
.rating img
{
	width:10px;
	filter: invert(100%) contrast(200%);
}
.review-count
{
	color:#888;
	font-size:12px;
}
.tag,.p-off
{
	background:rgba(0,0,0,0.1);
	color:#555;
	font-size:12px;
	padding:3px 10px;
	border-radius:10px;
}
/*------------------------------------------------------------------- 
|		Banner Style Here
--------------------------------------------------------------------*/
.banner-container
{
	height:250px;
	min-height:250px;
	overflow:hidden;
	position:relative;
}
.banner-container>*
{
	position:absolute;
}
.banner-container img
{
	object-fit: cover;
	width:100%;
	height:250px;
}
.display-none
{
		/*	display:none;*/
/*		transform:rotateX(-180deg);*/
		opacity:0;
		pointer-events: none;
}

@media screen and (max-width:930px)
{
				.banner-container,.banner-container img
				{
					height:190px;
					min-height:190px;
				}
}
@media screen and (max-width:530px)
{
				.banner-container,.banner-container img
				{
					height:150px;
					min-height:150px;
				}
}
@media screen and (max-width:393px)
{
				.banner-container,.banner-container img
				{
					height:120px;
					min-height:120px;
				}

				.products-container {
					background: rgba(0,0,0,0.1);
					padding:0px;
					gap:1px;
				}

				.product-card
				{
					background: #fff;
					border-radius:0px;
				}
}


/*Ajax Loading*/
.ajax-loading
{
	position:relative;
}
.ajax-loading:after{
	content: "";
	position: absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background:linear-gradient(to right,#fff,#ddd,#fff);
	animation: fake-loading-animation 1s infinite linear;
	animation-fill-mode: forwards;
/*	display: attr(fake-loading-display);*/
}

@keyframes fake-loading-animation
{
	0%
	{
			background-position: -100vw 0px;
	}
	100%
	{
			background-position: 100vw 0px;

	}
}

/*------------------------------------------------------------------- 
|		Footer style here
--------------------------------------------------------------------*/

.footer
{
	display:flex;
	flex-direction: column;
	background: #2d04b5;
	color:#fff;
}
.footer .links-section
{
		display:flex;
		padding:20px 50px;

}
.footer .links-section .links-container
{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
/*	align-items: center;*/
	align-content: center;
}
.links-container .link-title
{
	font-weight: bold;
	padding:10px 20px;
	font-size:18px;
}
.footer .links-section .links-container a,.copyrights-policy-links a
{
  color:#fff;
  padding:10px 20px;
  border-radius: 20px 0px 0px 20px;

}

.footer .links-section .links-container a:hover,.copyrights-policy-links a:hover
{
	background:linear-gradient(to right,rgba(255,255,255,0.3),transparent);
}

.copyrights-policy-links a
{
	flex-grow: 1;
}
.copyrights-policy-links
{
	display: flex;
	justify-content: space-between;
	padding:0px 50px;
}


/*------------------------------------------------------------------- 
|		product-info-screen style
--------------------------------------------------------------------*/

#product-info-screen
{
	display: flex;
	gap:20px;
/*	flex-wrap: wrap;*/
}
.product-image-gallery
{
	flex-basis:393px;
	height:450px;
	position: sticky;
	top:80px;
	min-width:393px;
	padding:20px;
	max-width:400px;
	display:grid;
	gap:10px;
/*	border:5px solid black;*/
/*	grid-template-columns: auto 1fr;*/
}

.image-display
{
	height:100%;
	width:100%;
	max-height:400px;
}

.product-action-link-container
{
	grid-column: 1/3;
	display: flex;
	gap:10px;
}
.product-action-link-container .btn
{
	flex-grow: 1;
}

.display-image
{
	height:100%;
	width:100%;
	object-fit:contain;
}

.thumbnails-sections
{

/*	overflow: hidden;*/
	display: flex;
	flex-direction: column;
/*	border:5px solid red;*/
	gap:5px;
}

.thumbnail
{
	min-width:70px;
	max-width:70px;

	min-height:70px;
	max-height:70px;

	object-fit: contain;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border:1px solid rgba(0,0,0,0.1);
	padding:5px;
}

.thumbnail img
{
/*	width:100%;*/
	height:100%;
	object-fit:contain;
}
.product-details-container
{
	flex-grow:1;
	min-height:600px;
	padding:20px;
	display: flex;
	gap:10px;
	flex-direction: column;


}

.product-details-container .p-title
{
	font-size:28px;
}
.product-image-gallery,.product-details-container
{
/*	border:2px solid black;*/
}
.product-description-section
{
	display: flex;
	flex-direction: column;
	gap:10;
/*	background:rgba(0,0,0,0.1);*/
}
.product-details-section
{
	display: flex;
	gap:20px;
	align-items: start;
	border:1px solid rgba(0,0,0,0.1);
	padding:5px;
}
.text-big
{
	font-size:24px;
	padding:10px 0px;
}

#seller-details .section-content
{
	display:flex;
	gap:10px;
}
.description-item
{
	display:grid;
	grid-template-columns: 1fr auto;
	gap:20px;		
	background:#fff;
	padding:20px;
	border:1px solid rgba(0,0,0,0.1);

}

.description-title
{
	font-size:18px;
	grid-column:1/3;
	font-weight:bold;
}

.description-item:nth-child(even) .description-image
{
		order:1;
}

/*------------------------------------------------------------------- 
|		error-404-screen style here
--------------------------------------------------------------------*/
#error-404-screen
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	min-height:600px;
}
#error-404-screen img
{
	width:300px;
}
.very-very-big-text
{
	font-size:60px;
	font-weight:bold;
}


/*------------------------------------------------------------------- 
|		Bag/Cart styles here
--------------------------------------------------------------------*/
.bag-product-card
{
	display: flex;
	gap:5px;
	align-items: center;
	justify-content: space-between;
	padding:10px;
}

img.p-cover-image-sm
{
	width:150px;
	height:150px;
	object-fit: contain;
}

.total-price
{
	font-size:30px;
	font-weight:bold;
	display:flex;
	justify-content: end;
}



/*------------------------------------------------------------------- 
|		Form style here
--------------------------------------------------------------------*/

#login-screen
{
	display: flex;
	align-items: center;
	justify-content: center;
}
.form-container
{
	box-shadow: 0px 10px 20px 30px rgba(0,0,0,0.1);
	width:350px;
	padding:20px;
	border-radius:20px;
}

.form-container form
{
	display:flex;
	flex-direction: column;
	gap:10px;
}
.form-field
{
	display: flex;
	gap:10px;
	align-items: center;
}

.form-field>.icon
{
	width:20px;
}

.form-field input
{
	flex-grow: 1;
	border:2px solid rgba(0,0,0,0.1);
	padding:5px 10px;
	outline:none;
}