.elementor-7509 .elementor-element.elementor-element-182e95f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}body.elementor-page-7509:not(.elementor-motion-effects-element-type-background), body.elementor-page-7509 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}/* Start custom CSS for html, class: .elementor-element-8f3db32 */.carousel-container {
  width: 100%;
  max-width: 1400px;
  height: 500px;
  position: relative;
  perspective: 2000px;
  margin-top: 0px;
  z-index: 2;
  overflow-x: hidden;
}

.carousel-track {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.card {
  position: absolute;
  width: 300px;
  height: 420px;
  background: #1f1f1f; /* Solid Dark Gray */
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  will-change: transform, opacity;
  transform-origin: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}


.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.8);
}




.card.center {
  z-index: 10;
  transform: scale(1.15) translateZ(0);
}

.card.center .card-img {
  filter: brightness(1);
}

.card.left-2 {
  z-index: 1;
  transform: translateX(-340px) scale(0.8) translateZ(-200px) rotateY(-25deg);
  opacity: 0.6;
}

.card.left-1 {
  z-index: 5;
  transform: translateX(-200px) scale(0.95) translateZ(-50px) rotateY(8deg);
  opacity: 0.8;
}

.card.right-1 {
  z-index: 5;
  transform: translateX(200px) scale(0.95) translateZ(-50px) rotateY(-8deg);
  opacity: 0.8;
}

.card.right-2 {
  z-index: 1;
  transform: translateX(340px) scale(0.8) translateZ(-200px) rotateY(25deg);
  opacity: 0.6;
}

.card.hidden {
  opacity: 0;
  pointer-events: none;
}





@keyframes pulse {
  0% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.3);
  }
}

.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #00bfff; /* Solid Electric Blue */
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  font-size: 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.1);
  outline: none;
  backdrop-filter: blur(5px);
  box-shadow: 0 5px 15px rgba(0, 191, 255, 0.3); /* Electric Blue Shadow */
  display: none;
}

.nav-arrow:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 191, 255, 0.4),
    /* Electric Blue Shadow */ 0 0 0 4px rgba(0, 191, 255, 0.2); /* Electric Blue Outline */
}

.nav-arrow.left {
  left: 20px;
}

.nav-arrow.right {
  right: 20px;
}



@keyframes float1 {
  0% {
    transform: translate(10%, 10%) rotate(0deg);
  }
  100% {
    transform: translate(-10%, -10%) rotate(360deg);
  }
}

@keyframes float2 {
  0% {
    transform: translate(-15%, 5%) rotate(0deg);
  }
  100% {
    transform: translate(15%, -5%) rotate(-360deg);
  }
}






  .card {
    width: 200px;
    height: 300px;
  }

.card.left-1 {
        transform: translateX(-180px) scale(0.9) translateZ(-50px) rotateY(-25deg);
    }

  .card.right-1 {
    transform: translateX(180px) scale(0.9) translateZ(-50px) rotateY(25deg);
  }


@media (max-width: 767px) {


  .card {
    width: 160px;
    height: 310px;
  }
@media (max-width:767px) {
    .card.center{
        width: 160px;
        height: 280px;  

    }
}
}

/* Glowing border only on the center card */
.card.center {
  border-radius: 20px;
  overflow: visible;   /* clip the aimage inside the card */
  position: relative;
}

.card.center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  border: 3px solid #9af4ff;
  box-shadow:
    0 0 10px #9af4ff,
    0 0 20px #9af4ff,
    0 0 30px #9af4ff,
    0 0 40px #9af4ff,
    0 0 60px #9af4ff;
  animation: neonFlicker 7s infinite;
}

@keyframes neonFlicker {
  0%   { box-shadow: 0 0 5px #9af4ff, 0 0 10px #9af4ff, 0 0 15px #9af4ff, 0 0 20px #9af4ff, 0 0 30px #9af4ff; }
  10%  { box-shadow: 0 0 8px #9af4ff, 0 0 16px #9af4ff, 0 0 24px #9af4ff, 0 0 32px #9af4ff, 0 0 48px #9af4ff; }
  20%  { box-shadow: 0 0 6px #9af4ff, 0 0 12px #9af4ff, 0 0 18px #9af4ff, 0 0 24px #9af4ff, 0 0 36px #9af4ff; }
  30%  { box-shadow: 0 0 9px #9af4ff, 0 0 18px #9af4ff, 0 0 27px #9af4ff, 0 0 36px #9af4ff, 0 0 54px #9af4ff; }
  40%  { box-shadow: 0 0 5px #9af4ff, 0 0 10px #9af4ff, 0 0 15px #9af4ff, 0 0 20px #9af4ff, 0 0 30px #9af4ff; }
  50%  { box-shadow: 0 0 10px #9af4ff, 0 0 20px #9af4ff, 0 0 30px #9af4ff, 0 0 40px #9af4ff, 0 0 60px #9af4ff; }
  60%  { box-shadow: 0 0 7px #9af4ff, 0 0 14px #9af4ff, 0 0 21px #9af4ff, 0 0 28px #9af4ff, 0 0 42px #9af4ff; }
  70%  { box-shadow: 0 0 10px #9af4ff, 0 0 20px #9af4ff, 0 0 30px #9af4ff, 0 0 40px #9af4ff, 0 0 60px #9af4ff; }
  80%  { box-shadow: 0 0 6px #9af4ff, 0 0 12px #9af4ff, 0 0 18px #9af4ff, 0 0 24px #9af4ff, 0 0 36px #9af4ff; }
  90%  { box-shadow: 0 0 9px #9af4ff, 0 0 18px #9af4ff, 0 0 27px #9af4ff, 0 0 36px #9af4ff, 0 0 54px #9af4ff; }
  100% { box-shadow: 0 0 10px #9af4ff, 0 0 20px #9af4ff, 0 0 30px #9af4ff, 0 0 40px #9af4ff, 0 0 60px #9af4ff; }
}


#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* so it doesn’t block carousel interactions */
  z-index: 0; /* behind carousel content */
}
.carousel-wrapper {
  width: 100%;
    max-width: 1400px;
}/* End custom CSS */