[x-cloak] {
    display: none !important;
  }
/**
 * ----------------------------------------
 * Hamburger menu animation starts
 * ----------------------------------------
 */

.menudrop {
    transition: transform 0.5s cubic-bezier(0.9, 0.7, 0.1, 1);
    transform: translateY(-100%); /* Initial hidden state */
}

.menudrop.open {
    transform: translateY(0); /* Visible state */
}

/* Initially hidden */
.menudrop li {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.2s ease-in-out, transform 0s ease-in-out;
}

/* Class to fade in */
.menudrop li.toggled {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

/* Button Aniamtion */

/* Change line color on click */
#menuButtonContainer.menu-open svg line {
    stroke: white;
}

/* Set transform origins to center of respective line */
#menuButton svg line:nth-of-type(1) {
    transform-origin: center 6px;
}

#menuButton svg line:nth-of-type(2) {
    transform-origin: center 12px;
}

#menuButton svg line:nth-of-type(3) {
    transform-origin: center 18px;
}


/* Line animations */
#menuButton svg line {
    transition-duration: 0.5s;
    transition-property: stroke, opacity, transform;
    transition-timing-function: cubic-bezier(0.9, 0.7, 0.1, 1);
    /* Updated cubic bezier for stroke color change */
}

/* Fade out middle line on click */
#menuButtonContainer.menu-open svg line:nth-of-type(2) {
    opacity: 0;
    transform: scale(0.3);
    transition-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
    /* Updated cubic bezier for rotation animation */
}

/* Center top and bottom lines vertically, then rotate by 45 degrees in opposing directions on click */
#menuButtonContainer.menu-open svg line:nth-of-type(1) {
    transform: translate(0, 6px) rotate(45deg);
    transition-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
    /* Updated cubic bezier for rotation animation */
}

#menuButtonContainer.menu-open svg line:nth-of-type(3) {
    transform: translate(0, -6px) rotate(-45deg);
    transition-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
    /* Updated cubic bezier for rotation animation */
}

/* Initially hide the submenus */
#subMenu,
#aboutSubMenu,
#resourcesSubMenu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
}

/* Show the submenus */
#subMenu.active,
#aboutSubMenu.active,
#resourcesSubMenu.active {
    opacity: 1;
    visibility: visible;
}

/* Hide submenus */
#subMenu.hidden,
#aboutSubMenu.hidden,
#resourcesSubMenu.hidden {
    opacity: 0;
    visibility: hidden;
}


/* Main menu fade-in effect */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

#mainMenu.fade-in {
    animation: fadeIn 0.20s ease-in-out;
}

/* Sub-menu fade-in effect */
@keyframes fadeInSubMenu {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

#subMenu.fade-in,
#aboutSubMenu.fade-in,
#resourcesSubMenu.fade-in {
    animation: fadeInSubMenu 0.20s ease-in-out;
}


 /**
 * ----------------------------------------
 * blur
 * ----------------------------------------
 */



/* ----------------------------------------
 * Logo carousel animation 
 * ---------------------------------------- */


