.top-banner {
	background: #000 url('/wp-content/uploads/2026/02/coasterra-banner.webp') no-repeat;
    background-size: cover;
	background-position: center;
	height: 30rem;
}
.top-banner img.logo {
	margin-top: 5.625rem;
 	margin-bottom: 2.8125rem;
}
.top-banner span.coming-soon {
	display: block;
	font: 500 1.75rem/2.3125rem "Roboto";
	color: #fff;
}
.top-banner h1 {
	font: 700 2.3125rem/2.5rem "Roboto";
	color: #fff;
	margin-bottom: 0.625rem;
}
.intro {
	padding: 0 0 2.5rem;
}
.intro h2 {
	font: 500 2.125rem/2.5rem "Roboto";
	color: #00565C;
	padding-bottom: 1.25rem;
	margin-bottom: 0;
}
.intro p {
	font: 400 1.25rem/2.125rem "Roboto";
	color: #707070;
	margin-bottom: 0.625rem;
}
.intro p.register {
	font: 500 1.75rem/2.1875rem "Roboto";
	color: #00565C;
	padding-top: 0.625rem;
	padding-bottom: 0.9375rem;
}
.intro .round-button {
	background-color: #348088;
	border-radius: 0.3125rem !important;
	width: 12.5rem;
	color: #fff;
	font: 500 1.5rem/2rem "Roboto";
}
.resort-living {
	background: #fce5a9 url('/wp-content/uploads/2025/08/resort-bg.svg') no-repeat;
	background-size: cover;
	background-position: center 5rem;
	padding: 2.5rem 0;
}
.resort-living h2{
	font: 300 3.125rem/3.4375rem "Roboto";
	color: #00565c;
}
.resort-living p {
	font: 400 1.25rem/2.125rem "Roboto";
	color: #00565c;
}
.resort-living .amenityCarousel img {
	border: 10px solid #fff;
}
.swiper-button-next, .swiper-button-prev {
    color: #fff !important;
}

.amenities-1 {
	background: #fff url('/wp-content/uploads/2025/08/blue-bg.svg') no-repeat;
	background-size: cover;
	background-position: -34.375rem -15.625rem;
	padding: 2.5rem 0;
}
.amenities-1 h2 {
	font: 300 3.125rem/3.4375rem "Roboto";
	color: #00565c;
}
.amenities-1 h3, .amenities-2 h3 {
	font: 500 1.75rem/2.1875rem "Roboto";
	color: #00565c;
}
.amenities-1 ul {
	list-style-type: disc;
	margin-bottom: 0;
	padding-left: 1.25rem;
}
.amenities-1 ul li {
	font: 400 1.375rem/2.1875rem "Roboto";
	color: #656f6d;
}
.amenities-2 {
	padding-bottom: 2.5rem;
}
.amenities-1 p, .amenities-2 p {
	font: 400 1.25rem/2.125rem "Roboto";
	color: #707070;
}
.amenities-2 ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
.amenities-2 ul li {
	font: 400 1.25rem/2.125rem "Roboto";
	color: #707070;
}
.amenities-2 ul strong {
	font-weight: 500;
}
.amenities-2 img.icon {
	height: 6.25rem;
	margin-bottom: 0.625rem;
}
.grey-bg {
	background-color: #f4f8f8;
	padding: 1.875rem 0;
}
.white-bg {
	background-color: #fff;
	padding: 1.875rem 0;
}
.red-divider {
	border-right: 1px solid #df6d5d;
}
.iguana {
	margin-top: 4.375rem;
}

