.project-card-p{
    font-size: small;
  text-transform: uppercase;
  font-weight: 600;
}
/* .project-card iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  } */
  .aspect-ratio-container {
    width: 100%;                      /* Full width */
    position: relative;               /* Needed for absolute positioning */
    height: 0;                        /* Start with zero height */
    padding-top: 56.25%;              /* 1080 / 1920 = 0.5625, so 56.25% */
  }
  .aspect-ratio-container > * {
    position: absolute;               /* To fill the container */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
.project-card{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 300ms linear;
    position: relative;
   padding-bottom: 20px !important;
}
.project-card img{
  width: 100%;
  /* height: 12rem; */
  margin-bottom: 20px !important;
}

.project-card::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(148deg, #412399 0%, #992084 100%);
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    transition: all 0.3s linear;
    visibility: hidden;
    border-radius: var(--bs-border-radius) !important;
}

.project-card:hover::before {
    visibility: visible;
    opacity: 1;
  }
  .project-card:hover{
    /* transform: rotate3d(1,1,1,-10deg); */
    transform: scale3d(1.1,1.1,1.1);
  }
.project-card:hover img,
.project-card:hover iframe,
.project-card:hover button{
    transform: scale3d(1.08,1.13,1.05);
   
    /* transform: rotate3d(1, 1, 1, 20deg); */
}
.bg-livedemo{
    background: linear-gradient(125deg,#f377de 0%,#8560f3 100%) !important;
    border: 1px whitesmoke;
    box-shadow: 2px;
}
.bg-buynow{
    background: linear-gradient(125deg,#fc8ee9 0%,#987cee 100%) !important;
    border: 1px whitesmoke;
    box-shadow: 2px;
}
.project-card:hover h4{
  color: white !important;
   
}
.project-card:hover p{
    color: rgb(212, 218, 221) !important;
     
  }

 