/* Responsive layout for gallery cards */
@media (max-width: 991.98px) {
	.gallery-title {
		font-size: 2rem;
		margin-bottom: 2rem !important;
	}
	.rect-card {
		min-height: 160px;
		margin-bottom: 1.5rem;
	}
	.icon-bg {
		width: 56px;
		height: 56px;
	}
}

@media (max-width: 767.98px) {
	.gallery-title {
		font-size: 1.5rem;
		margin-bottom: 1.2rem !important;
	}
	.rect-card {
		min-height: 120px;
		margin-bottom: 1rem;
	}
	.icon-bg {
		width: 44px;
		height: 44px;
	}
	.container {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

@media (max-width: 575.98px) {
	.gallery-title {
		font-size: 1.1rem;
		margin-bottom: 0.7rem !important;
	}
	.rect-card {
		min-height: 90px;
		margin-bottom: 0.7rem;
		padding: 0.5rem 0.2rem;
	}
	.icon-bg {
		width: 32px;
		height: 32px;
	}
	.card-title {
		font-size: 1rem;
	}
}
/* Animated background for index page */
.animated-bg {
	background: linear-gradient(120deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
	background-size: 200% 200%;
	animation: gradientMove 8s ease-in-out infinite;
}
@keyframes gradientMove {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

.gallery-title {
	text-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 1.5px 0 #fff;
	letter-spacing: 2px;
}

/* Card animation and hover effect */
.gallery-card {
	cursor: pointer;
	transition: box-shadow 0.3s, transform 0.3s, background 0.3s;
	min-height: 180px;
	border-radius: 1rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	background: rgba(255,255,255,0.92);
	border: none;
	position: relative;
	overflow: hidden;
}
.gallery-card:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,0.18);
	background: rgba(255,255,255,1);
	transform: translateY(-6px) scale(1.04) rotate(-1deg);
	z-index: 2;
}
.gallery-card .fa-3x {
	color: #0d6efd;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,0.10));
}
.icon-bg {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.bg-image { background: linear-gradient(135deg, #6dd5ed 0%, #2193b0 100%); color: #fff; }
.bg-photo { background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); color: #fff; }
.bg-audio { background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%); color: #fff; }
.bg-document { background: linear-gradient(135deg, #e96443 0%, #904e95 100%); color: #fff; }
.bg-video { background: linear-gradient(135deg, #fc5c7d 0%, #6a82fb 100%); color: #fff; }
/* Rectangle card and colored icon styles */
.rect-card {
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 1.2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.07);
	transition: box-shadow 0.2s, transform 0.2s;
	border: none;
}
.rect-card:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,0.18);
	transform: translateY(-4px) scale(1.03);
}
.icon-bg {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg-image { background: linear-gradient(135deg, #6dd5ed 0%, #2193b0 100%); color: #fff; }
.bg-photo { background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); color: #fff; }
.bg-audio { background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%); color: #fff; }
.bg-document { background: linear-gradient(135deg, #e96443 0%, #904e95 100%); color: #fff; }
.bg-video { background: linear-gradient(135deg, #fc5c7d 0%, #6a82fb 100%); color: #fff; }
/* Gallery card custom styles */
.gallery-card {
	cursor: pointer;
	transition: box-shadow 0.2s;
	min-height: 180px;
	border-radius: 1rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.gallery-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
	background: #f8f9fa;
}
.gallery-card .fa-3x {
	color: #0d6efd;
}
.media-list {
	margin-top: 0.5rem;
}