.main-banner {
    width: 100%;
    height: 200px;
    background-image: linear-gradient(rgba(77, 55, 20, 0.4), 
    rgba(77, 55, 20, 0.4)),
    url("../assets/coffee-beach.jpeg");
    background-size: cover;
    background-position: center;
    position: relative;
}

.main-banner-grid {
    width: 100%;
    height: 200px;
    background-image: linear-gradient(rgba(77, 55, 20, 0.4), 
    rgba(77, 55, 20, 0.4)),
    url("../assets/coffee-beach.jpeg");
    background-size: cover;
    background-position: center;
    position: relative;
    display: grid;
    grid-template-rows: 3;
}

.main-banner-grid .title-desktop {
    color: white;
    font-style: italic;
    display: flex;
    justify-content: right;
    align-items: end;
}

.main-banner-grid .title-desktop-content {
    display: none;
    padding-right: 35px;
}

.main-banner-grid .check-availabity-wrapper {
    /* text-align: center; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-banner-grid .title-mobile {
    text-align: center;
    color: white;
    font-style: italic;
}

.main-banner-grid .title-mobile-content {
    padding-top: 10px;
}

.main-banner .blur-overlay {
    /* background-color: rgba(255, 255, 255, 0.2); */
    /* -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(0.5px); */
    width: 100%;
    height: 100%;
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: right;
    align-items: end;
}

.main-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-banner .main-title {
    /* background-color: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px); */
    border-radius: 5px;
    padding: 10px 7px;
    color: white;
    font-style: italic;
}

.flatpickr-day.nextMonthDay {
    color: rgba(57,57,57,0.5);
}

.flatpickr-day.nextMonthDay.flatpickr-disabled {
    color: rgba(64,72,72,0.1);
}

.flatpickr-disabled {
    background-color: rgb(179, 24, 24) !important;
}

.calendar-wrapper {
    display: flex;
    justify-content: center;
}

.main-feature-image {
    width: 100%;
    max-height: 300px;
}

.beach-card {
    max-width: 900px;
}

.banner-check-availability-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.banner-check-availability-button {
    background-color: rgba(77, 55, 20, 0.7);
    color: white;
    font-size: calc(0.8rem + 0.8vw);
}

.banner-check-availability-button:hover,.banner-check-availability-button:first-child:active  {
    background-color: rgba(77, 55, 20, 1);
    color: white;
}

/* When in Desktop */
@media (min-width: 768px) {

    .main-banner-grid .title-desktop-content {
        display: block;
    }

    .main-banner-grid .title-mobile-content {
        display: none;
    }
    .main-banner-grid, .main-banner {
        height: 500px;
    }

}