.elementor-29473 .elementor-element.elementor-element-3ac7b61f > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-29473 .elementor-element.elementor-element-3ac7b61f:not(.elementor-motion-effects-element-type-background), .elementor-29473 .elementor-element.elementor-element-3ac7b61f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://furnituresukoon.com/wp-content/plugins/elementor/assets/images/placeholder.png");background-position:center center;background-size:cover;}.elementor-29473 .elementor-element.elementor-element-3ac7b61f > .elementor-background-overlay{background-color:#1A1310;opacity:0.55;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-29473 .elementor-element.elementor-element-3ac7b61f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 24px 0px 24px;}.elementor-bc-flex-widget .elementor-29473 .elementor-element.elementor-element-1db5e8c3.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-29473 .elementor-element.elementor-element-1db5e8c3.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-29473 .elementor-element.elementor-element-1db5e8c3.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-29473 .elementor-element.elementor-element-7ab74bf3{text-align:center;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:2px;color:#CDA25A;}.elementor-29473 .elementor-element.elementor-element-3dbb0786{--divider-border-style:solid;--divider-color:#CDA25A;--divider-border-width:2px;}.elementor-29473 .elementor-element.elementor-element-3dbb0786 .elementor-divider-separator{width:40px;margin:0 auto;margin-center:0;}.elementor-29473 .elementor-element.elementor-element-3dbb0786 .elementor-divider{text-align:center;padding-block-start:20px;padding-block-end:20px;}.elementor-29473 .elementor-element.elementor-element-5487a02f{text-align:center;}.elementor-29473 .elementor-element.elementor-element-5487a02f .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:60px;font-weight:600;color:#FFFFFF;}.elementor-29473 .elementor-element.elementor-element-5ada75be{text-align:center;font-size:16px;letter-spacing:0.5px;color:#E9E3D8;}.elementor-29473 .elementor-element.elementor-element-5622375d:not(.elementor-motion-effects-element-type-background), .elementor-29473 .elementor-element.elementor-element-5622375d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F3EC;}.elementor-29473 .elementor-element.elementor-element-5622375d{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:64px 24px 0px 24px;}.elementor-29473 .elementor-element.elementor-element-5622375d > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-29473 .elementor-element.elementor-element-6c45d258:not(.elementor-motion-effects-element-type-background), .elementor-29473 .elementor-element.elementor-element-6c45d258 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F3EC;}.elementor-29473 .elementor-element.elementor-element-6c45d258{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:80px 24px 80px 24px;}.elementor-29473 .elementor-element.elementor-element-6c45d258 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-29473 .elementor-element.elementor-element-45db9784 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-45db9784 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-29473 .elementor-element.elementor-element-45db9784{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-29473 .elementor-element.elementor-element-45db9784 .elementor-icon-list-text{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-ca10c96 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-ca10c96 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-29473 .elementor-element.elementor-element-ca10c96{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-29473 .elementor-element.elementor-element-ca10c96 .elementor-icon-list-text{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-73e3ffbe .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-73e3ffbe .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-29473 .elementor-element.elementor-element-73e3ffbe{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-29473 .elementor-element.elementor-element-73e3ffbe .elementor-icon-list-text{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-5ab94fc5 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-5ab94fc5 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-29473 .elementor-element.elementor-element-5ab94fc5{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-29473 .elementor-element.elementor-element-5ab94fc5 .elementor-icon-list-text{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-5cec1ea6 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-5cec1ea6 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-29473 .elementor-element.elementor-element-5cec1ea6{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-29473 .elementor-element.elementor-element-5cec1ea6 .elementor-icon-list-text{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-53301ebf .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-53301ebf .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-29473 .elementor-element.elementor-element-53301ebf{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-29473 .elementor-element.elementor-element-53301ebf .elementor-icon-list-text{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-78954c51 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-78954c51 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-29473 .elementor-element.elementor-element-78954c51{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-29473 .elementor-element.elementor-element-78954c51 .elementor-icon-list-text{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-1d4b219c .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-1d4b219c .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-29473 .elementor-element.elementor-element-1d4b219c{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-29473 .elementor-element.elementor-element-1d4b219c .elementor-icon-list-text{transition:color 0.3s;}.elementor-29473 .elementor-element.elementor-element-1fdeee86{text-align:center;color:#6B6058;}.elementor-29473 .elementor-element.elementor-element-74d69cf2:not(.elementor-motion-effects-element-type-background), .elementor-29473 .elementor-element.elementor-element-74d69cf2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1A1310;}.elementor-29473 .elementor-element.elementor-element-74d69cf2{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:80px 24px 80px 24px;}.elementor-29473 .elementor-element.elementor-element-74d69cf2 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-29473 .elementor-element.elementor-element-429c319c .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:36px;font-weight:600;color:#FFFFFF;}.elementor-29473 .elementor-element.elementor-element-2f9a199b{font-size:15px;color:#E9E3D8;}.elementor-29473 .elementor-element.elementor-element-27882b60 .elementor-button{background-color:#CDA25A;font-size:13px;font-weight:500;text-transform:uppercase;fill:#1A1310;color:#1A1310;border-radius:6px 6px 6px 6px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-29473 .elementor-element.elementor-element-429c319c .elementor-heading-title{font-size:30px;}}@media(max-width:768px){.elementor-29473 .elementor-element.elementor-element-5487a02f .elementor-heading-title{font-size:36px;}.elementor-29473 .elementor-element.elementor-element-5622375d{padding:56px 24px 0px 24px;}.elementor-29473 .elementor-element.elementor-element-6c45d258{padding:56px 24px 56px 24px;}.elementor-29473 .elementor-element.elementor-element-74d69cf2{padding:64px 24px 64px 24px;}}/* Start custom CSS *//* ============================================================================
   FURNITURE SUKOON — PROJECTS PAGE
   Additional CSS for WordPress Customizer (Appearance → Customize → Additional CSS)
   or Elementor's Custom CSS panel (Pro) on the Projects page.

   This file only contains what native Elementor widgets can't style out of
   the box (pill filter buttons with active state, card hover-lift, image
   zoom, link-arrow micro-interaction, fade-out filter transition).
   Everything else (layout, spacing, columns) should be built with
   Elementor's native Section/Container + Column controls.

   Brand tokens used throughout — keep these in sync with Site Settings
   → Global Colors / Global Fonts inside Elementor so every page matches:
     --espresso : #1A1310   (header / footer / dark sections)
     --gold     : #C89550   (accent, hover states)
     --goldlight: #CDA25A   (buttons, active states, links)
     --cream    : #F7F3EC   (light section background)
     --creamtext: #E9E3D8   (body copy on dark background)
     --muted    : #6B6058   (secondary text)
   ============================================================================ */

