{"id":779,"date":"2025-02-25T17:20:18","date_gmt":"2025-02-25T17:20:18","guid":{"rendered":"https:\/\/demo.colorbee.online\/dhaara\/demo\/?post_type=project&amp;p=779"},"modified":"2025-02-25T17:20:18","modified_gmt":"2025-02-25T17:20:18","slug":"harmony-heights","status":"publish","type":"project","link":"https:\/\/demo.colorbee.online\/dhaara\/demo\/projects\/harmony-heights\/","title":{"rendered":"Harmony Heights"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"779\" class=\"elementor elementor-779\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e815cf6 e-grid e-con-full e-con e-parent\" data-id=\"3e815cf6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-619eeb18 elementor-widget elementor-widget-project_details\" data-id=\"619eeb18\" data-element_type=\"widget\" data-widget_type=\"project_details.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <section class=\"project-details-box relative py-16 sm:py-20 lg:py-20 overflow-hidden\">\r\n            <!-- Background Elements -->\r\n            <div class=\"absolute inset-0 -z-10\">\r\n                <!-- Gradient Orbs -->\r\n                <div class=\"absolute top-0 left-0 w-full h-full overflow-hidden\">\r\n                    <div style=\"background-color: #FFB60020\" class=\"bg-fade-effect absolute top-1\/4 -left-20 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl\"><\/div>\r\n                    <div style=\"background-color: #FFB60020\" class=\"absolute bottom-1\/4 right-0 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animation-delay-2000\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"max-w-7xl 2xl:max-w-8xl mx-auto px-4\">\r\n                <!-- Section Header -->\r\n                <div class=\"relative mb-12 sm:mb-16 text-center z-10\">\r\n                    <div class=\"absolute -top-10 left-1\/2  -translate-x-1\/2  text-[80px] sm:text-[120px] font-bold text-gray-100 select-none opacity-0 md:opacity-60 leading-none -z-10\">\r\n                        PROJECTS                    <\/div>\r\n                    <h2 class=\"relative text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 fade-in-effect\">\r\n                        Project                        <span style=\"color: #FFB600\">Details<\/span>\r\n                    <\/h2>\r\n                    <p class=\"mt-4 text-xl text-gray-600 max-w-2xl mx-auto fade-in-effect effect-1\">\r\n                        A comprehensive overview of the Coastal Heights development, highlighting its key features, amenities, and sustainable design elements.                    <\/p>\r\n                <\/div>\r\n\r\n                <!-- Details Grid -->\r\n                <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 fade-in-effect effect-2\">\r\n                                                <div class=\"bg-white p-8 rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300\">\r\n                                <!-- Section Icon -->\r\n                                <div style=\"background-color: #FFB60020\" class=\"w-12 h-12 rounded-xl flex items-center justify-center mb-6\">\r\n                                    <i class=\"fas fa-star w-6 h-6 flex items-center justify-center\" style=\"color: #FFB600;\"><\/i>                                <\/div>\r\n                                <!-- Section Heading -->\r\n                                <h3 class=\"text-xl font-semibold text-gray-900 mb-3\">\r\n                                    Building Features                                <\/h3>\r\n\r\n                                <!-- Section Features -->\r\n                                <div class=\"space-y-3 text-gray-600 features-list\">\r\n                                    <ul>\n                            <li>45-story luxury towers<\/li>\n                            <li>Floor-to-ceiling windows<\/li>\n                            <li>360\u00b0 ocean views<\/li>\n                            <li>Private balconies<\/li>\n                        <\/ul>                                <\/div>\r\n                            <\/div>\r\n                                                <div class=\"bg-white p-8 rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300\">\r\n                                <!-- Section Icon -->\r\n                                <div style=\"background-color: #FFB60020\" class=\"w-12 h-12 rounded-xl flex items-center justify-center mb-6\">\r\n                                    <i class=\"fas fa-star w-6 h-6 flex items-center justify-center\" style=\"color: #FFB600;\"><\/i>                                <\/div>\r\n                                <!-- Section Heading -->\r\n                                <h3 class=\"text-xl font-semibold text-gray-900 mb-3\">\r\n                                    Luxury Amenities                                <\/h3>\r\n\r\n                                <!-- Section Features -->\r\n                                <div class=\"space-y-3 text-gray-600 features-list\">\r\n                                    <ul>\n                            <li>Infinity pool &amp; spa<\/li>\n                            <li>State-of-the-art fitness center<\/li>\n                            <li>Private cinema<\/li>\n                            <li>Sky lounge &amp; restaurant<\/li>\n                        <\/ul>                                <\/div>\r\n                            <\/div>\r\n                                                <div class=\"bg-white p-8 rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300\">\r\n                                <!-- Section Icon -->\r\n                                <div style=\"background-color: #FFB60020\" class=\"w-12 h-12 rounded-xl flex items-center justify-center mb-6\">\r\n                                    <i class=\"fas fa-star w-6 h-6 flex items-center justify-center\" style=\"color: #FFB600;\"><\/i>                                <\/div>\r\n                                <!-- Section Heading -->\r\n                                <h3 class=\"text-xl font-semibold text-gray-900 mb-3\">\r\n                                    Sustainability                                <\/h3>\r\n\r\n                                <!-- Section Features -->\r\n                                <div class=\"space-y-3 text-gray-600 features-list\">\r\n                                    <ul>\n                            <li>LEED Gold certification<\/li>\n                            <li>Solar energy systems<\/li>\n                            <li>Rainwater harvesting<\/li>\n                            <li>Smart building systems<\/li>\n                        <\/ul>                                <\/div>\r\n                            <\/div>\r\n                                    <\/div>\r\n            <\/div>\r\n        <\/section>\r\n        \r\n    \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f590d45 e-grid e-con-full e-con e-parent\" data-id=\"f590d45\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ea38d82 elementor-widget elementor-widget-project_description\" data-id=\"3ea38d82\" data-element_type=\"widget\" data-widget_type=\"project_description.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <section class=\"project-description relative py-16 sm:py-20 lg:py-20 overflow-hidden\">\r\n            <!-- Background Elements -->\r\n            <div class=\"absolute inset-0 -z-10\">\r\n                <!-- Gradient Orbs -->\r\n                <div class=\"absolute top-0 left-0 w-full h-full overflow-hidden\">\r\n                    <div style=\"background-color: #FFB60020\" class=\"bg-fade-effect absolute top-1\/4 -left-20 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl float\"><\/div>\r\n                    <div style=\"background-color: #FFB60020\" class=\"absolute bottom-1\/4 right-0 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl float\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"max-w-7xl 2xl:max-w-8xl mx-auto px-4\">\r\n                <!-- Section Header -->\r\n                <div class=\"relative mb-12 sm:mb-16 text-center z-10\">\r\n                    <div class=\"absolute -top-10 left-1\/2  -translate-x-1\/2  text-[80px] sm:text-[120px] font-bold text-gray-100 select-none opacity-0 md:opacity-60 leading-none -z-10\">\r\n                        VISION                    <\/div>\r\n                    <h2 class=\"relative text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 fade-in-effect\">\r\n                        Project                        <span style=\"color: #FFB600\">Vision<\/span>\r\n                    <\/h2>\r\n                    <p class=\"mt-4 text-xl text-gray-600 max-w-2xl mx-auto fade-in-effect effect-1\">\r\n                        Exploring the inspiration and philosophy behind Coastal Heights, where innovation meets sustainable living.                    <\/p>\r\n                <\/div>\r\n\r\n                <!-- Content Grid -->\r\n                <div class=\"grid gap-6 sm:gap-8\">\r\n                    <!-- Vision Statement Card -->\r\n                    <div class=\"bg-white rounded-2xl p-8 md:p-12 shadow-xl hover:shadow-2xl transition-shadow duration-300 fade-in-effect effect-1\">\r\n                        <div class=\"flex items-start gap-4\">\r\n                            <div>\r\n                                <h3 class=\"text-2xl font-semibold text-gray-900 my-0\">Architectural Vision<\/h3>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"max-w-none text-gray-600\">\r\n                            <p>The project's distinctive silhouette against the coastal skyline is more than an architectural statement\u2014it's a testament to our commitment to harmonious design. Each curve and contour has been thoughtfully crafted to maximize natural light, optimize views, and create a sense of fluid movement throughout the space.<\/p>\n<p>Drawing inspiration from the ocean's endless horizons, we've incorporated elements that reflect the dynamic interplay of light and shadow, creating living spaces that evolve throughout the day. The use of sustainable materials and smart technologies ensures that this vision of luxury living is achieved while maintaining our commitment to environmental stewardship.<\/p>                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Middle Row -->\r\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8\">\r\n                        <!-- Design Philosophy Card -->\r\n                        <div style=\"background-color: #FFB600\" class=\"rounded-2xl p-8 text-white relative overflow-hidden fade-in-effect effect-1\">\r\n                            <div class=\"absolute top-0 right-0 w-64 h-64 bg-white\/10 rounded-full -translate-x-24 -translate-y-24 blur-3xl\"><\/div>\r\n                            <div class=\"relative\">\r\n                                <h3 class=\"text-2xl font-semibold my-0\">Design Philosophy<\/h3>\r\n                                <p class=\" leading-relaxed\">\r\n                                    Our design philosophy centers on three core principles: human-centric spaces, environmental responsibility, and timeless elegance.                                <\/p>\r\n                                <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 mt-8\">\r\n                                                                                <div class=\"bg-white\/10 rounded-xl p-4\">\r\n                                                <h4 class=\"font-semibold mb-2 text-xl mt-0\">Human-Centric<\/h4>\r\n                                                <p class=\"text-sm mt-0\">Spaces designed around the way people live and interact<\/p>\r\n                                            <\/div>\r\n                                                                                <div class=\"bg-white\/10 rounded-xl p-4\">\r\n                                                <h4 class=\"font-semibold mb-2 text-xl mt-0\">Sustainable<\/h4>\r\n                                                <p class=\"text-sm mt-0\">Environmentally conscious design and materials<\/p>\r\n                                            <\/div>\r\n                                                                    <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Quote Card -->\r\n                        <div class=\"bg-white rounded-2xl p-8 shadow-sm hover:shadow-md fade-in-effect effect-2\">\r\n                            <div class=\"h-full flex flex-col\">\r\n                                <svg style=\"color: #FFB600\" class=\"w-12 h-12 mb-0\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                    <path d=\"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z\" \/>\r\n                                <\/svg>\r\n                                <p class=\"text-gray-600 italic text-lg mb-8 flex-grow\">\r\n                                    Coastal Heights embodies our vision of creating not just buildings, but living ecosystems that enhance the quality of life for our residents while respecting and protecting our environment.                                <\/p>\r\n                                <div class=\"flex items-center gap-4 mt-auto\">\r\n                                    <div style=\"background-color: rgba(255, 255, 102, 0.1)\" class=\"w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center\">\r\n                                        <span style=\"color: #FFB600\" class=\"font-semibold\">\r\n                                            Ja                                        <\/span>\r\n                                    <\/div>\r\n                                    <div>\r\n                                        <div class=\"font-semibold text-gray-900\">James Davidson<\/div>\r\n                                        <div class=\"text-sm text-gray-500\">Lead Architect<\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Bottom Row - Feature Cards -->\r\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 fade-in-effect effect-3\">\r\n                                                        <div class=\"bg-white rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-shadow duration-300 group\">\r\n                                    <div style=\"background-color: rgba(255, 255, 102, 0.1)\" class=\"w-12 h-12 rounded-xl  flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\">\r\n\r\n                                        <i class=\"fas fa-bolt w-6 h-6 flex items-center justify-center\" style=\"color: #FFB600;\"><\/i>                                    <\/div>\r\n                                    <h4 class=\"text-lg font-semibold text-gray-900 mb-2\">Smart Integration<\/h4>\r\n                                    <p class=\"text-gray-600 mt-0\">\r\n                                        Seamlessly incorporating cutting-edge technology to enhance security, efficiency, and resident convenience throughout the development.                                    <\/p>\r\n                                <\/div>\r\n                                                        <div class=\"bg-white rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-shadow duration-300 group\">\r\n                                    <div style=\"background-color: rgba(255, 255, 102, 0.1)\" class=\"w-12 h-12 rounded-xl  flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\">\r\n\r\n                                        <i class=\"fas fa-bolt w-6 h-6 flex items-center justify-center\" style=\"color: #FFB600;\"><\/i>                                    <\/div>\r\n                                    <h4 class=\"text-lg font-semibold text-gray-900 mb-2\">Luxury Living<\/h4>\r\n                                    <p class=\"text-gray-600 mt-0\">\r\n                                        Premium amenities and finishes that define a new standard of coastal luxury living, from private balconies to resort-style facilities.                                    <\/p>\r\n                                <\/div>\r\n                                                        <div class=\"bg-white rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-shadow duration-300 group\">\r\n                                    <div style=\"background-color: rgba(255, 255, 102, 0.1)\" class=\"w-12 h-12 rounded-xl  flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\">\r\n\r\n                                        <i class=\"fas fa-bolt w-6 h-6 flex items-center justify-center\" style=\"color: #FFB600;\"><\/i>                                    <\/div>\r\n                                    <h4 class=\"text-lg font-semibold text-gray-900 mb-2\">Sustainable Design<\/h4>\r\n                                    <p class=\"text-gray-600 mt-0\">\r\n                                        Environmental consciousness meets luxury with energy-efficient systems, sustainable materials, and green spaces throughout.                                    <\/p>\r\n                                <\/div>\r\n                                            <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n    \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-17a53c4 e-grid e-con-full e-con e-parent\" data-id=\"17a53c4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2774945c elementor-widget elementor-widget-gallery_section\" data-id=\"2774945c\" data-element_type=\"widget\" data-widget_type=\"gallery_section.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <section class=\"gallery-section relative py-16 sm:py-20 lg:py-20 overflow-hidden\">\r\n            <!-- Background Elements -->\r\n            <div class=\"absolute inset-0 -z-10\">\r\n                <!-- Gradient Orbs -->\r\n                <div class=\"absolute top-0 left-0 w-full h-full overflow-hidden\">\r\n                    <div style=\"background-color: #FFB60020\" class=\"bg-fade-effect absolute top-1\/4 -left-20 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl\"><\/div>\r\n                    <div style=\"background-color: #FFB60020\" class=\"absolute bottom-1\/4 right-0 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animation-delay-2000\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"max-w-7xl 2xl:max-w-8xl mx-auto px-4\">\r\n                <!-- Section Header -->\r\n                <!-- Section Header -->\r\n                <div class=\"relative mb-12 sm:mb-16 text-center z-10\">\r\n                    <div class=\"absolute -top-10 left-1\/2  -translate-x-1\/2  text-[80px] sm:text-[120px] font-bold text-gray-100 select-none opacity-0 md:opacity-60 leading-none -z-10\">\r\n                        GALLERY                    <\/div>\r\n                    <h2 class=\"relative text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 fade-in-effect \">\r\n                        Project                        <span style=\"color: #FFB600\">Gallery<\/span>\r\n                    <\/h2>\r\n                    <p class=\"mt-4 text-xl text-gray-600 max-w-2xl mx-auto fade-in-effect effect-1\">\r\n                        Explore our collection of stunning architectural photographs showcasing the beauty and innovation of our projects.                    <\/p>\r\n                <\/div>\r\n                <!-- Filter Tabs -->\r\n                <div class=\"filter-buttons flex flex-wrap justify-center gap-6 sm:gap-8 mb-12 fade-in-effect effect-1\" id=\"filterButtons\">\r\n                                            <button style=\"--active-color: #FFB600;\" data-category=\"all\" class=\"filter-btn px-6 py-3 rounded-xl bg-white border border-gray-200 text-gray-600 font-medium hover:border-primary-amber transition-colors active-tab\">\r\n                            All Photos                        <\/button>\r\n                                            <button style=\"--active-color: #FFB600;\" data-category=\"exterior\" class=\"filter-btn px-6 py-3 rounded-xl bg-white border border-gray-200 text-gray-600 font-medium hover:border-primary-amber transition-colors \">\r\n                            Exterior                        <\/button>\r\n                                            <button style=\"--active-color: #FFB600;\" data-category=\"interior\" class=\"filter-btn px-6 py-3 rounded-xl bg-white border border-gray-200 text-gray-600 font-medium hover:border-primary-amber transition-colors \">\r\n                            Interior                        <\/button>\r\n                                            <button style=\"--active-color: #FFB600;\" data-category=\"amenities\" class=\"filter-btn px-6 py-3 rounded-xl bg-white border border-gray-200 text-gray-600 font-medium hover:border-primary-amber transition-colors \">\r\n                            Amenities                        <\/button>\r\n                                            <button style=\"--active-color: #FFB600;\" data-category=\"construction\" class=\"filter-btn px-6 py-3 rounded-xl bg-white border border-gray-200 text-gray-600 font-medium hover:border-primary-amber transition-colors \">\r\n                            Construction                        <\/button>\r\n                                    <\/div>\r\n\r\n\r\n                <!-- Gallery Grid -->\r\n                <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 fade-in-effect effect-2\" id=\"galleryGrid\">\r\n                                            <div class=\"group relative\" data-category=\"exterior\">\r\n                            <div class=\"relative bg-white\/80 backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500\">\r\n                                <!-- Image -->\r\n                                <div class=\"relative aspect-[4\/3] overflow-hidden\">\r\n                                    <img fetchpriority=\"high\" width=\"1200\" height=\"675\" src=\"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/c-dustin-91AQt9p4Mo8-unsplash-1.jpg\" class=\"w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700\" alt=\"\" fetchpriority=\"high\" decoding=\"async\" srcset=\"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/c-dustin-91AQt9p4Mo8-unsplash-1.jpg 1200w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/c-dustin-91AQt9p4Mo8-unsplash-1-300x169.jpg 300w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/c-dustin-91AQt9p4Mo8-unsplash-1-1024x576.jpg 1024w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/c-dustin-91AQt9p4Mo8-unsplash-1-768x432.jpg 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/>\r\n                                    <!-- Permanent gradient for title only -->\r\n                                    <div class=\"absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-black\/90 to-transparent\"><\/div>\r\n\r\n                                    <!-- Hover gradient -->\r\n                                    <div class=\"absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black\/60 opacity-0 group-hover:opacity-100 transition-opacity duration-500\"><\/div>\r\n\r\n                                    <!-- Category Badge -->\r\n                                    <div class=\"absolute top-4 right-4 backdrop-blur-md bg-white\/10 border border-white\/20 rounded-full pl-2 pr-3 py-1 flex items-center gap-2\">\r\n                                        <span class=\"w-2 h-2 rounded-full\" style=\"background-color: #C22C59\"><\/span>\r\n                                        <span class=\"text-white text-sm font-medium\">exterior<\/span>\r\n                                    <\/div>\r\n\r\n                                    <!-- Title always visible, description on hover -->\r\n                                    <div class=\"absolute inset-x-0 bottom-0 p-6 translate-y-10 group-hover:translate-y-0 transition-transform duration-500\">\r\n                                        <div class=\"space-y-3 text-white\">\r\n                                            <h3 class=\"text-base font-semibold line-clamp-1\">Urban Skyline in Progress<\/h3>\r\n                                            <p class=\"text-sm text-white\/90 opacity-0 group-hover:opacity-100 transition-opacity duration-500 line-clamp-2\">A vibrant cityscape captures the dynamic essence of urban development with multiple high-rise buildings under construction.<\/p>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                                            <div class=\"group relative\" data-category=\"exterior\">\r\n                            <div class=\"relative bg-white\/80 backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500\">\r\n                                <!-- Image -->\r\n                                <div class=\"relative aspect-[4\/3] overflow-hidden\">\r\n                                    <img fetchpriority=\"high\" width=\"1200\" height=\"820\" src=\"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/anthony-fomin-K3e0hl0ytsU-unsplash-1.jpg\" class=\"w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700\" alt=\"\" fetchpriority=\"high\" decoding=\"async\" srcset=\"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/anthony-fomin-K3e0hl0ytsU-unsplash-1.jpg 1200w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/anthony-fomin-K3e0hl0ytsU-unsplash-1-300x205.jpg 300w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/anthony-fomin-K3e0hl0ytsU-unsplash-1-1024x700.jpg 1024w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/anthony-fomin-K3e0hl0ytsU-unsplash-1-768x525.jpg 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/>\r\n                                    <!-- Permanent gradient for title only -->\r\n                                    <div class=\"absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-black\/90 to-transparent\"><\/div>\r\n\r\n                                    <!-- Hover gradient -->\r\n                                    <div class=\"absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black\/60 opacity-0 group-hover:opacity-100 transition-opacity duration-500\"><\/div>\r\n\r\n                                    <!-- Category Badge -->\r\n                                    <div class=\"absolute top-4 right-4 backdrop-blur-md bg-white\/10 border border-white\/20 rounded-full pl-2 pr-3 py-1 flex items-center gap-2\">\r\n                                        <span class=\"w-2 h-2 rounded-full\" style=\"background-color: #C22C59\"><\/span>\r\n                                        <span class=\"text-white text-sm font-medium\">exterior<\/span>\r\n                                    <\/div>\r\n\r\n                                    <!-- Title always visible, description on hover -->\r\n                                    <div class=\"absolute inset-x-0 bottom-0 p-6 translate-y-10 group-hover:translate-y-0 transition-transform duration-500\">\r\n                                        <div class=\"space-y-3 text-white\">\r\n                                            <h3 class=\"text-base font-semibold line-clamp-1\">Concert Hall \u2013 A Modern Architectural Marvel<\/h3>\r\n                                            <p class=\"text-sm text-white\/90 opacity-0 group-hover:opacity-100 transition-opacity duration-500 line-clamp-2\">A large billboard featuring a promotional image for the LA Philharmonic adds a cultural touch.<\/p>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                                            <div class=\"group relative\" data-category=\"interior\">\r\n                            <div class=\"relative bg-white\/80 backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500\">\r\n                                <!-- Image -->\r\n                                <div class=\"relative aspect-[4\/3] overflow-hidden\">\r\n                                    <img fetchpriority=\"high\" width=\"1920\" height=\"1281\" src=\"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/jarek-ceborski-jn7uVeCdf6U-unsplash-1.jpg\" class=\"w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700\" alt=\"\" fetchpriority=\"high\" decoding=\"async\" srcset=\"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/jarek-ceborski-jn7uVeCdf6U-unsplash-1.jpg 1920w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/jarek-ceborski-jn7uVeCdf6U-unsplash-1-300x200.jpg 300w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/jarek-ceborski-jn7uVeCdf6U-unsplash-1-1024x683.jpg 1024w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/jarek-ceborski-jn7uVeCdf6U-unsplash-1-768x512.jpg 768w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/jarek-ceborski-jn7uVeCdf6U-unsplash-1-1536x1025.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\r\n                                    <!-- Permanent gradient for title only -->\r\n                                    <div class=\"absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-black\/90 to-transparent\"><\/div>\r\n\r\n                                    <!-- Hover gradient -->\r\n                                    <div class=\"absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black\/60 opacity-0 group-hover:opacity-100 transition-opacity duration-500\"><\/div>\r\n\r\n                                    <!-- Category Badge -->\r\n                                    <div class=\"absolute top-4 right-4 backdrop-blur-md bg-white\/10 border border-white\/20 rounded-full pl-2 pr-3 py-1 flex items-center gap-2\">\r\n                                        <span class=\"w-2 h-2 rounded-full\" style=\"background-color: #60A5FA\"><\/span>\r\n                                        <span class=\"text-white text-sm font-medium\">interior<\/span>\r\n                                    <\/div>\r\n\r\n                                    <!-- Title always visible, description on hover -->\r\n                                    <div class=\"absolute inset-x-0 bottom-0 p-6 translate-y-10 group-hover:translate-y-0 transition-transform duration-500\">\r\n                                        <div class=\"space-y-3 text-white\">\r\n                                            <h3 class=\"text-base font-semibold line-clamp-1\">Cozy Modern Living Room with Scandinavian Flair<\/h3>\r\n                                            <p class=\"text-sm text-white\/90 opacity-0 group-hover:opacity-100 transition-opacity duration-500 line-clamp-2\">This bright and inviting living room features a minimalist Scandinavian design with clean lines and natural tones.<\/p>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                                            <div class=\"group relative\" data-category=\"amenities\">\r\n                            <div class=\"relative bg-white\/80 backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500\">\r\n                                <!-- Image -->\r\n                                <div class=\"relative aspect-[4\/3] overflow-hidden\">\r\n                                    <img fetchpriority=\"high\" width=\"1920\" height=\"1280\" src=\"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/alex-tyson-_-exz5QF1-Q-unsplash-1.jpg\" class=\"w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700\" alt=\"\" fetchpriority=\"high\" decoding=\"async\" srcset=\"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/alex-tyson-_-exz5QF1-Q-unsplash-1.jpg 1920w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/alex-tyson-_-exz5QF1-Q-unsplash-1-300x200.jpg 300w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/alex-tyson-_-exz5QF1-Q-unsplash-1-1024x683.jpg 1024w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/alex-tyson-_-exz5QF1-Q-unsplash-1-768x512.jpg 768w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/alex-tyson-_-exz5QF1-Q-unsplash-1-1536x1024.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\r\n                                    <!-- Permanent gradient for title only -->\r\n                                    <div class=\"absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-black\/90 to-transparent\"><\/div>\r\n\r\n                                    <!-- Hover gradient -->\r\n                                    <div class=\"absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black\/60 opacity-0 group-hover:opacity-100 transition-opacity duration-500\"><\/div>\r\n\r\n                                    <!-- Category Badge -->\r\n                                    <div class=\"absolute top-4 right-4 backdrop-blur-md bg-white\/10 border border-white\/20 rounded-full pl-2 pr-3 py-1 flex items-center gap-2\">\r\n                                        <span class=\"w-2 h-2 rounded-full\" style=\"background-color: #60A5FA\"><\/span>\r\n                                        <span class=\"text-white text-sm font-medium\">amenities<\/span>\r\n                                    <\/div>\r\n\r\n                                    <!-- Title always visible, description on hover -->\r\n                                    <div class=\"absolute inset-x-0 bottom-0 p-6 translate-y-10 group-hover:translate-y-0 transition-transform duration-500\">\r\n                                        <div class=\"space-y-3 text-white\">\r\n                                            <h3 class=\"text-base font-semibold line-clamp-1\">Contemporary Textured Elegance: Modern Bathroom Design<\/h3>\r\n                                            <p class=\"text-sm text-white\/90 opacity-0 group-hover:opacity-100 transition-opacity duration-500 line-clamp-2\">Elevate your bathroom experience with our signature wave-textured wall design that creates a stunning visual impact. <\/p>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                                            <div class=\"group relative\" data-category=\"construction\">\r\n                            <div class=\"relative bg-white\/80 backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500\">\r\n                                <!-- Image -->\r\n                                <div class=\"relative aspect-[4\/3] overflow-hidden\">\r\n                                    <img fetchpriority=\"high\" width=\"1400\" height=\"933\" src=\"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/josh-olalde-X1P1_EDNnok-unsplash-1.jpg\" class=\"w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700\" alt=\"\" fetchpriority=\"high\" decoding=\"async\" srcset=\"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/josh-olalde-X1P1_EDNnok-unsplash-1.jpg 1400w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/josh-olalde-X1P1_EDNnok-unsplash-1-300x200.jpg 300w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/josh-olalde-X1P1_EDNnok-unsplash-1-1024x682.jpg 1024w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/josh-olalde-X1P1_EDNnok-unsplash-1-768x512.jpg 768w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/>\r\n                                    <!-- Permanent gradient for title only -->\r\n                                    <div class=\"absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-black\/90 to-transparent\"><\/div>\r\n\r\n                                    <!-- Hover gradient -->\r\n                                    <div class=\"absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black\/60 opacity-0 group-hover:opacity-100 transition-opacity duration-500\"><\/div>\r\n\r\n                                    <!-- Category Badge -->\r\n                                    <div class=\"absolute top-4 right-4 backdrop-blur-md bg-white\/10 border border-white\/20 rounded-full pl-2 pr-3 py-1 flex items-center gap-2\">\r\n                                        <span class=\"w-2 h-2 rounded-full\" style=\"background-color: #60A5FA\"><\/span>\r\n                                        <span class=\"text-white text-sm font-medium\">construction<\/span>\r\n                                    <\/div>\r\n\r\n                                    <!-- Title always visible, description on hover -->\r\n                                    <div class=\"absolute inset-x-0 bottom-0 p-6 translate-y-10 group-hover:translate-y-0 transition-transform duration-500\">\r\n                                        <div class=\"space-y-3 text-white\">\r\n                                            <h3 class=\"text-base font-semibold line-clamp-1\">Expert Craftsmanship in Action<\/h3>\r\n                                            <p class=\"text-sm text-white\/90 opacity-0 group-hover:opacity-100 transition-opacity duration-500 line-clamp-2\">The premium quality lumber and meticulous framing techniques displayed here form the strong backbone of your future home. <\/p>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                                            <div class=\"group relative\" data-category=\"exterior\">\r\n                            <div class=\"relative bg-white\/80 backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500\">\r\n                                <!-- Image -->\r\n                                <div class=\"relative aspect-[4\/3] overflow-hidden\">\r\n                                    <img fetchpriority=\"high\" width=\"1400\" height=\"930\" src=\"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/hohyeong-lee-e0uCDHd19U4-unsplash-1.jpg\" class=\"w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700\" alt=\"\" fetchpriority=\"high\" decoding=\"async\" srcset=\"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/hohyeong-lee-e0uCDHd19U4-unsplash-1.jpg 1400w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/hohyeong-lee-e0uCDHd19U4-unsplash-1-300x199.jpg 300w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/hohyeong-lee-e0uCDHd19U4-unsplash-1-1024x680.jpg 1024w, https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-content\/uploads\/2025\/02\/hohyeong-lee-e0uCDHd19U4-unsplash-1-768x510.jpg 768w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/>\r\n                                    <!-- Permanent gradient for title only -->\r\n                                    <div class=\"absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-black\/90 to-transparent\"><\/div>\r\n\r\n                                    <!-- Hover gradient -->\r\n                                    <div class=\"absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black\/60 opacity-0 group-hover:opacity-100 transition-opacity duration-500\"><\/div>\r\n\r\n                                    <!-- Category Badge -->\r\n                                    <div class=\"absolute top-4 right-4 backdrop-blur-md bg-white\/10 border border-white\/20 rounded-full pl-2 pr-3 py-1 flex items-center gap-2\">\r\n                                        <span class=\"w-2 h-2 rounded-full\" style=\"background-color: #C22C59\"><\/span>\r\n                                        <span class=\"text-white text-sm font-medium\">exterior<\/span>\r\n                                    <\/div>\r\n\r\n                                    <!-- Title always visible, description on hover -->\r\n                                    <div class=\"absolute inset-x-0 bottom-0 p-6 translate-y-10 group-hover:translate-y-0 transition-transform duration-500\">\r\n                                        <div class=\"space-y-3 text-white\">\r\n                                            <h3 class=\"text-base font-semibold line-clamp-1\">Main Tower Facade<\/h3>\r\n                                            <p class=\"text-sm text-white\/90 opacity-0 group-hover:opacity-100 transition-opacity duration-500 line-clamp-2\">Stunning glass facade with ocean views and modern architectural elements.<\/p>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                                    <\/div>\r\n\r\n            <\/div>\r\n        <\/section>\r\n        <!-- Gallery Popup\/Lightbox -->\r\n        <div id=\"galleryPopup\" class=\"fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-black\/60 opacity-0 pointer-events-none transition-opacity duration-300\">\r\n            <div class=\"relative mx-auto\">\r\n                <!-- Close Button -->\r\n                <button id=\"closePopup\" class=\"absolute top-4 right-4 z-10 w-10 h-10 flex items-center justify-center rounded-full bg-gray-800\/50 hover:bg-gray-800\/70 text-white transition-colors\">\r\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\r\n                    <\/svg>\r\n                <\/button>\r\n\r\n                <!-- Navigation Buttons -->\r\n                <button id=\"prevImage\" class=\"absolute left-4 top-1\/2 -translate-y-1\/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-gray-800\/50 hover:bg-gray-800\/70 text-white transition-colors\">\r\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/>\r\n                    <\/svg>\r\n                <\/button>\r\n\r\n                <button id=\"nextImage\" class=\"absolute right-4 top-1\/2 -translate-y-1\/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-gray-800\/50 hover:bg-gray-800\/70 text-white transition-colors\">\r\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/>\r\n                    <\/svg>\r\n                <\/button>\r\n\r\n                <!-- Image Container (with natural sizing) -->\r\n                <div class=\"relative rounded-2xl overflow-hidden shadow-2xl\">\r\n                    <img decoding=\"async\" id=\"popupImage\" class=\"max-w-screen-lg max-h-[90vh]\" src=\"\" alt=\"\">\r\n\r\n                    <!-- Image Info overlay -->\r\n                    <div id=\"imageInfo\" class=\"absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black\/80 to-transparent\">\r\n                        <h3 id=\"imageTitle\" class=\"text-xl sm:text-2xl font-semibold text-white\"><\/h3>\r\n                        <p id=\"imageDescription\" class=\"mt-2 text-white\/90\"><\/p>\r\n                        <div id=\"imageCategory\" class=\"mt-3 inline-flex items-center gap-2 backdrop-blur-md bg-white\/10 border border-white\/20 rounded-full pl-2 pr-3 py-1\">\r\n                            <span id=\"categoryDot\" class=\"w-2 h-2 rounded-full\"><\/span>\r\n                            <span id=\"categoryName\" class=\"text-white text-sm font-medium\"><\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    \t\t\t\t<\/div>\n\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>PROJECTS Project Details A comprehensive overview of the Coastal Heights development, highlighting its key features, amenities, and sustainable design elements. Building Features 45-story luxury towers Floor-to-ceiling windows 360\u00b0 ocean views Private balconies Luxury Amenities Infinity pool &amp; spa State-of-the-art fitness center Private cinema Sky lounge &amp; restaurant Sustainability LEED Gold certification Solar energy systems Rainwater [&hellip;]<\/p>\n","protected":false},"featured_media":1149,"template":"elementor_header_footer","project_category":[2],"project_tag":[],"project_status":[3],"class_list":["post-779","project","type-project","status-publish","has-post-thumbnail","hentry","project_category-commercial","project_status-completed"],"_links":{"self":[{"href":"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-json\/wp\/v2\/project\/779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-json\/wp\/v2\/types\/project"}],"version-history":[{"count":0,"href":"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-json\/wp\/v2\/project\/779\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-json\/wp\/v2\/media\/1149"}],"wp:attachment":[{"href":"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-json\/wp\/v2\/media?parent=779"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-json\/wp\/v2\/project_category?post=779"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-json\/wp\/v2\/project_tag?post=779"},{"taxonomy":"project_status","embeddable":true,"href":"https:\/\/demo.colorbee.online\/dhaara\/demo\/wp-json\/wp\/v2\/project_status?post=779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}