body {
      font-family: Arial, sans-serif;
      background: #fff;
      color: #2a145d;
    }
    .main-section {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 90px 20px;
    }
 .logo-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffffff 40%, #FFC107 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 10px;
  animation: pulse 3s infinite;
  overflow: visible;
}

/* Ripple waves */
.logo-circle::before,
.logo-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 7px solid #3c93e0;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.6;
  animation: ripple 3s infinite;
}

.logo-circle::after {
  animation-delay: 1.5s; /* staggered second ripple */
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

    .logo-icon {
      font-size: 80px;
      
      color: #3c93e0;
    }

    .logo-icon img{
            width: 450%;
    padding-left: -5%;
    margin-left: 15%;
    }
    @keyframes pulse {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.9; }
      100% { transform: scale(1); opacity: 1; }
    }
    .features {
      margin-top: 40px;
    }
    .feature-item {
      display: block;
      padding: 20px;
      opacity: 0;
      transform: translateY(50px);
      transition: all 0.8s ease-in-out;
    }
    .feature-item.show {
      opacity: 1;
      transform: translateY(0);
    }
  .feature-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid #ffc739;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px auto;
  font-size: 28px;
  color: #3c93e0;
  transition: all 0.3s ease-in-out;
  position: relative;   /* needed for ::after */
  background: #fff;     /* same as page background */
  z-index: 1;           /* circles above line */
}

.feature-circle:hover {
  background: #3c93e0;
  color: #fff;
  transform: scale(1.1);
}

/* Mask to hide line inside circle */
.feature-circle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;   /* same as background of section */
  z-index: -1;
}

    .feature-item h6 {
      font-weight: bold;
      margin-bottom: 8px;
      color: #2a145d;
    }
    .feature-item p {
      color: #333;
      font-size: 14px;
    }
    /* .line {
      
     
      
      position: absolute;
      
      top: 92px;
      left: 15px;
      right: 95px;
      z-index: -1;
    } */

 .features-row {
  position: relative;
}

.line {
  position: absolute;
  top: 51px;            /* align with centers of circles */
  left: 15px;           /* start before first circle */
  right: -37px;          /* end before last circle */
  height: 3px;
  background: #3c93e0;
  z-index: -1;

  /* animation */
  width: 0;
  animation: drawline 8s ease forwards;
}

@keyframes drawline {
  from { width: 0; }
  to { width: calc(100% - 40px); }
}



.feature-item:nth-child(1) { transition-delay: 0.5s; }
.feature-item:nth-child(2) { transition-delay: 1s; }
.feature-item:nth-child(3) { transition-delay: 1.5s; }
.feature-item:nth-child(4) { transition-delay: 2s; }