/* Fades the left and right edges smoothly */
.track-outer {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.fade-mask {
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.track-inner {
  display: flex;
  width: max-content;
  will-change: transform;
  
  /* Anti-jerk hardware acceleration locks */
  transform: translate3d(0, 0, 0); 
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
}

/* ONLY applies pause-on-hover for devices with a precise mouse/trackpad */
@media (hover: hover) and (pointer: fine) {
  .row:hover .track-inner {
    animation-play-state: paused !important;
  }
}

.logo-set {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
  flex-shrink: 0;
}

.logo-img {
  height: 75px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  
  /* Lock individual images to prevent pixel-snapping during pause */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.row {
  margin-bottom: 10px;
}

.row:last-child {
  margin-bottom: 0;
}

/* Fix: Enforced translate3d inside keyframes to prevent GPU handoff jitter */
@keyframes marquee-ltr {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(var(--set-width-neg), 0, 0); }
}

@keyframes marquee-rtl {
  0%   { transform: translate3d(var(--set-width-neg), 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
  /**
 * --------------------------------------------------
 * Background Gradient and Transparency Mask starts
 * --------------------------------------------------
 */


.gradient-bg {
  background: linear-gradient(-45deg, rgba(135, 170, 245, 0.6), rgba(155, 130, 255, 0.6), rgba(125, 150, 240, 0.7), rgba(175, 180, 250, 0.6));
  box-shadow: inset 0 0 0px rgba(255, 255, 255, 0.5);
}

.gradient-bg-transparent {
  background-color: white;
  background:
    linear-gradient(to right, white 0%, transparent 35%, transparent 70%, white 100%), /* Horizontal gradient */
    linear-gradient(to bottom, white 0%, transparent 30%, transparent 85%, white 100%); /* Vertical gradient */
}


.gradient-bg-transparent-service {
  background: radial-gradient(circle at 50% center, transparent 10%, white 70%);
  overflow: visible; /* Ensure overflow content is visible */
}

.gradient-bg-transparent-main-service {
  background-color: white;
  background:
    linear-gradient(to right, white 0%, transparent 35%, transparent 70%, white 100%), /* Horizontal gradient */
    linear-gradient(to bottom, white 0%, transparent 35%, transparent 75%, white 100%); /* Vertical gradient */
}




.gradient-bg-transparent-cta {
  background:
    linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, white 100%), /* Horizontal gradient */
    linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, white 100%); /* Vertical gradient */
}

.gradient-bg-transparent-pricebar {
  background:
    linear-gradient(
      to top,
      white 0%,                           /* Fully white at the bottom */
      rgba(255, 255, 255, 0.9) 15%,       /* Light transition to transparency */
      rgba(255, 255, 255, 0.7) 50%,       /* Softer transparency in the middle */
      rgba(255, 255, 255, 0.9) 75%,       /* Gradual fade back to white */
      white 100%                          /* Fully white at the top */
    );
}


/**
 * --------------------------------------------------
 * Globe wrapper starts
 * --------------------------------------------------
 */

.globe-wrapper {
    position: relative;
    width: 100%;
    height: 100vh; /* Ensure the container takes up the full viewport height */
    overflow-y: auto; /* Enable vertical scrolling */
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}

#globe-3d {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ensure the canvas covers the entire width */
    height: 100%; /* Ensure the canvas covers the entire height */
    z-index: 3; /* Ensure it's above other elements */
}



/**
 * --------------------------------------------------
 * Infinite Floater Animation starts
 * --------------------------------------------------
 */


/* Floater Animation for Multiple Elements */
.floater.active {
  animation: floatFloater 1s ease-in-out infinite alternate;
}

.cloud.active {
  animation: floatCloud 1s ease-in-out infinite alternate;
}

/* Keyframes for floating animations */
@keyframes floatCloud {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50px);
  }
}

@keyframes floatFloater {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}




/**
 * --------------------------------------------------
 * Modular Orbit Animation System
 * --------------------------------------------------
 */

/* 1. Keyframes */
@keyframes spinForward {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spinBackward {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes centerPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* 2. Base Setup & GPU Acceleration (Always active) */
.orbit-ring, 
.orbit-icon,
#center-graphic {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  transform-box: fill-box; /* The magic property for perfect SVG centering */
}

/* Set standard origins */
.orbit-ring { transform-origin: center; }
.orbit-icon, #center-graphic { transform-origin: 50% 50%; }

/* Soft 3D drop shadow for depth */
.orbit-icon, #center-graphic {
  filter: drop-shadow(0px 8px 12px rgba(1, 55, 125, 0.15));
}

/* 3. The Animations (ONLY fire when your JS adds .is-playing) */
.orbit-container.is-playing .orbit-ring {
  animation: spinForward 45s linear infinite;
}

.orbit-container.is-playing .orbit-icon {
  animation: spinBackward 45s linear infinite;
}

.orbit-container.is-playing #center-graphic {
  animation: centerPulse 3s ease-in-out infinite;
}




 /**
 * --------------------------------------------------
 * Random Scaling Animation starts
 * --------------------------------------------------
 */

/* Only apply the scaler animation when the .active class is present */
.scaler {
  transform-origin: center;
}

