.logoman {
  border-radius: 5px;
}

.back-btn {
  background: transparent;
  border: 2px solid #00aaff;
  color: #00aaff;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.3s ease;
}

.back-btn:hover {
  background: #00aaff;
  color: #fff;
  transform: translateY(-2px);
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
  .back-btn {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 15px;
    padding: 12px 0;
    border-radius: 8px;
  }
}
    /* Services Section Styles */
  
    #services {
      --background-color: #0d1d26;
      --surface-color: #16262f;
      margin-top: 5rem;
      padding-bottom: 7rem;
    }
  
    .services-head {
      text-align: center;
      padding-top: 3rem;
    }
  
    .services-title {
      text-align: center;
      color: #ffffff;
      font-size: 3.5rem;
      font-family: "Quicksand";
      font-weight: 400;
    }
  
    .services-description {
      text-align: center;
      color: #ffffff;
      font-size: 1.3rem;
      font-family: "Quicksand";
      padding-top: 0.3rem;
      width: 50%;
      margin-left: 25%;
    }
  
    /* Services Section Cards */
  
    .skills-container {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center;
      padding-top: 3rem;
    }
  
    .skills-container2 {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center;
      padding-top: 3rem;
    }
  
    /* Each Card */
  
    .card {
      background-color: #fff;
      border-radius: 1rem;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
      max-width: 22rem;
      width: 100%;
      flex: 1 1 100%;
      overflow: hidden;
      transition: transform 0.3s;
    }
  
    .card:hover {
      transform: translateY(-0.5rem);
    }
  
    /* Image */
    .skill-icon {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
      object-fit: contain;
      background: #f0f0f0;
      padding: 1rem;
    }
  
    /* Content */
    .skill-content {
      padding: 1.25rem;
    }
  
    .skill-title {
      font-size: 1.35rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
      font-family: "Quicksand";
    }
  
    .skill-description {
      font-size: 1.2rem;
      margin-bottom: 1rem;
      font-family: "Helvetica";
    }
  
    .skill-list {
      list-style-type: disc;
      padding-left: 1.5rem;
      font-size: 1rem;
      color: #000000;
      font-family: "Quicksand";
      font-weight: 600;
    }
  
    /* Responsive layout */
    @media (min-width: 40rem) {
      .card {
        flex: 1 1 calc(50% - 2rem);
      }
    }
  
    @media (min-width: 60rem) {
      .card {
        flex: 1 1 calc(33.333% - 2rem);
      }
    }
  
    /*get started button*/
  
    .get-started-link {
      display: inline-block;
      margin-top: 15px;
      background-color: #7a00ff;
      color: white;
      padding: 10px 20px;
      border-radius: 8px;
      text-decoration: none;
      transition: background 0.3s ease;
    }
  
    .get-started-link:hover {
      background-color: #6b1883;
    }
  
    /* End of Services Section Styles */

        .amount2{
          font-size: 1.9rem;

        }
        .pricing .service-title {
          font-size: 28px;
          margin-top: 50px;
          margin-bottom: 20px;
          font-weight: 600;
          color: #7b7b7b;
        }
    
        .pricing-card {
          background: #fff;
          border: 2px solid #eee;
          border-radius: 12px;
          padding: 20px;
          text-align: center;
          transition: all 0.3s ease;
        }
    
        .pricing-card.popular {
          border-color: #00aaff;
          box-shadow: 0 10px 30px rgba(0, 170, 255, 0.2);
        }
    
        .pricing-card .plan-header h4 {
          font-size: 22px;
          margin-bottom: 5px;
        }
    
        .pricing-card .plan-header p {
          font-size: 14px;
          color: #555;
        }
    
        .plan-pricing {
          font-size: 24px;
          font-weight: 600;
          margin: 15px 0;
        }
    
        .plan-pricing .currency {
          font-size: 18px;
          vertical-align: super;
        }
    
        .plan-pricing .period {
          font-size: 14px;
          color: #555;
        }
    
        .plan-features {
          list-style: none;
          padding: 0;
          margin: 15px 0;
        }
    
        .plan-features li {
          padding: 6px 0;
          border-bottom: 1px solid #eee;
          font-size: 14px;
        }
    
        .btn-plan {
          display: inline-block;
          background: #00aaff;
          color: #fff;
          padding: 10px 25px;
          border-radius: 8px;
          text-decoration: none;
          margin-top: 10px;
          transition: 0.3s ease;
        }
    
        .btn-plan:hover {
          background: #0077cc;
          transform: translateY(-2px);
        }
    
        /* Mobile Responsive */
        @media (max-width: 768px) {
          .pricing-card {
            margin-bottom: 20px;
          }
    
          .plan-pricing {
            font-size: 20px;
          }
    
          .service-row {
            display: flex;
            flex-direction: column;
          }
        }

/* PurpleLok Team Cards */

/* Container */
.futuristic-team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  padding: 60px 20px;
  background: #0e0f14;
  position: relative;
  overflow: hidden;
}

