html{
	scroll-behavior: smooth;
	background-size: contain;
	overflow-x: hidden;
}

main{
	background-color: var(--red);
	padding: 0 0 50px 0;
}

h1{
	font-family: franklinCondensed;
	font-size: 30px;
	color: var(--yellow);
}

h2{
	font-family: franklinCondensed;
	font-size: 80px;
}

h3{
	font-family: franklinCondensed;
	font-size: 24px;
}

h4{
	font-family: franklinMedium;
	font-size: 18px;
}

h5{
	font-family: inter;
	font-size: 16px;
	font-weight: 400;
}

h6{
	font-family: inter;
	font-size: 14px;
	font-weight: 300;
}

@font-face{
	font-family: franklinCondensed;
	src: url("./fonts/franklingothiccondensed.ttf");
}

@font-face{
	font-family: franklinMedium;
	src: url("./fonts/franklingothicmedium.ttf");
}
@font-face{
	font-family: franklinBook;
	src: url("./fonts/franklingothicbook.ttf");
}

@keyframes totheright_anim{
	from{opacity: 0; left: -50px}
	to{opacity: 1; left: 0;}
}

@keyframes totheleft_anim{
	from{opacity: 0; right: -50px}
	to{opacity: 1; right: 0;}
}

@keyframes tothetop_anim{
	from{opacity: 0; bottom: -50px}
	to{opacity: 1; bottom: 0;}
}

@keyframes tothebottom_anim{
	from{opacity: 0; top: -50px}
	to{opacity: 1; top: 0;}
}

@keyframes button_fade{
	from{opacity: 1;}
	to{opacity: 0.5;}
}

 :root {
    --red: #782B24;
    --yellow: #EEDF89;
    --cream: #E9E6D7;
    --black: #252525;
 }

*{
	margin: 0;
	color: black;
}

a{
	text-decoration: none;
	color: var(--red);
}

li{
	list-style: none;
}



/* COLOR PALETTE 
- Primary
	-Bright Red #782B24

	// <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name

.inter-<uniquifier> {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
	

/* navbar _________________________________________________*/

header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background-color: var(--cream);
}

.navbar{
	display: flex;
	align-items: center;
	position: relative;
}

.navbar-ver2{display: none}

.navbar.in-view{
	animation: totheright_anim 1s forwards;
}

#navbar-logo img{
	width: 100px;
}

#nav-menu ul{
	display: flex;
	padding: 15px;
	align-items: center;
	font-family: "franklinCondensed";
}

.menu-item{
	padding: 0 10px 0 10px;
}

.menu-item a:hover{
	color: var(--black);
	animation: button_fade 0.3s forwards;

}

#nav-text{
	align-self: center;
}

#nav-text p{
	font-family: franklinBook;
	color: var(--red);
	font-size: 18px;
	padding: 0;
}

#nav-text.in-view{
	animation: totheleft_anim 1s forwards;
	position: relative;
}





/* footer _________________________________________________*/

footer{
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--yellow);
}

#footer-main{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	width: 100vw;
}

#footer-main.in-view{
	animation: tothetop_anim 1s forwards; 
	position: relative;
}

#footer-left{
	display: flex;
	padding: 0 0 0 50px;
	align-items: center;
}

#footer-logo img{
	width: 100px;
}

#footer-left-text p{
	font-family: franklinBook;
	padding-left: 30px;
	font-size: 14px;
	color: var(--red);
	padding: 0 0 0 30px;
}

#footer-nav{
	font-family: "franklinBook";
}

#footer-list{
	display: flex;

}

#footer-list a:hover{
	animation: button_fade 0.3s forwards;

}

#footer-list li{
	padding: 0 10px 0 10px;
}

#footer-links{
	display: flex;
	padding-right: 50px;
	align-items: center;
}

#footer-links img{
	width: 50px;
	padding-left: 10px;
}

