:root{
  --bg:#0b0f19;
  --card:#0f1724;
  --neon:#00aaff;
  --muted:rgba(255,255,255,0.75);
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#fff;
  font-family:'Poppins',system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* Loader */
.loader{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:linear-gradient(180deg, rgba(2,6,23,0.9), rgba(2,6,23,0.8));
  z-index:99999;backdrop-filter:blur(15px);
}
.ring{
  width:88px;height:88px;border-radius:50%;
  box-shadow: 0 0 20px rgba(0,170,255,0.12), inset 0 0 18px rgba(0,170,255,0.12);
  position:relative;
}
.ring::before,.ring::after{
  content:"";position:absolute;inset:8px;border-radius:50%;
}
.ring::before{
  border:3px solid rgba(0,170,255,0.12);
}
.ring::after{
  width:24px;height:24px;left:32px;top:32px;border-radius:50%;
  box-shadow:0 0 20px var(--neon);
  animation: pulse 1.6s linear infinite;
}
.loader-text{margin-top:14px;letter-spacing:2px;color:var(--neon);font-weight:700;text-shadow:0 0 10px var(--neon)}

/* Header - glass style */
header{
  position:fixed;left:0;right:0;top:16px;margin:0 auto;z-index:1000;
  max-width:1200px;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;border-radius:12px;
  transition:all .35s ease;backdrop-filter:blur(10px);
}
header.glass{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));
  border:1px solid rgba(0,170,255,0.12); box-shadow:0 6px 30px rgba(0,170,255,0.035);
}
header.scrolled{transform:translateY(-6px);box-shadow:0 10px 40px rgba(0,170,255,0.08);}



#cursorTrail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* cursor events pass through */
  z-index: 9999; /* on top of everything */
}




/* Brand */
/* .brand{font-weight:700;color:var(--neon);font-size:20px;text-shadow:0 0 12px var(--neon);} */

/* Nav */
.nav{display:flex;gap:18px;align-items:center}
.nav-link{
  position:relative;color:rgba(255,255,255,0.9);text-decoration:none;padding:8px 4px;font-weight:600;letter-spacing:0.2px;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;background:linear-gradient(90deg,var(--neon), rgba(0,170,255,0.6));transform:scaleX(0);transform-origin:left center;border-radius:3px;transition:transform .35s cubic-bezier(.2,.9,.2,1),opacity .35s;
  opacity:0;box-shadow:0 0 12px var(--neon);
}
.nav-link:hover::after{transform:scaleX(1);opacity:1}
.nav-link.active::after{transform:scaleX(1);opacity:1}

/* Hero */
.hero{height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;/*background-image:url('2.jpg')*/;background-size:cover;background-position:center;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.48),rgba(0,0,0,0.7))}
.hero-inner{position:relative;z-index:2;max-width:820px}
.hero-title{font-size:44px;line-height:1.05;margin-bottom:12px;color:#e8faff;text-shadow:0 0 18px rgba(0,170,255,0.18)}
.hero-sub{opacity:0.9;margin-bottom:26px}

/* Buttons - left-to-right fill */
.btn{display:inline-block;padding:12px 28px;border-radius:10px;background:transparent;border:1px solid rgba(0,170,255,0.18);position:relative;overflow:hidden;cursor:pointer;text-decoration:none}
.btn span{position:relative;z-index:2;color:var(--neon);font-weight:700}
.btn::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--neon), rgba(0,170,255,0.85));z-index:1;transition:width 2s cubic-bezier(.2,.9,.2,1)
}
.btn:hover::before{width:100%}
.btn:hover span{color:#051023;transition:color .15s ease}
.btn{box-shadow:0 6px 18px rgba(0,170,255,0.06)}

.btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: white;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.btn span {
  position: relative;
  z-index: 2;
}

.btn-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}


/* Sections */
.section{padding:80px 24px;max-width:1200px;margin:0 auto}
.section-title{font-size:32px;margin-bottom:28px;color:var(--neon);text-shadow:0 0 12px var(--neon);transform:translateX(-30px);opacity:0;transition:all .9s cubic-bezier(.2,.9,.2,1)}

