/* --- CSS VARIABLES & RESET --- */
        :root {
            --primary-color: #2C3E50;
            --accent-color: #D35400;
            --gold: #C5A059;
            --light-bg: #F9F7F2;
            --white: #ffffff;
            --text-color: #444444;
            --font-heading: 'Playfair Display', serif;
            --font-body: 'Lato', sans-serif;
            --transition: all 0.3s ease;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: var(--font-body); color: var(--text-color); background-color: var(--light-bg); line-height: 1.6; overflow-x: hidden; }
        a { text-decoration: none; color: inherit; transition: var(--transition); }
        ul { list-style: none; }
        img { max-width: 100%; display: block; }

        /* --- UTILITIES --- */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .section-padding { padding: 80px 0; }
        .text-center { text-align: center; }
        
        h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--primary-color); }
        
        .section-title { margin-bottom: 50px; text-align: center; }
        .section-title h2 { font-size: 2.5rem; margin-bottom: 15px; position: relative; display: inline-block; }
        .section-title h2::after { content: ''; display: block; width: 60px; height: 3px; background: var(--accent-color); margin: 10px auto 0; }
        .section-title p { color: #777; font-size: 1.1rem; }

        /* --- BUTTONS --- */
        .btn { display: inline-block; padding: 12px 30px; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; cursor: pointer; border: none; }
        .btn-primary { background-color: var(--primary-color); color: var(--white); }
        .btn-primary:hover { background-color: var(--accent-color); }
        .btn-outline { border: 2px solid var(--white); color: var(--white); background: transparent; }
        .btn-outline:hover { background: var(--white); color: var(--primary-color); }

        /* --- HEADER & NAV --- */
        header { 
            position: absolute; 
            top: 0; left: 0; width: 100%; 
            z-index: 1000; 
            padding: 20px 0; 
            transition: var(--transition); 
        }
        header.scrolled { 
            background: rgb(149 148 148 / 98%); 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
            padding: 15px 0; 
            position: fixed; 
        }
        
        /* LOGO FIXING */
        .nav-container { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            position: relative; 
            z-index: 1002; /* Ensure logo and nav are above snow */
        }
        
        /* Logo Container */
        .logo { 
            display: flex; 
            align-items: center; 
            justify-content: center;
            flex-shrink: 0; /* Prevent layout shift */
        }
        /* Logo Image Styling */
        .logo img {
            height: 50px; 
            width: auto; 
            object-fit: contain;
            /* IMPORTANT: Force image to stay visible on scroll */
            opacity: 1; 
            transition: opacity 0.3s ease;
        }
      
        
        /* Specific style for scrolled state if needed (optional, but safe to have) */
        header.scrolled .logo img {
            /* If your image is transparent, you might need to invert or change it here */
            /* filter: brightness(0.9); */
        }
        
        .nav-links { display: flex; gap: 30px; align-items: center; }
        .nav-links a { color: var(--white); font-weight: 500; font-size: 0.95rem; }
        header.scrolled .nav-links a { color: #fff; }
        
        /* Nav Button Styling */
        .nav-btn {
            background: var(--accent-color);
            color: #fff !important;
            padding: 10px 20px;
            border-radius: 50px;
            font-weight: 700;
            transition: 0.3s;
            flex-shrink: 0;
        }
        .nav-btn:hover {
            background: var(--gold);
            transform: translateY(-2px);
        }

        .mobile-toggle { display: none; color: var(--white); font-size: 1.5rem; cursor: pointer; z-index: 1003; }
        header.scrolled .mobile-toggle { color: var(--primary-color); }

        /* --- HEADER SNOW ANIMATION --- */
        .header-snow {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; 
            z-index: 1; /* Behind nav */
            overflow: hidden;
        }
        .header-flake {
            position: absolute;
            top: -20px;
            background: rgba(255,255,255,0.6);
            border-radius: 50%;
            animation: headerFall linear infinite;
        }
        @keyframes headerFall {
            to { transform: translateY(150px); }
        }

        /* --- HERO SECTION --- */
        .hero { 
            height: 100vh; 
            min-height: 500px;
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1626621341517-bbf3d9990a23?q=80&w=2070&auto=format&fit=crop'); 
            background-size: cover; 
            background-position: center center;
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            color: var(--white); 
            text-align: center; 
            padding: 0 20px;
            overflow: hidden;
            position: relative;
        }
        .hero h1 { color: var(--white); font-size: 3.5rem; margin-bottom: 20px; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); line-height: 1.2; }
        .hero p { font-size: 1.2rem; max-width: 600px; margin: 0 auto; }

        .text-align{
            max-width: 84%;
    margin: 0 auto;     
        }

        /* --- HIGHLIGHT MANALI SECTION --- */
        .highlight-section {
            padding: 100px 0;
            background-color: var(--white);
            border-bottom: 1px solid #eee;
        }
        .highlight-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 50px;
        }
        .highlight-card {
            background: var(--white);
            border: 1px solid #f0f0f0;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            gap: 30px;
            overflow: hidden;
            transition: var(--transition);
            height: 300px; /* Fixed height for consistency */
        }
        /* Hover Effect */
        .highlight-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(211, 84, 0, 0.1);
        }
        
        .highlight-img {
            flex-shrink: 0;
        }
        .highlight-img img {
            width: 250px;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }
        
        .highlight-content {
            text-align: left;
            flex-grow: 1;
        }
        .highlight-content h3 {
            font-size: 1.5rem;
            color: var(--accent-color);
            margin-bottom: 10px;
        }
        .highlight-sub {
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--gold);
            font-weight: 700;
            margin-bottom: 10px;
            display: block;
        }
        .highlight-content p {
            color: #666;
            font-size: 1rem;
            line-height: 1.5;
            margin-bottom: 20px;
        }
        .highlight-link {
            margin-top: 15px;
            display: inline-block;
            font-weight: 600;
            color: var(--primary-color);
            text-decoration: none;
        }
        .highlight-link:hover { text-decoration: underline; }

        /* Alternating Layout Logic */
        /* Odd Cards (1, 3): Image Left, Text Right */
        .highlight-card:nth-child(odd) {
            flex-direction: row;
            text-align: left;
        }
        /* Even Cards (2, 4): Text Left, Image Right */
        .highlight-card:nth-child(even) {
            flex-direction: row-reverse;
            text-align: right;
        }

        /* Mobile Responsive for Highlight */
        @media (max-width: 768px) {
            .highlight-grid { grid-template-columns: 1fr; }
            .highlight-card {
                flex-direction: column !important; /* Stack everything */
                text-align: center; /* Center text on mobile */
                height: auto; /* Allow content to dictate height */
                gap: 20px;
            }
            .highlight-img img {
                width: 100%;
                height: 200px;
                margin-bottom: 20px;
            }
            .highlight-content {
                text-align: center;
            }
        }

 /* --- AMENITIES --- */
        .amenities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
        .amenity-item { background: var(--white); padding: 30px; text-align: center; border-radius: 8px; transition: 0.3s; box-shadow: var(--shadow-sm); }
        .amenity-item:hover { transform: translateY(-5px); border-bottom: 3px solid var(--primary-color); }
        .amenity-item i { font-size: 2rem; color: #D35400; margin-bottom: 15px; }
        .amenity-item h4 { margin-bottom: 10px; font-size: 1.1rem; }
        /* --- AMENITIES SECTION --- */
        .amenities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; }
        .amenity-card { text-align: center; padding: 30px; background: var(--white); border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: var(--transition); }
        .amenity-card:hover { transform: translateY(-5px); border-bottom: 3px solid var(--accent-color); }
        .amenity-icon { font-size: 2.5rem; color: var(--accent-color); margin-bottom: 20px; }
        .amenity-card h4 { margin-bottom: 10px; font-size: 1.2rem; }
        .amenity-card p { font-size: 0.9rem; color: #666; }

        /* --- ROOMS SECTION --- */
        .rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; }
        .room-card { background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: var(--transition); }
        .room-card:hover { transform: translateY(-10px); }
        .room-img-wrapper { height: 300px; overflow: hidden; position: relative; }
        .room-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
        .room-card:hover .room-img-wrapper img { transform: scale(1.1); }
        .room-price-tag { position: absolute; bottom: 20px; right: 20px; background: var(--accent-color); color: #fff; padding: 10px 20px; border-radius: 4px; font-weight: 700; }
        .room-content { padding: 30px; }
        .room-content h3 { font-size: 1.8rem; margin-bottom: 10px; }
        .room-meta { display: flex; gap: 20px; margin-bottom: 20px; color: #777; font-size: 0.9rem; }
        .room-amenities-list { margin: 20px 0; padding: 15px; background: #f4f4f4; border-radius: 5px; }
        .room-amenities-list h5 { font-size: 0.9rem; text-transform: uppercase; color: var(--primary-color); margin-bottom: 10px; }
        .room-amenities-list ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .room-amenities-list li { font-size: 0.85rem; color: #555; }
        .room-amenities-list li i { color: var(--gold); margin-right: 5px; }

        /* --- GALLERY SECTION --- */
        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
        .gallery-item { height: 250px; overflow: hidden; border-radius: 5px; position: relative; cursor: pointer; }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.4s; }
        .gallery-item:hover img { transform: scale(1.1); filter: brightness(0.8); }

        /* --- REVIEWS SECTION --- */
        .reviews-section { background-color: var(--white); }
        .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
        .review-card { background: var(--light-bg); padding: 30px; border-radius: 10px; position: relative; border: 1px solid #eee; }
        .review-card::before { content: '\f10d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 20px; right: 20px; font-size: 3rem; color: rgba(197, 160, 89, 0.1); }
        .reviewer-info { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
        .reviewer-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
        .stars { color: #f39c12; font-size: 0.9rem; }

        /* --- SNOWFALL SECTION --- */
        .snow-section {
            position: relative;
            color: #fff;
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../img/section.jpg');
            background-size: cover; 
            background-position: center center; 
            min-height: 500px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        .snow-content {
            position: relative;
            z-index: 5; 
            text-align: center;
            padding: 0 20px;
            pointer-events: none;
        }

        .margin-bottom{
            margin-bottom: -58px;
        }
        .snow-content h2 { color: #fff; font-size: 3rem; margin-bottom: 10px; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
        .snow-content p { color: #eee; font-size: 1.2rem; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
        /* Main Snow Animation */
        .snowflake {
            position: absolute;
            top: -20px;
            color: #fff;
            font-family: Arial;
            z-index: 1;
            animation: fall linear infinite;
            opacity: 0.8;
            pointer-events: none;
        }
        /* FIX: Full Image Fall - 120vh ensures it covers full screen height */
        @keyframes fall {
            to { transform: translateY(120vh); }
        }

        /* --- NEARBY ATTRACTIONS --- */
        .nearby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
        .nearby-card { background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: var(--transition); display: flex; flex-direction: column; }
        .nearby-card:hover { transform: translateY(-5px); box-shadow: 0 15px 25px rgba(0,0,0,0.1); }
        .nearby-img { height: 180px; overflow: hidden; }
        .nearby-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.4s; }
        .nearby-card:hover .nearby-img img { transform: scale(1.1); }
        .nearby-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
        .distance { display: inline-block; background: var(--accent-color); color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; margin-bottom: 10px; width: fit-content; }

        /* --- LOCATION SECTION --- */
        .location-wrapper { display: flex; flex-wrap: wrap; gap: 40px; }
        .location-info { flex: 1; min-width: 300px; }
        .location-map { flex: 1; min-width: 300px; height: 450px; background: #ddd; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
        
        /* Transport Card Style */
        .transport-card {
            background: var(--white);
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            gap: 20px;
            transition: var(--transition);
            border: 1px solid #eee;
        }
        .transport-card:hover { transform: translateX(10px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); border-left: 5px solid var(--accent-color); }
        
        .transport-icon { 
            display: inline-flex; 
            justify-content: center; 
            align-items: center; 
            width: 60px; 
            height: 60px; 
            background: var(--primary-color); 
            color: #fff; 
            border-radius: 50%; 
            font-size: 1.5rem; 
            flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(44, 62, 80, 0.2);
        }
        .transport-text h4 { font-size: 1.2rem; margin-bottom: 5px; color: var(--primary-color); }
        .transport-text p { font-size: 0.95rem; color: #666; margin: 0; }

        /* --- FAQ SECTION --- */
        .faq-container { max-width: 800px; margin: 0 auto; }
        .faq-item { background: var(--white); margin-bottom: 15px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); overflow: hidden; }
        .faq-question { padding: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--primary-color); }
        .faq-question i { transition: 0.3s; }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 20px; color: #666; }
        .faq-item.active .faq-answer { padding: 0 20px 20px; max-height: 200px; }
        .faq-item.active .faq-question i { transform: rotate(180deg); }

        /* --- FOOTER --- */
        footer { background: var(--primary-color); color: var(--white); padding: 60px 0 20px; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .footer-col h4 { color: var(--gold); margin-bottom: 20px; }
        .footer-col ul li { margin-bottom: 10px; }
        .footer-col ul li a { color: #ccc; }
        .footer-col ul li a:hover { color: var(--white); padding-left: 5px; }
        .copyright { text-align: center; padding-top: 20px; color: #777; font-size: 0.9rem; }
        .social-icons { display: flex; gap: 15px; }
        .social-icons a { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; background: rgba(255,255,255,0.1); color: #fff; border-radius: 50%; transition: 0.3s; }
        .social-icons a:hover { background: var(--accent-color); transform: translateY(-3px); }
        .social-icons a.whatsapp:hover { background: #25D366; }
        .social-icons a.facebook:hover { background: #1877F2; }
        .social-icons a.instagram:hover { background: #E1306C; }

        /* --- MOBILE RESPONSIVENESS (NAVBAR FIX) --- */
        @media (max-width: 768px) {
            .mobile-toggle { display: block; }
            
            /* Mobile Nav Logic */
            .nav-links {
                display: flex;
                position: absolute;
                top: 70px; /* Matches header padding */
                left: 0;
                width: 100%;
                background: var(--white);
                flex-direction: column;
                text-align: center;
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
                z-index: 1006; /* Sit above header content */
                max-height: 0; 
                opacity: 0;
                overflow: hidden; /* Hide content when closed */
                transform: translateY(-20px); /* Start slightly up */
                transition: all 0.4s ease-in-out;
                padding: 0;
            }

            .nav-links.active {
                max-height: 75vh; /* Safe height */
                opacity: 1;
                transform: translateY(0); /* Slide down to position */
                padding: 30px 0;
            }

            .nav-links a {
                color: var(--primary-color);
                padding: 15px 0;
                display: block;
                width: 100%;
                border-bottom: 1px solid #eee; /* Separators for mobile */
            }
            
            /* Hero Fix for Mobile */
            .hero { height: 70vh; min-height: 400px; }
            .hero h1 { font-size: 2rem; }
            .hero p { font-size: 1rem; }
            
            .rooms-grid { grid-template-columns: 1fr; }
            .transport-card { flex-direction: column; text-align: center; }
            
            /* Logo Fix on Mobile */
            .logo img {
                height: 40px; /* Smaller on mobile */
                margin: 0 auto;
            }
        }

        .dummy-content {
            padding: 50px;
            text-align: center;
        }

        /* 
         * UNIQUE CLASS: zulfiqar_sticky_whatsapp_widget_v1
         * Glow Animation Pulse Effect Included
         */
        
        /* Glow Animation Keyframes */
        @keyframes pulse-green {
            0% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
            }
        }

        .zulfiqar_sticky_whatsapp_widget_v1 {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 9999;
            width: 60px;
            height: 60px;
            background-color: #25D366; /* WhatsApp Green */
            border-radius: 50%;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: transform 0.3s ease, background-color 0.3s ease;
            
            /* Glow Effect Apply Kiya */
            animation: pulse-green 2s infinite;
        }

        /* Hover Effect - Jab mouse le jaaye */
        .zulfiqar_sticky_whatsapp_widget_v1:hover {
            transform: scale(1.1); /* Thoda bada ho jayega */
            background-color: #1ebc57;
        }

        /* Icon Styling */
        .zulfiqar_sticky_whatsapp_widget_v1 svg {
            width: 36px; 
            height: 36px;
            fill: #ffffff; /* White Icon */
        }