/* =====================================================
   FURNITURE INDUSTRY
   CLEAN RESPONSIVE PAGE CSS
====================================================== */


/* =====================================================
   VARIABLES
====================================================== */

:root {

  --fur-teal-dark: #043f44;
  --fur-teal: #075e63;
  --fur-teal-light: #00a9a5;

  --fur-pink: #f7255f;

  --fur-text: #163b3d;
  --fur-muted: #647779;

  --fur-light: #f4f8f7;
  --fur-border: rgba(7, 94, 99, 0.12);

  --fur-gradient:
    radial-gradient(
      circle at 12% 18%,
      rgba(0, 169, 165, 0.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 78%,
      rgba(247, 37, 95, 0.13),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #075e63 0%,
      #064f54 48%,
      #043f44 100%
    );

}


/* =====================================================
   GLOBAL
====================================================== */

.furniture-hero,
.furniture-intro,
.furniture-solutions,
.furniture-flow,
.furniture-capabilities,
.furniture-benefits,
.furniture-cta {

  width: 100%;

  overflow: hidden;

}


.section-padding {

  padding-top: clamp(75px, 8vw, 120px);

  padding-bottom: clamp(75px, 8vw, 120px);

}


.section-kicker {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 18px;

  color: var(--fur-teal);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.16em;

}


.section-kicker::before {

  content: "";

  width: 24px;

  height: 1px;

  background: var(--fur-teal-light);

}


.section-kicker.light {

  color: #79dfdb;

}


.section-kicker.light::before {

  background: #00a9a5;

}


/* =====================================================
   HERO
====================================================== */

.furniture-hero {

  position: relative;

  min-height: 760px;

  display: flex;

  align-items: center;

  padding:
    140px 0 90px;

  color: #ffffff;

  background: var(--fur-gradient);

}


.furniture-hero-row {

  min-height: 540px;

}


.furniture-hero-glow {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(10px);

}


.glow-one {

  width: 500px;

  height: 500px;

  top: -300px;

  right: -150px;

  background: rgba(0, 169, 165, 0.08);

}


.glow-two {

  width: 420px;

  height: 420px;

  bottom: -250px;

  left: -170px;

  background: rgba(247, 37, 95, 0.06);

}


/* =====================================================
   BREADCRUMB
====================================================== */

.furniture-breadcrumb {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 9px;

  margin-bottom: 25px;

  color: rgba(255,255,255,.55);

  font-size: 12px;

}


.furniture-breadcrumb a {

  color: rgba(255,255,255,.55);

  text-decoration: none;

}


.furniture-breadcrumb a:hover {

  color: #ffffff;

}


.furniture-breadcrumb i {

  font-size: 9px;

  color: rgba(255,255,255,.3);

}


.furniture-breadcrumb span {

  color: rgba(255,255,255,.9);

}


/* =====================================================
   EYEBROW
====================================================== */

.furniture-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 8px 13px;

  margin-bottom: 20px;

  border: 1px solid rgba(255,255,255,.16);

  border-radius: 100px;

  background: rgba(255,255,255,.05);

  color: rgba(255,255,255,.8);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .16em;

}


.furniture-eyebrow::before {

  content: "";

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #00a9a5;

  box-shadow:
    0 0 0 5px rgba(0,169,165,.1);

}


/* =====================================================
   HERO TEXT
====================================================== */

.furniture-hero h1 {

  max-width: 650px;

  margin: 0;

  font-size: clamp(3rem, 5vw, 5.2rem);

  line-height: 1.02;

  letter-spacing: -.045em;

  font-weight: 700;

}


.furniture-hero h1 span {

  display: block;

  color: #73d8d4;

}


.furniture-hero-description {

  max-width: 600px;

  margin: 28px 0 0;

  color: rgba(255,255,255,.7);

  font-size: 16px;

  line-height: 1.8;

}


.furniture-hero-actions {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 24px;

  margin-top: 34px;

}


.furniture-outline-link {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: rgba(255,255,255,.75);

  font-size: 14px;

  text-decoration: none;

  transition: .25s ease;

}


.furniture-outline-link:hover {

  color: #ffffff;

  gap: 13px;

}


