@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

*,
*::before,
*::after {
	box-sizing: border-box !important;
}

body {
	overflow-x: hidden !important;
	margin: 0;
	padding: 0;
}

:root {
	--col1: #1a1a64;
	--col2: #eeeef5;
	--font1: 'Work Sans', sans-serif;
	--font2: 'Raleway', sans-serif;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font2);
}

a {
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--col1);
	font-weight: 500;
}

.navbar,
.nav-link {
	color: var(--col1);
	font-family: var(--font1);
}

.navbar-brand img {
	width: 52px;
}

.nav-item {
	padding: 0 12px;
}

a.nav-link {
	position: relative;
	font-size: 16px;
	padding: 0;
}

a.nav-link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	left: 0;
	bottom: 0px;
	background-color: var(--col1);
	opacity: 0.35;
	transition: width 0.4s ease;
}

a.nav-link:hover::after {
	width: 100%;
}

/* HERO */
.hero {
	/* background-color: var(--col2); */
}

.hero h1 {
	color: var(--col1);
	font-size: 56px;
	font-family: var(--font1);
}

.hero p {
	opacity: 0.7;
	width: 75%;
}

.hero img {
	width: 36%;
}

@media screen and (max-width: 767px) {
	.hero img {
		width: 64%;
	}
}

@media screen and (max-width: 460px) {
	.hero h1 span {
		display: block;
		line-height: 0.88;
		font-size: 44px;
	}

	.hero p {
		font-size: 16px !important;
		width: 88%;
	}

	.hero img {
		width: 88%;
	}
}

/* ARTICLES */
.articles {
	background-color: var(--col2);
	border-top-left-radius: 64px;
	border-top-right-radius: 64px;
}


/* FOOTER */
footer a {
	color: var(--col2);
}