cdnPRO/modoo-pl/styles/wspolpraca-franczyzowa/style.scss

// out: style.css, compress: true, sourceMap: true
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
$cGreen: #19f3e1;
$cBlack: #000;
$cWhite: #fff;
$cGray: #f3f3f3;

body {
	overflow-x: hidden;
}
.container {
	@media (min-width: 1430px) {
		max-width: 1427px;
	}
}

.title {
	font-family: "Raleway", sans-serif;
	font-weight: 800;
	font-size: 62px;
	line-height: 1;

	@media (max-width: 979px) {
		font-size: 46px;
	}

	@media (max-width: 757px) {
		font-size: 36px;
	}
}

.btn-green {
	background: $cGreen;
	color: $cBlack;
	width: 100%;
	max-width: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	font-family: "Raleway", sans-serif;
	font-size: 20px;
	font-weight: 600;

	strong {
		margin-left: 10px;
		font-weight: 800;
	}
}

.box {
	padding-top: 100px;
	padding-bottom: 100px;

	@media (max-width: 979px) {
		padding-top: 75px;
		padding-bottom: 75px;
	}
}

.text_menu_title_header,
.footer_fixed {
	display: none;
}

.hero-baner {
	display: block;
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 7%;
}
.hero {
	position: relative;

	.scroll-down {
		position: absolute;
		left: 50%;
		bottom: -10%;
		transform: translateX(-50%);

		@media (max-width: 978px) {
			display: none;
		}
	}

	.text {
		@extend .title;
		position: absolute;
		left: 15%;
		top: 9%;
		color: $cWhite;
	}

	img,
	video {
		max-width: 1100px;
		display: block;
		margin: auto;
		width: 100%;
	}

	@media (max-width: 757px) {
		.text {
			font-size: 32px;
		}
	}
}

.stats {
	position: relative;
	padding-bottom: 35px;
	margin-bottom: 80px;

	@extend .box;
	font-family: "Raleway", sans-serif;
	text-align: center;

	&::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		height: 4px;
		background: #dddddd;
		width: 100vw;
		transform: translateX(-50%);
	}
	.columns {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		column-gap: 70px;
		row-gap: 40px;

		.column_01,
		.column_02,
		.column_03 {
			flex: 1;
			min-width: 300px;
		}
	}

	.first_line {
		font-weight: 800;
		font-size: 57px;
		margin-bottom: 20px;
		color: $cBlack;
	}

	.second_line {
		color: $cGreen;
		font-size: 38px;
		font-weight: medium;
		font-style: italic;
		line-height: 1.25;
	}

	@media (max-width: 979px) {
		.first_line {
			font-size: 48px;
			margin-bottom: 10px;
		}

		.second_line {
			font-size: 28px;
		}
	}
}

