.elementor-kit-7{--e-global-color-primary:#F0F0F0;--e-global-color-secondary:#F0F0F0;--e-global-color-text:#F0F0F0;--e-global-color-accent:#A18F7E;--e-global-color-a66cf6a:#A5EFFF;--e-global-color-312bded:#AAA9A9;--e-global-color-16a35c0:#5B5B5B;--e-global-color-cc36676:#1F1F1F;--e-global-color-b4e77ef:#16171A;--e-global-color-7df86a9:#F9F9F9;--e-global-color-b3cb55a:#F0F0F0;--e-global-color-e47de1d:#121012;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-line-height:1.15em;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-text-font-family:"Inter";--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:1.2rem;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.6em;--e-global-typography-accent-letter-spacing:0.1em;background-color:var( --e-global-color-cc36676 );color:var( --e-global-color-b3cb55a );font-family:"Inter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-size:1.2rem;line-height:1.6em;--e-page-transition-entrance-animation:e-page-transition-slide-out-up;--e-page-transition-exit-animation:e-page-transition-slide-in-up;--e-page-transition-animation-duration:400ms;--e-preloader-animation-duration:1000ms;--e-preloader-delay:0ms;--e-preloader-color:#FFF;--e-preloader-size:12px;}.elementor-kit-7 e-page-transition{background-color:var( --e-global-color-e47de1d );}.elementor-kit-7 p{margin-block-end:20px;}.elementor-kit-7 a{color:var( --e-global-color-accent );}.elementor-kit-7 a:hover{color:var( --e-global-color-312bded );}.elementor-kit-7 h1{color:var( --e-global-color-primary );font-size:3.815rem;font-weight:500;letter-spacing:-5px;}.elementor-kit-7 h2{color:var( --e-global-color-primary );font-size:3.052rem;font-weight:500;letter-spacing:-2.2px;}.elementor-kit-7 h3{color:var( --e-global-color-b3cb55a );font-size:2.441rem;font-weight:500;letter-spacing:-1px;}.elementor-kit-7 h4{color:var( --e-global-color-b3cb55a );font-size:1.953rem;font-weight:400;text-transform:uppercase;letter-spacing:0em;}.elementor-kit-7 h5{color:var( --e-global-color-b3cb55a );font-size:1.563rem;font-weight:500;}.elementor-kit-7 h6{color:var( --e-global-color-b3cb55a );font-size:1.25rem;font-weight:500;letter-spacing:0.01em;}.elementor-kit-7 img{border-style:none;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.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);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@media(max-width:1024px){.elementor-kit-7 p{margin-block-end:20px;}.elementor-kit-7 h1{font-size:3.4rem;letter-spacing:-4em;}.elementor-kit-7 h2{font-size:2.75rem;letter-spacing:-2.2px;}.elementor-kit-7 h3{font-size:2.25rem;letter-spacing:-1px;}.elementor-kit-7 h4{font-size:1.75rem;}.elementor-kit-7 h5{font-size:1.45rem;}.elementor-kit-7 h6{font-size:1.25rem;letter-spacing:0.01em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{font-size:1rem;line-height:1.5em;}.elementor-kit-7 p{margin-block-end:15px;}.elementor-kit-7 h1{font-size:3.05rem;letter-spacing:-3em;}.elementor-kit-7 h2{font-size:2.25rem;letter-spacing:-1.8px;}.elementor-kit-7 h3{font-size:1.95rem;letter-spacing:-1px;}.elementor-kit-7 h4{font-size:1.563rem;}.elementor-kit-7 h5{font-size:1.375rem;}.elementor-kit-7 h6{font-size:1.2rem;line-height:1.5em;letter-spacing:0.01rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================
   Custom Scrollbar Colors
   Track: #16171A
   Thumb: #A18F7E
   ========================= */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #A18F7E #1f1f1f; /* thumb | track */
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: #16171A;
}

::-webkit-scrollbar-thumb {
  background-color: #A18F7E;
  border-radius: 10px;
  border: 2px solid #16171A; /* inset look */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #b2a190; /* subtle hover lift */
}

/* =========================
  HEADER NAVIGATION
   ========================= */
   
