body { 
  font-family:quicksandRegular,arial,helvetica,verdana;
}

@font-face {
  font-family: 'amaranthRegular';
  src: url("/assets/fonts/Amaranth-Regular.ttf") format('truetype');
}
.amaranth-r {
  font-family: 'amaranthRegular', Helvetica, Arial, "sans-serif"; 
}

@font-face {
  font-family: 'amaranthBold';
  src: url("/assets/fonts/Amaranth-Bold.ttf") format('truetype');
}
.amaranth-b {
  font-family: 'amaranthBold', Helvetica, Arial, "sans-serif"; 
}

@font-face {
  font-family: 'bevanRegular';
  src: url("/assets/fonts/Bevan-Regular.ttf") format('truetype');
}
.bevan-r {
  font-family: 'bevanRegular', Helvetica, Arial, "sans-serif"; 
}

@font-face {
  font-family: 'dancingScriptRegular';
  src: url("/assets/fonts/DancingScript-Regular.ttf") format('truetype');
}
.dancing-r {
  font-family: 'dancingScriptRegular', Helvetica, Arial, "sans-serif"; 
}

@font-face {
  font-family: 'kaushanRegular';
  src: url("/assets/fonts/KaushanScript-Regular.ttf") format('truetype');
}
.kaushan-r {
  font-family: 'kaushanRegular', Helvetica, Arial, "sans-serif"; 
}

@font-face {
  font-family: 'lobster';
  src: url("/assets/fonts/Lobster-Regular.ttf") format('truetype');
}
.lobster-r {
  font-family: 'lobster', Helvetica, Arial, "sans-serif"; 
}

@font-face {
  font-family: 'robotoRegular';
  src: url("/assets/fonts/Roboto-Regular.ttf") format('truetype');
}
.roboto-r {
  font-family: 'robotoRegular', Helvetica, Arial, "sans-serif"; 
}

@font-face {
  font-family: 'robotoBold';
  src: url("/assets/fonts/Roboto-Bold.ttf") format('truetype');
}
.roboto-b {
  font-family: 'robotoBold', Helvetica, Arial, "sans-serif"; 
}

@font-face {
  font-family: 'quicksandRegular';
  src: url("/assets/fonts/Quicksand-Regular.ttf") format('truetype');
}
.quicksand-r {
  font-family: 'quicksandRegular', Helvetica, Arial, "sans-serif"; 
}

@font-face {
  font-family: 'quicksandBold';
  src: url("/assets/fonts/Quicksand-Bold.ttf") format('truetype');
}
.quicksand-b {
  font-family: 'quicksandBold', Helvetica, Arial, "sans-serif"; 
}

.pmbblue-grad-vert {
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 50%, rgba(61, 118, 134, 0.5) 100%);
}

@media (max-width: 575px) { 
  .scaleFS {
    font-size:.7rem!important;
  }
  .scaleFS-H {
    font-size:calc(1rem + .3vw)!important;
  }
}
@media (min-width: 576px) and (max-width: 767px) {  
  .scaleFS {
    font-size:.8rem!important;
  }
  .scaleFS-H {
    font-size:1.2!important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {  
  .scaleFS {
    font-size:1rem!important;
  }
  .scaleFS-H {
    font-size:calc(1.6rem + .9vw)!important;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {   
  .scaleFS {
    font-size:calc(1.2rem + .6vw)!important;
  }
  .scaleFS-H {
    font-size:calc(1.8rem + .9vw)!important;
  }
}
@media (min-width: 1400px) {   
  .scaleFS {
    font-size:calc(1.4rem + .6vw)!important;
  }
  .scaleFS-H {
    font-size:calc(2rem + .9vw)!important;
  }
}

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-danger);
  --bs-tooltip-color: var(--bs-white);
  --bs-tooltip-opacity: 1;
}

.bodyBackground {
  background-color: #5a7caf;
}

.floralwhite {
  background-color: floralwhite;
}
.aliceblue {
  background-color: aliceblue;
}

.coverBG {
  background: no-repeat fixed center center / cover;
}

.coverBG-static {
  background: no-repeat top center / cover;
}

.darken {
  background-blend-mode: multiply; 
  background-color: #999999;
}

.whiteGlow {
  box-shadow: 0px 0px 10px white;
}

.containerBackground { background-color: #edf2f9 !important; }

.quote-style {
  overflow: hidden;
  font-family: "Merriweather", "Georgia", Times New Roman, Times, serif;
  font-size: 20px;
  line-height: 40px;
  font-style: italic;
  background: #f5f5f5;
  padding: 32px;
  color: #777;
  font-weight: 300;
}

.ratio-9x16 {
  --bs-aspect-ratio: 177.7777777778%;
}

.infoCircle {
  width: 215px; 
  height: 215px;
  border-radius: 50%;
  display: flex;
  align-items: center; 
  justify-content: center;
  text-align: center;
  padding:5px;
  font-weight: bold;
}
.circle-wrapper {
  position: relative;
  width: 215px;
  height: 215px;
  float: left;
  margin: 10px;
}
.circle-wrapper:hover .circleBG {
  animation: spin 4s linear infinite;
}
.circleBG {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  border: dashed black !important;
  animation: spin 20s linear infinite;
}
.circleText {
  position: absolute;
  color: #fff;
  top: 50%;
  left: 50%;
  width:90%;
  transform: translate(-50%, -50%);
}

@keyframes spin { 
  100% { 
    transform: rotateZ(360deg);
  }
}

.fadeInElement {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 0;
}
.delay1 {
  animation-delay: .5s;
}
.delay2 {
  animation-delay: 1s;
}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.shake {
  animation: shake-animation 4.72s ease infinite;
  transform-origin: 50% 50%;
}
@keyframes shake-animation {
   0% { transform:translate(0,0) }
  1% { transform:translate(5px,0) }
  3% { transform:translate(0,0) }
  5% { transform:translate(5px,0) }
  7% { transform:translate(0,0) }
  8% { transform:translate(5px,0) }
  10% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}

.tilt {
  animation: tilt-animation 4.72s ease infinite;
  transform-origin: 50% 50%;
}
@keyframes tilt-animation {
   0% { transform:rotate(3deg) }
  1% { transform:rotate(-3deg) }
  3% { transform:rotate(3deg) }
  3% { transform:rotate(-3deg) }
  7% { transform:rotate(3deg) }
  8% { transform:rotate(-3deg) }
  10% { transform:rotate(0deg) }
  100% { transform:rotate(0deg) }
}

.hueChanger {
  animation: hueChanger 1s ease infinite;
}

@keyframes hueChanger {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(180deg); }
  100% { filter: hue-rotate(0deg); }
}

.fs-7 { font-size:.75rem!important }
.fs-8 { font-size:.5rem!important }

.chatBotIcon {
  position: fixed;
  bottom:40px;
  right:20px;
}
.chatBotIcon:hover {
  cursor: pointer !important;
}
.chatBotWindow {
  position: fixed;
  display: none;
  bottom:10px;
  right:20px;
  z-index: 900;
}
.chatBotWindow .card-body {
  height: 300px;
  overflow-y: scroll;
}

@media (max-width: 425px) { 
  .chatBotWindow {
    width:300px;
  }
}

@media (min-width: 426px) { 
  .chatBotWindow {
    width:425px;
  }
}