:root {
	--ah-primary: rgba(35,82,132);
	--ah-secondary: rgba(205,181,145);
	--ah-accent: #e63946;
	--ah-light: #ecf0f4;
	--ah-dark: #212529;
	--ah-transition: all 0.3s ease;
  }
  
  * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }
  
  
  /* Animated Background */
  #AboutHackathon .ah-hero {
	font-family: 'Poppins', sans-serif;
	background: var(--ah-light);
	color: var(--ah-dark);
	overflow-x: hidden;
	background-color: #075388;
	color: white;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
	padding: 2rem;
	background-image: 
	  radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 12px),
	  radial-gradient(circle at 75% 44%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 10px),
	  radial-gradient(circle at 46% 52%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 8px),
	  radial-gradient(circle at 30% 65%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 12px),
	  radial-gradient(circle at 85% 58%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 15px),
	  radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 10px),
	  radial-gradient(circle at 90% 15%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 14px),
	  linear-gradient(to bottom, #0f3560 0%, #1a4674 100%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border-image: fill 0 linear-gradient(rgba(35,82,132), rgb(21, 47, 76));
  }
  
  /* Floating Particles Animation */
  #AboutHackathon .ah-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('/api/placeholder/1200/800');
	background-size: cover;
	opacity: 0.15;
	z-index: 0;
	animation: ah-backgroundShift 30s ease-in-out infinite;
  }
  
  @keyframes ah-backgroundShift {
	0% {
	  transform: scale(1.05) translate(0, 0);
	}
	25% {
	  transform: scale(1.1) translate(-1%, 1%);
	}
	50% {
	  transform: scale(1.05) translate(-2%, -1%);
	}
	75% {
	  transform: scale(1.1) translate(1%, -2%);
	}
	100% {
	  transform: scale(1.05) translate(0, 0);
	}
  }
  
  /* Add floating particles */
  #AboutHackathon .ah-hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 
	  radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.3) 0px, transparent 10px),
	  radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.2) 0px, transparent 10px),
	  radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.2) 0px, transparent 2px),
	  radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.3) 0px, transparent 3px),
	  radial-gradient(circle at 90% 30%, rgba(255, 255, 255, 0.2) 0px, transparent 2px),
	  radial-gradient(circle at 20% 70%, rgba(255, 255, 255, 0.2) 0px, transparent 4px),
	  radial-gradient(circle at 40% 90%, rgba(255, 255, 255, 0.3) 0px, transparent 5px),
	  radial-gradient(circle at 60% 30%, rgba(255, 255, 255, 0.2) 0px, transparent 2px),
	  radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.3) 0px, transparent 8px);
	background-size: 1000px 1000px;
	z-index: 1;
	pointer-events: none;
	animation: ah-particleFloat 15s linear infinite;
  }
  
  @keyframes ah-particleFloat {
	0% {
	  background-position: 0 0;
	}
	100% {
	  background-position: 100px 100px;
	}
  }
  
  #AboutHackathon .ah-hero-content {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 2;
	animation: ah-fadeInUp 1s ease-out;
  }
  
  @keyframes ah-fadeInUp {
	from {
	  opacity: 0;
	  transform: translateY(20px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  #AboutHackathon .ah-hero h1 {
	font-size: 4rem;
	margin-bottom: 1rem;
	font-weight: 700;
	animation: ah-textGlow 3s ease-in-out infinite;
  }
  
  @keyframes ah-textGlow {
	0%, 100% {
	  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
	}
	50% {
	  text-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(205, 181, 145, 0.3);
	}
  }
  
  #AboutHackathon .ah-hero p {
	font-size: 1.5rem;
	margin-bottom: 2rem;
	font-weight: 300;
  }
  
  #AboutHackathon .ah-tagline {
	display: inline-block;
	background: var(--ah-secondary);
	padding: 0.5rem 1.5rem;
	border-radius: 50px;
	font-weight: 600;
	margin-bottom: 2rem;
	color: var(--ah-dark);
	position: relative;
	overflow: hidden;
  }
  
  #AboutHackathon .ah-tagline::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	animation: ah-shimmer 3s infinite;
  }
  
  @keyframes ah-shimmer {
	0% {
	  left: -100%;
	}
	100% {
	  left: 100%;
	}
  }
  
  #AboutHackathon .ah-count-container {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin: 2rem 0;
  }
  
  #AboutHackathon .ah-count-item {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	padding: 1rem;
	border-radius: 10px;
	min-width: 100px;
	animation: ah-pulse 4s infinite;
  }
  
  #AboutHackathon .ah-count-item:nth-child(2) {
	animation-delay: 1s;
  }
  
  #AboutHackathon .ah-count-item:nth-child(3) {
	animation-delay: 2s;
  }
  
  @keyframes ah-pulse {
	0%, 100% {
	  transform: scale(1);
	  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}
	50% {
	  transform: scale(1.05);
	  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	}
  }
  
  #AboutHackathon .ah-count-number {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--ah-secondary);
  }
  
  #AboutHackathon .ah-count-label {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 1px;
  }
  
  #AboutHackathon .ah-btn {
	display: inline-block;
	padding: 1rem 2rem;
	background: var(--ah-secondary);
	color: var(--ah-dark);
	text-decoration: none;
	border-radius: 50px;
	font-weight: 600;
	margin: 0.5rem;
	transition: var(--ah-transition);
	border: 2px solid transparent;
	position: relative;
	overflow: hidden;
	z-index: 1;
  }
  
  #AboutHackathon .ah-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
	transition: all 0.5s ease;
	z-index: -1;
  }
  
  #AboutHackathon .ah-btn:hover::before {
	width: 100%;
  }
  
  #AboutHackathon .ah-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  #AboutHackathon .ah-btn-primary {
	background: var(--ah-secondary);
  }
  
  #AboutHackathon .ah-btn-outline {
	background: transparent;
	border: 2px solid white;
	color: white;
  }
  
  #AboutHackathon .ah-btn-outline:hover {
	background: white;
	color: var(--ah-primary);
  }
  
  #AboutHackathon .ah-section {
	padding: 5rem 2rem;
	position: relative;
	overflow: hidden;
	background-color: rgb(21, 47, 76);
	border-image: fill 0 linear-gradient(to bottom, rgb(21, 47, 76) 0%, #1a4674 100%);
   
  }
  
  /* Add subtle background animation to regular sections */
  #AboutHackathon .ah-section::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle at center, rgba(205, 181, 145, 0.05) 0%, transparent 70%);
	z-index: -1;
	animation: ah-rotateGradient 30s linear infinite;
  }
  
  @keyframes ah-rotateGradient {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }
  
  #AboutHackathon .ah-container {
	max-width: 1200px;
	margin: 0 auto;
  }
  
  #AboutHackathon .ah-section-title {
	text-align: center;
	margin-bottom: 3rem;
	position: relative;
	
  }
  
  #AboutHackathon .ah-section-title h2 {
	font-size: 2.5rem;
	color: #ffffff;
	display: inline-block;
	position: relative;
  }
  
  #AboutHackathon .ah-section-title h2:after {
	content: '';
	display: block;
	width: 50%;
	height: 4px;
	background: var(--ah-secondary);
	margin: 0.5rem auto;
	transition: width 0.5s ease;
  }
  
  #AboutHackathon .ah-section-title:hover h2:after {
	width: 80%;
  }
  
  #AboutHackathon .ah-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
  }
  
  #AboutHackathon .ah-card {
	background: white;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	transition: var(--ah-transition);
	position: relative;
	z-index: 1;
  }
  
  #AboutHackathon .ah-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, transparent 0%, transparent 50%, rgba(205, 181, 145, 0.1) 100%);
	z-index: -1;
	transition: transform 0.5s ease;
	transform: translateY(100%);
  }
  
  #AboutHackathon .ah-card:hover::after {
	transform: translateY(0);
  }
  
  #AboutHackathon .ah-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }
  
  #AboutHackathon .ah-card-img {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 3rem;
	position: relative;
	overflow: hidden;
  }
  
  #AboutHackathon .ah-card-img::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
  }
  
  #AboutHackathon .ah-card-content {
	padding: 2rem;
	position: relative;
	z-index: 1;
  }
  
  #AboutHackathon .ah-card h3 {
	margin-bottom: 1rem;
	color: var(--ah-primary);
	position: relative;
	display: inline-block;
  }
  
  #AboutHackathon .ah-card h3::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--ah-secondary);
	transition: width 0.3s ease;
  }
  
  #AboutHackathon .ah-card:hover h3::after {
	width: 100%;
  }
  
  
  
  @media (max-width: 768px) {
	#AboutHackathon .ah-hero h1 {
	  font-size: 2.2rem;
	}
	
	#AboutHackathon .ah-hero p {
	  font-size: 1.1rem;
	}
	
	#AboutHackathon .ah-count-container {
	  flex-wrap: wrap;
	  gap: 1rem;
	}
	
	#AboutHackathon .ah-count-item {
	  min-width: 80px;
	  padding: 0.8rem;
	}
	
	#AboutHackathon .ah-count-number {
	  font-size: 1.5rem;
	}
	
	#AboutHackathon .ah-section-title h2 {
	  font-size: 2rem;
	}
	
	#AboutHackathon .ah-btn {
	  padding: 0.8rem 1.5rem;
	  font-size: 0.9rem;
	}
	
	#AboutHackathon .ah-card-img {
	  height: 150px;
	}
	
	#AboutHackathon .ah-card-content {
	  padding: 1.5rem;
	}
	
	/* Simpler animations for mobile */
	@keyframes ah-particleFloat {
	  0%, 100% {
		background-position: 0 0;
	  }
	}
  }
  
  @media (max-width: 480px) {
	#AboutHackathon .ah-hero h1 {
	  font-size: 2.5rem;
	}
	
	#AboutHackathon .ah-hero p {
	  font-size: 1rem;
	}
	
	#AboutHackathon .ah-tagline {
	  padding: 0.3rem 1rem;
	  font-size: 0.8rem;
	}
	
	#AboutHackathon .ah-count-container {
	  margin: 1rem 0;
	  padding-bottom: 1.5rem;
	}
	
	#AboutHackathon .ah-count-item {
	  min-width: 70px;
	  padding: 0.6rem;
	}
	
	#AboutHackathon .ah-count-number {
	  font-size: 1.5rem;
	}
	
	#AboutHackathon .ah-btn {
	  padding: 0.7rem 1.2rem;
	  font-size: 0.8rem;
	  display: block;
	  margin: 0.5rem auto;
	  max-width: 200px;
	}
	
	#AboutHackathon .ah-section {
	  padding: 3rem 1rem;
	}
	
	#AboutHackathon .ah-count-second{
	  display: none;
	}
  }