/* ----------------------------
   VARIABLES & BASE
   ---------------------------- */
:root{
  --neon: #00f7ff;
  --neon-2: #7a00ff;
  --bg: #07080a;
  --glass: rgba(0,0,0,0.45);
  --soft: rgba(0,255,255,0.08);
  --accent-shadow: 0 0 18px rgba(0,255,255,0.12);
  --glass-border: rgba(0,255,255,0.12);
  --transition: 250ms cubic-bezier(.2,.9,.4,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(0,119,255,0.04), transparent 8%),
              radial-gradient(1200px 600px at 90% 90%, rgba(122,0,255,0.03), transparent 6%),
              var(--bg);
  color:#e8fbff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ----------------------------
   PRELOADER
   ---------------------------- */
#preloader{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.8));
}
#preloader.hidden{display:none}
.spinner{
  width:64px;height:64px;border-radius:50%;
  box-shadow:0 0 40px rgba(0,255,255,0.2), inset 0 0 15px rgba(0,255,255,0.25);
  position:relative;
  animation:spin 1.4s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ----------------------------
   BACK TO TOP BUTTON
   ---------------------------- */
#backToTop{
  position:fixed; right:18px; bottom:18px; z-index:1100;
  width:46px;height:46px;border-radius:10px;border:0;
  background:linear-gradient(135deg,var(--neon),var(--neon-2));
  color:#001; font-weight:700; cursor:pointer;
  box-shadow:0 4px 18px rgba(0,255,255,0.18);
  transform:translateY(0); transition:transform .18s;
  display:none;
}
#backToTop:focus{outline:2px solid rgba(255,255,255,0.15)}

/* ----------------------------
   NEON ACCENT (behind hero)
   ---------------------------- */
.neon-accent{
  position:fixed; inset:auto 0 70% 0; height:260px; z-index:0;
  background: radial-gradient(400px 140px at 50% 20%, rgba(0,255,255,0.06), transparent 30%),
              radial-gradient(300px 120px at 30% 80%, rgba(122,0,255,0.03), transparent 30%);
  pointer-events:none;
}

/* ----------------------------
   HERO
   ---------------------------- */
.hero{
  position:relative; padding:70px 12px; text-align:center;
  overflow:visible; z-index:2;
}
.hero-bg-name{
  position:absolute; inset:0; top:28%; left:50%;
  transform:translate(-50%,-50%); font-weight:900;
  font-size:96px; letter-spacing:4px; color:var(--neon);
  opacity:0.06; white-space:nowrap; pointer-events:none;
  filter:blur(1px);
  animation:heroColor 10s linear infinite;
  z-index:0;
}
@keyframes heroColor{
  0%{color:var(--neon)} 33%{color:#7a00ff} 66%{color:#00ff96} 100%{color:var(--neon)}
}
.hero-title{font-size:clamp(28px,4vw,42px); margin:0; z-index:2}
.hero-subtitle{margin:8px 0 0 0; opacity:0.9; z-index:2}
.hero-cta{z-index:2}

/* ----------------------------
   GLOW TEXT / BUTTONS
   ---------------------------- */
.glow-text{
  color:var(--neon); font-weight:700;
  text-shadow:0 0 10px var(--neon), 0 0 22px rgba(122,0,255,0.18);
  transition: text-shadow var(--transition), color var(--transition);
}
.glow-sub{color:rgba(0,255,255,0.85)}
.futuristic-btn{
  display:inline-block; background:var(--neon); color:#001; font-weight:700;
  border-radius:12px; padding:10px 20px; border:0; cursor:pointer;
  box-shadow:0 6px 28px rgba(0,255,255,0.14), inset 0 -6px 10px rgba(0,0,0,0.12);
  transition: transform var(--transition), box-shadow var(--transition);
}
.futuristic-btn:hover{ transform:translateY(-4px); box-shadow:0 10px 40px rgba(0,255,255,0.22) }
.futuristic-btn-outline{
  background:transparent; color:var(--neon); border:1px solid var(--neon);
  box-shadow:none; padding:8px 14px;
}

/* ----------------------------
   CAROUSEL SLIDER
   ---------------------------- */
.slider-img{ height:400px; object-fit:cover; border-radius:10px; display:block; }
.carousel .carousel-item{ transition:transform .9s ease, opacity .9s ease; }
.carousel-caption{ bottom:24px; }
.glow-caption h5{ background:linear-gradient(90deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2)); display:inline-block; padding:6px 12px; border-radius:8px; }

