@font-face {
	font-family: "Mark Pro";
	src: url('./assets/fonts/MarkPro.otf') format("opentype");
}

body {
	font-size: 16px;
	width: 100vw;
	overflow-x: hidden;
	height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: "Mark Pro", sans-serif !important;
	margin: 0;
}

:root {
	--blue: #004559;
	--orange: #F79428;

	--red: #C1101B;

	--white: #FFFFFF;
	--black: #000000;
}

p {
	margin: 0;
	padding: 0;
}

.container {
	padding: 3rem 13rem;
	max-width: 1152px !important;
}

.txt-white {
	color: var(--white) !important;
}

.bold {
	font-weight: 700 !important;
}

@media only screen and (max-width: 768px) {
	.container {
		padding: 2rem;
	}
}

h1 {
	font-size: 3rem;
	font-style: normal;
	font-weight: 700;
	line-height: 3.75rem;
	color: var(--blue) !important;
}

h3 {
	font-size: 1.5rem !important;
	font-weight: 500 !important;
	line-height: 1.875rem !important;
	color: var(--blue) !important;
}

.carousel-heading {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 3rem;
	margin-bottom: 2rem;
}

.subheading {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.875rem;
	color: var(--blue);
}

.p1 {
	font-size: 1.125rem;
	font-weight: 400;
}

.p2 {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
	margin: 0 !important;
}

.width-100 {
	width: 100%;
}

.cstm-a {
	color: var(--blue);
}

.bg-blue {
	background-color: var(--blue);
}

.cstm-card {
	border-radius: 10px;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.cstm-card-cover>img {
	border-radius: 10px 10px 0px 0px;
}

.cstm-card-body {
	padding: 1.25rem 1.875rem !important;
	border-radius: 0px 0px 10px 10px;
	height: 100%;
}

.bg-light-blue {
	background-color: #E6ECEE;
}

.bg-red {
	background-color: #E6ECEE;
}

.bg-green {
	background-color: #E6ECEE;
}

.impact-card-body {
	height: 100%;
	border-radius: 10px;
	padding: 0 1.875rem 1.25rem 1.875rem;
}

/* Header styling */
header {
	padding: 1rem 3rem;
	background-color: var(--blue);
	color: var(--white);
	width: 100vw;
	z-index: 10;
}

#header-title {
	color: var(--white);
	font-size: 1.5rem;
	font-weight: 700;
}

#jc-logo {
	width: 7rem;
	margin-right: 1rem;
}

.cstm-btn {
	border: 0;
	border-radius: 50px;
	background-color: var(--orange);
	color: var(--black);
	padding: 1rem 2rem;
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none;
}

.cstm-btn-small {
	width: fit-content;
	border-radius: 50px;
	border: none;
	background-color: var(--orange);
	color: var(--black);
	padding: 0.75rem 1.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
	text-decoration: none;
}

/* Banner styling */
.display {
	font-size: 4rem;
	font-weight: 700;
	color: var(--white);
}

@media only screen and (max-width: 768px) {
	.display {
		font-size: 2.5rem;
	}
}

.banner {
	padding: 4rem 13rem 2rem 13rem;
	margin-bottom: 5rem;
	background: var(--blue);
}

.banner-heading {
	color: var(--white);
	font-size: 4rem;
	font-weight: 700;
	line-height: 5rem;
}

@media only screen and (max-width: 768px) {
	.banner {
		padding: 2rem;
	}

	.banner-heading {
		font-size: 2.5rem;
		line-height: 3rem;
	}

	.cstm-btn {
		margin-bottom: 1rem;
	}
}

.banner-text {
	font-size: 1.5rem;
	line-height: 1.875rem;
	margin-bottom: 2rem;
}

/* Footer styling */
footer {
	background-color: var(--blue);
	color: var(--white);
}

.cstm-footer-a {
	color: var(--white);
}

.sticky {
	position: fixed;
	top: 0;
}

.cstm-form {

	border-radius: 10px;
	padding: 1.5rem;
}

.cstm-form>label {
	color: var(--white);
	font-size: 1.25rem;
}

.cstm-form>input,
.cstm-form>textarea {
	margin-bottom: 1rem;
	width: 100%;
	border: var(--blue) 1px solid;
	border-radius: 10px;
	padding: 0.3rem 0.8rem;
}

.cstm-form>textarea {
	resize: none;
}

.red {
	color: var(--red);
}

/* Carousel styling */
.carousel-control-next,
.carousel-control-prev {
	position: relative !important;
	padding: 0rem 0.5rem !important;
	width: 2.5rem !important;
	height: fit-content;
}

.carousel-indicators {
	position: relative !important;
	margin: 1rem;
}

.carousel-item {
	transition: 1s ease-in-out !important;
}

/* End Carousel styling */

.icons {
	border-radius: 100px;
	color: white;
	padding: 1.5rem;
	font-size: 1.5rem;
}

.bg-red-saturated {
	background-color: var(--blue);
}

.bg-green-saturated {
	background-color: var(--blue);
}

.bg-blue-saturated {
	background-color: var(--blue);
}

img {
	border-radius: 5px;
}

.cstm-icon-height {
	height: 142px;
}