.case-leaf{ position:fixed; top:0; right:0; width:100vw; height:100vh; filter: blur(0.3rem); overflow:hidden; }
.case-leaf .leaf{ position:absolute; width:45rem; height:26rem; top:-9rem; right:-18rem; left:auto; background-color:var(--colorA); transform:rotate(60deg); }
.case-content{ position:relative; }
.case-image-container{ position:relative; width:100%; height:20rem; }
.case-image{ position:relative; width:100%; height: 100%; background-size:contain; background-position:center; background-repeat:no-repeat; }
.case-title{ margin:0 0 2rem -0.2rem; line-height:1; font-size:2rem; font-weight:100; }
.case-text{ position:relative; }
.case-text h1{ font-weight:100; margin:0 0 1.5rem -0.3rem; }
.case-text p{ font-size:2rem; }
.case-conversion{ position:absolute; top:25%; left:3%; width:9rem; height:12rem; background-color:var(--colorF); border-radius:var(--radius); }
.case-conversion-top-1{ position:absolute; top:1rem; left:1rem; }
.case-conversion-top-2{ position:absolute; top:1rem; right:1rem; text-align:right; }
.case-conversion-text{ color:var(--color); font-size:0.5rem; }
.case-conversion-number{ color:var(--color); font-size:0.7rem ; }
.case-conversion-odometer{ position:absolute; top:3rem; left:50%; transform:translateX(-50%); width:8rem; height:4rem; overflow:visible; }
.case-conversion-color{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:8rem; height:4rem; overflow:hidden; }
.case-conversion-color::before{ content:''; position:absolute; top:0; left:0; width:8rem; height:8rem; background-image:conic-gradient(from 269deg at 50% 50%, #FCC138 0deg, #ED1DF1 180.1deg, #8200F7 360deg); border-radius:50%; }
.case-conversion-bottom{ position:absolute; bottom:1rem; left:0.5rem; width:calc(100% - 1rem); border-top:1px solid var(--color); padding:0.3rem 0.6rem 0 0.6rem; }
.case-conversion-arrow{ position:absolute; left:50%; top:50%; transform:translateX(-50%); width:3.6rem; height:3.6rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61' height='47' viewBox='0 0 61 47' fill='none'%3E%3Cg filter='url(%23filter0_d_219_33)'%3E%3Cpath d='M36 19.9999C36 27.1796 30.1797 32.9999 23 32.9999C15.8203 32.9999 10 27.1796 10 19.9999C10 12.8202 15.8203 6.99994 23 6.99994C30.1797 6.99994 36 12.8202 36 19.9999Z' fill='%23FFFBFB'/%3E%3Cpath d='M50.8782 6.42432L34.1137 20.0973L29.672 10.702L50.8782 6.42432Z' fill='%23FFFCFC'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_219_33' x='0.3' y='0.724317' width='60.2782' height='45.9757' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='4.85'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_219_33'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_219_33' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") no-repeat 0.35rem 0.56rem; }
.case-conversion-arrow{ animation:gira 6s ease infinite; }
.Ncase-conversion-arrow::after{ content:''; position:absolute; top:50%; left:50%; width:1.5rem; height:1.5rem; transform:translate(-50%, -50%); border-radius:50%; background-color:rgba(0,0,0,0.3); }
@keyframes gira{
	0%{ transform:translateX(-50%) rotate(-130deg); }
	20%{ transform:translateX(-50%) rotate(0deg); }
	80%{ transform:translateX(-50%) rotate(0deg); }
	100%{ transform:translateX(-50%) rotate(-130deg); }
}
.case-analytics{ position:absolute; bottom:-14%; right:0; width:15rem; height:8rem; background-color:var(--colorW); border-radius:var(--radius); }
.case-analytics-title{ position:absolute; top:1.5rem; width:100%; color:var(--color); font-size:0.7rem ; text-align:center; }
.case-analytics-bars{ position:absolute; display:flex; bottom:0.75rem; left:1rem; width:calc(100% - 2rem); height:4rem; justify-content:space-between; }
.case-analytics-bars > div{ position:relative; width:1rem; height:1rem; background-color:var(--colorH); border-radius:var(--radiusSmall); align-self:end; }
.case-analytics-bars > div.on{ background-color:var(--colorG); }
@media screen and (min-width: 768px) {
	.case-image-container{ height:35rem; }
	.case-image{ position:absolute; width:180%; right:0; left:auto; background-position:center right; }
	.case-leaf .leaf{ width:95rem; height:54rem; top:-25rem; right:-30rem; }
	.case-conversion{ top:-3%; left:30%; width:12rem; height:12rem; }
	.case-conversion-bottom{ bottom:1rem; left:1rem; width:calc(100% - 2rem); }
	.case-analytics{ bottom:10%; }
}

.case-content{ position:relative; width:100%; padding:6rem 0; background:linear-gradient(0deg, rgba(255, 255, 255, 0.22) 6.38%, rgba(209, 243, 226, 0.61) 16.68%, rgba(15, 24, 250, 0.31) 100%); }