/* add subtle shadow to carousel container */
.shadowed{ box-shadow:0 10px 40px rgba(0,0,0,0.6), 0 0 50px rgba(0,255,255,0.04) }

/* ----------------------------
   GLASS PANEL
   ---------------------------- */
.glass-panel{
  background:var(--glass); border-radius:14px; padding:24px; border:1px solid var(--glass-border);
  box-shadow:0 8px 30px rgba(0,0,0,0.5), inset 0 0 20px rgba(0,255,255,0.02);
}

/* ----------------------------
   SERVICE CARDS (neon border anim)
   ---------------------------- */
.glow-card{
  background:rgba(0,0,0,0.5); border-radius:12px; padding:12px;
  transition: transform var(--transition), box-shadow var(--transition);
  border:1px solid rgba(0,255,255,0.05);
}
.glow-card::after{
  content:''; position:absolute; pointer-events:none; inset:auto 12px 12px 12px; border-radius:10px;
  box-shadow:0 0 40px rgba(0,255,255,0.06); opacity:0; transition:opacity .4s;
}
.glow-card:hover{ transform:translateY(-6px); box-shadow:0 12px 40px rgba(0,255,255,0.12) }
.service-card{ position:relative; overflow:visible; }

/* service images */
.service-img{ width:120px; height:80px; object-fit:cover; border-radius:8px; }

/* visible service text */
.service-text{ color:var(--neon); font-weight:600; margin-top:8px; text-shadow:0 0 6px rgba(0,255,255,0.06) }

/* ----------------------------
   GALLERY SMALL CARDS + PULSE
   ---------------------------- */
.gallery-card{ width:120px; text-align:center; cursor:pointer; }
.gallery-card img{
  width:100%; height:80px; object-fit:cover; border-radius:10px;
  box-shadow:0 6px 18px rgba(0,255,255,0.06);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s;
  will-change: transform;
}
.gallery-card img:hover{ transform:scale(1.12); box-shadow:0 12px 30px rgba(0,255,255,0.2); filter:brightness(1.06) }
.gallery-caption{ margin-top:6px; font-size:0.85rem; color:var(--neon); text-shadow:0 0 6px rgba(0,255,255,0.06) }

/* floating animation for gallery */
@keyframes floaty { 0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)} }
.gallery-card{ animation: floaty 6s ease-in-out infinite; animation-delay: calc(var(--i,0) * -0.2s) }

/* ----------------------------
   LIGHTBOX STYLING
   ---------------------------- */
.modal-content{ background:transparent; border:0; }
.lightbox-close{ position:absolute; right:10px; top:10px; z-index:3 }

/* ----------------------------
   NAV HOVER & ACTIVE
   ---------------------------- */
.navbar .nav-link{ color:rgba(255,255,255,0.9); transition:color .18s, text-shadow .18s; }
.navbar .nav-link:hover{ color:var(--neon); text-shadow:0 0 10px var(--neon) }
.navbar .nav-link.active{ color:var(--neon-2); text-shadow:0 0 12px var(--neon-2) }

/* ----------------------------
   MAP CONTAINER
   ---------------------------- */
.map-container iframe{ border-radius:12px; border:1px solid rgba(255,255,255,0.03) }

/* Futuristic Form */
.futuristic-form {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(6px);
}

.futuristic-form input,
.futuristic-form textarea {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid cyan;
  color: #fff;
}

.futuristic-form input:focus,
.futuristic-form textarea:focus {
  box-shadow: 0 0 10px cyan;
  outline: none;
}


/* ----------------------------
   FOOTER
   ---------------------------- */
footer{ margin-top:40px; }
footer .glass-panel{ display:inline-block; }

/* ----------------------------
   RESPONSIVE TWEAKS
   ---------------------------- */
@media (max-width: 768px){
  .hero-bg-name{ font-size:48px; opacity:0.04 }
  .gallery-card{ width:95px }
  .gallery-card img{ height:72px }
  .service-img{ width:100px; height:68px }
  .slider-img{ height:250px }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .gallery-card, .hero-bg-name, .slides, .neon-accent, .hero-title{ animation:none !important }
  .carousel .carousel-item{ transition:none !important }
}