@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
	font-family: 'Poppins' sans-serif;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

.header {
	position: fixed;
	top: 0;
	z-index: 1;
	width: 100%;
	background-color: #f1f1f1;
}

.progress-container {
	width: 100%;
	height: 8px;
	background: #fff;
}

.progress-bar {
	height: 8px;
	background: #FFA33F;
	width: 0%;
}




nav {

	background: #fff;
	height: 90px;
	width: 100%;
	/* position: fixed; */
}


label.mylog {

	color: white;
	font-size: 35px;
	line-height: 80px;
	padding: 0 100px;
	font-weight: bold;
	cursor: pointer;

}





nav ul {

	float: right;
	margin-right: 80px;


}



nav ul li {


	display: inline-block;
	line-height: 80px;
	margin: 0 8px;
}


nav ul li a {

	color: #000;
	font-size: 17px;
	padding: 7px 13px;
	border-radius: 3px;
	text-transform: uppercase;
	text-decoration: none;


}



.nav-link-active {
	color: #fff;
	background: #FFA33F;
}


nav a.active,
nav a:hover {
	color: #fff;
	background: #FFA33F;
	/* padding: 8px 12px; */
	/* transition: .5s; */
	/* padding: 12px; */


}


.checkbtn {

	font-size: 30px;
	color: black;
	float: right;
	line-height: 80px;
	margin-right: 40px;
	margin-top: 25px;
	cursor: pointer;
	display: none;

}


#check {

	display: none;
}


@media screen and (max-width: 1175px) {


	.checkbtn {

		display: block;
		margin-top: 5px;
	}

	ul {

		position: fixed;
		width: 100%;
		height: 100vh;
		background: #2c3e50;
		top: 80px;
		left: -100%;
		text-align: center;
		transition: all .5s;

	}


	nav ul li {

		display: block;
		margin: 50px 0;
		line-height: 30px;


	}

	nav ul li a {

		font-size: 20px;
	}


	a:hover,
	a.active {

		background: none;
		color: #0082e6;




	}


	#check:checked~ul {

		left: 0;



	}



}







@media screen and (max-width: 952px) {


	label.mylog {

		font-size: 30px;
		padding-left: 50px;



	}

	nav ul li a {

		font-size: 16px;



	}

}

@media screen and (max-width: 858px) {


	.checkbtn {

		display: block;
		margin-top: 5px;
	}

	ul {

		position: fixed;
		width: 100%;
		height: 100vh;
		background: #2c3e50;
		top: 80px;
		left: -100%;
		text-align: center;
		transition: all .5s;

	}


	nav ul li {

		display: block;
		margin: 50px 0;
		line-height: 30px;


	}

	nav ul li a {

		font-size: 20px;
	}


	a:hover,
	a.active {

		background: none;
		color: #0082e6;




	}


	#check:checked~ul {

		left: 0;



	}



}




.c-item {
	height: 640px;
}

.container_top {
	margin-top: 80px;
}

.c-img {
	height: 100%;
	object-fit: cover;
	filter: brightness(0.6);
}


#navbar {

	background: #FFFFFF;
	transition: 10ms;

	/* line-height: 100px; */
}


#hero-carousel {
	z-index: 0;
	margin-top: 80px;
}

.timer {
	margin-top: 20px;
}

.main {
	height: auto;
	background-size: cover;
	width: 100%;
	/* background: url('../images/event.png') no-repeat top center; */
	padding-bottom: 30px;
}

h1 {
	text-align: center;
	font-weight: 400;
	font-size: 3rem;
	padding-top: 30px;
	text-transform: uppercase;
}

.countdown {
	display: flex;
	justify-content: center;
	gap: 20px;
}



.countdown>div {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
	box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.25);
	width: 120px;
	height: 120px;
	border-radius: 5px;
}

.number {
	font-weight: 500;
	font-size: 44px;
	color: #000;
}

div span:last-of-type {
	font-size: 12px;
}





@media screen and (max-width:600px) {
	h1 {
		font-size: 40px;
	}

	.countdown {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		margin-top: 30px;
	}

	.countdown>div {
		background-color: #fff;
		width: 250px;
		height: 60px;
		margin: 0;
		flex-direction: row;
		justify-content: space-between;
		padding: 20px;
	}

	div span:last-of-type {
		font-size: 24px;
		text-transform: uppercase;
	}

	.number {
		font-size: 34px;
	}
}


.navbar .getstarted {

	background: crimson;
	margin-left: 30px;
	border-radius: 5px;
	font-weight: 400;
	text-decoration: none;
	padding: .5rem 1rem;
	line-height: 2.3;
}

.navbar-nav a {
	color: white;
	font-size: 19px;
	text-transform: uppercase;
	margin: 2px 7px;

}

.navbar-light .navbar-brand {

	color: white;
	font-size: 25px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
}

.navbar-light .navbar-brand span {
	color: crimson;
}


.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {

	color: #000;
}

.navbar-light .navbar-nav .nav-link {

	color: #000;


}


.navbar-light .navbar-link:focus,
.navbar-light .navbar-link:hover {

	color: #000;
}



.navbar-toggler {
	padding: 1px 5px;
	font-size: 18px;
	line-height: 0.3;
	background: #fff;
}