/* grid layouts */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.about-img{width:100%;border-radius:12px;box-shadow:0 10px 40px rgba(0,170,255,0.06)}
.about-text p{line-height:1.7;color:var(--muted);margin-bottom:12px}

/* services/products grid */
/* .services-grid{overflow: hidden; display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px} */
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(0,170,255,0.06);box-shadow:0 8px 30px rgba(0,170,255,0.03);transition:transform .32s ease,box-shadow .32s ease}
.card img{width:100%;border-radius:8px;display:block;margin-bottom:12px}
.card:hover{transform:translateY(-10px);box-shadow:0 18px 60px rgba(0,170,255,0.12)}
.card:hover p{display: block;}

/* contact grid */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:12px}
.contact-card{padding:22px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border:1px solid rgba(0,170,255,0.06);text-align:center;box-shadow:0 10px 30px rgba(0,170,255,0.03)}
.icon-wrap{width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--neon);box-shadow:0 0 20px rgba(0,170,255,0.06);border:1px solid rgba(0,170,255,0.08)}
.muted{color:rgba(255,255,255,0.65);font-size:13px}
.strong{font-weight:700;margin-top:8px;color:#e8faff}

/* reveal active */
.reveal{opacity:0;transform:translateX(-40px);transition:all .85s cubic-bezier(.2,.9,.2,1)}
.reveal.active{opacity:1;transform:translateX(0)}
.section-title.active{transform:translateX(0);opacity:1}

/* footer */
.footer{padding:28px;text-align:center;color:rgba(255,255,255,0.7);margin-top:40px;border-top:1px solid rgba(255,255,255,0.02)}


/* about button */
.more-about{
   border: 1px solid rgb(0, 106, 255); color: white;
          font-size: 20px; border-radius: 50px; padding: 10px 80px;text-decoration: none; text-align: center; align-self: center;
}
.more-about:hover{
  
   box-shadow: 0px 0px 10px  rgba(0, 106, 255, 0.671);
   border: 2px solid rgba(0, 106, 255, 0.604);

}






/* Section container */
.services{
  padding:80px 8%;
  color:white;
}

/* Section title */
.section-title{
  font-size:40px;
  color:var(--neon);
  margin-bottom:15px;
  text-shadow:0 0 8px var(--neon);
}

.services-text{
  max-width:750px;
  margin:10px auto 40px;
  color:var(--muted);
  line-height:1.65;
}

/* Service cards grid */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px;
  margin-top:40px;
}

/* Neon card style */
.service-card{
  background:var(--glass);
  border-radius:var(--radius);
  padding:28px;
  backdrop-filter:blur(10px);

  border:1px solid rgba(0,170,255,0.2);
  box-shadow:
    inset 0 0 6px rgba(0,170,255,0.15),
    0 0 10px rgba(0,170,255,0.15);

  transition:
    transform .45s ease,
    box-shadow .45s ease;
}

/* Hover 3D animation */
.service-card:hover{
  transform:translateY(-10px) rotateX(5deg);
  box-shadow:
    0 14px 28px rgba(0,170,255,0.25),
    0 0 16px rgba(0,170,255,0.45);
}

/* Titles */
.service-card h3{
  color:white;
  margin-bottom:10px;
  font-size:20px;
}

/* Paragraph */
.service-card p{
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}



/* .service-card{
  background: url('src/img/bg/2.webp');
}

.service-card:hover{
  border-left: 2px solid rgb(0, 140, 255);
  border-right: 2px solid rgb(0, 140, 255);
}


#servicetitle{
   position: absolute; 
  top: 0;
  text-align: center;
  align-self: center;

} */




/* responsive */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:18px}
  header{left:12px;right:12px}
  .hero{height:72vh;padding:20px}
}


/* Mobile view: vertical list style */
/* Hide menu icon on desktop */
/* Desktop view – normal nav */
/* Desktop navigation */
.nav {
  display: flex;
  gap: 20px;
  align-items: center;
}

