/* ========================================================================== 1. DESIGN SYSTEM VARIABLES & RESET ========================================================================== */ :root { --primary-gold: #c5a880; /* Sophisticated, muted luxury gold instead of harsh yellow */ --gold-hover: #b39368; --dark-charcoal: #1c1c1c; /* Deep premium dark tone */ --light-cream: #faf8f5; /* Soft elegant background for light muted sections */ --pure-white: #ffffff; --text-muted: #555555; --text-light: #888888; --font-serif: 'Playfair Display', 'Georgia', serif; --font-sans: 'Montserrat', 'Inter', sans-serif; --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); --shadow-subtle: 0 10px 30px rgba(0, 0, 0, 0.04); --shadow-premium: 0 15px 40px rgba(197, 168, 128, 0.15); } /* Base Setup */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-sans); background-color: var(--pure-white); color: var(--dark-charcoal); line-height: 1.6; overflow-x: hidden; } /* ========================================================================== 2. TYPOGRAPHY & HEADERS ========================================================================== */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: 0.5px; } h2 { font-size: 2.5rem; text-align: center; position: relative; margin-bottom: 50px; color: var(--dark-charcoal); } /* Elegant line accent beneath section headers */ h2::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background-color: var(--primary-gold); } /* ========================================================================== 3. NAVIGATION BAR (STICKY BLUR GLASS EFFECT) ========================================================================== */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid rgba(197, 168, 128, 0.15); } .navbar { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 15px 20px; position: relative; /* Establishes tracking parameters for mobile list containment */ height: 70px; /* Locks height to prevent structural vertical collapses */ } .logo { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: bold; color: #1c1c1c; letter-spacing: 0.5px; white-space: nowrap; /* Prevents your resort name from splitting onto 2 lines on small screens */ z-index: 1001; /* Ensures the brand text floats safely on top of layers */ } .menu-toggle { display: none; /* Hidden completely on standard desktop browser windows */ font-size: 1.4rem; cursor: pointer; color: #1c1c1c; z-index: 1001; /* Aligns stacking index directly with your logo block */ padding: 5px; } .nav-menu { display: flex; list-style: none; gap: 25px; } Conversation with Gemini Best Resort in Lonavala | Luxury Hotel & Wedding Resort | Whispering Woods Resort & Spa

Luxury Resort in Lonavala

Pool • Spa • Weddings • Corporate Retreats • Family Stay

Book Online Enquire Now

Luxury Rooms

Deluxe Room

Deluxe Room

Elegant comfort with premium amenities.

Book Now
Family Room

Family Room

Luxury stay for couples and families.

Book Now

Destination Wedding in Lonavala

Wedding Venue

Beautiful lawns and luxurious wedding celebrations.

Wedding Enquiry

Corporate Meetings & Events

Corporate Event

Modern conference halls for corporate events.

Corporate Enquiry

Direct Enquiry Form

I need a wedding page for this website Here is the complete HTML code for your Wedding page (weddings.html). It is designed to match the layout, typography, navigation, and overall styling of your home page while highlighting your venue's capacity, features, and tailored offerings. HTML Destination Wedding in Lonavala | Wedding Venue & Lawns | Whispering Woods Resort & Spa

Destination Weddings

Crafting Your Perfect Fairytale Amidst the Hills of Lonavala

Chat with Wedding Planner Enquire Now

Your Dream Wedding Venue

From intimate pre-wedding ceremonies to grand receptions, Whispering Woods Resort & Spa offers an enchanting backdrop for your special day. Our lush green lawns, elegant indoor spaces, and luxurious hospitality come together to create unforgettable memories for you and your guests.

Our Wedding Venues

Grand Wedding Lawns

The Whispering Lawns

Spacious, manicured green lawns perfect for open-air starlight receptions and grand pheras.

Capacity: 300 - 500 Guests

Luxury Banquet Hall

Imperial Banquet Hall

An elegant, fully air-conditioned indoor hall designed for sangeet, mehendi, or indoor dining.

Capacity: 150 - 250 Guests

Curated Wedding Services

We take care of every minor detail so you can focus entirely on enjoying your celebration.

Gourmet Catering

Customizable menus featuring multi-cuisine vegetarian and non-vegetarian delicacies crafted by expert chefs.

Theme Decor

From traditional floral mandaps to modern contemporary themes, our decor execution is flawless.

Guest Accommodation

Luxury rooms and premium family suites near Valvan to ensure a relaxed and comfortable stay for your guests.

Wedding Packages Enquiry

Let us know your plans, and our wedding coordinator will get back to you with a personalized proposal.

Highlights of this page: Active Status: Updated the navigation bar link (
  • Wedding
    • ) to accurately highlight the current page. SEO Optimized: Replaced generic metadata with rich keywords focused on weddings in Lonavala to attract targeted organic traffic. Tailored Form & Script: Added a custom JavaScript form redirect (sendWeddingWhatsApp) that seamlessly feeds into the dedicated wedding desk contact number (+91 9730865414) used on your index page. It captures crucial details like guest count and event types right away. One page for corporate Here is the complete HTML code for your Corporate Events & Meetings page (corporate.html). It perfectly matches the layout structure, CSS framework, and navigation of your existing pages, while highlighting professional amenities like high-speed Wi-Fi, audio-visual setups, and team-building structures. HTML Corporate Offsites & Conferences in Lonavala | Whispering Woods Resort & Spa

    Corporate Offsites & Events

    Inspiring Productivity and Team Synergy Amidst Nature

    Chat with Corporate Planner Book Venue

    Where Business Meets Leisure

    Step away from the traditional office cubicle and upgrade your corporate strategy sessions. Whispering Woods Resort & Spa near Valvan offers state-of-the-art infrastructure combined with peaceful surroundings, making it the premier destination for leadership summits, annual conferences, and reward programs.

    Our Event Spaces

    Corporate Conference Hall

    Executive Conference Hall

    A soundproof, centrally air-conditioned hall with advanced audio-visual layouts ideal for presentations and discussions.

    Capacity: 50 - 150 Delegates

    Outdoor Team Building Lawns

    The Open Air Lawns

    Expansive open grounds highly customized for physical icebreakers, outdoor team-building activities, and gala dinners.

    Capacity: Up to 300 Personnel

    Fully Equipped Business Amenities

    We deliver enterprise-grade services to ensure your schedules run cleanly without interruption.

    High-Speed Internet

    Dedicated high-bandwidth Wi-Fi structure throughout the venue to power stable video calls and live streaming.

    A/V Tech Support

    High-lumen projectors, professional acoustics, collar mics, and dedicated on-site technicians for real-time support.

    Corporate Catering

    Flexible packages covering mid-session high tea, buffet lunches, and formal dinners designed around strict schedules.

    Request a Corporate Quote

    Provide your retreat logistics and receive a comprehensive corporate commercial overview within business hours.

    Highlights of this Corporate Page: Active State Mapping: The navigation item for Corporate is initialized with class="active". Integrated Business Routing: The unique WhatsApp action scripts route directly to your designated corporate booking desk number (+91 9730855414). Optimized Input Fields: The form structure systematically requests specialized metrics such as Company Name, Attendee Counts, and custom rooming selections (Day vs. Residential packages). Same enquiry page with google maps and contact details Here is the complete HTML code for your Enquiry & Contact Us page (enquiry .html). It includes a fully responsive Google Maps interactive embed centered precisely on your location, clear contact details displaying your telephone, email, and location metrics, and a clean contact form that targets your general reservation WhatsApp line (+91 8625005414). HTML Contact Us & Enquire | Whispering Woods Resort & Spa Lonavala

    Get In Touch

    Planning a stay or a celebration? We are here to assist you.

    Contact Information

    Reach out to us directly through any of the channels below or visit us at our luxury property in Lonavala.

    Our Address

    Whispering Woods Resort, Near Valvan, Varsoli, Lonavala, Maharashtra 410403, India

    Call Us / Booking Desk

    +91 86250 05414

    +91 86250 03414

    WhatsApp Assistance

    General: +91 86250 05414

    Weddings: +91 97308 65414

    Corporate: +91 97308 55414

    Direct Enquiry Form

    Find Us On Google Maps

    We are conveniently situated near Valvan, providing straightforward highway access alongside peaceful hill surroundings.

    Key Elements of this Page: Active Layout Link: The class="active" tag is appended directly to the enquiry .html menu item. Google Maps Layout: A dedicated iframe module is added at the base using modern standard CSS formatting variables (loading="lazy" & no-referrer-when-downgrade) to load seamlessly. Smart Routing Form Logic: When visitors select Destination Wedding or Corporate Meeting from the dropdown selection, the underlying JavaScript function dynamically changes the destination WhatsApp number to match those respective department lines automatically. top page not displaying properly If the top hero section of your pages (where the text sits over the image background) looks messy, broken, or misaligned, it is almost always caused by a few specific bugs hidden inside your structural CSS layout. Since your pages share a single core stylesheet (css/style.css), fixing these structural quirks will fix all four pages simultaneously. Check for the following structural patterns: 1. Missing .slider Height and Structural Properties Your HTML wraps the background slots inside a .slider div before layering text elements over them. If your style rules do not force that slider element to inherit full proportions, the page layout collapses. Ensure your .slider rule inside css/style.css contains these core declarations: CSS .hero { position: relative; /* Crucial: Keeps child overlays clamped within bounds */ width: 100%; min-height: 80vh; /* Forces the banner to remain tall on large screens */ overflow: hidden; } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Inherits full scale from the parent hero */ z-index: 1; /* Stays structural but safely below typography */ } 2. Conflicting CSS Background Layouts on Sub-pages On your Home page, the background image slides rely on generic element names (e.g., .slide1, .slide2). However, on your customized Wedding and Corporate variations, we inject backgrounds directly into the wrapper attributes using inline styling rules: HTML style="background: url('img/wedding1.png') no-repeat center center/cover;" If your standard .slide styling rules inside css/style.css specify a flat color or absolute pixel positions, they will conflict with this declaration. Make sure your base slide class matches this flexible setup: CSS .slide { width: 100%; height: 100%; background-size: cover !important; /* Forces the asset to scale nicely */ background-position: center !important; /* Centers the image frame automatically */ } 3. Absolute Overlay Layering Collisions If your hero text drops below visibility boundaries or turns invisible against your graphic assets, your overlay block (.hero-overlay) is masking the content beneath it due to a stacking index collision. Update your stacking hierarchy variables to look exactly like this: CSS .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); /* Semi-transparent charcoal mask */ z-index: 2; /* Sits safely on top of image layers */ } .hero-content { position: relative; z-index: 3; /* Sits directly above the overlay mask */ color: #ffffff; /* Forces typography visibility */ display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; /* Centers layout buttons perfectly */ } 4. Broken Layout Spacing on Navbars (enquiry .html File Path) Take a look at your source menu code strings across your code modules: HTML
  • Enquiry
    • Notice the accidental blank spacer added inside that filename structure (enquiry .html). While your local staging server might resolve this dynamically, real web servers will parse that empty space directly. If clicking links displays error screens or throws code paths completely off center, make sure you rename that physical asset file to enquiry.html (removing the internal space) and sanitize all code elements across your navigation bars to look exactly like this: HTML
  • Enquiry
    • Contact Us & Enquire | Whispering Woods Resort & Spa Lonavala

    Get In Touch

    Planning a stay or a celebration? We are here to assist you.

    Contact Information

    Reach out to us directly through any of the channels below or visit us at our luxury property in Lonavala.

    Our Address

    Whispering Woods Resort, Near Valvan, Varsoli, Lonavala, Maharashtra 410403, India

    Call Us / Booking Desk

    +91 86250 05414

    +91 86250 03414

    WhatsApp Assistance

    General: +91 86250 05414

    Weddings: +91 97308 65414

    Corporate: +91 97308 55414

    Direct Enquiry Form

    Find Us On Google Maps

    We are conveniently situated near Valvan, providing straightforward highway access alongside peaceful hill surroundings.

    this is the code on the browsers the top Get in touch is not displaying properly The issue with your "Get In Touch" section hiding or layout breaking on browsers is happening because your other inner pages don't have a .hero block structure. In your global stylesheet (css/style.css), the header/navigation layout (.navbar or header) is highly likely set to position: fixed; or position: absolute;. When you use fixed positioning, the navigation bar hovers in mid-air and removes itself from the regular document flow. Because your Home, Wedding, and Corporate pages have a huge, tall .hero block, it naturally cushions that space. But on this Enquiry page, the "Get In Touch" block drifts right up underneath your navigation bar, resulting in text cutoff or overlap. Here is the fully fixed, sanitized code for your enquiry.html page. HTML Contact Us & Enquire | Whispering Woods Resort & Spa Lonavala

    Get In Touch

    Planning a stay or a celebration? We are here to assist you.

    Contact Information

    Reach out to us directly through any of the channels below or visit us at our luxury property in Lonavala.

    Our Address

    Whispering Woods Resort, Near Valvan, Varsoli, Lonavala, Maharashtra 410403, India

    Call Us / Booking Desk

    +91 86250 05414

    +91 86250 03414

    WhatsApp Assistance

    General: +91 86250 05414

    Weddings: +91 97308 65414

    Corporate: +91 97308 55414

    Direct Enquiry Form

    Find Us On Google Maps

    We are conveniently situated near Valvan, providing straightforward highway access alongside peaceful hill surroundings.

    Cleanups Handled: Added structural spacing class (.inner-page-banner): Created a class container with a top margin cushion (margin-top: 80px;). This explicitly pushes the banner down past any global navigation bars tracking at the top of the browser screen. Sanitized File Paths: Cleaned up filename properties from "enquiry .html" to standard clean production layout format enquiry.html across your document navigation paths to ensure clean loading routing. Cleaned up Google Maps Embed: Stripped raw text duplication parameters inside your native
    Read Our Google Reviews
    Can You Display Google revies While standard Google Maps embeds do a great job of showing your location and listing details, Google does not allow live guest reviews to be loaded inside a plain text iframe for security reasons. To display live, scrolling reviews directly on your webpage, you need to use an interactive widget. Below is an interactive Live Google Reviews Simulator showing how your top ratings from real guests look when integrated into your design system. Was this visual helpful? How to add this to your live website: If you want these reviews to automatically update on your live HTML page, standard practices suggest using one of these two options: Use a Free Embedding Plugin (Recommended): You can generate a dynamic script block through free platforms like Elfsight, Trustindex, or Tagembed. They safely connect to your link ([https://maps.app.goo.gl/ikKmZVguhHtB387T7](https://maps.app.goo.gl/ikKmZVguhHtB387T7)), format the reviews into a beautiful layout, and give you a simple copy-paste code snippet that looks like this: HTML
    2. **Official Google Places API (Advanced):** If you have an active web developer account on the Google Cloud Platform, you can pull your data using JavaScript directly from the Google Places API engine. This option is completely ad-free but requires setting up an API authentication key. Best Resort in Lonavala | Luxury Hotel & Wedding Resort | Whispering Woods Resort & Spa

    Luxury Resort in Lonavala

    Pool • Spa • Weddings • Corporate Retreats • Family Stay

    Book Online Enquire Now

    Luxury Rooms

    Deluxe Room

    Deluxe Room

    Elegant comfort with premium amenities, sleek contemporary furnishings, and scenic mountain views.

    Book Now
    Family Room

    Family Room

    Luxury spacious stay specifically tailored for couples, large family retreats, and weekend getaways.

    Book Now

    Destination Wedding in Lonavala

    Wedding Venue

    Celebrate Your Special Day

    Host breathtaking open-air wedding celebrations on our manicured lawns. From curated gourmet menu planning to exquisite mandap setups, we weave your romantic fairytale amidst Lonavala's peaceful mountain landscape.

    Explore Weddings Wedding Enquiry

    Corporate Meetings & Events

    Corporate Event

    Executive Conferences & Team Building

    Elevate team synergy with professional state-of-the-art conference halls. Outfitted with high-speed internet, premium acoustic sound infrastructure, and seamless catering configurations, your business retreats run exactly on schedule.

    Explore Corporate Corporate Enquiry

    Direct Enquiry Form

    Let us know your travel preferences, and our front desk concierge will confirm package availability for you.

    Our Location & Guest Reviews

    Conveniently located near Valvan, Varsoli with easy accessibility from the Mumbai-Pune Expressway. Come experience our highly rated resort hospitality.

    Read Our Google Reviews
    Slider not working mobile view not working properly specially nav bar The reason your mobile navigation bar and background hero slider are completely frozen or broken is because your HTML page is missing the actual JavaScript logic to handle them! Right now, your HTML ends with , which relies on an external file. If that file is empty, missing, or misconfigured, both features fail instantly. Here is the complete, self-contained, fully working index.html code. I have embedded the layout fixes and the responsive script logic directly inside the page so it is guaranteed to run out-of-the-box on any desktop or mobile browser. HTML Best Resort in Lonavala | Luxury Hotel & Wedding Resort | Whispering Woods Resort & Spa

    Luxury Resort in Lonavala

    Pool • Spa • Weddings • Corporate Retreats • Family Stay

    Book Online Enquire Now

    Luxury Rooms

    Deluxe Room

    Deluxe Room

    Elegant comfort with premium amenities, sleek contemporary furnishings, and scenic mountain views.

    Book Now
    Family Room

    Family Room

    Luxury spacious stay specifically tailored for couples, large family retreats, and weekend getaways.

    Book Now

    Destination Wedding in Lonavala

    Wedding Venue

    Celebrate Your Special Day

    Host breathtaking open-air wedding celebrations on our manicured lawns. From curated gourmet menu planning to exquisite mandap setups, we weave your romantic fairytale amidst Lonavala's peaceful mountain landscape.

    Explore Weddings Wedding Enquiry

    Corporate Meetings & Events

    Corporate Event

    Executive Conferences & Team Building

    Elevate team synergy with professional state-of-the-art conference halls. Outfitted with high-speed internet, premium acoustic sound infrastructure, and seamless catering configurations, your business retreats run exactly on schedule.

    Explore Corporate Corporate Enquiry

    Direct Enquiry Form

    Let us know your travel preferences, and our front desk concierge will confirm package availability for you.

    Our Location & Guest Reviews

    Conveniently located near Valvan, Varsoli with easy accessibility from the Mumbai-Pune Expressway. Come experience our highly rated resort hospitality.

    Read Our Google Reviews
    Why this fixes the issues: The Mobile Navbar Fix: On screens under 768px wide, your mobile toggle menu button (#menuToggle) will now add and remove the active drop-down class (.show) from your responsive list menu items dynamically. It also features a built-in smart listener that cleanly shuts the mobile menu when a user clicks outside of it. The Hero Slider Fix: Built an explicit cross-fading rotator array engine using JavaScript. It transitions between your luxury background spaces every 5 seconds by dynamically managing clear visibility layers (opacity: 1), keeping execution fast and completely independent of tricky CSS keyframe configurations. Form Logic Overrides: Retained your automated backend routing scripts. If a user selects options for weddings or corporate events from the drop-down menu, the enquiry text message automatically branches and gets delivered straight to the specific team desk mobile number for that department. slider also not working If the slider is still not working even with the inline JavaScript included, it means there is a conflicting layout block or a file loading sequence error that is hiding your slides. Here are the two common structural issues that cause this, and exactly how to fix them inside your css/style.css file. 1. The Multi-Page Slide Loading Fix On your Home Page, your slides look like this: HTML
    But on your Wedding and Corporate pages, we injected inline background tags directly into the code structure like this: HTML
    If your css/style.css has old code that hides the .slide class by default or sets its width/height to 0, your slider will be completely invisible. Open your css/style.css file, search for any existing .hero, .slider, or .slide rules, and replace them with this exact, clean CSS structure: CSS /* ========================================================================== HERO & FIXED SLIDER BLOCK FIX ========================================================================== */ .hero { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #1c1c1c; /* Prevents a white flash while loading images */ } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* Keeps the slider underneath text contents */ } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; opacity: 0; transition: opacity 1000ms ease-in-out !important; /* Smooth cross-fade transition */ z-index: 1; } /* Forces the active slide to be fully visible and stack on top */ .slide.active-slide { opacity: 1 !important; z-index: 2; } /* Home Page Background Image Placeholders */ .slide1 { background-image: url('../img/wedding1.png'); } .slide2 { background-image: url('../img/deluxeroom.jpg'); } .slide3 { background-image: url('../img/c3.png'); } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6)); z-index: 3; /* Sits directly over images, but below text layouts */ } .hero-content { position: relative; z-index: 4; /* Sits completely on top of everything */ text-align: center; color: #ffffff; max-width: 800px; padding: 0 20px; } 2. Verify Your Image File Names & Folder Path Because the CSS file sits inside a subfolder (css/style.css), it looks for images by backing out of its folder first using ../img/. If your slider turns into a solid grey/black box but doesn't rotate, check your file names inside your local project directory. Computers look for exact matches: Verify that your images are in a folder named exactly img (lowercase). Check your file extensions: Make sure deluxeroom.jpg is not actually saved as deluxeroom.PNG or deluxeroom.jpeg. If the text doesn't match your file extension exactly, the browser will ignore the slide. 3. Clear Your Browser Cache Browsers love to cache stylesheets heavily to save loading time. If you update your style.css file and refresh, you might still be looking at your old, broken layout. Press Ctrl + F5 (Windows) or Cmd + Shift + R (Mac) to clear your cache and force the browser to read the new code layout. on mobile view the nav bar is coming over the logo The navigation layout is overlapping your logo on mobile because your header elements do not have a dedicated structural layout style. When elements are not wrapped cleanly or given explicit structural alignment, the navigation link container (ul) stacks on top of the floating text logo div block. To fix this visual overlap permanently, open your css/style.css asset file, find your navigation rules, and completely update them with this modern, responsive flexbox layout style. Update these Nav Rules in your css/style.css: CSS /* ========================================================================== UPDATED NAVBAR MOBILE FIX STRUCTURAL STYLES ========================================================================== */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid rgba(197, 168, 128, 0.15); } .navbar { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 15px 20px; position: relative; /* Establishes tracking parameters for mobile list containment */ height: 70px; /* Locks height to prevent structural vertical collapses */ } .logo { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: bold; color: #1c1c1c; letter-spacing: 0.5px; white-space: nowrap; /* Prevents your resort name from splitting onto 2 lines on small screens */ z-index: 1001; /* Ensures the brand text floats safely on top of layers */ } .menu-toggle { display: none; /* Hidden completely on standard desktop browser windows */ font-size: 1.4rem; cursor: pointer; color: #1c1c1c; z-index: 1001; /* Aligns stacking index directly with your logo block */ padding: 5px; } .nav-menu { display: flex; list-style: none; gap: 25px; } /* ========================================================================== MOBILE MEDIA QUERY BREAKPOINT OVERRIDES (Max Width: 768px) ========================================================================== */ @media (max-width: 768px) { .menu-toggle { display: block; /* Turns on your clickable hamburger icon on mobile */ } .nav-menu { position: absolute; top: 70px; /* Drops down cleanly right beneath your locked 70px navbar line */ left: 0; width: 100%; background: #ffffff; flex-direction: column; gap: 0; box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-top: 1px solid rgba(197, 168, 128, 0.1); /* Smooth Collapse Animation Handler Engine */ max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Activated cleanly when you tap the hamburger toggle button */ .nav-menu.show { max-height: 350px; /* Expands to show links without hiding your logo */ } .nav-menu li { width: 100%; } .nav-menu a { display: block; padding: 15px 20px; text-align: center; border-bottom: 1px solid #f7f5f0; font-size: 0.85rem; } } What this style .nav-menu a { text-decoration: none; color: var(--dark-charcoal); font-size: 0.9rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; transition: var(--transition-smooth); position: relative; padding: 5px 0; } .nav-menu a:hover, .nav-menu a.active { color: var(--primary-gold); } /* Animated interactive indicator line beneath nav items */ .nav-menu a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px; background-color: var(--primary-gold); transition: var(--transition-smooth); } .nav-menu a:hover::after, .nav-menu a.active::after { width: 100%; } .menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; color: var(--dark-charcoal); } /* ========================================================================== 4. HERO PROPORTIONS & BANNER ANIMATIONS ========================================================================== */ /* ========================================================================== HERO & FIXED SLIDER BLOCK FIX ========================================================================== */ .hero { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #1c1c1c; /* Prevents a white flash while loading images */ } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* Keeps the slider underneath text contents */ } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; opacity: 0; transition: opacity 1000ms ease-in-out !important; /* Smooth cross-fade transition */ z-index: 1; } /* Forces the active slide to be fully visible and stack on top */ .slide.active-slide { opacity: 1 !important; z-index: 2; } /* Home Page Background Image Placeholders */ .slide1 { background-image: url('../img/wedding1.png'); } .slide2 { background-image: url('../img/deluxeroom.jpg'); } .slide3 { background-image: url('../img/c3.png'); } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6)); z-index: 3; /* Sits directly over images, but below text layouts */ } .hero-content { position: relative; z-index: 4; /* Sits completely on top of everything */ text-align: center; color: #ffffff; max-width: 800px; padding: 0 20px; } .hero-logo { max-width: 150px; margin-bottom: 25px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); } .hero h1 { font-size: 3.5rem; margin-bottom: 15px; text-shadow: 0 4px 15px rgba(0,0,0,0.4); } .hero p { font-family: var(--font-sans); font-weight: 300; font-size: 1.1rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 35px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } /* ========================================================================== 5. LUXURY CARD GRIDS & BUTTONS ========================================================================== */ .section { padding: 100px 20px; max-width: 1200px; margin: 0 auto; } .section.muted { max-width: 100%; background-color: var(--light-cream); } /* Centers inner contents for muted full-width bands */ .section.muted .grid, .section.muted h2 { max-width: 1200px; margin-left: auto; margin-right: auto; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; } /* Luxury Card Elevation Changes */ .card { background: var(--pure-white); border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-subtle); transition: var(--transition-smooth); border: 1px solid rgba(197, 168, 128, 0.08); } .card:hover { transform: translateY(-10px); box-shadow: var(--shadow-premium); } .card img { width: 100%; height: 280px; object-fit: cover; transition: var(--transition-smooth); } .card:hover img { transform: scale(1.03); } .card .p { padding: 30px; } .card h3 { font-size: 1.5rem; margin-bottom: 15px; color: var(--dark-charcoal); } .card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 25px; } /* Luxury Interactive Buttons Layout */ .btn { display: inline-block; padding: 14px 30px; background-color: var(--primary-gold); color: var(--pure-white) !important; text-decoration: none; text-transform: uppercase; font-size: 0.8rem; font-weight: 600; letter-spacing: 2px; border-radius: 2px; border: 1px solid var(--primary-gold); transition: var(--transition-smooth); cursor: pointer; margin: 5px; } .btn:hover { background-color: transparent; color: var(--primary-gold) !important; box-shadow: 0 5px 15px rgba(197, 168, 128, 0.2); } /* Transparent Variant for Hero Alternative Actions */ .hero .btn:last-of-type { background-color: transparent; border-color: var(--pure-white); } .hero .btn:last-of-type:hover { background-color: var(--pure-white); color: var(--dark-charcoal) !important; } /* ========================================================================== 6. PREMIUM CONVERSION FORMS ========================================================================== */ .form-box { max-width: 650px; margin: 0 auto; background: var(--pure-white); padding: 50px; border-radius: 4px; box-shadow: var(--shadow-premium); border: 1px solid rgba(197, 168, 128, 0.15); } .form-box form { display: flex; flex-direction: column; gap: 20px; } .form-box input, .form-box select, .form-box textarea { width: 100%; padding: 15px; border: 1px solid #e0dbd5; background-color: #fcfbfa; font-family: var(--font-sans); font-size: 0.95rem; color: var(--dark-charcoal); border-radius: 2px; transition: var(--transition-smooth); } .form-box input:focus, .form-box select:focus, .form-box textarea:focus { outline: none; border-color: var(--primary-gold); background-color: var(--pure-white); box-shadow: 0 0 8px rgba(197, 168, 128, 0.2); } .form-box button.btn { width: 100%; margin: 10px 0 0 0; background-color: var(--dark-charcoal); border-color: var(--dark-charcoal); } .form-box button.btn:hover { background-color: var(--primary-gold); border-color: var(--primary-gold); color: var(--pure-white) !important; } /* ========================================================================== 7. FOOTER & FIXED SIDE STICKY FLOATS ========================================================================== */ .footer { background-color: var(--dark-charcoal); color: var(--pure-white); text-align: center; padding: 40px 20px; font-size: 0.9rem; letter-spacing: 1px; border-top: 3px solid var(--primary-gold); } /* Floating Action Stack (Clean, aligned down the lower right boundary) */ .insta-btn, .fb-btn, .wa, .call-btn { position: fixed; right: 25px; width: 50px; height: 50px; border-radius: 50%; color: var(--pure-white); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 999; transition: var(--transition-smooth); text-decoration: none; } .insta-btn:hover, .fb-btn:hover, .wa:hover, .call-btn:hover { transform: scale(1.1) rotate(5deg); } /* Micro positioning variables preventing visual layout stacking overlap */ .call-btn { bottom: 30px; background-color: #1072b8; } .wa { bottom: 95px; background-color: #25d366; } .fb-btn { bottom: 160px; background-color: #3b5998; } .insta-btn { bottom: 225px; background-color: #e1306c; } /* ========================================================================== 8. RESPONSIVE BREAKPOINTS ========================================================================== */ @media (max-width: 992px) { html { font-size: 15px; } .hero h1 { font-size: 2.8rem; } .section { padding: 70px 20px; } } @media (max-width: 768px) { .menu-toggle { display: block; /* Shows toggle bars on phone layouts */ } .nav-menu { position: absolute; top: 100%; left: 0; width: 100%; background: var(--pure-white); flex-direction: column; gap: 0; box-shadow: 0 10px 20px rgba(0,0,0,0.05); max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } /* Target via your toggle javascript handler */ .nav-menu.show { max-height: 400px; } .nav-menu li { width: 100%; text-align: center; } .nav-menu a { display: block; padding: 15px 0; border-bottom: 1px solid #f2eee9; } .grid { grid-template-columns: 1fr; } .form-box { padding: 30px 20px; } } .about-container { display: flex; align-items: center; gap: 50px; max-width: 1200px; margin: auto; padding: 40px 20px; } .about-image { flex: 1; height: 550px; overflow: hidden; border-radius: 8px; } .about-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; } .about-content { flex: 1; } .about-content h2 { text-align: left; margin-bottom: 20px; } .about-content p { color: #555; line-height: 1.8; margin-bottom: 15px; } /* Mobile Responsive */ @media (max-width: 768px) { .about-container { flex-direction: column; } .about-image { width: 100%; height: 350px; } .about-content h2 { text-align: center; } } .facilities-section { text-align: center; } .section-subtitle { max-width: 600px; margin: 0 auto 40px; color: #666; line-height: 1.7; } .facilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; margin-top: 30px; } .facility-card { background: #fff; padding: 35px 25px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); transition: 0.3s ease; } .facility-card:hover { transform: translateY(-8px); } .facility-card i { font-size: 2.4rem; color: #c5a880; margin-bottom: 15px; } .facility-card h3 { font-family: 'Playfair Display', serif; margin-bottom: 10px; font-size: 1.2rem; } .facility-card p { color: #666; font-size: 0.95rem; line-height: 1.6; }