/* <!==================== Clip Up ====================!> */
.anim-clip-up {animation: clipup 1.1s infinite; animation-direction: alternate;}
@keyframes clipup {
  from {clip-path: inset(100% 0 0 0);}
  to {clip-path: inset(0 0 0 0);}
}

/* <!==================== Clip Left ====================!> */
.anim-clip-left {animation: clipleft 0.8s infinite; animation-direction: alternate;}
@keyframes clipleft {
  from {clip-path: inset(0 100% 0 0);}
  to {clip-path: inset(0 0 0 0);}
}

/* <!==================== Clip Scale left Right ====================!> */
.anim-scalex {animation: scalex 1s infinite; animation-direction: alternate;}
@keyframes scalex {
  from {clip-path: inset(0 50% 0 50%);}
  to {clip-path: inset(0 0 0 0);}
}

/* <!==================== UpDown Move ====================!> */
.anim-updown {animation: updown 0.6s linear infinite; animation-direction: alternate;}
@keyframes updown {
  0% {transform: translateY(0);}
  100% {transform: translateY(-15px);}
}

/* <!==================== Right Left Move ====================!> */
.anim-right-left {animation: righttoleft 0.45s linear infinite; animation-direction: alternate;}
@keyframes righttoleft {
  0% {transform: translateX(0);}
  100% {transform: translateX(-5px);}
}

/* <!==================== Left Right Move ====================!> */
.anim-left-right {animation: leftToRight 0.45s linear infinite; animation-direction: alternate;}
@keyframes leftToRight {
  0% {transform: translateX(0);}
  100% {transform: translateX(5px);}
}

/* <!==================== Left Right Move ====================!> */
.anim-opacity {animation: opacitydown 0.6s infinite; animation-direction: alternate;}
@keyframes opacitydown {
  from {opacity: 0;}
  to {opacity: 1;}
}

.anim-zoom {animation: animzoom 0.4s infinite; animation-direction: alternate;}
.anim-zoom-revers {animation: animzoom 0.4s infinite; animation-direction: alternate-reverse;}
@keyframes animzoom {
  from {transform: scale(0.7);}
  to {transform: scale(1);}
}

.anim-zoom-sm {animation: animzoomsm 0.4s infinite; animation-direction: alternate;}
@keyframes animzoomsm {
  from {transform: scale(1);}
  to {transform: scale(1.05);}
}

.anim-rotatx {animation: rotatx 0.6s infinite; animation-direction: alternate;}
@keyframes rotatx {
  from {transform: rotateY(90deg);}
  to {transform: rotateY(0deg);}
}

.slideIn {animation-name: slideIn; animation-duration: 0.6s; animation-fill-mode: both;}
@keyframes slideIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
  0% {opacity: 0;}
}

@media (min-width: 992px) {
  .slideIn {animation-name: slideIn; animation-duration: 0.6s; animation-fill-mode: both;}
  @keyframes slideIn {
    0% {clip-path: inset(0 0 100% 0); opacity: 0;}
    100% {clip-path: inset(0 0 0 0); opacity: 1;}
    0% {clip-path: inset(0 0 100% 0); opacity: 0;}
  }
}

.two-img-fixed {display: inline-block; position: relative; overflow: hidden;}
.two-img-fixed .icon-1 {position: absolute; top: 0; left: 1%; max-width: 16%;}
.two-img-fixed .icon-2 {position: absolute; top: 14%; right: 0; max-width: 16%;}
.two-img-fixed .after-img-fixed {position: absolute; bottom: 0; left: 0; width: 100%;}
.two-img-fixed svg {width: 100%; height: 100%;}

@media (max-width: 768px) {
  .anim-width-sm {width: 70%; margin: 0 auto;}
}

.sand-glass #sand {position: absolute; top: 0; right: 0; width: 100%; height: 100%; display: flex; justify-content: flex-end;}
.grain {background-color: var(--glass-dots-color); height: 5px; width: 5px; border-radius: 50%; position: absolute;}
.sand-glass {display: inline-block; position: relative;}

.g1 {top: 31%; left: 73%;}
.g2 {top: 27%; left: 68%;}
.g3 {top: 28%; left: 61%;}
.g4 {top: 23%; left: 56%;}
.g5 {top: 21%; left: 62%;}
.g6 {top: 23%; left: 74%;}
.g7 {top: 20%; left: 69%;}
.g8 {top: 16%; left: 57%;}
.g9 {top: 15%; left: 65%;}
.g10 {top: 15%; left: 73%;}
.g11 {top: 34%; left: 65%;}
.g12 {top: 41%; left: 58%;}
.g13 {top: 30%; left: 53%;}
.g14 {top: 34%; left: 58%;}
.gf1 {top: 88.5%; left: 55%;}
.gf2 {top: 88.5%; left: 62%;}
.gf3 {top: 88.5%; left: 70%;}
.gf4 {top: 88.5%; left: 78%;}
.moveg1 {top: 83.5%; left: 74%;}
.moveg2 {top: 83.5%; left: 66%;}
.moveg3 {top: 83.5%; left: 58%;}
.moveg4 {top: 84.5%; left: 52%;}
.moveg5 {top: 77.5%; left: 77%;}
.moveg6 {top: 78.5%; left: 69%;}
.moveg7 {top: 77.5%; left: 62%;}
.moveg8 {top: 72.5%; left: 73%;}
.moveg9 {top: 77.5%; left: 54%;}
.moveg10 {top: 71.5%; left: 63%;}
.moveg11 {top: 70.5%; left: 57%;}
.moveg12 {top: 47.5%; left: 52%;}
.moveg13 {top: 78.5%; left: 48%;}
.hide {display: none;}

@media (min-width: 573px) {
  .grain {height: 8px; width: 8px;}
}

@media (min-width: 992px) {
  .grain {height: 5px; width: 5px;}
}

@media (min-width: 1200px) {
  .grain {height: 6px; width: 6px;}
}

@media (min-width: 1800px) {
  .grain {height: 7.25px; width: 7.25px;}
}