/* Base: visible on load */
.header_v3 {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 99999;
  box-sizing: border-box;
  background: transparent !important;

  /* Visible by default */
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* We only "arm" the slide behavior after threshold */
.header_v3.v3_armed {
  transform: translateY(-110%);
}

/* When revealed (after threshold), slide into view */
.header_v3.v3_armed.v3_on {
  transform: translateY(0);
}

/* Dark glass blur layer (OFF by default) */
.header_v3::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  backdrop-filter: blur(26px) saturate(175%);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  background: rgba(14, 14, 18, 0.74);

  opacity: 0;
  transition: opacity 220ms ease;
}

/* Sheen + border (OFF by default) */
.header_v3::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 45%,
    rgba(255,255,255,0.00) 100%
  );
  border-bottom: 1px solid rgba(255,255,255,0.10);

  opacity: 0;
  transition: opacity 220ms ease;
}

/* Glass turns ON only when active */
.header_v3.v3_on::before,
.header_v3.v3_on::after {
  opacity: 1;
}

/* Ensure header contents sit above pseudo layers */
.header_v3 > * {
  position: relative;
  z-index: 1;
}


/* =========================================================
GRADIENT OVERLAYS FOR HEADERS - DO NOT DELETE
   ========================================================= */
   
/* === GRADIENT TEXT v1 === */

.gradient-title {
  background: linear-gradient(90deg, #A5EFFF 0%, #EABFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* === GRADIENT TEXT v2 === */
.gradient-title2 {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #cfcfcf 30%,
    #9b9b9b 55%,
    #6f6f6f 75%,
    #4a4a4a 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* === GRADIENT TEXT v3 (Charcoal → Warm Neutral) === */
.gradient-title3 {
  background: linear-gradient(
    90deg,
    #1f1f1f 0%,
    #3a3a3a 25%,
    #6f6f6f 50%,
    #8b8379 70%,
    #A18F7E 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
   
/* =========================================================
ANTI STICKY BOUNCE - DO NOT DELETE
   ========================================================= */

.elementor-sticky,
.elementor-sticky--active,
.elementor-sticky__spacer{
  transition: none !important;
  animation: none !important;
}


/* =========================================================
BLOG POST PAGE: HERO BLURR EFFECT
   ========================================================= */

.hero-backdrop{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: 80vh;
  z-index: 0;
  pointer-events: none; /* ensures it never blocks clicks */
}

/* =========================================================
BLOG POST PAGE: HERO BLURR THAT SITS ON TOP OF HERO IMAGE
   ========================================================= */
   
.hero-backdrop::before{
  content:"";
  position:absolute;
  inset:0;

  backdrop-filter: blur(20px) saturate(165%);
-webkit-backdrop-filter: blur(20px) saturate(165%);


/* =========================================================
BLOG POST PAGE: SUBTLE TINT AND VIGNETTE
   ========================================================= */
  background:
    radial-gradient(circle at 50% 20%,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.30) 55%,
      rgba(0,0,0,0.55) 100%
    );

  pointer-events:none;
}

/* =========================================================
BLOG POST PAGE: PAGE BACKGROUND COLOR
   ========================================================= */

body.single-post{
  background-color: #1F1F1F;
}



/* SCROLL REVEAL FOOTER */

/* Hidden but still measurable + animatable */
.scroll-reveal {
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}

/* Visible */
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
}


/* =========================================================
SECTION BLURR EFFECT
   ========================================================= */


.container-backdrop::before{
  content:"";
  position:absolute;
  inset:0;

  backdrop-filter: blur(20px) saturate(165%);
-webkit-backdrop-filter: blur(20px) saturate(165%);


/* =========================================================
BLOG POST PAGE: SUBTLE TINT AND VIGNETTE
   ========================================================= */
  background:
    radial-gradient(circle at 50% 20%,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.30) 55%,
      rgba(0,0,0,0.55) 100%
    );

  pointer-events:none;
}

/* Loop Item container */
.loop-bg-zoom {
  position: relative;
  overflow: hidden;
}

/* ==============================
   IMAGE LAYER (your zoom layer)
   ============================== */

/* If Elementor overlay exists, animate that (it already has the bg image) */
.loop-bg-zoom .elementor-background-overlay {
  position: absolute;
  inset: 0;
  transform: scale(1);
  filter: saturate(50%);
  transition: transform 0.7s ease, filter 0.7s ease;
  will-change: transform, filter;
  z-index: 0;
}

/* Fallback: if you're using ::before to carry the image */
.loop-bg-zoom::before {
  content: "";
  position: absolute;
  inset: 0;

  /* Keep this only if YOU are relying on ::before for the image */
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1);
  filter: saturate(50%);
  transition: transform 0.7s ease, filter 0.7s ease;
  will-change: transform, filter;
  z-index: 0;
}

/* Hover state for image zoom */
.loop-bg-zoom:hover .elementor-background-overlay,
.loop-bg-zoom:hover::before {
  transform: scale(1.12);
  filter: saturate(100%);
}

/* ==============================
   GRADIENT OVERLAY LAYER
   (always above the image layer)
   ============================== */

/* Add gradient on top of Elementor overlay background image */
.loop-bg-zoom .elementor-background-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0) 60%
  );

  z-index: 1;
}

