@import 'main.css';



/*
	HERO SECTION
*/

#section-hero{	
	background: url(/img/homepage-wallpaper.JPG) no-repeat center;
	background-size: cover;
	background-color: var(--color-dark);
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 620px;
	text-align: center;
}

#section-hero .content{
  padding: 50px min(50px, 5vw);
}

#section-hero .content .btn{
	margin-top: 30px;
}

#section-hero img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#section-hero__title{
	font-size: var(--font-xlarge);
	padding-bottom: 25px;
	color: white;
	text-wrap: balance;
	text-transform: capitalize;
}

#section-hero__text{
	font-size: var(--font-big);
	line-height: 1.5;
	color: #eee;
	font-weight: 500;
}





/*
	EVENT BANNER
*/

#event-banner{
	background: var(--color-dark);
	border-radius: 10px;
	display: grid;
	align-items: center;
	max-width: 1180px;
	margin: 30px auto;
}

#event-banner .content{
	padding: 50px;
}

#event-banner .tag{
	color: var(--color-primary);
	font-weight: 500;
	margin-bottom: 10px;
}

#event-banner__title{
	font-size: var(--font-large);
	color: white;
	text-wrap: balance;
	margin-bottom: 30px;
}

#event-banner .btn{
	display: block;
	width: 100%;
	text-align: center;
}

#event-banner .image-area{
	justify-self: center;
}

#event-banner img{
	display: block;
	width: 100%;
	max-width: 400px;
	border-radius: 10px;
	box-shadow: 5px 10px 30px black;
	transform: scale(1.05);
}

@media (min-width: 866px){
	#event-banner{
		grid-template-columns: 1fr 1fr;
	}

	#event-banner .btn{
		width: fit-content;
	}

	#event-banner .image-area{
		padding: 0;
	}

	#event-banner img{
		transform: scale(1.1);
	}
}





/*
	FEATURES AND METHODOLOGY
*/

main > h2{
	text-align: center;
	font-size: var(--font-large);
	margin-bottom: 50px;
}

#features{
	display: grid;
	gap: 30px;
	/*padding:
		50px
		min(50px, 5vw);*/
}

#features .content{
	padding: min(30px, 8vw);
	background: white;
	border: 1px solid var(--color-light);
}

@media (min-width: 866px){
	#features{
		grid-template-columns: repeat(3, 1fr);
	}
}

#features .content .title{
	font-size: var(--font-big);
	color: var(--color-dark);
	margin-bottom: 10px;
}

#features .content .text{
	font-size: var(--font-small);
	line-height: 1.75;
	color: #333;
}






/*
	INSTRUMENT LIST
*/

#instrument-section{
	padding: 50px min(50px, 5vw);
}

#instrument-list{
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 50px;
	padding: 0;
}

#instrument-section__title{
	text-align: center;
	font-size: var(--font-big);
	margin-bottom: 50px;
}

#instrument-list li{
	display: flex;
	align-items: center;
	flex-direction: column;
}

#instrument-list img{
	display: block;
	width: min(80px, 15vw);
}

#instrument-list p{
	font-size: var(--font-medium);
	font-weight: 600;
	text-align: center;
}







/*
	OUR COURSES AND SERVICES
*/

#services{
	scroll-margin-top: 80px;
}

#services-container{
	display: grid;
	gap: 80px;
}

@media (min-width: 866px){
	#services article{
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 50px;
	}
}

#services article header{
	margin-bottom: 25px;
}

#services .services__tag{
	color: #838683;
	font-weight: 500;
	font-size: var(--font-big);
	letter-spacing: -1px;
	margin: 10px 0;
}

#services .services__title{
	font-size: var(--font-large);
	line-height: 1;
}

#services .services__description{
	line-height: 1.75;
	margin: 15px 0;
}

#services article img{
	width: 100%;
	border-radius: 8px;
}

@media (min-width: 866px){
	#services article:nth-child(even) img{
		grid-area: 1 / 2;
	}
}

#services .btn{
	margin-top: 10px;
	width: 100%;
	text-align: center;
	display: block;
}

@media (min-width: 866px){
	#services .btn{
		display: inline-block;
		width: fit-content;
	}
}







/*
	STUDENT APP/PLATFORM SECTION
*/

#section-platform{
	background: #f0efeb;
}

.feature-list{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	align-items: center;
	padding: 0;
	text-align: center;
}

.list-group{
	display: grid;
	gap: 25px;
}

.feature-list .list-item{
	list-style: none;
	padding: 25px;
}

.feature-list .list-item .title{
	font-size: var(--font-medium);
	font-weight: 500;
	margin-bottom: 8px;
}

.feature-list .list-item .text{
	font-size: var(--font-small);
	color: #555;
	text-wrap: balance;
}

.feature-list .list-item .list-icon{
	width: 40px;
	margin-bottom: 15px;
}






/*
	ADDRESS
*/

#section-address .content{
	padding: 60px min(50px, 5vw);
	text-wrap: balance;
}

#section-address__title{
	margin-bottom: 20px;
	font-size: var(--font-large);
}

#section-address__text{
	font-size: var(--font-small);
	font-weight: 500;
	color: #555;
	text-decoration: none;
	border-bottom: 2px solid #eee;
}

#map{
	width: 100%;
	height: 50vh;

	border: none;
}






/*
	FREQUENTLY ASKED QUESTIONS
*/

#faq{
	padding: 80px min(50px, 5vw);
}

#faq__title{
	font-size: var(--font-xlarge);
	margin-bottom: 65px;
	line-height: 100%;
}

#faq #questions{
	width: 100%;
	margin: 0 auto;
	display: grid;
	gap: 25px;
}

#faq details{
	background: #eee;
	background: linear-gradient(160deg, #f7f7f7, #eee);
	padding: 20px 30px;
	cursor: pointer;
}

#faq details[open]{
	border: 2px solid black;
}

#faq details summary{
	font-weight: 500;
}

#faq details p,
#faq details ul{
	margin-top: 20px;
	line-height: 1.65;
}

#faq details a{
	color: var(--color-primary);
}

#faq details[open] .content{
  animation: topToBottom 0.3s;
}

@keyframes topToBottom{
	from{
		transform: translateY(-20px);
	}

	to{
		transform: translateY(0);
	}
}