#footer-links img:hover{
	animation: button_fade 0.3s forwards;
}

#footer-copyright p{
	color: var(--red);
	padding: 5px 0 5px 0;
	font-family: inter;
	font-size: 10px;
}




/* home _________________________________________________*/

#landing{
	background-image: url("../images/landing_image.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100%;
}

#home-text{
	align-self: center;
	font-family: franklinMedium;
	font-size: 80px;

	padding: 20px 0 100px 0;
}

#home-text p {
	color: var(--red);
}

#card-home{
	align-self: flex-end;
	background-color: rgb(233, 230, 215, 0.6);
	padding: 50px 50px 40px 50px;
	width: 500px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#card-home.in-view{
	animation: tothetop_anim 1s forwards;
	position: relative;
}

#card-home p{
	font-family: franklinCondensed;
	color: var(--black);
	font-size: 32px;
}

.schedule_button{
	background-color: var(--red);
	border-radius: 30px;
	padding: 15px 20px;
	margin: 20px 0;

	width: 300px;
}

.schedule_button:hover{
	animation: button_fade 0.3s forwards;
}

.schedule_button a{
	color: var(--yellow);
	font-family: franklinMedium;
	font-size: 18px;
}

#scroller-bar{
	background-color: var(--cream);
	padding: 30px 0;
	overflow-x: auto;
}

#scroll-container{
	display: flex;
	align-items: center;
	justify-content: space-between;

	animation: scrollloop 50s infinite forwards;
}

#scroll-container img{
	height: 70px;
	padding: 0 40px;
}

@keyframes scrollloop{
	from{translate: 0}
	to{translate: -100%}
}

#values{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	background-color: var(--red);
	justify-content: space-between;
	align-content: center;

	padding: 80px 0 0 0;
}

#values h2{
	color: var(--yellow);
	padding-right: 200px;
	position: relative;
	opacity: 0;
}

#values h2.in-view{
	animation: tothetop_anim 1s forwards;
}

#values-sec{
	width: 50vw;
	border-radius: 0 50px 50px 0;
	position: relative;

	background-color: var(--yellow);
	padding:  80px 0;
}

#values-sec.in-view{
	animation: slideintoright_anim 1s linear;
}

@keyframes slideintoright_anim{
	from{left: -500px}
	to{left: 0px}
}

#cards-container{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	place-items: center;
}

@keyframes mission_anim{
	0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    20% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}


.values-card{
	display: flex;
	flex-direction: column;
	width: 300px;
	margin: 0 20px;

	animation: mission_anim 20s linear infinite 0s;
}

.value-img{
	width: 300px;
	border-radius: 20px 20px 0 0;
}

.card1{
	opacity: 1;
	grid-area: 1/1;
	z-index: 1;
}
.card2{
	opacity: 0;
	animation-delay: 5s;
	grid-area: 1/1;
	z-index: 2;
}
.card3{
	opacity: 0;
	animation-delay: 10s;
	grid-area: 1/1;
	z-index: 3;
}
.card4{
	opacity: 0;
	animation-delay: 15s;
	grid-area: 1/1;
	z-index: 4;
}

.values-card-content{
	background-color: var(--red);
	padding: 20px;
	border-radius: 0 0 20px 20px;
	height: 150px;
}

.values-card-content h3{
	color: var(--yellow);
	padding: 0 0 10px 0 ;
}

.values-card-content h5{
	color: var(--yellow);
	text-align: left;
	padding: 0;
}

#mission{
	display: flex;
	align-items: center;
	background-color: var(--red);
	justify-content: space-between;

	padding: 0 0 80px 0;
}

#mission h2{
	text-align: right;
	color: var(--yellow);
	padding-left: 200px;
	position: relative;
	opacity: 0;
}

#mission h2.in-view{
	animation: tothetop_anim 1s forwards;
}

@keyframes slideintoleft_anim{
	from{right: -500px}
	to{right: 0px}
}

