@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Righteous&display=swap');

:root {
	--bg-deep: #0A0A0A;
	--neon-green: #CCFF00;
	--neon-green: #00D1FF;
	--neon-blue: #00D1FF;
	--text-white: #FFFFFF;
	--text-gray: #A1A1AA;
	--text-offwhite:#bebebe;
	--card-bg:rgba(255, 255, 255, 0.05);


	/* GLASS UI VARIABLES */
	--glass-bg: rgba(255, 255, 255, 0.03);
	--glass-border: 1px solid rgba(255, 255, 255, 0.1);
	--glass-blur: blur(20px);
	--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
	--second-clr:#f23849;
	--third-clr:#fcbd56;
}

body {
	background-color: var(--bg-deep);
	color: var(--text-white);
	font-family: 'Inter', sans-serif;
	font-family: "Righteous", sans-serif;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	margin: 0;
	overflow-x: hidden !important;
}



/* --- HYBRID BACKGROUND (Image + Mesh) --- */
.mesh-background {
	position: fixed;
	top: 0; left: 0; width: 100vw; height: 100vh;
	z-index: -1;
	background: 
	/* Neon Blobs */
	radial-gradient(circle at 10% 20%, rgba(204, 255, 0, 0.15), transparent 40%),
	radial-gradient(circle at 90% 80%, rgba(0, 209, 255, 0.15), transparent 40%),
	/* Dark Overlay */
	linear-gradient(to bottom, rgba(5,5,5,0.6), rgba(5,5,5,0.3)),
	/* Gym Image */
	url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=1470&auto=format&fit=crop');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.moduleSec {
    /*position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1;*/
    background: 
    /* Neon Blobs */
    radial-gradient(circle at 10% 20%, rgba(204, 255, 0, 0.15), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0, 209, 255, 0.15), transparent 40%),
    /* Dark Overlay */
    linear-gradient(to bottom, rgba(5,5,5,0.7), rgba(5,5,5,0.95)),
    /* Gym Image */
    url('https://images.unsplash.com/photo-1604480133080-602261a680df?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* --- HERO SECTION --- */
.hero-section {
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 100px 20px 50px;
	text-align: center;
}
.hero-content { max-width: 900px; z-index: 2; }

.hero-tag { 
	color: var(--neon-green); 
	font-weight: 700; 
	letter-spacing: 3px; 
	text-transform: uppercase; 
	font-size: 14px; 
	display: block; 
	margin-bottom: 15px; 
}

.hero-title { 
	font-family: 'Archivo Black', sans-serif;
	font-family: "Righteous", sans-serif; 
	font-size: 46px; 
	line-height: 0.9; 
	text-transform: uppercase; 
	margin: 0 0 30px; 
	text-shadow: 0 10px 30px rgba(0,0,0,0.8); 
}
.hero-title span{
	color:var(--second-clr);
} 


.hero-desc { 
	font-family: "Poppins", sans-serif;
	font-size: 18px; color: #ccc; 
	max-width: 650px; 
	margin: 0 auto 40px; 
	line-height: 1.6; 
}

/* --- BUTTONS --- */
.btn-neon {
	padding: 18px 45px; background-color: var(--neon-green); color: #000;
	font-family: 'Archivo Black', sans-serif; text-transform: uppercase; text-decoration: none;
	font-size: 16px; border-radius: 4px; transition: 0.3s; border: 1px solid var(--neon-green);
}
.btn-neon:hover { box-shadow: 0 0 30px rgba(204, 255, 0, 0.5); transform: scale(1.05); }

.btn-glass {
	padding: 18px 45px; background: rgba(255,255,255,0.05); backdrop-filter: blur(5px);
	color: var(--text-white); font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
	text-decoration: none; font-size: 16px; border: 1px solid rgba(255,255,255,0.2); margin-left: 20px;
	border-radius: 4px; transition: 0.3s;
}
.welcomeSec{
	background: rgba(0,0,0,.7);
	height: 100%;
	/*height: 100vh;*/
}



.btn-glass:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

/* --- GLASS CARDS --- */
.section-container { max-width: 1200px; margin: 0 auto; padding: 80px 20px; }
.section-title {
	/*font-family: 'Archivo Black', sans-serif; */
	font-family: "Righteous", sans-serif; 

	font-size: 2rem; 
	padding-bottom: 0;
	text-align: center;
	line-height: 1.5;
	font-weight:300;
	margin-bottom: 0;
	/*color: var(--second-clr);*/

	/*text-transform: uppercase; */
}
.section-title span {color: var(--second-clr);}
.section-desc{text-align: center;width: 100%;padding-bottom:30px;font-family: "Poppins", sans-serif; }
/*.section-title span { color: var(--neon-green); }*/

.glass-grid 
{ 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(300px, 300px)); 
	gap: 50px;
	height: auto; 
	justify-content: center;
	margin-top: 50px;
}