/* =====================================================
   HERO VISUAL
====================================================== */

.furniture-hero-visual {

  position: relative;

  width: min(100%, 500px);

  aspect-ratio: 1 / 1;

  margin: 0 auto;

}


.furniture-visual-ring {

  position: absolute;

  top: 50%;

  left: 50%;

  border: 1px solid rgba(255,255,255,.12);

  border-radius: 50%;

  transform: translate(-50%, -50%);

}


.ring-one {

  width: 62%;

  height: 62%;

  animation:
    furSpin 20s linear infinite;

}


.ring-two {

  width: 82%;

  height: 82%;

  border-style: dashed;

  opacity: .55;

  animation:
    furSpin 30s linear infinite reverse;

}


@keyframes furSpin {

  from {
    transform:
      translate(-50%,-50%)
      rotate(0);
  }

  to {
    transform:
      translate(-50%,-50%)
      rotate(360deg);
  }

}


/* =====================================================
   MAIN VISUAL CARD
====================================================== */

.furniture-main-card {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 205px;

  min-height: 205px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 25px;

  transform: translate(-50%,-50%);

  border: 1px solid rgba(255,255,255,.18);

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.035)
    );

  box-shadow:
    0 30px 80px rgba(0,0,0,.2);

  backdrop-filter: blur(20px);

  z-index: 3;

  animation:
    furFloat 5s ease-in-out infinite;

}


.furniture-card-icon {

  width: 58px;

  height: 58px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 17px;

  border-radius: 17px;

  background:
    rgba(0,169,165,.14);

  color: #79dfdb;

  font-size: 25px;

}


.furniture-main-card strong {

  color: #ffffff;

  font-size: 19px;

}


.furniture-main-card span {

  margin-top: 5px;

  color: rgba(255,255,255,.5);

  font-size: 11px;

  text-align: center;

}


@keyframes furFloat {

  0%,
  100% {
    transform:
      translate(-50%,-50%);
  }

  50% {
    transform:
      translate(-50%,calc(-50% - 9px));
  }

}


/* =====================================================
   FLOATING CARDS
====================================================== */

.furniture-floating-card {

  position: absolute;

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 12px 15px;

  border: 1px solid rgba(255,255,255,.14);

  border-radius: 15px;

  background: rgba(255,255,255,.07);

  backdrop-filter: blur(15px);

  box-shadow:
    0 18px 45px rgba(0,0,0,.15);

  z-index: 5;

}


.furniture-floating-card i {

  color: #73d8d4;

  font-size: 17px;

}


.furniture-floating-card small {

  display: block;

  color: rgba(255,255,255,.45);

  font-size: 9px;

}


.furniture-floating-card strong {

  display: block;

  margin-top: 2px;

  color: #ffffff;

  font-size: 12px;

}


.floating-top {

  top: 16%;

  left: 2%;

  animation:
    furFloatSmall 5s ease-in-out infinite;

}


.floating-right {

  top: 48%;

  right: -2%;

  animation:
    furFloatSmall 5s ease-in-out 1s infinite;

}


.floating-bottom {

  bottom: 14%;

  left: 7%;

  animation:
    furFloatSmall 5s ease-in-out 2s infinite;

}


@keyframes furFloatSmall {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }

}


/* =====================================================
   INTRO
====================================================== */

.furniture-intro {

  background: #ffffff;

}


.furniture-intro h2,
.furniture-solutions h2,
.furniture-capabilities h2,
.furniture-benefits h2 {

  max-width: 620px;

  margin: 0;

  color: var(--fur-text);

  font-size: clamp(2.3rem, 4vw, 4rem);

  line-height: 1.08;

  letter-spacing: -.04em;

}


.furniture-intro h2 span,
.furniture-solutions h2 span,
.furniture-capabilities h2 span,
.furniture-benefits h2 span {

  color: var(--fur-teal);

}


.furniture-large-text {

  margin-bottom: 22px;

  color: var(--fur-text) !important;

  font-size: 21px !important;

  line-height: 1.65 !important;

  font-weight: 500;

}