/* Fallback if Elementor overlay is not present */
.loop-bg-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0) 60%
  );

  z-index: 1;
}

/* Keep content above everything */
.loop-bg-zoom > * {
  position: relative;
  z-index: 2;
}


  z-index: 1;
}

/* Fallback gradient layer if no Elementor overlay exists */
.loop-bg-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    215deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0) 60%
  );

  z-index: 1;
}

/* Keep content above everything */
.loop-bg-zoom > * {
  position: relative;
  z-index: 2;
}



/* =========================================================
   HEADING GLASS FRAME
   - Applies to Heading widget wrapper only
   - Glass blur on #1f1f1f
   - Subtle #A5EFFF light from top-left
   - 1px gradient stroke
   - Elementor controls padding
   ========================================================= */

.heading-glass {
  position: relative;
  display: inline-flex;        /* shrink-wrap to content */
  align-self: flex-start;
  border-radius: inheritpx;
  isolation: isolate;

  /* Glass base + subtle blue from top-left */
  background:
    radial-gradient(circle at 18% 22%,
      rgba(165,239,255,0.22) 0%,
      rgba(165,239,255,0.12) 18%,
      rgba(165,239,255,0.04) 35%,
      rgba(31,31,31,0) 60%
    ),
    rgba(31,31,31,0.55);

  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);

  /* Lift only (no inner outline) */
  box-shadow: 0 12px 34px rgba(0,0,0,0.35);

  transform: translateZ(0);
}

/* Keep heading text above glass layers */
.heading-glass .elementor-heading-title {
  position: relative;
  z-index: 2;
}

/* 1px gradient stroke */
.heading-glass::before {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  padding: 1px;

  background: linear-gradient(
    135deg,
    #98F9FF 0%,
    #EABFFF 33%,
    #8726B7 100%
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
  z-index: 1;
}

/* =========================================================
CASE STUDY HERO AFFECT - DO NOT DELETE
   ========================================================= */
/* Case Studies Hero – Apple TV–style background sync */

.case-hero {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.case-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.15);
  filter: blur(42px) saturate(140%);
  transition: background-image 0.6s ease;
}

/* =========================================================
   Loop Carousel – strong center emphasis
   Scale offset slides to .80, gap = 30px
   Scope: .case-carousel
   ========================================================= */

/* Allow bleed */
.case-carousel,
.case-carousel .swiper,
.case-carousel .swiper-wrapper {
  overflow: visible !important;
}

/* Base: inactive slides */
.case-carousel .swiper-slide > * {
  transition:
    transform 320ms ease,
    filter 320ms ease,
    opacity 320ms ease;
  transform: scale(0.95);
  filter: saturate(0);
  opacity: 0.66;

 
  transform-origin: center center;
  will-change: transform;
}

/* Active / center slide */
.case-carousel .swiper-slide-active > *,
.case-carousel .swiper-slide-center > * {
  transform: scale(1);
  filter: saturate(1);
  opacity: 1;
}

/* Maintain EXACT 30px visible gap
   Pull neighbors inward by 15px each */


/* Visual priority */
.case-carousel .swiper-slide-active,
.case-carousel .swiper-slide-center {
  z-index: 3;
}




/* ==============================
   Loop Item rollover image reveal
   Cinematic, slower, smoother
   ============================== */

.dk-loop-item {
  position: relative;
}

/* --- Desktop default (hidden) --- */
.dk-loop-item .dk-rollover-reveal {
  position: relative;
  overflow: hidden;
  width: 0;
  opacity: 0;
  transform: translateX(-24px);

  transition:
    width 720ms cubic-bezier(.16, 1, .3, 1),
    opacity 420ms ease,
    transform 720ms cubic-bezier(.16, 1, .3, 1);

  will-change: width, transform, opacity;
}