.glass-card {
	background: var(--glass-bg); 
	backdrop-filter: var(--glass-blur); 
	-webkit-backdrop-filter: var(--glass-blur);
	border: var(--glass-border); 
	box-shadow: var(--glass-shadow);
	border-radius: 10px; 
	padding: 30px; 
	transition: 0.4s; 
	position: relative; 
	/*overflow: hidden;*/
}

.glass-card:hover { /*
    transform: translateY(-8px); 
    border-color: var(--neon-green); */
    background: rgba(255, 255, 255, 0.08); 
}
.glass-card::before {
	content: '';
	position: absolute;
	width: 90%;
	height: 90%;
	left: 50%;
	top: 50%;
	opacity: 0;
	margin-top: 40px;
	transform: translate(-50%, -50%);
	border: 3px solid #f23849;
	transition: .4s ease-in-out;
	pointer-events: none;
	border-radius: 5px; 

}
.glass-card:hover::before{
	opacity:1;
	margin-top: 0;

}
.welcomeSec .glass-grid{
	grid-template-columns: repeat(auto-fit, minmax(250px, 250px)); 
	justify-content: center;
	gap: 30px;

}
.welcomeSec .glass-grid > *:nth-child(even) {
	transform: translateY(-30px);
}
.welcomeSec .glass-card {
	border-radius: 0;
	/*background: var(--card-bg); */
}
.moduleSec .glass-grid 
{ 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(450px, 450px)); 
	gap:0;
	height: 350px; 
	justify-content: center;
	margin-top: 50px;
}
.moduleSec .glass-card
{ 

	border-radius: 0; 
	padding: 0; 
	transition: 0.4s; 
	position: relative; 
	margin: 0;
	padding: 30px;
}
.moduleSec .glass-card::before
{ 
	width: 105%;
	height: 100%;
	top: 50%;
	left: 10%;
	opacity: 1;
	margin-top: 30px;
	transform: translate(-20%, -50%);
	border: 5px solid #f23849;
	transition: .4s ease-in-out;
	pointer-events: none;
	border-radius: 0; 
}
.moduleSec .module_card::before {
	content: none;

}
.module_card{
	padding:0 !important;
}
.moduleSec .card-title{
	text-transform: none;
	font-size:35px;
	line-height: 1;
	margin-top: 20px;
}
.moduleSec .card-title span{
	color: var(--second-clr);
	font-size:30px;
}
.moduleSec .card-desc{
	color: var(--text-white);
	font-size: 15px;
	line-height: 1.8;
	text-align: justify;

}
.moduleSec .card-desc span{
	color: var(--neon-green);
	font-size: 16px;
	font-weight: 600;
}
.inventortSec {
	background: rgba(0,0,0,.7);
	height: 100%;
}
.inventortSec .glass-grid 
{ 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(250px, 250px)); 
	gap: 30px;
	height: 100%; 
	justify-content: center;
	margin-top: 50px;
}

