/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header,
footer {
  width: 100%;
  height: 100px;
  flex-shrink: 0;
}

main {
  flex-grow: 1;
}

.height-500-vh {
  height: 2000vh;
}

.opacity-0-not-imp {
  opacity: 0;
}

.d-none-not-imp {
  display: none;
}

.font-size-60px {
  font-size: 60px;
}

.textAnimation {
  transition: transform 0.5s ease, font-size 0.5s ease, opacity 0.7s ease, background-color 0.4s ease;
}

.transition3d{
  transition: transform 0.2s ease;
}

.z-4 {
  z-index: 4 !important;
}

.z-5 {
  z-index: 5 !important;
}

.z-6 {
  z-index: 6 !important;
}

.z-7 {
  z-index: 7 !important;
}

.z-8 {
  z-index: 8 !important;
}

.z-9 {
  z-index: 9 !important;
}

.z-10 {
  z-index: 10 !important;
}

.inner-scroll {
  max-height: 100vh;
}

.mh-100vh {
  max-height: 100vh;
}


.img-lan-prog {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  margin: 1rem;
  object-fit: cover;
  transition: transform 0.4s ease-in-out;
}

.img-lan-prog:hover {
  transform: scale(1.05);
}


.notes {
  transform: translateY(100vh);
  margin: 5px;
}

.prev-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}

.next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}


@keyframes view3d {

  0% {
    transform: translateY(0);
    ;

  }

  50% {
    transform: translateY(-10px);
    ;
  }

  100% {
    transform: translateY(0);
    ;
  }
}

.view3d {
   
  animation: view3d 3s ease-in-out infinite;
  border-radius: 10px;
}



@media only screen and (max-width: 1000px) {
  #text4 {
    flex-direction: column !important;
  }
}

@media only screen and (max-width: 1200px) {
  .inner-scroll {
    flex-direction: row;
  }

}

@media only screen and (max-width: 900px) {
  .notes {
    height: 100px;
    width: 140px;
  }
}



/* keyframe */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation: fadeIn 2s ease forwards;
}


@keyframes fadeOff {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOff {
  animation: fadeOff 0.5s ease forwards;
}



@keyframes vortex {
  0% {
    transform: rotate(0deg) scale(1);
    filter: blur(0px);
    opacity: 1;
  }

  25% {
    transform: rotate(90deg) scale(1.3);
    filter: blur(1px);
    opacity: 0.85;
  }

  50% {
    transform: rotate(180deg) scale(0.8);
    filter: blur(3px);
    opacity: 0.6;
  }

  75% {
    transform: rotate(270deg) scale(1.4);
    filter: blur(1px);
    opacity: 0.85;
  }

  100% {
    transform: rotate(360deg) scale(1);
    filter: blur(0px);
    opacity: 1;
  }
}

.vortex {
  animation: vortex 3s infinite ease-in-out;
}


@keyframes slideUpFromBottom {
  0% {
    transform: translateY(100vh);
    opacity: 0;
  }

  100% {
    transform: translateY(0vh);
    opacity: 1;
  }
}

.img-slide-up {
  animation: slideUpFromBottom 1.2s ease-out forwards;
}

.transform {
  transition: transform 0.5s ease-in-out;
}


.width-height-background-color {
  transition: width 0.1s ease, height 0.1s ease, background-color 0.3s ease, border-radius 0.5s ease;
  ;
}


@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}


.float {
  animation: float 3s ease-in-out infinite;
}


@keyframes fadeFillIn {
  0% {
    fill-opacity: 0;
  }

  100% {
    fill-opacity: 1;
  }
}

.animated-fill {
  animation: fadeFillIn 2s ease-in-out forwards;
}


@keyframes dashMove {
  0% {
    stroke-dashoffset: 3677.25;
  }

  50% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 3677.25;
  }
}


@keyframes dashMovePerson {
  0% {
    stroke-dashoffset: 2000;
    fill-opacity: 0;
  }

  20% {
    fill-opacity: 0;
  }

  40% {
    fill-opacity: 0;
  }

  50% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }

  20% {
    fill-opacity: 1;
  }

  40% {
    fill-opacity: 1;
  }

  100% {
    stroke-dashoffset: 2000;
    fill-opacity: 0;
  }
}






@keyframes dashMoveLikes {
  0% {
    stroke-dashoffset: 2000;
    fill-opacity: 0;
  }

  20% {
    fill-opacity: 0;
  }

  40% {
    fill-opacity: 0;
  }

  50% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  20% {
    fill-opacity: 0;
  }

  40% {
    fill-opacity: 0;
  }

  100% {
    stroke-dashoffset: 2000;
    fill-opacity: 0;
  }
}




/* keyframe */

.animate-stroke-light-welcome path {
  stroke: #ffffff;
  stroke-width: 2;
  stroke-dasharray: 3677.25;
  stroke-dashoffset: 3677.25;
  animation: dashMove 8s ease-in-out infinite;
  fill: none;
}

.animate-stroke-black-welcome path {
  stroke: #000000;
  stroke-width: 2;
  stroke-dasharray: 3677.25;
  stroke-dashoffset: 3677.25;
  animation: dashMove 8s ease-in-out infinite;
  fill: none;
}

.animate-stroke-thankyou {
  stroke: #000000;
  stroke-width: 2;
  stroke-dasharray: 3677.25;
  stroke-dashoffset: 3677.25;
  animation: dashMove 8s ease-in-out infinite;
  fill: none;
}


/* .animate-stroke-person .a {
  stroke: #ffffff;  
  stroke-width: 1;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dashMovePerson 8s ease-in-out infinite;
  fill: #ffffff;
  fill-opacity: 0;
}

.animate-stroke-person .b {
  stroke: #7a7473;  
  stroke-width: 1;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dashMovePerson 8s ease-in-out infinite;
  fill: #7a7473;
  fill-opacity: 0;
}

.animate-stroke-person .c {
  stroke: #211715;  
  stroke-width: 1;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dashMovePerson 8s ease-in-out infinite;
  fill:#211715;
  fill-opacity: 0;
}

.animate-stroke-person .d {
  stroke: #87cce3;   
  stroke-width: 1;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dashMovePerson 8s ease-in-out infinite;
  fill: #87cce3;
  fill-opacity: 0;
} */


.animate-stroke-light-likes {
  stroke: #ffffff;
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dashMoveLikes 8s ease-in-out infinite;
  fill: #ffffff;
  fill-opacity: 0;
}

.animate-stroke-black-likes {
  stroke: #000000;
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dashMoveLikes 8s ease-in-out infinite;
  fill: #ffffff;
  fill-opacity: 0;
}