/* Inner image glide */
.dk-loop-item .dk-rollover-reveal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: translateX(-36px);

  transition:
    transform 780ms cubic-bezier(.16, 1, .3, 1);

  transition-delay: 80ms; /* micro-luxury */
}

/* --- Hover / Focus --- */
.dk-loop-item:hover .dk-rollover-reveal,
.dk-loop-item:focus-within .dk-rollover-reveal {
  width: 110px;
  opacity: 1;
  transform: translateX(0);
}

.dk-loop-item:hover .dk-rollover-reveal img,
.dk-loop-item:focus-within .dk-rollover-reveal img {
  transform: translateX(0);
}

/* ==============================
   Tablet & Mobile
   Always visible, no animation
   ============================== */

@media (max-width: 1024px) {
  .dk-loop-item .dk-rollover-reveal {
    width: 110px;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .dk-loop-item .dk-rollover-reveal img {
    transform: none;
    transition: none;
  }
}

/* Slightly tighter on small screens */
@media (max-width: 767px) {
  .dk-loop-item .dk-rollover-reveal {
    width: 110px;
  }
}

/* ==============================
   Reduced motion
   ============================== */
@media (prefers-reduced-motion: reduce) {
  .dk-loop-item .dk-rollover-reveal,
  .dk-loop-item .dk-rollover-reveal img {
    transition: none;
    transform: none;
  }
}
/* ======================================
   BACKGROUND VIDEO — COVER + 3% BLEED
   ====================================== */

.video-cover-bleed {
  position: relative;
  overflow: hidden;
}

/* force a true clip region (prevents edge sampling artifacts) */
.video-cover-bleed .elementor-background-video-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0); /* key */
  -webkit-clip-path: inset(0); /* key */
}

/* overscale the *video* and use 3D transform to stabilize */
.video-cover-bleed .elementor-background-video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: translate3d(-50%, -50%, 0) scale(1.08);
  -webkit-transform: translate3d(-50%, -50%, 0) scale(1.08);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  will-change: transform;
}



/* =========================================================
   ELEMENTOR FORM – FINAL COMPLETE CSS
   Scoped to .form-vpad-only
   ========================================================= */


/* =========================================================
   GLOBAL LABEL BASE STATE
   ========================================================= */
.form-vpad-only .elementor-field-label,
.form-vpad-only .elementor-field-option label,
.form-vpad-only .elementor-field-type-acceptance label {
  color: #A18F7E; /* inactive */
  transition: color 180ms ease, transform 180ms ease, opacity 180ms ease;
}


/* =========================================================
   TEXT FIELDS (FLOATING LABELS ONLY)
   Excludes: checkbox, acceptance, textarea
   ========================================================= */

.form-vpad-only
.elementor-field-group:not(.elementor-field-type-checkbox):not(.elementor-field-type-acceptance):not(.elementor-field-type-textarea){
  position: relative;
}

/* Label inside field */
.form-vpad-only
.elementor-field-group:not(.elementor-field-type-checkbox):not(.elementor-field-type-acceptance):not(.elementor-field-type-textarea)
.elementor-field-label{
  position: absolute;
  left: 0;
  padding-left: 15px; /* ✅ FIX: prevents column-gap shift */
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left top;
  pointer-events: none;
  margin: 0;
  opacity: 0.85;
}

/* Input spacing */
.form-vpad-only
.elementor-field-group:not(.elementor-field-type-checkbox):not(.elementor-field-type-acceptance):not(.elementor-field-type-textarea)
.elementor-field{
  padding-top: 22px;
  padding-bottom: 14px;
}

/* Focused state */
.form-vpad-only
.elementor-field-group:not(.elementor-field-type-checkbox):not(.elementor-field-type-acceptance):not(.elementor-field-type-textarea):focus-within
.elementor-field-label{
  transform: translateY(-145%) scale(0.85);
  color: #F9F9F9;
  opacity: 1;
}

/* Filled state (JS adds .has-value) */
.form-vpad-only
.elementor-field-group.has-value
.elementor-field-label{
  transform: translateY(-145%) scale(0.85);
  color: #F9F9F9;
  opacity: 1;
}