.inventortSec .glass-grid > *:nth-child(even) {
	transform: translateY(-30px);
}
.inventortSec .glass-card{
	height: 300px;
	margin-bottom: 30px;
}
.card-title 
{ 
	/*font-family: 'Archivo Black', */
	font-family: "Righteous", sans-serif; 
	letter-spacing: 1.5px;
	sans-serif; font-size: 20px; 
	margin: 0 0 0px; 
	text-transform: uppercase;
}
.card-desc 
{ 
	color: var(--text-gray); 
	font-size: 13px; 
	/*margin-bottom: 20px; */
	font-family: "Poppins", sans-serif;
	line-height: 1.5;
}
.link-arrow 
{ 
	color: #fff; 
	text-decoration: none; 
	font-weight: 700; 
	text-transform: uppercase; 
	font-size: 13px; 
	letter-spacing: 1px; 
	background: var(--second-clr);
	padding: 5px 10px;
	display: inline-block;
	font-family: "Poppins", sans-serif;
	font-weight: normal;
	border: 2px solid transparent;
}

.link-arrow:hover{
	transform: translateX(20%);
} 

.link-arrow i{
	display: none;
	opacity: 0;
	transition: .3s ease;
}

.link-arrow:hover i{

	opacity: 1;
	display: inline-block;
	transition: .3s ease;
}

/* Helper for the Header Section with "View All" link */
.section-header-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 50px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	padding-bottom: 15px;
}

.section-title {
	margin-bottom: 0; /* Remove bottom margin since container handles it */
}

.view-all-link {
	color: var(--text-white);
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: 0.3s;
}
.section_bottom
{

	background: rgba(255,255,255,0.05); backdrop-filter: blur(5px);
	margin-top: 20px;
	padding: 10px;
	border-radius: 16px; 



}
.bottom_link 
{
	text-align: center !important;
	width: 100%;
	font-size: 30px;
	font-family: 'Archivo Black', sans-serif;
	font-family: "Righteous", sans-serif;

	padding:0;
	margin: 0;
	transition: .5s ease;

}
.view-all-link i{
	/*display: none;*/
	transition: .5s ease;
	transition-delay: 0.2s;
	opacity: 0;

}
.view-all-link:hover i{
	opacity: 1;

	transition: .5s ease;
	transition-delay: 0.2s;

}
.view-all-link:hover {
	color: var(--second-clr);
	transform: translateX(-15px);
	transition: .5s ease;

}

/* --- PRODUCT STYLES --- */
.glass-img-container { 
	width: 100%; 
	height: 150px; 
	margin-bottom: 25px; 
	overflow: hidden; 
	border-radius: 8px; 
	/*border: 1px solid rgba(255,255,255,0.1); */
}
.glass-img { 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	opacity: 0.9; 
	transition: 0.6s;
}
.glass-card:hover .glass-img { 
	opacity: 1; 
	transform: scale(1.1); 
}
.moduleSec .glass-img-container { 
	width: 100%; 
	height: auto; 
	margin-bottom: 0 !important; 
	overflow: hidden; 
	border-radius: 0; 
	padding: 0;
	/*border: 1px solid rgba(255,255,255,0.1); */
}
.moduleSec .glass-img { 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	object-position: center;
	opacity: 1; 
	transition: 0.6s;
}
.price-tag { 
	color: var(--neon-green);
	font-family: "Poppins", sans-serif;
	font-weight: normal; 
	font-weight: 500; 
	font-size: 20px; 
	display: block; 
	margin-bottom: 20px; 
	text-shadow: 0 0 10px rgba(204, 255, 0, 0.3); 
}