.scaler.active {
  animation-name: scaler;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Keyframe animation for scaling up and down */
@keyframes scaler {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

/* Different durations and delays for each scaler element */
.scaler:nth-child(1)  { animation-duration: 2s; animation-delay: 0s; }
.scaler:nth-child(2)  { animation-duration: 2.5s; animation-delay: 0.2s; }
.scaler:nth-child(3)  { animation-duration: 3s; animation-delay: 0.4s; }
.scaler:nth-child(4)  { animation-duration: 3.5s; animation-delay: 0.6s; }
.scaler:nth-child(5)  { animation-duration: 2.8s; animation-delay: 0.8s; }
.scaler:nth-child(6)  { animation-duration: 3.2s; animation-delay: 0.1s; }
.scaler:nth-child(7)  { animation-duration: 2.6s; animation-delay: 0.3s; }
.scaler:nth-child(8)  { animation-duration: 3.1s; animation-delay: 0.5s; }
.scaler:nth-child(9)  { animation-duration: 3.6s; animation-delay: 0.7s; }
.scaler:nth-child(10) { animation-duration: 2.9s; animation-delay: 0.9s; }
.scaler:nth-child(11) { animation-duration: 3.3s; animation-delay: 0.2s; }
.scaler:nth-child(12) { animation-duration: 2.7s; animation-delay: 0.4s; }
.scaler:nth-child(13) { animation-duration: 3.4s; animation-delay: 0.6s; }
.scaler:nth-child(14) { animation-duration: 3s; animation-delay: 0.8s; }
.scaler:nth-child(15) { animation-duration: 2.4s; animation-delay: 0.1s; }
.scaler:nth-child(16) { animation-duration: 3.2s; animation-delay: 0.3s; }
.scaler:nth-child(17) { animation-duration: 2.3s; animation-delay: 0.5s; }
.scaler:nth-child(18) { animation-duration: 3.7s; animation-delay: 0.7s; }
.scaler:nth-child(19) { animation-duration: 2.6s; animation-delay: 0.9s; }
.scaler:nth-child(20) { animation-duration: 3.5s; animation-delay: 0.4s; }
.scaler:nth-child(21) { animation-duration: 2.8s; animation-delay: 0.2s; }
.scaler:nth-child(22) { animation-duration: 3.1s; animation-delay: 0.5s; }
.scaler:nth-child(23) { animation-duration: 2.5s; animation-delay: 0.3s; }
.scaler:nth-child(24) { animation-duration: 3.6s; animation-delay: 0.8s; }
.scaler:nth-child(25) { animation-duration: 3s; animation-delay: 0.6s; }
.scaler:nth-child(26) { animation-duration: 2.7s; animation-delay: 0.1s; }
.scaler:nth-child(27) { animation-duration: 3.4s; animation-delay: 0.4s; }
.scaler:nth-child(28) { animation-duration: 2.9s; animation-delay: 0.7s; }
.scaler:nth-child(29) { animation-duration: 3.2s; animation-delay: 0.9s; }
.scaler:nth-child(30) { animation-duration: 3.8s; animation-delay: 0.2s; }




 /**
 * --------------------------------------------------
 * Icon rotate right and left Animation starts
 * --------------------------------------------------
 */

.rotateRight {
  transform-origin: 50% 100%; /* Bottom center */
}

/* Add animation only when the 'active' class is applied */
.rotateRight.active {
  animation: rotateBounce 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}



/* Keyframes for a smooth bouncing rotation */
@keyframes rotateBounce {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(8deg); /* Rotate to 10 degrees */
  }
  60% {
    transform: rotate(0deg); /* Slight bounce back */
  }
  100% {
    transform: rotate(0deg); /* Return to the original position */
  }
}



.rotateLeft {
  transform-origin: 50% 100%; /* Bottom center */
}

.rotateLeft.active {
  animation: rotateLeftBounce 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}


/* Keyframes for rotation with elastic bounce effect */
@keyframes rotateLeftBounce {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-1deg); /* Rotate to -5 degrees */
  }
  60% {
    transform: rotate(2deg); /* Slight overshoot in the opposite direction */
  }
  100% {
    transform: rotate(0deg); /* Return to original position */
  }
}




/**
 * --------------------------------------------------
 * Pricebar Animation starts
 * --------------------------------------------------
 */

 .priceBarMob {
  opacity: 0;
  transform: translateY(100px);
  
}

.priceBarMob.active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

/* Main Pricebar*/

.priceBar {
   opacity: 0; /* Start hidden */
}

.priceBar.active {
   opacity: 0; /* Start hidden */
   animation: fadeInTranslate 1s ease-in-out forwards; /* Match durationValue and ease */
}


