.content-wrapper {
  width: 90%; /* Fluid width for responsiveness */
  max-width: 1050px; /* Maximum width to keep layout consistent on large screens */
  margin: 0 auto; /* Center content */
}

main .featured {
	display: flex;
	flex-direction: column;
	background-image: url(imgs/featured-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	align-items: left;
	justify-content: left;
	text-align: left;
}
main .recentlyadded h2 {
  display: block;
  font-weight: 300; /* Poppins Light */
  margin: 0;
  padding: 40px 0;
  font-size: 24px;
  text-align: left;
  width: 100%;
  border-bottom: 1px solid #EEEEEE;
}

main .recentlyadded .products,
main .products .products-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* Use flex-start for alignment */
  justify-content: space-between;
  padding: 40px 0 0 0;
}

main .recentlyadded .products .product,
main .products .products-wrapper .product {
  display: block;
  overflow: hidden;
  text-decoration: none;
  width: 100%; /* Default width for smaller screens */
  padding-bottom: 60px;
  font-weight: 300; /* Poppins Light */
}

/* Media Query for Medium Screens (Tablets, etc.) */
@media (min-width: 768px) {
  main .recentlyadded .products .product,
  main .products .products-wrapper .product {
    width: 48%; /* Two products per row */
  }
    main .about {
	width: 50%;
	}
}

/* Media Query for Larger Screens (Desktops) */
@media (min-width: 1024px) {
  main .recentlyadded .products .product,
  main .products .products-wrapper .product {
	width: 23%; /* Four products per row */
  }
  main > .product {
	display: flex;
  }
  main > .product form input[type="number"] {
	width: 400px;
  }
  main .about {
	width: 35%;
	}
	main .about h1 {
		font-size: 50px;
	}
	main .about p {
		font-size: 18px;
	}
}

main .recentlyadded .products .product img,
main .products .products-wrapper .product img {
  transform: scale(1);
  transition: transform 1s;
}

main .recentlyadded .products .product .name,
main .products .products-wrapper .product .name {
  display: block;
  color: #555555;
  padding: 20px 0 2px 0;
}

main .recentlyadded .products .product .price,
main .products .products-wrapper .product .price {
  display: block;
  color: #999999;
  font-weight: 300; /* Poppins Light */
}

main .recentlyadded .products .product .rrp,
main .products .products-wrapper .product .rrp {
  color: #BBBBBB;
  text-decoration: line-through;
  font-weight: 300; /* Poppins Light */
}

main .recentlyadded .products .product:hover img,
main .products .products-wrapper .product:hover img {
  transform: scale(1.05);
  transition: transform 1s;
}

main > .product {
	padding: 40px 0;
	font-weight: 300; /* Poppins Light */
}
main > .product > div {
	padding-left: 15px;
}
main > .product h1 {
	font-size: 34px;
	font-weight: 200; /* Poppins Thin */
	margin: 0;
	padding: 20px 0 10px 0;
}
main > .product .price {
	display: block;
	font-size: 22px;
	color: #999999;
}

main > .product form {
	display: flex;
	flex-flow: column;
	margin: 40px 0;
}
main > .product form input[type="number"] {
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 0px;
	font-weight: 300; /* Poppins Light */
}
main > .product form input[type="submit"] {
	    padding: 12px 20px;
    border: 0;
    cursor: pointer;
    border-radius: 0px;
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    font-family: Poppins, sans-serif;
    font-size: 15px;
	font-weight: 300; /* Poppins Light */
}
main > .product form input[type="submit"]:hover {
	background-color: #000000;
    color: #ffffff;
    font-family: Poppins, sans-serif;
    font-size: 15px;
	font-weight: 300; /* Poppins Light */
}
main > .products h1 {
	display: block;
	font-weight: 200; /* Poppins Thin */
	margin: 0;
	padding: 10px 0;
	font-size: 34px;
	text-align: left;
	width: 100%;
}
main > .products .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main > .products .buttons a {
	display: inline-block;
	text-decoration: none;
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	background: #4e5c70;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 300; /* Poppins Light */
	border-radius: 0px;
}
main > .products .buttons a:hover {
	background: #434f61;
}

main .cart h1 {
	display: block;
	font-weight: 200; /* Poppins Thin */
	margin: 0;
	padding: 40px 0;
	font-size: 34px;
	text-align: center;
	width: 100%;
}
main .cart table {
	width: 100%;
}
main .cart table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
	text-align: right;
}
main .cart table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
	text-align: right;
}
main .cart table .img {
	width: 80px;
}
main .cart table .remove {
	color: #777777;
	font-size: 12px;
	padding-top: 3px;
	font-weight: 300; /* Poppins Light */
}

