/* Base styles */
 body {
    background-color: black;
    color: white;
    font-family: 'Manrope', sans-serif;
  }
  
  /* Text selection styling */
  ::selection {
    background-color: rgba(139, 92, 246, 0.3);
    color: white;
  }
  
  /* Custom scrollbar styling - Purplish */
  ::-webkit-scrollbar {
    width: 12px;
  }
  
  ::-webkit-scrollbar-track {
    background: #13111c;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.5);
    border-radius: 6px;
    border: 3px solid #13111c;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.8);
  }
  
  /* Firefox scrollbar */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.5) #13111c;
  }
  
  /* Header nav link underline animation */
  .nav-link-underline {
    position: relative;
  }
  
  .nav-link-underline::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    background-color: #8b5cf6;
    transition: width 0.3s ease, left 0.3s ease;
    transform: translateX(-50%);
  }
  
  .nav-link-underline:hover::after {
    width: 100%;
  }
  
  /* 3D Shapes */
  .cube {
    transform-style: preserve-3d;
    transform: rotateX(30deg) rotateY(45deg);
  }
  
  .cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.2));
    backdrop-filter: blur(4px);
    border: 1px solid rgba(139, 92, 246, 0.3);
  }
  
  /* Scrolling clients */
  .scrolling-container {
    overflow: hidden;
    position: relative;
  }
  
  .scrolling-wrapper {
    display: flex;
    animation: scroll 30s linear infinite;
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
  .scrolling-gradient-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, black, transparent);
    z-index: 10;
  }
  
  .scrolling-gradient-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to left, black, transparent);
    z-index: 10;
  }
  
  /* Floating animation */
  .floating {
    animation: floating 6s ease-in-out infinite;
  }
  
  @keyframes floating {
    0%, 100% {
      transform: translateY(0) rotate(0);
    }
    50% {
      transform: translateY(-20px) rotate(5deg);
    }
  }
  
  /* Rotating animation */
  .rotating {
    animation: rotating 20s linear infinite;
  }
  
  @keyframes rotating {
    from {
      transform: rotateY(0deg) rotateX(0deg);
    }
    to {
      transform: rotateY(360deg) rotateX(360deg);
    }
  }
  
  /* Pulse animation */
  .pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
  }
  
  @keyframes pulse-glow {
    0%, 100% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
  }
  
  /* Background orbs */
  .bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
  }
  
  /* Hero text animations */
  .hero-text-line {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  .hero-text-desc {
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  
  .hero-buttons {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  /* Fade in animation */
  @keyframes fade-in {
    from { 
      opacity: 0; 
      transform: translateY(20px); 
    }
    to { 
      opacity: 1; 
      transform: translateY(0); 
    }
  }
  
  .animate-fade-in {
    animation: fade-in 0.6s ease forwards;
  }
  
  /* Font family explicit declarations to ensure they apply */
  .font-manrope {
    font-family: 'Manrope', sans-serif !important;
  }
  
  .font-space-grotesk {
    font-family: 'Space Grotesk', sans-serif !important;
  }

  /* Improved hover transitions for buttons */
  .header-button {
    transition: all 0.3s ease;
    border: 1px solid #8b5cf6;
    color: #a78bfa;
  }

  .header-button:hover {
    background-color: rgba(109, 40, 217, 0.2);
    transform: scale(1.05);
    transition: all 0.3s ease;
  }

  /* Hero buttons with reduced width */
  .hero-action-button {
    transition: all 0.3s ease;
    width: auto;
    max-width: 200px;
  }

  .hero-action-button:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
  }

  /* Stats card hover effect */
  .stat-card {
    transition: all 0.3s ease;
    border: 2px solid rgba(91, 33, 182, 0.3);
  }

  .stat-card:hover {
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.2);
    transition: all 0.3s ease;
  }

  /* Client item hover effect */
  .client-item-box {
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
  }

  .client-item-box:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
    transition: all 0.3s ease;
  }

  /* Expert card hover effect - reduced tilt */
  .expert-card:hover {
transform: scale(1.02) rotateY(0.5deg) rotateX(0.3deg);
border-color: rgba(139, 92, 246, 0.3);
transition: all 0.3s ease;
}

  /* Logo hover effect */
  .logo-container {
    transition: transform 0.3s ease;
  }

  .logo-container:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
  }

 
  .displayPhone {
display: none !important;
}

@media (max-width: 550px) {
.displayPhone {
  display: inline-flex !important;
}
}

.viewMobiles {
display: inline-flex !important;
}
@media (max-width: 550px) {
.viewMobiles {
  display: none !important;
}
}

/* Initially hide the element */
.secretMobile {
display: none !important;
}

/* When the screen width is 550px or below, show the element */
@media (min-width: 360px) and (max-width: 550px) {
.secretMobile {
  display: inline-flex !important; /* or 'block' if you want it as a block element */
  margin-right: -50px !important;
}
}
@media (max-width: 359px) {
.forMobiles {
  display: none;
}
}
.scrolling-container {
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 120px;
    }
    
    .scrolling-wrapper {
      display: flex;
      animation: scroll-left 30s linear infinite;
      width: max-content;
      align-items: center;
    }
    
    .client-item-box {
      min-width: 200px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      transition: all 0.3s ease;
    }
    
    .client-item-box:hover {
      transform: translateY(-2px);
      border-color: rgba(139, 92, 246, 0.5);
      box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
    }
    
    .client-logo {
      width: 40px;
      height: 40px;
      object-fit: contain;
      filter: grayscale(100%) brightness(0.8);
      transition: all 0.3s ease;
    }
    .client-logo1 {
      width: 100px;
      height: 100px;
      object-fit: contain;
      filter: grayscale(100%) brightness(0.8);
      transition: all 0.3s ease;
    }
    
    .client-item-box:hover .client-logo {
      filter: grayscale(0%) brightness(1);
    }
    
    .client-name {
      font-size: 18px;
      font-weight: 600;
      color: #d1d5db;
      transition: color 0.3s ease;
    }
    
    .client-item-box:hover .client-name {
      color: #ffffff;
    }
    
    @keyframes scroll-left {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    
    .scrolling-gradient-left,
    .scrolling-gradient-right {
      position: absolute;
      top: 0;
      width: 100px;
      height: 100%;
      z-index: 10;
      pointer-events: none;
    }
    
    .scrolling-gradient-left {
      left: 0;
      background: linear-gradient(to right, rgba(0, 0, 0, 1), transparent);
    }
    
    .scrolling-gradient-right {
      right: 0;
      background: linear-gradient(to left, rgba(0, 0, 0, 1), transparent);
    }