/*src/components/Main Page.saz.css*/
.card-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px; /* Adds space between cards */
	justify-content: center;
	margin: 0;
  }
  
  .card-container .card {
	width: 100%;
	max-width: 300px; /* Limits the card width on larger screens */
	background-color: #222222;
  }
  
  .card-container .card a {
	padding: 20px;
	width: 100%;
	height: 250px;
	border: 2px solid black;
	background: white;
	text-decoration: none;
	color: black;
	display: block;
	transition: 0.25s ease;
  }
  
  .card-container .card:hover a {
	padding: 20px;
	border-color: #5bc0eb;
	height: 550px;
	margin-bottom: 4%;
  }
  
  .card-container .card a:hover {
	transform: translate(-10px, -10px);
  }
  
  .card-container .card a:hover .card--display {
	display: none;
  }
  
  .card-container .card a:hover .card--hover {
	display: block;
  }
  
  .card-container .card a .card--display i {
	font-size: 50px; /* Smaller font size for smaller screens */
	margin-top: 100px;
  }
  
  .card-container .card a .card--display h2 {
	margin: 10px 0 0;
  }
  
  .card-container .card a .card--hover {
	display: none;
  }
  
  .card-container .card a .card--hover h2 {
	margin: 10px 0;
  }
  
  .card-container .card a .card--hover p {
	font-weight: normal;
	line-height: 1.4;
  }
  
  .card-container .card a .card--hover p.link {
	margin: 10px 0 0;
	font-weight: bold;
	color: #5bc0eb;
  }
  
  .card-container .card .card--border {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border: 2px dashed black;
	z-index: -1;
  }
  
  .card-container .card.card--dark a {
	color: white;
	background-color: black;
	border-color: black;
  }
  
  .card-container .card.card--dark a .card--hover .link {
	color: #fde74c;
  }
  
  .titler {
	font-size: 30px; /* Adjust font size */
  }
  
  .material-icons {
	color: blue;
	text-decoration: double;
  }
  
  /* Media Queries for responsiveness */
  @media (max-width: 768px) {
	.card-container .card a {
	  height: auto; /* Adjust height for smaller screens */
	  padding: 15px;
	}
  
	.card-container .card a .card--display i {
	  font-size: 24px; /* Adjust icon size */
	}
  
	.card-container .card a .card--display h2,
	.card-container .card a .card--hover h2 {
	  font-size: 18px; /* Adjust heading font size */
	}
  }
  
  @media (max-width: 480px) {
	.card-container {
	  flex-direction: column;
	  align-items: center;
	}
  
	.card-container .card {
	  width: 100%; /* Full width for very small screens */
	}

	.card-container .card a:hover .card--hover {
		display: block;
		margin-top: 5%;
		margin-bottom: 5%;
	  }
  
	.card-container .card a {
	  height: 150px; /* Adjust height for very small screens */
	  padding: 10px;
	}

	.card-container .card a .card--hover p {
		font-weight: small;
		line-height: 1.4;
	  }
  
	.card-container .card a .card--display i {
	  font-size: 16px; /* Adjust icon size */
	}
  
	.card-container .card a .card--display h2,
	.card-container .card a .card--hover h2 {
	  font-size: 16px; /* Adjust heading font size */
	  font-weight: 700;
	}

	.card-container .card:hover a {
		padding: 20px;
		border-color: #5bc0eb;
		height: 500px;
		margin-bottom: 4%;
	  }
  }