/* External Google Fonts @import removed for CSP compliance (style-src 'self').
   System sans-serif is now the fallback. To bring Roboto back, drop the files
   into static/fonts/ and add a proper @font-face with src: url('../fonts/...'). */

* {
  font-family: 'Roboto', sans-serif;
}

.hover:hover {
  cursor: pointer !important;
}

.hover-bg-light:hover {
  background-color: rgb(248,249,250) !important;
}

.b2t {
  position: fixed !important;
  bottom: 21px;
  right: 21px;
  z-index: 99;
  opacity: 0.6;
  display: none;
}

.b2t:hover {
  background-color: #a9acc6;
}

.seno-gradient {
  background: rgb(0,103,255);
  background: -moz-linear-gradient(103deg, rgba(0,103,255,1) 0%, rgba(0,212,255,1) 50%, rgba(255,217,6,1) 100%);
  background: -webkit-linear-gradient(103deg, rgba(0,103,255,1) 0%, rgba(0,212,255,1) 50%, rgba(255,217,6,1) 100%);
  background: linear-gradient(103deg, rgba(0,103,255,1) 0%, rgba(0,212,255,1) 50%, rgba(255,217,6,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0067ff",endColorstr="#ffd906",GradientType=1);
}

.bg-hero {
  background-color: #01579b;
  background: url('../img/hero-bg.jpg') center center no-repeat scroll;
  background-size: cover;
}

.bg-hero-secondary {
  background-color: rgb(255, 255, 255);
  background: url('../img/hero-bg-secondary.jpg') center center no-repeat scroll;
  background-size: cover;
}

.bg-gradient-3 {
  background-image: linear-gradient(135deg,
      var(--bs-primary) 0%,
      var(--bs-primary) 33.33%,
      var(--bs-info) 33.33%,
      var(--bs-info) 66.66%,
      var(--bs-warning) 66.66%,
      var(--bs-warning) 100%);
}

.bg-gradient-alpha-50 {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05) 100%);
}

.vh-90 {
  height: 90vh !important;
}

.rotate-lr {
  writing-mode: vertical-lr !important;
  transform: scale(-1, -1);
}

.fs-8vw {
  font-size: 8vw !important;
}

.fs-7vw {
  font-size: 7vw !important;
}

.rotate-90 {

  transform: rotate(90deg);
  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(90deg);

  /* Firefox */
  -moz-transform: rotate(90deg);

  /* IE */
  -ms-transform: rotate(90deg);

  /* Opera */
  -o-transform: rotate(90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}


.bg-opaque {
  --bs-bg-opacity: 0.5 !important;
}

.bg-opaque-30 {
  --bs-bg-opacity: 0.3 !important;
}

.bg-opaque-45 {
  --bs-bg-opacity: 0.45 !important;
}

.bg-opaque-75 {
  --bs-bg-opacity: 0.75 !important;
}

.inset-shadow {
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .1);
}

.text-justify {
  text-align: justify !important;
  text-indent: 50px !important;
}

.text-shadow {
  text-shadow: 0px 5px 5px rgba(24, 26, 37, .35);
}

.text-shadow-sm {
  text-shadow: 0 .125rem .25rem rgba(24, 26, 37, .25);
}

.img-shadow {
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.35)); /* Adjust values as needed */
}

.bg-box {
  background-color: #212529;
  background: url('../img/bg-gray.jpg') center center no-repeat scroll;
}

.min-price-card-h {
  min-height: 180px;
}

.bg-dark-g {
  /*background-color: rgb(12, 15, 18);*/ /* #171f28;*/
  background-color: rgba(12, 15, 18,var(--bs-bg-opacity)) !important;
}

.bg-blue {
  --bs-bg-opacity: 1;
  background-color: rgba(1, 87, 155,var(--bs-bg-opacity)) !important;
}

.field-required {
  color: #9B111E !important;
}

/* LMS */
.bg-lms-gradient {
  background: rgb(16, 90, 154);
  background: linear-gradient(45deg, rgba(16, 90, 154, 1) 0%, rgba(15, 86, 147, 1) 25%, rgba(15, 82, 139, 1) 50%, rgba(14, 77, 132, 1) 75%, rgba(11, 60, 102, 1) 100%);
}

