Save

layout/style-scss/rolety.scss

@@ -13,6 +13,41 @@
 	}
 }
 
+.box-title {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	position: relative;
+	gap: 20px;
+
+	&::after {
+		content: '';
+		height: 1px;
+		background: #878787;
+		display: block;
+		flex: 1;
+	}
+	.box-title-text {
+		color: #3f3f3f;
+		font-size: 35px;
+		font-family: $fLeagueSpartan;
+		font-weight: 100;
+		margin-bottom: 0;
+
+		strong {
+			font-weight: 700;
+		}
+
+		.box-title-separator {
+			display: inline-block;
+			width: 20px;
+			min-width: 20px;
+			height: 20px;
+			background: $cYellow;
+		}
+	}
+}
+
 .box-1 {
 	margin-bottom: 70px;
 
@@ -72,6 +107,8 @@
 }
 
 .box-2 {
+	margin-bottom: 80px;
+
 	.row {
 		max-width: 1240px;
 		margin-left: auto;
@@ -126,3 +163,120 @@
 		}
 	}
 }
+
+.box-3 {
+	padding: 60px 0;
+	margin-bottom: 80px;
+	background: #1d1d1b;
+	box-shadow: 0 7px 4px rgba(0, 0, 0, 0.25);
+
+	.row {
+		> div {
+			// display: flex;
+			// flex-direction: row;
+		}
+	}
+
+	img {
+		margin-bottom: 20px;
+	}
+
+	h3 {
+		color: #fff;
+		font-size: 20px;
+		margin-bottom: 10px;
+		font-family: $font3;
+		letter-spacing: 2px;
+		text-transform: uppercase;
+	}
+
+	p {
+		color: #fff;
+		font-size: 16px;
+		font-family: $font3;
+		font-weight: 300;
+		margin-bottom: 0;
+	}
+}
+
+.box-4 {
+	margin-bottom: 100px;
+
+	.row {
+		&-1 {
+			margin-bottom: 90px;
+		}
+
+		&-2 {
+			.products-nav-bar {
+				padding: 0;
+				margin: 0;
+				list-style: none;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: center;
+				column-gap: 60px;
+				row-gap: 20px;
+
+				.products-nav-bar-item {
+					&.active {
+						a {
+							height: 540px;
+							width: 330px;
+							border-width: 2px;
+							box-shadow: 4px 3px 22px 3px rgba(0, 0, 0, 0.25);
+						}
+
+						h3 {
+							position: relative;
+							font-size: 25px;
+							text-align: left;
+							padding-left: 20px;
+
+							&::before {
+								content: '';
+								position: absolute;
+								left: 0;
+								top: 0;
+								bottom: 0;
+								width: 10px;
+								height: 100%;
+								background: $cYellow;
+							}
+						}
+					}
+
+					a {
+						width: 290px;
+						height: 460px;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						justify-content: center;
+						gap: 40px;
+						background: #fff;
+						border: 1px solid #000;
+						box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+						border-radius: 20px;
+						cursor: pointer;
+						transition: all 0.3s ease-in-out;
+
+						padding: 40px;
+					}
+
+					h3 {
+						color: #1d1d1b;
+						font-family: $font3;
+						font-style: 22px;
+						font-weight: 900;
+						letter-spacing: 2px;
+						margin: 0;
+						text-align: center;
+						text-transform: uppercase;
+					}
+				}
+			}
+		}
+	}
+}