@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap");

body {
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	color: hsl(260, 8%, 14%);
}

[v-cloak] {
	display: none;
}

.hero-mobile {
	right: -10rem;
	width: 32rem;
	max-width: none;
}

nav > button:nth-child(3) {
	border-bottom: 1px solid hsl(0, 0%, 52%);
	padding-bottom: 1.75rem;
}

nav > button:last-child {
	background-color: hsl(180, 66%, 49%);
	padding: 0.75rem 0;
	border-radius: 2rem;
}

main {
	height: 103rem;
}

.form {
	top: -10rem;
}

.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 140px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: 50%;
	margin-left: -75px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

ul > li:first-child {
	padding-top: 0;
}

ul > li {
	padding-top: 1rem;
}

.img {
	position: absolute;
	top: -3rem;
	right: 7.5rem;
}

.div {
	height: 40rem;
}

.top-footer {
	padding: 6.1rem 0;
}

@media (min-width: 768px) {
	.desktop > h1:nth-child(5) {
		display: none;
	}

	.desktop > h1:last-child {
		display: none;
	}

	.hero-mobile {
		position: absolute;
		width: 42rem;
		right: -8rem;
	}

	.form {
		top: -9rem;
	}

	.img {
		top: -3rem;
		right: 12rem;
	}

	.mid > .cards:nth-child(2) {
		margin-top: 5rem;
	}

	.mid > .cards:nth-child(3) {
		margin-top: 11rem;
	}

	main {
		height: 55rem;
	}

	.top-footer {
		padding: 3.5rem 0;
	}
}