#super {
            position: fixed;
            top: 0px;
            }
            p{
                color: black;
                margin-bottom: 5px !important;
            }
                
        .hotel-card {
            margin-bottom: 20px;
            transition: transform 0.2s;
            color: black;
        }
        .hotel-card:hover {
            transform: scale(1.05);
        }
        .hotel-img {
            height: 200px;
            object-fit: cover;
        }
        .price {
            font-size: 20px;
            color: black;
            font-weight: bold;
        }
        .button {
            background: linear-gradient(to right, rgba(79, 87, 255, 1) 1%, rgba(125, 63, 216, 1) 50%, rgba(170, 39, 177, 1) 100%) ;
            /* background-color: #e67e22; */
            color: white;
            padding: 10px;
            text-align: center;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        .button:hover {
            background: linear-gradient(to right, rgba(79, 87, 255, 1) 1%, rgba(125, 63, 216, 1) 50%, rgba(170, 39, 177, 1) 100%) 
            /* background-color: #d35400; */
        }
       
        footer {
            text-align: center;
            padding: 20px 0;
            background: #35424a;
            color: #ffffff;
        }
        .hero-section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f8f9fa; /* Light background color */
            margin-bottom: 80px;
        }
        .heading-details {
    position: absolute;
    top: 50%;
}
.cta-btn {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50px;
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.0em;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 10px;
    transition: all .3s ease;
    transition-behavior: normal;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: all;
}

.cta-btn:hover {
            color: white;
            background: linear-gradient(to right, rgba(79, 87, 255, 1) 1%, rgba(125, 63, 216, 1) 50%, rgba(170, 39, 177, 1) 100%);
        }

        .form-group {
            color: black;
            align-items: center;
            padding: 5px;
            /* border-right: 1px solid #e0e0e0; */
            /* flex-grow: 1; */
           
        }

        .search-container {
            background: linear-gradient(to right, RGB(218, 210, 260) 1%, rgb(110 116 245 / 23%) 50%, rgb(167 92 171 / 44%) 100%);
            padding: 10px;
            justify-content: space-between;
            align-items: center;
            border-radius: 5px;
        }
        .btn-clr{
        background: linear-gradient(to right, rgba(79, 87, 255, 1) 1%, rgba(125, 63, 216, 1) 50%, rgba(170, 39, 177, 1) 100%) !important;
        border: 1px solid !important;
        }

        .right-nav{
            top: 55px;
        }

        .card-title{
            font-weight: bold;
        }

        .btn-available{
            background: linear-gradient(to right, rgba(79, 87, 255, 1) 1%, rgba(125, 63, 216, 1) 50%, rgba(170, 39, 177, 1) 100%) !important
        }
        @media (max-width: 768px) {
            .hero-section {
                height: 50vh !important;
                margin-bottom: 0px !important;
            }
            
        }