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

}

p{
    color: #2d2a2a;
}

@font-face {
  font-family: 'MyFont';
  src: url('./font/Aesthetic-Regular-d026.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}


 
@keyframes shine {
  100% {
    left: 100%;
  }
}

.groups:hover .shine {
  animation: shine 1s ease-in-out;
}


.reveal-wrap{
    overflow: hidden;
}

.reveal-img{
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
  }

.words{
    display: inline;
    text-indent: 10px;
}
.words-1 span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: #000000;
    -webkit-animation: rotateWord 18s linear infinite 0s;
    -moz-animation: rotateWord 18s linear infinite 0s;
    -o-animation: rotateWord 18s linear infinite 0s;
    -ms-animation: rotateWord 18s linear infinite 0s;
    animation: rotateWord 18s linear infinite 0s;
}
.words-1 span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
    -moz-animation-delay: 3s; 
    -o-animation-delay: 3s; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
    color: #006a62;
}
.words-1 span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
    color: #000000;    
}
.words-1 span:nth-child(4) { 
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s; 
    -o-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s; 
    color: #006a62;
}
.words-1 span:nth-child(5) { 
    -webkit-animation-delay: 12s; 
    -moz-animation-delay: 12s; 
    -o-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
    color: #000000;
}
.words-1 span:nth-child(6) { 
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s; 
    -o-animation-delay: 15s; 
    -ms-animation-delay: 15s; 
    animation-delay: 15s; 
    color: #006a62;
}
@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -moz-transform: translateY(-30px); }
    5% { opacity: 1; -moz-transform: translateY(0px);}
    17% { opacity: 1; -moz-transform: translateY(0px); }
    20% { opacity: 0; -moz-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-o-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -o-transform: translateY(-30px); }
    5% { opacity: 1; -o-transform: translateY(0px);}
    17% { opacity: 1; -o-transform: translateY(0px); }
    20% { opacity: 0; -o-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateY(-30px); }
    5% { opacity: 1; -ms-transform: translateY(0px);}
    17% { opacity: 1; -ms-transform: translateY(0px); }
    20% { opacity: 0; -ms-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; transform: translateY(-30px); }
    5% { opacity: 1; transform: translateY(0px);}
    17% { opacity: 1; transform: translateY(0px); }
    20% { opacity: 0; transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}