.card{
  width: 1000px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(255, 240, 240);
}
.project-card-sm:hover {
  transform: scale(1.025);
  box-shadow: 0 0 100px -30px rgb(238,102,170);  
    }
    
    
    .project-card-sm .card-border-gradient {
      content: "";
      position: absolute;
      bottom: 50%;
      height: 300%;
      width: 10rem;
      z-index: -1;
      background: linear-gradient(to right, transparent, rgb(238,102,170), transparent);
      
      transition: opacity 0.3s ;
      opacity: 0;
        
      -webkit-animation: animate-border-gradient 5s infinite linear;
        
              animation: animate-border-gradient 5s infinite linear;
    }
    
    .project-card-sm:hover .card-border-gradient {
      opacity: 1;
    }
    
    @-webkit-keyframes animate-border-gradient {
      0% {
        transform: rotate(0deg);
        transform-origin: bottom;
      }
      100% {
        transform: rotate(360deg) ;
        transform-origin: bottom;
      }
    }
    
    @keyframes animate-border-gradient {
      0% {
        transform: rotate(0deg);
        transform-origin: bottom;
      }
      100% {
        transform: rotate(360deg) ;
        transform-origin: bottom;
      }
    }
  

.project-card-sm {
  flex: 1;
  display: flex;
  padding: 3px;
  max-width:410px;
  height: 410px;
  border-radius: 15px;
  background-color: rgba(66, 47, 47, 0.15);
  position: relative;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s, box-shadow 0.4s ;
  /* margin-top: 2rem;
  margin-bottom: 5rem;
  margin-left: 5rem; */
}

.project-card-sm img{
  width: 400px;
  height: 400px;
  border-radius: 15px;
}
.project-card-sm:hover img{
  filter: none;
}
/* Add a red overlay using a pseudo-element */
.project-card-sm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgb(238,102,170,0.5),rgb(163,156,244,0.5));
  border-radius: 15px; /* Match the border-radius of the image */
  transition: opacity 0.4s; /* Smooth transition for the overlay */
  opacity: 1; /* Default state is visible */
}

/* Hide the overlay on hover */
.project-card-sm:hover::before {
  opacity: 0;
}




.text-card-left{
display: flex;
flex-direction: column;
gap: 2rem;
height: auto;
width: auto;
}
.text-card-left .data{
  max-width: 500px;
  max-height: 400px;
  padding: 40px;
  background-color: #202020;
  margin-left: -30px;
  z-index: 1;
  text-align: left;
  font-size: 0.8rem;
}
.text-card-left h2{
  margin-top: auto; 
  text-align: end;
  font-size: 2rem;
  word-spacing: 20px;
  color: white;
}
.text-card-left a {
  list-style: none;
  margin-top: auto; 
  text-align: end;
  font-size: .7rem;
  word-spacing: 20px;
}


.text-card-right{
display: flex;
flex-direction: column;
gap: 2rem;
height: auto;
width: auto;
}
.text-card-right .data{
  max-width: 500px;
  max-height: 400px;
  padding: 40px;
  background-color: #202020;
  margin-right: -30px;
  z-index: 1;
  text-align: left;
  font-size: 0.8rem;
}
.text-card-right h2{
  margin-top: auto; 
  text-align: start;
  font-size: 2rem;
  word-spacing: 20px;
  color: white;
}
.text-card-right a {
  list-style: none;
  margin-top: auto;
  text-align: start;
  font-size: .7rem;
  word-spacing: 20px;
}









@media (max-width: 768px) {

  .card {
    width: 100%; /* Full width on small screens */
    height: auto; /* Auto height for flexibility */
    display: flex;
    flex-direction: column;
    margin-top: 4rem;
  }

  .project-card-sm {
    max-width: 100%; /* Full width on small screens */
    height: auto; /* Auto height for flexibility */
    padding: 10px; /* Reduced padding */
    margin: 10px 0; /* Adjust margin for smaller screen */
    order: 2;
  }

  .project-card-sm img {
    width: 400px; /* Full width of its container */
    height: 200px; /* Keep aspect ratio */
  }

  .text-card-left, .text-card-right {
    flex-direction: column;
    align-items: center; /* Center align for better readability */
    order: 1;
  }

  .text-card-left .data, .text-card-right .data {
    max-width: 100%; /* Full width on small screens */
    padding: 20px; /* Adjust padding */
    margin-left: 0; /* Remove negative margin */
    margin-right: 0; /* Remove negative margin */
    font-size: 0.9rem; /* Adjust font size for readability */
    order: 2;
  }

  .text-card-left h2, .text-card-right h2 {
    font-size: 1.5rem; /* Larger font size for headings */
    text-align: center; /* Center align text */
    order: 1;
  }

  .text-card-left a, .text-card-right a {
    font-size: 0.8rem; /* Adjust font size for links */
    text-align: center; /* Center align text */
    order: 3;
  }

}