* {
	font-family: Mulish, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
}

.nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 100px;
	background-color: rgba(187, 107, 217, 0.1);
}

.nav-brand {
	font-family: Lato;
	font-weight: 700;
	font-size: 24px;
	color: #f53838;
}

.nav-links {
	display: flex;
}

.nav-links a {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-decoration: none;
	/* Warnanya akan mengikuti warna milik parent (inheritance) */
	color: inherit;
	margin: 0px 16px;
}

.nav-links a:hover {
	text-decoration: underline;
}

.btn-text {
	border: 0;
	background-color: transparent;
	font-weight: 700;
	font-size: 16px;
	margin-right: 30px;
	transition: color 250ms ease;
}

.btn-text:hover {
	color: #f53855;
	cursor: pointer;
}

.btn-border {
	color: #f53855;
	border: 1px solid #f53855;
	background-color: transparent;
	padding: 13px 45px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 16px;
	transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
}

.btn-border:hover {
	cursor: pointer;
	background-color: #f53855;
	color: white;
}

.page-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgba(188, 107, 217, 0.1);
	padding-bottom: 56px;
}

.page-title-blog {
	padding-bottom: 200px;
}

.title-heading {
	font-size: 44px;
	width: 700px;
	text-align: center;
}

.title-content {
	width: 700px;
	text-align: center;
}

.btn-primary {
	margin-top: 36px;
	background-color: #f53838;
	color: white;
	font-weight: 700;
	font-size: 16px;
	border: 0;
	border-radius: 10px;
	padding: 12px 48px;
	transition: background-color 250ms ease-in-out;
}

.btn-primary:hover {
	cursor: pointer;
	background-color: #be2929;
}

.blog-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60px;
}

.section-title-container {
	text-align: center;
	width: 900px;
}

.section-title-container h3 {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.1px;
}

.section-title-container p {
	color: #737b7d;
}

.section-title-container a {
	text-decoration: none;
}

.section-title-container a:hover {
	text-decoration: underline;
}

.cards-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 56px;
}

.cards-container-overlap {
	margin-top: -120px;
}

.card {
	width: 400px;
	border: 1px solid #f2f2f2;
	border-radius: 16px;
	margin: 24px 16px;
}

.card-head {
	height: 168px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #d2ebf7;
	border-radius: 16px 16px 0px 0px;
}

.card-head img {
	height: 128px;
}

.card-body {
	padding: 24px;
}

.card-body h5 {
	font-size: 20px;
	font-weight: 600;
	color: #081f32;
	margin: 0;
}

.card-body p {
	font-size: 13px;
	margin-top: 24px;
	color: #374a59;
}

.contact-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60px;
	border-top: 1px solid #dbdbdb;
	margin: 0px 90px;
}

.contact-items-container {
	display: flex;
	width: 66%;
	margin-top: 56px;
}

.contact-item {
	flex-basis: 33%;
	padding-left: 50px;
}

.contact-item h6 {
	font-weight: 700;
	font-size: 18px;
	color: #373f41;
	margin: 0;
}

footer {
	display: flex;
	justify-content: space-around;
	background-color: rgba(187, 107, 217, 0.1);
	padding: 120px 0px;
}

.footer-item {
	display: flex;
	flex-direction: column;
}

.footer-item h6 {
	font-weight: 600;
	font-size: 18px;
	margin: 0 0 10px 0;
}

.footer-item a {
	text-decoration: none;
	margin-top: 8px;
	color: #4f5665;
}

.footer-item a:hover {
	text-decoration: underline;
}