.elementor-kit-104{--e-global-color-primary:#D64527;--e-global-color-secondary:#222222;--e-global-color-text:#555555;--e-global-color-accent:#B43A21;--e-global-color-a3d701c:#D64527;--e-global-color-b95d84a:#B43A21;--e-global-color-5702931:#222222;--e-global-color-d666106:#555555;--e-global-color-6960483:#FAF8F4;--e-global-color-ec25154:#FFFFFF;--e-global-color-a62be5d:#444444;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:400;line-height:1.7px;letter-spacing:0px;}.elementor-kit-104 e-page-transition{background-color:#FFBC7D;}.elementor-kit-104 h1{font-family:"Poppins", Sans-serif;font-size:46px;font-weight:700;text-transform:uppercase;line-height:1.2px;letter-spacing:1.5px;}.elementor-kit-104 h2{font-family:"Poppins", Sans-serif;font-size:36px;font-weight:700;line-height:1.3px;}.elementor-kit-104 h3{font-family:"Poppins", Sans-serif;font-size:28px;font-weight:600;line-height:1.3px;}.elementor-kit-104 h4{font-family:"Poppins", Sans-serif;font-size:22px;font-weight:600;}.elementor-kit-104 button,.elementor-kit-104 input[type="button"],.elementor-kit-104 input[type="submit"],.elementor-kit-104 .elementor-button{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:600;text-transform:uppercase;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-104{font-size:17px;}.elementor-kit-104 h1{font-size:38px;line-height:1.2em;letter-spacing:1px;}.elementor-kit-104 h2{font-size:30px;line-height:1.3em;}.elementor-kit-104 h3{font-size:24px;line-height:1.3em;}.elementor-kit-104 h4{font-size:20px;}.elementor-kit-104 button,.elementor-kit-104 input[type="button"],.elementor-kit-104 input[type="submit"],.elementor-kit-104 .elementor-button{font-size:15px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-104{font-size:16px;line-height:1.5em;}.elementor-kit-104 h1{font-size:30px;line-height:1.2em;letter-spacing:0.5px;}.elementor-kit-104 h2{font-size:24px;line-height:1.3em;}.elementor-kit-104 h3{font-size:20px;line-height:1.3em;}.elementor-kit-104 h4{font-size:18px;}.elementor-kit-104 button,.elementor-kit-104 input[type="button"],.elementor-kit-104 input[type="submit"],.elementor-kit-104 .elementor-button{font-size:14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================
   HERO PANELS (TABLET/PC)
   ========================= */

/* Square panels for tablet/desktop hero */
.square-panel {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Make the right panel a “stage” */
#hero-right {
  position: relative;
  overflow: hidden;
}

/* Demo + Viewer overlay each other (not stack) */
#hero-right .hero-demo,
#hero-right .hero-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Layering: demo below, viewer above */
#hero-right .hero-demo { z-index: 1; }
#hero-right .hero-viewer { z-index: 2; }

/* Default state: show demo, hide viewer (NO display toggles) */
#hero-right .hero-demo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#hero-right .hero-viewer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Viewer mode: show viewer, hide demo (NO display toggles) */
#hero-right.is-viewer .hero-demo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#hero-right.is-viewer .hero-viewer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Ensure demo images cover the square stage */
#hero-right .hero-demo .elementor-widget-image,
#hero-right .hero-demo .elementor-widget-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ensure viewer widget and image fill the stage */
#hero-right .hero-viewer,
#hero-right .hero-viewer .elementor-widget-image,
#hero-right .hero-viewer .elementor-widget-container {
  height: 100%;
}

#hero-right .hero-viewer-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* =========================
   CROSSFADE LOOP (DEMO)
   ========================= */

/* Initial state */
#hero-right .hero-demo-img--a img { opacity: 1; }
#hero-right .hero-demo-img--b img { opacity: 0; }

/* Symmetric crossfade: 12s loop, slower fades */
#hero-right .hero-demo-img--a img {
  animation: heroFadeA 12s infinite ease-in-out;
}

#hero-right .hero-demo-img--b img {
  animation: heroFadeB 12s infinite ease-in-out;
}

@keyframes heroFadeA {
  0%   { opacity: 1; }
  25%  { opacity: 1; }   /* hold */
  50%  { opacity: 0; }   /* fade out */
  75%  { opacity: 0; }   /* hidden */
  100% { opacity: 1; }   /* fade in */
}

@keyframes heroFadeB {
  0%   { opacity: 0; }
  25%  { opacity: 0; }   /* hidden */
  50%  { opacity: 1; }   /* fade in */
  75%  { opacity: 1; }   /* hold */
  100% { opacity: 0; }   /* fade out */
}

