.glassmorphism {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 15px;
	box-shadow: 0 4px 10px rgba(0, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	color: cyan;
}

.glassmorphism:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 15px rgba(0, 255, 255, 0.5);
}

.neon-border {
	border: 2px solid rgba(0, 255, 255, 0.7);
	box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}



/* Futuristic Container Styling */
.content-container {
	background: rgba(0, 0, 0, 0.6);
	/* Dark glass effect */
	backdrop-filter: blur(10px);
	padding: 20px;
	margin-top: 80px;
	text-align: center;
	font-size: 18px;
	color: #00ffcc;
	/* Neon cyan */
	border-radius: 12px;
	box-shadow: 0 0 15px rgba(0, 255, 204, 0.8);
	/* Glowing neon effect */
	border: 1px solid rgba(0, 255, 204, 0.4);
	transition: all 0.3s ease-in-out;
	left: 0;
}

.content-container:hover {
	box-shadow: 0 0 25px rgba(0, 255, 204, 1);
}

.content-container h1 {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #ff00ff;
	/* Neon magenta */
	text-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
}

.content-container h4 {
	font-size: 22px;
	font-weight: normal;
	color: #00ffff;
	/* Light neon blue */
	text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
}

/* Futuristic Mini Search Box Container */
.mini-search-box-container {
	display: flex;
	justify-content: center;
	gap: 25px;
	background: linear-gradient(180deg, #000428, #004e92);
	/* Dark cyberpunk gradient */
	padding: 20px;
	flex-wrap: wrap;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

/* Each Box Container */
.mini-search-box-container div {
	display: flex;
}

/* Futuristic Search Box */
.mini-search-box {
	width: 120px;
	height: 120px;
	background: rgba(0, 0, 0, 0.6);
	/* Glass effect */
	backdrop-filter: blur(10px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	cursor: pointer;
	transition: transform 0.3s, box-shadow 0.3s;
	text-align: center;
	text-decoration: none;
	border: 1px solid rgba(0, 255, 204, 0.4);
	box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
}

/* Hover Effect */
.mini-search-box:hover {
	transform: scale(1.1);
	box-shadow: 0 0 20px rgba(0, 255, 204, 1);
	background: rgba(0, 255, 255, 0.2);
}

/* Font Awesome Icon Styling */
.mini-search-box i {
	font-size: 28px;
	color: #00ffcc;
	/* Neon cyan */
	text-shadow: 0 0 10px rgba(0, 255, 204, 0.8);
}

/* Image Styling */
.mini-search-box img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

/* Text Below Image */
.mini-search-box span {
	font-size: 16px;
	color: #ff007f;
	/* Neon pink */
	margin-top: 8px;
	text-shadow: 0 0 8px rgba(255, 0, 127, 0.8);
	font-weight: bold;
}


/* Three Block Section - Futuristic Design */
.three-blocks-section {
	background: linear-gradient(135deg, #1a1a2e, #16213e);
	/* Dark cyberpunk gradient */
	display: flex;
	justify-content: space-between;
	padding: 30px;
	gap: 20px;
	margin-top: -10px;
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
	/* Neon glow effect */
}

/* Individual Block Styling */
.block {
	flex: 1;
	background: rgba(0, 0, 0, 0.6);
	/* Semi-transparent glassmorphism effect */
	padding: 25px;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 255, 255, 0.3);
	color: cyan;
}

/* Icon Styling */
.block i {
	font-size: 50px;
	color: #00eaff;
	/* Neon cyan */
	margin-bottom: 15px;
	transition: color 0.3s ease-in-out;
}

/* Block Hover Effect */
.block:hover {
	transform: translateY(-5px);
	box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
}

.block:hover i {
	color: #ff00ff;
	/* Neon magenta on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
	.three-blocks-section {
		flex-direction: column;
		align-items: center;
	}

	.block {
		width: 90%;
		max-width: 350px;
	}
}

/* Free Template Section - Futuristic Design */
 .free-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 1.5rem;
    }

    .free-header-text {
        flex: 1 1 100%;
        text-align: center;
    }

    .view-more-btn-free {
        padding: 8px 20px;
        background: transparent;
        border: 1px solid #00f2ff;
        color: #00f2ff;
        font-family: 'Orbitron', sans-serif;
        font-weight: bold;
        text-decoration: none;
        border-radius: 8px;
        box-shadow: 0 0 10px #00f2ff44;
        transition: 0.3s;
        white-space: nowrap;
    }

    .view-more-btn-free:hover {
        background: #00f2ff22;
        color: #fff;
    }

    @media (min-width: 640px) {
        .free-header-text {
            flex: 1;
            text-align: left;
        }

        .free-header {
            flex-wrap: nowrap;
        }
    }


/* Free Trending Template Section - Futuristic Design */
.free-template-container {
	background: linear-gradient(135deg, #0a0a0a, #1a1a2e);
	/* Dark cyberpunk gradient */
	padding: 20px;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
	/* Neon glow effect */
}

/* Section Titles */
.free-template-container h2 {
	font-weight: bold;
	color: #00eaff;
	/* Neon cyan */
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.free-template-container h4 {
	color: #b2b2b2;
	/* Futuristic subtle text */
	margin-bottom: 20px;
}

/* Template Row */
.template-row {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
	margin-top: 20px;
}

/* Wrapper for View More Button & Templates */
.template-wrapper {
	position: relative;
}


/* Template Box - Glassmorphism Effect */
.template-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 225px;
	background: rgba(255, 255, 255, 0.1);
	/* Transparent futuristic glass */
	padding: 10px;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
	text-decoration: none;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	position: relative;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 255, 255, 0.3);
}

/* Hover Effect */
.template-box:hover {
	transform: scale(1.05);
	box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
}

/* Template Title */
.template-title {
	font-size: 14px;
	font-weight: bold;
	color: #00eaff;
	/* Neon cyan */
	margin: 8px 0;
}

/* HTML Icon */
.template-box i {
	font-size: 20px;
	color: #ff00ff;
	/* Neon magenta */
	margin-bottom: 8px;
	transition: color 0.3s ease-in-out;
}

.template-box:hover i {
	color: #00eaff;
	/* Change to cyan on hover */
}

/* Template Images */
.template-box img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 0.3s ease-in-out;
}

.template-box:hover img {
	transform: scale(1.05);
}

/* Live Demo Button */
.live-demo-btn {
	padding: 10px 14px;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
	background: linear-gradient(90deg, #007bff, #00eaff);
	font-weight: bold;
	letter-spacing: 1px;
}

.live-demo-btn:hover {
	background: linear-gradient(90deg, #0056b3, #00cfff);
	transform: scale(1.05);
}

/* Download Count */
.download-count {
	font-size: 12px;
	color: #b2b2b2;
	margin-top: 5px;
}

/* View More Button */
.view-more-btn {
	position: absolute;
	top: -60px;
	right: 0;
	padding: 10px 15px;
	background: linear-gradient(90deg, #ff6600, #ff00ff);
	color: cyan;
	border-radius: 5px;
	text-decoration: none;
	font-weight: bold;
	transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.view-more-btn:hover {
	background: linear-gradient(90deg, #cc5200, #ff0099);
	transform: scale(1.1);
}

/* Button Section */
.button-section {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

/* "Free" Label */
.free-label {
	background: linear-gradient(90deg, #28a745, #00ff00);
	color: white;
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: bold;
}

/* "Free Template" Overlay */
.free-label-overlay {
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(40, 167, 69, 0.85);
	color: white;
	font-size: 14px;
	padding: 10px 12px;
	border-radius: 5px;
	font-weight: bold;
	width: 100px;
}

/* Responsive Design */
@media (max-width: 768px) {
	.template-row {
		flex-direction: column;
		align-items: center;
	}

	.template-box {
		width: 90%;
		max-width: 350px;
	}
}