/* =====music-player======== */
.play-music-container {
  position: relative;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}
.timer {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
}
.play-music-container > img {
  width: 24px;
  height: 24px;
}
.oi-liveblog-playicon {
  width: 24px;
  height: 24px;
  background: #f5f5f5;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  position: relative;
  cursor: pointer;
}
.oi-headphone-playicon {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #333;
  width: 1px;
  border-radius: 5px;
  transition: all 0.8s ease 0s;
  -moz-transition: all 0.8s ease 0s;
  -o-transition: all 0.8s ease 0s;
  z-index: 99;
}
.bar1 {
  left: 4px;
  height: 4px;
  animation: line1 0.8s infinite alternate;
}
.bar4 {
  left: 10px;
  height: 8px;
  animation: line1 0.8s infinite alternate;
}
.bar5 {
  left: 12px;
  height: 4px;
  animation: line2 0.8s infinite alternate;
}
.bar6 {
  left: 14px;
  height: 4px;
  animation: line3 0.8s infinite alternate;
}
.bar7 {
  left: 16px;
  height: 4px;
  animation: line2 0.8s infinite alternate;
}
.bar8 {
  left: 18px;
  height: 4px;
  animation: line1 0.8s infinite alternate;
}
@keyframes line1 {
  0% {
    height: 4px;
  }

  50% {
    height: 8px;
  }
  100% {
    height: 12px;
  }
}
.bar2 {
  left: 6px;
  height: 8px;
  animation: line2 0.8s infinite alternate;
}
@keyframes line2 {
  0% {
    height: 8px;
  }

  50% {
    height: 12px;
  }
  100% {
    height: 8px;
  }
}
.bar3 {
  left: 8px;
  height: 12px;
  animation: line3 0.8s infinite alternate;
}
@keyframes line3 {
  0% {
    height: 12px;
  }

  50% {
    height: 8px;
  }
  100% {
    height: 4px;
  }
}
.toggle {
  display: none;
}
.telugu-lines {
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.01em;
  color: #9e0202;
  padding-right: 208px;
}
.english-lines {
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.01em;
  color: #333333;
}
.mantra-lines {
  background-image: url(../images/mantras/web/screenshot1.jpg);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 24px;
  width: 670px;
  margin-bottom:25px;
}
.video-container {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../assets/rudra-mantra1\ 31000.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 650px;
  height: 366px;
  position: relative;
  margin: 48px 0;
}
.video-container p {
  font-size: 21px;
  font-weight: 600;
  line-height: 25.2px;
  color: #ffffff;
  padding: 20px;
}
.video-container img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mantra-head {
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.01em;
  color: #1e1e1e;
  margin-bottom: 24px;
  font-family: Lato;
}
.mantra-meaning {
  font-size: 17px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.01em;
  color: #4b4b4b;
}
.each-description {
  margin-bottom: 32px;
}
.faq-head {
  color: #1e1e1e;
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.01em;
}
.faq-question {
  color: #333333;
  font-size: 17px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.each-faq {
  margin-top: 24px;
  padding: 0 0 16px 16px;
  border-bottom: 1px solid #eceaebae;
  cursor: pointer;
}
.faq-answer {
  padding: 0 30px 0 0;
  display: none;
}
.each-faq.active .faq-answer {
  display: block;
  padding-top: 10px;
}
.faq-question img {
  transition: all ease-in-out 0.2s;
}
.each-faq.active img {
  transform: rotate(180deg);
}
.faq-container {
  margin-bottom: 48px;
}
.carousle-head {
  font-size: 22px;
  font-weight: 600;
  line-height: 24px;
  color: #1e1e1e;
}
.mantra-carousle {
  margin-bottom: 48px;
}
.carousel-track .each-mantra {
  min-width: 266px;
  margin: 12px 16px;
  max-width: 266px;
  background-color: #fbfbfb;

}
.carousel-track {
  display: flex;
  overflow-x: scroll;
  white-space: nowrap;
  margin-top: 32px;
}
.carousel-track {white-space: nowrap;overflow-x: auto;-ms-overflow-style: none;scrollbar-width: none;}
.carousel-track::-webkit-scrollbar {display: none;}
.carousel-track::-webkit-scrollbar {
  display: none;
}
.img-holder img {
  width: 100%;
}
.carousel-track .each-mantra:hover .img-holder img {
  transform: scale(0.95);
}
.mantra-carousle-wrapper,.mantra-carousle-wrapper2 {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  /* overflow-x: hidden; */
}
.carousel-parent{
  overflow: hidden;
}
.carousel{
  min-width: fit-content;
}
.carousel-track {
  transition: transform 0.5s ease;
  background-color: #fbfbfb;
}
.left-button {
  z-index: 999;
  transition: scale ease-in-out .2s;
  position: absolute;
  left:-2.5%;
  top: 37%;
  transform: rotate(180deg);
  cursor: pointer;
  display: none;
}
.right-button {
  z-index: 999;
  transition: scale ease-in-out .2s;
  position: absolute;
  right: -2.5%;
  top: 37%;
  cursor: pointer;
}