body {
	background-color: var(--clr-bg-primary);
	font-family: 'Trebuchet MS', sans-serif;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
}

.container {
	max-width: 950px;
	margin: 0 auto;
	padding: 4rem 0;
}

/* Navbar Styles */
.navbar {
	color: var(--clr-white-800);
}

.navbar__page {
	font-size: var(--fs-normal);
	padding-bottom: 0.25rem;
	border-bottom: 2px solid transparent;
}

.navbar__page:hover,
.navbar__page:focus {
	border-bottom: 2px solid var(--clr-white-800);
}

/* Navbar for Mobile devices */
.navbar__mobile {
	display: none;
}

/* Top Background styles */
.background__top {
	position: absolute;
	inset: 0;
	z-index: -100;
	max-height: 120vh;
	background-color: var(--clr-blue-600);
	border-bottom-left-radius: 40px;
	border-bottom-right-radius: 40px;
}

.background__top__verticalText {
	position: absolute;
	font-size: var(--fs-normal);
	text-transform: uppercase;
	color: var(--clr-white-800);
	left: 60px;
	top: 70vh;
	transform: rotate(-0.25turn);
}

/* Landing section styles */
.landing {
	margin: 10rem auto;
}

.landing__mainText {
	margin: 0 auto;
	font-size: var(--fs-xlarge);
	margin-bottom: 10px;
	color: var(--clr-white-900);
}

.landing__buttons {
	margin-top: 50px;
}

/* Stats container */
.stats__value {
	font-size: var(--fs-xxlarge);
	color: var(--clr-text-primary);
	margin-bottom: 20px;
}

.stats__content {
	font-weight: 500;
	font-size: 1.8rem;
	font-size: var(--fs-large);
	color: var(--clr-text-primary);
}

/* Second cards container */
.card__image--floating {
	width: 80px;
	aspect-ratio: 1;
	border-radius: 50%;
	top: -80%;
	left: 50%;
	transform: translate(-50%, 70%);
	font-size: var(--fs-xxlarge);
	color: var(--clr-text-primary);
	background-color: var(--clr-blue-400);
}

.container--trans--2 .card:focus,
.container--trans--2 .card:hover {
	background-color: var(--clr-white-800);
	box-shadow: 0 10px 10px 0 rgba(79, 123, 247, 0.1);
}

.container--trans--2 .card:focus .card__image--floating,
.container--trans--2 .card:hover .card__image--floating {
	background-color: var(--clr-blue-600);
	color: var(--clr-white-900);
}

/* Grid container 1 */
.grid--2cols--left__content {
	width: 60%;
	aspect-ratio: 1;
	max-width: 300px;
	border-radius: 30px;
	background-color: var(--clr-blue-400);
}

.grid--2cols--left__content::before {
	content: '';
	position: absolute;
	top: -20%;
	left: -30%;
	height: 140%;
	width: 80%;
	border-radius: 30px;
	z-index: -1;
	background-color: var(--clr-blue-300);
}

.grid--2cols--right .buttons__container h5 {
	color: var(--clr-text-secondary);
}

.grid--2cols--right .buttons__container h4 {
	color: var(--clr-text-primary);
	cursor: pointer;
}

/* Newsletter */
.newsletter {
	background-color: var(--clr-blue-600);
	border-radius: 30px;
	padding: 3rem;
	box-shadow: 0 10px 10px 0 rgba(79, 123, 247, 0.1);
}

.newsletter__title {
	color: var(--clr-white-800);
}

.newsletter__desc {
	color: var(--clr-white-800);
	max-width: 80%;
}

.newsletter_img {
	height: 120%;
	width: 20%;
	background-color: var(--clr-blue-300);
	right: 40px;
	left: auto;
	bottom: 40px;
	border-radius: 10px;
}

.newsletter input {
	outline: none;
	border: 0;
	background-color: var(--clr-white-900);
	padding: 0.75rem 1rem;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	width: 240px;
	font-size: var(--fs-small);
}

/* Bottom Background styles */
.background__bottom {
	z-index: -100;
	min-height: 55vh;
	background-color: var(--clr-blue-300);
	inset: 0;
	top: auto;
}

/* Footer */
.footer__header {
	color: var(--clr-text-primary);
}

.footer__list__item {
	margin: 14px 0;
	font-size: var(--fs-xsmall);
	color: var(--clr-text-secondary);
	cursor: pointer;
}

.footer__list__item:hover,
.footer__list__item:focus {
	text-decoration: underline;
}