/* Mobile scrollbar */
.mobile-scroll::-webkit-scrollbar {
  width: 4px;
}
.mobile-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.mobile-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* Accordion transition */
.accordion-content {
  transition:
    max-height 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.accordion-content.active {
  max-height: 1000px;
  opacity: 1;
}
.rotate-chevron {
  transform: rotate(180deg);
}

/* Custom Global Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Mega menu hover */
.group:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Slider */
.slide {
  transition: opacity 0.5s ease-in-out;
}
.active-slide {
  opacity: 1;
  z-index: 10;
}
.inactive-slide {
  opacity: 0;
  z-index: 0;
}
.cursor-grab {
  cursor: grab;
}
.cursor-grabbing {
  cursor: grabbing;
}

/* Card Effects */
.pro-card {
  transition: all 0.3s ease;
  background: linear-gradient(145deg, #ffffff, #f8fafc);
}
.pro-card:hover {
  transform: translateY(-8px);
  border-color: rgba(37, 99, 235, 0.2);
}

/* 3D Card */
.perspective-container {
  perspective: 1000px;
}
.credit-card {
  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
  transform-style: preserve-3d;
}
.credit-card:hover {
  transform: rotateY(10deg) rotateX(5deg) scale(1.02);
  box-shadow: 20px 20px 50px -10px rgba(0, 0, 0, 0.3);
}

/* Miscellaneous */
.blob-shape {
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}
.shine {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 60%
  );
}
.feature-item:hover .check-icon {
  transform: scale(1.2);
  color: #2a9d8f;
}
.check-icon {
  transition: all 0.3s ease;
}

/* Marquee Fade Edges (From About Us) */
.fade-edges {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}