.h-box-min {
  min-height: 738px !important;
}

.h-li-min {
  min-height: 90px !important;
}

/* BLUES */
.bg-blue-01 {
  --bs-bg-opacity: 1;
  background-color: rgba(0, 12, 20,var(--bs-bg-opacity)) !important;
}

.bg-blue-02 {
  --bs-bg-opacity: 1;
  background-color: rgba(0, 23, 41,var(--bs-bg-opacity)) !important;
}

.bg-blue-03 {
  --bs-bg-opacity: 1;
  background-color: rgba(0, 35, 61,var(--bs-bg-opacity)) !important;
}

.bg-blue-04 {
  --bs-bg-opacity: 1;
  background-color: rgba(0, 46, 81,var(--bs-bg-opacity)) !important;
}

.bg-blue-05 {
  --bs-bg-opacity: 1;
  background-color: rgba(1, 58, 101,var(--bs-bg-opacity)) !important;
}

.bg-blue-06 {
  --bs-bg-opacity: 1;
  background-color: rgba(1, 69, 122,var(--bs-bg-opacity)) !important;
}

.bg-blue-07 {
  --bs-bg-opacity: 1;
  background-color: rgba(1, 81, 142,var(--bs-bg-opacity)) !important;
}

.bg-blue-08 {
  --bs-bg-opacity: 1;
  background-color: rgba(1, 87, 155,var(--bs-bg-opacity)) !important;
}

.text-blue-08 {
  color: rgba(1, 87, 155, 1) !important;
}

.bg-blue-09 {
  --bs-bg-opacity: 1;
  background-color: rgba(1, 104, 183,var(--bs-bg-opacity)) !important;
}

.bg-blue-10 {
  --bs-bg-opacity: 1;
  background-color: rgba(1, 115, 203,var(--bs-bg-opacity)) !important;
}

@keyframes fadeInOut {
  0% {
    opacity: 0.01;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.01;
  }
}

.fade-text {
  animation: fadeInOut 2s ease-in-out infinite;
}

.rain-text {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: #000;
  overflow: hidden;
}

.rain-text::before,
.rain-text::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  animation: ripple 3s ease-in-out infinite;
}

.rain-text::after {
  animation-delay: 1.5s;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(10);
    opacity: 0;
  }
}

.flip-vertical {
  display: inline-block;
  perspective: 1000px; /* Adds depth to the 3D effect */
}

.flip-vertical-text {
  display: inline-block;
  transform-style: preserve-3d; /* Ensures the 3D transformation happens */
  animation: flipVert 2s infinite ease-in-out;
}

@keyframes flipVert {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

.pulse-text {
  display: inline-block;
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1); /* Original size */
  }
  50% {
    transform: scale(0.5); /* Zoom in */
  }
  100% {
    transform: scale(1); /* Back to original size */
  }
}

.ripple-btn {
  position: relative;
  overflow: hidden;
}

.ripple-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.3); /* Matches Bootstrap primary button color */
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.ripple-btn:active::before {
  animation: ripple-animation 0.6s ease-out;
  opacity: 1;
}

@keyframes ripple-animation {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(20);
    opacity: 0;
  }
}

.ripple-effect {
  position: relative;
  overflow: hidden; /* Ensures the ripple stays within the button */
}

.ripple-effect .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(131, 6, 6, 0.3); /* Adjust color for visibility */
  width: 10px;
  height: 10px;
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
}

@keyframes ripple-animation {
  to {
    transform: scale(20); /* The ripple grows */
    opacity: 0; /* The ripple fades out */
  }
}

.btn-ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.btn-ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.btn-ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}

.text-3d {
  color: #fff; /* Base text color */
  text-shadow:
      1px 1px 0px #eee, /* Top-left shadow */
      2px 2px 0px #ddd, /* Top-left shadow */
      3px 3px 0px #ccc, /* Top-left shadow */
      /*4px 4px 0px #bbb, /* Top-left shadow */
      4px 4px 4px rgba(0, 0, 0, 0.1); /* Bottom-right shadow (blur) */
}