.appointment-page .hero-banner {
    position: relative;
    display: flex;

    width: 100%;
    height: 430px;

    justify-content: center;
    align-content: stretch;

    box-shadow: inset 1px 40px 0 40px #18224b;
    overflow: hidden;
}


.appointment-page .hero-banner .bgImage {
    position: absolute;
    width: 100%;
    height: 430px;

    background-position: center;
    background-size: cover;
}

.appointment-page .hero-banner .hero-caption {
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;

    background-color: rgba(24,34, 75,0.5);
    z-index: 1;
}

.appointment-page .hero-banner .hero-caption .subtitle {
    letter-spacing: 4px;
    margin-bottom: 20px;
    font-size: 18px;
}

.appointment-page .hero-banner .hero-caption h1 {
    margin-bottom: 15px;

    font-size: 58px;
    color: #fff;
    letter-spacing: 3px;
    line-height: 1;
}

.appointment-page .hero-banner .hero-caption p {
    margin-bottom: 10px;

    font-size: 20px;
    line-height: 1.5;

    letter-spacing: 1px;
    font-weight: 400;
}

.appointment-page h1, h2, h3, h4, h5, h6 {
    color: #19224D;
}

.appointment-page .layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 30px;

    padding-bottom: 20px;
}

.appointment-page .room-card {
    display: flex;
    flex-direction: column;

    border-radius: 12px;

    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.10);

    overflow: hidden;
}

.appointment-page .room-card *:not(.fa) {
    color: #19224D;
    font-size: 16px;
    font-family: 'Lato',sans-serif !important;
}

.appointment-page .room-card .text-gray {
    color: #d2d2d2;
}

.appointment-page .room-card .card-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.appointment-page .room-card .card-heading {
    margin-bottom: 8px;

    font-size: 26px;
    line-height: 1.5;
    font-family: 'Lato',sans-serif;
}

.appointment-page .room-card .card-content {
    padding: 10px 15px;
}

.appointment-page .room-card .card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.appointment-page .room-card .card-details .detail-item p {
    margin-bottom: 4px;
}

.appointment-page .room-card .price {
    color: #19224D;
    font-size: 26px;
    font-family: 'Lato',sans-serif;
    font-weight: bold;
}

.appointment-page .room-card .button {
    width: 100%;
    margin: 8px 0;

    text-align: center;

    background-color: #18224b;
    border-radius: 4px;
}