.bg-tmap-blue{
    color: #182937;
}
.bg-tmap-orange{
    color:#FD904D;
}

.hero-blue{
    color:#657FC4;
    
}

.gradient-services {
  background: linear-gradient(237deg, #0bf 22.13%, #ff00d9 57.9%, #FD904D 95.49%);
  /* background: linear-gradient(30deg,rgb(15, 97, 165) 20%,rgba(253,166,113,1) 30%); */
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 2s ease-in-out infinite;
}

.typing-container {
  /* font-family: monospace; Or any desired font */
  /* font-size: 2em; */
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflowing text during typing animation */
}

.cursor {
  animation: blink 0.7s infinite; /* Blinking cursor animation */
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}


/* mobile button menu */
.menu {
  --s: 20px; /* control the size */
  --c: #182937; /* the color */
  
  height: var(--s);
  aspect-ratio: 1;
  border: none;
  padding: 0;
  border-inline: calc(var(--s)/2) solid #0000; 
  box-sizing: content-box;
  --_g1: linear-gradient(var(--c) 20%,#0000 0 80%,var(--c) 0) 
         no-repeat content-box border-box;
  --_g2: radial-gradient(circle closest-side at 50% 12.5%,var(--c) 95%,#0000) 
         repeat-y content-box border-box;
  background: 
    var(--_g2) left  var(--_p,0px) top,
    var(--_g1) left  calc(var(--s)/10 + var(--_p,0px)) top,
    var(--_g2) right var(--_p,0px) top,
    var(--_g1) right calc(var(--s)/10 + var(--_p,0px)) top;
  background-size: 
    20% 80%,
    40% 100%;
  position: relative;
  clip-path: inset(0 25%);
  -webkit-mask: linear-gradient(90deg,#0000,#000 25% 75%,#0000);
  cursor: pointer;
  transition: 
    background-position .3s var(--_s,.3s), 
    clip-path 0s var(--_s,.6s);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
.menu:before,
.menu:after {
  content:"";
  position: absolute;
  border-radius: var(--s);
  inset: 40% 0;
  background: var(--c);
  transition: transform .3s calc(.3s - var(--_s,.3s));
}

.menu:checked {
  clip-path: inset(0);
  --_p: calc(-1*var(--s));
  --_s: 0s;
}
.menu:checked:before {
  transform: rotate(45deg);
}
.menu:checked:after {
  transform: rotate(-45deg);
}
.menu:focus-visible {
  clip-path: none;
  -webkit-mask: none;
  border: none;
  outline: 2px solid var(--c);
  outline-offset: 5px;
}

 /* --------------Gradient effect for text------------------------------- */
.gradient-text {
  background: linear-gradient(237deg, #0bf 22.13%, #ff00d9 57.9%, #00f 95.49%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------Gradient Border------------------------ */
.gradient-wrapper {
  /*padding: 2px; border thickness */
  /* border-radius: 16px; */
  background: linear-gradient(237deg, #0bf 22.13%, #ff00d9 57.9%, #00f 95.49%);
  background-size: 200% 200%;
  animation: gradientShift 3s ease-in-out infinite;
}

/* .form-box { */
  /* background: #fff; form inner background */
  /* border-radius: 14px; slightly smaller radius */
  /* padding: 20px; */
/* } */

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* text shine */
.chrome-shine {
  position: relative;
  display: inline-block;
  /* color: #b3b3b3; keep your gray */
  font-weight: inherit;
  overflow: hidden;
}

.chrome-shine::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: inherit;
  
  /* Strong metallic shine */
  background: linear-gradient(
    75deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.2) 35%,
    rgba(255,255,255,0.9) 48%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,0.9) 52%,
    rgba(255,255,255,0.2) 65%,
    rgba(255,255,255,0) 100%
  );

  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  animation: chromeSweep 10s ease-out infinite;
}

@keyframes chromeSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* mobile btn corrected */
@layer base {
  [type="checkbox"]:checked, [type="radio"]:checked {
    background-position: 100%;
    background-repeat: no-repeat;
    /* background-color: #fd904d !important; */
    background-color: transparent !important; /* transparent bg */
    border-color:transparent !important;
    background-size: 0.20em 0.20em !important;
    /* opacity: 0.3; affects children too */
  }
}