main .cart table .price {
	color: #999999;
}
main .cart table a {
	text-decoration: none;
	color: #555555;
	font-weight: 300; /* Poppins Light */
}
main .cart table input[type="number"] {
	width: 68px;
	padding: 10px;
	border: 1px solid #ccc;
	color: #555555;
	border-radius: 0px;
	font-weight: 300; /* Poppins Light */
}
main .cart .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .cart .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
	font-weight: 300; /* Poppins Light */
}
main .cart .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .cart .buttons {
	text-align: right;
	padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
	margin-left: 5px;
	padding: 12px 20px;
	border: 0;
	cursor: pointer;
	border-radius: 0px;
	background-color: #ffffff;
	color: #000000;
	border: 2px solid  #000000;
	font-family: Poppins, sans-serif; 
	font-size: 15px; 
}
main .cart .buttons input[type="submit"]:hover {
	  background-color: #000000;
	color: #ffffff;
  font-family: Poppins, sans-serif;  
   font-size: 15px;  
}
main .product .buttons {
    
    padding: 12px 20px;
    border: 0;
    cursor: pointer;
    border-radius: 0px;
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    
}

main .product .buttons:hover {
    background-color: #000000;
    color: #ffffff;
    font-family: Poppins, sans-serif;
    font-size: 15px;
}
main .thanks h1 {
	display: block;
    font-weight: 200; /* Poppins Thin */
	margin: 0;
	padding: 10px 0;
	font-size: 34px;
	text-align: center;
	width: 100%;
}
main .thanks p {
	text-align: center;
	font-weight: 300; /* Poppins Light */
}
main .message h1 {
	display: block;
	font-weight: 200; /* Poppins Thin */
	margin: 0;
	padding: 10px 0;
	font-size: 34px;
	text-align: center;
	width: 100%;
}
main .message p {
	text-align: center;
	font-weight: 300; /* Poppins Light */
}
main .placeorder h1 {
	display: block;
	font-weight: 200; /* Poppins Thin */
	margin: 0;
	padding: 10px 0;
	font-size: 34px;
	text-align: center;
	width: 100%;
}
main .placeorder p {
	text-align: center;
	font-weight: 300; /* Poppins Light */
}


main h1.hidden {
    display: none !important; /* Ensures it's completely removed from layout */
    padding: 0;
    margin: 0;
}
main p.hidden {
	display: none !important; /* Ensures it's completely removed from layout */
    padding: 0;
    margin: 0;
}

main .placeorder table {
	width: 100%;
}
main .placeorder table thead td {
	padding: 30px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .placeorder table thead td:last-child {
	text-align: right;
}
main .placeorder table tbody td {
	padding: 20px 0;
	border-bottom: 1px solid #EEEEEE;
}
main .placeorder table tbody td:last-child {
	text-align: right;
}
main .placeorder table .img {
	width: 80px;
}

main .placeorder table .price {
	color: #999999;
}
main .placeorder table a {
	text-decoration: none;
	color: #555555;
}
main .placeorder .subtotal {
	text-align: right;
	padding: 40px 0;
}
main .placeorder .subtotal .text {
	padding-right: 40px;
	font-size: 18px;
}
main .placeorder .subtotal .price {
	font-size: 18px;
	color: #999999;
}
main .home h1 {
	font-size: 34px;
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 20px;
	font-family: Poppins, sans-serif;
    font-weight: 200; /* Poppins Thin */
	color: white;
}

@media (max-width: 850px) {
	main .home h1 {
		font-size: 24px;
	}
}

	@media (max-width: 450px) {
	main .home h1 {
		font-size: 16px;
	}
}

main .about h1 {
	font-size: 34px;
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 20px;
	font-family: Poppins, sans-serif;
    font-weight: 200; /* Poppins Thin */
}
main .about p {
	text-align: center;
	margin: 0;
	padding: 20px;
	opacity: 0;
    transform: translateY(20px);
    transition: opacity 2s ease, transform 2s ease;	
}
main .about {
	font-family: Poppins, sans-serif;
    font-weight: 300; /* Poppins Light */
}

main .work h1 {
	font-size: 34px;
	text-align: center;
	width: 100%;
	margin: 0;
	padding-bottom: 20px;
	font-family: Poppins, sans-serif;
    font-weight: 200; /* Poppins Thin */
}
main .work p {
	text-align: center;
	margin: 0;
	padding: 20px;

}
main .work {
	font-family: Poppins, sans-serif;
    font-weight: 300; /* Poppins Light */
	display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Scrollbar track color */
    border-radius: 10px; /* Border radius for the scrollbar track */
}

::-webkit-scrollbar-thumb {
    background: #bd8bbe; /* Scrollbar thumb color */
    border-radius: 10px; /* Border radius for the scrollbar thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: #bbcbd4; /* Change thumb color on hover */
}

/* Firefox */
* {
    scrollbar-color: #bd8bbe #f1f1f1; /* Thumb and track color */
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb {
    border-radius: 10px; /* Apply border radius for the thumb and track */
}