@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

.hero-banner {
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.7),
            /* left side dark */
            rgba(0, 0, 0, 0.3)
            /* right side transparent */
        ),
        url('../images/hotel/hotel-main-bg.webp') no-repeat center center/cover;
}

.form-control,
.form-control::placeholder {
    color: #000 !important;
    font-weight: 500;
}

.form-control {
    padding: 12px !important;
}

.company-lourney {
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.7),
            /* left side dark */
            rgba(0, 0, 0, 0.7)
            /* right side transparent */
        ),
        url('../images/hotel/hotel-main-bg.webp') no-repeat center center/cover;
    background-attachment: fixed;
}

.img-ratio-7-4 {
    aspect-ratio: 7/4;
}

.img-ratio-7-5 {
    aspect-ratio: 7/5;
}

.img-ratio-1-1 {
    aspect-ratio: 1/1;
}

.img-hover {
    overflow: hidden;
    position: relative;
}

.img-hover img {
    transition: transform 0.5s ease, filter 0.5s ease;
}

.img-hover:hover img {
    transform: scale(1.1);
    /* thoda zoom */
    filter: brightness(1.1);
    /* halka bright */
}

.card-overlay {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.9),
            /* bottom dark */
            rgba(0, 0, 0, 0) 100%
            /* top transparent */
        );
}

.cruise-logo {
    height: 40px;
    object-fit: contain;
    object-position: left;
}

.cruise-booking {
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.7),
            /* left side dark */
            rgba(0, 0, 0, 0.7)
            /* right side transparent */
        ),
        url('../images/hotel/hotel-main-bg.webp') no-repeat center center/cover;
    background-attachment: fixed;
}

.gradient-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 80%) 80%);
}

.avatar-2xl {
    min-width: 2.5rem;
}