.hs-responsive-embed-youtube {
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 Aspect Ratio */
	padding-top: 25px;
}

.hs-responsive-embed-youtube iframe {
	position: absolute;
	width: 100% !important;
	height: 100% !important;
}


.post a {
	text-decoration: none;
}

.post .read_more_btn {
	background-color: #FFA33F;
	padding: 10px;
	color: white;
	text-decoration: none;
}

.post .read_more_btn:hover {
	background-color: #F78914;
}

.upper_title {
	/* background-color: blue; */
	margin-top: 80px;
	padding-top: 80px;
	padding-bottom: 80px;
	background-image: url("../images/blog.jpg");
	background-size: cover;

}

.upper_title_program {
	/* background-color: blue; */
	margin-top: 80px;
	padding-top: 80px;
	padding-bottom: 80px;
	background-image: url("../images/children.jpg");
	background-size: cover;
}

.upper_title_contact {
	/* background-color: blue; */
	margin-top: 80px;
	padding-top: 80px;
	padding-bottom: 80px;
	background-image: url("../images/contact.jpg");
	background-size: cover;
}

.upper_title_program_reg {
	/* background-color: blue; */
	margin-top: 80px;
	padding-top: 80px;
	padding-bottom: 80px;
	background-image: url("../images/program_reg.jpg");
	background-size: cover;
	color: #000;
}

.upper_title_about {
	margin-top: 80px;
	padding-top: 80px;
	padding-bottom: 80px;
	background-image: url("../images/about.jpg");
	background-size: cover;
	color: #000;
}

.upper_title_faq {
	/* background-color: blue; */
	margin-top: 80px;
	padding-top: 80px;
	padding-bottom: 80px;
	background-image: url("../images/faq.jpg");
	background-size: cover;
	color: #000;
}

.program .card {
	flex-direction: row;
	/* align-items: center; */
	border: none;
}

.program .card-title {
	font-weight: bold;
	color: #F78914;
	font-size: x-large;
}

.program .card img {
	width: 30%;
	border-top-right-radius: 0;
	border-bottom-left-radius: calc(0.25rem - 1px);
}

.program .card-text {
	color: #140e4e;
}

.program a {
	background-color: #FFA33F;
	border: none;
}

.program a:hover {
	background-color: #F78914;
}




.contact input[type=text],
.contact input[type=email],
.contact input[type=date],
.contact select,
.contact textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	margin-top: 6px;
	margin-bottom: 16px;
	resize: vertical;
}

.contact input[type=submit] {
	background-color: #04AA6D;
	color: white;
	padding: 12px 20px;
	border: none;
	cursor: pointer;
}

.contact input[type=submit]:hover {
	background-color: #45a049;
}

/* Style the container/contact section */
/* .container {
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 10px;
  } */

/* Create two columns that float next to eachother */
.contact .column {
	float: left;
	width: 50%;
	margin-top: 6px;
	padding: 20px;
}

/* Clear floats after the columns */
.contact .row:after {
	content: "";
	display: table;
	clear: both;
}








/* FAQ */

/* body{
    font-family: 'Work Sans', sans-serif;
} */
.faq-heading {
	border-bottom: #777;
	padding: 20px 60px;
}

/* .faq-container{
display: flex;
justify-content: center;
flex-direction: column;

} */
.hr-line {
	width: 60%;
	margin: auto;

}

/* Style the buttons that are used to open and close the faq-page body */
.faq-page {
	/* background-color: #eee; */
	color: #444;
	cursor: pointer;
	padding: 30px 20px;
	width: 60%;
	border: none;
	outline: none;
	transition: 0.4s;
	margin: auto;
	font-size: 20px;

}

.faq-body {
	margin: auto;
	/* text-align: center; */
	width: 50%;
	padding: auto;

}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.faq-page:hover {
	background-color: #F9F9F9;
}

/* Style the faq-page panel. Note: hidden by default */
.faq-body {
	padding: 0 18px;
	background-color: white;
	display: none;
	overflow: hidden;
}

.faq-page:after {
	content: '\02795';
	/* Unicode character for "plus" sign (+) */
	font-size: 13px;
	color: #777;
	float: right;
	margin-left: 5px;
}

.active:after {
	content: "\2796";
	/* Unicode character for "minus" sign (-) */
}

@media screen and (max-width: 1200px) {
	.faq-page {
		width: 100%;
		margin: auto;
	}
}

/*END FAQ*/



/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

	.contact .column,
	.contact input[type=submit] {
		width: 100%;
		margin-top: 0;
	}
}




@media only screen and (max-width: 768px) {
	/* .program a {
		display: none;
	} */

	.program .card {
		flex-direction: column;
	}

	.program .card-title {
		margin-top: 5px;
	}

	.program .card-body {
		/* padding: 0.5em 1.2em; */
		padding: 0;
	}

	.program .card-body .card-text {
		margin: 0;
	}

	.program .card img {
		width: 50%;
	}
}

@media only screen and (max-width: 1200px) {
	.program .card img {
		width: 40%;
	}
}

@media only screen and (max-width: 767px) {

	.navbar-nav {
		text-align: center;

	}




	.navbar .getstarted {

		display: none;


	}





}



@media only screen and (max-width: 480px) {



	#vione {

		width: 100%;
	}
}