.card {
  width: 98%; /* Adjust as needed */
  height: 260px; /* Adjust height based on content */
  border-radius: 8px; /* Slightly rounded corners */
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 16px; /* Darker shadow for depth */
  display: flex;
  flex-direction: column;
  margin: 2px auto; /* Center cards and add spacing */
  position: relative; /* Set position for the overlay */
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transitions for shadow and transform */
  background-color: #fff; /* Card background color */
  z-index: 0; /* Set a low z-index to keep it behind other elements */
}

.card_project {
  height: 530px; /* Adjust height based on content */
}

.card-image img {
  width: 100%;
  height: 100%; /* Ensure the image fills the container */
  object-fit: cover; /* Cover the space without distortion */
  opacity: 1; /* Start with fully visible */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Transition for opacity and transform */
  background-color: black;
}

/* Hide image when transitioning */
.card-image img.hidden {
  opacity: 0; /* Fade out effect */
}


/* Image section */
.card-image {
  flex: 0 0 85%; /* Adjust this value to change the height ratio of the image section */
  overflow: hidden;
  position: relative; /* For absolute positioning of the image */
}

/* Description section */
.card-description {
  flex: 0 0 15%; /* Adjust this value for the height ratio of the description section */
  opacity: 1; /* Set initial opacity */
  transition: opacity 0.5s ease-in-out; /* Transition for opacity */
 /* Ensure description stays above the overlay */
  display: grid; /* Enable grid layout */
  padding-left: 10px;
  grid-template-columns: auto auto; /* Two columns: 30% for the title, 70% for the description */
  align-items: center; /* Center items vertically */
  gap: 10px;
 
}

/* Remove default margins from h2 and p */
.card-description h2,
.card-description p {
  margin: 0; /* Remove default margin */
  
}

/* Optionally add spacing if needed, but set to 0 for no gap */
.card-description p {
  margin-top: 0; /* No top margin for the paragraph */
  color: #170d6e;
}


/* Image section */
.card-image-project {
  flex: 0 0 95%; /* Adjust this value to change the height ratio of the image section */
}

/* Description section */
.card-description-project {
  flex: 0 0 5%; /* Adjust this value to change the height ratio of the description section */
}

/* Title styling */
.card-description h2 {
  font-size: 0.9rem;
  color: #333; /* Darker title color */
  position: relative; /* Ensure title stays above the overlay */
 /* Ensure title is above the overlay */
}

/* Optional: Add hover effect for card */
.card:hover {
  transform: translateY(-5px); /* Lift the card slightly */
  box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 20px; /* Darker shadow on hover */
}


#scroll-container {
  border-radius: 5px; /* Optional: Styling for rounded corners */
  overflow: hidden; /* Hide overflow for the scrolling effect */
  white-space: nowrap; /* Prevent text from wrapping */
  width: auto; /* Adjust as needed */
}

.scroll-text {
    font-size: 0.8rem;
  display: inline-block; /* Ensure the text is treated as a block for animation */
  animation: scroll 9s linear infinite; /* Control speed and timing */
}

@keyframes scroll {
  0% {
      transform: translateX(100%); /* Start from the right */
  }
  100% {
      transform: translateX(-100%); /* Move to the left */
  }
}


/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}