.heading{
            font-size: 2.5rem; margin:1rem;font-weight: bolder;
        }    
        
        .main-container{
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width:100%;
            height:auto;
            padding-bottom: 3rem;
        }

        .table{
            display: flex;
            border-radius: 0.125rem;
            align-items: center;
            justify-content: center;
        }

        .button-container{
            display: flex;
            justify-content: flex-end;
            width: 100%;
            padding: 0.2rem 0.4rem;
        }

        .btn-add{
            display:flex;
            width:100%;
            align-items:center;
            justify-content:center;
            padding:0.5rem 2rem;
            background-color:rgb(30,110,200);
            color:#fff;
            border-radius: 0.25rem;
            margin: 0.25rem 0rem;
        }

        .btn-add:hover{
            opacity: 0.7;
        }

        .table-header{
            border-right: solid #fff 1px; padding: 0.4rem 1rem;
        }

        .table-head-row{
            background-color: rgb(31 41 55);
            color: #fff;
        }

        .rows{
            border-right: solid #000 1px; padding: 0.4rem 1rem;
        }

        .data-rows:hover{
            background-color: #ddd;
            cursor: pointer;
        }

        .side-bar{
            /* display: flex; */
            height: 100vh;
            /* width: 100%; */
            /* flex: 3; */
            /* border: solid #555 1px; */
            border-radius: 0.5rem;
            margin: 0 1rem;
        }

        .rooms-container{
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            width: 90%;
            flex: 8;
            padding: 0rem 2rem;
        }

        .room-card{
            /* display: flex;
            height: 16.5rem;
            width: 100%;
            flex: 8;
            border-radius: 0.5rem;
            border:solid #aaa 1px;
            padding: 1rem;
            margin: 0.5rem 0; */
        }

        .title-container{
            display: flex;
            width: 100%;
            padding: 1rem;
        }

        .title{
            font-size: 2rem;
            font-weight: bold;
        }

        .card-img{
            display: flex;
            flex: 2.5;
            width: 100%;
            height: 100%;
            align-items: center;
            padding-right: 1.3rem;
            justify-content: center;
        }
        .room-info{
            display: flex;
            flex: 3.5;
            flex-direction: column;
            padding-right:1rem;
            width: 100%;
            height: 100%;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .reviews{
            display: flex;
            flex: 2;
            flex-direction: column;
            width: 100%;
            height: 100%;
            align-items: flex-start;
            justify-content: flex-start;
        }

        .room-img{
            height: 100%;
            border-radius: 0.5rem;

        }

        .room-title{
            font-size: 1.5rem;
            font-weight: 900;
        }

        .below-name{
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
        }

        .location-div{
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            padding: 0.5rem 0;
            color: rgb(80, 80, 232);
            text-decoration-line: underline;
        }
        .room-type{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            padding: 0.5rem 0;
            font-weight: 900;
            font-size: 1rem;
        }

        .review-score{
            display: flex;
            flex: 1;
            height: 100%;
            width: 100%;
            justify-content: center;    
            font-weight: 500;
            padding: 0.3rem 0;
        }
        .room-price{
            display: flex;
            flex: 1;
            height: 100%;
            width: 100%;
            align-items: center;
            justify-content: space-around;
            font-weight: 500;
            padding: 0 3rem;
        }
        .room-available{
            display: flex;
            flex: 1;
            height: 100%;
            width: 100%;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            padding: 0.3rem 0;
        }

        .btn{
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .btn:hover{
            opacity: 0.7;
        }

        .btn-available{
            padding: 0.45rem 0.7rem;
            background-color:rgb(30,110,200);
            color:#fff;
            border-radius: 0.3rem;
        }

        .pagination-links {
            width: 100%;
            text-align: center;
            margin-top: 20px;
        }

        .pagination {
            justify-content: center;
        }

        .pagination li {
            display: inline-block;
            margin: 0 5px;
        }

        .pagination li a,
        .pagination li span {
            padding: 8px 12px;
            border: 1px solid #ddd;
            color: #333;
            text-decoration: none;
        }

        .pagination li.active span {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }

        .pagination li.disabled span {
            color: #ccc;
            cursor: not-allowed;
        }
        
        .content-container{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding-bottom:1rem;
            background-color: #AD68E4;
        }
        
        .search-div{
            display: flex;
            flex-direction: row;
            width: 100%;
        }

        .search-div-container{
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }
        .content-div{
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            padding-top: 4rem;
        }

        .search-btn{
            display:flex; padding:0.5rem 1.2rem; border-radius:0.5rem; background-color:rgb(30,110,200);
            align-items: center;
            justify-content: center;
        }
        .search-txt{
            font-size: 1.3rem;
            font-weight: 900;
            color: #fff;
        }

        .date-container{
            display: flex; width: 100%; padding:0.5rem 0.5rem; border:solid #666 2px; border-radius:0.5rem; background-color: rgb(250, 250, 250, 0.5);
        }

        .date-input{
            display:flex; width:100%; padding:0.5rem 1rem; border:solid #666 2px; border-radius:0.5rem; background-color: rgb(250, 250, 250, 0.5); margin: 0 0.125rem;
        }

        .suggestions-container{
            position: absolute;
            top: 100%; /* Directly below the search bar */
            left: 0;
            width: calc(100% - 20px); /* Match search bar width */
            max-height: 200px; /* Limit height */
            overflow-y: auto; /* Enable scrolling if needed */
            background-color: #fff;
            border: 1px solid #AD68E4;
            border-radius: 5px;
            z-index: 1000; /* Ensure it appears above other elements */
        }

        .suggestion{
            padding: 0.5rem;
            border-bottom: 1px solid #eee;
            background-color: #fff;
            font-size: 14px;
            cursor: pointer;
        }

        .suggestion:hover{
            background-color: #222;
            color: #fff;
            cursor: pointer;
        }

        .search-bar{
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            padding: 0rem 1rem;
            z-index: 1; /* Ensure search bar itself is visible */
        }

        .rooms-display{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: auto;
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }

        @media (min-width: 768px) {
            .rooms-display {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            
            .rooms-container{
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100%;
                width: 67%;
                flex: 8;
                padding: 0rem 2rem;
            }
        }

        @media (min-width: 1024px) {
            .rooms-display {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            
            .rooms-container{
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100%;
                width: 67%;
                flex: 8;
                padding: 0rem 2rem;
            }
        }