/* Bootstrap Additions */
@media (min-width: 768px) {
  /** md+ additions */
  .display-md-6 {
    font-size: 2.5rem !important;
  }

  .w-md-auto {
    width: auto !important;
  }

  .w-md-25 {
    width: 25% !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
  .w-md-75 {
    width: 75% !important;
  }
  .w-md-85 {
    width: 85% !important;
  }
  .border-md-none {
    border: 0 !important;
  }
  .fs-md-2 {
    font-size: unset !important;
  }
}
@media (min-width: 992px) {
  /** lg+ additions */
  .w-lg-50 {
    width: 50% !important;
  }
  .border-lg {
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
}

.display-7 {
  font-size: 1.5rem;
}
.display-8 {
  font-size: 1.2rem;
}

/* Smooth fade-in and fade-out animations */
.fade-in {
  opacity: 1;
  animation: fadeIn 0.5s ease-in-out forwards;
}

.fade-out {
  opacity: 0;
  animation: fadeOut 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Navbar Styles */
.navbar-brand img {
  height: 30px;
  width: 30px;
}

body {
  font-family: 'Inter', sans-serif;
}

#navbar {
  top: -1px;
  height: 65px; /* Must match #hero.top */
  background-color: transparent;
  color: white;

  transition: background-color 0.3s ease, color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
#navbar .navbar-nav {
  align-items: baseline;
}

#navbar.scrolled,
#navbar.collapse-open {
  background-color: white;
}

#hero {
  top: -65px; /* Must match #navbar.height */
  padding-top: 80px;
  min-height: 750px;
  height: 120vh;
}
#hero-bg {
  height: 120vh;
  min-height: 800px;
  max-height: 1080px;
}
#hero-words {
  height: 625px;
}
@media (max-width: 991px) {
  #hero {
    height: 1050px;
  }
  #hero-bg {
    height: 1100px;
    min-height: unset;
    max-height: unset;
  }
  #hero-words {
    height: 100%;
  }
}

#navbar #divNavbarMobileCloser {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#navbar.collapse-open #divNavbarMobileCloser {
  display: block;
}

@media (max-width: 991px) {
  #navbar {
    text-align: right;
  }
  #navbar .navbar-collapse {
    margin-top: 0.25rem;
    border-bottom-right-radius: 1rem;
    /* Pixel nudging based on parent containers */
    position: relative;
    right: -28px; /* Must match #navbar .navbar-collapse .navbar-nav margin-right */
  }
  #navbar .navbar-collapse .navbar-nav {
    margin-right: 28px; /* Must match #navbar .navbar-collapse right */
    align-items: end;
  }
  #navbar.scrolled .navbar-collapse,
  #navbar.collapse-open .navbar-collapse,
  #navbar .navbar-collapse.collapsing,
  #navbar .navbar-collapse.show {
    background: linear-gradient(to left, white 0%, white 210px, transparent 280px);
  }

  #navbar .signupNavLink--LightButton,
  #navbar .signupNavLink--DangerButton {
    display: none !important;
  }

  #navbar .nav-item {
    z-index: 100;
  }
  #navbar .nav-link {
    display: inline-block;
    padding: 0.5rem 2rem;
    margin: 0.5rem;
    border-radius: 1rem;

    background-color: white;
    color: black;
    width: 175px;
    text-align: center;
    border: 2px solid red;
  }
}

@media (min-width: 992px) {
  #navbar .signupNavLink {
    display: none !important;
  }
  #navbar.scrolled .signupNavLink--LightButton,
  #navbar:not(.scrolled) .signupNavLink--DangerButton {
    display: none !important;
  }
}

#hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

#hero-bg picture,
#hero-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 99%;
  object-fit: cover;
}

#hero-bg .wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 1;
  pointer-events: none;
}

#hero-messages {
  min-height: 175px;
}

#heroChartContainerWrapper {
  display: flex;
  max-width: 80vw; /* Default sizing, higher than 425px+ will use this. */
  height: 400px;
}
@media (max-width: 374px) {
  #heroChartContainerWrapper {
    max-width: 95vw;
  }
}
@media (min-width: 375px) and (max-width: 424px) {
  #heroChartContainerWrapper {
    max-width: 90vw;
  }
}
@media (min-width: 992px) {
  #heroChartContainerWrapper {
    padding: 25px 50px 40px 0;
    max-width: 800px;
    height: unset;
  }
}

#heroChartContainer {
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}
#heroChartContainer.loaded {
  opacity: 1;
}

#btnHeroChartReset {
  transition: opacity 0.5s ease-in-out, background-color 0.25s ease-in-out, color 0.25s ease-in-out;
  opacity: 0;
}
#btnHeroChartReset.allow {
  opacity: 1;
}

.link-animated {
  position: relative;
  text-decoration: none; /* Remove default underline */
  display: inline-block;
  color: #0d6efd; /* Bootstrap primary link color */
}

.link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: currentColor;
  transform: translateX(-50%) scaleX(1);
  transition: width 0.3s ease-in-out;
}

.link-animated--long::after {
  width: 30%;
}

.link-animated:hover::after {
  width: 110%; /* Expand beyond the word */
}

/* Optional: animate logos in on scroll too */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-on-scroll.visible {
  opacity: 1;
  transform: none;
}

/** Blog Page */
.blog-post {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: transform 0.2s;
  min-height: 400px;
}
.blog-post:hover {
  transform: scale(1.05);
}
.blog-post img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  max-height: 200px; /* Set a maximum height */
}
.blog-post-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 15px 0 10px;
}
.blog-post-description {
  font-size: 1rem;
  color: #555;
}
.blog-post-link {
  text-decoration: none;
  color: inherit;
}

/** Google Sign In Button */
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
  transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity 0.218s;
  transition: opacity 0.218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}

/* Dashboard Page */
#dashboard {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
#dashboard.loading,
#dashboard.loaded {
  opacity: 1;
}
#dashboard.loading .hide-if-loading,
#dashboard.loaded .hide-if-loaded {
  display: none !important;
}

#miniChartsContainer .card {
  transition: transform 0.2s ease;
}

#miniChartsContainer .card:hover {
  transform: scale(1.03);
}

/* Add an opacity transform of 500ms */
#miniChartsContainer .card.fade {
  transition: opacity 0.5s ease;
}

.heartpingr-tooltip {
  --bs-tooltip-bg: rgba(13, 110, 253, 1);
  --bs-tooltip-color: white;
}

.modal:not(.loading) .modal-loading {
  display: none !important;
}
.loading .modal-body-inner,
.loading .modal-footer {
  display: none !important;
}