/* Reduced motion: freeze on first frame */
@media (prefers-reduced-motion: reduce) {
  #hero-right .hero-demo-img--a img,
  #hero-right .hero-demo-img--b img {
    animation: none;
  }
  #hero-right .hero-demo-img--b img {
    opacity: 0;
  }
}


/* =========================
   LEFT PANEL GRID (TABLET/PC)
   ========================= */

.hero-left-d {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0;
  box-sizing: border-box;
}

/* Force each tile square */
.hero-left-d > * {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Thumbnail images */
.hero-left-d .hero-thumb-d img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
/* Pause demo crossfade while in viewer mode */
#hero-right.is-viewer .hero-demo-img--a img,
#hero-right.is-viewer .hero-demo-img--b img {
  animation-play-state: paused;
}
/* Viewer inset padding – makes viewer feel slightly smaller */
#hero-right.is-viewer .hero-viewer {
  padding: 2px;           /* adjust 6–14px to taste */
  box-sizing: border-box;
}
/* Demo inset padding – makes the crossfade feel slightly smaller */
#hero-right:not(.is-viewer) .hero-demo {
  padding: 2px;            /* try 6–14px */
  box-sizing: border-box;
}
/* Make the demo images respect the demo padding */
#hero-right:not(.is-viewer) .hero-demo .elementor-widget-image,
#hero-right:not(.is-viewer) .hero-demo .elementor-widget-image img {
  inset: 2px !important;   /* must match the padding above */
}
/* ================================
   LEFT GRID (NO WRAPPER) — SQUARE + EVEN GAPS
================================ */

/* The left container is BOTH the square stage and the grid */
.square-panel.hero-left-d {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);   /* forces 3 equal-height rows */
  gap: 4px;                              /* equal row/column spacing */
  padding: 10px;                         /* match right demo/viewer inset */
  box-sizing: border-box;
  align-content: stretch;
}

/* Remove default Elementor widget spacing that creates extra vertical gaps */
.square-panel.hero-left-d .elementor-widget,
.square-panel.hero-left-d .elementor-widget-container {
  margin: 0 !important;
}

/* Each grid item should fill its cell */
.square-panel.hero-left-d > * {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* Thumbnail images fill their tiles */
.square-panel.hero-left-d .hero-thumb-d,
.square-panel.hero-left-d .hero-thumb-d img {
  display: block;
  width: 100%;
  height: 100%;
}

.square-panel.hero-left-d .hero-thumb-d img {
  object-fit: cover;
  cursor: pointer;
}
/* ================================
   LEFT GRID — TIGHTEN PERIMETER
================================ */

/* Left container is square + grid */
.square-panel.hero-left-d {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;          /* internal spacing */
  padding: 4px;      /* perimeter spacing (match gap) */
  box-sizing: border-box;
}

/* Remove Elementor widget spacing that adds extra perimeter/row gaps */
.square-panel.hero-left-d .elementor-widget,
.square-panel.hero-left-d .elementor-widget-container {
  margin: 0 !important;
}

/* Fill grid cells */
.square-panel.hero-left-d > * {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* Fill tiles */
.square-panel.hero-left-d .hero-thumb-d,
.square-panel.hero-left-d .hero-thumb-d img {
  display: block;
  width: 100%;
  height: 100%;
}

.square-panel.hero-left-d .hero-thumb-d img {
  object-fit: cover;
}
/* ================================
   HERO DEMO CAPTIONS
================================ */

/* Base caption style */
#hero-right .hero-demo-caption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0px;
  z-index: 3;

  color: #FFFFFF;
  font-size: 1.0rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-weight: 500;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.0)
  );
  padding: 14px 10px 6px; /* extra padding at bottom for fade */
  border-radius: 0;

  opacity: 0;
  pointer-events: none;
}

/* Caption A syncs with image A */
#hero-right .hero-demo-caption--a {
  animation: heroFadeA 12s infinite ease-in-out;
}

/* Caption B syncs with image B */
#hero-right .hero-demo-caption--b {
  animation: heroFadeB 12s infinite ease-in-out;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #hero-right .hero-demo-caption--a,
  #hero-right .hero-demo-caption--b {
    animation: none;
  }

  #hero-right .hero-demo-caption--a {
    opacity: 1;
  }

  #hero-right .hero-demo-caption--b {
    opacity: 0;
  }
}
#hero-right .hero-demo-caption {
  text-align: center;
}
@media (min-width: 1025px) {
  .page-frame {
    width: 100%;
    max-width: 880px;   /* adjust as desired */
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (min-width: 1025px) {
  .accord-grid .three-across {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: start;
  }

  .accord-grid .three-across > .accord-card {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
}
/* Normalize text widget line-height on Tablet + Desktop */
@media (min-width: 768px) {
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p,
  .elementor-widget-text-editor li {
    line-height: 1.25;
  }
}/* End custom CSS */