.hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }
        
        .hero-overlay {
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .room-card:hover .room-overlay {
            opacity: 1;
        }
        
        .instagram-feed {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1rem;
        }
        
        .testimonial-slider {
            scroll-snap-type: x mandatory;
        }
        
        .testimonial-slide {
            scroll-snap-align: start;
        }
        
        .parallax {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .booking-form input, .booking-form select {
            border-bottom: 1px solid #e8e5de;
            background-color: transparent;
        }
        
        .booking-form input:focus, .booking-form select:focus {
            outline: none;
            border-bottom: 1px solid #588157;
        }
		
		.lo {
		 border-radius: 25px;
  border: 2px solid #73AD21;
 
  width: 100px;
  height: 80px;  
		
		}
		
		
		/* assets/styles.css */

/* 
 * Style for the navigation bar when the page is scrolled.
 * This adds the solid background and a subtle shadow.
*/
nav.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}