.hero-category {
	margin-right: auto;
	margin-left: auto;
	background-color: transparent;
}

.hero-category.language {
	background-image: linear-gradient(60deg, #ff6029, #ed0a56 40%, #cc0031);
}

.hero-category.social {
	background-image: linear-gradient(60deg, #f9c316, #ff7200 40%, #f50);
}

.hero-category.math {
	background-image: linear-gradient(60deg, #00c9ff, #00c9ff 40%, #0098ed);
}

.hero-category.explore {
	background-image: linear-gradient(60deg, #fada14, #f9c316 27%, #ff8500);
}

.hero-category.action {
	background-image: linear-gradient(60deg, #00d36e, #00d36e 40%, #0bad60);
}

.hero-category.creativity {
	background-image: linear-gradient(60deg, #f0f, #ae00ff 34%, #8900e2);
}

.cat-hero-container {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: 33em;
	max-width: 1440px;
	margin-right: auto;
	margin-left: auto;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-o-object-fit: fill;
	object-fit: fill;
}

.hero-title-container {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 50%;
	height: 100%;
	max-width: 50%;
	padding-left: 3em;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.hero-img-container {
	position: relative;
	width: 50%;
	height: 100%;
	max-width: 50%;
}

.cat-hero-image {
	position: absolute;
	left: 0%;
	top: auto;
	right: 0%;
	bottom: 0%;
	z-index: 2;
	height: 98%;
	margin-right: auto;
	margin-left: auto;
}

.heading {
	max-width: 75%;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family: Fredoka, sans-serif;
	color: #fff;
	font-size: 3em;
	line-height: 1.2em;
}

.cat-icon {
	width: 5.4em;
	margin-bottom: 1em;
}


.hero-ring-img {
	position: absolute;
	left: auto;
	top: auto;
	right: 0%;
	bottom: 0%;
	z-index: 1;
	display: inline-block;
	max-width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 0px;
}

.cat-details-title {
	overflow: visible;
	width: 60%;
	max-width: 1440px;
	margin: 0 auto;
	font-family: Fredoka, sans-serif;
	color: #1881C5;
	font-size: 2.5em;
	line-height: 1.2em;
	text-align: center;
}

.cat-details-title.language {
	color: #CC0031;
}

.cat-details-title.social {
	color: #FF5500;
}

.cat-details-title.math {
	color: #0098ED;
}

.cat-details-title.explore {
	color: #E3AE02;
}

.cat-details-title.action {
	color: #0BAD60;
}

.cat-details-title.creativity {
	color: #8900E2;
}

.video {
	position: relative;
	display: block;
	overflow: visible;
	max-width: none;
	-o-object-fit: fill;
	object-fit: fill;
}

.cat-details {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding-top: 3em;
	padding-bottom: 5em;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	background-color: #eee;
	margin-bottom: 3em;
}

.video-container {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

.cat-details-text {
	width: 80%;
	margin: 2em auto;
	font-family: Fredoka, sans-serif;
	font-size: 1.3em;
	line-height: 1.3em;
	text-align: center;
}

.img-bubbles {
	display: block;
	width: auto;
	max-width: 40%;
	margin-right: auto;
	margin-left: auto;
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	-o-object-fit: fill;
	object-fit: fill;
}

.cat-detaol-contents {
	width: 70%;
	max-width: 70%;
}

.img-ray {
	display: block;
	width: auto;
	max-width: 75%;
	margin-right: auto;
	margin-left: auto;
	-o-object-fit: fill;
	object-fit: fill;
}

.bubbles-left {
	max-width: 15%;
	-webkit-box-flex: 0;
	-webkit-flex: 0 auto;
	-ms-flex: 0 auto;
	flex: 0 auto;
}

.ray-right {
	max-width: 15%;
}

.cat-icon-hero {
	width: 5.8em;
	height: 5.8em;
	margin-bottom: 1em;
}


@media screen and (min-width: 1920px) {
	.heading {
		margin-top: 0px;
		margin-bottom: 0px;
	}

	.cat-icon-hero {
		width: 6em;
		height: 6em;
		margin-bottom: 1em;
	}

}

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

}

@media screen and (max-width: 991px) {
	.cat-hero-container {
		width: 100%;
		height: 28em;
	}

	.hero-img-container {
		-webkit-box-flex: 0;
		-webkit-flex: 0 auto;
		-ms-flex: 0 auto;
		flex: 0 auto;
	}

	.cat-hero-image {
		position: absolute;
		left: 0%;
		top: auto;
		right: 0%;
		bottom: 0%;
		display: inline-block;
		height: 90%;
		margin-right: auto;
		margin-left: auto;
	}

	.heading {
		font-size: 2.7em;
	}

	.cat-icon-hero {
		width: 4.8em;
		height: 4.8em;
		margin-bottom: 1em;
	}

	.hero-ring-img {
		left: 0%;
		top: auto;
		right: 0%;
		bottom: 0%;
		height: auto;
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
	}

	.cat-details-title {
		max-width: 60%;
		margin-top: 30px;
		margin-bottom: 20px;
		font-size: 2em;
		line-height: 1.1em;
	}

	.video {
		margin-right: auto;
		margin-left: auto;
	}

	.cat-details {
		padding-top: 3.1em;
		padding-bottom: 4em;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: start;
		-webkit-justify-content: flex-start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}

	.video-container {
		width: auto;
		max-width: 90%;
		margin-right: auto;
		margin-left: auto;
	}

	.cat-details-text {
		width: 90%;
		font-size: 1.4em;
	}

	.img-bubbles {
		width: 60px;
		max-width: 15%;
		min-width: auto;
	}

	.cat-detaol-contents {
		width: auto;
		height: 90%;
		max-width: 90%;
		min-width: auto;
	}

	.img-ray {
		position: static;
		width: auto;
		max-width: 130px;
		margin-right: auto;
		margin-left: auto;
		-o-object-fit: fill;
		object-fit: fill;
	}

	.bubbles-left {
		display: none;
	}

	.ray-right {
		margin-top: 1em;
		-webkit-align-self: auto;
		-ms-flex-item-align: auto;
		-ms-grid-row-align: auto;
		align-self: auto;
		-webkit-box-flex: 0;
		-webkit-flex: 0 auto;
		-ms-flex: 0 auto;
		flex: 0 auto;
	}
}

@media screen and (max-width: 767px) {
	.cat-hero-container {
		height: 100vh;
	}

	.hero-title-container {
		padding-left: 2em;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.cat-hero-image {
		left: 0%;
		top: auto;
		right: 0%;
		bottom: 0%;
		height: auto;
		max-width: 90%;
		margin-right: auto;
		margin-left: auto;
	}

	.heading {
		font-size: 2em;
	}

	.cat-icon-hero {
		max-width: 4.5em;
		width: 4.4em;
		height: 4.4em;
		margin-bottom: 1em;
	}

	.hero-ring-img {
		left: 0%;
		top: auto;
		right: 0%;
		bottom: 0%;
		margin-right: auto;
		margin-left: auto;
	}

	.cat-details-title {
		max-width: 65%;
		margin: 20px auto;
		font-size: 1.5em;
	}

	.video {
		width: 100%;
		margin-bottom: 0px;
	}

	.cat-details {
		padding-top: 2.5em;
		padding-bottom: 1em;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.video-container {
		max-width: none;
		margin-right: 10px;
		margin-left: 10px;
	}

	.cat-details-text {
		font-size: 1.1em;
		line-height: 1.6em;
	}

	.img-bubbles {
		display: block;
	}

	.cat-detaol-contents {
		height: 85%;
		max-width: none;
		min-width: auto;
	}

	.img-ray {
		width: 80px;
	}

	.bubbles-left {
		display: none;
		width: 120px;
		max-width: none;
		-webkit-box-ordinal-group: 4;
		-webkit-order: 3;
		-ms-flex-order: 3;
		order: 3;
		-webkit-box-flex: 0;
		-webkit-flex: 0 auto;
		-ms-flex: 0 auto;
		flex: 0 auto;
	}

	.ray-right {
		max-height: 15%;
		max-width: none;
		margin-top: 1em;
		-webkit-align-self: center;
		-ms-flex-item-align: center;
		-ms-grid-row-align: center;
		align-self: center;
		-webkit-box-ordinal-group: 4;
		-webkit-order: 3;
		-ms-flex-order: 3;
		order: 3;
	}
}

@media screen and (max-width: 479px) {
	.cat-hero-container {
		height: 30em;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.hero-title-container {
		width: 100%;
		height: 50%;
		max-width: 100%;
		padding-right: 1em;
		padding-left: 1em;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.hero-img-container {
		width: 100%;
		height: 50%;
		max-width: 100%;
	}

	.cat-hero-image {
		position: absolute;
		left: 0%;
		top: auto;
		right: 0%;
		bottom: 0%;
		height: 100%;
		max-width: 70%;
		margin-right: auto;
		margin-left: auto;
		padding-top: 0.8em;
	}

	.heading {
		max-width: 90%;
		margin-right: auto;
		margin-left: auto;
		font-size: 1.8em;
		text-align: center;
	}

	.cat-icon-hero {
		margin-top: 1em;
		margin-right: auto;
		margin-left: auto;
		width: 3.7em;
		height: 3.7em;
		max-width: 3.7em;
		margin-bottom: 1em;
	}

	.hero-ring-img {
		position: absolute;
		left: 0%;
		top: 0%;
		right: 0%;
		bottom: 0%;
		z-index: 0;
		max-height: 100%;
		margin-right: auto;
		margin-left: auto;
		padding-top: 0.8em;
	}

	.cat-details-title {
		width: 90%;
		max-width: 90%;
		margin-top: 30px;
		margin-bottom: 20px;
		font-size: 1.5em;
		line-height: 1.3em;
		text-align: center;
	}

	.cat-details-title.language {
		font-size: 1.9em;
		line-height: 1.2em;
		text-align: left;
	}

	.video {
		width: 100%;
		margin-bottom: 0px;
	}

	.cat-details {
		padding-top: 0.3em;
		padding-bottom: 1.2em;
	}

	.video-container {
		max-width: 100%;
		margin-right: 10px;
		margin-left: 10px;
	}

	.cat-details-text {
		text-align: left;
	}

	.cat-detaol-contents {
		height: 85%;
	}

	.img-ray {
		width: 80px;
	}

	.ray-right {
		max-height: 15%;
		max-width: none;
	}
}