.bg-dark {
  background-color: #ffffff;
}

.my-bg-white {
  background-color: #ffffff;
}

.my-bg-ofwhite {
  background-color: #EFEFEF;
}

.my-bg-ofgreen {
  background-color: #D8F0DE;
}

.my-bg-green {
  background-color: #08A755 !important;
}

.bg-grey {
  background-color: #ffffff;
}

.bg-grey1 {
  background: #E0E0DF !important;
}

.text-white-1 {
  color: #999999;
}

.hiw-mt {
  margin-top: 90px;
}

.hiw-mb {
  margin-bottom: -120px;
}

.gradient-bgm {
  background: linear-gradient(to right, #FFD700, #FFA500, #FF6347, #EE82EE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  /* Important for text-fill-color to work correctly */
}

.gradient-bg {
  /* background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); */
  background-size: 400% 400%;
  animation: lightingBG 15s ease infinite;
  color: white;
}

/* Smooth animated lighting effect */
@keyframes lightingBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.gradient-breadcrumb {
  background-color: #EFEFEF;
  /* background: linear-gradient(135deg, #0f0c29, #151515, #000000);
  background-size: 400% 400%;
  animation: lightingBG 15s ease infinite;
  color: white; */
}

/* Smooth animated lighting effect */
@keyframes lightingBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.gradient-text {
  color: #08A755;
  display: inline-block;
}

.gradient-text-logo {
  color: #08A755;
  display: inline-block;
}


.white-grey {
  color: #999999;
}

.grey-p {
  color: #6A6A6A;
}

/* Paragraph CSS */
.my-para {
  max-width: 37.5rem;
  margin: 0 auto;
}


/* My Gradient Button */
.gradient-button {
  background: #08A755;
  font-weight: 700;
  color: #ffffff;
  border-radius: 5px;
  line-height: 28px;
  padding: 15px 30px;
  text-transform: uppercase;
  font-family: "Monda", sans-serif;
  font-size: 16px;
  display: inline-block;
  background-size: 200% auto;
  transition: all 0.6s ease-in-out;
}

.gradient-button:hover {
  background: transparent;
  display: inline-block;
  border: 1px solid #08A755;
  color: #333333;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.myhvr {
  &:hover {
    color: #ffffff;
  }
}

/* Margin Top CSS */
.my-mt {
  margin-top: -3.125rem;
}

.typewriter {
  overflow: hidden;
  border-right: 0.09em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.09em;
  width: 0;
  max-width: 100%;
  /* Ensure it doesn't exceed container width */
  animation:
    typewriter-cycle 14s steps(40, end) infinite,
    blink-caret 0.75s step-end infinite;
}

/* Full type → pause → delete → pause → repeat */
@keyframes typewriter-cycle {
  0% {
    width: 0;
  }

  20% {
    width: 100%;
  }

  40% {
    width: 100%;
  }

  60% {
    width: 0;
  }

  80% {
    width: 0;
  }

  100% {
    width: 0;
  }
}

/* Blinking caret */
@keyframes blink-caret {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: orange;
  }
}

/* Sign In Typewriter */
.typewriter-signin {
  overflow: hidden;
  border-right: 0.09em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.09em;
  display: inline-block;
  width: 0;
  max-width: 19ch;
  /* or however many characters max */
  animation:
    typewriter-cycle 14s steps(19, end) infinite,
    blink-caret 0.75s step-end infinite;
}

/* Full type → pause → delete → pause → repeat */
@keyframes typewriter-cycle {
  0% {
    width: 0;
  }

  20% {
    width: 100%;
  }

  40% {
    width: 100%;
  }

  60% {
    width: 0;
  }

  80% {
    width: 0;
  }

  100% {
    width: 0;
  }
}

/* Blinking caret */
@keyframes blink-caret {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: orange;
  }
}


/* Sign Up Typewriter */
.typewriter-signup {
  overflow: hidden;
  border-right: 0.09em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.09em;
  display: inline-block;
  width: 0;
  max-width: 21ch;
  /* or however many characters max */
  animation:
    typewriter-cycle 14s steps(21, end) infinite,
    blink-caret 0.75s step-end infinite;
}

/* Full type → pause → delete → pause → repeat */
@keyframes typewriter-cycle {
  0% {
    width: 0;
  }

  20% {
    width: 100%;
  }

  40% {
    width: 100%;
  }

  60% {
    width: 0;
  }

  80% {
    width: 0;
  }

  100% {
    width: 0;
  }
}

