.splitting-text-anim-1 .char,
.splitting-text-anim-1 .word,
.splitting-text-anim-1 .line,
.splitting-text-anim-2 .char,
.splitting-text-anim-2 .word,
.splitting-text-anim-2 .line,
.splitting-text-anim-3 .char,
.splitting-text-anim-3 .word,
.splitting-text-anim-3 .line,
.splitting-text-anim-4 .char,
.splitting-text-anim-4 .word,
.splitting-text-anim-4 .line {
  -webkit-transition: opacity 0.3s linear, color 0.3s linear, -webkit-transform 0.3s cubic-bezier(0.3, 0, 0.3, 1);
  transition: opacity 0.3s linear, color 0.3s linear, -webkit-transform 0.3s cubic-bezier(0.3, 0, 0.3, 1);
  -o-transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear, color 0.3s linear;
  transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear, color 0.3s linear;
  transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear, color 0.3s linear, -webkit-transform 0.3s cubic-bezier(0.3, 0, 0.3, 1);
  -webkit-transform: translate(5px, 0) scale(0.95);
  -ms-transform: translate(5px, 0) scale(0.95);
  transform: translate(5px, 0) scale(0.95);
  opacity: 0;
}

.splitting-text-anim-1.animate__active .char,
.splitting-text-anim-1.animate__active .word,
.splitting-text-anim-1.animate__active .line,
.splitting-text-anim-2.animate__active .char,
.splitting-text-anim-2.animate__active .word,
.splitting-text-anim-2.animate__active .line,
.splitting-text-anim-3.animate__active .char,
.splitting-text-anim-3.animate__active .word,
.splitting-text-anim-3.animate__active .line,
.splitting-text-anim-4.animate__active .char,
.splitting-text-anim-4.animate__active .word,
.splitting-text-anim-4.animate__active .line {
  -webkit-transform: translate(0, 0) scale(1);
  -ms-transform: translate(0, 0) scale(1);
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

.splitting-text-anim-1 .char {
  -webkit-transition-delay: calc(30ms * var(--char-index));
  -o-transition-delay: calc(30ms * var(--char-index));
  transition-delay: calc(30ms * var(--char-index));
}

.splitting-text-anim-1 .word {
  -webkit-transition-delay: calc(30ms * var(--word-index));
  -o-transition-delay: calc(30ms * var(--word-index));
  transition-delay: calc(30ms * var(--word-index));
}

.splitting-text-anim-1 .line {
  -webkit-transition-delay: calc(30ms * var(--line-index));
  -o-transition-delay: calc(30ms * var(--line-index));
  transition-delay: calc(30ms * var(--line-index));
}

.splitting-text-anim-2 .char {
  -webkit-transition-delay: calc(60ms * var(--char-index));
  -o-transition-delay: calc(60ms * var(--char-index));
  transition-delay: calc(60ms * var(--char-index));
}

.splitting-text-anim-2 .word {
  -webkit-transition-delay: calc(60ms * var(--word-index));
  -o-transition-delay: calc(60ms * var(--word-index));
  transition-delay: calc(60ms * var(--word-index));
}

.splitting-text-anim-2 .line {
  -webkit-transition-delay: calc(60ms * var(--line-index));
  -o-transition-delay: calc(60ms * var(--line-index));
  transition-delay: calc(60ms * var(--line-index));
}

.splitting-text-anim-3 .char {
  -webkit-transition-delay: calc(6ms * var(--char-index));
  -o-transition-delay: calc(6ms * var(--char-index));
  transition-delay: calc(6ms * var(--char-index));
}

.splitting-text-anim-3 .word {
  -webkit-transition-delay: calc(6ms * var(--word-index));
  -o-transition-delay: calc(6ms * var(--word-index));
  transition-delay: calc(6ms * var(--word-index));
}

.splitting-text-anim-3 .line {
  -webkit-transition-delay: calc(6ms * var(--line-index));
  -o-transition-delay: calc(6ms * var(--line-index));
  transition-delay: calc(6ms * var(--line-index));
}

.splitting-text-anim-4 .char {
  -webkit-transition-delay: calc(20ms * var(--char-index));
  -o-transition-delay: calc(20ms * var(--char-index));
  transition-delay: calc(20ms * var(--char-index));
}

.splitting-text-anim-4 .word {
  -webkit-transition-delay: calc(20ms * var(--word-index));
  -o-transition-delay: calc(20ms * var(--word-index));
  transition-delay: calc(20ms * var(--word-index));
}

.splitting-text-anim-4 .line {
  -webkit-transition-delay: calc(20ms * var(--line-index));
  -o-transition-delay: calc(20ms * var(--line-index));
  transition-delay: calc(20ms * var(--line-index));
}

.scrolla-element-anim-1 {
  -webkit-transition: opacity 0.4s linear, color 0.3s linear, -webkit-transform 0.7s cubic-bezier(0.3, 0, 0.3, 1);
  transition: opacity 0.4s linear, color 0.3s linear, -webkit-transform 0.7s cubic-bezier(0.3, 0, 0.3, 1);
  -o-transition: transform 0.7s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.4s linear, color 0.3s linear;
  transition: transform 0.7s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.4s linear, color 0.3s linear;
  transition: transform 0.7s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.4s linear, color 0.3s linear, -webkit-transform 0.7s cubic-bezier(0.3, 0, 0.3, 1);
  -webkit-transform: translate(0, 20px);
  -ms-transform: translate(0, 20px);
  transform: translate(0, 20px);
  opacity: 0;
  -webkit-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
}

.scrolla-element-anim-1.animate__active {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}

.animate-active .splitting-text-anim-1 .char,
.animate-active .splitting-text-anim-1 .word,
.animate-active .splitting-text-anim-1 .line,
.animate-active .splitting-text-anim-2 .char,
.animate-active .splitting-text-anim-2 .word,
.animate-active .splitting-text-anim-2 .line,
.animate-active .splitting-text-anim-3 .char,
.animate-active .splitting-text-anim-3 .word,
.animate-active .splitting-text-anim-3 .line,
.animate-active .splitting-text-anim-4 .char,
.animate-active .splitting-text-anim-4 .word,
.animate-active .splitting-text-anim-4 .line,
.animate-active .scrolla-element-anim-1 .char,
.animate-active .scrolla-element-anim-1 .word,
.animate-active .scrolla-element-anim-1 .line {
  -webkit-transform: translate(0, 0) scale(1);
  -ms-transform: translate(0, 0) scale(1);
  transform: translate(0, 0) scale(1);
  opacity: 1;
}
.xhero-bottom{
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  
}

#stat-bar{
 opacity:0;
 transition: all .3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
#stat-bar.in-view{
  opacity:1;
}
.stat-wrap {
  padding: 7rem 1rem;
  display: flex;
  align-items: center;
}

