@import url(https://fonts.googleapis.com/css?family=Nunito:300,400,600,700);
@import url(https://fonts.googleapis.com/css2?family=Tomorrow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap);
html {
  scroll-behavior: smooth;
}

.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 80px;
}
@media (min-width: 768px) {
  .wave-container {
    height: 160px;
  }
}
@media (min-width: 992px) {
  .wave-container {
    height: 200px;
  }
}
.wave-container .wave-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  fill: #ffffff !important;
}
.wave-container .wave-svg path {
  fill: #ffffff !important;
}
.wave-container .wave-container svg {
  fill: #ffffff !important;
}
.wave-container .wave-container svg path {
  fill: #ffffff !important;
}

.background-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.background-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: -1;
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/static/images/backgrounds/video-bg.png");
  background-repeat: repeat;
  background-size: 4px 4px;
  opacity: 1;
  pointer-events: none;
}

@-webkit-keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  30% {
    opacity: 0.2;
    transform: scale(0.9);
  }
  60% {
    opacity: 0.5;
    transform: scale(1.02);
  }
  80% {
    opacity: 0.8;
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  30% {
    opacity: 0.2;
    transform: scale(0.9);
  }
  60% {
    opacity: 0.5;
    transform: scale(1.02);
  }
  80% {
    opacity: 0.8;
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.logo-fade-in {
  animation: fadeInScale 1s ease-out forwards;
  -webkit-animation: fadeInScale 1s ease-out forwards;
}

@-webkit-keyframes logoHeartbeat {
  0%, 100% {
    filter: brightness(1) contrast(1) saturate(1);
    transform: scale(1);
  }
  5% {
    filter: brightness(1.5) contrast(1.3) saturate(1.4);
    transform: scale(1.04);
  }
  10% {
    filter: brightness(1.2) contrast(1.1) saturate(1.1);
    transform: scale(1.01);
  }
  15% {
    filter: brightness(1.4) contrast(1.25) saturate(1.3);
    transform: scale(1.02);
  }
  20% {
    filter: brightness(1) contrast(1) saturate(1);
    transform: scale(1);
  }
}
@keyframes logoHeartbeat {
  0%, 100% {
    filter: brightness(1) contrast(1) saturate(1);
    transform: scale(1);
  }
  5% {
    filter: brightness(1.5) contrast(1.3) saturate(1.4);
    transform: scale(1.04);
  }
  10% {
    filter: brightness(1.2) contrast(1.1) saturate(1.1);
    transform: scale(1.01);
  }
  15% {
    filter: brightness(1.4) contrast(1.25) saturate(1.3);
    transform: scale(1.02);
  }
  20% {
    filter: brightness(1) contrast(1) saturate(1);
    transform: scale(1);
  }
}
.logo-heartbeat {
  animation: logoHeartbeat 2s ease-in-out infinite;
  will-change: transform, filter;
  -webkit-animation: logoHeartbeat 2s ease-in-out infinite;
}

.logo-fade-in.logo-heartbeat {
  animation: fadeInScale 1s ease-out forwards, logoHeartbeat 2s ease-in-out 1s infinite;
  -webkit-animation: fadeInScale 1s ease-out forwards, logoHeartbeat 2s ease-in-out 1s infinite;
}

.logo-hover {
  transition: all 0.3s ease;
}
.logo-hover:hover {
  transform: scale(1.1) rotate(5deg);
  filter: brightness(1.2) drop-shadow(0 0 20px rgba(46, 192, 255, 0.6));
}

.crosai-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.crosai-button {
  position: relative;
  width: 200px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgb(255, 255, 255);
  background: transparent;
  transition: all 0.3s cubic-bezier(0, 0.22, 0.3, 1);
}
.crosai-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.crosai-button span {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  z-index: 10;
  letter-spacing: 1px;
  font-family: "Oswald", sans-serif;
  transition: color 0.3s ease;
}
.crosai-button .back {
  position: absolute;
  width: 0;
  height: 0;
  filter: url(#filter);
  border-radius: 50%;
  z-index: 5;
  transition: all 2.5s cubic-bezier(0.1, 0.22, 0.3, 1);
}
.crosai-button:hover:before {
  opacity: 1;
}
.crosai-button:hover span {
  color: #fff;
}
.crosai-button:hover .back {
  width: 400px;
  height: 400px;
}

.crosai-button-primary:hover {
  border-color: #4365B9;
}
.crosai-button-primary .back {
  left: -50%;
  top: -50%;
  background: linear-gradient(135deg, #4365B9 0%, #987CCF 50%, #14B8A6 100%);
}

.crosai-button-secondary:hover {
  border-color: #14B8A6;
}
.crosai-button-secondary .back {
  right: -50%;
  top: -50%;
  background: linear-gradient(135deg, #14B8A6 0%, #4365B9 50%, #987CCF 100%);
}

.crosai-button-warning:hover {
  border-color: #FCC800;
}
.crosai-button-warning .back {
  left: -50%;
  bottom: -50%;
  background: linear-gradient(135deg, #FCC800 0%, #DA623D 50%, #987CCF 100%);
}

.crosai-button-danger:hover {
  border-color: #DA623D;
}
.crosai-button-danger .back {
  right: -50%;
  bottom: -50%;
  background: linear-gradient(135deg, #DA623D 0%, #FCC800 50%, #4365B9 100%);
}

.crosai-button-purple:hover {
  border-color: #987CCF;
}
.crosai-button-purple .back {
  left: -50%;
  top: -50%;
  background: linear-gradient(135deg, #987CCF 0%, #4365B9 50%, #14B8A6 100%);
}

.bg-gradient-primary {
  background: linear-gradient(135deg, #4365B9 0%, #987CCF 50%, #14B8A6 100%) !important;
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, #14B8A6 0%, #4365B9 50%, #987CCF 100%) !important;
}

.bg-gradient-warning {
  background: linear-gradient(135deg, #FCC800 0%, #DA623D 50%, #987CCF 100%) !important;
}

.bg-gradient-danger {
  background: linear-gradient(135deg, #DA623D 0%, #FCC800 50%, #4365B9 100%) !important;
}

.bg-gradient-purple {
  background: linear-gradient(135deg, #987CCF 0%, #4365B9 50%, #14B8A6 100%) !important;
}

.fill-cyan {
  fill: #14B8A6 !important;
}

.fill-pink {
  fill: #ff6b9d !important;
}

.fill-yellow {
  fill: #FCC800 !important;
}

.fill-blue {
  fill: #4365B9 !important;
}

.fill-purple {
  fill: #987CCF !important;
}

.text-primary {
  color: #4365B9 !important;
}

.text-secondary {
  color: #14B8A6 !important;
}

.text-success {
  color: #14B8A6 !important;
}

.text-info {
  color: #4365B9 !important;
}

.text-warning {
  color: #FCC800 !important;
}

.text-danger {
  color: #DA623D !important;
}

.text-purple {
  color: #987CCF !important;
}

.text-blue {
  color: #4365B9 !important;
}

.text-teal {
  color: #14B8A6 !important;
}

.text-yellow {
  color: #FCC800 !important;
}

.text-red {
  color: #DA623D !important;
}

.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: 1.25 !important;
}

.lh-base {
  line-height: 1.5 !important;
}

.lh-lg {
  line-height: 1.75 !important;
}

.lh-xl {
  line-height: 2 !important;
}

.lh-2 {
  line-height: 2 !important;
}

.lh-3 {
  line-height: 3 !important;
}

.lh-4 {
  line-height: 4 !important;
}

.lh-5 {
  line-height: 5 !important;
}

@media (min-width: 576px) {
  .lh-sm-1 {
    line-height: 1 !important;
  }
  .lh-sm-sm {
    line-height: 1.25 !important;
  }
  .lh-sm-base {
    line-height: 1.5 !important;
  }
  .lh-sm-lg {
    line-height: 1.75 !important;
  }
  .lh-sm-xl {
    line-height: 2 !important;
  }
}
@media (min-width: 768px) {
  .lh-md-1 {
    line-height: 1 !important;
  }
  .lh-md-sm {
    line-height: 1.25 !important;
  }
  .lh-md-base {
    line-height: 1.5 !important;
  }
  .lh-md-lg {
    line-height: 1.75 !important;
  }
  .lh-md-xl {
    line-height: 2 !important;
  }
}
@media (min-width: 992px) {
  .lh-lg-1 {
    line-height: 1 !important;
  }
  .lh-lg-sm {
    line-height: 1.25 !important;
  }
  .lh-lg-base {
    line-height: 1.5 !important;
  }
  .lh-lg-lg {
    line-height: 1.75 !important;
  }
  .lh-lg-xl {
    line-height: 2 !important;
  }
}
@media (min-width: 1200px) {
  .lh-xl-1 {
    line-height: 1 !important;
  }
  .lh-xl-sm {
    line-height: 1.25 !important;
  }
  .lh-xl-base {
    line-height: 1.5 !important;
  }
  .lh-xl-lg {
    line-height: 1.75 !important;
  }
  .lh-xl-xl {
    line-height: 2 !important;
  }
}
.bg-primary {
  background-color: #4365B9 !important;
}

.bg-secondary {
  background-color: #14B8A6 !important;
}

.bg-success {
  background-color: #14B8A6 !important;
}

.bg-info {
  background-color: #4365B9 !important;
}

.bg-warning {
  background-color: #FCC800 !important;
}

.bg-danger {
  background-color: #DA623D !important;
}

.border-primary {
  border-color: #4365B9 !important;
}

.border-secondary {
  border-color: #14B8A6 !important;
}

.border-success {
  border-color: #14B8A6 !important;
}

.border-info {
  border-color: #4365B9 !important;
}

.border-warning {
  border-color: #FCC800 !important;
}

.border-danger {
  border-color: #DA623D !important;
}

@media only screen and (max-width: 768px) {
  .crosai-buttons {
    flex-direction: column;
    gap: 1rem;
  }
  .crosai-button {
    width: 250px;
    height: 50px;
  }
}
.fill-section-dark {
  fill: #1A232D !important;
}

.footer a {
  color: #ffffff !important;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer a:hover {
  color: #4365B9 !important;
  text-decoration: none;
}
.footer a:visited {
  color: #ffffff !important;
}

.footer.bg-section-dark a:hover,
.footer-dark .list-unstyled li a:hover,
.footer-dark .copyright a:hover,
.footer.bg-section-dark .list-unstyled li a:hover {
  color: #4365B9 !important;
  text-decoration: none;
}

body .footer.bg-section-dark .list-unstyled li a:hover {
  color: #4365B9 !important;
  text-decoration: none;
}

.btn-primary {
  background-color: #4365B9 !important;
  border-color: #4365B9 !important;
}
.btn-primary:hover {
  background-color: #355194 !important;
  border-color: #355194 !important;
}
.btn-primary:focus {
  background-color: #355194 !important;
  border-color: #355194 !important;
  box-shadow: 0 0 0 0.2rem rgba(67, 101, 185, 0.5) !important;
}
.btn-primary:active {
  background-color: #2f4681 !important;
  border-color: #2f4681 !important;
}

.btn-secondary {
  background-color: #14B8A6 !important;
  border-color: #14B8A6 !important;
}
.btn-secondary:hover {
  background-color: #0f8a7d !important;
  border-color: #0f8a7d !important;
}
.btn-secondary:focus {
  background-color: #0f8a7d !important;
  border-color: #0f8a7d !important;
  box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.5) !important;
}
.btn-secondary:active {
  background-color: #0d7368 !important;
  border-color: #0d7368 !important;
}

.btn-success {
  background-color: #14B8A6 !important;
  border-color: #14B8A6 !important;
}
.btn-success:hover {
  background-color: #0f8a7d !important;
  border-color: #0f8a7d !important;
}

.btn-info {
  background-color: #4365B9 !important;
  border-color: #4365B9 !important;
}
.btn-info:hover {
  background-color: #355194 !important;
  border-color: #355194 !important;
}

.btn-warning {
  background-color: #FCC800 !important;
  border-color: #FCC800 !important;
  color: #000 !important;
}
.btn-warning:hover {
  background-color: #c9a000 !important;
  border-color: #c9a000 !important;
  color: #000 !important;
}

.btn-danger {
  background-color: #DA623D !important;
  border-color: #DA623D !important;
}
.btn-danger:hover {
  background-color: #bf4925 !important;
  border-color: #bf4925 !important;
}

.header-transparent {
  background: transparent !important;
  transition: background-color 0.3s ease;
}

.navbar-transparent {
  background: transparent !important;
  transition: all 0.6s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
}

.navbar-main {
  transition: all 0.6s ease;
}
.navbar-main.navbar-transparent {
  background: transparent !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
}
.navbar-main.bg-dark {
  background-color: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(10px);
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.font-tomorrow {
  font-family: "Tomorrow", sans-serif !important;
}

.font-tomorrow-100 {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 100 !important;
}

.font-tomorrow-200 {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 200 !important;
}

.font-tomorrow-300 {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 300 !important;
}

.font-tomorrow-400 {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 400 !important;
}

.font-tomorrow-500 {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 500 !important;
}

.font-tomorrow-600 {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 600 !important;
}

.font-tomorrow-700 {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 700 !important;
}

.font-tomorrow-800 {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 800 !important;
}

.font-tomorrow-900 {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 900 !important;
}

.font-tomorrow-italic {
  font-family: "Tomorrow", sans-serif !important;
  font-style: italic !important;
}

.font-tomorrow-100-italic {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 100 !important;
  font-style: italic !important;
}

.font-tomorrow-200-italic {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 200 !important;
  font-style: italic !important;
}

.font-tomorrow-300-italic {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
}

.font-tomorrow-400-italic {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

.font-tomorrow-500-italic {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
}

.font-tomorrow-600-italic {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 600 !important;
  font-style: italic !important;
}

.font-tomorrow-700-italic {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
}

.font-tomorrow-800-italic {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 800 !important;
  font-style: italic !important;
}

.font-tomorrow-900-italic {
  font-family: "Tomorrow", sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
}

.font-zen {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
}

.font-zen-300 {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 300 !important;
}

.font-zen-400 {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 400 !important;
}

.font-zen-500 {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 500 !important;
}

.font-zen-700 {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 700 !important;
}

.font-zen-900 {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 900 !important;
}

.font-zen-default {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 400 !important;
}

body {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
}

h1, h2, h3, h4, h5, h6, p, span, div, a, li, td, th, label, input, textarea, select, button:not([class*=font-]) {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
}

.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, [class^=fa-], [class*=" fa-"] {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

.far, .fa-regular {
  font-weight: 400 !important;
}

.nav-title-responsive {
  font-size: 1.5rem;
}
@media (min-width: 992px) {
  .nav-title-responsive {
    font-size: 1rem;
  }
}

@media (max-width: 991.98px) {
  .btn-mobile-responsive {
    font-size: 1.8rem !important;
    padding: 1rem 2rem !important;
  }
}

@media (max-width: 991.98px) {
  .navbar-nav .nav-item {
    margin-bottom: 0.5rem;
  }
}/*# sourceMappingURL=custom.css.map */