/****************** Carousel ****************/

.carousel-container {
  perspective: 1000px;
  touch-action: pan-y pinch-zoom;
}
.carousel-track {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.carousel-item {
  backface-visibility: hidden;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.carousel-item.active {
  opacity: 1;
  transform: scale(1) translateZ(0);
}
@media (max-width: 640px) {
  .carousel-item.prev {
      opacity: 0;
      transform: scale(0.8) translateX(-50%) translateZ(-100px);
  }
  .carousel-item.next {
      opacity: 0;
      transform: scale(0.8) translateX(50%) translateZ(-100px);
  }
}
@media (min-width: 641px) {
  .carousel-item.prev {
      opacity: 0.7;
      transform: scale(0.9) translateX(-100%) translateZ(-100px);
  }
  .carousel-item.next {
      opacity: 0.7;
      transform: scale(0.9) translateX(100%) translateZ(-100px);
  }
}

.carousel-item.hidden {
  opacity: 0;
  transform: scale(0.8) translateZ(-200px);
}

.nav-button {
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (hover: hover) {
  .nav-button:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(1.1);
  }
}

.nav-button:active {
  transform: scale(0.95);
}

.progress-bar {
  transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}




/****************** navbar under dash effort ****************/


.group {
    position: relative;
    /* display: inline-block; */
  }
  
  .group:hover::after {
    width: 100%;
  }

  .group::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #ffffff;
    transition: width 0.3s ease;
  }
  

/****************** reduce navbar height ****************/

.hi {
  height: 100px;
  transition: height 0.3s ease-in-out; /* Smooth transition for height change */
}

/* Shrink navbar to 80px on scroll up */
.hii {
    height: 80px;
    transition: height 0.3s ease-in-out; 
} 


  /* Scale transition */
  .scale-up {
    transform: scale(1);
    opacity: 1;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  }
  
  .scale-down {
    
    transform: scale(0.9);
    opacity: 0;
  }
  
  /* Fade-in animation */
  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animate-fadeIn {
    animation: fadeIn 1s ease-out forwards;
  }
  
  .animate-fadeInDelay {
    animation: fadeIn 1.5s ease-out forwards;
  }
  
  /* Hidden content that appears with a smooth animation */
  .hidden-content {
    opacity: 0;
    transform: translateY(50px); /* Initially move content below the fold */
    transition: opacity 1s ease-out, transform 1s ease-out;
  }
  
  .show-content {
    opacity: 1;
    transform: translateY(0); /* Bring the content to its original position */
  }
  
  /* Color styles */
  .st0 { fill: #0acf83; }
  .st1 { fill: #a259ff; }
  .st2 { fill: #f24e1e; }
  .st3 { fill: #ff7262; }
  .st4 { fill: #1abcfe; }
  
  /* Reset styles */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Canvas styling */
  canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  #cosmosCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
  }
  

  
  /* Header styles */
  header {
    position: relative;
    z-index: 1000;
  }
  /* Initially hide the dropdown content */
.hidden {
  display: none;
}

/* When the dropdown is visible, make sure it's displayed */
.dropdown-content {
  display: block;
  position: relative;
  z-index: 1000; /* Ensure dropdown content is above other content */
}


 /* ----------------------------------------------
		 * Generated by Animista
		 * w: http://animista.net, t: @cssanimista
		 * ---------------------------------------------- */
		 
     .slide-in-bottom{
      -webkit-animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both
    }
     .slide-in-bottom-h1{
      -webkit-animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) .5s both;animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) .5s both
    }
     .slide-in-bottom-subtitle{
      -webkit-animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) .75s both;animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) .75s both
    }
     .fade-in{
      -webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) 1s both;
      animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) 1s both
    }
     .bounce-top-icons{
      -webkit-animation:bounce-top .9s 1s both;
      animation:bounce-top .9s 1s both
    }
     
     @-webkit-keyframes slide-in-bottom{
      0%{-webkit-transform:translateY(1000px);
        transform:translateY(1000px);
        opacity:0}100%{-webkit-transform:translateY(0);
        transform:translateY(0);opacity:1}
      }
      @keyframes slide-in-bottom{
        0%{-webkit-transform:translateY(1000px);
        transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);
        opacity:1}
      }
     @-webkit-keyframes bounce-top{
      0%{-webkit-transform:translateY(-45px);transform:translateY(-45px);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-24px);
        transform:translateY(-24px);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);
          -webkit-animation-timing-function:ease-in;
          animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);
            -webkit-animation-timing-function:ease-in;
            animation-timing-function:ease-in}93%{-webkit-transform:translateY(-4px);
              transform:translateY(-4px);-webkit-animation-timing-function:ease-in;
              animation-timing-function:ease-in}25%,55%,75%,87%{-webkit-transform:translateY(0);transform:translateY(0);
                -webkit-animation-timing-function:ease-out;
                animation-timing-function:ease-out}100%{-webkit-transform:translateY(0);
                  transform:translateY(0);
                  -webkit-animation-timing-function:ease-out;
                  animation-timing-function:ease-out;opacity:1}
                }
                @keyframes bounce-top{
                  0%{-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}}
     @-webkit-keyframes fade-in{
      0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
 


/* What we do */

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-left {
  animation: slideInLeft 1s ease-out;
}

.animate-right {
  animation: slideInRight 1s ease-out;
}
      
.bottom-nav{
  position: fixed;
  padding: 8px;
  border-radius: 10px;
  right:5rem;
  bottom: 5rem;
  background: rgba( 255, 255, 255, 0.3 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 1.5px );
  -webkit-backdrop-filter: blur( 1.5px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.arrow{
  width: 32px;
  height: 32px;
}
.arrow img{
  width: 24px;
  height: 24px;
}
.bottom-nav a:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

html {
  scroll-behavior: smooth;
}

/* Define the shake animation */
@keyframes shake {
  0% {
      transform: translateX(0);
  }
  25% {
      transform: translateX(-5px);
  }
  50% {
      transform: translateX(5px);
  }
  75% {
      transform: translateX(-5px);
  }
  100% {
      transform: translateX(0);
  }
}

/* Apply the shake effect on the button */
.bottom-nav {
  animation: shake 1s ease-in-out 5s infinite;  /* 1 second for animation, 5 seconds delay before it restarts */
  display: inline-block;
  transform-origin: center center;
  width: auto;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .bottom-nav {
    display: none;
  }
}