#mission-sec{
	width: 50vw;
	border-radius: 50px 0 0 50px;
	background-color: var(--yellow);
	padding:  80px  0;

	display: flex;
	flex-direction: column;
	position: relative;
}

#mission-sec.in-view{
	animation: slideintoleft_anim 1s forwards;
}

.mission-card{
	padding: 15px 0;
	margin: 0 80px;
}

.mission-card-content h3{
	color: var(--red);
}

.mission-card-content h5{
	color: var(--red);
	text-align: left;
	padding: 0;
}



/* services _________________________________________________*/

#services{
	background-color: var(--red);
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 50px 0 50px 0;x
}

#services-content{
	display: flex;
	justify-content: space-between;
	width: 100vw;
	padding: 40px 0 0 0;
}

.servcard{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 50px 0;

	background-color: var(--yellow);
	width: 49vw;
}

#math{
	border-radius: 0 50px 50px 0;
	height: 300px;
	position: relative;
}

#math.in-view{
	animation: slideintoright_anim 1s forwards;
}

#services h2,h4{
	color: var(--red);
	width: 400px;
	text-align: center;
	padding: 0 0 20px 0;
}

#services h2{
	line-height: 70px;
}

#services h4{
	line-height: 35px;
	color: var(--red);
}

#readingwriting{
	border-radius: 50px 0 0 50px;
	margin: 130px 0 0 0;
	position: relative;
}

#readingwriting.in-view{
	animation: slideintoleft_anim 1s forwards;
}

#packages{
	background-color: var(--red);
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 10px 0 80px 0;x
}

#packages-table{
	display: flex;
	margin: auto;
	padding-top: 50px;
	width: 60vw;
	justify-content: space-between;
}

.table{
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--yellow);

	padding: 50px;
	border-radius: 50px;
	width: 300px;
	height: 400px;
	margin: 0;

	text-align: center;
	position: relative;
	opacity: 0;
}

.pack-card{
	background-color: var(--red);
	padding: 30px;
	margin-top: 20px;
	border-radius: 50px;
	height: 100px;

	display: flex;
	justify-content: center;
}

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

.pack-card h3{
	align-self: center;
	width: 200px;
	line-height: 40px;

	color: var(--yellow);
}

#single.in-view{
	animation: tothetop_anim 1s forwards;
}

#satprep.in-view{
	animation: tothetop_anim 1s forwards 0.2s;
}

.yellow_button{
	margin: auto;
	background-color: var(--yellow);
}

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


/* testimonial _________________________________________________*/

#testimonial-page{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

#testimonial-page h1{
	padding: 50px 0;
}


#testimonial{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;

	width: 100vw;
}

#testimonial h2{
	color: var(--yellow);
	font-size: 60px;
	width: 200px;
	margin-left: 50px;
	margin-top: 100px;

	position: sticky;
	top: 100px;
	opacity: 0;
}

#testimonial h2.in-view{
	animation: totheright_anim 1s forwards;
}

#testimonial-sec{
	background-color: var(--yellow);
	width: 69%;
	padding: 50px;

	border-radius: 50px 0 0 50px;
	animation: slideintoleft_anim 1s forwards;
	position: relative;
}

#testimonial-container{
	align-self: center;
	display: grid;
	grid-template-columns: 35% 35% 35%; 
	grid-template-rows: 500px 550px 500px;

	align-items: center;
	margin: 20px 0 20px 20px;
}

.testimonial-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 300px;
	background-color: var(--red);
	border-radius: 50px;

	position: relative;
	opacity: 0;
}

.testimonial-card.in-view{
	animation: tothetop_anim 1s forwards;
}

.testimonial-img{
	width: 300px;
	border-radius: 50px;
}

.testimonial-card-content{
	background-color: var(--red);
	width: 300px;
	padding-bottom: 20px;

	border-radius: 0 0 50px 50px;
}

