/* fonts  */
 @import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');



 /* .sora-<uniquifier> {
  font-family: "Sora", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */

 /* ================================
   SNAKE BORDER
================================ */

 .card1298he {
     box-shadow: 0 1px 3px rgba(20, 20, 50, 0.06);
     position: relative;
     overflow: hidden;
 }

 @property --snake-angle {
     syntax: "<angle>";
     initial-value: 0deg;
     inherits: false;
 }

 .card1298he::before {
     content: "";
     position: absolute;
     inset: 0;
     padding: 2px;
     border-radius: 16px;

     background: conic-gradient(from var(--snake-angle),
             transparent 0deg,
             transparent 270deg,
             rgba(60, 95, 165, 0.2) 285deg,
             #3c5fa5 310deg,
             #082a6e 345deg,
             transparent 360deg);

     -webkit-mask:
         linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);

     -webkit-mask-composite: xor;

     mask:
         linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);

     mask-composite: exclude;

     opacity: 0;
     pointer-events: none;
     z-index: 10;
 }

 .card1298he:hover::before {
     opacity: 1;
     animation: snakeBorderMove 1.5s linear infinite;
 }


 @keyframes snakeBorderMove {

     from {
         --snake-angle: 0deg;
     }

     to {
         --snake-angle: 360deg;
     }

 }

 .card1298he_no_hover {
     box-shadow: 0 1px 3px rgba(199, 89, 17, 0.06);
     position: relative;
     overflow: hidden;
 }

 @property --snake-angle {
     syntax: "<angle>";
     initial-value: 0deg;
     inherits: false;
 }

 .card1298he_no_hover::before {
     content: "";
     position: absolute;
     inset: 0;
     padding: 2px;
     border-radius: 15px;

     background: conic-gradient(from var(--snake-angle),
             transparent 0deg,
             transparent 270deg,
             rgba(60, 95, 165, 0.2) 285deg,
             #0105f0 310deg,
             #082a6e 345deg,
             transparent 360deg);

     -webkit-mask:
         linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);

     -webkit-mask-composite: xor;

     mask:
         linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);

     mask-composite: exclude;

     opacity: 1;
     pointer-events: none;
     z-index: 10;
     animation: snakeBorderMove 1.5s linear infinite;
 }



 @keyframes snakeBorderMove {

     from {
         --snake-angle: 0deg;
     }

     to {
         --snake-angle: 360deg;
     }

 }




 /* ====================== all section animations ================= */
 /* 1 dule cycle */
 .dss {
     position: relative;
     overflow: hidden;
 }

 .decor-hero-ring {
     position: absolute;
     top: -90px;
     left: -90px;
     width: 300px;
     height: 300px;
     border: 2px dashed #f77123;
     border-radius: 50%;
     opacity: .4;
     z-index: 1;
     pointer-events: none;
     animation: hero-ring-spin 20s linear infinite;
 }


 .decor-hero-ring::before {
     content: '';
     position: absolute;
     inset: 34px;
     border: 2px dashed #22D3EE;
     border-radius: 50%;
     opacity: .6;
 }

 @keyframes hero-ring-spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* 2 glow */
 .decor-hero-glow1 {
     position: absolute;
     top: -180px;
     left: -160px;
     width: 480px;
     height: 480px;
     border-radius: 50%;
     background: linear-gradient(135deg, #A78BFA 0%, #22D3EE 100%);
     opacity: .18;
     filter: blur(60px);
     z-index: 0;
     pointer-events: none;
     animation: hero-glow-drift 12s ease-in-out infinite;
 }

 /* 2 glow */
 .decor-hero-glow2 {
     position: absolute;
     bottom: -180px;
     right: -120px;
     width: 480px;
     height: 480px;
     border-radius: 50%;
     background: linear-gradient(135deg, #A78BFA 0%, #22D3EE 100%);
     opacity: .18;
     filter: blur(60px);
     z-index: 0;
     pointer-events: none;
     animation: hero-glow-drift 12s ease-in-out infinite;
 }


 @keyframes hero-glow-drift {

     0%,
     100% {
         transform: translate(0, 0) scale(1);
     }

     50% {
         transform: translate(30px, 20px) scale(1.08);
     }
 }



 /* 3 dots  */


 .decor-hero-orb.o1 {
     width: 14px;
     height: 14px;
     top: 75px;
     right: 170px;
     background: #8B5CF6;
     opacity: .5;
     animation: hero-orb-1 5s ease-in-out infinite;
     position: absolute;
     border-radius: 50%;
 }


 .decor-hero-orb.o2 {
     position: absolute;
     width: 9px;
     height: 9px;
     bottom: 100px;
     right: 20px;
     background: #22D3EE;
     opacity: .5;
     animation: hero-orb-2 6s ease-in-out infinite .3s;
     border-radius: 50%;
 }


 @keyframes hero-orb-1 {

     0%,
     100% {
         transform: translate(0, 0);
     }

     50% {
         transform: translate(-10px, -14px);
     }
 }

 @keyframes hero-orb-2 {

     0%,
     100% {
         transform: translate(0, 0);
     }

     50% {
         transform: translate(-8px, 10px);
     }
 }


 .decor-hero-orb.o3 {
     position: absolute;
     width: 20px;
     height: 20px;
     top: 200px;
     right: 66px;
     ;
     background: #2563EB;
     opacity: .3;
     animation: hero-orb-1 7s ease-in-out infinite .6s;
     border-radius: 50%;
 }



 /* 4 top right cycly */
 .ljisfiah6 {
     position: relative;
     overflow: hidden;
 }

 .ljisfiah6::after {
     content: "";
     position: absolute;
     top: -80px;
     right: -30px;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     border: 7.5px dashed rgba(7, 63, 167, 0.14);
     pointer-events: none;
     animation: decor-spin 16s linear infinite;
 }

 @keyframes decor-spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }


 /* machine clearing color anintion  start */
 .animated-gradient-text {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 3rem;
  font-weight: 700;

  /* Background size bada karna zaruri hai taaki gradient move ho sake */
  background: linear-gradient(
    90deg, 
    #3aa0ff 0%, 
    #685eff 25%, 
    #d14dff 50%, 
    #685eff 75%, 
    #3aa0ff 100%
  );
  background-size: 200% auto;

  /* Gradient Clipping */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  /* Animation call */
  animation: moveGradient 4s linear infinite;
}

/* Keyframes for animation */
@keyframes moveGradient {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}




.pulse-gradient-text {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 3rem;
  font-weight: 700;

  background: linear-gradient(90deg, #3aa0ff 0%, #685eff 40%, #a238ff 75%, #d14dff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Glow aur Pulse Animation */
  animation: pulseGlow 2.5s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  0% {
    opacity: 0.8;
    filter: drop-shadow(0 0 2px rgba(104, 94, 255, 0.3));
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(209, 77, 255, 0.8));
  }
}
 /* machine clearing color anintion  end */