/* Blinking caret */
@keyframes blink-caret {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: orange;
  }
}

.fancy-line {
  height: 4px;
  /* adjust thickness */
  border: none;
  background: linear-gradient(to right, #FFD700, #FFA500, #FF6347, #EE82EE);
}

/* Navbar */
.my-navbar-gradient {
  position: relative;
  z-index: 10;
  /* Keep it above the shadow */
}

/* Gradient Shadow */
.my-navbar-gradient::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  /* Slightly below the navbar */
  width: 100%;
  height: 1px;
  /* Thickness of the shadow */
  background: linear-gradient(to right, #FFD700, #FFA500, #FF6347, #EE82EE);
  opacity: 0.8;
  /* Slight transparency for a soft glow */
  filter: blur(8px);
  /* Blur for shadow effect */
  z-index: -1;
  /* Behind the navbar */
  border-radius: 10px;
}

/* Transparent Navbar */
.navtransparent {
  background-color: rgba(41, 41, 41, 0.98);
}


/* Breadcrumb Gradient Background */
.breadcrumb-bg {
  background: linear-gradient(to right,
      rgba(128, 107, 0, 1) 0%,
      /* Darker yellow/orange */
      rgba(128, 82, 0, 1) 50%,
      /* Darker orange */
      rgba(128, 52, 90, 1) 75%,
      /* Darker pinkish-red */
      rgba(128, 91, 96, 0.8) 100%);
  /* Darker light pink with transparency */
}

/* Plan Section CSS */
.plan-card-bg {
  background-color: #ffffff !important;
}

.pad-b {
  padding-bottom: .75rem;
}

.gradient-badge {
  background-color: linear-gradient(to right, #FFD700, #FFA500, #FF6347, #EE82EE);
}

.marginbottom-hero {
  margin-top: -250px;
}

.marginbottom {
  margin-bottom: 120px;
}


/* My Gradient Color for Loader */
.gradient-loader {
  background: linear-gradient(to right, #FFD700, #FFA500, #FF6347, #EE82EE);
}


/* Loader CSS Starts */
/* From Uiverse.io by Nawsome */
#customLoaderWrapper {
  position: fixed;
  inset: 0;
  background-color: #151515;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#customLoaderWrapper.hide {
  opacity: 0;
  visibility: hidden;
}

.pl {
  width: 6em;
  height: 6em;
}

.pl__ring {
  animation: ringA 2s linear infinite;
}

.pl__ring--a {
  stroke: #f42f25;
}

.pl__ring--b {
  animation-name: ringB;
  stroke: #f49725;
}

.pl__ring--c {
  animation-name: ringC;
  stroke: #255ff4;
}

.pl__ring--d {
  animation-name: ringD;
  stroke: #f42582;
}

/* Animations */
@keyframes ringA {

  from,
  4% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }

  12% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -335;
  }

  32% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -595;
  }

  40%,
  54% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -660;
  }

  62% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -665;
  }

  82% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -925;
  }

  90%,
  to {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -990;
  }
}

@keyframes ringB {

  from,
  12% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -110;
  }

  20% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -115;
  }

  40% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -195;
  }

  48%,
  62% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  70% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  90% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -305;
  }

  98%,
  to {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }
}

@keyframes ringC {
  from {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  8% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  28% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  36%,
  58% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  66% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  86% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  94%,
  to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

@keyframes ringD {

  from,
  8% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  16% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  36% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  44%,
  50% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  58% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  78% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  86%,
  to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

/* Loader CSS Ends */


/* 📱 Mobile screens */
@media (max-width: 576px) {
  .typewriter {
    font-size: 1.5rem;
    animation:
      typewriter-cycle 14s steps(20, end) infinite,
      /* Reduced steps for smaller width */
      blink-caret 0.75s step-end infinite;
  }
}

/* 📱 Tablets */
@media (min-width: 577px) and (max-width: 768px) {
  .typewriter {
    font-size: 2.5rem;
    animation:
      typewriter-cycle 14s steps(30, end) infinite,
      blink-caret 0.75s step-end infinite;
  }
}

/* 📱 Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  .typewriter {
    font-size: 2.8rem;
    animation:
      typewriter-cycle 14s steps(30, end) infinite,
      blink-caret 0.75s step-end infinite;
  }
}