* {
  letter-spacing: -0.04em !important;
}

::-webkit-scrollbar {
  display: none !important;
}

.my-header-bg {
  background-color: #101112d0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(15px) !important;
}

.modal-close-button {
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.object-position-top {
  object-position: top !important;
}

.object-position-right {
  object-position: right !important;
}

.colorful-text {
  background: linear-gradient(90deg, #fa5560 20%, #b14bf4 60%, #4d91ff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-gradient-bg-1 {
  background: linear-gradient(107.65deg, #17c969 17.53%, #005dbb 94.64%);
}

.btn-gradient-bg-1:hover {
  background: linear-gradient(107.65deg, #005dbb 17.53%, #17c969 94.64%);
}

.accordion-button {
  box-shadow: none !important;
}

.accordion-item {
  border: none !important;
}

.bg-image {
  position: relative;
  background-image: url("/assets/images/15.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.bg-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.bg-gradient {
  background: linear-gradient(265deg, #fe6800, #3e65ad 48%, #fe6800) !important;
}

.sm-text-p {
  font-size: 0.75rem !important;
}

.bg-gradient-primary {
  background: linear-gradient(0deg, #fe6800, #fff);
}

@keyframes logoloop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee-wrap {
  display: flex;
  overflow: hidden;
  padding: 10px 0;
  white-space: nowrap;
  width: 100%;
}

.loop-track {
  display: flex;
  animation: logoloop 179.66375325520832s linear 0s infinite;
  width: max-content;
}

.loop-track-fast {
  display: flex;
  animation: logoloop 134.74781494140626s linear 0s infinite;
  width: max-content;
}

.loop-collection {
  display: flex;
  gap: 0.5rem;
}

.marquee-image {
  object-fit: contain;
  flex: none;
  max-width: none;
  height: auto;
  width: 260px;
  opacity: 0.3;
}

.mt-hero-video {
  margin-top: -5.5rem !important;
}

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

.bg-green {
  background-color: #128a43 !important;
}

.bg-hero {
  background-image: url("/assets/images/bg-gradient.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.bottom-bg {
  background-image: url("/assets/images/bottom-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.text-linear {
  background-image: linear-gradient(
    91.58deg,
    #53fbd5 76.95%,
    #75ff9c 89.79%,
    #bdff89 99.95%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
}

.transform-rotateZ {
  transform: rotateZ(15deg);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 7.27%,
    rgba(255, 255, 255, 0.02) 92.73%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(27px);
  -webkit-backdrop-filter: blur(27px);
  padding: 16px;
}

.transform-rotateY {
  transform: rotateZ(-10deg);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 7.27%,
    rgba(255, 255, 255, 0.02) 92.73%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(27px);
  -webkit-backdrop-filter: blur(27px);
  padding: 16px;
}

.transform-rotateX {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 7.27%,
    rgba(255, 255, 255, 0.02) 92.73%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(27px);
  -webkit-backdrop-filter: blur(27px);
  padding: 16px;
}

.btn-gradient {
  border-radius: 60px;
  box-shadow: 0 0 2px rgb(255 255 255 / 0.7) inset,
    0px 0px 15px 0px rgb(0 0 0 / 0%);
  background: linear-gradient(
    175deg,
    rgba(255, 255, 255, 0.35) -94.09%,
    rgba(255, 255, 255, 0) 154.53%
  );
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
  font-size: 14px !important;
  font-weight: 500;
}

.bg-dark-1 {
  background-color: #1c1f28;
}

.bg-dark-2 {
  background-color: rgba(255, 255, 255, 0.1);
}

.light-border {
  border: 1px solid #464646d9;
}

.login-bg {
  background-color: #080b12;
}

.bg-login {
  position: relative;
  background-image: url("/assets/images/1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.bg-login::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.btn-gradient-bg-2 {
  background: linear-gradient(
    122deg,
    #4e4e4e 0.01%,
    #757575 49.9%,
    #9a9a9a 100%
  );
}

.bg-gradient-1 {
  background: linear-gradient(
    81.24deg,
    rgba(219, 81, 158, 0.75) 13.83%,
    rgba(177, 75, 244, 0.75) 49.5%,
    rgba(102, 107, 209, 0.75) 85.32%
  );
  filter: blur(250px);
}

.blue-blur-flow {
  position: absolute;
  width: 650px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(110, 123, 252, 0.8) 14%,
    rgba(110, 123, 252, 0) 100%
  );
  filter: blur(95px);
  top: 50%;
  left: 0%;
  transform: translate(-30%, -0%) rotate(18deg);
  z-index: 0;
}

.red-blur-flow {
  position: absolute;
  width: 550px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 73% 59%,
    rgba(250, 85, 96, 1) 23%,
    rgba(250, 85, 96, 0) 100%
  );
  filter: blur(95px);
  top: 15%;
  left: 50%;
  transform: translate(-30%, -0%) rotate(10deg);
  z-index: 0;
}

.left-black-overlay::before {
  background-image: linear-gradient(90deg, #101011 0%, rgba(50, 40, 36, 0) 60%);
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.bg-dark-3 {
  background-color: #101011;
}

.btn-gradient-bg-3 {
  background-image: linear-gradient(
    81.02deg,
    #fa5560 -53.47%,
    #b14bf4 25.52%,
    #4d91ff 64.8%
  ) !important;
  transition: all 0.3s ease-in-out !important;
}

.bg-image-pricing {
  position: relative;
  background-image: url("/assets/images/11.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.bg-image-pricing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.bg-signup {
  position: relative;
  background-image: url("/assets/images/3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.bg-signup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.gray-border {
  border: 1px solid #f1f1f4;
}

.btn-light-primary {
  color: #1b84ff;
  background-color: rgba(187, 219, 255, 0.695);
}

.btn-light-primary:hover {
  color: #ffffff;
  background-color: #1b84ff;
}

.btn-dark-primary {
  color: #ffffff;
  background-color: #1b84ff;
}

.text-blue {
  color: #1b84ff;
}

.action-button {
  background-color: #26272f;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.normal-text {
  font-size: 0.8rem !important;
}

.bg-dashboard-card {
  background-color: #15171c;
  border: 1px solid #1e2027;
}

.bg-card-dark {
  background-color: #26272f;
}

.action-button-lg {
  background-color: #26272f;
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.action-button-md {
  background-color: #26272f;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-red {
  background-color: #302024;
}

.bg-white-transparent {
  background-color: #ffffffb5 !important;
}

.light-dark-border {
  border: 1px solid #26272e;
}

.label-text {
  font-size: 0.82rem;
  color: #2b2b2b;
  font-weight: 500;
}

.smtext {
  font-size: 0.7rem !important;
}

.css-d7l1ni-option {
  font-size: 0.8rem !important;
}

.css-qr46ko {
  font-size: 0.8rem !important;
}

.css-1nmdiq5-menu {
  margin-top: 2px !important;
}

.css-hlgwow {
  font-size: 0.8rem !important;
}

.css-t3ipsp-control {
  border-radius: 0.5rem !important;
}

.css-13cymwt-control {
  border-radius: 0.5rem !important;
}

.css-hlgwow {
  padding-left: 1rem !important;
}

.bg-grey {
  background-color: rgb(222, 222, 222);
}

.profile-image {
  background-color: #26272f;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-close-modal {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.otp-box {
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sm-icon {
  font-size: 0.7rem;
}

.delete-button {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.delete-button-lg {
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fs-btn {
  font-size: 0.8rem !important;
}

.circle-md-btn {
  height: 37px;
  width: 37px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.toggle-mode-button {
  padding-left: 0.1rem !important;
  padding-right: 0.1rem !important;
}

.toggle-mode-button .btn-outline-primary:hover,
.toggle-mode-button .btn-outline-secondary:hover {
  background-color: transparent !important;
  color: inherit;
}

/* Active button style */
.toggle-mode-button .active-mode {
  background-color: #d683a3;
  color: #fff;
}

.toggle-mode-button .active-mode i {
  color: #fff;
}

.verify-otp {
  position: relative;
  background-image: url("/assets/images/5.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.verify-otp::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.image-grid {
  column-count: 4;
  column-gap: 8px;
}

.image-grid > div {
  break-inside: avoid;
  margin-bottom: 8px;
}

.image-container img {
  border-radius: 0.75rem;
  width: 100%;
  display: block;
}

.bg-gold {
  background-color: goldenrod !important;
}

.gradient-section-2 {
  background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
  color: #fff;
}

.gradient-top,
.gradient-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50px;
  pointer-events: none;
  z-index: 2;
}

/* White-to-transparent fade at the top */
.gradient-top {
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0.696),
    rgba(255, 255, 255, 0)
  );
}

.gradient-bottom {
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
}

.circle-sm-btn {
  height: 35px;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-lg-btn {
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
}

.light-text-white {
  color: #b5b9bf !important;
}

.bg-login-btn {
  background-image: linear-gradient(to right, #2887af, #3e6588);
}

.progress-bar-height {
  height: 8px !important;
}

.h-upload-images {
  height: 50vh !important;
  overflow-y: scroll !important;
}

.h-upload-images img {
  transition: opacity 0.3s ease;
}