.moon {
	 position: relative;
	 width: 150px;
	 height: 150px;
	 border-radius: 50%;
	 background-color: #f8f8f8;
	 box-shadow: inset -10px 0 20px rgba(0, 0, 0, 0.2);
	 margin: 0 auto;
	 transform-style: preserve-3d;
}
 .moon.new-moon {
	 background-color: #121212;
	 box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
 .moon.waxing-crescent {
	 background: linear-gradient(90deg, #121212 50%, #f8f8f8 50%);
	 box-shadow: inset -20px 0 50px rgba(0, 0, 0, 0.3);
}
 .moon.waxing-crescent::before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 150px;
	 height: 150px;
	 border-radius: 50%;
	 background: radial-gradient(circle at 25% center, #121212 55%, transparent 55.5%);
	 transform: translateZ(1px);
}
 .moon.first-quarter {
	 background: linear-gradient(90deg, #121212 50%, #f8f8f8 50%);
	 box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.2);
}
 .moon.waxing-gibbous {
	 background-color: #f8f8f8;
}
 .moon.waxing-gibbous::before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 150px;
	 height: 150px;
	 border-radius: 50%;
	 background: radial-gradient(circle at 75% center, #f8f8f8 55%, transparent 55.5%);
	 background-color: #121212;
	 transform: translateZ(1px);
}
 .moon.full-moon {
	 background-color: #f8f8f8;
	 box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}
 .moon.waning-gibbous {
	 background-color: #f8f8f8;
}
 .moon.waning-gibbous::before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 150px;
	 height: 150px;
	 border-radius: 50%;
	 background: radial-gradient(circle at 25% center, #f8f8f8 55%, transparent 55.5%);
	 background-color: #121212;
	 transform: translateZ(1px);
}
 .moon.last-quarter {
	 background: linear-gradient(270deg, #121212 50%, #f8f8f8 50%);
	 box-shadow: inset 5px 0 10px rgba(0, 0, 0, 0.2);
}
 .moon.waning-crescent {
	 background: linear-gradient(270deg, #121212 50%, #f8f8f8 50%);
	 box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.3);
}
 .moon.waning-crescent::before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 150px;
	 height: 150px;
	 border-radius: 50%;
	 background: radial-gradient(circle at 75% center, #121212 55%, transparent 55.5%);
	 transform: translateZ(1px);
}
 .moon-mini {
	 position: relative;
	 width: 30px;
	 height: 30px;
	 border-radius: 50%;
	 background-color: #f8f8f8;
	 box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.2);
	 display: inline-block;
}
 .moon-mini.new-moon {
	 background-color: #121212;
	 box-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
}
 .moon-mini.waxing-crescent {
	 background: linear-gradient(90deg, #121212 50%, #f8f8f8 50%);
	 box-shadow: inset -3px 0 6px rgba(0, 0, 0, 0.3);
}
 .moon-mini.waxing-crescent::before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 30px;
	 height: 30px;
	 border-radius: 50%;
	 background: radial-gradient(circle at 25% center, #121212 55%, transparent 55.5%);
	 transform: translateZ(1px);
}
 .moon-mini.first-quarter {
	 background: linear-gradient(90deg, #121212 50%, #f8f8f8 50%);
	 box-shadow: inset -1px 0 2px rgba(0, 0, 0, 0.2);
}
 .moon-mini.waxing-gibbous {
	 background-color: #f8f8f8;
}
 .moon-mini.waxing-gibbous::before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 30px;
	 height: 30px;
	 border-radius: 50%;
	 background: radial-gradient(circle at 75% center, #f8f8f8 55%, transparent 55.5%);
	 background-color: #121212;
	 transform: translateZ(1px);
}
 .moon-mini.full-moon {
	 background-color: #f8f8f8;
	 box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
 .moon-mini.waning-gibbous {
	 background-color: #f8f8f8;
}
 .moon-mini.waning-gibbous::before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 30px;
	 height: 30px;
	 border-radius: 50%;
	 background: radial-gradient(circle at 25% center, #f8f8f8 55%, transparent 55.5%);
	 background-color: #121212;
	 transform: translateZ(1px);
}
 .moon-mini.last-quarter {
	 background: linear-gradient(270deg, #121212 50%, #f8f8f8 50%);
	 box-shadow: inset 1px 0 2px rgba(0, 0, 0, 0.2);
}
 .moon-mini.waning-crescent {
	 background: linear-gradient(270deg, #121212 50%, #f8f8f8 50%);
	 box-shadow: inset 3px 0 6px rgba(0, 0, 0, 0.3);
}
 .moon-mini.waning-crescent::before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 30px;
	 height: 30px;
	 border-radius: 50%;
	 background: radial-gradient(circle at 75% center, #121212 55%, transparent 55.5%);
	 transform: translateZ(1px);
}
 .moon-visualization-large .moon {
	 width: 150px;
	 height: 150px;
}
 @keyframes glow {
	 from {
		 box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
	}
	 to {
		 box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.3);
	}
}
 .hover-lift {
	 transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 .hover-lift:hover {
	 transform: translateY(-5px);
	 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}
 .bg-gradient-dark {
	 background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #303f9f 100%);
}
 .section-title {
	 position: relative;
	 padding-bottom: 0.5rem;
	 margin-bottom: 1.5rem;
}
 .section-title::after {
	 content: '';
	 position: absolute;
	 left: 0;
	 bottom: 0;
	 width: 50px;
	 height: 3px;
	 background-color: #3b82f6;
}
 @media (max-width: 768px) {
	 .moon {
		 width: 150px;
		 height: 150px;
	}
	 .moon-visualization-large .moon {
		 width: 100px;
		 height: 100px;
	}
	.moon.waxing-gibbous::before{
		width: 100px;
		 height: 100px;
	}
	 .action-buttons {
		 display: flex;
		 flex-wrap: wrap;
		 gap: 0.5rem;
	}
	 .action-buttons .btn {
		 flex: 1 0 calc(50% - 0.5rem);
		 white-space: nowrap;
	}
}
 @media (max-width: 576px) {
	 .moon {
		 width: 120px;
		 height: 120px;
	}
	.moon.waxing-gibbous::before{
		width: 120px;
		 height: 120px;
	}
	 .action-buttons .btn {
		 flex: 1 0 100%;
	}
}
 .bg-gradient-sun {
	 background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
}
 .sun-info-display .sun-time-box {
	 text-align: center;
	 padding: 1rem;
	 border-radius: 0.5rem;
	 background: rgba(255, 255, 255, 0.1);
	 backdrop-filter: blur(10px);
}
 .sun-info-display .sun-time-box h4 {
	 font-size: 1rem;
	 margin: 0.5rem 0;
}
 .sun-info-display .sun-time-box p {
	 font-size: 1.25rem;
	 font-weight: 600;
}
 .section-title {
	 position: relative;
	 padding-bottom: 0.5rem;
	 margin-bottom: 1.5rem;
}
 .section-title::after {
	 content: '';
	 position: absolute;
	 left: 0;
	 bottom: 0;
	 width: 50px;
	 height: 3px;
	 background-color: #f39c12;
}
 .hover-lift {
	 transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 .hover-lift:hover {
	 transform: translateY(-5px);
	 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}
 @media (max-width: 768px) {
	 .sun-info-display {
		 margin-top: 2rem;
	}
	 .action-buttons {
		 display: flex;
		 flex-direction: column;
		 gap: 0.5rem;
	}
	 .action-buttons .btn {
		 width: 100%;
	}
}
 @media (max-width: 576px) {
	 .hero-section {
		 padding: 2rem 0;
	}
	 .sun-time-box h4 {
		 font-size: 0.875rem;
	}
	 .sun-time-box p {
		 font-size: 1rem;
	}
}