/* Custom styles for the temple cards */
.temple-card {
  background-color: white;
  color: black;
  width: 80%; /* Adjust the width as needed */
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Default to stack content vertically for mobile */
  align-items: center; /* Vertically center align content by default */
}

.temple-card img {
  max-width: 100%; /* Make the image fill the card width by default */
  border-radius: 10px; /* Apply rounded corners */
  margin-bottom: 20px; /* Add spacing between image and content by default */
}

.card-separator {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  border: none;
  margin: 20px 0;
}

.temple-card:hover {
  background-color: black;
  color: white;
  cursor: pointer;
}

.card-subtitle {
  color: #8a9a5b;
}

.btn-primary {
  background-color: #8a9a5b;
  border: none;
}

/* Desktop-specific styles */
@media (min-width: 769px) {
  .temple-card {
    width: 100%; /* Adjust the width as needed */
    flex-direction: row; /* Arrange content in a row for desktop */
    align-items: center; /* Align items to the center for desktop */
  }

  .temple-card img {
    max-width: 40%; /* Limit the width of the image for desktop */
    margin-bottom: 0; /* Remove spacing between image and content for desktop */
  }
}

.research-title {
  margin-top: 40px; /* Add some margin to create spacing */
  text-align: center; /* Center-align the title */
  color: #333; /* Adjust the color as needed */
  font-size: 28px; /* Adjust the font size as needed */
  
}