@import url('https://fonts.googleapis.com/css2?family=Matemasie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('includes/navbar.css');
@import url('includes/button.css');
@import url('includes/text.css');
@import url('includes/table.css');
@import url('includes/cards.css');

:root {
	--primary: #5059cd;
}

body {
	font-family: 'Jost', sans-serif;
}

.matemasie {
	font-family: "Matemasie", sans-serif;
}

.josefin {
	font-family: 'Josefin Sans', sans-serif;
}

.primary-text {
	color: var(--primary) !important;
}

.primary {
	background-color: var(--primary) !important;
}

section {
	padding: 2% 0;
}

.flexbox {
	display: flex;
}

.badges {
	background-color: #d5dfff;
	padding: 0 16px;
	color: #5059cd;
	font-size: 13px;
	font-weight: 500;
	border-radius: 200px;
}

footer.page-footer {
	background-color: #f1f2ff;
	border-top: 1px solid #bdbdbd;
}

footer.page-footer p {
	color: #212121;
}

footer.page-footer ul li {
	margin-bottom: 14px;
}

footer.page-footer ul li a {
	color: #616161;
	font-size: 13px;
}

footer.page-footer ul li a:hover {
	text-decoration: underline;
}

main {
	padding-left: calc(300px + 5%);
	padding-right: 15%;
}

.small-modal {
	width: 500px;
}

.loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	height: 100svh;
	width: 100vw;
	background-color: #ffffff;
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.spinner-primary-only {
	border-color: var(--primary);
}

.preloader-wrapper.tiny {
	width: 32px;
	height: 32px;
}

.circle-clipper .circle {
	border-width: 4px;
}

.latest-blog-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	column-gap: 24px;
}

.latest-blog-wrapper > .cover-wrapper {
	width: 50%;
}

.latest-blog-wrapper > .content-wrapper {
	width: 40%;
}

.blog-wrapper {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 5%;
}

.blog-wrapper > a.url {
	width: 330px;
	max-width: calc(33% - 24px);
}

a.url > .card-panel {
	border: 2px solid rgb(241, 242, 255);
	height: 100%;
}

a.url:hover > .card-panel {
	border-color: #5059cd;;
}

a.url .title {
	font-weight: 500;
	color: #212121;
	margin-top: 24px
}

a.url .description {
	color: #757575;
	font-size: 13px;
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media only screen and (max-width : 450px) {
	.latest-blog-wrapper {
		flex-direction: column
	}

	.latest-blog-wrapper > .cover-wrapper {
		width: 100%;
	}

	.latest-blog-wrapper > .cover-wrapper {
		width: 100%;
	}

	.blog-wrapper > a.url {
		width: 100% !important;
		max-width: 100% !important;
	}
}