.destination-hero {
	position: relative;
	  width: 100%;
	  height: 100vh;
	  overflow: hidden;
	  display: flex;
	  justify-content: center;
	  align-items: flex-end;
}

.destination-hero__image {
	width: 100%;
  height: 100%;
  position: absolute;
  background-position: center center;
  background-size: cover;
  z-index: 0;
  filter: saturate(0.9) brightness(0.9);
}

.destination-hero__image:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background:linear-gradient(0deg, rgba(49, 97, 125, 0) 0%, rgb(62, 103, 128) 100%);
  mix-blend-mode: multiply;
  z-index: 10;
}

.destination-hero__content {
	z-index: 0;
	bottom: 45%;
	padding: 2rem;
	position: absolute;
	text-align: center;
	background: rgba(255, 255, 255, 0.4);
	  backdrop-filter: blur(12px);
	  -webkit-backdrop-filter: blur(12px);
	  transform: translateY(50%);
	 border: 1px solid rgba(255, 255, 255, 0.4);
	 max-width: 720px;
	 text-wrap: balance;
}

p.destination-region, h5.destination-pretitle {
	color: var(--dark-teal);
	  margin: 0 !important;
	font-weight: 700;
	  text-transform: uppercase;
	  font-size: 0.875rem !important;
	  letter-spacing: 0.05rem;
}

h1.destination-title {
	font-size: 4rem;
	font-weight: 400;

	line-height: 4rem;
}

.destination-quote .container-fluid {
	display: flex;
	justify-content: center;
}

.destination-hero__content h1 {
	color: var(--body-color);
	  margin: 0;
	  font-weight: 400;
}

.destination-intro {
	position: relative;
	  padding: 5rem 0 2rem;
	  width: 100%;
	  text-align: center;
}


.destination-intro h1 {
	color: var(--teal);
	font-size: 4rem;
	line-height: 4rem;
	margin: 0;
}

.destination-intro .row {
	display: flex;
	justify-content: center;
	text-wrap: balance;
}

.destination-climate {
	background: #fff;
	  padding: 4rem 0;
	  width: 100%;
	  position: relative;
	  text-align: center;
	  margin: 2rem 0 0;
}

.extra-info {
	position: relative;
	width: 100%;
	padding: 3rem 0;
	display: flex;
	text-align: center;
	justify-content: center;
	background: #eee9e6;
}

.extra-info h2, 
.extra-info h3, 
.extra-info h4 {
	color: var(--teal);
}

.extra-info h3 {
	font-size: 1.75rem;
}
.extra-info .container-fluid {
	max-width: 900px;

	  border-radius: 1rem;
}

.destination-climate h2 {
	font-size: 1.75rem;
}

.best-month-description p {
text-wrap: balance;
font-size: 1em;
}

.month-list {
	display: flex;
	  justify-content: center;
	  flex-wrap: wrap;
	  gap: 0.5rem;
	  margin: 1.5rem 0 1.5rem 0;
}

.month {
	background:var(--paper-color);
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	font-weight: 500;
}

.month.is-best {
	background:var(--teal);
	color: var(--body-color);
}

.destination-holiday-styles {
	display: flex;
	justify-content: center;
}

.destination-holiday-styles .container-fluid {
	flex-wrap: wrap;
	display: flex;
	gap: .5rem;
	margin-top: 1.5rem;
	justify-content: center;
	max-width: 1024px;
}

.destination-holiday-styles .holiday-style {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1rem;
	background: var(--teal);
	font-size: .875rem;
	white-space: nowrap;
	color: var(--body-color);
}


@media screen and (max-width: 769px ) {
	
	
	.destination-intro h1 { 
		font-size: 3rem;
		line-height: 3rem;
	}

	.destination-intro  {
		text-align: left;
	}
	
	.destination-holiday-styles .container-fluid {
		justify-content: flex-start;
	}
	
	.destination-climate .section-title {
		text-align: left;
	}
	
	.month-list {
		justify-content: flex-start;
	}
	
	.best-month-description,
	.destination-temperatures,
	.extra-info {
		text-align: left;
	}
}

/* Holiday Types CSS */

.holiday-hero {
	position: relative;
	  width: 100%;
	  height: 100vh;
	  overflow: hidden;
	  display: flex;
	  justify-content: center;
	  align-items: flex-end;
}

.holiday-hero__image {
	width: 100%;
  height: 100%;
  position: absolute;
  background-position: center center;
  background-size: cover;
  z-index: 0;
  filter: saturate(0.9) brightness(0.9);
}

.holiday-hero__image:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background:linear-gradient(0deg, rgba(49, 97, 125, 0) 0%, rgb(62, 103, 128) 100%);
  mix-blend-mode: multiply;
  z-index: 10;
}

.holiday-hero__content {
	z-index: 0;
	bottom: 45%;
	padding: 2rem;
	position: absolute;
	text-align: center;
	background: rgba(255, 255, 255, 0.4);
	  backdrop-filter: blur(12px);
	  -webkit-backdrop-filter: blur(12px);
	  transform: translateY(50%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	max-width: 720px;
	text-wrap: balance;
}

h5.pretitle, h5.holiday-name {
	color: var(--dark-teal);
	  margin: 0 !important;
	font-weight: 700;
	  text-transform: uppercase;
	  font-size: 0.875rem !important;
	  letter-spacing: 0.05rem;
}

h1.holiday-title {
	font-size: 4rem;
	font-weight: 400;
	color: var(--body-color);
	  margin: 0;
	  font-weight: 400;
	line-height: 4rem;
}

.holiday-styles {
	display: flex;
	justify-content: center;
	padding: 0 0 3rem 0;
}

.holiday-styles .container-fluid {
	flex-wrap: wrap;
	display: flex;
	gap: .5rem;
	margin-top: 1.5rem;
	justify-content: center;
	max-width: 1024px;
}

.holiday-styles .holiday-style {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1rem;
	background: var(--teal);
	font-size: .875rem;
	white-space: nowrap;
	color: var(--body-color);
}

.page-intro {
	position: relative;
	padding: 3rem 0 1rem;
	display: flex;
	justify-content: center;
}

.page-intro .container-fluid {
	text-align: center;
	max-width: 900px;
	text-wrap: balance;
}

.page-intro h1 {
	font-size: 4rem;
	line-height: 4rem;
		color: var(--teal);
		  margin: 0;
		  font-weight: 400;
}


.extra-info p {
	text-wrap: balance;
}


@media screen and (max-width: 769px ) {
	.holiday-hero__content h1, .page-intro h1 { 
		font-size: 3rem;
		line-height: 3rem;
	}

	.page-intro .container-fluid {
		text-align: left;
	}
	
	.page-intro h5.pretitle {
		text-align: left;
	}
	
	.holiday-styles .container-fluid {
		justify-content: flex-start;
	}
}