/* Common setup */
	@charset "utf-8";

	*, *:before, *:after {
	  box-sizing: border-box !important;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}

	:active, :focus {	outline: none;	}
	:root {
		--body-backcolor: #d3d3d3;
		--section-backcolor: #fff;
		line-height: 1.5;
		text-size-adjust: 100%;	
	}

	body { margin: 0 200px; font: 16px Arial, sans-serif; color: #333; background-color: #e3e6e6; text-align: center; letter-spacing: 0.5px; word-spacing: 1px;	}
	ol, ul, li {	list-style: none; }
	a {	text-decoration: none; color : black;	}
	img {	object-fit: cover; 	}
	button, input, select{	width: 100%; border: 1px solid #888; background-color: #fff; color: #000; padding: 10px;	}


/* === Layout Containers === */

	.sticky-container, .grid-container, .header-container, .search-container, .banner-container, .heading-bar, .cat-pro-detail, .viewcart-box, .viewcart-left-box,
	.viewcart-right-box, .order-summary-row, .checkout-container, .col-qty, .check-left-row, .single-pro, .single-pro-leftimg, .single-pro-leftbutton,
	.single-pro-info, .single-pro-speci, .filter-bar	{	display: grid;	}	

	.header-container, .search-container, .single-pro, .single-pro-leftbutton {	gap: 5px;	}
 
	.viewcart-right-box, .heading-bar, .single-pro-leftbutton, .filter-bar {	grid-template-columns: 1fr 1fr;	}
	.checkout-container {	grid-template-columns: 3fr 2fr;	}
	.sticky-container, .viewcart-box {	grid-template-columns: 3fr 1fr;	}
	.header-container 	{	grid-template-columns: 1fr 2fr 1fr;	}
	.search-container 	{	grid-template-columns: 1fr 4fr 1fr;	}
	.banner-container 	{	grid-template-columns: 1fr;	}
	.cat-pro-detail 	{	grid-template-columns: 1fr 4fr;	}
	.single-pro 		{	grid-template-columns: 2fr 3fr; }	
	.single-pro-leftimg {	grid-template-columns: 150px 2fr;	}
	.single-pro-info 	{	grid-template-columns: 150px 1fr;	}
	.single-pro-speci 	{	grid-template-columns: 1fr 2fr;	}
	.viewcart-left-box 	{	grid-template-columns: 5% 15% 30% 15% 10% 15% 10%;	}
	.order-summary-row 	{   grid-template-columns: 60% 25% 1fr; } 
	.col-qty			{	grid-template-columns : 30px 50px 30px;	}
	.check-left-row 	{	grid-template-columns: 200px 1fr;	}
 
	
	.category-container, .flex-arrange1, .flex-arrange2, .header-container, .logo, .company-name, .login.banner-image, .cat-img, .flex-cat-pro, .flex-category1,
	.cat-pro-heading, .grid-container, .company-container, .poster-container, .cat-pro-container, .single-pro, .cat-pro-detail-left, .cat-pro-detail-right,
	.viewcart-left, .checkout-left, .checkout-right  {	background-color: var(--section-backcolor);	}

	.grid-container, .company-container, .poster-container, .cat-pro-container, .single-pro {	width: 100%;	}

	

/* === Flex Items === */

	.flex-container, .category-container, .cat-pro-container, .company-container, .poster-container, .footer-container {	display: flex;  flex-wrap: wrap;  width: 100%;	}
	.flex-arrange1, .flex-arrange2, .flex-category1, .flex-cat-pro, .poster-item, .footer-item {	flex: 1;	}
	.nav, .nav-links, .nav-bar,  .search-left, .check-title {	display: flex;	}
	.footer-item, .footer-col-caption {	color: white;	}
	.flex-arrange1, .flex-arrange2 {	border: 1px solid #d5d5d5; align-items: center;	}
 	.single-pro-heading, .single-pro-info, .single-pro-speci, .footer-col-caption {	padding: 10px;	}

/* Sticky Message */
	.sticky-container {	text-align: left; background-color: #000; color: #fff; padding: 15px;	}
	.sticky-msg a {	color: #ffd814;	}

/* Header */
	.header-container {	padding: 6px;	text-align: center;	}

/* Search */
	.search-container {	align-items: center; padding: 16px; background-color: #1E1E1E;	}
	.search-container input, select  {	width: 70%; padding: 10px; border: 1px solid #888; background-color: #fff; color: #000; margin: 1px;	}
	.search-center input {	width: 100%; height: 40px;	}
	

/* Navigation */
	.nav-links {	padding: 20px 0 10px;;		}
	.nav-links a {	color: gray; padding-left : 10px; padding-right: 10px; 	}

/* Banner */
	.banner-image img {	width: 100%; height: 100%; max-width: 700px; max-height: 200px;	}
	.mySlides {	display: none;	}
	.slideshow-container { max-width: 1150px; margin-bottom: 10px; position: relative;	}
	.numbertext {	font-size: 12px; padding: 8px 12px;	}
	.fade {	animation: fade 110s;	}
	@keyframes fade {	from { opacity: 1; } to { opacity: 1; }	}




/* Menu */
	.menu_body { display: flex;    justify-content: space-between;    align-items: center;    background-color: #aaa;    color: #fff;  }
	.navbar { display:flex;justify-content: space-between;align-items: center;padding : 10px;	}
	.menu { display:flex;list-style:none;margin:0;padding:0;	}
	.menu li { margin-right:20px;	}
	.menu li:hover { background-color:#fff; color:#aaa;	}
	.menu a { text-decoration:none;color:#333;	}
	.hamburger-icon { display:none;flex-direction:column;justify-content:space-between;width:30px;height:30px;cursor:pointer;	}
	.hamburger-icon  span{display:block;width:100%;height:3px;background-color:#333;	}
	
	
/* End of Menu */




/* Category */
	.cat-pro-detail-left, .cat-pro-detail-right {	padding : 15px;  }		
	.cat-title, .cat-pro-title {	margin: 30px 0 5px; padding: 5px;     border-bottom: 1px dotted #686868;	}
	.cat-range, .cat-pro-range { color: darkslategray; font-size: 12px;	}
	.cat-pro-detail-right {	border-left: 5px solid #e3e6e6;	}
	
	.flex-category1 {	margin: 10px; padding: 20px;  overflow: hidden;	}
	.cat-img {	 	}
	.cat-title {	font-size: 25px;	}
	
	.flex-category1 {	transition: transform 0.3s ease;	}
    .flex-category1:hover {	transform: translateY(-2px);	}

    .flex-cat-pro {	transition: transform 0.3s ease;	}
    .flex-cat-pro:hover {	transform: translateY(-2px);	}
	/*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);*/
	
	
/*	
	.heading-bar {	padding: 5px 50px; font-weight: bold; font-size: 28px; letter-spacing: 2px; text-align: left; padding: 15px; margin: 2px 0px; background-color: white;	border-bottom: 1px solid #d7d4d4;}
	.heading-bar-left {		}
	.heading-bar-right {	text-align: right;	}
*/
	.heading-bar {	background-color: #fff9ca; font-weight: bold; font-size: 20px; letter-spacing: 2px; padding: 15px;	}
	.heading-bar-left {	text-align: left;	}
	.heading-bar-right {	text-align: right; font-size: 15px;	}

/* Products */
	.cat-pro-container { padding: 30px 0px;	}
	.flex-cat-pro {	margin: 10px; padding: 20px; max-width: 230px;	}
	.cat-pro-title {	font-size: 18px;	}
	.flex-cat-pro img {	max-width: 190px; max-height: 190px;	}

/* Company */
	.company-item {	margin : 20px;	}
	.company-title {	font-size : 15px; border-top: 1px dotted gray; padding : 5px; 	}
	
	.slider_heading_left, .slider_heading_right {	 	width: 2%;       }
	
	
	

/* Poster */
	.poster-item {	margin: 15px;	}
	.poster-item img {	width: 100%; height: 100%;	}

/* Product Details */
	.single-pro {	 	}
	.single-pro-right {	border-left: 5px solid #d5d5d5; text-align: left; padding: 20px;	}
	.single-pro-leftimg {	padding: 30px;	}
	.single-pro-leftthumb img {	width: 100px; height: 100px; border: 1px solid #b1b1b1; padding: 5px; border-radius: 25px; margin: 10px;	}
	.single-pro-leftbutton {	padding: 20px;	}
	.single-pro-leftbutton button {	  border-radius: 25px;   font-size: 17px; background-color: #fff7b1;   cursor: pointer;	}
	.final-price {	color: green; padding: 0 5px; font-size: 26px;}
	.mrp {	color: red; padding: 0 5px; font-size: 26px;}
	.saving {	color: blue; padding: 0 5px; font-size: 26px;}
	.single-pro-speci .col1 {	padding: 10px; font-size: 16px; color: #878787;	border-bottom: 1px solid #d4d4d4; }
	.single-pro-heading {	font-size: 17px; font-weight: bold; background-color: #f0f0f0;	}

/* viewcart */
	.viewcart-box {		}
	.viewcart-left {	  margin-top : 5px; height: fit-content;	}
	.viewcart-left-box {	padding: 15px 0px 15px 0; align-items: center; border-bottom: 5px solid #e6e6e6;  	}
	.viewcart-right-box {	margin: 5px; text-align: left; padding: 31px; background-color: floralwhite;	}
	.show_price{  display: contents;   }
	.col-qty button{	padding: 1px; border : none;	}
	.col-qty input{	border : none; text-align : center; width : 50px; padding: 1px; color : green; 	}
	.plus_button {	text-align : left;	}
	.minus_button {	text-align : right; }
	.viewcart {  padding: 10px; cursor: pointer; background-color: #fff38f;  	text-align: center;}


/* Checkout */
	.checkout-container { 	 	}
	.checkout-left, .checkout-right {	  margin : 2px; height: fit-content;	}
	.check-title {	background-color: #fff9ca; ont-weight: bold; font-size: 20px; letter-spacing: 2px; padding: 15px;	}
	.check-left-row {  padding: 10px; text-align : left; }
	.check-left-row .col2 input{      height: 40px;  }
	.check-left-row .col2 button{ background-color: #fff38f; }

/* Order Detail */
	.order-summary-row {	padding: 10px; text-align: right;   }
 	.order-thanks {	padding: 16px; background-color: #606060; color: #fff;	}

/* Footer */
	.footer-container {	background-color: #1E1E1E;	}
	.footer-item {	margin: 6px;	}
	.footer-col-caption {	margin: 20px; border-bottom: 1px solid #866d0b;	}
	.footer-copyright {  color: #a48200; background: #131313; padding: 10px; font-size : 15px;	}
	.footer-item a {	color: wheat;	}
	.footer-item li{	padding: 5px; font-size : 13px;	}

	.go-to-top {	position:fixed; bottom:20px; right:20px; font-size:30px; z-index:1000;	}






/* Section */
	.section-devider {	clear: both; height: 15px;	}
   
	.stars-container {	position: relative; display: inline-block; color: transparent; font-size: 25px; margin: 5px;	}
	.stars-container:before {	position: absolute; top: 0; left: 0; content: '★★★★★'; color: lightgray;	}
	.stars-container:after {	position: absolute; top: 0; left: 0; content: '★★★★★'; color: #ff670c; overflow: hidden;	}

	.stars-0:after { width: 0%; }
	.stars-10:after { width: 10%; }
	.stars-20:after { width: 20%; }
	.stars-30:after { width: 30%; }
	.stars-40:after { width: 40%; }
	.stars-50:after { width: 50%; }
	.stars-60:after { width: 60%; }
	.stars-70:after { width: 70%; }
	.stars-80:after { width: 80%; }
	.stars-90:after { width: 90%; }
	.stars-100:after { width: 100; }

/* Responsive */

@media screen and (max-width: 768px) {
 
	body {	margin: 1px;	}
	img {	width: 100%;	}

	.search-container input, .search-container select, .search-container button {	  color: white; background-color: #4a4a4a;	}
	.company-item img {	width: 100%;	}

	.category-container, .poster-container, .company-container, .flex-category1, .cat-pro-container  {	display: grid;	}
	.single-pro, .single-pro-leftimg, .sticky-container, .viewcart-box, .checkout-container, .cat-pro-detail {	grid-template-columns: 1fr;	}
	.header-container, .category-container, .cat-pro-container {	grid-template-columns: 1fr 1fr;	}
	.search-container {	grid-template-columns: 2fr 4fr 1fr; font-size: 10px;	}
	.company-container { grid-template-columns: repeat(4, 1fr); padding: 5px;	}
	.company-container {	grid-template-columns: 1fr 1fr 1fr;	}
	
	
/* Menu */
	.menu { display : none;	}
	.hamburger-icon { display:flex; margin: 10px; height: 20px;}
	.menu.show-menu { display:flex;flex-direction:column;align-items:flex-start;	}
/* End of Menu */

	.heading-bar-left, .sticky-container, .footer-container {	font-size : 15px;	}
	.cat-pro-detail-right {  border-left: none; }

	.sticky-container {	text-align: center;	  padding: 5px; }
	.sticky-msg {	padding: 5px; }
	.company-name {	grid-column: 1 / 3; grid-row: 1;	}
	.logo {	grid-column: 1; grid-row: 2;	}
	.login {	grid-column: 2; grid-row: 2; justify-self: end;	}

	.company-item {	margin: 5px;	}
	.flex-arrange1, .flex-arrange2 {	flex: 1 1 100%;	}
	.flex-category1 {	justify-content: center; padding: 5px;	}
	.cat-img {	padding: 23px;	}
	.cat-title {	font-size: 20px; margin-top: 15px;	}
	.single-pro-leftthumb {	display: flex;	}
	.single-pro-right {	border-top: 5px solid #d5d5d5; border-left: none;	}
	.final-price, .mrp, .saving {	font-size: 16px;	}

.single-pro-leftimg {	padding: 1px;	}
.single-pro-leftimg > div > img {	width: 80%;	}
.single-pro-leftthumb > div > img { width: 80%; height: 80%;	} 
.single-pro-speci .col1 {	font-size: 10px;	}

	
	.viewcart-left-box {	padding: 5px; margin: 1px; font-size : 10px;	}
	.viewcart-left-box img{	height : 40%;	}
	.show_price {	font-size: 10px;	}
	.col-qty {  display: block;	}
	.col-qty input {	width: 30px; font-size: 15px;	}
	.col-qty button {	height: 10px;	}
	.viewcart-right-box {	margin: 2px; padding: 10px;	}
	.plus_button, .minus_button {	text-align: center;	}
	.footer-col-caption {	margin: 0;}
	.section-devider {	height: 15px;	}

}