* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrapper{
  width: 100vw;
  height: 100vh;
}
.container {
  max-width: 1380px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.cards {
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  gap: 2rem;
}
.cards-heading{
    /* text-4xl font-normal text-[#7e15ce] */
    font-size: 3rem;
    font-weight: 800;
    color: #7e15ce;
}

.parent {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.card {
  /* border: 2px solid red; */
  width: 400px;
  height: fit-content;
  border-radius: 20px;
  background: #7e15ce;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  color: white;
  position: relative;
  gap: 1rem;
  transition: all 0.2s ease;
  position: relative;
}
.card:hover {
  animation: jump 1s ease infinite;
}
/* @keyframes jump {
    0%{
        transform: translateY(0);
    }
    50%{s
        transform:translateY(-60px);
    }
    100%{
        transform: translate(0) rotate(0);
    }
} */
/* .card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7rem;
  width: 300px;
  height: 100px;
  margin: auto;
  background: #330358;
  filter: blur(70px);
} */
/* .card:hover::before {
  animation: jump-down2 1s ease infinite;
}

@keyframes jump-down2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
} */
/* .card::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: red;
  width: 500px;
  height: 500px;
} */
.card:nth-child(1):hover {
  box-shadow: none;
}

.parent:has(.card:nth-child(1):hover) > .card:nth-child(2),
.parent:has(.card:nth-child(1):hover) > .card:nth-child(3) {
  box-shadow: 0 0 10px black;
  /* filter: blur(4px); */

}

.card:nth-child(2):hover {
  box-shadow: none;
}

.parent:has(.card:nth-child(2):hover) > .card:nth-child(1),
.parent:has(.card:nth-child(2):hover) > .card:nth-child(3) {
  box-shadow: 0 0 10px black;
  /* filter: blur(4px); */
}


.card:nth-child(3):hover {
  box-shadow: none;
}

.parent:has(.card:nth-child(3):hover) > .card:nth-child(1),
.parent:has(.card:nth-child(3):hover) > .card:nth-child(2) {
  box-shadow: 0 0 10px black;
  /* filter: blur(4px); */
}

.card:hover {
  box-shadow: none;
  filter: blur(0px);
}

.card-image {
  width: 200px;
  height: 200px;
  display: block;
}
.card-image2 {
  width: 250px;
  height: 190px;
  display: block;
}
.card::before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2); 
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  animation: running-box2 4s ease infinite;
  border: 2px solid rgba(0, 0, 0, 1); 
  transform: skew(-5deg);
  filter: blur(20px);
  border-radius: 20px;
  z-index: -1;
}


.card p {
  font-size: 22px;
  text-align: center;
  /* margin-top: -5rem; */
}

.card button {
  appearance: none;
  border: none;
  outline: none;
  background: none;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.1rem;
  font-weight: 600;
}
.card button a {
  color: black;
  text-decoration: none;
}

.card button:hover {
  background: #9e81b4;
  color: white;
}
.card button:hover a{
    color: white;
}


/* responsive start */
@media only screen and (max-width : 1200px) {
  .cards-heading{
    font-size: 2.8rem;
  }
  .card {
    width: 350px;
    height: fit-content;
  }
  .card-image {
    width: 180px;
    height: 180px;
    display: block;
  }
  .card-image2 {
    width: 220px;
    height: 170px;
    display: block;
  }

  .card h1{
    font-size: 1.6rem;
  }
  .card p{
    font-size: 1.1rem;
  }
  
.card button {
  padding: 0.4rem 0.8rem;
}

}

@media only screen and (max-width : 1024px) {
  .card {
    width: 320px;
    height: fit-content;
  }
}

@media only screen and (max-width : 840px) {
  .parent{
    /* margin-left: 5rem ; */
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-wrap: wrap; */
    transform: translateY(15%);
  }
  .card{
    width: 280px;
  }
  .card-image {
    width: 150px;
    height: 150px;
    display: block;
  }
  .card-image2 {
    width: 180px;
    height: 140px;
    display: block;
  }

  
  .card h1{
    font-size: 1.5rem;
  }
  .card p{
    font-size: 1rem;
  }
  
.card button {
  padding: 0.4rem 0.8rem;
}


}

@media only screen and (max-width :  788px){
  .parent{
    margin-left: 7rem;
    flex-wrap: wrap;
  }
}

@media only screen and (max-width :  520px){
  .parent{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(25%);
    margin-left: 0rem;
  }
  .card{
    width: 320px;
  }
}
/* responsive end */