.py-20 {
     padding-top: 5rem !important;
     padding-bottom: 5rem !important;
}
.py-16 {
     padding-top: 4rem !important;
     padding-bottom: 4rem !important;
}
.text-cyan-600 {
     color: #1a71b1 !important;
}

.bg-cyan-600 {
     background-color: #0f4c80 !important;
}

.hover\:bg-cyan-700:hover {
     background-color: #1a71b1 !important;
}

.from-cyan-600 {
     --tw-gradient-from: #0f4c80 !important;
}

.to-cyan-400 {
     --tw-gradient-to: #00a2e8 !important;
}

.border-cyan-600 {
     border-color: #0f4c80 !important;
}

.text-cyan-400 {
     color: #00a2e8 !important;
}

.shadow-cyan-600 {
     --tw-shadow-color: #0f4c80 !important;
}

.hover\:border-cyan-500:hover {
     border-color: #1a71b1 !important;
}

.focus\:ring-cyan-500:focus {
     --tw-ring-color: #1a71b1 !important;
}

.hover\:text-cyan-600:hover {
     color: #1a71b1 !important;
}

/* Brand Colors */
:root {
     --color-glow: #22d3ee;
     /* Bright Cyan/Aqua for outer glow/ring */
     --color-primary: #0f4c80;
     /* Primary darker blue */
     --color-secondary: #1a71b1;
     /* Mid-tone blue */
     --color-highlight: #00a2e8;
     /* Lighter electric blue */
     --color-gradient-start: var(--color-primary);
     --color-gradient-end: var(--color-highlight);
}

body {
     font-family: 'Inter', sans-serif;
     background-color: #f8fafc;
     /* slate-50 */
     color: var(--color-primary-dark);
     /* Prevents horizontal scrolling caused by elements positioned outside the viewport */
     overflow-x: hidden;
}

/* --- Mega Menu Custom Styles (Desktop Only) --- */
.megamenu {
     display: none;
     position: absolute;
     /* Positioning is now handled via inline styles (left: X) for precise control */
     padding-top: 1rem;
     z-index: 40;
     /* Above regular content */
}

.nav-item-with-megamenu:hover .megamenu,
.nav-item-with-megamenu:focus-within .megamenu {
     display: block;
}

.megamenu-content {
     background-color: white;
     border-radius: 1rem;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     border: 1px solid #e2e8f0;
     /* slate-200 */
     max-width: 900px;
}

.megamenu-link {
     transition: all 0.2s;
     border-radius: 0.5rem;
     display: block;
     padding: 0.5rem 0.75rem;
}

.megamenu-link:hover {
     background-color: #f0f9ff;
     /* sky-50 */
}

.megamenu-link:hover .link-title {
     color: var(--color-accent);
}

/* --- Custom Hero Gradient Overlay (Optional but nice) */
.hero-gradient {
     background-image: linear-gradient(to top, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7));
}

/* --- Footer Styles --- */
.footer-link {
     color: #94a3b8;
     /* slate-400 */
     transition: color 0.2s;
}

.footer-link:hover {
     color: white;
     text-decoration: underline;
}

/* Responsive adjustments for mobile menu link style */
.mobile-nav-link {
     display: block;
     padding: 0.75rem 1rem;
     font-weight: 500;
     color: #1f2937;
     /* dark text */
     transition: background-color 0.15s ease, color 0.15s ease;
     border-radius: 0.5rem;
}

.mobile-nav-link:hover {
     background-color: #e0f2f7;
     /* cyan-50 */
     color: var(--color-accent);
}

/* Mobile dropdown arrow rotation */
.rotate-90 {
     transform: rotate(90deg);
}

/* --- Enhanced Hero Section Animations --- */
@keyframes float {

     0%,
     100% {
          transform: translate(0, 0);
     }

     50% {
          transform: translate(0, 30px);
     }
}

@keyframes float-delay {

     0%,
     100% {
          transform: translate(0, 0);
     }

     50% {
          transform: translate(0, -30px);
     }
}

@keyframes slide-up {
     from {
          transform: translateY(100%);
          opacity: 0;
     }

     to {
          transform: translateY(0);
          opacity: 1;
     }
}

@keyframes fade-in {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

@keyframes title-reveal {
     from {
          transform: translateY(100%);
          opacity: 0;
     }

     to {
          transform: translateY(0);
          opacity: 1;
     }
}

.animate-float {
     animation: float 15s ease-in-out infinite;
}

.animate-float-delay {
     animation: float-delay 18s ease-in-out infinite;
}

.animate-slide-up {
     animation: slide-up 0.8s ease-out forwards;
}

.animate-fade-in {
     animation: fade-in 1s ease-out forwards;
}

.animate-fade-in-delay {
     animation: fade-in 1s ease-out 0.5s forwards;
     opacity: 0;
}

.animate-title {
     animation: title-reveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Type animation styles */
.typewrite>.wrap {
     border-right: 0.08em solid transparent;
     animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {

     from,
     to {
          border-color: transparent
     }

     50% {
          border-color: #22d3ee;
     }
}

/* --- New CSS for Animation Section --- */
/* Keyframes for the continuous motion and glow effect */
@keyframes pulse-glow {

     0%,
     100% {
          box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
     }

     50% {
          box-shadow: 0 0 0 15px rgba(6, 182, 212, 0);
     }
}

@keyframes float-subtle {
     0% {
          transform: translateY(0px);
     }

     50% {
          transform: translateY(-8px);
     }

     100% {
          transform: translateY(0px);
     }
}

/* Apply both animations to the nodes */
.node-animation {
     animation: float-subtle 4s ease-in-out infinite, pulse-glow 2s ease-out infinite;
}

/* Adjust animation delay for stagger effect */
.node-animation-2 {
     animation-delay: 0.5s, 0.5s;
}

.node-animation-3 {
     animation-delay: 1s, 1s;
}