.postsSec {
	background: 
	/* Neon Blobs */
	radial-gradient(circle at 10% 20%, rgba(204, 255, 0, 0.15), transparent 40%),
	radial-gradient(circle at 90% 80%, rgba(0, 209, 255, 0.15), transparent 40%),
	/* Dark Overlay */
	linear-gradient(to bottom, rgba(5,5,5,0.7), rgba(5,5,5,0.95)),
	/* Gym Image */
	url('https://images.unsplash.com/photo-1604480133080-602261a680df?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;

	height: 100%;
}
.postsSec .glass-grid 
{ 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(500px, 500px)); 
	gap: 50px;
	height: auto; 
	justify-content: center;
	margin-top: 50px;
}

/*
.postsSec .glass-grid > *:nth-child(even) {
    transform: translateY(-30px);
}*/
.postsSec .glass-card{
	background: var(--glass-bg); 
	backdrop-filter: var(--glass-blur); 
	-webkit-backdrop-filter: var(--glass-blur);
	border: var(--glass-border); 
	box-shadow: var(--glass-shadow);
	border-radius: 0px; 
	padding: 0; 
	transition: 0.3s ease; 
	position: relative; 
	height: 250px;
	display: flex;
}
.postsSec .card_blogData{

	padding: 20px;}
.postsSec .card_blogData span{	
	display: flex; 
	justify-content: space-between; 
	margin-bottom: 0px; 
	font-size: 12px; 
	color: var(--neon-blue); 
	text-transform: uppercase; 
	letter-spacing: 1px;
}
.postsSec .glass-card:hover .card_blogData{

	background: #eee;
	transition: .5s ease;

}
.postsSec .glass-card:hover .card_blogData .card-title{

	color: #4d4d4d;

}
.postsSec .glass-card:hover .card_blogData .card-desc{

	color: #4d4d4d;

}
.postsSec .glass-card:hover .card_blogData span{
	
	color: var(--second-clr);

}
.postsSec .glass-img-container{
	border-radius: 0;
}

.postsSec .glass-card::before {
	content: none;
}


@media (max-width: 768px) {
	.hero-title { font-size: 50px; }
	.btn-glass { margin-left: 0; margin-top: 15px; display: block; text-align: center; }
}



/* --- BLOG DETAIL 3-COLUMN LAYOUT --- */
.blog-layout-grid {
	display: grid;
	/*grid-template-columns: 80px 1fr 350px; */   
	grid-template-columns: 40px minmax(0, 1fr) 250px !important;
	gap: 15px !important;
	max-width: 1400px;
	margin: 0 auto;
	align-items: start; /* Crucial for sticky to work */
}

/* 1. LEFT SIDEBAR (Socials) */
.left-sticky-bar {
	position: sticky;
	top: 150px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
}
.social-icon-box {
	width: 50px; height: 50px;
	border-radius: 50%;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border: 1px solid var(--second-clr);
	display: flex; align-items: center; justify-content: center;
	color: var(--text-gray);
	font-size: 20px; transition: 0.3s; cursor: pointer;
	backdrop-filter: blur(5px);
}
.social-icon-box:hover { 
	background:#fafafa; 
	color: var(--second-clr); 
	box-shadow: 0 0 25px var(--neon-green); 
	border-color: transparent;
}

/* 2. CENTER CONTENT */
/*.article-container { width: 100%; padding: 40px; } */
/* Override previous width */

/* Live Search */
.live-search-container { position: relative; margin-bottom: 30px; }
.live-search-input {
	width: 100%; padding: 15px 20px;
	background: rgba(0,0,0,0.5); border: 1px solid var(--neon-green);
	color: #fff; border-radius: 30px; outline: none;
	font-family: 'Inter', sans-serif;
}

/* Subscription Box */
.sub-box {
	background: linear-gradient(45deg, rgba(204, 255, 0, 0.1), transparent);
	border: 1px solid var(--neon-green); padding: 30px; border-radius: 12px;
	margin: 40px 0; text-align: center;
}
.sub-input {
	padding: 12px; width: 60%; background: #000; border: 1px solid #333; color: white;
	margin-right: 10px; border-radius: 4px;
}

