* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	/* overflow-x: hidden; */
}

:root {
	--animate-delay: 0.5s;
}

body {
	font-family: import_roboto_regular;
	overflow-x: hidden;
}

/* IMPORT THE ROBOTO GOOGLE FONT */
@font-face {
	font-family: import_roboto_regular;
	src: url(../Roboto/Roboto-Regular.ttf);
}

@font-face {
	font-family: import_roboto_bold;
	src: url(../Roboto/Roboto-Bold.ttf);
}

@font-face {
	font-family: import_rasa;
	src: url(../Rasa/Rasa-VariableFont_wght.ttf);
}

/* END IMPORT THE ROBOTO GOOGLE FONT*/

.container {
	width: 80%;
	margin: auto;
}

/* BANNER */
.transforming_lives_banner {
	padding-top: 20vh;
	height: 100vh;
	background-color: #fff;
	font-family: import_rasa;
}

.transforming_lives_banner h2 {
	padding: 10px;
	font-size: 100px;
}

.faith {
	text-align: left;
}

.service {
	margin-left: -200px;
	text-align: center;
}

.community {
	text-align: right;
}

/* VALUES */
.values {
	text-align: center;
	background-color: #fff;
	padding-bottom: 5rem;
}

.values h3 {
	font-family: import_roboto_regular;
	font-size: 30px;
}

.values p {
	font-family: import_roboto_regular;
	font-size: 20px;
}

