@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;700&family=Roboto:wght@300;400;500;700;900&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	border: none;
	outline: none;
	scroll-behavior: smooth; 	  /*No sé qué hace esta parte*/
	font-family: "Poppins", sans-serif;
	font-size: 18px;
}

body{
	height: 1000px;
}

header{
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	margin: 0 auto;
	height: 90px;
	padding: 0 30px;
	align-items: center;
}

.mainIcon{
	font-size: 1.3rem;
	color: #0083b0;
	font-weight: bolder;
	font-style: italic;
}
.mainIcon::after{
	content: " de Inglés⭐";
	color: red;
}

.btn{
	color:#000;
	margin: 0 .7rem;
	font-size: .9rem;
}
.btn:hover{
	color: red;
	font-size: 1rem;
	font-weight: bold;
}

.btn.active{
	color: red;
	font-size: 1rem;
	font-weight: bold;
}

.whatsapp{
	color: white;
	border: solid 1px #25d366;
	padding: .8rem 1.5rem;
	background-color: #25d366;
	border-radius: 1.5rem;
	box-shadow: 10px 10px .6rem lightgrey;

}
.whatsapp:hover{
	transition:.8s;
	translate:0 5px;
	padding: .5rem 1.5rem;

}

main{
	display: flex;
	height: 550px;
	margin: 0 auto;
	display: flex;
	justify-content: top;
	background: linear-gradient(to left, #00b4db, #0083b0);
	padding: 0 90px;
}

.main_texto{
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	width: 50%;
}

h1{
	color:#fff;
	font-size: 3.5rem;
}
h1::after{
	content: "totalmente gratuitos.";
	color: #d9282d;
	font-size: 3.5rem;
}
span{
	color: orange;
}


.main_btn{
	color: #fff;
	background-color: orange;
	padding: .5rem 1rem;
	border-radius: 1.5rem;
	box-shadow: 7px 7px 20px #000;
	text-align: center;
	width: 50%;
	margin-top: 15px;
	transition: .4s;
}
.main_btn:hover{
	box-shadow: 7px 7px 30px #fff;
}

.main_imagen{
	display: flex;
	overflow: hidden;
	justify-content: center;
	align-items: center;
}

.main_imagen img{
	width: 100%;
	height: 80%;
}

/*-----------------CURSOS--------------------*/
.cursos_container{
	width: 80%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.curso{
	margin-top: 80px;
	font-size: 3rem;
	color: #00b4db;
	text-align: center;
}

.descripcion_curso_básico {
	margin: 30px 0;
	font-weight: 300;
	line-height: 1.5;
	text-align: justify;
	width: 80%;
}

.cursos_container span{
	color: red;
	font-weight: bolder;
}

.info_detalle{
	width: 80%;
	margin-bottom: 50px;
}
#info{
	color: #00b4db;
}
#detalle{
	color: #000;
	font-weight: 300;
	align-items: left;
}

.storytelling_img{
	width: 70%;
	height: auto;
}

video{
	border-radius: 2rem;
	margin: 0 auto;
	overflow: hidden;
}