/* Define the keyframe animation */
@keyframes fadeInTranslate {
   0% {
      opacity: 0;
      transform: translateY(100px); /* Match the yValue in GSAP */
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}


/* Add stagger effect using nth-child */
.priceBar.active:nth-child(1) {
   animation-delay: 0.1s;
}
.priceBar.active:nth-child(2) {
   animation-delay: 0.2s;
}
.priceBar.active:nth-child(3) {
   animation-delay: 0.3s;
}
.priceBar.active:nth-child(4) {
   animation-delay: 0.4s;
}
.priceBar.active:nth-child(5) {
   animation-delay: 0.5s;
}
.priceBar.active:nth-child(6) {
   animation-delay: 0.6s;
}
.priceBar.active:nth-child(7) {
   animation-delay: 0.7s;
}
.priceBar.active:nth-child(8) {
   animation-delay: 0.8s;
}
.priceBar.active:nth-child(9) {
   animation-delay: 0.9s;
}
.priceBar.active:nth-child(10) {
   animation-delay: 1s;
}
.priceBar.active:nth-child(11) {
   animation-delay: 1.1s;
}
.priceBar.active:nth-child(12) {
   animation-delay: 1.2s;
}
.priceBar.active:nth-child(13) {
   animation-delay: 1.3s;
}
.priceBar.active:nth-child(14) {
   animation-delay: 1.4s;
}
.priceBar.active:nth-child(15) {
   animation-delay: 1.5s;
}
.priceBar.active:nth-child(16) {
   animation-delay: 1.6s;
}




 /**
 * --------------------------------------------------
 * PeriodBox Animation starts
 * --------------------------------------------------
 */


.periodBox {
  opacity: 0;
}

.periodBox.visible {
  opacity: 1;
  transition: opacity 1.5s ease-out; /* Adjust duration as needed */
}



 /**
 * --------------------------------------------------
 * Vertical and horizontal Line Animation starts
 * --------------------------------------------------
 */


.line-v {
  transform: scaleY(0);             /* Start with scaleY at 0 (collapsed) */
  transform-origin: top;            /* Scale from the top */
  transition: transform 2s ease-in-out; /* Smooth scaling effect */
}

.line-v.visible {
  transform: scaleY(1);             /* Expand to full height */
}


.line-center {
  transform: scaleX(0);                /* Start with scaleX at 0 (collapsed) */
  transform-origin: center center;     /* Scale from the center */
  transition: transform 2s ease-in-out; /* Smooth scaling effect */
}

.line-center.visible {
  transform: scaleX(1);                /* Expand to full width */
}





 /**
 * --------------------------------------------------
 * Cloud Line Animation starts
 * --------------------------------------------------
 */

.dotted-line {
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 20, 20; /* Dash and gap lengths */
  stroke-dashoffset: 0; /* Start position of the dash */
  
  
}

.dotted-line.active {
  animation: dash 1s linear infinite; /* Apply animation */
}

@keyframes dash {
  to {
    stroke-dashoffset: 40; /* Negative offset to create motion */
  }
}



  /**
 * --------------------------------------------------
 * Blog Dots Animation starts
 * --------------------------------------------------
 */


/* Base styling and animation with varying durations */
.circleFade.active {
  opacity: 1;
  animation: fadeInOut ease-in-out infinite;
}

/* Increased variance in animation delays and durations for slower animations */
.circleFade:nth-child(1) { animation-delay: 0s; animation-duration: 6s; }
.circleFade:nth-child(2) { animation-delay: 2s; animation-duration: 6.8s; }
.circleFade:nth-child(3) { animation-delay: 1.2s; animation-duration: 7.5s; }
.circleFade:nth-child(4) { animation-delay: 3s; animation-duration: 8s; }
.circleFade:nth-child(5) { animation-delay: 0.6s; animation-duration: 9s; }
.circleFade:nth-child(6) { animation-delay: 3.6s; animation-duration: 6.5s; }
.circleFade:nth-child(7) { animation-delay: 2.4s; animation-duration: 8.5s; }
.circleFade:nth-child(8) { animation-delay: 1.1s; animation-duration: 6.9s; }
.circleFade:nth-child(9) { animation-delay: 4.3s; animation-duration: 7.8s; }
.circleFade:nth-child(10) { animation-delay: 1.7s; animation-duration: 8.1s; }
.circleFade:nth-child(11) { animation-delay: 3.9s; animation-duration: 7.2s; }
.circleFade:nth-child(12) { animation-delay: 0.9s; animation-duration: 9s; }
.circleFade:nth-child(13) { animation-delay: 2.1s; animation-duration: 7.7s; }
.circleFade:nth-child(14) { animation-delay: 3.3s; animation-duration: 6.6s; }
.circleFade:nth-child(15) { animation-delay: 4.5s; animation-duration: 7.4s; }
.circleFade:nth-child(16) { animation-delay: 1s; animation-duration: 8.4s; }
.circleFade:nth-child(17) { animation-delay: 2.8s; animation-duration: 6.3s; }
.circleFade:nth-child(18) { animation-delay: 4.2s; animation-duration: 8.6s; }
.circleFade:nth-child(19) { animation-delay: 1.8s; animation-duration: 8.2s; }
.circleFade:nth-child(20) { animation-delay: 3.7s; animation-duration: 6.5s; }




   /**
 * --------------------------------------------------
 * Typing Animation starts
 * --------------------------------------------------
 */

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

.typeFade {
  opacity: 0.5;
}

.typeFade.active {
  opacity: 1;
  animation: fadeInOut ease-in-out infinite;
}

.typeFade.active:nth-child(1) { animation-delay: 0s; animation-duration: 2s; }
.typeFade.active:nth-child(2) { animation-delay: 0.5s; animation-duration: 2.2s; }
.typeFade.active:nth-child(3) { animation-delay: 0.3s; animation-duration: 2.5s; }
.typeFade.active:nth-child(4) { animation-delay: 0.7s; animation-duration: 2.8s; }
.typeFade.active:nth-child(5) { animation-delay: 0.2s; animation-duration: 3s; }



/**
 * --------------------------------------------------
 * Arrow Bounce Animation starts
 * --------------------------------------------------
 */

@keyframes bounce-left {
    0% {
        transform: translateX(0);
        animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
    }

    50% {
        transform: translateX(-5px);
        /* Adjust distance as needed */
        animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
    }

    100% {
        transform: translateX(0);
        animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
    }
}

.bounce-left.active {
    animation: bounce-left 1s infinite;
}


 /**
 * --------------------------------------------------
 * Calendar Dots Animation starts
 * --------------------------------------------------
 */

circle.calendarDots {
  fill: #fff;
  stroke: none;
}

circle.calendarDots.active {
  animation: colorCycle 22s infinite; /* Increased duration to accommodate 11 items */
}

/* Keyframes for color change */
@keyframes colorCycle {
  0%, 5% { fill: #7ED348; stroke: #fff; }   /* Active color */
  10%, 100% { fill: #fff; stroke: none; }    /* Default color */
}

circle.calendarDots.active:nth-child(1) { animation-delay: 0s; }
circle.calendarDots.active:nth-child(2) { animation-delay: 2s; }
circle.calendarDots.active:nth-child(3) { animation-delay: 4s; }
circle.calendarDots.active:nth-child(4) { animation-delay: 6s; }
circle.calendarDots.active:nth-child(5) { animation-delay: 8s; }
circle.calendarDots.active:nth-child(6) { animation-delay: 10s; }
circle.calendarDots.active:nth-child(7) { animation-delay: 12s; }
circle.calendarDots.active:nth-child(8) { animation-delay: 14s; }
circle.calendarDots.active:nth-child(9) { animation-delay: 16s; }
circle.calendarDots.active:nth-child(10) { animation-delay: 18s; }
circle.calendarDots.active:nth-child(11) { animation-delay: 20s; }




  /**
 * --------------------------------------------------
 * Floating Graph Dots Landing Animation starts
 * --------------------------------------------------
 */


.float.active {

  animation: floatAnimation calc(3s + var(--n) * 0.1s) ease-in-out infinite alternate;
  animation-delay: calc(0.5s * var(--n));
}

@keyframes floatAnimation {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(30px, -30px);
  }
  100% {
    transform: translate(-30px, 30px);
  }
}



  /**
 * --------------------------------------------------
 * Floating Graph Dots About Animation starts
 * --------------------------------------------------
 */


.floatDot.active {
  animation: floatAnimation calc(3s + var(--n) * 0.1s) ease-in-out infinite alternate;
}

.floatDot.active:nth-child(1) {
  --n: 1;
  animation-delay: calc(0.5s * 1);
}

.floatDot.active:nth-child(2) {
  --n: 2;
  animation-delay: calc(0.5s * 2);
}

.floatDot.active:nth-child(3) {
  --n: 3;
  animation-delay: calc(0.5s * 3);
}

.floatDot.active:nth-child(4) {
  --n: 4;
  animation-delay: calc(0.5s * 4);
}

.floatDot.active:nth-child(5) {
  --n: 5;
  animation-delay: calc(0.5s * 5);
}


@keyframes floatDotAnimation {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(30px, -30px);
  }
  100% {
    transform: translate(-30px, 30px);
  }
}



    /**
 * --------------------------------------------------
 * Calendar Text Animation starts
 * --------------------------------------------------
 */

#calendarText {
  transition: opacity 1s ease-in-out; /* Smooth fade in and out */
}