.open_shop {
	@extend .box;
	background: $cGray;
	font-family: "Raleway", sans-serif;
	font-size: 20px;
	padding-left: 75px;
	padding-right: 75px;
	padding-bottom: 40px;

	.columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding-bottom: 40px;

		.steps {
			display: grid;
			grid-template-columns: 1fr;
			gap: 30px;
		}

		.step {
			display: grid;
			grid-template-columns: 115px 1fr;
			gap: 20px;
			padding-right: 50px;

			.number {
				background: $cGreen;
				width: 115px;
				height: 115px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 86px;
				color: #fff;
				border-radius: 50%;
				font-weight: 600;
			}
			p {
				margin-bottom: 3px;
			}

			ul {
				list-style: none;
				padding-left: 0 !important;

				li {
					position: relative;
					padding-left: 15px;

					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 13px;
						height: 2px;
						width: 6px;
						background-color: #333;
						transform: translateY(-50%);
					}
				}
			}
		}

		.title {
			@extend .title;
			margin-left: 135px;
			margin-bottom: 75px;

			&.h1 {
				color: #adadad;
				margin-bottom: 20px;
				font-size: 26px;
			}
		}

		.column_02 {
			text-align: center;
			display: flex;
			align-items: center;

			img {
				max-width: 100%;
			}
		}
	}

	@media (max-width: 1430px) {
		.columns {
			.column_01 {
				.title {
					margin-left: 50px;
				}
			}
		}
	}

	@media (max-width: 1200px) {
		.columns {
			grid-template-columns: 1fr;

			.column_01 {
				.title {
					text-align: center;
					margin-left: 0px;

					br {
						display: none;
					}
				}
			}

			.column_02 {
				grid-row: 1;
				justify-content: center;
			}
		}
	}

	@media (max-width: 757px) {
		.columns {
			.steps {
				.step {
					padding-right: 0;
					grid-template-columns: 1fr;
					text-align: center;

					.number {
						margin-left: 50%;
						transform: translateX(-50%);
					}

					.text {
						a.btn {
							margin-left: auto;
							margin-right: auto;
						}
					}
				}
			}
		}
	}

	@media (max-width: 500px) {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.info {
	@extend .box;
	font-family: "Raleway", sans-serif;
	display: flex;
	justify-content: center;

	.columns {
		display: flex;
		flex-wrap: wrap;
		gap: 50px 100px;
		justify-content: center;

		.column {
			width: 100%;
			max-width: 450px;

			&.active {
				.text {
					display: block;
				}
			}

			.text {
				background: $cGray;
				padding: 75px 25px 25px;
				font-size: 16px;
				display: none;

				ul {
					list-style-type: none;
					margin: 0;
					padding: 0;

					li {
						position: relative;
						padding-left: 30px;
						margin-bottom: 20px;

						&::before {
							content: "";
							display: block;
							height: 20px;
							width: 20px;
							background: $cGreen;
							border-radius: 50%;
							position: absolute;
							top: 0;
							left: 0;
						}
					}
				}
			}

			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				background: $cGreen;
				color: #fff;
				font-size: 38px;
				font-weight: 800;
				line-height: 1;
				text-align: center;
				padding: 40px 25px;
				position: relative;
				height: 156px;

				span {
					height: 60px;
					background: #fff;
					border: 5px solid $cGreen;
					display: flex;
					width: 60px;
					align-items: center;
					justify-content: center;
					color: $cGreen;
					border-radius: 50%;
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translate(-50%, 50%);
					cursor: pointer;
				}
			}
		}
	}

	@media (max-width: 757px) {
		.columns {
			.column {
				.title {
					font-size: 30px;
					padding: 30px 15px;
					height: 130px;
				}
			}
		}
	}
}

.faq {
	@extend .box;
	font-family: "Raleway", sans-serif;

	.title {
		@extend .title;
		text-align: center;
		margin-bottom: 75px;
	}

	.accordion {
		max-width: 1000px;
		margin: auto;

		.single_faq {
			color: $cBlack;

			&.active {
				.faq_text {
					display: block;
				}
			}

			.faq_title {
				padding: 20px;
				display: flex;
				justify-content: space-between;
				border: 1px solid $cGray;
				font-weight: 600;
				font-size: 20px;
				align-items: center;

				i {
					display: flex;
					height: 30px;
					width: 30px;
					justify-content: center;
					align-items: center;
					cursor: pointer;
				}
			}

			.faq_text {
				padding: 20px;
				border: 1px solid $cGray;
				border-top: 0;
				border-bottom: 0;
				font-size: 16px;
				display: none;

				&:last-child {
					border-bottom: 1px solid $cGray;
				}
			}
		}
	}

	@media (max-width: 757px) {
		.accordion {
			.single_faq {
				.faq_title {
					font-size: 16px;
				}
			}
		}
	}
}

.moodo {
	@extend .box;
	font-family: "Raleway", sans-serif;
	background: url("https://moodo.pl/data/include/cms/wspolpraca-franczyzowa/moodo-bg.png")
		no-repeat center 165px #fff;

	.columns {
		display: flex;
		justify-content: center;
		gap: 50px 135px;

		.column {
			width: 100%;
			max-width: 333px;
			text-align: center;

			strong {
				display: block;
				font-size: 42px;
				color: $cBlack;
			}

			a {
				font-size: 19px;
				color: $cGreen;
				font-weight: 600;
			}
		}
	}

	@media (max-width: 979px) {
		background-position-y: 110px;

		.columns {
			.column {
				img {
					max-width: 280px;
				}

				strong {
					font-size: 38px;
				}
			}
		}
	}

	@media (max-width: 757px) {
		background: none;

		.columns {
			flex-direction: column;
			align-items: center;

			.column {
				max-width: unset;
				background: url("https://moodo.pl/data/include/cms/wspolpraca-franczyzowa/moodo-bg.png")
					no-repeat center 35px #fff;

				.strong {
					font-size: 26px;
				}

				a {
					font-size: 17px;
				}
			}
		}
	}
}

