header {
	position: absolute;
	z-index: 2;
	top: 0;
	width: 100%;
	padding: 1rem;

	.navbar {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		justify-content: space-between;
	}

	ul {
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;

		&:first-of-type {
			justify-self: flex-start;
		}
		&:last-of-type {
			justify-self: flex-end;
		}

		li {
			font-size: 1rem;
			padding: 0.5rem 1rem;
			text-wrap: balance;
			text-align: center;

			i {
				font-size: 1.5em;
			}
		}
	}
	.img-cont {
		width: 24rem;
		display: flex;
	}
	@media (width >= 700px) {
		.img-cont-responsive {
			display: none;
		}
	}
	@media (width < 700px) {
		.img-cont-responsive {
			width: 260px;
			display: flex;
		}
	}
}
/* Menu Burger */
.burger {
	position: relative;
	z-index: 100;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	background: none;
	border: none;
	margin-left: auto;
	z-index: 5;

	width: 50px;
	aspect-ratio: 1;
	padding: 8px;

	cursor: pointer;

	&:focus-visible {
		outline: 2px solid var(--color-dark-blue);
		border-radius: 0.5rem;
	}

	& .burger__line {
		position: relative;

		width: 100%;
		height: 4px;

		background-color: var(--color-gold);
		border-radius: 50px;
		transition: 0.5s, background-color 0.25s;
	}
	& .burger__line::before,
	& .burger__line::after {
		content: "";
		position: absolute;
		left: 0;

		width: inherit;
		height: inherit;

		border-radius: inherit;
		background-color: var(--color-gold);
		transition: 0.3s, background 0s;
	}
	& .burger__line::before {
		top: -10px;
	}
	& .burger__line::after {
		top: 10px;
	}
	&.open .burger__line {
		background-color: transparent;
	}
	&.open .burger__line::before {
		top: 0;
		rotate: -45deg;
		background: var(--color-white);
	}
	&.open .burger__line::after {
		top: 0;
		rotate: 45deg;
		background: var(--color-white);
	}
}
@media (width >= 700px) {
	header {
		.navbar {
			max-width: 1900px;
			margin-inline: auto;
			gap: 1rem;
		}
		.burger {
			display: none;
		}
	}
}
@media (width < 700px) {
	header {
		position: sticky;
		top: 0;
		background-color: #d7e1ef;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.navbar {
			width: 100%;
			display: none;
			flex-direction: column;
			position: absolute;
			inset: 0;
			width: 100%;
			gap: 0.5rem;
			background-color: var(--color-dark-blue);
			color: var(--color-white);
			padding: 1rem;

			&.open {
				display: flex;

				.nav__list {
					display: none;
				}
			}

			.img-cont {
				display: none;
			}

			.nav__list {
				flex-direction: column;
				align-items: flex-start;
				gap: 0.5rem;

				width: 100%;
				padding: 0;
			}
			.cta-accent {
				margin-left: 1rem;
			}
		}
	}
}