.furniture-intro p {

  max-width: 700px;

  margin-bottom: 0;

  color: var(--fur-muted);

  font-size: 15px;

  line-height: 1.8;

}


/* =====================================================
   SOLUTIONS
====================================================== */

.furniture-solutions {

background: radial-gradient(circle at 8% 12%, rgba(0, 169, 165, 0.075), transparent 24%), radial-gradient(circle at 92% 88%, rgba(247, 37, 95, 0.045), transparent 22%), #f3f7f7;

border-top: 1px solid rgb(7 94 99 / 12%);

border-bottom: 1px solid rgba(7, 94, 99, 0.05);
}


.section-heading-row {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 50px;

  margin-bottom: 55px;

}


.section-heading-row > p {

  max-width: 390px;

  margin: 0;

  color: var(--fur-muted);

  font-size: 15px;

  line-height: 1.75;

}


/* =====================================================
   SOLUTION CARDS
====================================================== */

.furniture-solution-card {

  position: relative;

  height: 100%;

  min-height: 310px;

  padding: 30px;

  border: 1px solid var(--fur-border);

  border-radius: 24px;

  background: #ffffff;

  box-shadow:
    0 12px 35px rgba(4,63,68,.045);

  overflow: hidden;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

}


.furniture-solution-card::after {

  content: "";

  position: absolute;

  right: -60px;

  bottom: -70px;

  width: 150px;

  height: 150px;

  border-radius: 50%;

  background:
    rgba(0,169,165,.05);

  transition:
    transform .4s ease;

}


.furniture-solution-card:hover {

  transform: translateY(-8px);

  border-color:
    rgba(0,169,165,.25);

  box-shadow:
    0 22px 55px rgba(4,63,68,.1);

}


.furniture-solution-card:hover::after {

  transform: scale(1.5);

}


.solution-number {

  position: absolute;

  top: 25px;

  right: 25px;

  color: rgba(7,94,99,.18);

  font-size: 12px;

  font-weight: 700;

}


.solution-icon {

  width: 52px;

  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 30px;

  border-radius: 15px;

  background:
    rgba(0,169,165,.08);

  color: var(--fur-teal);

  font-size: 21px;

}


.furniture-solution-card h3 {

  margin-bottom: 12px;

  color: var(--fur-text);

  font-size: 19px;

  font-weight: 650;

}


.furniture-solution-card p {

  margin: 0;

  color: var(--fur-muted);

  font-size: 14px;

  line-height: 1.75;

}


/* =====================================================
   FLOW
====================================================== */

.furniture-flow {

  position: relative;

  color: #ffffff;

  background: var(--fur-gradient);

}


.furniture-flow-heading {

  max-width: 700px;

  margin: 0 auto;

}


.furniture-flow-heading h2 {

  margin: 0;

  color: #ffffff;

  font-size: clamp(2.4rem, 4vw, 4rem);

  line-height: 1.08;

  letter-spacing: -.04em;

}


.furniture-flow-heading h2 span {

  color: #73d8d4;

}


.furniture-flow-heading p {

  max-width: 550px;

  margin: 20px auto 0;

  color: rgba(255,255,255,.62);

  font-size: 15px;

  line-height: 1.75;

}


/* =====================================================
   FLOW GRID
====================================================== */

.furniture-flow-grid {

  position: relative;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 25px;

  margin-top: 65px;

}


.furniture-flow-grid::before {

  content: "";

  position: absolute;

  top: 39px;

  left: 10%;

  right: 10%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.25),
      transparent
    );

}


.furniture-flow-step {

  position: relative;

  text-align: center;

  z-index: 1;

}


.flow-icon {

  width: 78px;

  height: 78px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 20px;

  border: 1px solid rgba(255,255,255,.16);

  border-radius: 50%;

  background: rgba(255,255,255,.07);

  color: #73d8d4;

  font-size: 22px;

  backdrop-filter: blur(10px);

  transition: .3s ease;

}


.furniture-flow-step:hover .flow-icon {

  transform: translateY(-6px);

  background:
    rgba(0,169,165,.15);

}


