.video-anim-wrap {
      max-width: 970px;
      display: block;
      width: 100%;
      position: relative;
  }

.video-anim-wrap .text-for-play {
  position: relative;
  opacity: 1;
}
.video-anim-wrap .text-for-play .text,
.video-anim-wrap .text-for-play .text-absolute-for-ani {
	color: #fff;
	transition: 0.5s ease;
	font-family: 'bebas-neue-pro';
	font-size: 1.2em;
    font-weight: 600;
}
.video-anim-wrap .text-for-play .text-absolute-for-ani {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.video-anim-wrap .text-for-play .text {
  transform: translate(-125%, 0);
}

.video-anim-wrap .text-for-play.is-playing .text {
    opacity: 0;
    transition: 0.5s ease;
}

.video-anim-wrap .text-for-play.is-playing .text-absolute-for-ani {
    opacity: 1;
    transition: 0.5s ease;
}


.video-anim-wrap.is-active .text-for-play .text{
  	transform: translate(0, 0);
    transition: 0.5s ease;
}


.video-anim-wrap .play-button-container {
  position: relative;
}
.video-anim-wrap .play-btn,
.video-anim-wrap .pause-btn-for-animaiton {
  transition: opacity 0.3s ease;
}
.video-anim-wrap .pause-btn-for-animaiton {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; 
}

.video-anim-wrap .vimeo-magic-container {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}
.video-anim-wrap .html-embed-2 {
  width: 100%;
  height: 100%;
}
.video-anim-wrap .trigger-animation-for-vimeo {
  z-index: 2;
  background-color: var(--primary-color);
  color: var(--white);
  display: none;
  position: static;
  top: 0;
  left: 0;
}
.video-anim-wrap .video-section {
  flex: 1;
  position: relative;
}
.video-anim-wrap .player-box {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  color: var(--primary-color);
  text-transform: uppercase;
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  margin-top: -30px;
  margin-left: -20px;
  padding: 10px 20px;
  font-family: bebas-neue, sans-serif;
  font-size: 1.5em;
  font-weight: 400;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.video-anim-wrap .text-absolute-for-ani {
  color: var(--text-color-light);
  position: absolute;
  top: 0;
}
.video-anim-wrap .text-for-play {
  position: relative;
}
.video-anim-wrap .play-button-container {
  background-color: var(--white);
  border-radius: 100%;
  width: 42px;
  height: 42px;
  position: relative;
}
.video-anim-wrap .pause-btn-for-animaiton {
  position: absolute;
  top: 0;
}

.video-anim-wrap .vimeo-control-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: -50px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.video-anim-wrap .volume-hover-ani {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  cursor: pointer;
  align-items: center;
  min-width: 200px;
  display: flex;
}
.video-anim-wrap .volume-container {
  align-items: center;
/*   width: 42px;
  height: 42px; */
  display: flex;
	gap: 15px;
  position: relative;
}
/* .video-anim-wrap .lottie-animation {
  width: 42px;
  height: 42px;
  margin-bottom: -5px;
} */
.video-anim-wrap .volume-container svg {
  width: 32px;
fill: #fff!important;
	color:var(--white);
}

.video-anim-wrap .volume-half-trigger,
.video-anim-wrap .volume-mute-trigger,
.video-anim-wrap .volume-full-trigger {
  background-color: var(--white);
  cursor: pointer;
  width: 0;
  height: 0;
  display: none;
}
.show-on-hover-ani {
  padding: 0 0 9px 0;
  overflow: visible;
	width: 0;
	opacity: 0;
	transition: 0.4s;
}

#volume-container:hover .show-on-hover-ani {
	width: 100%;
	opacity: 1;
	transition: 0.4s;
}

.volume-container input[type="range"] {
  -webkit-appearance: none;
  appearance: none; 
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 2px;
  height: 6px;
  background: #fff!important;
}

/* Thumb: webkit */
.volume-container input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  height: 15px;
  width: 15px;
  background-color:  #fff;
  border-radius: 50%;
  border: none;

  /* box-shadow: -407px 0 0 400px #f50; emove this line */
  transition: .2s ease-in-out;
}

/* Thumb: Firefox */
.volume-container input[type="range"]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border-radius: 50%;
  border: none;
  
  /* box-shadow: -407px 0 0 400px #f50; emove this line */
  transition: .2s ease-in-out;
}

/* Hover, active & focus Thumb: Webkit */

.volume-container input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 10px #fff;
}
.volume-container input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px  #fff;
}
.volume-container input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px  #fff;
}

/* Hover, active & focus Thumb: Firfox */

.video-anim-wrap .volume-container input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 10px  #fff;
}
.video-anim-wrap .volume-container input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 13px  #fff;
}
.video-anim-wrap .volume-container input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 13px  #fff;  
}

.video-anim-wrap .captions-btn-container {
  margin-left: auto;
  position: static;
  top: 20px;
}
.video-anim-wrap .caption-click-interest {
  z-index: 70;
  color: #fff;
  justify-content: center;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  transition-duration: 0.3s;
  display: flex;
  position: relative;
}
.caption-click-interest {
    color: #fff;
}


.video-anim-wrap .html-embed-4 {
  width: 42px;
  height: 42px;
}
.video-anim-wrap .temp-hide {
  display: none;
}
.video-anim-wrap .box-info {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  background-color: var(--primary-color);
  justify-content: flex-start;
  align-items: center;
  padding: 10px 20px;
  display: flex;
  position: absolute;
  inset: 0% auto auto 0%;
  overflow: hidden;
}
@media (max-width:767px){
	.text-for-play	{
		display:none;
	}
}