html {
  scroll-behavior: smooth;
  }
  /* #root{max-height:1800px; overflow:hidden;} */

@media screen and (min-width:1440px) { /* Big Desktop */ }
@media screen and (max-width:768px) { /* tablet */ }
@media screen and (max-width:480px) { }
@media screen and (max-width:375px) {}


#grp1{position:absolute; top: 328px; right: -6px; z-index:2;}
#grp2{position:absolute; top: -52px; left: 27%;  z-index:3;} /*opacity:0.9;*/
#grp3{position:absolute; top: 81px; left: 14%; z-index:4;}
#grp4{position:absolute; top: 296px; right: 34px;  z-index:3;}
#grp5{position:absolute; top: -52px; left: -8%;  z-index:4;} /*opacity:0.9;*/
#grp6{position:absolute; top: 23px; left: 43%; z-index:5;}
#grp7{position:absolute; top: 312px; right: 10.5%; z-index:2;}
#grp8{position:absolute; top: -50px; left: 28%;   z-index:3;} /*opacity:0.9;*/
#grp9{position:absolute; top: 134px; left: 6%;  z-index:4;}
#path1{top: 350px; left: 363px; z-index:1;}
#path2{top: 235px; left: -43%; z-index:1;}

#paraid1{position:absolute; top:236px; left:90px;}
#paraid2{position:absolute; top:510px; right:90px;}
#paraid3{position:absolute; top:-45px; left:-10px;}
#paraid4{position:absolute; top:-137px; right:0px;}
#paraid5{position:absolute; top:-330px; right:-65px; opacity:0.9;}
#paraid6{position:absolute; top:-215px; right:-41px; opacity:0.6;}
#paraid7{position:absolute; top:-260px; right:-45px; opacity:0.9;}
#paraid8{position:absolute; top:-145px; right:-41px; opacity:0.6;}
#paraid9{position:absolute; top:130px; left:80px; opacity:0.9;}
#paraid10{position:absolute; top:210px; left:-50px; opacity:0.6;}
#paraid11{position:absolute; top:-230px; right:90px; z-index=2;}
#paraid12{position:absolute; top:-142px; right:41px; z-index=1;}
#paraid13{position:absolute; top:-300px; right:195px; z-index=3;}
#paraid14{position:absolute; top:-295px; right:27px; z-index=4;}

#clip1{
clip-path: polygon(0 0, 0 100%, 100% 0);
-webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
position:relative; background-color:#ffffff; z-index:0; height: 100px; width:auto;}
#clip2{
clip-path: polygon(0 0, 100% 60%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0 0, 100% 60%, 100% 100%, 0% 100%);
position:relative; background-color:#ffffff; z-index:0; height: 320px; width:auto; top:-640px;}

#canvas{position: relative; z-index: 2; top: 236px; left: -110px; width: 795px; height: 630px; image-rendering: pixelated; image-rendering: optimizespeed;
image-rendering: -moz-crisp-edges;         /* Firefox */
                   image-rendering:   -o-crisp-edges;         /* Opera */
                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
                   image-rendering: crisp-edges;
                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */

}
#canvas-lock{position: relative; z-index: 2; top: 205px; left: -560px; width: 960px; height: 820px; image-rendering: pixelated; image-rendering: optimizespeed;
image-rendering: -moz-crisp-edges;         /* Firefox */
                   image-rendering:   -o-crisp-edges;         /* Opera */
                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
                   image-rendering: crisp-edges;
                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

.box5{ background-color: #ffffff; }
#section1-grp{position:relative; top:0; width:auto; height:530px;}
#section2-grp{position:relative; top:0; width:auto; height:530px;}
#section3-grp{position:relative; top:0; width:auto; height:544px;}
#section3{margin-top: -650px; padding-bottom: 107px; margin-bottom: -107px;}
@media screen and (min-width: 1200px) {
  .box2{margin-top: -357px;}
  [data-aos=fade-content-section1],[data-aos=fade-content-section3] { transform: translate3d(50px, 0, 0) }
  [data-aos=fade-content-section2] { transform: translate3d(-50px, 0, 0) }
  #section1 .col-l{ height:920px;}
  #section2 .col-r{height:1050px; min-width:620px;}
  #section3 .col-l{height:544px; min-width:624px;}
  #section3{margin-top: -740px; padding-bottom: 207px; margin-bottom: -207px;}
}
@media screen and (max-width: 1199px) {
  #section1 .row{min-height:580px;}
  #section1 .col-l{position:relative;}
  #section2 .row{min-height:1170px;}
  #section2 .col-l{margin-top:-350px;}
  #clip1{height:57px;}
  #clip2{ height: 135px; top: -600px; }
  [data-aos=fade-content-section1],[data-aos=fade-content-section3] { transform: translate3d(0, 50px, 0);  transition-delay: .1s !important; }
  [data-aos=fade-content-section2] { transform: translate3d(0, 50px, 0);  transition-delay: .1s !important; }
}
@media screen and (max-width:768px) {
#section2 .col-l{margin-top: -360px;}
#section2 .col-r { margin-top: -20px;}
}

@media screen and (max-width:750px) {
#section2 .col-l{margin-top: -360px;}
#section2 .col-r { margin-top: -390px;}
}

@media screen and (max-width:640px) {
#section2 .col-l{margin-top: -390px;}
#section2 .col-r { margin-top: -370px;}
}
@media screen and (max-width:480px) {
  #section1 .row{min-height:auto;}
  #section2 .row{min-height: 1060px;}
  #section2 .col-l{margin-top: -410px;}
  #section2 .col-r { margin-top: -340px;}
}
@media screen and (max-width:375px) {
  #section2 .col-l{margin-top: -450px;}
  #section2 .col-r { margin-top: -340px;}
}


.rotating { -webkit-animation: rotating 3s linear infinite; -moz-animation: rotating 3s linear infinite; -ms-animation: rotating 3s linear infinite; -o-animation: rotating 3s linear infinite; animation: rotating 3s linear infinite; }
.bounce { -moz-animation: bounce 6s infinite; -webkit-animation: bounce 6s infinite; animation: bounce 6s infinite; }


@-webkit-keyframes rotating /* Safari and Chrome */ {
  from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotating {
  from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); transform: translateY(0); }
  40% { -moz-transform: translateY(-15px); transform: translateY(-15px); }
  60% { -moz-transform: translateY(-7px); transform: translateY(-7px); }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  40% { -webkit-transform: translateY(-15px); transform: translateY(-15px); }
  60% { -webkit-transform: translateY(-7px); transform: translateY(-7px); }
}
@keyframes bounce {
  0%, 75%, 85%, 95%,100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
  80% { -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); }
  90% { -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -webkit-transform: translateY(-5px); transform: translateY(-5px); }
}