/*-----------------SIN TIEMPO--------------------*/
.sintiempo_contenedor{
	margin-top: 60px;
	background: linear-gradient(to left, #00b4db, #0083b0);
	overflow: hidden;
}

.sintiempo{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
	width: 90%;
	margin: 0 auto;
}

.sintiempo_textos{
	padding: 0 1rem;
	text-align: right;
}

.sintiempo_textos h3{
	color: #fff;
	font-size: 	2.5rem;
}
.sintiempo_textos h3::after{
	content: "aprender inglés.";
	color: red;
}



.sintiempo img{
	width: 100%;
	height: 100%;
}

/*-----------------CONTACTO--------------------*/

.contacto_contenedor{
	display: flex;
	align-items: center;
	overflow: hidden;
}

.contacto{
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
	align-items: center;
	padding: 30px;
}

.celular::after{
	content: " 3173253124 - 3212486892";
	font-weight: 300;
}

.logo_footer{
	font-size: 1.8rem;
	color: #0083b0;
	font-weight: bolder;
	font-style: italic;
}
.logo_footer::after{
	content: " de Inglés⭐";
	color: red;
}

.correo::after{
	content: "info@latareadeingles.com";
	font-weight: 300;

}

.whatsappfloat{
	width: 5%;
	position: fixed;
	right: 1%;
	bottom: 3%;
	transition: .5s;
}
.whatsappfloat:hover{
	width: 5.5%;
	cursor: pointer;
}

header i{       /*MENU ICON*/
	display: none;
	z-index: 200;
}

/*Responsive menu*/







/*--------------QUERY---------------------*/


@media (max-width:1330px) {
	.navbar{
		display: none;
	}.navbar.active{
		position: absolute;
		top: 90px;
		right: 0;
		width: 100%;
		padding: 1rem 3%;
		background: #fff;
		border-bottom: .1rem solid rgba(0,0,0, .2);
		box-shadow: 0 .5rem 1rem rgba(0,0,0, .2);
		display: flex;
		flex-direction: column;
	}
	.navbar a{
		font-size: 	1.2rem;
		margin-top: 20px;
	}

	.whatsapp{
		display: none;
	}
	h1{
		font-size: 2.5rem;
	}
	h1::after{
		font-size: 2.5rem;
	}
	.main_imagen img{
	width: 100%;
	height: 60%;
	}
	header i{
		display: block;
		color: black;
		font-size: 3rem;
		margin-right: 20px;
	}
	.mainIcon{
		font-size: 2rem;
	}
}


@media (max-width:1295px) {
	h1{
		font-size: 3rem;
	}
	h1::after{
		font-size: 3rem;
	}

	.info_detalle{
		width: 90%;
		margin-bottom: 50px;
	}
	.descripcion_curso_básico {
		width: 90%;
	}

	.contacto{
		flex-direction: column;
	}
}



@media (max-width:1025px) {
	h1{
		font-size: 2.5rem;
	}
	h1::after{
		font-size: 2.5rem;
	}

	.curso{
		font-size: 2.5rem;
	}
	
	.sintiempo{
		flex-direction: column;
	}
	.sintiempo_textos{
		text-align: center;
	}

	.whatsappfloat{
	width: 9%;
	}
	.whatsappfloat:hover{
	width: 9.5%;
	}

	video{
		width: 100%;
		height: auto;
	}
}


@media (max-width:865px) {
	h1{
		font-size: 2.8rem;
	}
	h1::after{
		font-size: 2.8rem;
	}
	main{
		flex-direction: column-reverse;
		padding: 30px;
	}
	.main_texto{
		text-align: center;
		width: 100%;
		align-items: center;
	}

	.main_imagen img{
		width: 50%;
		height: 100%;
	}

	.curso{
		font-size: 2rem;
	}


	.sintiempo_textos h3{
		font-size: 2rem;
	}
	.sintiempo_textos h3::after{
		font-size: 2rem;
	}
	.sintiempo_img{
		text-align: center;
	}
	.sintiempo img{
		width: 70%;
	}
}

@media (max-width:700px) {
	main{
		height: 500px;
	}

	.mainIcon{
		font-size: 1.5rem;
	}.mainIcon::after{
		font-size: 1.5rem;
	}
	header{
		padding: 0 10px;
	}
	header i{
		font-size: 2rem;;
	}

	h1{
		font-size: 2rem;
	}h1::after{
		font-size: 2rem;
	}

	.main_imagen{
		width:100%;
	}
	.main_imagen img{
		width: 70%;	
		height:100%;
	}


	.storytelling_img{
		width: 90%;
	}

	.whatsappfloat{
	width: 11%;
	}
	.whatsappfloat:hover{
	width: 11.5%;
	}
}

@media (max-width:600px) {
	main{
		height: 450px;
	}

	h1{
		font-size: 2rem;
	}h1::after{
		font-size: 2rem;
	}
	.main_imagen img{
		width: 60%;	
	}

	.servicio i{
		font-size: 3rem;
	}
	.servicio h2{
		font-size: 1.2rem;
	}
	.servicio p{
		font-size: 1rem;
	}
	.servicio a{
		font-size: 1rem;
	}
}

@media (max-width:500px) {
	.logo_footer{
		font-size: 1.3rem;
	}.logo_footer::after{
		font-size: 1.3rem;
	}
	.contacto{
		padding: 30px 5px;
	}
	.sintiempo h3{
		font-size: 1.3rem;
	}.sintiempo h3::after{
		font-size: 1.3rem;
	}
	.whatsappfloat{
	width: 13%;
	}
	.whatsappfloat:hover{
	width: 13.5%;
	}
	.main_imagen img{
		width: 50%;
	}
}


@media (max-width:450px) {
	main{
		height: 400px;
	}
	.navbar.active{
		top: 70px;
	}

	.mainIcon{
		font-size: 1rem;
	}.mainIcon::after{
		font-size: 1rem;
	}
	header{
		padding: 0 7px;
		height: 70px;
	}
	header i{
		font-size: 1.5rem;;
	}

	h1{
		font-size: 1.5rem;
	}h1::after{
		font-size: 1.5rem;
	}
	.main_imagen img{
		width: 80%;
	}

	

}