@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Outfit:wght@100..900&display=swap');

:root {
	--colorText: #242F38;
	--colorPrimary: #2C90A2;
	--sectionHighlight: #F7F7F8;

	--companyColor: #2C90A2;
}

body,
html {
	min-height: 100dvh;
}

body {
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	font-weight: 300;
	color: var(--colorText);
}

::selection {
	background: var(--colorPrimary);
	color: #fff;
}

h2 {
	color: var(--colorText);
	font-size: 36px;
	font-weight: 400;
	margin: 0;
}

p {
	margin: 0;
	line-height: 1.5;

	& + p {
		margin-top: 20px;
	}
}

b {
	font-weight: 600;
}

a {
	color: var(--colorPrimary);
	text-decoration: none;
}

.heading__bordered {
	border-left: 4px solid var(--colorPrimary);
	padding-left: 25px;
}

.logo {
	color: #fff;
	font-size: 32px;
	font-weight: 300;
	text-align: center;

	span {
		font-weight: 600;
	}

	&.logo--small {
		font-size: 24px;
	}
}

.wrapper {
	width: 100%;
	max-width: 1150px;
	margin-inline: auto;
}

.header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 30px 0;
}

.hero {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 56vh;
	min-height: 510px;
	background-image: url('./imgs/bghero.jpg');
	background-size: cover;
	background-position: center;
	color: #fff;

	.hero__text {
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 52px;
		font-weight: 200;
		margin: 0;
		text-align: center;

		span {
			font-style: italic;
		}
	}
}

.section {
	display: flex;
	align-items: flex-start;
	gap: 70px;
	padding: 120px 0;

	.section__content {
		max-width: 600px;
	}

	&.section__highlight {
		background-color: var(--sectionHighlight);
	}

	&.section--partner {
		max-height: 650px;
		background-image: url('imgs/bg-partner.jpg');
		background-size: cover;
		background-position: center left;
		color: #fff;

		h2 {
			color: #fff;
			margin-bottom: 20px;
		}

		.section--partner__content {
			max-width: 500px;
			margin-left: 50%;
		};
	}

	.section--contact {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-image: url('imgs/bg-fredrik.jpg');
		height: 388px;
		padding-right: 150px;

		.section--contact__description {
			color: #fff;

			h2 {
				color: #fff;
			}
		}
	}
}

.companies {
	display: flex;
	flex-direction: column;
	gap: 20px;

	.companies__header {
		display: flex;
		flex-direction: column;
		gap: 20px;
		text-align: center;
	}

	.companies__footer {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;

		.companies__button {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			border: 1px solid var(--colorPrimary);
			color: var(--colorPrimary);
			background-color: transparent;
			cursor: pointer;

			&:is(:hover) {

			}
		}
	}

	.companies__list {
		display: flex;
		flex-direction: row;
		gap: 30px;
		scroll-behavior: smooth;
		cursor: grab;
		overflow-x: hidden;

		&.dragging {
			user-select: none;
			scroll-behavior: auto;
			cursor: grabbing;
		}

		.companies__company {
			position: relative;
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			flex-shrink: 0;
			gap: 24px;
			width: 385px;
			padding: 52px 32px;
			font-weight: 300;
			background-color: #fff;
			box-sizing: border-box;

			&:after {
				content: '';
				position: absolute;
				top: 20px;
				right: 20px;
				width: 10px;
				height: 10px;
				background-color: var(--companyColor);
			}

			&:before {
				content: '';
				position: absolute;
				top: 25px;
				right: 25px;
				width: 10px;
				height: 10px;
				background-color: var(--companyColor);
				opacity: 0.2;
			}

			.companies__company__logo {
				max-height: 32px;
				width: auto;
			}

			.companies__company__description {
				font-size: 14px;
			}

			.companies__company__link {
				font-size: 14px;
				font-weight: 600;
				color: var(--companyColor);
			}

			&.companies__company--trinax { --companyColor: #30C0EE; }
			&.companies__company--struqtur { --companyColor: #781CD8; }
			&.companies__company--jiricom { --companyColor: #FFC502;}
		}
	}
}


.footer {
	background: #111;
	padding: 40px;
}

@media screen and (min-width: 900px) {
	.mobile-only {
		display: none;
	}
}

@media screen and (min-width: 800px) and (max-width: 1150px) {
	.section {
		padding: 80px 20px;
	}

	.section--mob-collapsed {
		padding: 0;
	}
}

@media screen and (max-width: 900px) {
	h2 {
		font-size: 26px;
	}

	.hero {
		height: 40dvh;
		min-height: 330px;
		background-position: center right -150px;

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

	.section {
		flex-direction: column;
		gap: 40px;
		padding: 80px 20px;

		&.section--partner {
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: var(--colorPrimary);
				opacity: .6;
			}

			.section--partner__content {
				position: relative;
				margin-left: 0;
				padding: 20px;
				z-index: 1;
			};
		}

		.section--contact {
			position: relative;
			display: block;
			height: auto;
			padding-right: 0;
			background-image: none;
			background-color: var(--colorPrimary);

			img {
				width: 100%;
				height: auto;
			}

			.section--contact__description {
				padding: 20px;
				background: var(--colorPrimary);

				h2 {
					color: #fff;
				}
			}
		}
	}

	.companies {

		.companies__company {
			max-width: 75vw;
		}
	}
}