/* Particle-like background effect for whole section */
.futuristic-team::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(circle at 30% 30%, #00ffe1, transparent 30%),
    radial-gradient(circle at 70% 70%, #ff00c8, transparent 30%);
  animation: rotateBG 20s linear infinite;
  z-index: 0;
  opacity: 0.2;
}

@keyframes rotateBG {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Card */
.futuristic-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15));
  border: 2px solid rgba(0, 255, 225, 0.5);
  border-radius: 25px;
  overflow: hidden;
  width: 300px;
  transition: transform 0.6s, box-shadow 0.6s;
  backdrop-filter: blur(12px);
  z-index: 1;
}

/* Floating particles inside card */
.futuristic-card::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(#00ffe1 1px, transparent 1px), radial-gradient(#ff00c8 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  animation: moveParticles 8s linear infinite;
  opacity: 0.15;
}

@keyframes moveParticles {
  0% {
    background-position: 0 0, 10px 10px;
  }

  100% {
    background-position: 20px 20px, 30px 30px;
  }
}

.futuristic-card:hover {
  transform: rotateY(10deg) rotateX(5deg) scale(1.05);
  box-shadow: 0 0 40px #00ffe1, 0 0 60px #ff00c8;
}

/* Neon Picture */
.futuristic-card .futuristic-picture {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 30px auto 15px auto;
  border: 3px solid #ff00c8;
  overflow: hidden;
  box-shadow: 0 0 15px #ff00c8, 0 0 30px #00ffe1;
  transition: transform 0.5s, box-shadow 0.5s;
}

.futuristic-card:hover .futuristic-picture {
  transform: rotate(-10deg) scale(1.1);
  box-shadow: 0 0 30px #00ffe1, 0 0 60px #ff00c8;
}

.futuristic-card .futuristic-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Name & Role */
.futuristic-card .futuristic-name {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #00ffe1;
  margin-bottom: 5px;
  text-shadow: 0 0 8px #00ffe1, 0 0 20px #ff00c8;
}

.futuristic-card .futuristic-role {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #dcdcdc;
  margin-bottom: 20px;
}

/* Social Icons */
.futuristic-card .futuristic-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
}

.futuristic-card:hover .futuristic-social {
  opacity: 1;
  transform: translateY(0);
}

.futuristic-social li {
  list-style: none;
}

.futuristic-social a {
  font-size: 1.3rem;
  color: #00ffe1;
  transition: color 0.3s, transform 0.3s, text-shadow 0.3s;
}

.futuristic-social a:hover {
  color: #ff00c8;
  transform: translateY(-5px);
  text-shadow: 0 0 10px #ff00c8, 0 0 20px #00ffe1;
}

/* Responsive */
@media (max-width: 1024px) {
  .futuristic-card {
    width: 45%;
  }
}

@media (max-width: 768px) {
  .futuristic-card {
    width: 80%;
  }
}

/* Keep all previous futuristic-card CSS as is */

/* Particle container inside card */
.futuristic-card .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #00ffe1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.6;
  transition: transform 0.1s linear, opacity 0.3s;
}

.futuristic-card .particle:nth-child(2n) {
  background: #ff00c8;
}

/* Trail particles */
.futuristic-trail {
  position: absolute;
  width: 6px;
  height: 6px;
  background: linear-gradient(45deg, #00ffe1, #ff00c8);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.8;
  mix-blend-mode: screen;
  filter: blur(2px);
  transition: transform 0.1s linear, opacity 0.4s;
}

 .whatsapp-btn {
   position: fixed;
   bottom: 30px;
   right: 30px;
   background-color: #25d366;
   color: white;
   border-radius: 50%;
   width: 60px;
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 28px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
   cursor: pointer;
   z-index: 9999;
   animation: pulse 2s infinite;
   opacity: 0;
   transform: scale(0);
   transition: all 0.5s ease;
 }

 .whatsapp-btn.show {
   opacity: 1;
   transform: scale(1);
 }

 .whatsapp-btn:hover {
   transform: scale(1.2);
 }

 @keyframes pulse {
   0% {
     transform: scale(1);
     box-shadow: 0 0 0 rgba(37, 211, 102, 0.4);
   }

   50% {
     transform: scale(1.1);
     box-shadow: 0 0 20px rgba(37, 211, 102, 0.6);
   }

   100% {
     transform: scale(1);
     box-shadow: 0 0 0 rgba(37, 211, 102, 0.4);
   }
 }

 @keyframes shake {
   0% {
     transform: translate(0, 0) scale(1);
   }

   25% {
     transform: translate(-2px, 2px) scale(1.05);
   }

   50% {
     transform: translate(2px, -2px) scale(1.05);
   }

   75% {
     transform: translate(-2px, 2px) scale(1.05);
   }

   100% {
     transform: translate(0, 0) scale(1);
   }
 }

 .whatsapp-btn.shake {
   animation: shake 0.6s ease-in-out;
 }