.herobtn{
	justify-content: center;
	width:170px;
}

.herobtncontainer{
	width:200px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	max-width: 200px;
}



.text-container{
	display: flex;
	flex-direction: column;
	gap: 2rem;
	justify-content: center;
	align-items: flex-start;
}

.bigtext{
	font-size: 3rem;
    font-weight: 300;
    color: #fff;
}

.coloranim{
	font-weight: bold;
	background: linear-gradient(
      120deg,
      #ffffff 0%,
      #fafafa 10%,
      #fbfbfb 60%,
      var(--gold) 65%,
      var(--gold) 70%,
      #fff 76%,
      #fff 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: waveMove 4s linear infinite;

}

@keyframes waveMove {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    65% {
      background-position: 200% 50%;
    }


    100%{
    	background-position: 0% 50%;
    }
  }

.smalltext{
	font-size: 1.3rem;
	font-weight: 100;
	color: #fff;
}

.hero-wrapper{
	position: relative;
	padding: 80px 70px 0px;
	display: flex;
	justify-content: center;
	align-items: center;


}

.hero{

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	min-width:800px;
	width: 70%;
	max-width: 1000px;
}



.me{
	width: 25rem;
	opacity:0;
	/*filter: drop-shadow(5px 5px 10px var(--shadow));*/
}

.me-real{
	width: 30rem;
	opacity:0.85;
	position: absolute;
	bottom:-90px;
	right:0px;

}

.img-container{
	width:0px;
	height:640px
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}


/*RESPONSIVENESS*/




@media (max-width: 930px){

	.me{
		position: absolute;
	width: 25rem;
	opacity:0.85;
	bottom:-90px;

	}

	.img-container{
	width:0px;
	height:200px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

	.me-real{

		opacity: 0;
	}

	.hero-wrapper{
		width:90%;
		position: relative;
		padding: 50px 10px 0px;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.bigtext{
		font-size: 2.5rem;
		text-align: center;
	}

	.smalltext{
		text-align: center;
		font-size:1rem;
	}

	

	.hero{

		display: flex;
		flex-direction: column;
		gap:70px;
		min-width:8px;
		align-items: center;
		justify-content: center;

	}

	.herobtncontainer{
	justify-content: center;
}

.text-container{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:40px;
}



}


@media (max-width: 600px){
	.me{
	width: 20rem;
	padding-bottom: 40px;
	}

	.hero{
		gap:35px;
	}

	.text-container{
		gap:30px;

	}

	.smalltext{
		min-width: 255px;
	}

	.hero-wrapper{
		padding-top:40px;
	}
}