/* tnspaces color overrides for bootstrap */
.text-accent {
  color: #fe0000;
}

.bg-accent {
  background-color: #fe0000;
}

.text-bg-accent {
  color: #ffffff;
  background-color: #fe0000;
}

.text-bg-red {
  background-color: #be2f2f;
  color: #ffffff;
}

.text-bg-green {
  background-color: #4a774b;
  color: #ffffff;
}

.text-bg-blue {
  background-color: #50649d;
  color: #ffffff;
}

/* buttons */
.btn-primary {
  background-color: #fe0000;
  border-color: #fe0000;
}
.btn-primary:hover,
.btn-primary:visited {
  background-color: #df3557;
  border-color: #df3557;
}
.btn-primary:disabled {
  background-color: #b8636f;
  border-color: #b8636f;
}
.btn-primary:active,
.btn-primary:active:focus {
  background-color: #fe0000;
  border-color: #fe0000;
  box-shadow: none;
}

.btn-outline-primary {
  border-color: #fe0000;
  color: #fe0000;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:active:focus {
  background-color: #fe0000;
  border-color: #fe0000;
  color: #ffffff;
}

/* input texts */
.form-control:focus,
.form-select:focus {
  border-color: #df3557;
  box-shadow: 0 0 0 0.2rem rgba(200, 89, 44, 0.25);
}

/* ---- end of overides --- */

.opacity-95 {
  opacity: 0.95 !important;
}

.ws-pre {
  white-space: pre;
}

.ws-pre-wrap {
  white-space: pre-wrap;
}

.overflow-auto {
  overflow: auto;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-copy {
  cursor: copy;
}

.social-icon {
  color: white !important;
  padding: 4px 8px;
  border-radius: 5px;
}

.social-icon-whatsapp {
  background-color: #18d269;
}

.social-icon-instagram {
  background: radial-gradient(
      circle farthest-corner at 35% 90%,
      #fec564,
      transparent 50%
    ),
    radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
    radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
    radial-gradient(
      ellipse farthest-corner at 20% -50%,
      #5258cf,
      transparent 50%
    ),
    radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
    radial-gradient(
      ellipse farthest-corner at 60% -20%,
      #893dc2,
      transparent 50%
    ),
    radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
    linear-gradient(
      #6559ca,
      #bc318f 30%,
      #e33f5f 50%,
      #f77638 70%,
      #fec66d 100%
    );
}

.social-icon-linkedin {
  background-color: #007bb5;
}

.social-icon-facebook {
  background-color: #3b5998;
}

.map-pin {
  color: #ff4444 !important;
}

.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.avatar-lg {
  vertical-align: middle;
  width: 75px;
  height: 75px;
  border-radius: 50%;
}

.text-linkedin {
  color: #007bb5;
}

/* ------------- partner logo slider */
/* 
https://stackoverflow.com/questions/79742964/how-to-make-css-infinite-logo-slider-animation-smooth-without-jumping
*/
.logo-slider {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.logo-slider__track {
  display: flex;
  width: max-content;
  animation: scroll 30s linear infinite;
}

.logo-slider__track:hover {
  animation-play-state: paused;
}

.logo-slider__list {
  display: flex;
}

.logo-slider__logo {
  /* width: 130px; */
  max-height: 32px;
  margin: 0 1rem;
  /* border-radius: 10px; */
}

/* Animation for marquee */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.logo-slider__track:nth-child(even) {
  animation-direction: reverse;
}
/* -------------------------------------- */

/* -------------------------------------- */
/* navbar tweaks */
.breadcrumb-truncate {
  white-space: nowrap;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 576px) {
  /* breadcrumb in full on larger screens */
  .breadcrumb-truncate {
    width: inherit;
  }
}
/* -------------------------------------- */

/* hero section for the home page */
.home-hero {
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(/images/hero.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.divider {
  border-color: #A3757569;
  border-width: 1px;
  border-style: dashed;
  padding-block-start: 15px;
  padding-block-end: 15px;
  border-bottom: 0px;
  border-left: 0px;
  border-right: 0px;
}

.fs-gigantic {
  font-size: 8rem;
}

/*********** infinite maquee animation ********/
/* https://codepen.io/Knovour/pen/boJNPN */
.infinite-marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 10rem;
  overflow: hidden;
}

.infinite-marquee__track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.infinite-marquee:nth-child(odd) .infinite-marquee__track {
  animation-direction: reverse;
}