.homepage-banner-section{
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 400px;
  width: 100%;
	background: linear-gradient(90deg,#063a63 0%, #0b7db3 40%, #ABE0F9 65%, #ABE0F9 100%);
	padding: 2.5rem 2rem;
	border-radius: 8px;
	 
}

.banner-text{
	display: flex;
	flex-direction: column;
	margin: 0 0 1rem 2rem;
}

.banner-text h4 {
  font-family: "museo-sans-rounded", sans-serif;
  color: #fff;
  font-size: clamp(2.2rem, 2vw, 2.7rem);
  font-weight: 900;
  line-height: 1.2;
  margin-top:1rem;
  max-width: 20ch;
  text-shadow: 4px 4px 0px #00669F;
}

.banner-text h4 .celebrate {
  font-size: 1.15em;
}
.banner-text h4 .highlight {
  color: #7ed3f3;
  font-size: 1.2em;
}

.banner-text .banner-btn {
	font-family: "museo-sans-rounded", sans-serif;
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #063a63;
  background-color: #fff;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.homepage-banner-section img{
  max-width: min(420px, 40vw);
  width: 100%;
  height: auto;
  display: block;
}

/*Responsive Breakpoint Large-Mobile*/
@media (max-width: 680px) {
  .homepage-banner-section {
    flex-direction: column;      
    text-align: center;
    align-items: center;
    min-height: auto;  
    background: linear-gradient(180deg,#063a63 0%, #0b7db3 40%, #ABE0F9 65%, #ABE0F9 100%);
  }
  .banner-text h4{
  	font-size: 2.2rem;
  	margin: 1rem 2rem 1rem 2rem;
  	text-shadow: 0px 4px 0px #00669F;
	}
	.banner-text .banner-btn{
		max-width: 280; 
		font-size: 0.95rem;
		padding: 0.6rem 1rem;
		min-height: 38px;
		align-self: center;
	}
  .homepage-banner-section img {
		max-width: 60ch;
    margin-top: 1rem;
  }
}
/*Responsive Breakpoint Small-Mobile*/
@media (max-width: 420px) {
  .homepage-banner-section {
    padding: 1.25rem 1rem;
  }
  .banner-text h4 {
    font-size: 1.25rem;
  }
  .banner-text .banner-btn{
  	font-size: 0.9rem;
  	padding: 0.55rem 0.9rem;
    min-height: 34px;
    max-width: 240px;
  }
}