.testimonial-card-content h6,h5{
	padding: 20px 20px 5px 20px;
	text-align: center;

	color: var(--yellow);
}

#bottomtext{
	color: var(--yellow);
	font-family: franklinCondensed;
	font-size: 70px;
	padding: 50px;
}




/* Contact _________________________________________________*/
#contact{
	padding: 30px 0 0 0;
}

#contact-page{
	flex-direction: column;
	display: flex;
	align-items: center;

	align-content: center;
}
#contact-page h2{
	color: var(--yellow);
	text-align: center;
}

#contact-card{
	background-color: var(--yellow);
	border-radius: 50px 50px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	padding: 50px 200px 0;
	margin-top: 30px;
	height: 500px;

	animation: tothetop_anim 1s forwards;
	position: relative;
}

#contact-card-1{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 60px;
}

#contact-card-1 h3{
	font-size: 50px;
	color: var(--red);
}

#contact-card-2{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#contact-card-2 h4{
	padding: 0;
	color: var(--red);
	width: 300px;
}

#contact-links{
	display: flex;
	padding-right: 0px;
	align-items: center;

	margin-bottom: 40px;
}

#contact-links img{
	width: 50px;
	padding: 10px;
}

#contact-links img:hover{
	animation: button_fade 0.3s forwards;
}


/* TRACK RECORD_____________________________________*/

#track-bottom{
	color: var(--yellow);
	padding: 20px 0;
}

#trackrecord-1{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#trackrecord-1 h1,p{
	padding: 50px 0 0 0;
}

#trackrecord-1 p{
	font-family: franklinMedium;
	text-align: center;
	font-size: 30px;
	color: var(--yellow);
}

#trackrecord-1-info{
	display: flex;
	padding: 40px;
}

.track-info{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 400px;

}

.track-info h2,h4{
	color: var(--yellow);

	text-align: center;
	width: 200px;

}

.unicard{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	padding: 20px;
	margin: 20px;
	border-radius: 40px;
	background-color: var(--black);
	width: 210px;

	position: absolute;
}

#uni-image{
	width: 190px;
	border-radius: 30px;
}

#unlilist2{display: none;}

/* Location pins_____________________________________*/
#trackrecord-2{
	display: grid;
	grid-template-columns: 70% 30%;
	grid-template-rows: 100%;
	padding: 30px 0 100px 0;
}

.unilist{
	padding: 0px 40px;
	width: 300px;
	align-self: top;
}

.unilist-item{
	display: flex;
	flex-direction: column;

	width: 250px;
}

.uni-name{
	font-family: inter;
	font-weight: 300;
	color: var(--yellow);
	background-color: var(--red);
	text-align: left;
	border-style: none;
	padding: 5px ;
}

.uni-name:hover{
	background-color: var(--yellow);
	color: var(--red);
}

.map{
	max-width: 70vw; 
	z-index: 8;
	position: relative;
	margin: 50px;

	align-self: top;

}
.map img{
	border-radius: 100px;
}

#harvard{
	z-index: 100;
	left: 9%;
	top: 650px;
}

#stan{
	z-index: 101;
	left: 9%;
	top: 650px;
}

#penn{
	z-index: 102;
	left: 9%;
	top: 650px;
}

#yale{
	z-index: 103;
	left: 9%;
	top: 650px;
}

#columbia{
	z-index: 104;
	left: 9%;
	top: 650px;
}

#cornell{
	z-index: 105;
	left: 9%;
	top: 650px;
}

#brown{
	z-index: 106;
	left: 9%;
	top: 650px;
}

#georgetown{
	z-index: 107;
	left: 9%;
	top: 650px;
}

#usc{
	z-index: 108;
	left: 9%;
	top: 650px;
}

#ucla{
	z-index: 109;
	left: 9%;
	top: 650px;
}

#ucberk{
	z-index: 110;
	left: 9%;
	top: 650px;
}