.support {
	@extend .box;
	font-family: "Raleway", sans-serif;

	.title {
		text-align: center;
		margin-bottom: 75px;
	}

	.columns {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 35px 70px;

		@media (max-width: 757px) {
			row-gap: 70px;
		}

		.column {
			img {
				margin-bottom: 15px;
			}

			.support_title {
				font-size: 23px;
				font-weight: 600;
				margin-bottom: 10px;
			}

			.support_text {
				font-size: 17px;
				font-weight: 17px;
			}
		}
	}

	@media (max-width: 1200px) {
		.columns {
			grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
			justify-content: center;
			column-gap: 40px;
		}
	}

	@media (max-width: 757px) {
		.columns {
			.column {
				text-align: center;
			}
		}
	}
}

.contact {
	@extend .box;
	position: relative;
	font-family: "Raleway", sans-serif;
	background: $cGray;

	.columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 50px;

		.column_01 {
			padding-left: 75px;

			form {
				label {
					display: block;
					font-size: 16px;
				}

				input {
					width: 100%;
					background: #fff;
					border: 1px solid #9f9f9f;
					max-width: 350px;
					height: 40px;
					margin-bottom: 10px;

					&[type="radio"] {
						width: auto;
						height: fit-content;
						margin-top: 2px;
					}
				}

				button {
					background: $cBlack;
					color: $cWhite;
					padding: 5px 35px;
					border: 0;
				}
				.check_tiles {
					display: flex;
					flex-direction: row;
					gap: 20px;
					margin-bottom: 20px;

					.check_tile {
						display: flex;
						flex-direction: row;
						gap: 10px;
					}
				}
				.errorHold {
					color: #cc0000;
					font-weight: 600;
					display: none;
				}

				.successHold {
					position: absolute;
					inset: 0;
					align-items: center;
					justify-content: center;
					background: #f3f3f3;

					font-weight: 800;
					font-size: 62px;
					line-height: 1.3;
					font-style: italic;
					text-align: center;
					text-transform: uppercase;

					display: none;

					@media (max-width: 979px) {
						font-size: 32px;
					}
					@media (max-width: 500px) {
						font-size: 20px;
					}
				}

				.fairGroup {
					.fairLabels {
						display: flex;
						flex-direction: column;
						row-gap: 10px;
						padding: 10px 0;

						label {
							display: flex;
							flex-direction: row;
							align-items: center;
							gap: 10px;
							cursor: pointer;

							input {
								width: fit-content;
								margin-bottom: 0;
								height: fit-content;

								&[type="radio"] {
									position: relative;
									appearance: none;
									width: 17px;
									height: 17px;
									border: 2px solid #f2554d;
									background: transparent;
									border-radius: 3px;
									overflow: hidden;

									&:before {
										content: "";
										position: absolute;
										top: -6px;
										left: -14px;
										width: 5px;
										height: 2px;
										background: #f2554d;
										transform: rotate(45deg);
										transition: all 250ms ease-in-out;
									}

									&::after {
										content: "";
										position: absolute;
										top: -8px;
										left: 19px;
										width: 9px;
										height: 2px;
										background: #f2554d;
										transform: rotate(-45deg);
										transition: all 250ms ease-in-out;
									}
									&:checked {
										&:before {
											top: 7px;
											left: 1px;
										}

										&::after {
											top: 6px;
											left: 3px;
										}
									}
								}
							}
						}
					}
				}
			}

			.title {
				font-size: 49px;
				color: $cGreen;
				font-weight: 400;
				font-style: italic;
			}

			p.text {
				font-size: 18px;
				font-weight: 600;
				max-width: 390px;
			}
		}

		.column_02 {
			display: flex;
			align-items: center;
			padding-right: 75px;

			.title {
				font-style: italic;
				text-transform: uppercase;
			}
		}
	}

	@media (max-width: 1200px) {
		.columns {
			grid-template-columns: 1fr;
			padding: 0 20px;

			.column {
				&_01 {
					padding-left: 0;

					form {
						input {
							max-width: unset;
						}
					}
				}

				&_02 {
					grid-row: 1;
					padding-right: 0;

					.title {
						text-align: center;

						br {
							display: none;
						}
					}
				}
			}
		}
	}

	@media (max-width: 979px) {
		.columns {
			.column {
				&_02 {
					grid-row: 1;
					padding-right: 0;

					.title {
						text-align: center;
					}
				}
			}
		}
	}

	@media (max-width: 757px) {
		.columns {
			.column {
				&_01 {
					.title {
						font-size: 32px;
					}
				}

				&_02 {
					.title {
						font-size: 26px;
					}
				}
			}
		}
	}
}