/* =========================================================
   CHECKBOX GRID (NOT ACCEPTANCE)
   ========================================================= */

.form-vpad-only
.elementor-field-type-checkbox
.elementor-field-subgroup{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* Checkbox cards */
.form-vpad-only
.elementor-field-type-checkbox
.elementor-field-option{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  border: 1px solid #5b5b5b;
  box-sizing: border-box;
}


/* =========================================================
   CHECKBOX CONTROLS (ALL CHECKBOXES incl. ACCEPTANCE)
   ========================================================= */

.form-vpad-only input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid #5b5b5b;
  accent-color: #A5EFFF;
}


/* =========================================================
   CHECKBOX + ACCEPTANCE LABEL COLOR (FIXED)
   Elementor structure: label > input + span
   ========================================================= */

/* When checkbox is checked, color the label */
.form-vpad-only
.elementor-field-option label:has(input[type="checkbox"]:checked),
.form-vpad-only
.elementor-field-type-acceptance label:has(input[type="checkbox"]:checked){
  color: #F9F9F9;
}

/* Label cleanup */
.form-vpad-only
.elementor-field-type-checkbox label,
.form-vpad-only
.elementor-field-type-acceptance label{
  margin: 0;
  line-height: 1.4;
}


/* =========================================================
   MOBILE: STACK CHECKBOX GRID
   ========================================================= */
@media (max-width: 767px){
  .form-vpad-only
  .elementor-field-type-checkbox
  .elementor-field-subgroup{
    grid-template-columns: 1fr;
  }
}
/* HERO: visible by default */
.hero-reveal {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
}

/* HERO hidden near bottom */
.hero-reveal.is-hidden {
	opacity: 0;
	transform: translateY(-12px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}

/* =========================================================
SCrolling image container
   ========================================================= */
   
/* Elementor-safe hover background scroll */
.dyn-scroll{
  min-height: 80vhpx; /* adjust */
  overflow: hidden;
  background-repeat: no-repeat !important;
  background-position: 50% 0% !important;
  transition: background-position 6s linear !important;
}

.dyn-scroll{ background-size: 100% auto !important; }


/* Hover scroll */
@media (hover: hover) and (pointer: fine){
  .dyn-scroll:hover{
    background-position: 50% 100% !important;
  }
}

/* Viewport */
.img-scroll-wrap{
  height: 80vh;
  overflow: hidden;
  position: relative;
}

/* Image wrapper */
.img-scroll-wrap .img-scroll-img{
  height: 100%;
}

.img-scroll-wrap .img-scroll-img img{
  transition: transform 6s linear;
}
.img-scroll-wrap:not(:hover) .img-scroll-img img{
  transition: transform 1.2s ease-out;
}


/* Actual image */
.img-scroll-wrap .img-scroll-img img{
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0);
  transition: transform 6s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

/* Hover scroll */
@media (hover: hover) and (pointer: fine){
  .img-scroll-wrap:hover .img-scroll-img img{
    transform: translateY(-60%);
  }
}

/* =========================================================
SCrolling image container
   ========================================================= */
   
/* Elementor-safe hover background scroll */
.dyn-scroll2 {
  min-height: 60vhpx; /* adjust */
  overflow: hidden;
  background-repeat: no-repeat !important;
  background-position: 50% 0% !important;
  transition: background-position 6s linear !important;
}

.dyn-scroll2 { background-size: 100% auto !important; }


/* Hover scroll */
@media (hover: hover) and (pointer: fine){
  .dyn-scroll:hover{
    background-position: 50% 100% !important;
  }
}

/* Viewport */
.img-scroll-wrap2{
  height: 60vh;
  overflow: hidden;
  position: relative;
}

/* Image wrapper */
.img-scroll-wrap2 .img-scroll-img2{
  height: 100%;
}

.img-scroll-wrap2 .img-scroll-img2 img{
  transition: transform 6s linear;
}
.img-scroll-wrap2:not(:hover) .img-scroll-img img{
  transition: transform 1.2s ease-out;
}


/* Actual image */
.img-scroll-wrap2 .img-scroll-img2 img{
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0);
  transition: transform 6s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

/* Hover scroll */
@media (hover: hover) and (pointer: fine){
  .img-scroll-wrap:hover .img-scroll-img img{
    transform: translateY(-60%);
  }
}/* End custom CSS */