html {
        scroll-behavior: smooth;
      }
body{
  font-family: hind;
}
.header {
  align-items: center;
}
nav a {
  text-transform: uppercase;
  color: gray;
}
.hero-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  font-size: 3rem;
}
.about-title h1 {
  display: inline-block;
  padding: 5px;
  border-radius: 100px;
  text-align: center;
}
.about-info-para{
  font-size: 20px;
}
@keyframes slideX {
    0% { transform: translateX(0%); }
    20% { transform: translateX(0%); }
    25% { transform: translateX(-100%); }
    45% { transform: translateX(-100%); }
    50% { transform: translateX(-200%); }
    70% { transform: translateX(-200%); }
    75% { transform: translateX(0%); }
    100% { transform: translateX(0%); }
  }

  .slider-track {
    animation: slideX 12s ease-in-out infinite;
  }
    .flip-wrapper {
      perspective: 1000px;
    }

    .flip-card {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }

    .flip-wrapper:hover .flip-card {
      transform: rotateY(180deg);
    }

    .flip-front,
    .flip-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 0.75rem; /* rounded-xl */
      overflow: hidden;
    }

    .flip-back {
      transform: rotateY(180deg);
    }