Add new banners for single product and "materace" category

themes/leo_lulandia/assets/css/dr_materac.scss

@@ -5850,3 +5850,147 @@ body {
 		font-family: inherit;
 	}
 }
+
+body #product-services {
+	&.c-services-row {
+		display: flex;
+		flex-direction: row;
+		gap: 20px;
+		width: 100%;
+
+		.c-col {
+			width: calc(100% / 5 - (20px - (20px / 5)));
+
+			.c-block {
+				display: flex;
+				flex-direction: column;
+				row-gap: 15px;
+				align-items: center;
+
+				img {
+					width: 100%;
+					max-width: 80px;
+				}
+
+				p {
+					color: #3e2780;
+					font-size: 12px;
+					font-weight: 500;
+					text-align: center;
+					margin: 0;
+				}
+			}
+		}
+	}
+}
+
+body .c-category-box {
+	margin-top: 40px;
+	margin-bottom: 70px;
+
+	.c-box-row-1 {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		column-gap: 50px;
+		margin-bottom: 50px;
+
+		.c-col-1 {
+			width: 100%;
+			max-width: 360px;
+
+			@media (max-width: 600px) {
+				max-width: unset;
+			}
+
+			h2 {
+				font-family: 'Poppins', sans-serif;
+				font-weight: 600;
+				line-height: 1.1;
+				font-size: 38px;
+				margin-bottom: 30px;
+
+				@media (max-width: 765px) {
+					font-size: 30px;
+				}
+			}
+			p {
+				font-family: 'Poppins', sans-serif;
+				font-weight: 400;
+				line-height: 1.1;
+				font-size: 17px;
+				margin-bottom: 35px;
+
+				@media (max-width: 765px) {
+					font-size: 15px;
+				}
+			}
+
+			a {
+				display: inline-block;
+				color: #fff;
+				background: #7138e4;
+				padding: 15px 30px;
+				border-radius: 10px;
+				font-size: 18px;
+				font-weight: 400;
+
+				@media (max-width: 765px) {
+					font-size: 15px;
+				}
+			}
+		}
+		.c-col-2 {
+			@media (max-width: 600px) {
+				display: none;
+			}
+			.img-box {
+				img {
+					width: 100%;
+					max-width: 500px;
+				}
+			}
+		}
+	}
+	.c-box-row-2 {
+		#category-services {
+			display: flex;
+			flex-direction: row;
+			gap: 20px;
+			width: 100%;
+
+			@media (max-width: 600px) {
+				flex-wrap: wrap;
+				justify-content: center;
+			}
+
+			.c-col {
+				width: calc(100% / 5 - (20px - (20px / 5)));
+
+				@media (max-width: 600px) {
+					min-width: 100px;
+				}
+				.c-block {
+					display: flex;
+					flex-direction: column;
+					row-gap: 15px;
+					align-items: center;
+
+					img {
+						width: 100%;
+						max-width: 80px;
+					}
+
+					p {
+						color: #3e2780;
+						font-size: 12px;
+						font-weight: 500;
+						text-align: center;
+						margin: 0;
+					}
+				}
+			}
+		}
+	}
+}