.menu-icon {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

/* Side Panel */
.side-panel {
  position: fixed;
  top: 0;
  right: -300px; /* hidden initially */
  width: 280px;
  height: 100%;
  /* background: #fff; */
  backdrop-filter: blur(15px);
  box-shadow: -5px 0 15px rgba(0,0,0,0.5);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: right 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* smooth 3D feel */
  transform: perspective(1000px) rotateY(-10deg);
  z-index: 2000;
}

/* Active state slides panel in */
.side-panel.active {
  right: 0;
  transform: perspective(1000px) rotateY(0deg);
}

/* Links inside panel */
.side-panel a {
  font-size: 20px;
  text-decoration: none;
  color: #bababa;
  padding: 10px 15px;
  border-radius: 6px;
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.4s ease;
}

/* Animate links when panel active */
.side-panel.active a {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger animation */
.side-panel.active a:nth-child(2) { transition-delay: 0.1s; }
.side-panel.active a:nth-child(3) { transition-delay: 0.2s; }
.side-panel.active a:nth-child(4) { transition-delay: 0.3s; }
.side-panel.active a:nth-child(5) { transition-delay: 0.4s; }

/* Hover effect for links */
.side-panel a:hover {
  background: #f0f0f077;

  transform: scale(0.35s);
  color: #007bff;
}

/* Close button */
.close-btn {
  font-size: 28px;
  color: #333;
  align-self: flex-end;
  cursor: pointer;
  transition: transform 0.3s ease, color 0.3s ease;
}

.close-btn:hover {
  transform: rotate(90deg);
  color: red;
}

/* Overlay background */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  display: none;
  z-index: 1500;
}

/* Mobile view adjustments */
@media (max-width: 900px) {
  .nav-link { display: none; }
  .menu-icon { display: flex; }
  .hero-inner{margin-top: 30px;}
}


/*menu icon */

.menu-icon {

  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.menu-icon span {
  display: block;
  height: 3px;
  background: #333;
  border-radius: 3px;
  transition: all 0.4s ease;
}

/* Hover animation: scale and slight rotation */
.menu-icon:hover {
  transform: scale(1.2) rotate(5deg);
}

/* Clicked / active state for X animation */
.menu-icon.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-icon.active span:nth-child(2) {
  opacity: 0;
}

.menu-icon.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}










/* animations */
@keyframes pulse{0%{transform:scale(0.9);opacity:.8}50%{transform:scale(1);opacity:1}100%{transform:scale(0.9);opacity:.8}}




/* Background image layer */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  animation: kenburns 18s ease-in-out infinite;
}

/* Stronger dark overlay on hero */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.622);   /* ← increase darkness */
  animation: gradientMove 12s infinite alternate;
  pointer-events: none;
}



/* Ken Burns (slow zoom IN) */
@keyframes kenburns {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}

/* Animated gradient overlay */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(0,0,0,.6), rgba(0,0,0,.2));
  animation: gradientMove 12s infinite alternate;
}

@keyframes gradientMove {
  0% { opacity: .6; }
  100% { opacity: .9; }
}




.brand-wrapper {
  position: relative;
  display: inline-block;
}

#brand-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* clicks go through */
  z-index: 1;
}

.brand {
  position: relative;
  z-index: 2;
  display: flex;
  font-weight: 700;
  color: var(--neon);
  font-size: 30px;
  text-shadow: 0 0 12px var(--neon);
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}





/*logo slide show*/

.slide_show{

  width: 100%;
  background-color: white;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.708);
}
.a{
  width: 100px;
  height: 50px;
  position: relative;
  display: inline-block;
}
.a img {
  width: 100px;
  height: 50px;
  padding-top: 10px;
}

/*viceo player twist*/


#videoContainer {
  position: relative;

}

#videoPlayer {
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.7s ease-in-out; /* smooth fade */
}

.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
}
/* Hide controls for WebKit browsers (Chrome, Edge, Safari) */
video::-webkit-media-controls {
  display: none;
}

/* Remove default controls */
video {
  pointer-events: none;   /* disables mouse interactions */
}