.furniture-flow-step > span {

  display: block;

  margin-bottom: 9px;

  color: rgba(255,255,255,.35);

  font-size: 10px;

  letter-spacing: .1em;

}


.furniture-flow-step h3 {

  margin-bottom: 9px;

  color: #ffffff;

  font-size: 18px;

}


.furniture-flow-step p {

  max-width: 210px;

  margin: 0 auto;

  color: rgba(255,255,255,.55);

  font-size: 13px;

  line-height: 1.7;

}


/* =====================================================
   CAPABILITIES
====================================================== */

.furniture-capabilities {

  background: #ffffff;

}


.furniture-capabilities > .container > .row {

  align-items: center;

}


.furniture-capabilities > .container > .row > .col-lg-5 > p {

  max-width: 470px;

  color: var(--fur-muted);

  font-size: 15px;

  line-height: 1.8;

}


.furniture-capability-list {

  border-top:
    1px solid var(--fur-border);

}


.capability-row {

  display: grid;

  grid-template-columns: 50px 1fr;

  gap: 20px;

  padding: 25px 0;

  border-bottom:
    1px solid var(--fur-border);

  transition:
    padding-left .3s ease;

}


.capability-row:hover {

  padding-left: 8px;

}


.capability-icon {

  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 13px;

  background:
    rgba(0,169,165,.08);

  color: var(--fur-teal);

}


.capability-row h3 {

  margin: 0 0 6px;

  color: var(--fur-text);

  font-size: 17px;

}


.capability-row p {

  margin: 0;

  color: var(--fur-muted);

  font-size: 13px;

  line-height: 1.7;

}


/* =====================================================
   BENEFITS
====================================================== */

.furniture-benefits {

background: radial-gradient(circle at 8% 12%, rgba(0, 169, 165, 0.075), transparent 24%), radial-gradient(circle at 92% 88%, rgba(247, 37, 95, 0.045), transparent 22%), #f3f7f7;

border-top: 1px solid rgb(7 94 99 / 12%);

border-bottom: 1px solid rgba(7, 94, 99, 0.05);
}


.furniture-benefits > .container > .text-center h2 {

  margin: 0 auto;

}


.furniture-benefit-card {

  height: 100%;

  padding: 32px;

  border:
    1px solid var(--fur-border);

  border-radius: 22px;

  background: #ffffff;

  transition:
    transform .3s ease,
    box-shadow .3s ease;

}


.furniture-benefit-card:hover {

  transform: translateY(-7px);

  box-shadow:
    0 20px 50px rgba(4,63,68,.08);

}


.furniture-benefit-card > i {

  width: 50px;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 22px;

  border-radius: 15px;

  background:
    rgba(0,169,165,.08);

  color: var(--fur-teal);

  font-size: 21px;

}


.furniture-benefit-card h3 {

  margin-bottom: 10px;

  color: var(--fur-text);

  font-size: 18px;

}


.furniture-benefit-card p {

  margin: 0;

  color: var(--fur-muted);

  font-size: 14px;

  line-height: 1.75;

}


/* =====================================================
   CTA
====================================================== */

.furniture-cta {

  padding:
    80px 0;

  background: #ffffff;

}


.furniture-cta-box {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 50px;

  padding:
    clamp(35px, 5vw, 65px);

  border-radius: 30px;

  color: #ffffff;

  background: var(--fur-gradient);

  overflow: hidden;

}


.furniture-cta-box::after {

  content: "";

  position: absolute;

  width: 300px;

  height: 300px;

  right: -120px;

  top: -150px;

  border-radius: 50%;

  background:
    rgba(0,169,165,.12);

}


.furniture-cta-box > div {

  position: relative;

  z-index: 1;

}


.furniture-cta-box h2 {

  max-width: 680px;

  margin: 0;

  color: #ffffff;

  font-size: clamp(2rem, 4vw, 3.5rem);

  line-height: 1.1;

  letter-spacing: -.035em;

}


.furniture-cta-box p {

  max-width: 570px;

  margin: 18px 0 0;

  color: rgba(255,255,255,.62);

  font-size: 15px;

  line-height: 1.7;

}


.furniture-cta-box > .btn {

  position: relative;

  flex-shrink: 0;

  z-index: 2;

}


