html,
body,
* {
  font-family: "Figtree", serif;
}

/* Prevent Alpine.js flash of uninitialized content */
[x-cloak] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

.navbar-glass {
  background: linear-gradient(128.92deg, rgba(255, 255, 255, 0.4) 8.04%, rgba(255, 255, 255, 0.1) 88.6%);
  backdrop-filter: blur(18.8px);
  -webkit-backdrop-filter: blur(18.8px);
}

.bg-theme {
  background: linear-gradient(110.42deg, #2a45a67d 26.47%, #34c2a04d 88.63%);
}

aside#tab {
  max-width: 260px !important;
}

.uppercase {
  text-transform: uppercase;
}

.hero-section {
  background: linear-gradient(110.42deg, #2A45A6 26.47%, #34C2A0 88.63%);
  position: relative;
}

.hero-section:before {
  content: "";
  background-image: url(./assets/shape-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.bg-gradient-green {
  background: linear-gradient(106.13deg, #256CDE -14.62%, #22B673 115.54%);
}

.bg-gradient-green:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(./assets/mask-group.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  background-position: bottom;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

button {
  cursor: pointer !important;
}

button#submitButton:disabled {
  opacity: 0.5;
}

.contact-hero-section {
  background-position: 50%, right 35%, 0 100%, 50%
}

.rounded-custom {
  border-radius: 2rem;
}

.border-custom {
  border: .1rem solid #dae0ec;
}

.LeadCheck,
.PricingPlan {
  background: url(/assets/noice.png)repeat center center;
}

.bg-colors {
  /* background: linear-gradient(150.11deg, #010d39 3.92%, #063b82 50.27%, #2261ff 75.27%, #04e1b3 99.75%); */
  background: linear-gradient(133.3deg, #063B82 0%, #4F609D 54.5%, #04E1B3 100%);
}

.over-bg-color {
  background-image: url(/assets/hero-1.png    ), url(assets/footer-top-2.png), url(assets/footer-top-3.png), linear-gradient(288.59deg, #010d39 -28.79%, #063b82 32.05%, #2261ff 64.86%, #04e1b3 96.99%);
  border-radius: 2rem;
  background-position: 50%, 100% 100%, 0 0, 50%;
  background-size: auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

div#mobile-menu {
  position: fixed;
  top: 3rem;
  left: 1rem;
  right: 0;
  background: linear-gradient(110.42deg, #2a45a6f4 26.47%, #34c2a1e6 88.63%);
}

.blue-btn {
  background: #3B4566;
}

.login-section {
  background-image: linear-gradient(288.59deg, #010d39 -28.79%, #063b82 32.05%, #2261ff 64.86%, #04e1b3 96.99%);
  background-position: 50%, 100% 100%, 0 0, 50%;
  background-size: auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

.marquee img {
  filter: grayscale(1);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

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

.marquee {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 15s linear infinite;
}

/* @media screen and (max-width: 992px) {
    .hero-section {
        background-image: url(/assets/hero-1.png), url(/assets/hero-2.png), url(/assets/hero-3.png), linear-gradient(175.15deg, #010d39 -1.62%, #063b82 46.26%, #2261ff 72.08%, #04e1b3 97.37%);
        background-size: auto, auto, auto;
        background-position: 50%, 100% 10%, 0 100%, 50%;
    }
} */
@media screen and (max-width: 767px) {
  .over-bg-color {
    background-image: url(/assets/hero-1.png), url(/assets/footer-top-mob-2.png), url(/assets/footer-top-mob-3.png), linear-gradient(288.59deg, #010d39 -28.79%, #063b82 32.05%, #2261ff 64.86%, #04e1b3 96.99%);
  }
}


/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Range Slider Gradient Styles */
.gradient-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right,
      #2563eb 0%,
      #10b981 var(--fill-percent, 0%),
      #e5e7eb var(--fill-percent, 0%),
      #e5e7eb 100%);


  @media screen and (max-width: 767px) {
    height: 4px;
  }
}

/* Webkit (Chrome, Safari, Edge) */
.gradient-slider::-webkit-slider-track {
  background: transparent;
  height: 8px;
  border-radius: 4px;

  @media screen and (max-width: 767px) {
    height: 4px;
  }
}

.gradient-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: linear-gradient(45deg, #2563eb, #10b981);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.gradient-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
}

/* Firefox */
.gradient-slider::-moz-range-track {
  background: transparent;
  height: 8px;
  border-radius: 4px;
  border: none;

  @media screen and (max-width: 767px) {
    height: 4px;
  }
}

.gradient-slider::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: linear-gradient(45deg, #2563eb, #10b981);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.gradient-slider::-moz-range-thumb:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
}

/* Edge and IE */
.gradient-slider::-ms-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;


  @media screen and (max-width: 767px) {
    height: 4px;
  }
}

.gradient-slider::-ms-fill-lower {
  background: linear-gradient(to right, #2563eb, #10b981);
  border-radius: 4px;
}

.gradient-slider::-ms-fill-upper {
  background: #e5e7eb;
  border-radius: 4px;
}

.gradient-slider::-ms-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: linear-gradient(45deg, #2563eb, #10b981);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Cookie banner card enhancements */
.cookie-card {
  animation: cookieSlideUp 250ms ease-out;
}

@keyframes cookieSlideUp {
  from {
    transform: translateY(8px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}