@charset "utf-8";

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

	:root {
	--primary_font: 'Montserrat';
	--primary_clr : #d6c38b;
	--secondary_clr: #0f181d;
	--two_clr : 	#e37f42;
	}

	body {
		background-size: 50vw;
	}


	.Button{
		/* background-color: aqua; */
		font-size: 3em;
		width: 60vw;
		height: auto;
		padding: 0.3em;
		align-items: center;
		align-content: center;
		justify-content: center;
		margin: 0px auto;
		margin-top: 1em;
	}

	nav {
		height: 8em;
		align-items: center;
	}

	#Title1 {
		font-size: 10rem;
		margin-top: 0.5em;
		line-height: 1em;
		text-align: center;
	}
	
	#Title2  {
		font-size: 8rem;
		line-height: 1em;
		text-align: center;
		/* max-width: 60vw; */
		/* margin: 0px auto;*/
	}

	.FirstCard {
		margin: 0px auto;
		border-radius: 2em;
		font-size: medium;
		width: 80vw;
		padding: 0.5em;
	}

	.First nav header img {
	width: 25vw;
	/* margin: 2em 0px; */
	justify-content: center;
	}

	.sec2leftCard {
		width: 100vw;
		border-radius: 8vw;
		margin: 0px auto;
		padding: 0vw 1vw;
	}

	.sec2leftCard h2{
		font-size: x-large;
		text-align: center;
		margin: 2vw;
	}

	.sec2leftCard ul {
		padding: 1vw 1vw 2vw 3vw;
		margin: unset;
		margin-left: -1em;
	}

	.sec2leftCard ul li {
		font-size: 2rem;
	}

	
	.sec2rightcard {
		/* background-color: aqua; */
		margin: 5vw auto;
		text-align: center;
		width: 100vw;
	}

	.sec2rightcard h1 {
		line-height: 120%;
		font-size: xx-large;
	}

	.Second_Cards{
		flex-wrap: unset;
		margin-bottom: 5vh;
	}

	.Second_Cards div{
		width: 20em;
	}

	.Second_Cards h3 {
		font-size: 300%;
	}
	.Second_Cards p {
		font-size: 2rem;
		padding: unset;
	}

	.school{
		flex-direction: column;
		flex-wrap: wrap;
		padding: unset;
		justify-content: center;
		text-align: center;
		align-items: center;
		overflow: unset;
		width: 100%;
		/* margin-bottom: 40vh; */
	}



	.schoollist {

		all:unset;
		display: grid;
		row-gap: 3em;
		column-gap: 3em;
		grid-template-columns: repeat(2, 2fr);
		margin: 0px auto;
		width: 90vw;
		height: max-content;
		
	}

	.schoollist li {
		all: unset;
		background-color: var(--primary_clr);
		border-radius: 3em;
		padding: 0.2em 0.2em;
	}


	.schoollist h3 {
		font-size: 3em;
	}

	.schoollist p {
		font-size: 2em;
	}


	.schooltitle h1 {
		font-size: 8em;
	}

	.schooltitle h2 {
		font-size: 5em;
		line-height: unset;
	}

	#schoolContent {
		font-size: 2em;
		margin: 3em auto;
		width: 85vw;
		padding: unset;
	}

	.carousel-wrapper{
		/* background-color: aqua; */
		overflow: unset;
		position: relative;
		width: 100%;
		height: auto;
		margin: 2em 0px 0px 0px;
		/* overflow: hidden; */
	}

	.carousel {
		position: relative;
		width: 100%;
		height: 100vw;
		overflow: hidden;
	}

	.carousel img {
		overflow: hidden;
		margin: 0px 0px;
		margin-left: 20vw;
		position: absolute;
		top: 0;
		left: 0;
		width: 60vw;
		object-fit: cover;
		border-radius: 1em;
	}

	.Gamesecdiv{
		max-width: 80vw;
		padding: 3vw;
		padding-bottom: 0px;
		margin: 3vw 0px;
	}

	.GameSection h4 {
		font-size: xx-large;
	}

	.GameSection iframe{
		width: 90vw;
		height: 50vw;
		margin: unset;
	}

	.LastSection .Socials p {
		font-size: 4vw;
	}

}