:root {
  --blue: #2d2d72;
  --yellow: #f5bf23;
  --black: #111;
  --white: #fff;
  --light-color: #585757;
  --light-bg: #d3cfcf;
  --box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1);
  --border: .1rem solid rgba(0,0,0,.3);
}

/*========================================================================================
                            The blogs section styling
======================================================================================== */
.truncate-line-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*========================================================================================
                            The floating play button animation on home page
======================================================================================== */
/* Floating Button Animation */
.tutorial-button {
  position: fixed;
  bottom: 8%;
  right: 8%;
  z-index: 100;
  animation: bounce 1.5s ease-in-out infinite;
}

/* Bouncing Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Optional Hover Effect */
.tutorial-button:hover {
    transform: scale(1.2);
}