.themed-grid-col {
  padding-top: .25rem;
  padding-bottom: .25rem;
  /* background-color: rgba(0, 123, 255, .1);
  border: 0.5px solid rgba(86, 61, 124, .1); */
}

.themed-container {
  padding: .75rem;
  margin-bottom: 1.25rem;
  background-color: rgba(0, 123, 255, .1);
  border: 1px solid rgba(0, 123, 255, .1);
}

.bottom-menu {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #212529;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 10px 0;
      box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
      z-index: 1000;
    }

    .bottom-menu a {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .bottom-menu a i {
      font-size: 22px;
      margin-bottom: 4px;
    }

    .bottom-menu a.active {
      color: #0d6efd; /* Bootstrap primary rengi */
    }


/* Continuous animations */
    .grow { animation:growScale 1s ease-in-out infinite; transform-origin:center center }
    .shrink { animation:shrinkScale 1s ease-in-out infinite; transform-origin:center center }
    .pulse { animation:pulseScale 1s cubic-bezier(.4,.0,.2,1) infinite; transform-origin:center center }

    @keyframes growScale{
      0%{ transform:scale(1) rotate(0.01deg) }
      50%{ transform:scale(1.06) rotate(-0.3deg) }
      100%{ transform:scale(1) rotate(0.01deg) }
    }
    @keyframes shrinkScale{
      0%{ transform:scale(1) }
      50%{ transform:scale(0.94) }
      100%{ transform:scale(1) }
    }
    @keyframes pulseScale{
      0%{ transform:scale(0.98) }
      50%{ transform:scale(1.03) }
      100%{ transform:scale(0.98) }
    }


@media (max-width: 767px) {
		.carousel-inner .carousel-item > div {
			display: visible;
		}
		.carousel-inner .carousel-item > div:first-child {
			display: block;
		}
	}

	.carousel-inner .carousel-item.active,
	.carousel-inner .carousel-item-next,
	.carousel-inner .carousel-item-prev {
		display: flex;
	}

	/* medium and up screens */
	@media (min-width: 768px) {

		.carousel-inner .carousel-item-end.active,
		.carousel-inner .carousel-item-next {
			transform: translateX(25%);
		}

		.carousel-inner .carousel-item-start.active, 
		.carousel-inner .carousel-item-prev {
			transform: translateX(-25%);
		}
	}

	.carousel-inner .carousel-item-end,
	.carousel-inner .carousel-item-start { 
		transform: translateX(0);
	}