.mdi-arrow-up:before {
  content: "\f156";
}

.ui-to-top, .ui-to-top:focus, .ui-to-top:active {
  color: #ffffff;
  background: #3cc3c1;
}

.position-r{
  position: relative;
}

.position-a{
  position: absolute;
}

.flex-10{  flex: 10%;}.flex-20{  flex: 20%;}.flex-30{  flex: 30%;}.flex-40{  flex: 40%;}.flex-50{  flex: 50%;}.flex-60{  flex: 60%;}.flex-70{  flex: 70%;}.flex-80{  flex: 80%;}.flex-90{  flex: 90%;}.flex-100{  flex: 100%;}

.p-20{
  padding: 20px;
}

.plr-50 {
  padding-left: 50px;
  padding-right: 50px;
}

.pt-30 {
  padding: 30px;
}

.mb-30{
  margin-bottom: 30px;
}

.plr-20{
  padding-left: 20px;
  padding-right: 20px;
}

.ptb-20{
  padding-top: 20px;
  padding-bottom: 20px;
}

.top-0{
  top: 0;
}

.text-3d {
  display: inline-block;
  text-transform: uppercase;
  font-family: poppins;
  font-size: 2em;
  font-weight: 600;
  color: #11878d;
  text-shadow: 1px 1px 1px #919191, 1px 2px 1px #919191;
}

/* .text-3d::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #2A726F;
  border-radius: 10px;
  opacity: 0.8;
} */

.image-anim{
  animation: image-anim 2s ease-in-out infinite alternate both;
}

@keyframes image-anim {
  0%{  transform: translateY(0px); }
  50%{  transform: translateY(-8px); }
  100%{  transform: translateY(0px); }
}

.image-anim-2{
  animation: image-anim-2 2s ease-in-out infinite alternate both;
}

@keyframes image-anim-2 {
  0%{  transform: translateY(0px); }
  50%{  transform: translateY(8px); }
  100%{  transform: translateY(0px); }
}

@media (min-width: 768px) {
  .box-icon-classic {
    text-align: justify !important;
  }
}

.main-menu_opener-1::after{
  top: -20%;    color: #ffffff;    content: '▲';    display: inline;    font-size: 18px;    height: 15px;    left: 24%;    line-height: 1;    position: absolute;    -webkit-transform: translate(-50%,0) scaleX(1.56);    transform: translate(-50%,0) scaleX(1.56);    text-shadow: 0 -3px 1px rgb(0 0 0 / 10%);
}
.main-menu_opener-2::after{
  top: -20%;    color: #ffffff;    content: '▲';    display: inline;    font-size: 18px;    height: 15px;    left: 40%;    line-height: 1;    position: absolute;    -webkit-transform: translate(-50%,0) scaleX(1.56);    transform: translate(-50%,0) scaleX(1.56);    text-shadow: 0 -3px 1px rgb(0 0 0 / 10%);
}
.main-menu_opener-3::after{
  top: -20%;    color: #ffffff;    content: '▲';    display: inline;    font-size: 18px;    height: 15px;    left: 54%;    line-height: 1;    position: absolute;    -webkit-transform: translate(-50%,0) scaleX(1.56);    transform: translate(-50%,0) scaleX(1.56);    text-shadow: 0 -3px 1px rgb(0 0 0 / 10%);
}
.main-menu_opener-4::after{
  top: -20%;    color: #ffffff;    content: '▲';    display: inline;    font-size: 18px;    height: 15px;    left: 72%;    line-height: 1;    position: absolute;    -webkit-transform: translate(-50%,0) scaleX(1.56);    transform: translate(-50%,0) scaleX(1.56);    text-shadow: 0 -3px 1px rgb(0 0 0 / 10%);
}
/* Set initial background color */
.menu-bg-anim {
  background: linear-gradient(to right, #2A726F 0%, #2A726F 100%);
}

/* Define the animation */
@keyframes menu-bg-anim {
  0% {    background: linear-gradient(to right, #2A726F 0%, #2A726F 100%);  }

  10% {    background: linear-gradient(to right, #2A726F 0%, #2e7c7a 100%);  }

  20% {    background: linear-gradient(to right, #2A726F 0%, #348b89 100%);  }

  30% {    background: linear-gradient(to right, #2A726F 0%, #3a9b99 100%);  }

  40% {    background: linear-gradient(to right, #2A726F 0%, #40a9a7 100%);  }

  50% {    background: linear-gradient(to right, #2A726F 0%, #45b5b3 100%);  }

  60% {    background: linear-gradient(to right, #2A726F 0%, #45b5b3 100%);  }

  70% {    background: linear-gradient(to right, #2A726F 0%, #40a9a7 100%);  }

  80% {    background: linear-gradient(to right, #2A726F 0%, #3a9b99 100%);  }

  90% {    background: linear-gradient(to right, #2A726F 0%, #348b89 100%);  }

  100% {    background: linear-gradient(to right, #2A726F 0%, #2A726F 100%);  }
}
@keyframes scroll-anim{from{transform:translateY(0px);} to{transform: translateY(-270px);}} 
/* Apply the animation to the element */
.menu-bg-anim {
  animation: menu-bg-anim 1s ease-in-out infinite alternate both;
}

.center{
  text-align: center;
  margin: auto;
  justify-content: center;
}

@media (min-width: 768px) {
  #goal{
    width: 18vw;
  }
}

@keyframes text-anim {

}

.text-anim{
  position: relative;
  margin: 0;
  padding: 0;
  color: #fff;
  -webkit-text-stroke: 1px #000;
  font-size: 1.5em;
  text-transform: uppercase;
  line-height: 1.75;
}

.text-anim::before{
  content: attr(data-text);
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  color: #039af4;
  overflow: hidden;
  line-height: 1.75;

}
/* animation: text-anim 1s; */

.main_text{
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  padding-left: 20px;
  animation: main_text_anim 4s ease-in infinite;
}
.main_text::after {
  position: absolute;
  top: -10px;
  left: -25px;
  content: '\2623';
  font-size: 2rem;
  color: #00c4ff;
  text-shadow: 0 0 5px #68dcff, 0 0 10px #ffffff;
  animation: rotate-anim 2s linear infinite;
}
.main_text span{
  color: #ff022c;
}

@keyframes rotate-anim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.list_item {
  position: relative;
  list-style: none;
  display: table;
  margin: 10px 0;
  padding-left: 40px;
  padding-right: 5px;
  padding-top: 5px;
  /* padding-bottom: 5px; */
  transition: color 0.5s ease-out;
}
.list_item::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  background: transparent;
  border-radius: 34px;
  transition: background 0.3s, width 0.3s;
  border: 2px solid #03a9f4;
}
.list_item::after{
  content: '';
  position: absolute;
  top: 13px;
  left: 12px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #03a9f4;
  border-right: 2px solid #03a9f4;
  transform: rotate(45deg);
  transition: 0.5s;
}
.list_item:hover::before{
  z-index: -1;
  width: 100%;
  background: #03a9f4;
  transition-delay: 0s, 0.1s;
}
.list_item:hover::after{
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.list_item:hover::after{
  left: 15px;
  transition-delay: 0.1s;
  transform: rotate(45deg) scale(1.8);
}
.list_item:hover{
  transition-delay: 0s, 5s;
  color: #fff;

}

.hide{
  display: none !important;
}
.show{
  display: block !important;
}