.valueCard {
	padding: 50px;
	background-color: rgb(250, 250, 250);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

/* MOTTO */
.motto {
	position: relative;
	/* The image used */
	background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
		url("../img/transforming_lives/mottobg.jpg");

	/* Set a specific height */
	height: 80vh;

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -1;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.motto_content h2 {
	font-size: 30px;
	color: #00664f;
}

.motto_content h3 {
	font-size: 40px;
	color: #e5e5e5;
}

.motto_content p {
	font-size: 30px;
	color: #e5e5e5;
}

/* MISSION AND VISION */
.leftbox {
	background-color: #00664f;
	color: white;
	float: left;
	text-align: right;
	font-family: import_roboto_regular;
	height: 400px;
	padding: 0 !important;
}

.leftbox_content {
	margin: 10%;
}

.leftbox_content h2 {
	font-size: 40px;
}

.leftbox_content p {
	font-size: 20px;
}

.rightbox {
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #fff;
	color: #00664f;
	font-family: import_roboto_regular;
	height: 400px;
	padding: 0 !important;
}

.rightbox_content {
	margin: 10%;
}

.rightbox_content h2 {
	font-size: 40px;
}

.rightbox_content p {
	font-size: 20px;
}

/* JFJ */
.jfj {
	background-color: #fff;
	padding-top: 30px;
	margin-top: -10px;
}

.jfj img {
	width: 80%;
	height: auto;
	display: block;
	margin: auto;
}

.jfj p {
	background-color: #00664f;
	color: #fff;
	padding: 70px 200px 70px 200px;
	text-align: justify;
}

.heading {
	color: #00664f;
	text-align: center;
	font-family: import_roboto_bold;
	font-size: 40px;
}

/* LEARNER PROFILE */
.green_rect1 {
	height: 600px;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: #00664f;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
	margin: auto;
	width: 90vw;
}

.green_rect1 p {
	padding: auto;
	font-size: 25px;
	width: 70%;
	margin: auto;
}

.green_rect1_text_container {
	display: flex;
	height: 1000px;
}

.green_rect1 img {
	height: 700px;
	width: 500px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.green_rect1_img {
	display: flex;
	align-items: center;
}

.h1_intro {
	color: #00664f;
	text-align: center;
	font-family: import_roboto_bold;
	font-size: 70px;
}

.Container-0_1 {
	position: relative;
	margin-bottom: 30vh;
	margin-left: 28vw;
	margin-right: 3vw;
}

.Container-1_1 {
	background-color: #00664f;
	color: white;
	padding-right: 10vw;
	padding-left: 13vw;
	padding-top: 10vh;

	border-radius: 0.4em;
	font-size: 15px;
	/*1.2vw*/
}

.Image {
	position: absolute;
	top: -10vh;
	left: 58vw;
	right: 0;
	bottom: 0;
}

.Image-2 {
	position: absolute;
	width: 10px;
	top: -10vh;
	left: -20vw;
	right: 0;
	bottom: 0;
}

.computerCardContainer p {
	font-size: 18px;
}

.mobileCardContainer {
	display: none;
	width: 80%;
	margin: auto;
}

.mobileCardContainer .box {
	padding: 0;
}

.card_img2 {
	display: flex;
	align-items: center;
}

.card_img2 img {
	height: 100%;
	width: 100%;
}

.mobileCardContainer .card_text .box {
	background-color: #00664f;
	color: #fff;
	padding: 20px;
}

/* STUDENT LEADERSHIP BANNER */
.student_leadership_banner {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url("../img/caring_hearts/studentleadershipbanner.jpg");
	height: 500px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.student_leadership_banner_text {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 30px;
}

.student_leadership_graphics {
	background-color: #fff;
}

.student_leadership_graphics img {
	width: 100%;
	height: auto;
}

.student_leadership_image_divider {
	background-image: url("../img/caring_hearts/parallax.jpg");
	height: 900px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	z-index: -1;
}

.student_leadership1 {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
	padding: 100px;
}

.student_leadership1 h3 {
	font-family: import_roboto_regular;
	font-size: 40px;
}

.student_leadership1 p {
	font-family: import_roboto_regular;
	font-size: 16px;
}

.student_leadership2 {
	background-color: #fff;
	margin-top: -200px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
	padding: 100px;
}

.student_leadership2 h3 {
	font-family: import_roboto_regular;
	font-size: 40px;
}

.student_leadership2 p {
	font-family: import_roboto_regular;
	font-size: 16px;
}

/* The Student Council */
.the_student_council_banner {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url("../img/new/student_council.png");
	height: 500px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.the_student_council_banner_text {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 30px;
}

.bg-g{
	background-color: #00664f;
}

.student_council_content {
	font-family: import_roboto_regular;
	color: #fff;
}

/* faith formation */
.faith_formation_banner {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url("../img/transforming_lives/faithbg.jpg");
	height: 500px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.faith_formation_banner_text {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 30px;
}

.faith_content {
	font-family: import_roboto_regular;
}

.faith_content p {
	font-family: import_roboto_regular;
	font-size: 18px;
}

.faith_content a {
	color: #000;
}

.page {
	display: flex;
	justify-content: center;
}

.page img {
	width: 100%;
	height: 100%;
}

.faith_card_g {
	background-color: #00664f;
	color: #fff;
}

.faith_card_g a {
	color: #fff;
}

.faith_card_g p {
	padding: 0px;
	text-align: justify;
}

.faith_card_w {
	padding: 20px;
	background-color: #fff;
	color: #00664f;
}

.faith_card_w p {
	text-align: justify;
}

.faith_card_w a {
	color: #00664f;
}

.faith_card_g img {
	height: 100%;
	width: 100%;
}

.box {
	padding: 30px 0 30px 0;
}

.text {
	display: flex;
	justify-content: center;
	align-items: center;
}

.vid {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
}

.video {
	position: relative;
	overflow: hidden;
	width: 80%;
	padding-top: 45%;
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

/* footer */
.footer {
	background: #00664f;
	color: #fff;
	font-family: import_rasa;
	text-align: center;
	padding: 30px 0 30px 0;
	font-size: 15px;
}

.footer a {
	color: #fff;
}

/* MEDIA QUERIES */
@media only screen and (max-width: 1380px) {
	.green_rect1 img {
		height: 650px;
		width: 400px;
	}

	.Image-2 {
		left: -24vw;
	}
}

@media only screen and (max-width: 1100px) {
	.computerCardContainer {
		display: none;
	}

	.mobileCardContainer {
		display: block;
	}
}

@media only screen and (max-width: 992px) {
	.green_rect1 {
		height: auto;
		background-color: #fff;
		box-shadow: 0 0 0px rgba(0, 0, 0, 0.4);
	}

	.green_rect1_text_container {
		padding: 100px;
		background-color: #00664f;
		height: auto;
	}

	.green_rect1_text_container p {
		font-size: 20px;
	}

	.green_rect1 img {
		height: 100%;
		width: 100%;
		box-shadow: 0 0 0;
	}
}

@media only screen and (max-width: 950px) {
	.values h3 {
		font-size: 25px;
	}

	.values p {
		font-size: 15px;
	}

	.motto h2 {
		font-size: 25px;
	}

	.motto h3 {
		font-size: 40px;
	}

	.motto p {
		font-size: 15px;
	}

	.jfj p {
		padding: 50px;
	}

	.jfj img {
		width: 100vw;
	}
}

@media only screen and (max-width: 820px) {
	.green_rect1_text_container p {
		font-size: 16px;
	}

	.green_rect1_text_container {
		padding: 40px;
	}

	.h1_intro {
		font-size: 40px;
	}
}

@media only screen and (max-width: 768px) {
	.motto_content {
		width: 80%;
	}

	.leftbox {
		text-align: center;
		height: auto;
	}

	.rightbox {
		text-align: center;
		height: auto;
	}

	.student_leadership1 {
		padding: 40px;
	}

	.student_leadership1 h3 {
		font-size: 30px;
	}

	.student_leadership1 p {
		font-size: 14px;
	}

	.student_leadership2 {
		padding: 40px;
	}

	.student_leadership2 h3 {
		font-size: 30px;
	}

	.student_leadership2 p {
		font-size: 14px;
	}
}

@media only screen and (max-width: 660px) {
	.transforming_lives_banner h2 {
		padding: 10px;
		font-size: 80px;
	}

	.service {
		margin-left: 0;
		text-align: left;
	}

	.community {
		text-align: left;
	}
}

@media only screen and (max-width: 500px) {
	.transforming_lives_banner h2 {
		padding: 10px;
		font-size: 60px;
	}

	.service {
		margin-left: 0;
		text-align: left;
	}

	.community {
		text-align: left;
	}

	.leftbox_content h2 {
		font-size: 30px;
	}

	.leftbox_content p {
		font-size: 16px;
	}

	.rightbox_content h2 {
		font-size: 30px;
	}

	.rightbox_content p {
		font-size: 16px;
	}
}