/* =====================================================
   TABLET
====================================================== */

@media (max-width: 991.98px) {

  .furniture-hero {

    min-height: auto;

    padding:
      135px 0 80px;

  }


  .furniture-hero-row {

    min-height: auto;

  }


  .furniture-hero-visual {

    max-width: 460px;

    margin-top: 70px;

  }


  .section-heading-row {

    align-items: flex-start;

    flex-direction: column;

    gap: 20px;

    margin-bottom: 40px;

  }


  .furniture-flow-grid {

    grid-template-columns:
      repeat(2, 1fr);

    row-gap: 50px;

  }


  .furniture-flow-grid::before {

    display: none;

  }


  .furniture-cta-box {

    align-items: flex-start;

    flex-direction: column;

  }

}


/* =====================================================
   MOBILE
====================================================== */

@media (max-width: 767.98px) {

  .section-padding {

    padding-top: 70px;

    padding-bottom: 70px;

  }


  .furniture-hero {

    padding:
      115px 0 65px;

  }


  .furniture-hero h1 {

    font-size:
      clamp(2.55rem, 12vw, 3.5rem);

  }


  .furniture-hero-description {

    margin-top: 22px;

    font-size: 15px;

  }


  .furniture-hero-actions {

    align-items: flex-start;

    flex-direction: column;

    gap: 17px;

  }


  .furniture-hero-visual {

    width: 100%;

    max-width: 380px;

    margin-top: 55px;

  }


  .furniture-main-card {

    width: 165px;

    min-height: 165px;

    border-radius: 22px;

  }


  .furniture-card-icon {

    width: 48px;

    height: 48px;

    margin-bottom: 13px;

    border-radius: 14px;

  }


  .furniture-main-card strong {

    font-size: 16px;

  }


  .furniture-main-card span {

    font-size: 9px;

  }


  .ring-one {

    width: 64%;

    height: 64%;

  }


  .ring-two {

    width: 84%;

    height: 84%;

  }


  .furniture-floating-card {

    padding: 10px 11px;

  }


  .floating-top {

    left: 0;

  }


  .floating-right {

    right: -2%;

  }


  .floating-bottom {

    left: 2%;

  }


  .furniture-intro h2,
  .furniture-solutions h2,
  .furniture-capabilities h2,
  .furniture-benefits h2 {

    font-size:
      clamp(2.15rem, 10vw, 3rem);

  }


  .furniture-large-text {

    font-size: 18px !important;

  }


  .furniture-solution-card {

    min-height: auto;

    padding: 27px;

  }


  .furniture-flow-grid {

    grid-template-columns: 1fr;

    gap: 40px;

  }


  .furniture-flow-step p {

    max-width: 270px;

  }


  .capability-row {

    grid-template-columns: 43px 1fr;

    gap: 15px;

    padding: 22px 0;

  }


  .capability-icon {

    width: 39px;

    height: 39px;

  }


  .furniture-benefit-card {

    padding: 27px;

  }


  .furniture-cta {

    padding: 65px 0;

  }


  .furniture-cta-box {

    padding: 30px 25px;

    border-radius: 24px;

    gap: 28px;

  }


  .furniture-cta-box h2 {

    font-size:
      clamp(2rem, 9vw, 2.8rem);

  }


  .furniture-cta-box > .btn {

    width: 100%;

    justify-content: center;

  }

}


/* =====================================================
   VERY SMALL DEVICES
====================================================== */

@media (max-width: 420px) {

  .furniture-hero {

    padding-top: 105px;

  }


  .furniture-hero h1 {

    font-size: 2.3rem;

  }


  .furniture-hero-visual {

    transform: scale(.92);

    transform-origin: center;

    margin-top: 35px;

    margin-bottom: -20px;

  }


  .furniture-floating-card strong {

    font-size: 10px;

  }


  .furniture-floating-card small {

    font-size: 8px;

  }


  .furniture-solution-card {

    padding: 24px;

  }


  .furniture-cta-box {

    padding: 27px 21px;

  }

}


/* =====================================================
   REDUCED MOTION
====================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: .01ms !important;

  }

}