@charset "utf-8";
/* CSS Document */
/* --------------------------------------------- */
/* TiCK Hero Slider — Full-Width Bootstrap       */
/* --------------------------------------------- */

/* Center caption vertically + horizontally */
.tick-hero-caption {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  text-align: left;

  background: rgba(0,0,0,0.60); /*black, last item adjusts opacity*/
  padding: 22px 32px;
  border-radius: 8px;
  color: #fff;

  display: inline-block;
  max-width: 600px;
  white-space: normal;

  /* Slide + fade base state */
  opacity: 0;
  transform: translate(-50%, calc(-50% + 20px)); /* start slightly lower */
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

/* Slide UP + Fade IN when slide is active */
.carousel-item.active .tick-hero-caption {
  opacity: 1;
  transform: translate(-50%, -50%); /* final centered position */
}

/* Slide DOWN + Fade OUT when slide is leaving */
.carousel-item.carousel-item-start .tick-hero-caption,
.carousel-item.carousel-item-end .tick-hero-caption {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 20px)); /* slide down */
}

/* Remove default margins */
.tick-hero-caption h2,
.tick-hero-caption p {
  margin: 0;
  padding: 0;
}

/* Balanced spacing + typography */
.tick-hero-caption h2 {
  font-size: 2.3rem;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.2;
  color: #fff;
}

.tick-hero-caption p {
  font-size: 1.3rem;
  line-height: 1.3;
  color: #fff;
}

/* First slide animation on initial page load */
.carousel-item.active:first-child .tick-hero-caption {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 20px));
  animation: tickFadeUp 0.8s ease forwards;
}


@keyframes tickFadeUp {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 20px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* --------------------------------------------- */
/* TiCK Caption Colour Classes  - white default                 */
/* --------------------------------------------- */

/* Turquoise paragraph */
.tick-hero-caption .tick-p-turq {
  color:#16D7F1;
  font-weight: 400
}

/* Purple paragraph */
.tick-hero-caption .tick-p-purple {
  color: #DA83FD;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .tick-hero-caption {
    padding: 16px 20px;
    max-width: 95%;
  }
}
@media (max-width: 480px) {
  #heroCarousel {
    display: none !important;
  }
}
@media (max-width: 480px) {
  #tickHeroMobile {
    display: block !important;
  }
}
.tick-hero-mobile {
  position: relative;
}

.tick-hero-mobile-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(0,0,0,0.55);
  padding: 16px;
  border-radius: 8px;
  color: #fff;
}

.tick-hero-mobile-caption h2 {
  font-size: 1.4rem;
  margin-bottom: 6px;
	color: #fff;
}

.tick-hero-mobile-caption p {
  font-size: 1rem;
  line-height: 1.3;
	color: #fff;
}