.stat-wrap .number-wrap {
  margin-right: 1.5rem;
  font-size: 60px;
}

.stat-wrap .description h3 {
  margin: 0;
}

.tradition-of-different{
  position:relative;
  display:flex;
  padding-left:4%;
 padding-bottom:7rem;
}

.tradition-of-different-item{
  height:70vh;
  width: 21vw;
  margin-right:4%;
  position:relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-positive: 1;
  flex-grow: 1;
  transition: all .3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  background-size:cover;
  background-position:center; 
  color: #000000;
  overflow:hidden;
 
}

.tradition-of-different-item .content{
  position: absolute;
  top: 0;
  left:0;
  width:100%;
  height:100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: flex-end;
  -ms-flex-positive: 1;
  flex-grow: 1;
  z-index: 1;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  z-index:3;
  text-align:center;  
  top:0;
  padding-bottom:0;
}

.tradition-of-different-item.active .content{
  display: none;
}
.tradition-of-different-item  h4{
  position:absolute;
  bottom:20%;
  left:0;
  width:100%;
  color:#fdc741;
  background-color: #004135;
  padding: 1rem 1vw;
  margin-bottom:0;
  text-align: center;
}

.tradition-of-different-item:hover h4{
 color:#fdc741;
 background-color:transparent;
}
.tradition-of-different-item.active h4{
  opacity:0;
}
.tradition-of-different-item .content p{
  opacity:0;
  transition: all .3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  padding: 0 1rem;
}
.tradition-of-different-item.active{
  width:100%;
  left:0;
  z-index:4;
}

.tradition-of-different-item  .overlay-content .logo{
  width:100px;
  height:auto;
}

.tradition-of-different-item .overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transition: all .3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
 
}
.tradition-of-different-item.active .overlay{
  opacity:1;
  background-color:#004135;
  
}
.tradition-of-different-item .overlay .overlay-content{
  display:none;
  transform:translateY(100%);
  transition: translate .3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  transition-delay: 2s;
}

.tradition-of-different-item.active .overlay .overlay-content{
  display:block;
  opacity:1;
  transform:translateY(0);
}
.tradition-of-different-item .btn-primary:hover{
  color:#ffc844;
  border:2px solid #ffc844;
  text-decoration:none;
}

@media (max-width: 991px){
  .tradition-of-different-item .content h3{
      font-size: 2.5vw;
  }
  .tradition-of-different-item .content .logo{
      bottom: 8vw;
      width: 10vw;
  }
}
@media (max-width: 768px){
  .tradition-of-different-item{
      height:75vh;
  }
  .tradition-of-different-item .content h3{
      font-size: 1.75rem;
      color:#fdc741;
  }
  .tradition-of-different-item .content h3:after {
      width: 200px;
      background-color: #fdc741;
  }
  .tradition-of-different-item .content .logo{
      transform: translateX(-50%) scale(1);
      width: 30vw;
      bottom: 30vw;
      display: none;
  }
  .tradition-of-different-item .content p{
      opacity:1;
  }
}