/* ====== Messages ====== */
aside.alert.my-0.alert-success.rounded-0.text-center.popup {
    position: absolute;
    z-index: 998;
    width: 100%;
    text-align: center;
    right: 50%;
    transform: translate(50%, 0%);
}


/* ====== Hero ====== */
.hero {
    width: auto;
    height: calc(100vh - 56px);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.container-background {background: #000;}

.hero-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: brightness(53%);
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    z-index: 2;
    background-color: #000;
}

.searchbar {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    background: transparent;
    animation-duration: 1s;
    animation-name: fadein;

}

.searchbar > h1 {
    color: #ffffff;
    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.6);
    background: none;
}


#search-button {
    font-size: 1.1rem;
}


.clear-button {
    background-color:#252222a8;
    border: 0;
    border-radius: 20px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
}

.clear-button:hover {
    color: #fff;
    background-color:#252222cb;
}

.clear-button:active {
    border: 0;
    color: #fff !important;
    background-color:#252222a8 !important;
}


/* ===== Card ===== */

.card-img-top { 
    width: 100%;
    border-radius: 0px !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.card {
    border: none;
    border-radius: 0px;
    height: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.15) !important;
}


.card > a {
    text-decoration: underline;
    z-index: 1;

}

.card-body {background: #f6f8f7 !important;}

.card-body .fa-solid {
    color: #4c5053;
    opacity: 0.8;
}

.price-background > p {
    background-color: #e3f1eb;
    display: inline-block;
    border-radius: 20px;
    color: #2f3a34;
}


/* ====== Why Book With Us section ====== */

.booking {background-color: var(--section-gray);}


/* ====== Hero Contact ====== */
.hero-contact {
    width: 100%;
    height: calc(50vh - 56px);
    position: relative;
    overflow: hidden;
}

.hero-image-contact {
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: brightness(53%);
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    z-index: 2;
    background-color: #000;
}


.contact-div {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    background: transparent;
    color: #ffffff;

}


/* ====== Popular Destinations Section ====== */
.grid {
    display: block;
    padding: 20px;
    width: 100%; 
    box-sizing: border-box;
} 

.grid-container {
    display: grid;
    grid-template-columns: 2fr 2fr;
    grid-template-rows: 0.5fr 0.5fr;
    width: 100%;
    gap: 15px;
    justify-content: center; 
    margin: 0 auto;
    grid-template-areas: 
    "box-1 box-2"
    "box-1 box-3";
 } 

.box { 
    text-align: center;
    color: white; 
    width: 100%; 
    overflow: hidden;
    display: grid;
} 

.box-1 {grid-area: box-1;}

.box-2 {grid-area: box-2;}

.box-3 { grid-area: box-3;}


.card-link {
  display: grid;
  width: 100%;
  height: 100%;
  text-decoration: none;
   min-height: 0vh;
}

.popular-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    min-height: 0vh;
    user-select: none;
}

.text-container {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    z-index: 1;
    display: flex;
    justify-content: end;
    align-items: end;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.219) 10%, rgba(0, 0, 0, 0.205) 60%, rgba(0, 0, 0, 0.9) 90%);
}



.destination-text {
    width: 100%;
    color: #fff;
    align-self: end;
    transition: transform 0.3s ease-out;
    transform: translateZ(0);
}

.text-container > .btn {
    align-self: end;
    width: 100%;
    color: #fff;
    border: none;
    transition: transform 0.3s ease-out;
    display: inline-block;
}

.text-container, .btn:hover .btn:active {
    color: #fff;
}

.box:hover  .btn {
    transform:translateY(-11px);
    transition: 0.3s ease-out;
    
}

.box:hover .destination-text {
    transform:translateY(-11px);
    transition: 0.3s ease-out;
}

@media (min-width: 576px) {
    .hero {height: calc(100vh - 66px);}
}

@media (max-width: 768px) {

    .searchbar{width: 100%;}

    .grid-container { 
        grid-template-columns: 1fr;
        width: 100%;
        gap: 25px;
        grid-template-areas: 
            "box-1"
            "box-1"
            "box-2" 
            "box-3";
    } 
}