/************************************ 
hero section animation start 
*************************************/
.fade-in {
  --from-opacity: 0;
  --to-opacity: 1;
  --duration: 0.8;
  --ease: ease-out;
}

.fade-in.header-logo {
  --from-top: 80px;
  --to-top: 0px;
}

.header-menu li {
  --from-top: 80px;
  --to-top: 0px;
}

.fade-in.hero-left-image {
  --from-top: 80px;
  --to-top: 0px;
}

.fade-in.hero-right-text {
  --from-top: 80px;
  --to-top: 0px;
}

.fade-in.hero-juich-left {
  --from-left: -200px;
  --to-left: 0px;
}

.fade-in.hero-button {
  --from-top: 80px;
  --to-top: 0px;
}

/************************************ 
hero section scroll animation 
*************************************/
.scroll-effect.hero-left-image {
  --yEnd: 200px;
  --start: top 20%;
  --end: bottom top;

  --opacityEnd: 0;
}

@media screen and (max-width: 800px) {
  .scroll-effect.hero-left-image {
    --yEnd: -200px;
  }
}

.scroll-effect.hero-right-text {
  --yEnd: -200px;
  --start: top 30%;
  --end: bottom top;
	
  --opacityEnd: 0;
}

.scroll-effect.hero-juich-left {
  --xEnd: -500px;
  --start: top 0%;
  --end: bottom top;
	
  --opacityEnd: 0.5;
}

.scroll-effect.juice-drop-animation {
  --yEnd: 800px;
  --start: top 30%;
  --end: bottom top;
}

.scroll-effect.juice-drop-animation1 {
  --yEnd: 100px;
  --start: top 40%;
  --end: bottom top;
	
  --scaleEnd: 0.5;
}

.scroll-effect.juice-drop-animation2 {
  --xEnd: -100px;
  --start: top 40%;
  --end: bottom top;
	
  --opacityEnd: 0.5;
}

.scroll-effect.juice-drop-animation3 {
  --yEnd: -100px;
  --start: top 40%;
  --end: bottom top;
	
  --opacityEnd: 0.5;
}

.scroll-effect.hero-button {
  --yEnd: -200px;
  --start: top 60%;
  --end: bottom top;
	
  --scaleEnd: 0;
  --opacityEnd: 0;
}

/************************************ 
scroll-effect insurance section animation 
*************************************/
.split-text .letter {
  display: inline-block;
  will-change: transform, opacity;
}

.split-text.insurance-heading {
  --animationStart: 80%;
}

.scroll-effect.insurance-cap {
  --rotateEnd: 360deg;
  --start: top 95%;
  --end: bottom 55%;
}

.scroll-effect.insurance-juice-drop-animation1 {
  --xEnd: -200px;
  --start: top 60%;
}

.scroll-effect.insurance-juice-drop-animation2 {
  --xEnd: 200px;
  --start: top 60%;
}

.scroll-effect.insurance-juice-drop-animation3 {
  --yEnd: 200px;
  --start: top 60%;
}

.scroll-effect.insurance-juice-drop-animation4 {
  --xEnd: -200px;
  --start: top 60%;
}

.scroll-effect.insurance-juice-drop-animation5 {
  --yEnd: 300px;
  --start: top 60%;
}

.scroll-effect.insurance-juich-left {
  --xEnd: 500px;
  --start: top 0%;
}

.card-scroll-animation.insurance-card {
  --top: 100px;
  --animationStart: 80%;
  transform-style: preserve-3d;
  will-change: transform;
}

/************************************ 
scroll-effect service section animation 
*************************************/
.split-text.service-heading {
  --animationStart: 80%;
}

.card-scroll-animation.service-card {
  --top: 60px;
  transform-style: preserve-3d;
  will-change: transform;
}

.scroll-effect.service-juich-left {
  --xEnd: -500px;
  --start: top 10%;
}

.scroll-effect.service-juice-drop-animation1 {
  --xEnd: 100px;
  --start: top 60%;
}

.scroll-effect.service-button {
  --scaleStart: 0;
  --start: top 130%;
  --end: bottom 60%;
}

.scroll-effect.service-juich-right {
  --xEnd: 500px;
  --start: top 50%;
}

/************************************ 
scroll-effect about section animation 
*************************************/
.split-text.about-heading {
  --animationStart: 70%;
}

.scroll-effect.about-button {
  --scaleStart: 0;
  --start: top 130%;
  --end: bottom 80%;
}

.scroll-effect.about-juice-drop-animation1,
.scroll-effect.about-juice-drop-animation2,
.scroll-effect.about-juice-drop-animation3 {
  --xEnd: -200px;
  --start: top 60%;
}

.scroll-effect.about-juice-drop-animation6,
.scroll-effect.about-juice-drop-animation7,
.scroll-effect.about-juice-drop-animation8 {
  --yEnd: 200px;
  --start: top 60%;
}

.card-scroll-animation.about-text {
  --top: 40px;
  --animationStart: 100%;
}

@media screen and (max-width: 800px) {
  .card-scroll-animation.about-text {
    --animationStart: 80%;
  }
}

.scroll-effect.about-cup {
  --rotateEnd: 360deg;
  --start: top 100%;
  --end: bottom 80%;
}


/************************************ 
scroll-effect testimonial section animation 
*************************************/
.scroll-effect.testimonial-juich-right {
  --xEnd: 500px;
  --start: top 50%;
}

.split-text.testimonial-heading {
  --animationStart: 70%;
}

.scroll-effect.test-juice-drop-animation6,
.scroll-effect.test-juice-drop-animation3,
.scroll-effect.test-juice-drop-animation1 {
  --xEnd: -200px;
  --start: top 60%;
}

.scroll-effect.test-juice-drop-animation8 {
  --xEnd: 200px;
  --start: top 60%;
}

.scroll-effect.test-juice-drop-animation1,
.scroll-effect.test-juice-drop-animation6 {
  --yEnd: 200px;
  --start: top 60%;
}



/* Small Business */
.fade-in.busniess-single-page-header,
.fade-in.insurance-single-page-header,
.fade-in.real-single-page-header,
.fade-in.law-single-page-header {
  --from-top: 80px;
  --to-top: 0px;
  --from-opacity: 0;
  --to-opacity: 1;
  --duration: 0.8;
  --ease: ease-out;
}
.scroll-effect.survice_card {
  --yStart: 100px;
  --opacityStart: 0;
  --start: top 100%;
  --scrub: none;
}



/* service page  */
.fade-in.servicepage-single-page-header {
  --from-top: 80px;
  --to-top: 0px;
  --from-opacity: 0;
  --to-opacity: 1;
  --duration: 0.8;
  --ease: ease-out;
}

.split-text.servicepage-single-page-header-contract-heading {
  --animationStart: 80%;
}

.fade-in.service-card {
  --from-top: 80px;
  --to-top: 0px;
  --from-opacity: 0;
  --to-opacity: 1;
  --duration: 0.8;
  --ease: ease-out;
}

/* contant page  */
.fade-in.contant-single-page-header {
  --from-top: 80px;
  --to-top: 0px;
  --from-opacity: 0;
  --to-opacity: 1;
  --duration: 0.8;
  --ease: ease-out;
}

.fade-in.contant {
  --from-top: 80px;
  --to-top: 0px;
  --from-opacity: 0;
  --to-opacity: 1;
  --duration: 0.8;
  --ease: ease-out;
}