#nyu{
	z-index: 111;
	left: 9%;
	top: 650px;
}

#nyushang{
	z-index: 112;
	left: 40%;
	top: 690px;
}

#nyuabu{
	z-index: 113;
	left: 32%;
	top: 750px;
}

#bosu{
	z-index: 114;
	left: 9%;
	top: 650px;
}

#bosc{
	z-index: 115;
	left: 9%;
	top: 650px;
}

#neu{
	z-index: 116;
	left: 9%;
	top: 650px;
}

#fordham{
	z-index: 117;
	left: 9%;
	top: 650px;
}

#pepperdine{
	z-index: 118;
	left: 9%;
	top: 650px;
}

#santa{
	z-index: 119;
	left: 9%;
	top: 650px;
}

#irvine{
	z-index: 120;
	left: 9%;
	top: 650px;
}

#bricol{
	z-index: 122;
	left: 9%;
	top: 650px;
}

#toronto{
	z-index: 123;
	left: 9%;
	top: 650px;
}

#yonsei{
	z-index: 124;
	left: 40%;
	top: 690px;
}

#peking{
	z-index: 125;
	left: 40%;
	top: 690px;
}

#sophia{
	z-index: 126;
	left: 40%;
	top: 690px;
}

#navarra{
	z-index: 127;
	left: 25%;
	top: 700px;
}

#hongkong{
	z-index: 121;
	left: 40%;
	top: 690px;
}


	.unibutton{color: var(--yellow);	}
	.unibutton:hover{	color: var(--red);}









/* media queries--------------------------------*/



@media only screen and (min-width: /*use 1441*/ 1441px) and (max-width:  1920px){
}

@media only screen and (min-width: /*use 1441*/ 320px) and (max-width:  1300px){

.table{
	margin: 20px;
}

#testimonial-sec{
	width: 60%;
	padding: 50px 50px 0 50px;
}

#testimonial-container{
	grid-template-columns: 50% 50%; 
	grid-template-rows: 500px 550px 500px 500px;
}

}

@media only screen and (min-width: /*use 1441*/ 320px) and (max-width:  1024px){


#footer-main{
	flex-direction: column;
}

#footer-left{
	flex-direction: column;
	padding: 50px;
}

#footer-left-text p{
	padding: 5px 0 0 0;
	text-align: center;
}


#footer-list{
	align-items: center;
	padding-bottom: 20px;
	margin: auto;
}

#footer-list li{
	padding: 10px 10px;
}

#footer-links{
	padding-right: 0px;
}

#footer-links img{
	width: 50px;
	padding: 10px;

}

.table{
	padding: 20px;
	width: 250px;
	height: 400px;
	margin: 0;
}

.pack-card{
	padding: 30px;
	height: 90px;
}

.track-info{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 300px;
}


.unilist{
	padding: 0px 0px;
}

.map{
	max-width: 70vw; 
	z-index: 8;
	position: relative;
	margin: 30px;

	align-self: top;

}

	#testimonial-sec{
		padding: 30px 30px 0 30px;
	}

	#testimonial-container{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.testimonial-card {
		width: 550px;
		margin-bottom: 20px;
	}

	.testimonial-card.in-view{
		animation: tothetop_anim 1s forwards;
	}

	.testimonial-img{
		width: 100%;
		border-radius: 50px;
	}

	.testimonial-card-content{
		background-color: var(--red);
		width: 100%;
		padding-bottom: 20px;

		border-radius: 0 0 50px 50px;
	}

}

@media only screen and (min-width: /*use 1441*/ 320px) and (max-width:  1010px){
	#nav-text{
		display: none;
	}

	.navbar{
		justify-content: space-between;
		width: 100vw;
	}

}