/**
 * --------------------------------------------------
 * Blog Animation starts
 * --------------------------------------------------
 */

.blog1, .blog2 {
  position: absolute; 
  top: 0;
  left: 0;
  opacity: 0;
}

.blog1.active, .blog2.active {
  animation-duration: 6s; 
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }     /* Start and end hidden */
  10%, 40% { opacity: 1; }     /* Fade in and remain visible */
  50%, 90% { opacity: 0; }     /* Fade out before the next cycle */
}

/* Apply animations with delays for seamless transition */
.blog1 {
  animation-name: fadeInOut;
  animation-delay: 0s; /* Start immediately */
}

.blog2 {
  animation-name: fadeInOut;
  animation-delay: 3s; /* Delay by half the total duration for staggering */
}


/**
 * --------------------------------------------------
 * Typing Blinker Animation starts
 * --------------------------------------------------
 */

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

.flasher.active {
    animation: blink 2s infinite; /* Adjust duration as needed */
}


 /**
 * --------------------------------------------------
 * LineGraphs Animation starts
 * --------------------------------------------------
 */



.lineGraphLarge,
.lineGraph {
    fill: none;
    stroke: #fff;
    stroke-width: 26.67px;
    stroke-miterlimit: 0.726744;
    stroke-dasharray: 2000; /* Path total length */
    stroke-dashoffset: 2000; /* Initially hidden */
    animation: none; /* No animation by default */
}

