*{
    margin: 0;
    padding: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}



.uniHeading {
  color: #fff;
  background-color: #005b98;
  text-align: center;
  padding: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 30px;
  background-color: #036daf;
  overflow-x: hidden;
  perspective: 1000px; /* Enables 3D effect */
  box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3), /* Top shadow */
  0px 5px 10px rgba(0, 0, 0, 0.3);  /* Bottom shadow */
}

.container a{
  text-decoration: none;
 }

.card {
  background-color: #fff;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow-x: hidden;
  width: 300px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  transform-style: preserve-3d;
}

.card:hover {
  transform: translateY(-15px) rotateX(10deg) rotateY(15deg);
  box-shadow: 0px 10px 20px rgba(1, 25, 30, 0.3), 
              0px 0px 20px rgba(84, 0, 0, 0.908);
}

.card-image {
  height: 250px; /* Set the height of the container */
  width: 100%; /* Ensure it takes the full width of the parent card */
  overflow: hidden; /* Prevents any overflow of the image */
  object-fit: cover; /* Ensures the image covers the div without distortion */
}

.card-image img {
  width: 100%; /* Ensures the image covers the full width */
  height: 100%; /* Ensures the image covers the full height */
}



.card-content {
  padding: 15px;
  text-align: center;
}

.card-content h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #0f4c75;
}

.card-content p {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.card-content button {
  background-color: #0f4c75;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

.card-content button:hover {
  background-color: #3282b8;
}

  /* Responsive Styles */
  @media (max-width: 768px) {
    .card {
      max-width: 320px;
    }

    .card-image {
      height: 180px; /* Adjust image height for tablets */
    }
  }

  @media (max-width: 480px) {
    .card{
      max-width: 250px;
    }

    .uniHeading h1{
       font-size: 18px;
      }

    
    .card-image {
      height: 150px; /* Smaller height for mobile devices */
    }

    .card-content h2 {
      font-size: 1.2rem; /* Adjust heading size */
    }

    .card-content p {
      font-size: 0.8rem; /* Adjust paragraph size */
    }
  }