@import url('https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css');

@import url('https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css');

@import url('https://cdn-uicons.flaticon.com/uicons-bold-rounded/css/uicons-bold-rounded.css');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

@import url('https://cdn-uicons.flaticon.com/uicons-solid-straight/css/uicons-solid-straight.css');

@import url('https://cdn-uicons.flaticon.com/uicons-brands/css/uicons-brands.css');

@import url('https://cdn-uicons.flaticon.com/uicons-bold-straight/css/uicons-bold-straight.css');



 * {
 	box-sizing: border-box;
 	margin: 0;
 	padding: 0;
 }

 body {
 	font-family: Poppins, sans-serif;
 	line-height: 1.6;
 	color: #333;
 	background-color: #f2f6f8;
 }

 .header {
 	background-color: #197bbd;
 	color: white;
 	padding: 1.3rem 2rem;
 }

 .nav-container {
 	background-color: #1b204b;
 	padding: 1rem 0;
 	position: sticky;
 	top: 0;
 	z-index: 1000;
 }

 .nav {
 	/*max-width: 1200px;*/
 	margin: 0 auto;
 	padding: 0 20px;

 }

 .nav-menu {
 	list-style: none;
 	display: flex;
 	flex-wrap: wrap;
 	gap: 10px;
 }

 .nav-item {
 	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
 }

 .nav-link {
 	color: white;
 	text-decoration: none;
 	padding: 8px 11px;
 	border-radius: 4px;
 	transition: background-color 0.3s;
 }

 .nav-link:hover {
 	background-color: #2b3370;
 }

 .nav-link.active {
 	background-color: #ff0048;
 }

 .container {
 	
 	margin: 0 auto;
 	padding: 20px;
 }

 .category-title {
 	margin: 20px 0;
 	padding: 10px;
 	text-align: left;
 	font-size: 28px;
 	color: #2c3e50;
 }

 .products {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 	gap: 20px;
 	margin-top: 2rem;
 }

 .product-card {
 	background: white;
 	border-radius: 8px;
 	padding: 20px;
 	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 	transition: transform 0.3s ease;
 	display: flex;
 	flex-direction: column;
 	text-decoration: none;
 	color: inherit;
 }

 .product-card:hover {
 	transform: translateY(-5px);
 }

 .product-image {
 	width: 200px;
 	height: 200px;
 	object-fit: cover;
 	margin: 0 auto 15px;
 	border-radius: 4px;
 }

 .product-name {
 	font-size: 1.2rem;
 	margin-bottom: 10px;
 	color: #2c3e50;
 }

 .product-price {
 	font-size: 2.5rem;
	font-weight: 700;
 	color: #ff0048;
 	margin: 10px 0;
 }

 .product-description {
 	font-size: 0.9rem;
 	margin-bottom: 15px;
 	flex-grow: 1;
 }

 .product-meta {
 	font-size: 0.8rem;
 	color: #666;
 	margin-bottom: 10px;
 }

 .buy-button {
 	display: inline-block;
 	padding: 10px 20px;
 	background-color: #ff0048;
 	color: white;
 	text-decoration: none;
 	border-radius: 5px;
 	transition: background-color 0.3s ease;
 	text-align: center;
 	margin-top: auto;
 }

 .product-card:hover .buy-button {
 	background-color: #1b204b;
 }

 .mobile-nav-toggle {
 	display: none;
 	background: none;
 	border: none;
 	color: white;
 	font-size: 1.5rem;
 	cursor: pointer;
 	padding: 10px;
 }

 @media (max-width: 768px) {

.nav {
		/*max-width: 1200px;*/
		margin: 0 auto;
		padding: 0 20px;
		
	}




 	.nav-menu {
 		display: block;
 		width: 100%;
 		flex-direction: column;
 		gap: 3px;
 	}





	
 	.nav-menu.active {
 		display: flex;
		flex: content;

 	}

 	.nav-item {
 		width: 100%;
 	}

 .nav-item {
 	margin-top: 1px;
 	margin-bottom: 1px;
 }


 	.nav-link {
 		display: block;
 		padding: 10px;
 		text-align: center;
 	}
 }

 @media (max-width: 600px) {
 	.header {
 		padding: 1rem;
 	}

 .nav {
 	/*max-width: 1200px;*/
 	margin: 0 auto;
 	padding: 0 20px;

 }

	  	.mobile-nav-toggle {
	  		display: block;
	  	}
		
	 	.nav-menu {
	 		display: none;
	 		width: 100%;
	 		flex-direction: column;
	 		gap: 0px;
	
	 	}
		
 	.container {
 		padding: 10px;
 	}

 	.product-image {
 		width: 150px;
 		height: 150px;
 	}
 }