/* Root variables */
:root{--g-orange:#ff8c00;--g-green:#00ff88;--g-blue:#00b8ff;--g-teal:#00e0c0;--space-dark:#020808;--card-bg:rgba(6,24,24,0.6)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:100px}
body{margin:0;padding:0;background:var(--space-dark);color:#e8f4f0;font-family:system-ui,-apple-system,sans-serif;overflow-x:hidden;min-height:100vh;-webkit-font-smoothing:antialiased}
.space-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;background:radial-gradient(ellipse at 30% 20%,rgba(0,255,136,0.08) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(0,184,255,0.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(0,224,192,0.05) 0%,transparent 40%),radial-gradient(ellipse at 20% 70%,rgba(255,140,0,0.04) 0%,transparent 45%),radial-gradient(ellipse at 80% 30%,rgba(0,255,136,0.06) 0%,transparent 40%),linear-gradient(180deg,#020808 0%,#031510 50%,#020808 100%)}
.stars-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.star{position:absolute;border-radius:50%;animation:starDrift 30s linear infinite}
@keyframes starDrift{0%{transform:translateY(0)}100%{transform:translateY(-100vh)}}
body::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(0,255,136,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,136,0.03) 1px,transparent 1px);background-size:50px 50px;pointer-events:none;z-index:-1}
@keyframes galacticFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* NAVIGATION */
.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding: 20px 0;
  background: rgba(2,8,8,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,255,136,0.15);
  transition: transform 0.3s ease;
  transform: translateY(-100%);
}
.main-nav.visible {
  transform: translateY(0);
}
.nav-center{display:flex;flex-direction:column;align-items:center;gap:15px;max-width:1200px;margin:0 auto;padding:0 20px}
.site-logo{width:180px;height:auto;filter:drop-shadow(0 0 20px rgba(0,255,136,0.5))}
.hamburger{background:transparent;border:none;cursor:pointer;padding:10px;display:flex;flex-direction:column;gap:5px;z-index:1001}
.ham-line{display:block;width:32px;height:3px;background:linear-gradient(90deg,#ff8c00,#00ff88,#00b8ff);background-size:300% 300%;animation:galacticFlow 6s ease infinite;border-radius:2px}
.hamburger.active .ham-line:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active .ham-line:nth-child(2){opacity:0}
.hamburger.active .ham-line:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
/* MOBILE NAVIGATION - LOGO ONLY */
.mobile-menu-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(2,8,8,0.98);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 160px;
  padding-bottom: 20px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 400px;
}

.menu-item {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00ff88;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 10px 20px;
  width: 100%;
  text-align: center;
  transition: color 0.2s;
}
.menu-item:hover { color: #ffffff; }

/* SCROLLABLE DROPDOWN */
.menu-dropdown { 
  width: 100%; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

.dropdown-content {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  padding: 15px;
  background: rgba(0, 255, 136, 0.05);
  border-radius: 16px;
  border: 1px solid rgba(0, 255, 136, 0.2);
  width: 100%;
  /* CRITICAL FIX: Limit height and make it scrollable */
  max-height: 50vh; 
  overflow-y: auto;
}
.dropdown-content.active { display: flex; }

.dropdown-item {
  font-size: 1rem;
  padding: 12px;
  text-align: center;
  color: #b0d0c0;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.2s;
}
.dropdown-item:hover { background: rgba(0, 255, 136, 0.1); color: #00ff88; }

/* HIDE FOOTER ELEMENTS AS REQUESTED */
.menu-footer, .menu-hint {
  display: none !important;
}

body.menu-open { overflow: hidden; }
main.content-grid,.services-section{padding-top:80px;padding-bottom:60px;width:100%;max-width:1200px;margin:0 auto}
.container{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}
.section-title{text-align:center;font-size:clamp(1.5rem,4vw,2.8rem);font-weight:800;margin-bottom:15px;background:linear-gradient(90deg,#ff8c00,#00ff88,#00b8ff);background-size:300% 300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:galacticFlow 6s ease infinite}
.section-subtitle{text-align:center;color:#b0d0c0;max-width:700px;margin:0 auto 50px;line-height:1.6}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;padding:0 1rem;width:100%}
/* SERVICE CARDS - CONSISTENT STYLING */
.service-card {
  background: rgba(6,24,24,0.85);
  border: 1px solid rgba(0,255,136,0.25);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  color: #b0d0c0;
  transition: transform 0.2s;
}
.service-card:hover { transform: translateY(-5px); }
.service-card h3 {
  color: #00ff88;
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
}
.service-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
.footer{padding:40px 20px;text-align:center;background:rgba(2,8,8,0.5);border-top:1px solid rgba(0,255,136,0.1);margin-top:60px;width:100%}
.footer-slogan{font-size:clamp(1rem,3vw,1.3rem);font-weight:700;background:linear-gradient(90deg,#ff8c00,#00ff88,#00b8ff);background-size:300% 300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:galacticFlow 6s ease infinite;margin-bottom:15px}
.footer-powered{color:#6a9e9e;font-size:0.9rem}
.chatbot-widget{position:fixed;bottom:30px;right:30px;z-index:9998}
.chatbot-toggle{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ff8c00,#00ff88,#00b8ff);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 20px rgba(0,255,136,0.4);transition:transform 0.2s ease}
.chatbot-toggle:hover{transform:scale(1.1)}
.chatbot-toggle img{width:50px;height:50px;border-radius:50%;pointer-events:none}
.chatbot-container{position:fixed;bottom:100px;right:30px;width:400px;height:650px;background:rgba(6,24,24,0.95);backdrop-filter:blur(20px);border:1px solid rgba(0,255,136,0.2);border-radius:20px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(20px);transition:all 0.3s ease;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.5)}
.chatbot-container.active{opacity:1;visibility:visible;transform:translateY(0)}
.chatbot-header{display:flex;align-items:center;gap:15px;padding:20px;background:linear-gradient(135deg,rgba(255,140,0,0.1),rgba(0,255,136,0.1));border-bottom:1px solid rgba(0,255,136,0.1)}
.chatbot-avatar img{width:50px;height:50px;border-radius:50%;border:2px solid #00ff88}
.chatbot-info h3{font-size:1.1rem;color:#00ff88;margin-bottom:3px}
.chatbot-info .status{font-size:0.8rem;color:#00e0c0}
.chatbot-close{margin-left:auto;background:none;border:none;color:#6a9e9e;font-size:1.5rem;cursor:pointer}
.chatbot-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:15px}
.message{max-width:85%;padding:12px 16px;border-radius:15px;font-size:0.95rem;animation:msgIn 0.3s ease;word-wrap:break-word}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.message.user{align-self:flex-end;background:linear-gradient(135deg,#00ff88,#00b8ff);color:#020808}
.message.bot{align-self:flex-start;background:rgba(0,255,136,0.1);border:1px solid rgba(0,255,136,0.2);color:#e8f4f0}
.typing-dots{display:flex;gap:5px;padding:10px 16px}
.typing-dots span{width:8px;height:8px;border-radius:50%;background:#00ff88;animation:typingBounce 1.4s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:0.2s}.typing-dots span:nth-child(3){animation-delay:0.4s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-10px)}}
.chatbot-input{display:flex;gap:10px;padding:20px;background:rgba(0,0,0,0.3);border-top:1px solid rgba(0,255,136,0.1)}
.chatbot-input input{flex:1;padding:12px 16px;background:rgba(2,8,8,0.6);border:1px solid rgba(0,255,136,0.2);border-radius:10px;color:#e8f4f0;outline:none}
.chatbot-input button{padding:12px 20px;background:linear-gradient(135deg,#ff8c00,#00ff88);border:none;border-radius:10px;color:#020808;font-weight:700;cursor:pointer;transition:transform 0.2s ease}
.chatbot-input button:hover{transform:scale(1.05)}
@media(max-width:768px){.site-logo{width:130px}.services-grid{grid-template-columns:1fr}main.content-grid,.services-section{padding-top:60px}.chatbot-container{width:calc(100vw - 40px);height:65vh;right:20px;bottom:90px}}
@media(max-width:480px){.site-logo{width:110px}main.content-grid,.services-section{padding-top:50px}.chatbot-toggle{width:50px;height:50px}.chatbot-toggle img{width:38px;height:38px}.chatbot-container{width:calc(100vw - 30px);height:60vh;right:15px;bottom:80px}}
/* HIDE THE QUESTION MARK TEXT */
.menu-hint, p:contains("Click page title"), .menu-footer + p {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* DRAGGABLE CHATBOT */
#chatbot-icon {
  touch-action: none;
  cursor: grab;
  z-index: 99999;
  transition: transform 0.1s;
}
#chatbot-icon:active {
  cursor: grabbing;
  transform: scale(1.05);
}