.main {
			padding: 2% 7%;
		}

		.main p {
			font-weight: 600;
			font-size: 30px;
		}

		#product-list {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.product-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			margin-bottom: 10%;
		}

		.d-flex {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			flex-wrap: wrap;
		}

		.align-center {
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
		}

		.flex-centerY-centerX {
			justify-content: center;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
		}


		.page-wrapper {
			height: 100%;
			display: table;
		}

		.page-wrapper .page-inner {
			display: table-cell;
			vertical-align: middle;
		}

		.el-wrapper {
			width: 300px;
			padding: 15px;
			margin: 15px auto;
			background-color: #fff;
		}

		.el-wrapper:hover .h-bg {
			left: 0px;
		}

		.el-wrapper:hover .price {
			left: 20px;
			-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			transform: translateY(-50%);
			color: #818181;
		}

		.el-wrapper:hover .add-to-cart {
			left: 50%;
		}


		.el-wrapper:hover .img {
			webkit-filter: blur(7px);
			-o-filter: blur(7px);
			-ms-filter: blur(7px);
			filter: blur(7px);
			filter: progid:DXImageTransform.Microsoft.Blur(pixelradius='7', shadowopacity='0.0');
			opacity: 0.4;
		}

		.el-wrapper:hover .info-inner {
			bottom: 155px;
		}

		.el-wrapper:hover .a-size {
			-webkit-transition-delay: 300ms;
			-o-transition-delay: 300ms;
			transition-delay: 300ms;
			bottom: 50px;
			opacity: 1;
		}

		.el-wrapper .box-down {
			width: 100%;
			height: 60px;
			position: relative;
			overflow: hidden;
		}

		.el-wrapper .box-up {
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
			text-align: center;
			cursor: pointer;
		}

		.el-wrapper .img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
			-webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
			-moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
			-o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
			transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
			/* ease-out */
			-webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			-moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			-o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			/* ease-out */

		}

		.h-bg {
			-webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
			-moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
			-o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
			transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
			/* ease-out */
			-webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			-moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			-o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			/* ease-out */
			width: 660px;
			height: 100%;
			background-color: #dc9897;
			position: absolute;
			left: -659px;
		}

		.h-bg .h-bg-inner {
			width: 50%;
			height: 100%;
			background-color: #464646;
		}

		.info-inner {
			-webkit-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
			-moz-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
			-o-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
			transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
			/* ease-out */
			-webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			-moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			-o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			/* ease-out */
			position: absolute;
			width: 100%;
			bottom: 45px;
		}

		.info-inner .p-name,
		.info-inner .p-company {
			opacity: 0;
			transform: translateY(10px);
			transition: opacity 0.4s ease, transform 0.4s ease;
		}

		.el-wrapper:hover .info-inner .p-name,
		.el-wrapper:hover .info-inner .p-company {
			opacity: 1;
			transform: translateY(0);
			display: flex;
			flex-direction: column;
		}

		.info-inner .p-name {
			font-family: 'PT Sans', sans-serif;
			font-size: 18px;
			color: #252525;
		}

		.info-inner .p-company {
			font-family: 'Lato', sans-serif;
			font-size: 12px;
			text-transform: uppercase;
			color: #8c8c8c;
		}

		.a-size {
			-webkit-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
			-moz-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
			-o-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
			transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
			/* ease-out */
			-webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			-moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			-o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			/* ease-out */
			position: absolute;
			width: 100%;
			bottom: -20px;
			font-family: 'PT Sans', sans-serif;
			color: #828282;
			opacity: 0;
		}

		.a-size .size {
			color: #252525;
		}

		.cart {
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			font-family: 'Lato', sans-serif;
			font-weight: 700;
		}

		.cart .price {
			-webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
			-moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
			-o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
			transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
			/* ease-out */
			-webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			-moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			-o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			/* ease-out */
			-webkit-transition-delay: 100ms;
			-o-transition-delay: 100ms;
			transition-delay: 100ms;
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			font-size: 16px;
			color: #252525;
		}

		.cart .add-to-cart {
			-webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
			-moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
			-o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
			transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
			/* ease-out */
			-webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			-moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			-o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
			/* ease-out */
			-webkit-transition-delay: 100ms;
			-o-transition-delay: 100ms;
			transition-delay: 100ms;
			display: block;
			position: absolute;
			top: 50%;
			left: 110%;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}

		.cart .add-to-cart .txt {
			font-size: 12px;
			color: #fff;
			letter-spacing: 0.045em;
			text-transform: uppercase;
			white-space: nowrap;
		}

		.pagination {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 8px;
			padding: 20px 0;
			flex-wrap: wrap;
		}

		.pagination a {
			padding: 8px 14px;
			text-decoration: none;
			color: #333;
			background-color: #f0f0f0;
			border: 1px solid #ccc;
			border-radius: 6px;
			transition: all 0.2s ease;
			font-size: 16px;
		}

		.pagination a:hover {
			background-color: #e0e0e0;
		}

		.pagination a.active {
			background-color: #007bff;
			color: #fff;
			border-color: #007bff;
			font-weight: bold;
		}


		/* ==== Media Queries for Responsive Design ==== */

		/* Large desktops (≥ 1200px) */
		@media (min-width: 1200px) {
			.product-grid {
				grid-template-columns: repeat(4, 1fr);
			}
		}

		/* Desktops and laptops (992px - 1199px) */
		@media (max-width: 1199px) {
			.product-grid {
				grid-template-columns: repeat(3, 1fr);
			}
		}

		/* Tablets (768px - 991px) */
		@media (max-width: 991px) {
			.main {
				padding: 3% 5%;
			}

			.main p {
				font-size: 24px;
			}

			.product-grid {
				grid-template-columns: repeat(2, 1fr);
			}

			.el-wrapper {
				width: 100%;
				height: 100%;
				margin-bottom: 20px;
			}

		}

		/* Mobile devices (≤ 767px) */
		@media (max-width: 767px) {
			.main {
				padding: 4% 3%;
			}

			.main p {
				font-size: 20px;
				text-align: center;
			}

			.product-grid {
				grid-template-columns: repeat(1, 1fr);
				justify-items: center;
			}

			.el-wrapper {
				width: 90%;
				margin: 20px auto;
			}
		}