vidok.com/layout/style-scss/o-nas.scss

@import 'variables';
@import '_mixins';

html {
	scroll-behavior: smooth;
	scroll-padding-top: 105px;
}

strong {
	font-weight: 700;
}

p {
	&:last-child {
		margin-bottom: 0;
	}
}

.main-page {
	padding: 0;
}
.breadcrumbs {
	margin: 24px 0;
}

.box-1 {
	display: flex;
	flex-direction: column;

	._row {
		&-1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 30px;

			._col {
				&-1 {
					width: 100%;
					max-width: 430px;

					h1 {
						position: relative;
						color: $cTxtBlack;
						font-family: $font3;
						font-size: 64px;
						letter-spacing: 2px;
						line-height: 1.1;
						font-weight: 700;
						text-transform: uppercase;
						margin-bottom: 25px;
						padding-bottom: 15px;

						&::before {
							content: '';
							position: absolute;
							left: 0;
							bottom: 0;
							width: 100%;
							max-width: 390px;
							height: 2px;
							background: $cTxtBlack;
						}
					}
					h2 {
						color: $cTxtBlack;
						font-family: $font3;
						font-size: 30px;
						letter-spacing: 2px;
						line-height: 1.2;
						font-weight: 300;
						text-transform: uppercase;
					}
				}

				&-2 {
					line-height: 0;

					video {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		&-2 {
			margin-top: 34px;
			margin-bottom: 72px;

			._col {
				&-1 {
					position: relative;
					height: 64px;

					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 0;
						width: calc(50% - 50px);
						height: 1px;
						background: #878787;
					}
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						right: 0;
						width: calc(50% - 50px);
						height: 1px;
						background: #878787;
					}
					.img_box {
						position: relative;
						width: 56px;
						height: 64px;
						border-radius: 100%;
						box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
						z-index: 1;

						display: flex;
						align-items: center;
						justify-content: center;
						background: $cWhite;
						margin-left: auto;
						margin-right: auto;

						img {
						}
					}
				}
			}
		}
	}
}

.box-2 {
	background-image: url('/upload/filemanager/Pages/O-nas/box-bg-1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 86px 0 90px;

	._row {
		&-1 {
			margin-bottom: 50px;

			._col {
				&-1 {
					width: 100%;
					max-width: 850px;

					p {
						color: $cTxtBlack;
						font-family: $font3;
						font-size: 22px;
						font-weight: 300;
						letter-spacing: -0.04px;
						line-height: 1.5;

						strong {
							font-weight: 600;
						}
					}
				}
				&-2 {
				}
			}
		}
		&-2 {
			._col {
				&-1 {
					display: flex;
					flex-direction: row;
					column-gap: 70px;
					align-items: flex-end;
					margin-left: 70px;

					._col-img {
					}

					._col-data {
						p {
							color: $cTxtBlack;
							font-family: $font3;
							font-size: 20px;
							font-weight: 600;
							letter-spacing: 2px;
							line-height: 1;
							text-transform: uppercase;
							margin-bottom: 10px;
							margin-left: 44px;
						}
						h3 {
							color: $cWhite;
							font-size: 32px;
							font-family: $font3;
							font-weight: 700;
							letter-spacing: 2px;
							line-height: 1;
							margin-bottom: 0;
							text-transform: uppercase;

							display: inline-block;
							padding: 16px 44px 9px;
							border-radius: 50px;
							background: rgba(#2e2d2c, 0.8);
						}
					}
				}
			}
		}
	}
}

.box-3 {
	margin-top: -50px;
	margin-bottom: 130px;

	._row {
		&-1 {
			._col {
				&-1 {
					ol {
						list-style: none;
						padding: 0;
						margin: 0;
						display: flex;
						flex-direction: row;
						gap: 32px;

						li {
							border-radius: 20px;
							background: $cWhite;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							padding: 20px 10px;
							box-shadow: 4px 3px 22px 3px rgba(0, 0, 0, 0.25);

							width: calc(100% / 4);

							img {
								width: 100%;
								max-width: fit-content;
								margin-bottom: 17px;
							}

							h3 {
								color: $cTxtBlack;
								font-size: 18px;
								font-family: $font3;
								font-weight: 600;
								margin-bottom: 3px;
								text-transform: uppercase;
							}

							p {
								color: $cTxtBlack;
								font-size: 18px;
								font-family: $font3;
								font-weight: 300;
								text-transform: uppercase;
							}
						}
					}
				}
			}
		}
	}
}

.box-4 {
	._row {
		&-1 {
			._col {
				&-1 {
					position: relative;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						right: 0;
						top: 50%;
						height: 1px;
						background: #878787;
						transform: translateY(-50%);
					}

					h2 {
						position: relative;
						display: inline-block;
						color: $cTxtBlack;
						font-size: 32px;
						font-family: $font3;
						font-weight: 500;
						letter-spacing: 2px;
						margin-bottom: 0;
						text-transform: uppercase;
						padding-right: 30px;
						padding-top: 3px;
						background: $cWhite;
					}
				}
			}
		}
	}
}