/*CONFIGURAÇÕES PARA O FRONT*/
@charset "UTF-8";

@font-face {
    font-family: 'Mulish';
    src: url('../webfonts/Mulish-Regular.woff2') format('woff2'),
        url('../webfonts/Mulish-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Mulish-bold';
    src: url('../webfonts/Mulish-Bold.woff2') format('woff2'),
        url('../webfonts/Mulish-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mulish-extrabold';
    src: url('../webfonts/Mulish-ExtraBold.woff2') format('woff2'),
        url('../webfonts/Mulish-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root{
  --regular: 'Mulish';
  --bold: 'Mulish-bold';
  --extrabold: 'Mulish-extrabold';
}

.container{
	width: 100%;
	max-width: 1170px;	
}

strong{
	font-family: var(--bold);
}

p{
	font-family: var(--regular);
}

a{
	text-decoration: none;
}

body {
	padding-top: 100px; 
}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{
	padding: 0px;
}

/*INICIO DO PROJETO*/

.header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	background-color: #FFFFFF;
	padding: 20px 10px;
	border-bottom: 5px solid #bebdbf;

	.row{
		display: flex;
		align-self: center;
		justify-content: space-between;
	}

	.col-lg-2{
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.logo{
			width: 100%;
			max-width: 70px;
			height: auto;
			display: flex;
			align-self: center;
			justify-content: center;

			img{
				width: 100%;
				height: 100%;
				display: flex;
				align-self: center;
				justify-content: center;
				object-fit: cover;
				transition: transform 0.2s ease-in-out;

				&:hover{
					transform: scale(0.95);
				}
			}
		}
	}

	.col-lg-10{
		display: flex;
		align-self: center;
		justify-content: flex-end;
		gap: 30px;

		.botao{
			width: 100%;
			max-width: 270px;
			display: flex;
			align-items: center;
			justify-content: center;

			a{	
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				padding: 5px;
				font-size: 15px;
				font-family: var(--bold);
			}
		}

		.aluno{
			border: 2px solid #EA5A16;
			border-radius: 5px;
			transition: transform 0.2s ease-in-out;

			a{
				color: #EA5A16;
			}

			&:hover{
				background-color: #EA5A16;
				transform: scale(0.99);

				a{
					color: #FFFFFF;
				}
			}
		}

		.professor{
			border: 2px solid #329730;
			border-radius: 5px;
			transition: transform 0.2s ease-in-out;

			a{
				color: #329730;
			}

			&:hover{
				background-color: #329730;
				transform: scale(0.99);

				a{
					color: #FFFFFF;
				}
			}			
		}
	}
}

.fx1-home{
	background-image: url('../images/banner-home.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-color: transparent;

	.col-lg-5{
		padding: 125px 0px;

		.txt{
			display: flex;
			flex-direction: column;
			gap: 20px;
			color: #221F25;

			h1{
				font-size: 40px;
				font-family: var(--bold);
				margin: 0px;
			}

			p{
				font-size: 19px;
				font-family: var(--regular);
				margin: 0px;
			}
		}

		.botao{
			width: 100%;
			max-width: 270px;
			margin: 20px 0px;
			transition: transform 0.2s ease-in-out;
			padding: 0px;

			a{
				width: 100%;
				display: flex;
				align-self: center;
				justify-content: center;
				padding: 5px;
				border-radius: 5px;
				font-size: 15px;
				font-family: var(--bold);
				color: #FFFFFF;
				background-color: #EA5A16;
			}

			&:hover{
				transform: scale(0.99);

				a{
					background-color: #329730;
				}
			}

		}

		.img{
			width: 100%;
			max-width: 780px;
			height: auto;
			display: none;
			align-items: center;
			justify-content: center;

			img{
				width: 100%;
				height: 100%;
				display: none;
				align-items: center;
				justify-content: center;
				object-fit: cover;
			}

		}

	}
}

.fx2-home{
	padding: 50px 0px;
	background-color: #FFFFFF;
	color: #221F25;

	.row{
		display: flex;
    	align-items: flex-start;
    	justify-content: center;
    	gap: 30px;
	}

	h2{
		font-size: 40px;
		font-family: var(--bold);
		margin: 0px 0px 30px 0px;
		text-align: center;
	}

	.card-como-funciona{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 20px;
		padding: 30px 10px 50px 10px;
		width: 100%;
		max-width: 270px;
		min-height: 307px;
		border-radius: 10px;
		border: 2px solid #CEC3B5;
		transition: 0.5s ease-in-out;

		.icn{
			width: 100%;
			max-width: 100px;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;

			img{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				object-fit: cover;
			}
		}

		.txt{
			text-align: center;

			p{	
				font-size: 17px;
				font-family: var(--regular);
				margin: 0px;

				strong{
					font-size: 20px;
					font-family: var(--extrabold);
					transition: 0.5s ease-in-out;
				}
			}
		}

		&:hover{
			border: 2px solid #EA5A16;

			.txt{
				p{
					strong{
						color: #EA5A16;
					}
				}
			}
		}

	}

	.info{
		display: flex;
		align-items: center;
		justify-content: center;

		.botao{
			width: 100%;
			max-width: 270px;
			margin: 20px 0px;
			transition: transform 0.2s ease-in-out;
			padding: 0px;

			a{
				width: 100%;
				display: flex;
				align-self: center;
				justify-content: center;
				padding: 5px;
				border-radius: 5px;
				font-size: 15px;
				font-family: var(--bold);
				color: #FFFFFF;
				background-color: #EA5A16;
			}

			&:hover{
				transform: scale(0.99);

				a{
					background-color: #329730;
				}
			}

		}
	}
}

.fx3-home{
	background-color: #EEEEEE;
	color: #221F25;

	.info{
		padding: 50px 0px 100px 0px;
	}

	.conteudo{
		h3{
			font-size: 40px;
			font-family: var(--bold);
			margin: 0px;
		}

		.imagem{
			display: flex;
			align-items: center;
			justify-content: center;

			.img-txt{
				width: 100%;
				max-width: 315px;
				height: auto;
				display: flex;
				align-items: center;
				justify-content: center;

				img{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					object-fit: cover;
					transition: transform 0.2s ease-in-out;

					&:hover{
						transform: scale(0.95);
					}

				}
			}
		}
	}

	.txt{
		margin: 30px 0px;

		ul{
			padding: 0px 0px 0px 20px;

			li{
				margin: 15px 0px;
				font-size: 19px;
				font-family: var(--regular);

				strong{
					font-family: var(--extrabold);
				}
			}
		}
	}

	.img{
		width: 100%;
		max-width: 520px;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -75px;

		img{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			object-fit: cover;
		}
	}

}

.fx4-home {
	margin-top: -75px;

  .materias {
    &.owl-carousel {
      display: block;      
      gap: 0;
      position: relative;
      padding: 20px 40px;
      background: #221F25;
      color: #fff;
      border-radius: 20px;
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      text-align: center;

      .icn {
        width: 100%;
        max-width: 50px;
        display: flex;
        justify-content: center;

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

    p {
      font-size: 15px;
      font-family: var(--regular);
      margin: 0;
    }

    .owl-nav {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
      padding: 0px;
      font-size: 30px;

      button {
        pointer-events: auto;
        width: 48px;
        height: 48px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .5);
        background: transparent;
        color: #FFFFFF;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;


        &:hover {
          background: rgba(255, 255, 255, .08);
        }
      }
    }

    .owl-dots { display: none; }
  }
}

.fx5-home {
  padding: 0 0 50px;
  background: #fff; color: #221F25;

  h4 { 
  	font-size: 40px; 
  	font-family: var(--bold);
  	margin: 30px 0px; 
  	text-align: center; 
  }

  strong{
  	font-family: var(--extrabold);
  }

  .professores {
    display: flex; 
    align-items: flex-start; 
    justify-content: center; 
    gap: 40px;
    overflow: hidden;

 
    &.owl-carousel {
      display: block;     
      position: relative;
      padding: 10px 36px; 
      gap: 0;            
    }

    .item {
      display: flex; 
      flex-direction: column; 
      align-items: 
      center; 
      gap: 10px;

      .imagem {
        width: 100%; 
        max-width: 270px; 
        display: flex; 
        justify-content: center;

        img { 
        	width: 100%; 
        	height: 100%; 
        	object-fit: cover; 
        	border-radius: 50%; 
        }
      }

      p { 
      	font-size: 19px; 
      	margin: 0; 
      }

      .estrela {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        gap: 6px;

        .icn { 
        	width: 100%; 
        	max-width: 22px; 
        	display: flex; 
        	justify-content: center;

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

        strong { 
        	font-size: 19px; 
        }
      }
    }

    .owl-nav{
      position: absolute; 
      top: 78.2%; 
      left: 0; 
      right: 0; 
      transform: translateY(-50%);
      display: flex; 
      align-items: center; 
      justify-content: space-between;
      pointer-events: none; 
      padding: 0px 6px;

      button{
        pointer-events: auto;
        width: 36px; 
        height: 36px; 
        border: 0; 
        background: transparent; 
        color: #221F25;
        display: flex; 
        align-items: center; 
        justify-content: center;

        span { 
        	font-size: 50px; 
        	line-height: 1; 
        } 

        &:hover { 
        	opacity: .7; 
        }
      }
    }

    .owl-dots { 
    	display: none; 
    }
  }

  .info{
    display: flex; 
    align-items: center; 
    justify-content: center;

    .botao{
      width: 100%; 
      max-width: 270px; 
      margin: 50px 0px 20px; 
      transition: transform .2s;

      a{
        width: 100%; 
        display: flex; 
        justify-content: center; 
        padding: 8px 12px;
        border-radius: 6px; 
        font-size: 15px; 
        font-family: var(--bold);
        color: #FFFFFF; 
        background: #EA5A16;
      }

      &:hover{ 
      	transform: scale(.99);

        a{ 
        	background: #329730; 
        }
      }
    }
  }
}

.fx6-home{
	padding: 50px 0px;

	.row{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.depoimentos{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 30px;
	}

	.card{
		width: 100%;
		max-width: 370px;
		min-height: 203px;
		height: auto;
		padding: 20px 10px;
		border-radius: 20px;
		border: none;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 10px;
		color: #FFFFFF;

		.icn{
			width: 100%;
			max-width: 57px;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;

			img{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				object-fit: cover;
			}
		}

		p{
			font-size: 19px;
			margin: 0px;

			strong{
				font-family: var(--extrabold);
			}
		}

	}

	.verde{
		background-color: #329730;
	}

	.laranja{
		background-color: #EA5A16;
	}

	h5{
		font-size: 40px;	
		font-family: var(--bold);
		margin: 0px;
	}

	.info{
		padding: 10px 10px 10px 20px;
	}

	.estrelas{
		width: 100%;
		max-width: 186px;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20px 0px;

		img{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			object-fit: cover;
		}
	}

	.txt p{
		font-size: 19px;
		margin: 0px;

		strong{
			font-family: var(--extrabold);
		}
	}

}

.footer{
	background-color: #221F25;
	color: #FFFFFF;
	padding: 50px 0px 10px 0px;
	background-image: url('../images/banner-footer.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	.row{
		display: flex;
		align-items: flex-start;
	}

	.col-lg-4{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30px;
	}

	.txt{
		display: flex;
		flex-direction: column;
		gap: 20px;

		h6{
			font-size: 40px;
			font-family: var(--bold);
			margin: 0px;
		}

		p{
			font-size: 19px;
			margin: 0px;
		}
	}

	.img{
		width: 100%;
		max-width: 359px;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;

		img{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			object-fit: cover;
		}
	}

	.redes{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;

		a{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			max-width: 49px;
			height: auto;
			transition: transform 0.2s ease-in-out;

			&:hover{
				transform: scale(0.95);
			}

			.icn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				max-width: 50px;
				height: auto;

				img{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					object-fit: cover;
					border-radius: 50%;
				}
			}
		}
	}

	form{
		float: inline-end;
	}

	.field{
		display: flex;
		flex-direction: column;
		margin: 0px 0px 15px 0px;
		width: 569px;

		label{
			font-size: 20px;
			font-family: var(--bold);
			margin: 0px 0px 5px 0px;
			color: #FFFFFF;
		}

		input{
			width: 100%;
			max-width: 569px;
			height: 40px;
			border-radius: 5px;
			border: 2px solid #CEC3B5;
		}

		textarea{
			width: 100%;
			max-width: 569px;
			height: 127px;
			border-radius: 5px;
			border: 2px solid #CEC3B5;
			resize: none;
		}

	}

	.actions{
		width: 100%;
		max-width: 569px;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		button{
			width: 100%;
			max-width: 115px;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 5px 10px;
			font-size: 15px;
			font-family: var(--bold);
			border: none;
			border-radius: 5px;
			background-color: #EA5A16;
			color: #FFFFFF;
			transition: transform 0.2s ease-in-out;

			&:hover{
				background-color: #329730;
				transform: scale(0.99);
			}
		}
	}

	.creditos{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 80px;

		p{
			font-size: 14px;
			font-weight: normal;
			margin: 0px;
		}

		.site{
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}

		.kryzalis{
			display: flex;
			align-items: center;
			justify-content: flex-end;

			a{
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10px;
				color: #FFFFFF;
				transition: transform 0.2s ease-in-out;

				&:hover{
					transform: scale(0.99);
				}

				.icn-kryzalis{
					width: 100%;
					max-width: 50px;
					height: auto;
					display: flex;
					align-items: center;
					justify-content: center;

					img{
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						object-fit: cover;
					}
				}
			}
		}
	}
}

@media(max-width: 1200px){
	.fx1-home{
		background-image: none;
		background-color: #bebdbf;

		.col-lg-5{
			width: 100%;
			padding: 30px 10px 0px 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;

			.img{
				display: flex;

				img{
					display: flex;
				}
			}
		}	
	}

	.fx3-home{

		h3{
			text-align: center;
		}

		.info{
			width: 100%;
			padding: 30px 10px;
		}

		.imagem-destaque{
			display: none;
		}

		.txt{

			ul{
				padding: 0px;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;

			}
		}
	}

	.fx4-home{
		margin: 0px;
		padding: 0px 10px;
	}

	.fx6-home{
		padding: 30px 10px;

		.card{
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		h5{
			text-align: center;
		}

		.row{
			flex-direction: column-reverse;
			align-items: center;
		}

		.depoimentos,
		.info {
		  width: 100%;
		}

		.info {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  text-align: center;
		  padding: 0px 0px 20px 0px;
		}

		.txt br{
			display: none;
		}
	}

	.footer{
		padding: 30px 10px 10px 10px;

		.row{
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.col-lg-4{
			width: 100%;
			text-align: center;
		}

		.redes{
			justify-content: center;
			flex-wrap: wrap;
		}

		.col-lg-8{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 20px 0px;
		}

		form{
			float: none;
			width: 100%;
			max-width: 569px;
		}

		.field{
			width: 100%;
		}

		.creditos{
			margin-top: 10px;

			.site{
				justify-content: center;
				text-align: center;
			}

			.kryzalis{
				justify-content: center;
				text-align: center;
			}
		}
	}
}

@media(max-width: 992px){
	.header{
		padding: 10px 0px;

		.row{
			flex-direction: column;
			justify-content: center;
			gap: 10px;
		}

		.col-lg-2{
			justify-content: center;
			
			.logo{
				max-width: 50px;
			}
		}

		.col-lg-10{
			justify-content: center;
			gap: 20px;
		}
	}
}

@media(max-width: 426px){

	body{
		padding-top: 130px;
	}

	.header{
		.col-lg-10{
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 10px;

			.botao{
				a{
					font-size: 14px;
				}
			}
		}
	}

	.fx1-home{
		.col-lg-5{
			.txt{

				h1{
					font-size: 28px;
				}

				p{
					font-size: 16px;
				}
			}
			.botao{
				a{
					font-size: 14px;
				}
			}

		}
	}

	.fx2-home{
		padding: 30px 0px;

		.row{
	    	gap: 20px;
		}

		h2{
			font-size: 28px;
			margin: 0px 0px 20px 0px;
		}

		.card-como-funciona{
			justify-content: center;
			padding: 10px;
			gap: 10px;
			min-height: auto;

			.icn{
				max-width: 50px;
			}

			.txt{
				p{	
					font-size: 14px;

					strong{
						font-size: 16px;
					}
				}
			}

		}

		.botao{
			a{
				font-size: 14px;
			}


		}
	}

	.fx3-home{

		.conteudo{
			h3{
				font-size: 28px;
			}
		}

		.txt{

			ul{

				li{
					font-size: 14px;
					margin: 10px 0px;
				}
			}
		}

	}

	.fx6-home{

		.card{
			padding: 10px;
			min-height: 180px;

			.icn{
				max-width: 30px;
			}

			p{
				font-size: 14px;
			}

		}


		h5{
			font-size: 28px;	
		}


		.txt p{
			font-size: 14px;
		}

	}
}

.whatsapp img{
	width: 90px;
	position: fixed;
	z-index: 10000;
	bottom: 90px;
	right: 20px;

}