@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
	/* colors */
	--color-primary: #E89800;
	--color-light: #ccc;
	--color-dark: #0C0D0C;

	/* font sizes */
	--font-xlarge: min(1.2rem + 2vw, 6rem);
	--font-big: min(0.8rem + 1.5vw, 1.5rem);
	--font-medium: min(0.7rem + 1.5vw, 1.2rem);
	--font-small: min(0.6rem + 1.5vw, 0.95rem);
}

*{
	margin: 0;
	box-sizing: border-box;
	font-family: "Montserrat", sans-serif;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 1rem 2rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}

.btn:hover{
	background: var(--color-primary);
	color: white;
}

.btn__icon{
	font-size: 22px;
}

/* top */
#header{
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 10px min(50px, 5vw);
	background: black;
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0 5px 20px hsla(0, 0%, 10%, 0.3);
}

#header__info{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: min(30px, 3vw);
}

#header__info .text{
	display: none;
	text-align: right;
	text-wrap: balance;
	color: #ccc;
}

.divider{
	background: #333;
	height: 50px;
	width: 2px;
	margin-right: 10px;
}

#header__info .links{
	display: flex;
	gap: min(20px, 1vw);
	align-items: center;
}

#header__info .social-btn{
	display: block;
	text-decoration: none;
	border-radius: 200px;
	font-size: 30px;
	padding: 14px;
	background: #333;
	color: white;
}

@media (min-width: 866px){
	#header__info{
		justify-content: flex-end;
	}

	#header__info .text .line{
		display: block;
	}

	#header__info .text{
		display: block;
	}
}



/* main sections */
#section-hero{	
	background: white;
	display: grid;
}

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

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

@media (min-width: 866px){
  #section-hero{
  	grid-template-columns: 1fr 2fr;
  	align-items: center;
  }
}

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

#section-hero__title{
	font-size: min(1rem + 3vw, 4rem);
	padding-bottom: 25px;
	color: #000;
	text-wrap: balance;
}

#section-hero__text{
	font-size: var(--font-small);
	line-height: 1.5;
	color: #6c6c6c;
}



#features{
	--border-size: 1px;
	display: grid;
	gap: 20px;
	padding:
		50px
		min(50px, 5vw);
}

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

@media (min-width: 866px){
	#features{
		grid-template-columns: repeat(3, 1fr);
		gap: var(--border-size);
		padding: var(--border-size);
		background: var(--color-light);
	}

	#features .content{
		border: none;
	}
}

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

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



.section{
	padding: 80px min(50px, 5vw);
}

.section__title{
	font-size: var(--font-xlarge);
	margin-bottom: 20px;
	text-align: center;
}

.section__subtitle{
	font-size: var(--font-medium);
	font-weight: 300;
	color: #888;
	text-align: center;
	margin-bottom: 50px;
	text-wrap: balance;
}

.section__title .highlight{
	color: var(--color-primary);
}

@keyframes smooth_moviment{
	from{
		bottom: 0;
		box-shadow: -2px 0 50px hsla(0, 0%, 35%, 0.2);
	}
	to{
		bottom: 10px;
		box-shadow: -8px 15px 50px hsla(0, 0%, 35%, 0.2);
	}
}

#img_app-do-aluno{
	width: 100%;
	margin: 0 auto;
	display: block;
	position: relative;
	z-index: 1;

	animation: smooth_moviment 2s infinite alternate;
}

.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;
	font-weight: 500;
}

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

.feature-list .list-item .text{
	font-size: var(--font-small);
	font-weight: 400;
	color: gray;
	text-wrap: balance;
}

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



#section-about_us{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
	text-align: center;
}

#section-about_us .title{
	font-size: var(--font-medium);
	font-weight: 500;
	font-style: italic;
	max-width: 70vw;
	line-height: 1.75;
	letter-spacing: 0.1rem;
}

#teachers{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
}

#teachers .profile-card{
	width: min(260px, 70vw);
}

#teachers .profile-card__img{
	width: 100%;
	border-radius: 999px;
}

#teachers .profile-card__name{
	margin-top: 20px;
}

#teachers .profile-card__description{
	font-size: var(--font-small);
	font-weight: 500;
	color: #888;
}



#section-cta{
	background: url('../img/CTA_background.jpg') no-repeat center;
	background-size: cover;
	background-attachment: fixed;
	background-position: top;
}

#call-to-action{
	background: hsla(0, 0%, 0%, 0.8);
	backdrop-filter: blur(3px);
	border-radius: 10px;
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: min(50px, 5vw);
	text-align: center;
}

#call-to-action .title{
	font-size: var(--font-xlarge);
	color: var(--color-primary);
}

#call-to-action .text{
	font-size: var(--font-medium);
	font-weight: 500;
	color: #ccc;
	margin-top: 25px;
}

#call-to-action .btn{
	margin-top: 40px;
}



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

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

#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;
}



/*FAQ*/
#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);
	}
}