[data-aos^=fade][data-aos^=fade] { opacity: 0; transition-property: opacity, transform }
[data-aos^=fade][data-aos^=fade].aos-animate { opacity: 1; transform: translateZ(0) }
[data-aos=fade-up] { transform: translate3d(0, 50px, 0) }
[data-aos=fade-right] { transform: translate3d(-50px, 0, 0) }
[data-aos=fade-left] { transform: translate3d(50px, 0, 0) }
[data-aos=fade-up-right] { transform: translate3d(-50px, 50px, 0) }
[data-aos=fade-up-left] { transform: translate3d(50px, 50px, 0) }

[data-aos^=sfade][data-aos^=sfade] { opacity: 0; transition-property: opacity, transform }
[data-aos^=sfade][data-aos^=sfade].aos-animate { opacity: 0.9; transform: translateZ(0) }
[data-aos=sfade-up] { transform: translate3d(0, 50px, 0); }

[data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] { transition-duration: .8s }
[data-aos][data-aos][data-aos-duration="2000"], body[data-aos-duration="2000"] [data-aos] { transition-duration: 2s }

[data-aos][data-aos][data-aos-delay="100"], body[data-aos-delay="100"] [data-aos] { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="100"].aos-animate, body[data-aos-delay="100"] [data-aos].aos-animate { transition-delay: .1s }

[data-aos][data-aos][data-aos-delay="150"], body[data-aos-delay="150"] [data-aos] { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="150"].aos-animate, body[data-aos-delay="150"] [data-aos].aos-animate { transition-delay: .15s }

[data-aos][data-aos][data-aos-delay="200"], body[data-aos-delay="200"] [data-aos] { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="200"].aos-animate, body[data-aos-delay="200"] [data-aos].aos-animate { transition-delay: .2s }

[data-aos][data-aos][data-aos-delay="250"], body[data-aos-delay="250"] [data-aos] { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="250"].aos-animate, body[data-aos-delay="250"] [data-aos].aos-animate { transition-delay: .25s }

[data-aos][data-aos][data-aos-delay="300"], body[data-aos-delay="300"] [data-aos] { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="300"].aos-animate, body[data-aos-delay="300"] [data-aos].aos-animate { transition-delay: .3s }

[data-aos][data-aos][data-aos-delay="350"], body[data-aos-delay="350"] [data-aos] { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="350"].aos-animate, body[data-aos-delay="350"] [data-aos].aos-animate { transition-delay: .35s }

[data-aos][data-aos][data-aos-delay="500"], body[data-aos-delay="500"] [data-aos] { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="500"].aos-animate, body[data-aos-delay="500"] [data-aos].aos-animate { transition-delay: .5s }

[data-aos][data-aos][data-aos-delay="1000"], body[data-aos-delay="1000"] [data-aos] { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="1000"].aos-animate, body[data-aos-delay="1000"] [data-aos].aos-animate { transition-delay: 1s }

[data-aos][data-aos][data-aos-delay="1500"], body[data-aos-delay="1500"] [data-aos] { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="1500"].aos-animate, body[data-aos-delay="1500"] [data-aos].aos-animate { transition-delay: 1.5s }

[data-aos][data-aos][data-aos-delay="2000"], body[data-aos-delay="2000"] [data-aos] { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="2000"].aos-animate, body[data-aos-delay="2000"] [data-aos].aos-animate { transition-delay: 2s }


@media screen and (max-width: 1199px) {
[data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] { transition-duration: .8s }
[data-aos][data-aos][data-aos-delay="100"].aos-animate, body[data-aos-delay="100"] [data-aos].aos-animate { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="300"].aos-animate, body[data-aos-delay="300"] [data-aos].aos-animate { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="350"].aos-animate, body[data-aos-delay="350"] [data-aos].aos-animate { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="1500"].aos-animate, body[data-aos-delay="1500"] [data-aos].aos-animate { transition-delay: 0 }
[data-aos][data-aos][data-aos-delay="2000"].aos-animate, body[data-aos-delay="2000"] [data-aos].aos-animate { transition-delay: 0 }
}