/* ------------------------------------------ *\
 -> VARS
\* ------------------------------------------ */

:root {
	/* color palette */
	--black: #000;
	--black-950: #282828;
	--black-900: #404040;
	--black-800: #505050;
	--black-600: #7f7f7f;
	--black-400: #b3afaf;
	--black-200: #e5e5e5;
	--black-100: #f0f0f0;
	--black-50: #f8f8f8;
	--white: #ffffff;
	--blue-dark: #2f0069;
	--blue: #0052b8;
	--blue-light: #94cdfd;

	/* Named Colors */
	--primary: var(--blue);
	--secondary: var(--blue-light);

	/* Font Families */
	--font-title: 'Poppins', sans-serif;
	--font-body: 'Poppins', sans-serif;

	/* Font sizes */
	--font-tiny: calc(0.5rem + 0.15dvw);
	--font-xxxs: calc(0.6rem + 0.15dvw);
	--font-xxs: calc(0.72rem + 0.15dvw);
	--font-xs: calc(0.8rem + 0.15dvw);
	--font-sm: calc(0.9rem + 0.15dvw);
	--font-md: calc(1rem + 0.15dvw);
	--font-lg: calc(1.25rem + 0.15dvw);
	--font-xl: calc(1.4rem + 0.15dvw);
	--font-xxl: calc(1.75rem + 0.15dvw);
	--font-xxxl: calc(2rem + 0.15dvw);
	--font-huge: calc(2.5rem + 0.15dvw);
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	:root {
		/* Font sizes */
		--font-tiny: calc(0.5rem + 0.35dvh);
		--font-xxxs: calc(0.6rem + 0.35dvh);
		--font-xxs: calc(0.72rem + 0.35dvh);
		--font-xs: calc(0.8rem + 0.35dvh);
		--font-sm: calc(0.9rem + 0.35dvh);
		--font-md: calc(1rem + 0.35dvh);
		--font-lg: calc(1.25rem + 0.35dvw);
		--font-xl: calc(1.4rem + 0.35dvw);
		--font-xxl: calc(1.75rem + 0.35dvw);
		--font-xxxl: calc(2rem + 0.35dvw);
		--font-huge: calc(2.5rem + 0.35dvw);
	}
}

/* Available weights: 300, 400, 500, 700 */

/* ------------------------------------------ *\
 -> GLOBAL
\* ------------------------------------------ */

body {
	font: var(--font-md) var(--font-body);
}

img {
	max-width: 100%;
}

a {
	color: var(--primary);
	text-decoration: none;
	&:hover {
		text-decoration: underline;
		text-decoration-color: var(--secondary);
		text-decoration-style: dotted;
		text-underline-offset: 0.2em;
	}
}

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

.btn {
	background-color: var(--black-100);
	display: inline-block;
	padding: 0.8rem 1rem;
	border-radius: 50rem;

	&:hover {
		text-decoration: none;
	}

	&.btn-primary {
		background-color: var(--primary);
		color: var(--white);
	}
}

.section {
	display: flex;

	& .container {
		display: flex;
		padding: 0 2rem;
		margin: 0 auto;
		width: 1200px;

		@media (max-width: 860px) {
			display: block;
		}
	}
}

/* ------------------------------------------ *\
 -> LAYOUT
\* ------------------------------------------ */

.hero {
	background: var(--blue);
	background-image: url('../img/hero-img.webp'),
		linear-gradient(45deg, var(--blue) 20%, var(--blue-light) 100%);
	background-size: contain;
	background-position: right;
	background-repeat: no-repeat;
	color: var(--white);
	padding: 4rem 0;
	position: relative;

	& .col__md {
		text-align: center;
		width: 40%;
	}

	& .site-brand {
		width: 10rem;
	}

	@media (max-width: 860px) {
		background-image: linear-gradient(
			45deg,
			var(--blue) 20%,
			var(--blue-dark) 120%
		);

		& .col__md {
			width: 100%;
		}
	}
}

.servs {
	padding-top: 4rem;

	& .container {
		gap: 2rem;

		@media (max-width: 860px) {
			flex-direction: column;
		}
	}

	& .col {
		border-bottom: solid 6px var(--primary);
		padding-bottom: 4rem;

		@media (max-width: 860px) {
			border-bottom: unset;
			padding-bottom: 1rem;
		}
	}

	& .col__lg {
		width: 66.6666%;

		@media (max-width: 860px) {
			width: 100%;
		}
	}

	& .col__md {
		width: 33.3333%;

		@media (max-width: 860px) {
			width: 100%;
		}
	}

	& li {
		margin-bottom: 1rem;
	}

	& .section-title {
		border-bottom: solid 2px var(--primary);
		padding-bottom: 0.5rem;
		margin-bottom: 4rem;

		@media (max-width: 860px) {
			border-bottom: unset;
			margin-bottom: 1rem;
		}

		& img {
			max-width: 10rem;
			max-height: 4rem;
		}

		@media (max-width: 860px) {
			text-align: center;
		}
	}

	& .btn {
		background-image: linear-gradient(
			90deg,
			var(--blue) 20%,
			var(--blue-light) 200%
		);
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 700;
		width: calc(100% - 2rem);

		&:hover {
			background-image: linear-gradient(
				90deg,
				var(--blue) 60%,
				var(--blue-light) 150%
			);

			& .btn-text {
				padding-left: 0.5rem;
			}
		}

		& .btn-text {
			display: block;
			letter-spacing: 0.04em;
			transition: all 0.2s ease-in-out;
		}

		& .btn-icon {
			background-color: var(--white);
			border-radius: 50rem;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.5rem;
			height: 1.5rem;

			& img {
				width: 0.5rem;
			}
		}
	}

	& .saudeazeitao {
		& ul {
			column-count: 2;
			margin-right: 2rem;
			column-gap: 2rem; /* space between columns */
			list-style-position: inside;

			&:last-child {
				margin-right: 0;
			}

			@media (max-width: 860px) {
				column-count: 1;
				margin-right: 0;
			}
		}
	}
}

.descr {
	background-color: var(--black-100);
	padding: 1rem 0 2rem 0;
	font-size: var(--font-xs);
	line-height: 1.5em;

	& .container {
		justify-content: space-between;
	}

	& .col__md {
		width: 33.3333%;

		@media (max-width: 860px) {
			width: 100%;
			padding-bottom: 1rem;
		}
	}

	& .section-title {
		@media (max-width: 860px) {
			text-align: center;
		}
	}

	& .personaltrainer {
		& .section-wrapper {
			padding-left: 0.7rem;

			@media (max-width: 860px) {
				padding-left: 0;
			}
		}
	}
}

footer {
	background-image: linear-gradient(
		90deg,
		var(--blue) 20%,
		var(--blue-light) 200%
	);
	color: var(--white);
	font-size: var(--font-xs);
	padding: 1rem 0;
	text-align: center;
}