.perfectly-personalized {
	padding-top: 2.5rem;
	background: #00565c url('/wp-content/uploads/2025/08/green-leaves.svg') no-repeat;
	background-position: center top;
	padding-bottom: 20rem;
}
.perfectly-personalized .flower {
	position: absolute;
	right: 5.625rem;
  	top: -5.625rem;
}
.perfectly-personalized h2 {
	font: 500 2.3125rem/3.0625rem "Roboto";
	color: #fff;
	padding-bottom: 1.25rem;
	margin-bottom: 0;
	text-align: center;
}
.perfectly-personalized p {
	font: 400 1.375rem/2.125rem "Roboto";
	color: #fff;
	text-align: center;
}
.bottom-register {
	margin-top: -10.625rem;
	background: #EFF7F8 url('/wp-content/uploads/2026/02/register-bg.webp') no-repeat;
	background-size: cover;
}
.bottom-register .round-button {
	background-color: #C94818;
	color: #fff;
	font: 500 1.5rem/1.5rem "Roboto";
	width: 12.5rem;
	padding: 0.8125rem;
	border-radius: 0.3125rem !important;
	margin-bottom: 3.125rem;
}
.bottom-register .color-palette {
	/*background: url(/wp-content/uploads/2025/08/color-pallete-Seaflower.webp);*/
	background-size: cover;
	margin-top: -8.75rem;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
.bottom-register .color-palette img {
	border: 5px solid #fff;
	background-size: cover;
	margin-top: -8.75rem;
}
.bottom-register p {
	font: 500 1.375rem/1.875rem "Roboto";
	color: #d54b1a;
	padding-top: 1.875rem;
}
.bottom-register .color-palette .round-button {
	background-color: #3D8E9C;
	color: #fff;
	width: 15.625rem;
	margin-top: 10rem;
}


@media (max-width: 991px) {
.top-banner {
	height: 18.75rem;
}
.top-banner img.logo {
	width: 16.25rem;
    margin-top: 3.75rem;
    margin-bottom: 1.875rem;
}
.top-banner h1 {
	font: 700 1.25rem/1.6875rem "Roboto";
	margin-bottom: 0;
}
.top-banner span.coming-soon {
	font: 500 1.25rem/1.5625rem "Roboto";
}
.resort-living, .amenities-1 {
	padding: 1.25rem 0;
}
.intro, .amenities-2 {
	padding-bottom: 1.25rem;
}
.resort-living {
	background-size: 330%;
}
.amenities-1 {
	background-position: center -6.25rem;
}
.intro h2 {
	font: 500 1.375rem/1.6875rem "Roboto";
	padding-top: 1.25rem;
	padding-bottom: 0.625rem;
}
.intro p, .resort-living p, .amenities-1 p, .amenities-2 p {
	font: 400 1.125rem/1.875rem "Roboto";
}
.intro p.register {
	font: 500 1.25rem/1.875rem "Roboto";
	padding-top: 0;
}
.resort-living h2, .amenities-1 h2 {
	font: 300 1.5625rem/1.875rem "Roboto";
}
.amenities-1 h3, .amenities-2 h3 {
	font: 500 1.25rem/1.5625rem "Roboto";
}
.amenities-1 ul li {
	font: 400 1.125rem/1.875rem "Roboto";
}
.amenities-2 ul li {
	font: 400 1.0625rem/1.875rem "Roboto";
}
.amenities-2 img.icon {
	height: 5rem;
}
.amenities-1 iframe {
	height: 22.5rem;
}
.red-divider {
	border-right: 0;
}
.white-bg, .grey-bg {
	padding: 1.25rem 0;
}
.iguana {
	margin-top: -2.5rem;
	width: 6.25rem;
}
.flamingo {
	height: 7.5rem;
}

.perfectly-personalized h2 {
    font: 500 1.5625rem/1.875rem "Roboto";
}
.perfectly-personalized p {
	font: 400 1.125rem/1.625rem "Roboto";
}
.register p, .bottom-register p {
	font: 400 1.125rem/1.625rem "Roboto";
}
.intro .round-button, .bottom-register .round-button {
	width: 10.9375rem;
	font: 500 1.25rem/1.5625rem "Roboto";
	margin-bottom: 1.25rem;
}
.bottom-register .color-palette .round-button {
	margin-top: 5.625rem;
	width: 13.75rem;
	font: 500 1.25rem/1.5625rem "Roboto";
}
}

/** Promo Section */
.max-width-container {
	max-width: 93.75rem;
	margin: 0 auto;
}
.promo {
	background: #f7f7f7;
}
.promo h2 {
	font: 500 1.25rem/1.563rem "Roboto";
	color: #005683;
}
.promo h3 {
	color: #333;
	font: 500 1.438rem/1.75rem "Roboto";
	margin-bottom: 0;
}
.promo p.disclaimer {
	font: 400 0.75rem/1rem 'Roboto', sans-serif;
	color: #666;
}
.promo .community-link-btn {
  background-color: #333;
  color: #fff;
  font: 700 1.125rem/1.375rem 'Roboto', sans-serif;
  text-transform: uppercase;
  border-radius: 0.3125rem;
  width: 15rem;
  padding: 0.625rem;
  height: auto;
  border: 0;
}
@media (max-width: 768px) {
	.promo-container {
		padding: 0;
	}
}

/** CTA CSS */
.quick-comm {
    background-color: #fff;
    padding: 1.875rem 0;
}
.quick-comm__header {
    font-size: 1.125rem;
    font-weight: 700;
}
.quick-comm__location-icon {
    color: #dc3545;
    font-size: 1.5rem;
}
.quick-comm__location-info {
    font-size: 1rem;
}
.quick-comm__location-info span {
    color: #B2292D;
    font-size: 1rem;
    margin-bottom: 0;
    font-weight: 500;
    display: block;
}
.quick-comm__location-info a {
    margin-bottom: 0;
    color: inherit;
    text-decoration: underline;
}
.quick-comm__location-info p {
    margin-bottom: 0;
	font-weight: 500;
}
.quick-comm__btn {
    border-width: 1px;
    font-weight: 500;
    border-radius: 0.3125rem;
    height: 2.6875rem;
    line-height: 2.6875rem;
    padding: 0;
    border: solid 1px #707070;
    color: #000;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.quick-comm__btn.register {
	color: #FFF;
  	background-color: #B2292D;
  	display: block;
}
.quick-comm__btn.register:hover {
    color: #FFF;
    text-decoration: none;
    background-color: #B2292D;
}
.quick-comm__btn.question:hover {
    color: #FFF;
    text-decoration: none;
    background-color: #333;
}
@media (max-width: 768px) {
.quick-comm__header {
    font-size: 0.9375rem;
}
.quick-comm__location-info, .quick-comm__location-info span, .quick-comm__location-info p {
    font-size: 0.875rem;
}
}
