.elementor-75 .elementor-element.elementor-element-54b4f325{--display:flex;--min-height:95vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-75 .elementor-element.elementor-element-54b4f325:not(.elementor-motion-effects-element-type-background), .elementor-75 .elementor-element.elementor-element-54b4f325 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://triplizz.hu/wp-content/uploads/2025/12/971EED2C-8B45-4BEF-8B39-E9AA26F82056.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-75 .elementor-element.elementor-element-6c1be414{--display:flex;--min-height:0px;--justify-content:flex-end;--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-75 .elementor-element.elementor-element-1f13a83e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0100px) 0px;}.elementor-75 .elementor-element.elementor-element-1f13a83e img{width:300px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-75 .elementor-element.elementor-element-7f1a5f06{text-align:center;}.elementor-75 .elementor-element.elementor-element-7f1a5f06 .elementor-heading-title{font-family:"Archivo", Sans-serif;font-size:65px;font-weight:900;text-transform:uppercase;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;word-spacing:0em;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#02A6C2;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-75 .elementor-element.elementor-element-123d9d0b{padding:0% 8% 0% 8%;text-align:center;font-family:"Montserrat", Sans-serif;font-size:25px;font-weight:500;text-transform:none;font-style:normal;text-decoration:none;line-height:38px;letter-spacing:0px;word-spacing:0em;text-shadow:0px 0px 21px #02A6C2;color:#FFFFFF;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-75 .elementor-element.elementor-element-2a9b8af .elementor-button{background-color:#02A6C2;font-family:"Archivo", Sans-serif;font-size:18px;font-weight:800;text-transform:uppercase;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;word-spacing:0em;fill:#1B252F;color:#1B252F;border-radius:0px 0px 0px 0px;padding:20px 55px 20px 55px;}.elementor-75 .elementor-element.elementor-element-2a9b8af .elementor-button:hover, .elementor-75 .elementor-element.elementor-element-2a9b8af .elementor-button:focus{background-color:#1B252F;color:#02A6C2;}.elementor-75 .elementor-element.elementor-element-2a9b8af{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 58px) 0px;}.elementor-75 .elementor-element.elementor-element-2a9b8af .elementor-button:hover svg, .elementor-75 .elementor-element.elementor-element-2a9b8af .elementor-button:focus svg{fill:#02A6C2;}.elementor-75 .elementor-element.elementor-element-28cfd6e3{--display:flex;}@media(max-width:1024px){.elementor-75 .elementor-element.elementor-element-54b4f325{--min-height:100vh;}.elementor-75 .elementor-element.elementor-element-6c1be414{--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:13px;--padding-bottom:13px;--padding-left:13px;--padding-right:13px;}.elementor-75 .elementor-element.elementor-element-7f1a5f06 .elementor-heading-title{font-size:29px;line-height:1em;letter-spacing:0px;word-spacing:0em;}.elementor-75 .elementor-element.elementor-element-123d9d0b{padding:0% 0% 0% 0%;font-size:20px;line-height:1.2em;}.elementor-75 .elementor-element.elementor-element-2a9b8af .elementor-button{padding:15px 25px 15px 25px;}}@media(max-width:767px){.elementor-75 .elementor-element.elementor-element-6c1be414{--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-75 .elementor-element.elementor-element-7f1a5f06 .elementor-heading-title{font-size:41px;}.elementor-75 .elementor-element.elementor-element-123d9d0b{padding:0% 5% 0% 5%;}.elementor-75 .elementor-element.elementor-element-2a9b8af{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-75 .elementor-element.elementor-element-2a9b8af .elementor-button{font-size:16px;}}@media(min-width:768px){.elementor-75 .elementor-element.elementor-element-6c1be414{--width:100%;}}@media(min-width:1025px){.elementor-75 .elementor-element.elementor-element-54b4f325:not(.elementor-motion-effects-element-type-background), .elementor-75 .elementor-element.elementor-element-54b4f325 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}/* Start custom CSS for html, class: .elementor-element-24226071 *//* ===== SZEKCIÓ: hosszú blokk, hogy legyen mit görgetni ===== */

.triplizz-scroll-scene {
  position: relative;
  height: 220vh;
  background: linear-gradient(to bottom, #f7f7f7 0%, #ececec 55%, #dedede 100%);
  overflow: visible;
}

.triplizz-scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
}

.triplizz-scroll-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== STAGE – fix 400x400-as rajzterület, ezt nagyítjuk fel ===== */

.triplizz-scroll-stage {
  position: relative;
  width: 400px;
  height: 400px;
  transform: scale(1.4); /* ettől lesz szép nagy az út + autó */
  transform-origin: center center;
}

/* ===== ÚT: ugyanaz a path 3 réteggel ===== */

.triplizz-road-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Külső fehér szegély */
.triplizz-road-border {
  fill: none;
  stroke: #ffffff;
  stroke-width: 52;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Fekete aszfalt – keskenyebb, ez az "út" */
.triplizz-road-asphalt {
  fill: none;
  stroke: #000000;
  stroke-width: 36;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Szaggatott középvonal */
.triplizz-road-line {
  fill: none;
  stroke: #f5f5f5;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14 12;
  opacity: 0.9;
}

/* ===== KISAUTÓ – felülnézet, a narancs autó formájára utalva, de fekete-fehérben ===== */

.triplizz-car {
  position: absolute;
  width: 70px;
  height: 140px; /* hosszúkás, mint a mintán */
  z-index: 2;
  pointer-events: none;

  /* alap helyzet – az offset-path felül fogja írni */
  left: 40px;
  top: 260px;
}

.triplizz-car-body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000000;
  border-radius: 38px;
  border: 3px solid #111111;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

/* oldalsó "ablakcsíkok" – a narancs autó fekete sávjaihoz hasonlóan */
.triplizz-car-side {
  position: absolute;
  top: 14%;
  bottom: 14%;
  width: 14%;
  background: #1a1a1a;
  box-shadow: inset 0 0 0 2px #000000;
}

.triplizz-car-side--left {
  left: 4%;
  border-radius: 99px 0 0 99px;
}

.triplizz-car-side--right {
  right: 4%;
  border-radius: 0 99px 99px 0;
}

/* Ablakok – elöl, tető, hátul (világosszürke "üveg") */

.triplizz-car-window {
  position: absolute;
  left: 18%;
  right: 18%;
  border-radius: 18px;
  background: linear-gradient(145deg, #f8f8f8, #c2c2c2);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45);
}

.triplizz-car-window--front {
  top: 8%;
  height: 22%;
}

.triplizz-car-window--roof {
  top: 36%;
  height: 26%;
}

.triplizz-car-window--back {
  bottom: 10%;
  height: 18%;
}

/* ===== MOZGÁS AZ ÚTON – offset-path + animáció ===== */

/* útvonal – ugyanaz, mint az SVG path */
.triplizz-car {
  offset-path: path(
    "M40 380
     Q 150 320 140 260
     Q 120 190 220 180
     Q 320 170 300 110
     Q 280 60 360 40"
  );
  -webkit-offset-path: path(
    "M40 380
     Q 150 320 140 260
     Q 120 190 220 180
     Q 320 170 300 110
     Q 280 60 360 40"
  );
  offset-rotate: auto;
  offset-distance: 0%;
}

/* Animáció: 0 → 100% a path mentén */
@keyframes triplizz-car-on-road {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

/* amikor a JS ráteszi ezt az osztályt, elindul a menet */
.triplizz-car--animate {
  animation: triplizz-car-on-road 2.5s ease-out forwards;
}

/* ===== RESZPONZÍV ===== */

@media (max-width: 768px) {
  .triplizz-scroll-scene {
    height: 200vh;
  }

  .triplizz-scroll-stage {
    transform: scale(1.1);
  }

  .triplizz-car {
    width: 60px;
    height: 120px;
  }
}/* End custom CSS */