@media only screen and (min-width: /*use 1441*/ 320px) and (max-width:  980px){

	#values-sec.in-view{
		animation: slideintoright_anim;
	}

	#values-sec.in-view{
	animation: slideintoright2_anim 0.3s linear;
	}

	@keyframes slideintoright2_anim{
		from{left: -200px}
		to{left: 0px}
	}

	@keyframes slideintoleft2_anim{
	from{right: -200px}
	to{right: 0px}
	}

	#mission-sec.in-view{
		animation: slideintoleft2_anim 0.3s forwards;
	}

	#mission h2{
		padding-left: 90px;
		padding-right: 20px;
	}

	#values h2{
		padding-right: 100px;
	}

	#math.in-view{
		animation: slideintoright2_anim 0.3s forwards;
	}

	#readingwriting.in-view{
		animation: slideintoleft2_anim 0.3s forwards;
	}

	#packages-table{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.table{
		padding: 20px;
		width: 430px;
		height: 300px;
		margin: 10px;
	}

	.pack-card{
		padding: 30px;
		height: 50px;
	}
	.pack-card h3{
		width: 420px;
	}

}



@media only screen and (min-width: /*use 1441*/ 320px) and (max-width:  980px){

	#trackrecord-1 p{
		width: 80%;
	}

	#track-bottom{
		padding: 0;
	}

	#trackrecord-2{
		grid-template-rows: 680px 500px;
		grid-template-columns: 100%;
		width: 100%;
		padding: 30px 0 100px 0;
	}

	.map{
		max-width: 100vw; 
		z-index: 8;
		margin: 0 20px 30px 20px;
	}

	.unilist{
		padding: 0px 10px;
		align-self: top;
		padding-left: 40px;
	}

	.unilist-item{
		display: grid;
		grid-template-columns: 300px 300px 300px;
		height: 200px;

		width: 300px;
	}


	#testimonial-sec{
		padding: 20px 20px 0 20px;
	}

	.testimonial-card {
		width: 500px;
		margin-bottom: 20px;
	}
}


@media only screen and (min-width: /*use 1441*/ 320px) and (max-width:  906px){
	.unilist-item{
		display: grid;
		grid-template-columns: 400px 400px;
		height: 200px;
		padding-top: 0px;

		width: 400px;
	}
	#trackrecord-2{
		grid-template-rows: 630px 400px;
		grid-template-columns: 100%;
		width: 100%;
		padding: 0px;
	}

}

@media only screen and (min-width: /*use 1441*/ 320px) and (max-width:  797px){
	#home-text p{
		font-size: 70px;
	}

	#values{
		flex-direction: column;
		align-items: center;
	}

	#values h2{
		text-align: center;
		font-size: 50px;
		padding: 0;
	}

	#values br{
		display: none;
	}

	#values-sec{
		width: 80vw;
		padding:  80px 0;
		margin: 30px;
		border-radius: 50px;
	}

	#mission{
		flex-direction: column;
		align-items: center;

	}

	#mission h2{
		text-align: center;
		padding: 0;
		font-size: 50px;
	}

	#mission br{
		display: none;
	}

	#mission-sec{
		width: 80vw;
		margin: 30px;
		border-radius: 50px;
	}


	#services{
		background-color: var(--red);
		display: flex;
		flex-direction: column;
		align-items: center;

		padding: 50px 0 50px 0;x
	}

	#services-content{
		flex-direction: column;
		padding: 30px 0 0 0;
	}

	.servcard{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40px 0;

		background-color: var(--yellow);
		width: 80vw;
	}

	#math{
		border-radius: 0 50px 50px 0;
		height: 300px;
		position: relative;
	}

	#readingwriting{
		border-radius: 50px 0 0 50px;
		margin: 50px 0 0 0;
		position: relative;
		align-self: flex-end;
	}


	#testimonial h2{
		font-size: 50px;
	}


	#testimonial-sec{
		padding: 0;
	}

	#testimonial-container{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.testimonial-card {
		width: 400px;
		margin-bottom: 20px;
	}

	.testimonial-card-content{
		background-color: var(--red);
		width: 100%;
		padding-bottom: 20px;

		border-radius: 0 0 50px 50px;
	}

	#trackrecord-1-info{
		display: flex;
		padding: 40px;
	}

	.track-info{
		width: 250px;

	}

	.track-info h2,h4{
		color: var(--yellow);

		text-align: center;
		width: 200px;
	}

	.unilist-item{
		grid-template-columns: 300px 300px;
	}

	#trackrecord-2{
		grid-template-rows: 490px 400px;
	}

	#contact-card{
		background-color: var(--yellow);
		border-radius: 50px 50px 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		padding: 50px 100px 0;
		margin-top: 30px;
		height: 500px;
	}

