/* -------- Theme variables & base adjustments -------- */
      :root{
        --accent:#e76f8a;       /* primary accent */
        --accent-dark:#c85a73;
        --muted:#6b6b6b;
        --card-bg:#ffffff;
        --page-bg:#fbfbfb;
        --radius:14px;
        --gap:24px;
        --max-width:1140px;
      }

      body { background:var(--page-bg); color:#222; font-family: "Lato", "Montserrat", sans-serif; -webkit-font-smoothing:antialiased; }

      /* keep the IE panel style from contacts.html */
      .ie-panel{display: none;background: #212121;padding: 10px 0;box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);clear: both;text-align:center;position: relative;z-index: 1;}
      html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel {display: block;}

      /* -------- Animated entrances (subtle) -------- */
      .fade-in { opacity:0; transform: translateY(12px); animation: fadeInUp .7s ease forwards; }
      .fade-in.delay-1 { animation-delay:.08s; }
      .fade-in.delay-2 { animation-delay:.16s; }
      .fade-in.delay-3 { animation-delay:.24s; }

      @keyframes fadeInUp{
        to { opacity:1; transform:none; }
      }

      /* -------- Page header tweaks (keeps same structure but adjusts spacing/typography) -------- */
      .page .section.section-md { padding-top:36px; padding-bottom:48px; }
      .page h2 { font-family: "Playfair Display", serif; font-size:32px; margin-bottom:.4rem; color: #2b2b2b; }
      .divider-lg { height:1px; background:linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0)); margin:12px 0 22px; }

      /* -------- Service boxes (beautified) -------- */
      .service-box {
        background:var(--card-bg);
        border-radius:var(--radius);
        padding:18px;
        box-shadow: 0 8px 22px rgba(35,35,35,0.06);
        transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
        height:100%;
        display:flex;
        flex-direction:column;
      }
      .service-box h4 { font-size:18px; margin-bottom:6px; color:#161616; }
      .service-box p { color:var(--muted); margin-bottom:10px; flex:1; }
      .service-box .price { font-weight:700; color:var(--accent-dark); margin-top:10px; }
      .service-box .badge { display:inline-block; background:linear-gradient(90deg,var(--accent),var(--accent-dark)); color:#fff; padding:6px 10px; border-radius:999px; font-size:13px; margin-bottom:10px; }
      .service-box:hover { transform: translateY(-8px); box-shadow: 0 18px 36px rgba(35,35,35,0.12); }

      .row.row-40 { gap: var(--gap); display:flex; flex-wrap:wrap; margin-left:-12px; margin-right:-12px; }
      .row.row-40 > [class*="col-"] { padding-left:12px; padding-right:12px; margin-bottom:20px; }

      /* responsive column fallback using grid when available */
      .service-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }

      /* CTA for each service */
      .service-cta { margin-top:12px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
      .button-ghost { border:1px solid rgba(0,0,0,0.06); padding:8px 12px; border-radius:10px; background:transparent; cursor:pointer; }
      .button-primary-small { background:var(--accent); border:none; color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; box-shadow: 0 6px 18px rgba(231,111,138,0.18); }

      /* -------- Dedicated gallery layout -------- */
      .gallery-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-top:8px; }
      .gallery-item { overflow:hidden; border-radius:12px; position:relative; box-shadow: 0 10px 28px rgba(21,21,21,0.06); cursor:pointer; }
      .gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transition:transform .45s cubic-bezier(.2,.9,.2,1); }
      .gallery-item:hover img { transform:scale(1.06); }

      /* Lightbox modal - simple */
      .lb-backdrop { position:fixed; inset:0; background:rgba(11,11,11,0.72); display:none; align-items:center; justify-content:center; z-index:2000; }
      .lb-backdrop.show { display:flex; }
      .lb-content { max-width:90%; max-height:90%; border-radius:10px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,0.5); }
      .lb-content img { display:block; width:100%; height:auto; }

      /* responsive adjustments */
      @media (max-width: 992px) {
        .gallery-grid { grid-template-columns: repeat(2, 1fr); }
        .gallery-item { min-height:180px; }
      }
      @media (max-width: 576px) {
        .gallery-grid { grid-template-columns: 1fr; }
      }

      /* -------- FAQ styling (RD-like) -------- */
      .faq-card { background: #fff; border-radius:10px; box-shadow:0 10px 26px rgba(8,8,8,0.06); overflow:hidden; }
      .faq-question {
        padding:14px 18px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:8px;
      }
      .faq-question h5 { margin:0; font-size:16px; color:#222; }
      .faq-icon { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(180deg,#fff,#fff); color:var(--accent-dark); transition: transform .28s; }
      .faq-answer { padding:0 18px 16px 18px; color:var(--muted); max-height:0; overflow:hidden; transition: max-height .36s ease, padding .36s ease; }
      .faq-answer.open { padding:12px 18px 18px 18px; max-height:420px; }

      /* small helpers */
      .mt-5 { margin-top:32px; }
      .img-fluid { width:100%; height:auto; display:block; }

      /* small typography tweaks */
      table.table th, table.table td { vertical-align:middle; }

/* ---------- Floating sides (3-layer approach) ---------- */
.floating-sides {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* adjust if needed to be behind content */
}

.float-column {
  position: absolute;
  top: 0;
  width: 190px;
  pointer-events: none;
}

.left-column { left: 8px; }
.right-column { right: 8px; }

/* vertical wrapper: handles translateY + fade */
.float-wrap {
  position: absolute;
  left: 0;
  width: 170px;
  height: 170px;
  will-change: transform, opacity;
  opacity: 0; /* starts hidden, animation will fade in */
}

/* horizontal drift wrapper: handles translateX only */
.motion-wrap {
  width: 100%;
  height: 100%;
  will-change: transform;
  transform-origin: 50% 50%;
}

/* image: handles rotation/tilt (no translate) + glow via filter */
.float-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, filter;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.12)) brightness(1.08); /* glow-ish */
}

/* --- Keyframes --- */

/* vertical movement */
@keyframes verticalDown {
  0%   { transform: translateY(-260px); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(110vh); opacity: 0; }
}
@keyframes verticalUp {
  0%   { transform: translateY(110vh); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(-260px); opacity: 0; }
}

/* gentle horizontal sinusoidal-like drift (pure translateX) */
@keyframes sinDriftSimple {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(12px); }
  50%  { transform: translateX(0); }
  75%  { transform: translateX(-12px); }
  100% { transform: translateX(0); }
}