/* Horizontal Swiper (CSS Only) */
.swiper-container {
	display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px;
	scroll-snap-type: x mandatory;
}
.swiper-card {
	min-width: 280px; scroll-snap-align: start;
	background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
	border-radius: 12px; padding: 15px;
}

/* 3. RIGHT SIDEBAR */
.right-sticky-sidebar {
	position: sticky;
	top: 120px;
}
.sidebar-widget {
	background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
	padding: 25px; margin-bottom: 30px;
}
.widget-title {
	font-family: 'Archivo Black', sans-serif; font-size: 16px; color: #fff;
	margin-bottom: 20px; text-transform: uppercase; border-left: 3px solid var(--neon-green); padding-left: 10px;
}
.mini-post-item {
	display: flex; gap: 15px; margin-bottom: 15px; align-items: center; text-decoration: none;
}
.mini-post-img { width: 60px; height: 60px; border-radius:0px; object-fit: cover; }
.mini-post-info h4 { font-size: 14px; margin: 0 0 5px; color: #eee; }
.mini-post-info span { font-size: 11px; color: var(--neon-green); }

/* Comment Section */
.comment-box { width: 100%; background: rgba(255,255,255,0.05); border: none; padding: 15px; color: white; margin-bottom: 15px; border-radius: 8px; }

/* Responsive */
@media (max-width: 1100px) {
	.blog-layout-grid { grid-template-columns: 1fr; }
	.left-sticky-bar { display: none; } /* Hide social sidebar on mobile */
	.right-sticky-sidebar { display: none; } /* Hide right sidebar on mobile for now, or move to bottom */
}




/* 1. FIX THE GRID BLOWOUT */
.blog-layout-grid {
	display: grid;
	/* ✅ CHANGE '1fr' TO 'minmax(0, 1fr)' */
	/* This forces the center column to shrink-wrap instead of exploding */
	/*grid-template-columns: 80px minmax(0, 1fr) 350px; */
	gap: 40px;
	max-width: 1400px;
	margin: 0 auto;
	align-items: start;
	padding: 0 20px; /* Add safety padding on edges */
	box-sizing: border-box; /* Ensure padding doesn't increase width */
}

/* 2. FIX THE CONTAINER PADDING */
.article-container { 
	width: 100%; 
	padding: 0; 
	/* ✅ CRITICAL: Include padding in width calculation */
	box-sizing: border-box; 

	background: rgba(10, 10, 10, 0.3);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
	overflow: hidden; /* Cut off anything sticking out */
}
.article-title {
	/*font-family: 'Archivo Black', sans-serif; */
	font-family: "Righteous", sans-serif; 

	font-size: 2rem; 
	padding-bottom: 0;
	text-align: center;
	line-height: 1.5;
	font-weight:300;
	margin-bottom: 0;
	/*color: var(--second-clr);*/

	/*text-transform: uppercase; */
}

/* 3. FORCE IMAGES TO BEHAVE */
.article-img-full, 
.article-content img {
	width: 100%; 
	object-fit: cover;
	height: 400px;    /* Maintain aspect ratio */
	display: block;  /* Remove bottom gap */
	/*border-radius: ;*/
	margin-bottom: 10px;
	object-position:center;
}
p{
	color: var(--text-offwhite);
}
.article-meta {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	z-index: 2;
	font-size: 14px;
}
.article-meta span{
	margin-right: 30px;
}
.article-meta span i{
	margin-right: 10px;
	color: var(--second-clr);

}
.article-data {
	padding: 0 2rem;
} 


/* 4. RESPONSIVE SAFETY CHECK */
@media (max-width: 1100px) {
	.blog-layout-grid {
		display: flex; /* Switch to stack on smaller screens */
		flex-direction: column;
	}

	.left-sticky-bar, 
	.right-sticky-sidebar { 
		display: none; /* Hide sidebars on tablet/mobile for now */
	}

	.article-container {
		padding: 20px; /* Smaller padding on mobile */
	}
}