#opinions {
	@extend .box;

	.title {
		text-align: center;
		margin-bottom: 50px;
	}

	.swiper {
		width: 100%;
		max-width: 960px;

		.swiper-slide {
			&:not(.swiper-slide-visible) {
				.slide_img {
					visibility: hidden;
					opacity: 0;
				}
			}

			&:not(.swiper-slide-active) {
				.slide_img {
					opacity: 0.3;
					filter: grayscale(1);
				}

				.slide_text {
					visibility: hidden;
					opacity: 0;
				}

				.slide_position {
					visibility: hidden;
					opacity: 0;
				}
			}

			.slide_img {
				text-align: center;
				margin-bottom: 50px;

				img {
				}
			}

			.slide_text {
				width: 100%;
				max-width: 620px;
				margin: 0 auto 30px auto;
				text-align: center;

				p {
					font-size: 17px;
				}
			}

			.slide_position {
				max-width: 620px;
				margin: 0 auto;
				text-align: center;

				p {
					color: #19f3e1;
					font-size: 23px;
					font-weight: 600;
					margin: 0;
				}
			}
		}

		.swiper-button-prev,
		.swiper-button-next {
			color: #dbdbdb;
			top: calc(382px / 1.6);
		}
	}

	@media (max-width: 757px) {
		.swiper {
			.swiper-slide {
				&:not(.swiper-slide-visible) {
					.slide_img {
						visibility: visible;
						opacity: 1;
					}
				}

				&:not(.swiper-slide-active) {
					.slide_img {
						opacity: 1;
					}

					.slide_text {
						visibility: visible;
						opacity: 1;
					}

					.slide_position {
						visibility: visible;
						opacity: 1;
					}
				}

				.slide_position {
					p {
						font-size: 18px;
					}
				}
			}

			.swiper-button-prev,
			.swiper-button-next {
				color: #dbdbdb;
				top: calc(382px / 2);
			}
		}
	}
}

.btn_1 {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	font-size: 19px;
	color: #19f3e1;
	font-weight: 600;

	&:hover {
		color: #19f3e1;
	}

	&::after {
		content: url("https://moodo.pl/data/include/cms/wspolpraca-franczyzowa/btn-bottom.png?v=1674053274084");
	}
}

.box-separator {
	margin-left: 75px;
	margin-right: 75px;
	margin-bottom: -30px;
	border-top: 4px solid #dddddd;
	padding-top: 10px;
}

