{"id":156,"date":"2026-04-18T09:03:18","date_gmt":"2026-04-18T09:03:18","guid":{"rendered":"https:\/\/demo.adnl.co.in\/?page_id=156"},"modified":"2026-04-18T10:29:40","modified_gmt":"2026-04-18T10:29:40","slug":"gallery","status":"publish","type":"page","link":"https:\/\/demo.adnl.co.in\/index.php\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"156\" class=\"elementor elementor-156\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9e5b02f e-flex e-con-boxed e-con e-parent\" data-id=\"9e5b02f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-05fc0fe e-con-full e-flex e-con e-child\" data-id=\"05fc0fe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b476794 elementor-widget elementor-widget-html\" data-id=\"b476794\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Visual Gallery | Rupam Bagh - Luxury Heritage Resort<\/title>\r\n    \r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    \r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n    <style>\r\n        \/* --- CSS VARIABLES & RESET --- *\/\r\n        :root {\r\n            --primary-navy: #040c3d;\r\n            --accent-gold: #c5a059;\r\n            --text-dark: #1a1a1a;\r\n            --text-gray: #666;\r\n            --white: #ffffff;\r\n            --bg-light: #fdfcf9;\r\n            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        * {\r\n            margin: 0; padding: 0; box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: 'Poppins', sans-serif;\r\n            color: var(--text-dark);\r\n            background-color: var(--white);\r\n            line-height: 1.6;\r\n        }\r\n\r\n        .container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 20px;\r\n        }\r\n\r\n        img {\r\n            max-width: 100%; display: block;\r\n        }\r\n\r\n        \/* --- GLOBAL PREMIUM BADGE --- *\/\r\n        .rupam-badge {\r\n            display: inline-block;\r\n            color: var(--accent-gold);\r\n            text-transform: uppercase;\r\n            letter-spacing: 4px;\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        \/* =========================================\r\n           1. STUNNING HERO BANNER\r\n           ========================================= *\/\r\n        .gallery-hero {\r\n            height: 70vh; \/* Cover 70% of screen height *\/\r\n            background-image: linear-gradient(rgba(4, 12, 61, 0.5), rgba(4, 12, 61, 0.7)), \r\n                              url('https:\/\/images.unsplash.com\/photo-1582719478250-c89cae4dc85b?q=80&w=1920');\r\n            background-size: cover;\r\n            background-position: center;\r\n            background-attachment: fixed; \/* Parallax Effect *\/\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            text-align: center;\r\n            color: var(--white);\r\n            position: relative;\r\n        }\r\n\r\n        .hero-hero-content h1 {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: 60px;\r\n            line-height: 1.2;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .hero-hero-content h1 span {\r\n            color: var(--accent-gold);\r\n            font-style: italic;\r\n        }\r\n\r\n        .hero-hero-content p {\r\n            font-size: 18px;\r\n            font-weight: 300;\r\n            letter-spacing: 1px;\r\n            text-transform: uppercase;\r\n        }\r\n\r\n        \/* Decor shape divider at bottom of hero *\/\r\n        .hero-divider {\r\n            position: absolute;\r\n            bottom: 0; left: 0; width: 100%;\r\n            height: 50px;\r\n            background: var(--white);\r\n            clip-path: polygon(50% 100%, 100% 0, 100% 100%, 0% 100%, 0 0);\r\n        }\r\n\r\n        \/* =========================================\r\n           2. PREMIUM GALLERY GRID\r\n           ========================================= *\/\r\n        .gallery-section {\r\n            padding: 100px 0;\r\n            background-color: var(--white);\r\n        }\r\n\r\n        .gallery-header {\r\n            text-align: center;\r\n            max-width: 600px;\r\n            margin: 0 auto 80px;\r\n        }\r\n\r\n        .gallery-header h2 {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: 48px;\r\n            color: var(--primary-navy);\r\n        }\r\n\r\n        \/* Grid Setup *\/\r\n        .gallery-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\r\n            gap: 25px;\r\n        }\r\n\r\n        \/* Gallery Item *\/\r\n        .gallery-item {\r\n            position: relative;\r\n            height: 320px;\r\n            overflow: hidden;\r\n            border-radius: 12px;\r\n            cursor: pointer;\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.05);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .gallery-item:hover {\r\n            transform: translateY(-8px);\r\n            box-shadow: 0 20px 40px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .gallery-item img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n        }\r\n\r\n        .gallery-item:hover img {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        \/* Hover Overlay with Glassmorphism *\/\r\n        .item-overlay {\r\n            position: absolute;\r\n            top: 0; left: 0; width: 100%; height: 100%;\r\n            background: linear-gradient(rgba(4, 12, 61, 0.2), rgba(4, 12, 61, 0.9));\r\n            display: flex;\r\n            align-items: flex-end;\r\n            padding: 30px;\r\n            opacity: 0;\r\n            transition: var(--transition);\r\n            z-index: 2;\r\n        }\r\n\r\n        .gallery-item:hover .item-overlay {\r\n            opacity: 1;\r\n        }\r\n\r\n        .overlay-content {\r\n            color: var(--white);\r\n            transform: translateY(20px);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .gallery-item:hover .overlay-content {\r\n            transform: translateY(0);\r\n        }\r\n\r\n        .item-category {\r\n            font-size: 11px;\r\n            color: var(--accent-gold);\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            font-weight: 600;\r\n            display: block;\r\n            margin-bottom: 5px;\r\n        }\r\n\r\n        .item-title {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: 20px;\r\n            font-weight: 700;\r\n            letter-spacing: 1px;\r\n        }\r\n\r\n        .zoom-icon {\r\n            position: absolute;\r\n            top: 30px;\r\n            right: 30px;\r\n            width: 45px;\r\n            height: 45px;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(5px);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: var(--white);\r\n            font-size: 18px;\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .gallery-item:hover .zoom-icon {\r\n            background: var(--accent-gold);\r\n            color: var(--primary-navy);\r\n            transform: rotate(360deg);\r\n        }\r\n\r\n        \/* =========================================\r\n           RESPONSIVE LOGIC\r\n           ========================================= *\/\r\n        @media (max-width: 992px) {\r\n            .hero-hero-content h1 {\r\n                font-size: 45px;\r\n            }\r\n\r\n            .gallery-header h2 {\r\n                font-size: 38px;\r\n            }\r\n\r\n            .gallery-grid {\r\n                grid-template-columns: 1fr 1fr;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            .gallery-hero { height: 60vh; }\r\n            .hero-hero-content h1 { font-size: 32px; }\r\n            .gallery-header h2 { font-size: 30px; }\r\n            .gallery-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            .gallery-item {\r\n                height: 280px;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <section class=\"gallery-hero\">\r\n        <div class=\"hero-hero-content\">\r\n            <p>Rupam Bagh Bergen<\/p>\r\n            <h1>Our Visual <span>Journey<\/span><\/h1>\r\n        <\/div>\r\n        <div class=\"hero-divider\"><\/div>\r\n    <\/section>\r\n\r\n    <section class=\"gallery-section\">\r\n        <div class=\"container\">\r\n            \r\n            <div class=\"gallery-header\">\r\n                <span class=\"rupam-badge\">Glimpses of Luxury<\/span>\r\n                <h2>Explore Rupam Bagh<\/h2>\r\n            <\/div>\r\n\r\n            <div class=\"gallery-grid\">\r\n                \r\n                <div class=\"gallery-item\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1542314831-068cd1dbfeeb?q=80&w=800\" alt=\"Resort Exterior\">\r\n                    <div class=\"item-overlay\">\r\n                        <div class=\"overlay-content\">\r\n                            <span class=\"item-category\">Architecture<\/span>\r\n                            <p class=\"item-title\">Resort Exterior View<\/p>\r\n                        <\/div>\r\n                        <div class=\"zoom-icon\"><i class=\"fas fa-search-plus\"><\/i><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"gallery-item\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1582719478250-c89cae4dc85b?q=80&w=800\" alt=\"Superior King Room\">\r\n                    <div class=\"item-overlay\">\r\n                        <div class=\"overlay-content\">\r\n                            <span class=\"item-category\">Accommodation<\/span>\r\n                            <p class=\"item-title\">Superior King Room<\/p>\r\n                        <\/div>\r\n                        <div class=\"zoom-icon\"><i class=\"fas fa-search-plus\"><\/i><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"gallery-item\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1590490360182-c33d57733427?q=80&w=800\" alt=\"Dining Area\">\r\n                    <div class=\"item-overlay\">\r\n                        <div class=\"overlay-content\">\r\n                            <span class=\"item-category\">Dining<\/span>\r\n                            <p class=\"item-title\">The Royal Kitchen<\/p>\r\n                        <\/div>\r\n                        <div class=\"zoom-icon\"><i class=\"fas fa-search-plus\"><\/i><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"gallery-item\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1571896349842-33c89424de2d?q=80&w=800\" alt=\"Infinity Pool\">\r\n                    <div class=\"item-overlay\">\r\n                        <div class=\"overlay-content\">\r\n                            <span class=\"item-category\">Facilities<\/span>\r\n                            <p class=\"item-title\">Infinity Poolside<\/p>\r\n                        <\/div>\r\n                        <div class=\"zoom-icon\"><i class=\"fas fa-search-plus\"><\/i><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"gallery-item\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1566665797739-1674de7a421a?q=80&w=800\" alt=\"Aesthetic Lobby\">\r\n                    <div class=\"item-overlay\">\r\n                        <div class=\"overlay-content\">\r\n                            <span class=\"item-category\">Ambiance<\/span>\r\n                            <p class=\"item-title\">Aesthetic Resort Lobby<\/p>\r\n                        <\/div>\r\n                        <div class=\"zoom-icon\"><i class=\"fas fa-search-plus\"><\/i><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"gallery-item\">\r\n                    <img decoding=\"async\" src=\"https:\/\/demo.adnl.co.in\/wp-content\/uploads\/2026\/04\/atr.royalmansion-bedroom2-mr.jpg\" alt=\"Spa & Wellness\">\r\n                    <div class=\"item-overlay\">\r\n                        <div class=\"overlay-content\">\r\n                            <span class=\"item-category\">Wellness<\/span>\r\n                            <p class=\"item-title\">Spa Treatment Room<\/p>\r\n                        <\/div>\r\n                        <div class=\"zoom-icon\"><i class=\"fas fa-search-plus\"><\/i><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Visual Gallery | Rupam Bagh &#8211; Luxury Heritage Resort Rupam Bagh Bergen Our Visual Journey Glimpses of Luxury Explore Rupam Bagh Architecture Resort Exterior View Accommodation Superior King Room Dining The Royal Kitchen Facilities Infinity Poolside Ambiance Aesthetic Resort Lobby Wellness Spa Treatment Room<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-156","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.adnl.co.in\/index.php\/wp-json\/wp\/v2\/pages\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.adnl.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.adnl.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.adnl.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.adnl.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":8,"href":"https:\/\/demo.adnl.co.in\/index.php\/wp-json\/wp\/v2\/pages\/156\/revisions"}],"predecessor-version":[{"id":260,"href":"https:\/\/demo.adnl.co.in\/index.php\/wp-json\/wp\/v2\/pages\/156\/revisions\/260"}],"wp:attachment":[{"href":"https:\/\/demo.adnl.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}