.about-section {

  width: 100%;

  min-height: 90vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 40px 6%;

  background: linear-gradient(120deg, #0f2027, #203a43, #2c5364);

  color: #fff;

}



.about-container {

  max-width: 1200px;

  width: 100%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;

}



.about-text h1 {

  font-size: 3.2rem;

  line-height: 1.1;

  margin-bottom: 20px;

}



.about-text span {

  color: #ff4d4d;

}



.about-text p {

  margin: 20px 0 40px;

  opacity: 0.85;

  max-width: 480px;

  font-size: .9rem;

  line-height: 1.6;

}



.about-features {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 30px;

}



.feature {

  text-align: center;

  padding: 20px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 15px;

  backdrop-filter: blur(10px);

  transition: 0.3s;

}



.feature:hover {

  transform: translateY(-5px);

  background: rgba(255, 255, 255, 0.15);

}



.feature i {

  font-size: 2.5rem;

  color: #ff4d4d;

  margin-bottom: 15px;

}



.feature h3 {

  font-size: 1.2rem;

  margin-bottom: 10px;

}



.feature p {

  opacity: 0.8;

  font-size: 0.9rem;

}



.about-image {

  position: relative;

  display: flex;

  justify-content: center;

}



.about-image img {

  width: 100%;

  max-width: 400px;

  border-radius: 25px;

  box-shadow: 0 40px 80px rgba(0,0,0,0.4);

  animation: float 4s ease-in-out infinite;

}



.about-image::before {

  content: "";

  position: absolute;

  inset: -20px;

  background: linear-gradient(45deg, #ff4d4d, #00f2ff);

  filter: blur(80px);

  opacity: 0.4;

  z-index: -1;

  border-radius: 25px;

}



@keyframes float {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-15px); }

}



/* Responsive Design */

@media (max-width: 900px) {

  .about-container {

    grid-template-columns: 1fr;

    text-align: center;

    gap: 40px;

  }



  .about-text h1 {

    font-size: 2.4rem;

  }



  .about-text p {

    max-width: 100%;

  }



  .about-features {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 600px) {

  .about-section {

    padding: 20px 4%;

  }



  .about-text h1 {

    font-size: 2rem;

  }



  .about-text p {

    font-size: 1rem;

  }



  .feature {

    padding: 15px;

  }



  .feature i {

    font-size: 2rem;

  }



  .about-image img {

    max-width: 300px;

  }

}