[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 submenu */
#subMenu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
}

/* Show the submenu */
#subMenu.active {
    opacity: 1;
    visibility: visible;
}

/* Hide submenu */
#subMenu.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 {
    animation: fadeInSubMenu 0.20s ease-in-out;
}



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



 

/**
 * ----------------------------------------
 * Logo carousel animation (Refactored)
 * ----------------------------------------
 */
.marquee {
  block-size: var(--marquee-item-height);
  margin-block: 0;
  mask-image: linear-gradient(
    to right,
    hsla(0, 0%, 0%, 0),
    hsla(0, 0%, 0%, 1) 20%,
    hsla(0, 0%, 0%, 1) 80%,
    hsla(0, 0%, 0%, 0)
  );
  overflow: hidden; /* Prevent overflow */
}

/* Common settings for both LTR and RTL marquees */
.marquee--LTR,
.marquee--RTL,
.marquee--LTR-M,
.marquee--RTL-M {
  --marquee-item-width: 77px;
  --marquee-item-height: 77px;
  --marquee-items: 10;
}

.marquee--LTR,
.marquee--RTL {
  --marquee-duration: 40s;
}

.marquee--LTR-M,
.marquee--RTL-M {
  --marquee-duration: 30s;
  --marquee-items: 7;
}

/* Refactored marquee item using transform */
.marquee__item {
  /* Define start and end offsets.
     The original code set:
       - start position: max(item-width * items, 100% + item-width) with an extra -50% shift
       - end position: (item-width * -1) with the same shift.
     We embed the -50% into our calculations. */
  --marquee-start: calc(
    max(
      calc(var(--marquee-item-width) * var(--marquee-items)),
      calc(100% + var(--marquee-item-width))
    ) - 50%
  );
  --marquee-end: calc(var(--marquee-item-width) * -1 - 50%);
  --marquee-delay: calc(
    (var(--marquee-duration) / var(--marquee-items)) *
      (var(--marquee-items) - var(--marquee-item-index)) * -1
  );

  position: absolute;
  left: 0;
  top: 0;
  /* Start at the computed start offset */
  transform: translateX(var(--marquee-start));
  animation: marquee-move linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
  animation-play-state: paused; /* Default state; JS will toggle */
  will-change: transform;
}

/* Ensure the marquee container runs its child animations by default */
.marquee {
  animation-play-state: running;
}

/* Pause all animations on hover */
.marquee:hover .marquee__item {
  animation-play-state: paused;
}

/* Animation direction for LTR vs RTL */
.marquee--LTR .marquee__item,
.marquee--LTR-M .marquee__item {
  animation-direction: normal;
}

.marquee--RTL .marquee__item,
.marquee--RTL-M .marquee__item {
  animation-direction: reverse;
}

/* Keyframes: animate transform from start to end offset */
@keyframes marquee-move {
  to {
    transform: translateX(var(--marquee-end));
  }
}

/* Assign an index to each item for staggered delays */
.marquee__item {
  --marquee-item-index: 0; /* Default value */
}

.marquee__item:nth-of-type(1) { --marquee-item-index: 1; }
.marquee__item:nth-of-type(2) { --marquee-item-index: 2; }
.marquee__item:nth-of-type(3) { --marquee-item-index: 3; }
.marquee__item:nth-of-type(4) { --marquee-item-index: 4; }
.marquee__item:nth-of-type(5) { --marquee-item-index: 5; }
.marquee__item:nth-of-type(6) { --marquee-item-index: 6; }
.marquee__item:nth-of-type(7) { --marquee-item-index: 7; }
.marquee__item:nth-of-type(8) { --marquee-item-index: 8; }
.marquee__item:nth-of-type(9) { --marquee-item-index: 9; }
.marquee__item:nth-of-type(10) { --marquee-item-index: 10; }





  /**
 * --------------------------------------------------
 * 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);
  }
}


/**
 * --------------------------------------------------
 * 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-"],
[class*="rotating-group-"],
.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 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-icon-cloud-1 { transform-origin: 1277.875px 246.9165px; }
.rotating-icon-cloud-2 { transform-origin: 2324.375px 1522.355px; }
.rotating-icon-cloud-3 { transform-origin: 2103.055px 627.8995px; }
.rotating-icon-cloud-4 { transform-origin: 811.776px 2247.195px; }
.rotating-icon-cloud-5 { transform-origin: 1750.305px 2255.555px; }
.rotating-icon-cloud-6 { transform-origin: 461.9355px 648.005px; }
.rotating-icon-cloud-7 { transform-origin: 246.9765px 1478.465px; }

.rotating-icon-vcfo-1 { transform-origin: 1239.445px 222.1165px; }
.rotating-icon-vcfo-2 { transform-origin: 2256.61px 961.1025px; }
.rotating-icon-vcfo-3 { transform-origin: 610.8015px 2142.69px; }
.rotating-icon-vcfo-4 { transform-origin: 1869.11px 2156.72px; }
.rotating-icon-vcfo-5 { transform-origin: 222.2785px 961.1025px; }

.rotating-icon-audit-1 { transform-origin: 2074.36px 756.806px; }
.rotating-icon-audit-2 { transform-origin: 222.2785px 1826.08px; }
.rotating-icon-audit-3 { transform-origin: 1148.3205px 2360.7px; }
.rotating-icon-audit-4 { transform-origin: 2071.98px 1826.44px; }
.rotating-icon-audit-5 { transform-origin: 222.2785px 757.9585px; }
.rotating-icon-audit-6 { transform-origin: 1148.3205px 222.1165px; }

.rotating-icon-legal-1 { transform-origin: 1280.87px 222.1165px; }
.rotating-icon-legal-2 { transform-origin: 702.6525px 392.1955px; }
.rotating-icon-legal-3 { transform-origin: 222.2785px 1444.165px; }
.rotating-icon-legal-4 { transform-origin: 1859.07px 392.1955px; }
.rotating-icon-legal-5 { transform-origin: 2339.455px 1444.105px; }
.rotating-icon-legal-6 { transform-origin: 979.56px 2318.055px; }
.rotating-icon-legal-7 { transform-origin: 2253.695px 847.6795px; }
.rotating-icon-legal-8 { transform-origin: 472.611px 1992.315px; }
.rotating-icon-legal-9 { transform-origin: 1582.17px 2318.11px; }
.rotating-icon-legal-10 { transform-origin: 2089.125px 1992.68px; }
.rotating-icon-legal-11 { transform-origin: 308.0225px 847.6695px; }

/* Rotating group animations */

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

/* Special case: Audit group with a custom transform-origin */
.rotating-group-audit.active {
  animation: rotate-group 45s linear infinite;
  transform-origin: 1148.318px 1291.436px;
  will-change: transform;
}


 /**
 * --------------------------------------------------
 * 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
 * --------------------------------------------------
 */