/* slight rotation + very small 3D tilt */
@keyframes tiltRotateSmall {
  0%   { transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg); }
  25%  { transform: rotateZ(1.0deg) rotateX(0.8deg) rotateY(-0.8deg); }
  50%  { transform: rotateZ(0deg) rotateX(-0.8deg) rotateY(0.8deg); }
  75%  { transform: rotateZ(-1.0deg) rotateX(0.8deg) rotateY(0.6deg); }
  100% { transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg); }
}

/* soft glow pulse applied to filter (no blur) */
@keyframes glowPulseSimple {
  0%   { filter: drop-shadow(0 10px 18px rgba(0,0,0,0.12)) brightness(1.04); }
  50%  { filter: drop-shadow(0 20px 30px rgba(0,0,0,0.18)) brightness(1.22); }
  100% { filter: drop-shadow(0 10px 18px rgba(0,0,0,0.12)) brightness(1.04); }
}

/* --------- Ensure animations run if inline durations not set --------- */
/* (JS below will set inline animation strings; this is fallback) */
.left-column .float-wrap { animation-name: verticalDown; animation-timing-function: linear; animation-iteration-count: infinite; }
.right-column .float-wrap { animation-name: verticalUp; animation-timing-function: linear; animation-iteration-count: infinite; }
.motion-wrap { animation-name: sinDriftSimple; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.float-img { animation-name: tiltRotateSmall, glowPulseSimple; animation-timing-function: ease-in-out, ease-in-out; animation-iteration-count: infinite, infinite; }