/* Triggered animation for .lineGraphLarge */
.lineGraphLarge.active {
    animation: drawPath 3s linear infinite alternate;
}

/* Triggered animation for .lineGraph */
.lineGraph.active {
    animation: drawReverse 6s ease-in-out infinite alternate;
}

/* Keyframes for the stroke animations */
@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawReverse {
    0% {
        stroke-dashoffset: 2000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}


 /**
 * --------------------------------------------------
 * LineGraphs Animation ends
 * --------------------------------------------------
 */









/**
 * --------------------------------------------------
 * Smartsourcing Slider Animation Starts
 * --------------------------------------------------
 */

.no-scrollbar::-webkit-scrollbar { 
  display: none; 
}
.no-scrollbar { 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

.is-dragging { 
  cursor: grabbing !important; 
  user-select: none;
}


/* Left-to-right reveal line */
.card-line {
  clip-path: inset(0 100% 0 0);
  /* Slowed down the top border line animation */
  transition: clip-path 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card-line,
.group:hover .card-line {
  clip-path: inset(0 0% 0 0);
}


.cta-ghost span {
  display: block;
  font-size: 88px;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -2px;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.133);
}
/**
 * --------------------------------------------------
 * Smartsourcing Slider Animation Ends
 * --------------------------------------------------
 */



 /**
 * --------------------------------------------------
 * Rotator Animation Main starts + Key Animations
 * --------------------------------------------------
 */

/* Keyframes */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes rotate-group {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulsing {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* GPU Acceleration for Animated Elements */
[class*="rotating-icon-"],
.rotating-group-landing,
.pulser {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Pulser animation */
.pulser {
  animation: pulsing 2.5s infinite ease-in-out;
  transform-origin: center;
  will-change: transform;
}

/* General rule for all rotating icons when active */
[class*="rotating-icon-"].active {
  animation: rotate 45s linear infinite;
  will-change: transform;
}

/* Individual transform-origin settings for main landing icons */
.rotating-icon-1 { transform-origin: 140px 690px; }
.rotating-icon-2 { transform-origin: 1560px 690px; }
.rotating-icon-3 { transform-origin: 830px 160px; }
.rotating-icon-4 { transform-origin: 1285px 1475px; }
.rotating-icon-5 { transform-origin: 450px 1500px; }

/* Rotating group animations */

/* Group with a center transform-origin */
.rotating-group-landing.active {
  animation: rotate-group 45s linear infinite;
  transform-origin: center;
  will-change: transform;
}