@media only screen and (min-width: /*use 1441*/ 320px) and (max-width:  698px){
	#home-text p{
		font-size: 40px;
		text-align: center;
	}

}

@media only screen and (min-width: /*use 1441*/ 320px) and (max-width:  668px){

	#footer-nav{ display: none;}
	#nav-menu{display: non/e;}

	.track-info h2{
		font-size: 50px;
	}
	.track-info h4{
		font-size: 14px;
		width: 100px;
	}
	.track-info{
		width: 150px;
	}
	#trackrecord-1 p{
		font-size: 24px;
	}

	#contact-page h2{
		display: none;
	}

}

}



@media only screen and (min-width: /*use 1441*/ 0px) and (max-width:  500px){
	html{
		overflow-x: hidden;
	}

	header{
		flex-direction: column;
		align-items: center;
		margin-bottom: 0;
	}
	.navbar{
		flex-direction: column;
	}
	#nav-menu{
		display: none;
	}

	.navbar-ver2{
		display: flex;
	}

	.ham{
		background-color: var(--cream);
		position: fixed;
		top: 20px;
		right: 30px;
		z-index: 201;
		border-style: solid;
		border-color: var(--red);
		border-width: 0.5px;
		height: 40px;
		width: 40px;

		box-shadow: 3px 3px #d6c97c;
	}


	.ham:active{
		transform: translateY(2px);
		box-shadow: 1px 1px #d6c97c;
	}


	hr{
		border: 2px solid var(--red);
		width: 70%;
		margin: 5px auto;
		text-align: center;
	}

	.nav2{
		background-color: var(--yellow);
		height: 100vh;
		width: 200px;
		position: fixed;
		z-index: 200;
		right: 0px;
		top: 0px;
		opacity: 0;

		display: flex;
		flex-direction: column;
		align-items: flex-end;
		padding: 100px 30px 0 0;
	}

	.nav2.in-view{
		animation: totheleft_anim 0.5s forwards;
	}

	.menu-item2{
		padding: 10px 5px;
		font-family: inter;
		text-align: right;
		width: 190px;
	}
	.menu-item2 a{
		height: 40px;
	}
	.menu-item2:hover{ background-color: var(--red);}
	.menu-item2 a:hover{ color: var(--yellow);}

	#footer-main{
		width: 300px;
	}

	#footer-links{
		padding-bottom: 70px;
		padding-top: 0;
	}





	#home-text{
		font-size: 30px;

		padding: 0px 0 30px 0;
	}

	#card-home{
		align-self: center;
		padding: 20px;
		width: 300px;
	}

	#card-home p{
		font-size: 18px;
		text-align: center;
	}

	.schedule_button{
		width: 200px;
		align-self: center;
	}

	.schedule_button a{
		font-size: 12px;
	}

	#scroller-bar{
		padding: 10px 0;
	}

	#scroll-container{
		animation: scrollloop 20s infinite forwards;
	}

	#scroll-container img{
		height: 50px;
		padding: 0 10px;
	}

	#values{
		display: flex;
		flex-direction: column;

		padding: 30px 0 0 0;
	}

	#values h2{
		padding-right: 0px;
		font-size: 30px;
	}

	#values h2.in-view{
		animation: tothetop_anim 1s forwards;
	}

	#values-sec{
		width: 90vw;
		padding:  25px 0;
		border-radius: 30px;
	}

	#values-sec.in-view{
		animation: slideintoright_anim 0.5s linear;
	}

	@keyframes slideintoright_anim{
		from{left: -100px}
		to{left: 0px}
	}

	.values-card{
		width: 275px;
	}

	.value-img{
		width: 275px;
		border-radius: 20px 20px 0 0;
	}

	#mission{
		flex-direction: column;
		padding: 0 0 40px 0;
	}

	#mission h2{
		text-align: center;
		font-size: 30px;
		padding-left: 0px;
	}

	#mission-sec{
		width: 90vw;
		border-radius: 30px;
		padding:  20px  0;
	}

	.mission-card{
		margin: 0 25px;
	}

	#services h1{
		margin-top: -20px;
	}


	#services h2{
		line-height: 45px;
		font-size: 40px;
		width: 250px;
	}

	#services h4{
		line-height: 25px;
	}

	.servcard{
		padding: 20px 0;
		width: 90vw;
		hei
	}

	#math{
		height: 220px;
	}
	#readingwriting{
		margin: 20px 0 0 0;
		height: 230px;
	}





	#packages-table{
		padding-top: 10px;
		width: 60vw;
	}

	.table{
		padding: 20px;
		width: 300px;
		height: 250px;
		margin-bottom: 10px;

		text-align: center;
		position: relative;
		opacity: 0;
	}

	.pack-card{
		padding: 20px;
		margin-top: 10px;
		border-radius: 50px;
		height: 50px;
	}




	#testimonial-page h1{
		padding: 30px 0 0 0 ;
	}


	#testimonial{

		align-items: center;

		width: 100vw;

		flex-direction: column;
	}

	#testimonial h2{
		text-align: center;
		font-size: 30px;
		width: 200px;
		margin: 20px;
		margin-top: 40px;

		position: relative;
		top: 0px;
		opacity: 0;
	}

		#testimonial h2 br{
			display: none;
		}

	#testimonial-sec{
		width: 80vw;
		padding: 20px;

		border-radius: 50px;
	}

	#testimonial-container{
		align-self: center;
		display: flex;
		flex-direction: column;

		align-items: center;
		margin: 20px;
	}

	.testimonial-card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 300px;
		background-color: var(--red);
		border-radius: 50px;

		position: relative;
		opacity: 0;
	}

	.testimonial-img{
		width: 300px;
		border-radius: 50px;
	}

	.testimonial-card-content{
		background-color: var(--red);
		width: 300px;
		padding-bottom: 20px;

		border-radius: 0 0 50px 50px;
	}

	.testimonial-card-content h6,h5{
		padding: 20px 20px 5px 20px;
		text-align: center;

		color: var(--yellow);
	}

	#bottomtext{
		text-align: center;
		font-size: 40px;
		padding: 20px;
	}

	#contact-card-1 h3{
		text-align: center;
		line-height: 45px;
	}

	#contact-card{
		width: 125px;
	}

	.unilist{
		position: relative;
		top: -640px;
	}

	.unilist-item{
		display: grid;
		grid-template-columns: 300px;
		height: 200px;
		padding: 0px;

		width: 300px;
	}
	#trackrecord-2{
		grid-template-rows: 630px 400px;
		grid-template-columns: 300px;
		width: 100%;
		padding: 0px;
		margin-bottom: -250px;
	}

	.map{display: none;}
	#unilist1{display: none;}

	#trackrecord-1-info{
		flex-direction: column;
		padding: 40px;
	}
	.track-info{
		width: 300px;
	}
	.track-info h4{
		width: 100%;
	}

	#unlilist2{
		display: flex;
		flex-direction: column;
	}


	.unicard{display: none;}

}