@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
</style>
*, *::after,*::before{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
	list-style-type: none;
}
:root{
   --white: #fff;
   --black: #222;
   --green: #6cbe02;
   --grey1: #f0f0f0;
   --grey2: #e9d7d3;
}










.hero{
	background-color: rgb(201, 203, 210);
	width: 100%;
}

.glide{
	background-color: rgb(201, 203, 210);
	width: 100%;
	margin: auto;
}
@media only screen and (max-width: 1700px){
.glide{
	background-color: rgb(201, 203, 210);
	width: 100%;
	margin: auto;
	border: none;
}
.hero{
	background-color: rgb(201, 203, 210);
	width: 100%;
}
}


.glide__slides{
	position: relative;
	height: calc(40rem - 6rem);
	margin: 0 4rem auto;
	overflow: hidden;
	margin: auto;
}
@media only screen and (max-width: 1200px){
.hero, 
.hero .glide__slides{
	background-color: rgb(201, 203, 210);
	position: relative;
	height: calc(50rem - 6rem);
	overflow: hidden;
}
}
.center{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 100%;
	padding-top: 3rem;
}
.left{
	position: absolute;
	top: 0;
	left: 150px;
	opacity: 0;
	transition: all 1000ms ease-in-out;
}
@media only screen and (max-width: 1200px){
.left{
	position: absolute;
	top: 0;
	left: 0px;
	opacity: 0;
	transition: all 1000ms ease-in-out;
}	
}
.left h1{
	font-size:  5rem;
	margin: 1rem 0;
}
.left span{
	font-size:  2rem;
	font-style: italic;
	margin: 1rem 0;
	color: blue;
}
.left p{
	font-size:  1.6rem;
	margin: 0 0 1rem;
}

/*The button*/
.left .hero-btn{
	display: inline-block;
	padding: 1rem 3rem;
	font-size: 1.6rem;
	margin-top: 1rem;
	background-color: rgb(31, 146, 158);
	color: whitesmoke;
	text-decoration: none;
	list-style: none;
	text-shadow: 2px 2px 12px blue;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
/*End of button*/



/*The right size*/
.right{
	flex: 0 0 50%;
	height: 100%;
	position: relative;
	text-align: center;
}
.right img{
	position: absolute;
	width: 55rem;
	opacity: 0;
	transition: all 1000ms ease-in-out;
}
.right img.img1{
	width: 85%;
	right: -25%;
	bottom: -50%;
}
.right img.img2{
	width: 90%;
	right: -40%;
	bottom: -40%;
}
/*Glide Image*/
.glide__slide--active .center .right img{
	bottom: -3%;
	opacity: 1;
}
.glide__slide--active .left{
	opacity: 1;
	top: 35%;
}
@media (max-width: 1200px){
	.glide__slide--active .left{
	top: 15%;
}
.right img.img1{
	width: 90%;
}
.right img.img2{
	width: 100%;
}
}




@media (max-width: 900px){
	.center .right img.img1{
		width: 32rem;
	}
		.center .right img.img2{
		width: 33rem;
	}
	.hero, 
  .hero .glide__slides{
  	margin: 0 auto;
  	width: 100%;
  	padding: 0px 0px 0px auto;
}
.left h1{
	font-size:  3rem;
}
.left span{
	font-size:  1.4rem;
}
.left p{
	font-size:  1.5rem;
	width: 100%;
}

}