.fair {
	position: relative;
	text-align: center;
	font-family: "Raleway", sans-serif;
	padding-top: 125px;
	padding-bottom: 125px;

	&::before {
		content: "";
		position: absolute;
		top: 0;
		right: 35%;
		transform: translateX(50%);
		width: 275px;
		height: 441px;

		background-image: url("https://moodo.pl/data/include/cms/wspolpraca-franczyzowa/build.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: -1;

		@media (max-width: 757px) {
			top: 6%;
			width: 205px;
			height: 330px;
		}
	}

	&-title {
		color: #000;
		font-size: 58px;
		font-weight: 900;

		width: 100%;
		max-width: 670px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 25px;
		line-height: 1;

		@media (max-width: 757px) {
			font-size: 40px;
		}

		@media (max-width: 500px) {
			font-size: 30px;
		}
	}
	&-text {
		font-size: 30px;
		font-weight: 400;
		margin-bottom: 25px;
		letter-spacing: 3px;

		@media (max-width: 757px) {
			font-size: 22px;
		}
	}
	&-date {
		color: #ff7200;
		font-size: 26px;
		padding: 15px 30px;
		font-weight: 500;
		letter-spacing: 3px;
		background: #000;
		width: 100%;
		max-width: fit-content;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 80px;
		span {
			font-family: "Raleway", sans-serif;
		}

		@media (max-width: 757px) {
			font-size: 16px;
			margin-bottom: 40px;
		}
	}
	&-info {
		a {
			font-size: 23px;
			font-weight: 300;
			font-style: italic;
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 20px;

			&::after {
				content: url("https://moodo.pl/data/include/cms/wspolpraca-franczyzowa/btn-bottom-black.png");
			}

			@media (max-width: 757px) {
				font-size: 18px;
			}
		}
	}
}

div.fair-bonus {
	width: 100%;
	// max-width: 1200px;
	margin: 0 auto 50px;

	.columns {
		display: grid;
		grid-template-columns: 1fr auto;
		padding-bottom: 40px;
		column-gap: 20px;
		row-gap: 20px;
		padding-left: 75px;
		padding-right: 75px;

		.column_02 {
			display: flex;
			align-items: flex-end;
		}

		@media (max-width: 1200px) {
			grid-template-columns: 1fr;

			.column_01 {
				order: 2;
			}

			.column_02 {
				order: 1;
				justify-content: center;
			}
		}

		@media (max-width: 757px) {
			padding-left: 25px;
			padding-right: 25px;
		}
	}

	.fair-bonus-title {
		color: #ff6000;
		font-size: 65px;
		font-family: "Raleway", sans-serif;
		font-weight: 900;
		text-align: center;

		@media (max-width: 757px) {
			font-size: 48px;
		}

		@media (max-width: 500px) {
			font-size: 34px;
		}
	}

	.fair-bonus-title-mini {
		color: #ff6000;
		font-size: 28px;
		font-family: "Raleway", sans-serif;
		font-weight: 900;
		text-align: center;
		margin-bottom: 30px;

		@media (max-width: 757px) {
			font-size: 22px;
		}
		@media (max-width: 500px) {
			font-size: 16px;
		}
	}

	.fair-bonus-data {
		position: relative;
		display: flex;
		flex-direction: column;
		margin-bottom: 30px;

		font-size: 26px;
		font-family: "Raleway", sans-serif;
		font-weight: 600;
		text-align: center;
		letter-spacing: 3px;

		width: fit-content;
		margin-left: auto;
		margin-right: auto;
		padding-left: 60px;

		&::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			width: 47px;
			height: 75px;
			transform: translateY(-50%);

			background-image: url("https://moodo.pl/data/include/cms/wspolpraca-franczyzowa/city-mini.png");
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			z-index: -1;
		}

		span {
			font-size: 14px;
		}

		@media (max-width: 757px) {
			font-size: 22px;

			&::before {
				width: 40px;
				height: 64px;
			}
			span {
				font-size: 11px;
			}
		}

		@media (max-width: 500px) {
			font-size: 18px;
			span {
				font-size: 9px;
			}
		}
	}

	ul {
		position: relative;
		list-style: none;
		padding: 35px 0 65px !important;
		margin-bottom: 15px;
		width: 100%;
		max-width: 640px;

		&::before {
			content: "";
			position: absolute;
			width: 200vw;
			top: 0;
			bottom: 0;
			left: 0;
			transform: translateX(-17%);
			background: #ff6000;
			z-index: -1;

			@media (max-width: 1200px) {
				width: 100vw;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		li {
			position: relative;
			color: #000;
			font-size: 23px;
			font-family: "Raleway", sans-serif;
			font-weight: 700;
			padding-left: 26px;

			&:not(:last-child) {
				margin-bottom: 10px;
			}

			&::before {
				content: "";
				position: absolute;
				top: 14px;
				left: 0;
				width: 18px;
				height: 18px;
				border-radius: 100%;
				background: $cBlack;
				transform: translateY(-50%);
			}

			@media (max-width: 757px) {
				font-size: 19px;

				&::before {
					width: 14px;
					height: 14px;
				}
			}

			@media (max-width: 500px) {
				font-size: 16px;

				&::before {
					width: 10px;
					height: 10px;
				}
			}
		}
	}

	.fair-bonus-info {
		font-size: 23px;
		font-family: "Raleway", sans-serif;
		font-weight: 500;
		text-align: center;
		font-style: italic;

		@media (max-width: 757px) {
			font-size: 19px;
		}
		@media (max-width: 500px) {
			font-size: 16px;
		}
	}

	.btn_1 {
		margin: 0 100px;
		color: #000;

		&::after {
			content: url("https://moodo.pl/data/include/cms/wspolpraca-franczyzowa/btn-bottom-black.png");
		}
		@media (max-width: 500px) {
			margin: 0;
		}
	}
}

.box-1 {
	margin-top: 50px;
}

.box-1,
.box-2,
.box-3,
.box-4,
.box-5,
.box-6,
.box-7 {
	padding-top: 50px;
	padding-bottom: 50px;

	@media (max-width: 979px) {
		padding-top: 35px;
		padding-bottom: 35px;
	}

	h2.title {
		font-size: 34px;
		// text-align: center;
	}

	h3.title {
		font-size: 24px;
		// text-align: center;
	}

	p {
		font-size: 17px;
	}
}