@charset "utf-8";

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body,html {
		cursor:url(/images/cursor.png) 10 5,auto;
		}
		
	/* Select color */
	::-moz-selection { /* Firefox */
	  color: white;
	  background: rgb(255 103 2 / 20%);
	}

	::selection {
	  color: white;
	  background: rgb(255 103 2 / 20%);
	}
	
	@keyframes cardGlow {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.7; transform: translateX(-50%) scale(1.05); }
	}
		
	body {
		font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
		min-height: 100vh;
		overflow-x: hidden;

		background:
			radial-gradient(circle at center, 
				#331a00 0%,       
				#1a0e00 70%,      
				#120a00 100%      
			),
			linear-gradient(135deg,
				#1a0e00 0%,   
				#261300 25%, 
				#331a00 50%,  
				#120a00 75%,  
				#120a00 100%
			);
		background-attachment: fixed;
		background-size: cover;
	}
	/* Glass container styles */
	.glass {
		background: #150b02;
		border: 2px solid rgb(255 103 2 / 20%);
		border-radius: 20px;
		box-shadow: 0 2px 4px rgb(188 88 0 / 20%);
		transition: all 0.3s 
	ease;
		position: relative;
		overflow: hidden;
	}
	.glass:hover {
		background: #170c03;
		transform: translateY(-5px);
		box-shadow: 0 2px 6px rgb(255 229 206 / 20%);
	}
	/* Header styles */
	header {
		padding: 20px;
	}
	.container {
		max-width: 1200px;
		margin: 0 auto;
	}
	/* Navigation styles */
	nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30px 45px;
	}
	.pdescription {
		font-size:1rem!important;
		margin-bottom: 1px!important;
	}
		.logo {
		color: white;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		gap: 15px;
	}
	.logo-icon {
		width: 64px;
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.logo-text {
		display: flex;
		flex-direction: column;
		line-height: 1;
	}

	.logo-title {
		font-size: 32px;
		font-weight: bold;
	}

	.logo-version {
		font-size: 11px;
		font-weight: normal;
		align-self: flex-end;
		opacity: 0.8;
		margin-top: 4px;
	}
	.logo:hover {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
    transition: all 0.3s ease;
	}
	.nav-links {
		display: flex;
		gap: 30px;
	}
	.nav-links a {
		color: rgba(255, 255, 255, 1);
		text-decoration: none;
		font-weight: 500;
		transition: all 0.3s ease;
		padding: 12px 24px 13px 24px;
		border-radius: 10px;
		cursor: pointer;
		font-size: 17px;
		border-bottom: 2px solid rgb(255 103 2 / 20%);
		
	}
	.nav-links a:hover,
	.nav-links a.active {
		color: white;
		background: rgba(255, 255, 255, 0.1);
		text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
	}
	/* Page system */
	.page {
		display: none;
		min-height: 100vh;
		padding: 40px 20px 20px;
	}
	.page.active {
		display: block;
	}
	/* Content wrapper to contain page content */
	.content-wrapper {
		min-height: calc(100vh - 300px);
	}
	/* Home page styles */
	.hero {
		display: grid;
		gap: 40px;
		align-items: center;
		padding: 60px 40px;
		margin-bottom: 40px;
	}

	.hero2 {
		display: grid;
		align-items: center;
		padding: 60px 40px;
		margin-bottom: 40px;
	}
	.hero-image {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.hero-image img {
		width: 100%;
		max-width: 440px;
		height: auto;
		border-radius: 20px;
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
	}
	.hero-content {
		text-align: center;
	}
	.hero h1 {
		font-size: 1.8rem;
		color: white;
		text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
		line-height: 1;
		text-align: center;
	}
	.hero p {
		font-size: 1.2rem;
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 24px;
		line-height: 1.3;
	}

	.underline {  
		text-decoration: underline;
	}

	.hero2 a:hover {
		color: white;   
		font-weight: bold;
		text-decoration: underline;
	}
	.hero2 h1 {
		font-size: 1.8rem;
		color: white;
		text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
		line-height: 1;
	}
	.hero2 p {
		font-size: 1.2rem;
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 24px;
		line-height: 1.3;
	}
	
	.no-margin {
	margin-bottom: 1px!important;
	}

	.hero2 a {
		color: #d06c47;   
		text-decoration: none;
	}

	.hero2 a:hover {
		color: white;   
		font-weight: bold;
		text-decoration: underline;
	}
	.hero2-content {
		text-align: center;
	}
	.cta-button {
		display: inline-block;
		padding: 15px 40px;
		background: rgba(255, 255, 255, 0.2);
		color: white;
		text-decoration: none;
		border-radius: 50px;
		font-weight: 600;
		font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
		transition: all 0.3s ease;
		border: 2px solid rgba(255, 255, 255, 0.3);
		cursor: pointer;
		width: fit-content;
	}
	.cta-button:hover {
		background: rgba(255, 255, 255, 0.3);
		transform: translateY(-3px);
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	}
	.features { 
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	  gap: 30px;
	  margin-bottom: 40px;
}
	details {
		align-items: center;
		gap: 8px;
		cursor: pointer;
		padding: 5px 12px;
		border: 2px solid rgba(255, 103, 2, 0.2);
		border-radius: 8px;
		user-select: none;
		background-color: #211101;
		color: #fff;
		transition: transform .12s 
	ease, box-shadow .12s 
	ease, background .12s 
	ease, color .12s 
	ease;
		font-size: 1.1rem;
		line-height: 1.7;
	}

	.features2 {
		column-width: 300px;      
		column-gap: 30px;       
		margin-bottom: 40px;
		max-width: 1200px; 
		margin: 0 auto; 
	}
	.features > a {
	  display: block;           
	  text-decoration: none;
	  color: inherit;
	}

	.feature-card {
	  padding: 40px 30px;
	  text-align: center;
	  color: white;
	  box-sizing: border-box;   
	  height: 334px;            
	}
		
	.feature-card::before {
	  content: "";
	  position: absolute;
	  bottom: 0;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 70%;
	  height: 70px;
	  background: radial-gradient(circle at 50% 100%, rgb(255 139 0 / 25%), transparent 70%);
	  filter: blur(8px);
	  pointer-events: none;
	  animation: cardGlow 3s ease-in-out infinite;
	}
	
	.feature-card2 {
		  display: inline-block;    
		  width: 100%;
		  box-sizing: border-box;
		  padding: 5px;
		  text-align: center;
		  color: white;
		  margin: 0 0 5px;       
		  break-inside: avoid;      
		  -webkit-column-break-inside: avoid;
		  -moz-column-break-inside: avoid;
		  height: auto;            
	}

	.map-container p {
		font-size: 1.2rem;
		margin-bottom: 30px;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
		text-align: center;
		color: white;
	}

	.contact-map a {
		color: #d06c47;
		text-decoration: none;
		font-weight: bold;
	}

	.contact-map a:hover {
		color: white;
		font-weight: bold;
		text-decoration: underline;
	}

	.feature-icon {
		width: 60px;
		height: 60px;
		margin: 0 auto 20px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
	}
	.feature-card h3 {
		font-size: 1.5rem;
		margin-bottom: 15px;
		color: white;
	}
	.feature-card p {
		color: rgba(255, 255, 255, 0.8);
		line-height: 1.6;
	}
	/* About page styles */
	.about-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		margin-bottom: 40px;
		align-items: center;
	}
	.about-text {
		padding: 40px;
		color: white;
	}
	.about-text h2 {
		font-size: 2.5rem;
		margin-bottom: 20px;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}
	.about-text p {
		font-size: 1.1rem;
		line-height: 1.8;
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 20px;
	}
	.stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 30px;
		margin-bottom: 60px;
	}
	.stat-card {
		text-align: center;
		padding: 30px;
		color: white;
	}
	.stat-number {
		font-size: 3rem;
		font-weight: bold;
		color: white;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}
	.stat-label {
		font-size: 1.1rem;
		color: rgba(255, 255, 255, 0.8);
		margin-top: 10px;
	}
	/* Team section styles */
	.team-section {
		margin-bottom: 60px;
	}
	.team-section h2 {
		font-size: 2.5rem;
		color: white;
		text-align: center;
		margin-bottom: 50px;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}
	.team-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
	}
	.team-member {
		padding: 40px 30px;
		text-align: center;
		color: white;
		transition: all 0.3s ease;
	}
	.team-member:hover {
		transform: translateY(-10px);
	}
	.team-avatar {
		width: 120px;
		height: 120px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		margin: 0 auto 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 48px;
		backdrop-filter: blur(10px);
		border: 3px solid rgba(255, 255, 255, 0.3);
		transition: all 0.3s ease;
	}
	.team-member:hover .team-avatar {
		border-color: rgba(255, 255, 255, 0.5);
		transform: scale(1.05);
		background: rgba(255, 255, 255, 0.25);
	}
	.team-member h3 {
		font-size: 1.4rem;
		margin-bottom: 8px;
		color: white;
	}
	.team-member .role {
		font-size: 1rem;
		color: rgba(255, 255, 255, 0.7);
		margin-bottom: 15px;
	}
	.team-member .bio {
		font-size: 0.9rem;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 20px;
	}
	.team-social {
		justify-content: center;
		gap: 15px;
		display: block;
		width: 100%; 
	}
	.team-social a {
		width: 36px;
		height: 36px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(255, 255, 255, 0.8);
		text-decoration: none;
		transition: all 0.3s ease;
		backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.2);
	}
	.team-social a:hover {
		background: rgba(255, 255, 255, 0.2);
		transform: translateY(-3px);
		color: white;
	}
	/* Services page styles */
	.services-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
		gap: 30px;
		margin-bottom: 40px;
	}
	.service-card {
		padding: 40px 30px;
		color: white;
		padding: 40px 30px;
		color: white;
		text-align: center;
		height: 260px;      
		box-sizing: border-box; 
		display: flex;       
		flex-direction: column;
		align-items: center;
	}
	
	.service-card::before {
	  content: "";
	  position: absolute;
	  bottom: 0;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 70%;
	  height: 70px;
	  background: radial-gradient(circle at 50% 100%, rgb(255 139 0 / 25%), transparent 70%);
	  filter: blur(8px);
	  pointer-events: none;
	  animation: cardGlow 3s ease-in-out infinite;
	}
		
	.service-header {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		white-space: nowrap;  
	}
	.service-icon {
		width: 50px;
		height: 50px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		margin-right: 15px;
	}
	.service-card h3 {
		font-size: 1.4rem;
		color: white;
	}
	.service-card p {
		color: rgba(255, 255, 255, 0.8);
		line-height: 1.6;
		margin-bottom: 20px;
	}
	.service-features {
		list-style: none;
	}
	.service-features li {
		color: rgba(255, 255, 255, 0.7);
		margin-bottom: 8px;
		padding-left: 20px;
		position: relative;
	}
	.service-features li:before {
		content: "✓";
		position: absolute;
		left: 0;
		color: rgba(255, 255, 255, 0.9);
	}
	/* Contact page styles */
	.contact-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		margin-bottom: 40px;
	}
	.contact-map-section {
		margin-bottom: 40px;
	} 
	.contact-form {
		padding: 40px;
	}
	.contact-form h2 {
		color: white;
		font-size: 2rem;
		margin-bottom: 30px;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}
	.form-group {
		margin-bottom: 20px;
	}
	.form-group label {
		display: block;
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 8px;
		font-weight: 500;
	}
	.form-group input,
	.form-group textarea {
		width: 100%;
		padding: 15px;
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 10px;
		color: white;
		font-size: 16px;
		font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
		backdrop-filter: blur(10px);
		transition: all 0.3s ease;
	}
	.form-group input:focus,
	.form-group textarea:focus {
		outline: none;
		background: rgba(255, 255, 255, 0.15);
		border-color: rgba(255, 255, 255, 0.4);
		box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
	}
	.form-group input::placeholder,
	.form-group textarea::placeholder {
		color: rgba(255, 255, 255, 0.6);
	}
	.form-group textarea {
		height: 120px;
		resize: vertical;
		line-height: 1.5;
	}
	.contact-info {
		padding: 40px;
		color: white;
	}
	.contact-info h2 {
		font-size: 2rem;
		margin-bottom: 30px;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}
	.contact-item {
		display: flex;
		align-items: center;
		margin-bottom: 25px;
	}
	.contact-item-icon {
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15px;
		font-size: 18px;
	}
	.contact-item-text h4 {
		color: white;
		margin-bottom: 5px;
	}
	.contact-item-text p {
		color: rgba(255, 255, 255, 0.8);
	}
	.contact-map {
		padding: 40px;
		color: white;
		width: 100%;
	}
	.contact-map h2 {
		font-size: 1.6rem;
		margin-bottom: 30px;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
		text-align: center;
	}

	.hero h2 {
		font-size: 1.6rem;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
		text-align: center;
		color: white;
		margin-bottom: 15px;
	}

	.contact-map h1 {
		font-size: 2rem;
		margin-bottom: 30px;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
		text-align: center;
	}

	.contact-map h3 {
		font-size: 1.2rem;
		margin-bottom: 30px;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
		text-align: center;
	}
	.map-container {
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 15px;
		border: 1px solid rgba(255, 255, 255, 0.2);
		overflow: hidden;
		position: relative;
		backdrop-filter: blur(10px);
		text-align: center;
		padding: 20px 20px;
	}
	.map-placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: rgba(255, 255, 255, 0.8);
		text-align: center;
	}
	.map-placeholder-icon {
		font-size: 64px;
		margin-bottom: 20px;
		opacity: 0.7;
	}
	.map-placeholder p {
		margin: 8px 0;
		font-size: 16px;
	}
	.map-placeholder .address {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 20px;
	}
	.map-placeholder .integration-note {
		font-size: 14px;
		opacity: 0.6;
		margin-top: 20px;
	}
	/* Footer styles */
	#footer {
		 padding: 10px 0 30px; 
	}
	.footer-content {
		padding: 30px;
		text-align: center;
		color: rgba(255, 255, 255, 0.8);
	}
	.copyright {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.6);
	}
	.copyright a {
		color: rgba(255, 255, 255, 0.6);
		text-decoration: none;
	}
	@media (max-width: 380px) {
	  .features2 { column-width: 200px; column-gap: 18px; }
	}
	/* Responsive design */
	@media (max-width: 1024px) {
		.team-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	/* Mobile Seciton */
	@media (max-width: 768px) {
	.logo-version {
		align-self: flex-start!important;
	}
	.contact-map {
		padding: 10px!important;
	}
	.gallery {
		column-count: 1 !important;              
	}	
	.logo-icon {
		width: 40px;
		height: 40px;
		margin: 30px;
	}
	.logo {
		font-size: 22px;
	}

	.content-wrapper {
	min-height: auto;
	}

	.hero {
	grid-template-columns: 1fr;
	text-align: center;
	gap: 20px;
	padding: 40px 20px; 
	}

	.hero-content {
	text-align: center;
	}

	.hero h1 {
	font-size: 2.2rem; 
	}

	nav {
	flex-direction: column;
	gap: 20px;
	padding: 20px 30px;
	}

	.nav-links {
	gap: 15px;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	}

	.nav-links a {
	display: block;
	text-align: center;
	width: 100%;
	max-width: 200px;
	font-size: 14px;
	padding: 10px 20px;
	}

	.about-content,
	.contact-grid,
	.services-grid {
	grid-template-columns: 1fr;
	}

	.team-grid {
	grid-template-columns: 1fr;
	gap: 20px;
	}
						  
	.hero-image img,
	.hero img,
	.border-image,
	.border-image2,
	.image-wrapper img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 20px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.18);
	object-fit: contain;
	box-sizing: border-box;
	padding: 2px; 
	background-clip: padding-box;
	}

	.border-image,
	.border-image2 {
	margin-bottom: 15px;
	box-sizing: border-box;
	max-width: 100%;
	padding: 2px;
	background-clip: padding-box;
	}

	/* For item icons images */
	.border-image3 {
	border: 2px solid #421f04;
	max-width: 20% !important;
	vertical-align: middle;
	margin-left: 1px;
	display: inline-block !important;
	}

	.image-wrapper {
	max-width: 100%;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 2px;
	background-clip: padding-box;
	}

	.content-wrapper,
	.content-wrapper *,
	.hero,
	.hero > * {
	min-width: 0;
	}

	.hero.glass {
	overflow: visible;
	}

	.hero-content {
	width: 100%;
	box-sizing: border-box;
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1.5;
	}

	.hero2 p {
	line-height: 1.5; 
	}
	} /* end @media (max-width: 768px) */

	/* For images */
	.border-image {
		border: 2px solid #421f04;
		border-radius: 20px;
		box-shadow: 0 2px 4px rgb(188 88 0 / 20%);
		margin-bottom: 15px;
	 }
	  
	 .border-image:hover {
		box-shadow: rgba(255, 229, 206, 0.2) 0px 0px 6px;
		background: rgba(18, 12, 5, 0.7);
	}
	 
	 /* For item images */
	.border-image2 {
		border: 2px solid #421f04;
		border-radius: 20px;
		box-shadow: 0 2px 4px rgb(188 88 0 / 20%);
		margin: 20px 0px 20px;
	 }
	 
	 .border-image2:hover {
		box-shadow: rgba(255, 229, 206, 0.2) 0px 0px 6px;
		background: rgba(18, 12, 5, 0.7);
	}
		
	 /* For item icons images */
	.border-image3 {
		border: 2px solid #421f04;
		border-radius: 7px;
		vertical-align: middle;
		box-shadow: 0 2px 4px rgb(188 88 0 / 20%);
		margin-left: 1px;
	 }
	 
	 .border-image3:hover {
		box-shadow: rgba(255, 229, 206, 0.2) 0px 0px 6px;
		background: rgba(18, 12, 5, 0.7);
	}
	
	/* For mMdifiers section */
	.border-image4 {
		border: 2px solid #421f04;
		border-radius: 20px;
		box-shadow: 0 2px 4px rgb(188 88 0 / 20%);
	 }
	 
	 .border-image4:hover {
		box-shadow: rgba(255, 229, 206, 0.2) 0px 0px 6px;
		background: rgba(18, 12, 5, 0.7);
	}
	 
	 /* panel + image wrapper image panel */
	.team-social .panel {
	  position: relative;
	  top: 0; 
	  left: 0;
	  width: 100%;
	  background: rgba(0,0,0,0.6); 
	  color: white;
	  padding: 10px;
	  box-sizing: border-box;
	  text-align: unset!important;
	  background-color: #74390e;
	  border-radius: 20px;
	}

	.image-wrapper {
	  position: relative;
	  display: inline-block; 
	  border: 2px solid #421f04;
	  border-radius: 20px;
	  box-shadow: 0 2px 4px rgb(188 88 0 / 20%);
	}

	/* Preload the hover image */
	.scrollup::before {
	  content: url(/images/arrowuphover.png);
	  position: absolute;
	  width: 0;
	  height: 0;
	  overflow: hidden;
	  visibility: hidden;
	}

	.scrollup {
	  width: 50px;
	  height: 50px;
	  position: fixed;
	  bottom: 60px;
	  right: 100px;
	  display: none;
	  text-indent: -9999px;
	  background: url(/images/arrowup.png) no-repeat;
	  transition: background 0.3s ease-in-out; 
	  filter: drop-shadow(0 0 0.15rem white);
	  z-index: 999;
	}

	.scrollup:hover {
	  background: url(/images/arrowuphover.png) no-repeat;
	  filter: drop-shadow(0 0 0.30rem white);
	}

	/* Animated background elements */
	.bg-shapes {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		overflow: hidden;
	}

	.shape {
	width: 4px;
	position:absolute;
	height: 4px;
	border-radius: 50%;
	background: rgb(255, 120, 0);
	animation: spark 7s linear infinite;
	}

	@keyframes spark {
		0% { transform: translateY(0); opacity: 0.3; }
		100% { transform: translateY(-200px); opacity: 0; }
	}

	/* Left Side*/
	.shape:nth-child(1) {
		width: 10px;
		height: 95px;
		border-radius: 15px;
		top: 8%;
		left: 6%;	
	}
	.shape:nth-child(3) {
		width: 10px;
		height: 95px;
		border-radius: 10px;
		top: 25%;
		left: 8%;
	}
	.shape:nth-child(6) {
		width: 10px;
		height: 95px;
		border-radius: 20px;
		top: 45%;
		left: 10%;	
	}
	.shape:nth-child(7) {
		width: 10px;
		height: 95px;
		border-radius: 20px;
		top: 65%;
		left: 12%;	
	}
	.shape:nth-child(10) {
		width: 10px;
		height: 95px;
		border-radius: 20px;
		top: 85%;
		left: 14%;	
	}

	/* Right side */
	.shape:nth-child(2) {
		width: 10px;
		height: 95px;
		border-radius: 15px;
		top: 8%;
		right: 6%;	
	}
	.shape:nth-child(4) {
		width: 10px;
		height: 95px;
		border-radius: 8px;
		top: 25%;
		right: 8%;	
	}
	.shape:nth-child(5) {
		width: 10px;
		height: 95px;
		border-radius: 14px;
		top: 45%;
		right: 10%;		
	}
	.shape:nth-child(8) {
		width: 10px;
		height: 95px;
		border-radius: 20px;
		top: 65%;
		right: 12%;	
	}
	.shape:nth-child(9) {
		width: 10px;
		height: 95px;
		border-radius: 20px;
		top: 85%;
		right: 14%;	
	}

	.footer-img {
		width: 32px;
		height: 32px;
		border: 2px solid rgb(255 103 2 / 20%);
		border-radius: 20px;
	}
	.overview-table {
		  margin: 0 auto;
		  border-collapse: collapse;
		  text-align: left;
		}

		.overview-table td:first-child {
		  padding-right: 1rem;
		  white-space: nowrap;
		  font-weight: bold;
		}

		.overview-table td {
		  padding: 0.2rem 0;
		  vertical-align: top;
		  font-size: 1.3rem;
		  color: white;
		}

		.overview-table .sep {
		  color: #723200;
		  margin: 0 0.3rem;
		}
		
		.overview-table {
		  display: inline-table; 
		}
		
		/* Scrollbar*/
		html {
		scrollbar-color: #5b2c00 #110b05; 
		scrollbar-width: auto;
		}
		
		.bottom-line {
			border-bottom: 1px solid #8c8884;
			margin: 0;            			 
			margin-bottom: 10px;  
			width: 100%;         
		}
		
	/* Items Section */
	input[type="radio"] {
	  display: none;
	}

	.hero3 {
	  display: grid;
	  align-items: center;
	  align-content: center;
	  min-height: 220px;        
	  padding: 30px 40px;
	  margin-bottom: 40px;
	}

	.hero-content {
	  display: flex;
	  flex-direction: column;
	  gap: 15px;               
	  width: 100%;
	  max-width: 1200px;
	  margin: 0 auto;
	  align-items: center;
	}

	.filters {
	  display: flex;
	  justify-content: center;   
	  align-items: center;
	  flex-wrap: wrap;
	  gap: 10px;
	  text-align: center;  
	}

	.filters label {
	  display: inline-flex;
	  align-items: center;
	  gap: 8px;
	  cursor: pointer;
	  padding: 8px 12px;
	  border: 2px solid rgba(255,103,2,0.2);
	  border-radius: 8px;
	  user-select: none;
	  background-color: #211101;
	  color: #fff;	  
	  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
	  font-size: 1.1rem;
	  font-weight: 600;
	}

	.filters label:hover {
	  background: rgba(18,12,5,0.7);
	  transform: translateY(-4px);
	  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
	}

	.filters label:focus,
	.filters label:focus-visible {
	  outline: 3px solid rgba(255, 103, 2, 0.25);
	  outline-offset: 3px;
	}

	#f-all:checked   ~ .hero-content .filters label[for="f-all"],
	#f-exalted:checked   ~ .hero-content .filters label[for="f-exalted"],
	#f-supp:checked   ~ .hero-content .filters label[for="f-supp"],
	#f-arcane:checked   ~ .hero-content .filters label[for="f-arcane"],
	#f-hallowed:checked   ~ .hero-content .filters label[for="f-hallowed"],
	#f-melee:checked ~ .hero-content .filters label[for="f-melee"],
	#f-ranged:checked ~ .hero-content .filters label[for="f-ranged"],
	#f-mage:checked  ~ .hero-content .filters label[for="f-mage"],
	#f-tank:checked  ~ .hero-content .filters label[for="f-tank"],
	#f-summon:checked~ .hero-content .filters label[for="f-summon"] {	
	  background: rgba(255,255,255,0.08);
	  color: #fff;
	  transform: translateY(-2px);
	  box-shadow: 0 0px 6px rgba(255,229,206,0.18);
	}

	.gallery {
		column-count: 3;         
		column-gap: 12px;        
	}

	.gallery .item {
	  display:none;         
	  width:100%;             
	  break-inside: avoid;
	  margin-bottom:12px;
	}

	.gallery .item img {
	  display: block;
	  width: auto;
	  height: auto;
	  max-width: 100%;
	  border: 2px solid #421f04;
	  border-radius: 20px;
	  box-shadow: 0 2px 4px rgb(188 88 0 / 20%);
	}

	.gallery .item:hover { transform: translateY(-4px); transition: transform .12s ease; box-shadow: rgba(255, 229, 206, 0.2) 0px 0px 6px;
		background: rgba(18, 12, 5, 0.7);border-radius: 20px;}

	#f-all:checked ~ .hero-content .gallery .item {
	  display: inline-block;
	}

	#f-melee:checked  ~ .hero-content .gallery .item[data-cat~="melee"]  { display:inline-block; }
	#f-ranged:checked ~ .hero-content .gallery .item[data-cat~="ranged"] { display:inline-block; }
	#f-mage:checked   ~ .hero-content .gallery .item[data-cat~="mage"]   { display:inline-block; }
	#f-tank:checked   ~ .hero-content .gallery .item[data-cat~="tank"]   { display:inline-block; }
	#f-summon:checked ~ .hero-content .gallery .item[data-cat~="summon"] { display:inline-block; }
	#f-supp:checked ~ .hero-content .gallery .item[data-cat~="supp"] { display:inline-block; }
	#f-exalted:checked ~ .hero-content .gallery .item[data-cat~="exalted"] { display:inline-block; }
	#f-arcane:checked ~ .hero-content .gallery .item[data-cat~="arcane"] { display:inline-block; }
	#f-hallowed:checked ~ .hero-content .gallery .item[data-cat~="hallowed"] { display:inline-block; }
	/* End Items Section */


	/* Badge Section */
	.badge-container {
		position: relative;
		vertical-align: top;    
	}

	.corner-badge {
	  position: absolute;
	  top: 8px;
	  right: 8px;
	  z-index: 20;
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  gap: 5px;
	  padding: 5px 8px;
	  background: rgb(118 48 0 / 95%);
	  color: #fff;
	  font-size: 12px;
	  font-weight: 700;
	  border-radius: 6px;
	  box-shadow: 0 4.8px 14.4px rgba(0,0,0,0.35);
	  white-space: nowrap;
	  user-select: none;
	  transform-origin: top right;
	  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
	  border: 1px solid rgba(255,255,255,0.12);

	}

	.badge-container:hover .corner-badge,
	.corner-badge:focus {
	  background: rgb(94 39 2 / 95%);
	}

	@media (max-width: 420px) {
	  .corner-badge { --pad-x: 8px; --pad-y: 4px; --font-size: 12px; --offset-x:6px; --offset-y:6px; }
	}
	/* End Badge Section */
	 
	.modifier-container {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center; 
	  gap: 10px;                  
  }

	.modifier-container img {
	  display: block;
	  max-width: 100%;     
	  max-height: 350px;    
	  height: auto;       
	}
  
	.grid-container {
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr)); 
	  gap: 20px;
	  max-width: 1200px; 
	}
	.diff-box {
	  display: flex;
	  flex-direction: column; 
	  align-items: center;  
	}
	
	/* Snow */
	.snowflake {
	  color: #fff;
	  font-size: 1em;
	  font-family: Arial, sans-serif;
	  text-shadow: 0 0 5px #000;
}

	.snowflake,
	.snowflake .inner {
		animation-iteration-count: infinite;
		animation-play-state: running
	}

	@keyframes snowflakes-fall {
		0% {
			transform: translateY(0)
		}

		100% {
			transform: translateY(110vh)
		}
	}

	@keyframes snowflakes-shake {

		0%,
		100% {
			transform: translateX(0)
		}

		50% {
			transform: translateX(80px)
		}
	}

	.snowflake {
		position: fixed;
		top: -10%;
		z-index: 9999;
		-webkit-user-select: none;
		user-select: none;
		cursor: default;
		pointer-events: none;
		animation-name: snowflakes-shake;
		animation-duration: 3s;
		animation-timing-function: ease-in-out
	}

	.snowflake .inner {
		animation-duration: 7s;
		animation-name: snowflakes-fall;
		animation-timing-function: linear
	}

	.snowflake:nth-of-type(0) {
    left: 1%;
    animation-delay: 0s;
}

	.snowflake:nth-of-type(0) .inner {
		animation-delay: 2.1s;
	}

	.snowflake:nth-of-type(1) {
		left: 5%;
		animation-delay: 1s;
	}

	.snowflake:nth-of-type(1) .inner {
		animation-delay: 3.7s;
	}

	.snowflake:nth-of-type(2) {
		left: 11%;
		animation-delay: 0.5s;
	}

	.snowflake:nth-of-type(2) .inner {
		animation-delay: 5.2s;
	}

	.snowflake:nth-of-type(3) {
		left: 17%;
		animation-delay: 2s;
	}

	.snowflake:nth-of-type(3) .inner {
		animation-delay: 1.8s;
	}

	.snowflake:nth-of-type(4) {
		left: 25%;
		animation-delay: 2s;
	}

	.snowflake:nth-of-type(4) .inner {
		animation-delay: 4.3s;
	}

	.snowflake:nth-of-type(5) {
		left: 31%;
		animation-delay: 3s;
	}

	.snowflake:nth-of-type(5) .inner {
		animation-delay: 2.9s;
	}

	.snowflake:nth-of-type(6) {
		left: 35%;
		animation-delay: 2s;
	}

	.snowflake:nth-of-type(6) .inner {
		animation-delay: 6.1s;
	}

	.snowflake:nth-of-type(7) {
		left: 45%;
		animation-delay: 1s;
	}

	.snowflake:nth-of-type(7) .inner {
		animation-delay: 0.7s;
	}

	.snowflake:nth-of-type(8) {
		left: 51%;
		animation-delay: 0s;
	}

	.snowflake:nth-of-type(8) .inner {
		animation-delay: 3.5s;
	}

	.snowflake:nth-of-type(9) {
		left: 57%;
		animation-delay: 1.5s;
	}

	.snowflake:nth-of-type(9) .inner {
		animation-delay: 5.8s;
	}

	.snowflake:nth-of-type(10) {
		left: 63%;
		animation-delay: 0s;
	}

	.snowflake:nth-of-type(10) .inner {
		animation-delay: 2.6s;
	}

	.snowflake:nth-of-type(11) {
		left: 69%;
		animation-delay: 2.5s;
	}

	.snowflake:nth-of-type(11) .inner {
		animation-delay: 4.9s;
	}

	.snowflake:nth-of-type(12) {
		left: 75%;
		animation-delay: 4.5s;
	}

	.snowflake:nth-of-type(12) .inner {
		animation-delay: 1.2s;
	}

	.snowflake:nth-of-type(13) {
		left: 81%;
		animation-delay: 0.5s;
	}

	.snowflake:nth-of-type(13) .inner {
		animation-delay: 6.5s;
	}

	.snowflake:nth-of-type(14) {
		left: 87%;
		animation-delay: 1.5s;
	}

	.snowflake:nth-of-type(14) .inner {
		animation-delay: 3.3s;
	}

	.snowflake:nth-of-type(15) {
		left: 93%;
		animation-delay: 1s;
	}

	.snowflake:nth-of-type(15) .inner {
		animation-delay: 0.9s;
	}

	.snowflake:nth-of-type(16) {
		left: 9%;
		animation-delay: 3.5s;
	}

	.snowflake:nth-of-type(16) .inner {
		animation-delay: 4.1s;
	}

	.snowflake:nth-of-type(17) {
		left: 33%;
		animation-delay: 5.5s;
	}

	.snowflake:nth-of-type(17) .inner {
		animation-delay: 2.2s;
	}

	.snowflake:nth-of-type(18) {
		left: 47%;
		animation-delay: 1.8s;
	}

	.snowflake:nth-of-type(18) .inner {
		animation-delay: 5.0s;
	}

	.snowflake:nth-of-type(19) {
		left: 65%;
		animation-delay: 3.3s;
	}

	.snowflake:nth-of-type(19) .inner {
		animation-delay: 1.4s;
	}

	.snowflake:nth-of-type(20) {
		left: 79%;
		animation-delay: 0.8s;
	}

	.snowflake:nth-of-type(20) .inner {
		animation-delay: 6.0s;
	}
  /* End Snow*/