:root {
  --fs-espresso: #1A1310;
  --fs-gold: #C89550;
  --fs-goldlight: #CDA25A;
  --fs-cream: #F7F3EC;
  --fs-creamtext: #E9E3D8;
  --fs-muted: #6B6058;
}

/* ---------------------------------------------------------------
   FILTER BAR — apply the "filter-btn" CSS class to each Elementor
   Button widget (Advanced tab → CSS Classes → filter-btn). Add a
   second class per button matching the category, e.g. "filter-residential",
   and set each button's Link to "#" (JS handles the filtering, so the
   href does not need to navigate anywhere).
   --------------------------------------------------------------- */
.filter-btn {
  background: #FFFFFF;
  color: var(--fs-espresso);
  border: 1px solid rgba(200, 149, 80, 0.35);
  border-radius: 6px;
  padding: 10px 22px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.filter-btn:hover {
  border-color: var(--fs-goldlight);
  color: var(--fs-gold);
}

.filter-btn.is-active {
  background: var(--fs-goldlight);
  border-color: var(--fs-goldlight);
  color: #FFFFFF;
}

/* ---------------------------------------------------------------
   PROJECT CARDS — wrap each project's Image + Text widgets inside
   an Elementor Inner Section / Container and apply the "project-card"
   CSS class to that container (Advanced tab → CSS Classes).
   Apply "project-card__img-wrap" to the column holding the Image
   widget, and "project-card__body" to the column holding the text.
   --------------------------------------------------------------- */
.project-card {
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(26, 19, 16, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.25s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(26, 19, 16, 0.14);
}

.project-card.is-hidden {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.project-card__img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.project-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.project-card:hover .project-card__img-wrap img {
  transform: scale(1.06);
}

.project-card__body {
  padding: 20px 22px 24px;
}

.project-card__cat {
  color: var(--fs-gold);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 6px;
}

.project-card__title {
  font-family: "Playfair Display", serif;
  color: var(--fs-espresso);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 12px;
  line-height: 1.3;
}

.project-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fs-gold);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.project-card__link span {
  transition: transform 0.25s ease;
  display: inline-block;
}

.project-card__link:hover span {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------
   Accessibility — visible keyboard focus (kept minimal, on-brand)
   --------------------------------------------------------------- */
.filter-btn:focus-visible,
.project-card__link:focus-visible {
  outline: 2px solid var(--fs-goldlight);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .filter-btn,
  .project-card,
  .project-card__img-wrap img,
  .project-card__link span {
    transition: none !important;
  }
}/* End custom CSS */