{"id":287,"date":"2026-04-01T06:23:32","date_gmt":"2026-04-01T06:23:32","guid":{"rendered":"https:\/\/househarmony.ae\/dev\/?page_id=287"},"modified":"2026-04-18T14:56:38","modified_gmt":"2026-04-18T14:56:38","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/househarmony.ae\/index.php\/portfolio\/","title":{"rendered":"Portfolio\u00a0"},"content":{"rendered":"

[et_pb_section fb_built=”1″ admin_label=”Portfolio Hero” _builder_version=”4.27.6″ use_background_color_gradient=”on” background_color_gradient_type=”circular” background_color_gradient_direction_radial=”top left” background_color_gradient_stops=”gcid-cdc19666-93db-40d8-86ba-c463435564cb 0%|gcid-88209ade-a73e-4d9d-abc8-aff72c4408f3 99%” background_color_gradient_overlays_image=”on” background_color_gradient_start=”rgba(40,40,40,0.79)” background_color_gradient_end=”rgba(40,40,40,0.86)” background_image=”https:\/\/househarmony.ae\/dev\/wp-content\/uploads\/2026\/03\/photo-1682888818620-94875adf5bb9.avif” width=”100%” max_width=”100%” custom_margin=”125px||||false|false” custom_padding=”4vw||0vw||false|false” global_colors_info=”{%22gcid-cdc19666-93db-40d8-86ba-c463435564cb%22:%91%22background_color_gradient_stops%22%93,%22gcid-88209ade-a73e-4d9d-abc8-aff72c4408f3%22:%91%22background_color_gradient_stops%22%93}”][et_pb_row custom_padding_last_edited=”on|desktop” _builder_version=”4.27.6″ width=”83%” max_width=”1400px” height=”144px” custom_margin=”||||false|false” custom_padding_tablet=”” custom_padding_phone=”” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.6″ custom_padding=”|||0px|false|false” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.27.6″ text_font=”||||||||” header_font=”Oswald|700|||||||” header_text_color=”#0d418b” header_font_size=”64px” header_line_height=”1.1em” background_layout=”dark” max_width=”800px” custom_margin=”|0px||0px|true|true” custom_padding=”|||16px” text_font_size_tablet=”14px” text_font_size_last_edited=”off|desktop” header_font_size_tablet=”44px” header_font_size_phone=”32px” header_font_size_last_edited=”on|phone” border_color_all=”RGBA(255,255,255,0)” border_width_left=”10px” global_colors_info=”{}”]<\/p>\n

Portfolio<\/h1>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.27.6″ _module_preset=”default” background_color=”#fff4f4″ collapsed=”off” global_colors_info=”{}”][et_pb_row _builder_version=”4.27.6″ _module_preset=”default” width=”100%” max_width=”1365px” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|phone” custom_padding=”|15px||15px|false|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.6″ _module_preset=”default” custom_padding=”|70px||70px|false|true” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.6″ _module_preset=”default” custom_css_free_form=”\/* ====================== PROJECTS GRID LAYOUT ====================== *\/||.hh-projects-grid {|| display: flex;|| flex-direction: column;|| gap: 80px; \/* space between rows *\/||}||||.hh-project-row {|| display: grid;|| grid-template-columns: 1fr 1fr;|| gap: 60px;|| align-items: center;|| padding: 20px 0;||}||||.hh-project-row.reverse {|| direction: rtl; \/* flips image and content *\/||}||||.hh-project-row.reverse .hh-project-content,||.hh-project-row.reverse .hh-project-image {|| direction: ltr; \/* resets text direction *\/||}||||\/* Content Side *\/||.hh-project-content {|| display: flex;|| flex-direction: column;|| gap: 20px;||}||||.hh-number {|||| font-weight: 600;|| letter-spacing: 2px;|| text-transform: uppercase;|| font-size: 60px;|| color: #f4b400;|| display: block;|| margin-bottom: 10px;||}||||.hh-project-content h3 {|| font-size: 28px;|| line-height: 1.3;|| margin: 0;|| color: #222;||}||||.hh-project-content p {|| font-size: 16px;|| line-height: 1.7;|| color: #555;|| margin: 0;|| max-width: 90%;||}||||\/* Button *\/||.hh-btn {|| display: inline-block;|| padding: 14px 32px;|| background: #0d418b;|| color: #fff;|| text-decoration: none;|| border-radius: 0px;|| font-weight: 500;|| font-size: 15px;|| transition: all 0.3s ease;|| align-self: flex-start;|| margin-top: 10px;||}||||.hh-btn:hover {|| background: #000;|| transform: translateY(-3px);||}||||\/* Image Side *\/||.hh-project-image {|| position: relative;|| overflow: hidden;|| border-radius: 12px;||}||||.hh-img-wrap {|| position: relative;|| padding-top: 75%; \/* 4:3 aspect ratio *\/|| background: #f5f5f5;||}||||.hh-img-wrap img {|| position: absolute;|| top: 0;|| left: 0;|| width: 100%;|| height: 100%;|| object-fit: cover;|| transition: transform 0.6s ease;||}||||.hh-project-row:hover .hh-img-wrap img {|| transform: scale(1.08);||}||||.hh-overlay {|| position: absolute;|| top: 0;|| left: 0;|| width: 100%;|| height: 100%;|| background: linear-gradient(to top, rgba(0,0,0,0.25), transparent);|| opacity: 0;|| transition: opacity 0.4s ease;||}||||.hh-project-row:hover .hh-overlay {|| opacity: 1;||}||||\/* ====================== RESPONSIVE ====================== *\/||||@media (max-width: 1024px) {|| .hh-project-row {|| gap: 40px;|| }|| || .hh-project-content h3 {|| font-size: 26px;|| }||}||||@media (max-width: 768px) {|| .hh-project-row {|| grid-template-columns: 1fr; \/* stack vertically on mobile *\/|| gap: 30px;|| }|| || .hh-project-row.reverse {|| direction: ltr; \/* no flip on mobile *\/|| }|| || .hh-projects-grid {|| gap: 60px;|| }|| || .hh-project-content h3 {|| font-size: 24px;|| }|| || .hh-btn {|| padding: 13px 28px;|| font-size: 15px;|| }||}||||@media (max-width: 480px) {|| .hh-project-row {|| gap: 25px;|| }|| || .hh-project-content h3 {|| font-size: 22px;|| }|| || .hh-projects-grid {|| gap: 50px;|| }||}||||||\/* ====================== PROJECTS FILTER ====================== *\/||.hh-projects-filter {|| display: flex;|| flex-wrap: wrap;|| gap: 12px;|| justify-content: center;|| margin-bottom: 50px;|| padding: 10px 0;||}||||.hh-filter-btn {|| padding: 12px 24px;|| font-size: 16px;|| font-weight: 500;|| color: white;|| background: #0d418b;|| border: 2px solid #e0e0e0;|| border-radius: 0px;|| cursor: pointer;|| transition: all 0.3s ease;|| white-space: nowrap;||}||||.hh-filter-btn:hover {|| background: #f0f0f0;|| border-color: #ccc;||}||||.hh-filter-btn.active {|| background: white;|| color: #0d418b;|| border-color: #0d418b;||}||||\/* ====================== RESPONSIVE FILTER ====================== *\/||||\/* Tablet & Small Desktop *\/||@media (max-width: 1024px) {|| .hh-projects-filter {|| gap: 10px;|| margin-bottom: 40px;|| }|| || .hh-filter-btn {|| padding: 10px 20px;|| font-size: 15px;|| }||}||||\/* Mobile Devices *\/||@media (max-width: 768px) {|| .hh-projects-filter {|| justify-content: flex-start;|| padding: 15px 0;|| gap: 8px;|| }|| || .hh-filter-btn {|| padding: 10px 18px;|| font-size: 14px;|| flex: 1 1 auto; \/* makes buttons grow *\/|| min-width: 100px;|| text-align: center;|| }||}||||\/* Very small screens (like old phones) *\/||@media (max-width: 480px) {|| .hh-projects-filter {|| gap: 6px;|| }|| || .hh-filter-btn {|| padding: 9px 14px;|| font-size: 13px;|| min-width: 80px;|| }||}||||||\/* ====================== LOADER \/ SPINNER ====================== *\/||.hh-loader {|| display: none;|| flex-direction: column;|| align-items: center;|| justify-content: center;|| gap: 12px;|| padding: 40px 20px;|| margin: 40px 0;|| color: #666;|| font-size: 15px;||}||||.spinner {|| width: 40px;|| height: 40px;|| border: 4px solid #f0f0f0;|| border-top: 4px solid #333;|| border-radius: 50%;|| animation: spin 1s linear infinite;||}||||@keyframes spin {|| 0% { transform: rotate(0deg); }|| 100% { transform: rotate(360deg); }||}||||\/* Optional: Make loader fade in\/out *\/||.hh-loader {|| transition: opacity 0.3s ease;||}||||” global_colors_info=”{}”]

\r\n\r\n
\r\n