/* =========================
FIXED BACKDROP ENGINE
========================= */

@media(min-width:769px){

.dwi-main-content{

position:relative;

}

/* FIXED LAYER */

.dwi-main-content::before{

content:'';

position:fixed;

top:0;

right:0;

width:35%;

height:100vh;

z-index:1;

pointer-events:none;

/* IMAGE */

background-image:
var(--dwi-fixed-backdrop);

background-size:
cover;

background-position:
top center;

background-repeat:
no-repeat;


}

/* content */

.dwi-main-content>*{

position:relative;

z-index:2;

}

}

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

@media(max-width:768px){

.dwi-main-content{

position:relative;

}

.dwi-main-content::before{

content:'';

position:fixed;

inset:0;

width:100vw;

height:100vh;

z-index:1;

pointer-events:none;

/* backdrop */

background-image:
var(--dwi-fixed-backdrop);

background-size:
cover;

/* penting */

background-position:
top center;

background-repeat:
no-repeat;

/* ringan */

transition:
background-image .5s linear;

}

/* content */

.dwi-main-content>*{

position:relative;

z-index:2;

}

}

/* =========================
HIDE OLD BACKDROP
========================= */

@media(min-width:769px){

.dwi-section-backdrop{

opacity:0 !important;

visibility:hidden;

}

}




/* =========================
FIX HERO MOBILE
========================= */

@media(max-width:768px){

.dwi-section-hero{

position:relative !important;

transform:none !important;

overflow:visible !important;

}

.dwi-hero{

position:relative !important;

transform:none !important;

overflow:visible !important;

}

}