.hero-banner-block {
    --floorplan-primary: #0e4f7a;
    --floorplan-primary-dark: #0a3553;
    --floorplan-primary-hover: #1673a6;
    --floorplan-secondary: #d4a373;
    --floorplan-secondary-darker: #c08a55;
    --floorplan-black: #0f172a;
    --floorplan-white: #fff;
    --floorplan-gray: #64748b;
    --floorplan-light-gray: #f5f8fb;
    --floorplan-tertiary: #2fa4d9;
    --floorplan-accent: #6ec6ea;
    --floorplan-background: #f5f8fb
}

.hero-banner-block {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 70vh;
    background-color: var(--floorplan-primary-dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden
}

.hero-banner-block[style*="--hero-bg-desktop"] {
    background-image: var(--hero-bg-desktop)
}

.hero-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 53, 83, 0.85) 0, rgba(10, 53, 83, 0.5) 50%, rgba(10, 53, 83, 0.2) 100%);
    pointer-events: none
}

.hero-banner-block .container {
    z-index: 1
}

.hero-banner-block .min-vh-100 {
    min-height: 80vh !important
}

@media(max-width:991px) {
    .hero-banner-block .min-vh-100 {
        min-height: 100vh
    }
}

@media(max-width:575px) {
    .hero-banner-block[style*="--hero-bg-mobile"] {
        background-image: var(--hero-bg-mobile)
    }

    .hero-banner-block .min-vh-100 {
        min-height: 100vh
    }
}

.hero-banner-headline {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
    font-weight: 600;
    color: var(--floorplan-white);
    margin-bottom: 1rem
}

.hero-banner-description {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--floorplan-light-gray);
    margin-bottom: 1.5rem;
    max-width: 540px
}

.hero-banner-description p {
    margin: 0 0 .75rem
}

.hero-banner-description p:last-child {
    margin-bottom: 0
}

.hero-banner-block .text-center .hero-banner-description {
    margin-left: auto;
    margin-right: auto
}

.hero-banner-block .text-md-end .hero-banner-description {
    margin-left: auto
}

.hero-banner-buttons {
    margin-top: 1.5rem
}

.btn-hero {
    display: inline-block;
    padding: .75rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease
}

.btn-hero-full {
    background-color: var(--floorplan-primary);
    color: var(--floorplan-white);
    border: 2px solid var(--floorplan-primary)
}

.btn-hero-full:hover {
    background-color: var(--floorplan-primary-hover);
    color: var(--floorplan-white);
    border-color: var(--floorplan-primary-hover)
}

.btn-hero-outline {
    background-color: transparent;
    color: var(--floorplan-white);
    border: 2px solid var(--floorplan-white)
}

.btn-hero-outline:hover {
    background-color: var(--floorplan-white);
    color: var(--floorplan-primary);
    border-color: var(--floorplan-white)
}

.btn-hero-secondary {
    background-color: var(--floorplan-secondary);
    color: var(--floorplan-black);
    border: 2px solid var(--floorplan-secondary)
}

.btn-hero-secondary:hover {
    background-color: var(--floorplan-secondary-darker);
    color: var(--floorplan-white);
    border-color: var(--floorplan-secondary-darker)
}