/**Typeo CSS Start**/
  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
  *{ box-sizing: border-box;}
  body {
  font-family: "Poppins", sans-serif;
  color: #444;
  box-sizing: border-box;
  background-color: #f5f5f5;
  }
  .marquee-group {
  padding: 15px;
  }
  .marquee-group h3, .marquee-group h1 {
  text-align: center;
  }
  /**Typeo CSS End**/
  #marqueeTwo {
  border: #ccc 1px solid;
  }
  #marqueeThree {
  background-color: #999;
  color: #fff;
  }
  .example {
  margin: auto;
  background-color: #fff;
  padding: 10px;
  font-size: 16px;
  }
  @media(max-width: 992px) {
  .example {
  width: 100% !important;
  }
  }

var Marquee = function (element, defaults) {
  var elem = document.getElementById(element),
  options = (defaults === undefined) ? {} : defaults,
  continuous = options.continuous || true,  // once or continuous
  direction = options.direction || 'ltr',   // ltr or rtl
  loops = options.loops || -1,
  speed = options.speed || 0.4,
  milestone = 0,
  marqueeElem = null,
  elemWidth = null,
  self = this,
  ltrCond = 0,
  loopCnt = 0,
  start = 0,
  process = null,
  constructor = function (elem) {
  // Build html
  var elemHTML = elem.innerHTML;
  var elemNode = elem.childNodes[1] || elem;
  elemWidth = elemNode.offsetWidth;
  marqueeElem = '
' + elemHTML + '
';
  elem.innerHTML = marqueeElem;
  marqueeElem = elem.getElementsByTagName('div')[0];
  elem.style.overflow = 'hidden';
  marqueeElem.style.whiteSpace = 'nowrap';
  marqueeElem.style.position = 'relative';
  if (continuous) {
  marqueeElem.innerHTML += elemHTML;
  marqueeElem.style.width = '200%';
  if (direction === 'ltr') {
  start = -elemWidth;
  }
  } else {
  ltrCond = elem.offsetWidth;
  if (direction === 'rtl') {
  milestone = ltrCond;
  }
  }
  if (direction === 'ltr') {
  milestone = -elemWidth;
  } else if (direction === 'rtl') {
  speed = -speed;
  }
  self.start();
  return marqueeElem;
  }
  this.start = function () {
  process = window.setInterval(function () {
  self.play();
  });
  };
  this.play = function () {
  // beginning
  marqueeElem.style.left = start + 'px';
  start = start + speed;
  if (start > ltrCond || start < -elemWidth) {
  start = milestone;
  loopCnt++;
  if (loops !== -1 && loopCnt >= loops) {
  marqueeElem.style.left = 0;
  }
  }
  }
  this.end = function () {
  window.clearInterval(process);
  }
  // Init plugin
  marqueeElem = constructor(elem);
  }
  /*Custom Script */
  /*Option One Start*/
  new Marquee('marqueeOne');
  /*Option One End*/
  /*Option Two Start*/
  new Marquee('marqueeTwo', {
  direction: 'rtl',
  });
  /*Option Two End*/
  /*Option Three Start*/
  new Marquee('marqueeThree', {
  speed: 1,
  });
  /*Option Three End*/