/* Futuristic dark theme styles - simple and responsive */
:root{
  --bg:#121312;
  --card:#0e7cfa;
  --accent:#00e5ff;
  --muted:#9aa6b2;
  --glass: rgba(255,255,255,0.03);
  --container:1100px;
  --register-container: 600px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,var(--bg),#050607);color:#e6f0f6;min-height:100vh}
.container{max-width:var(--container);margin:0 auto;padding:2rem}
.register-container{max-width:var(--register-container);margin:0 auto;padding:2rem}
.site-header{width: 100%; backdrop-filter:blur(6px);background:linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);position:sticky;top:0;z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.40rem;text-decoration:none;color:inherit}
.logo{width:42px;height:22px}
.nav a{margin-left:1rem;text-decoration:none;color: #2a1de2;padding:.5rem .6rem;border-radius:8px}
.nav a:hover{color:var(--accent);background:rgba(0,0,0,0.25);}

/* Hero */
.hero{padding:4rem 0;background:
  radial-gradient(600px 200px at 10% 10%, rgba(0,229,255,0.06), transparent 10%),
  radial-gradient(400px 120px at 90% 90%, rgba(0,229,255,0.03), transparent 10%);}
.hero .glow{font-size:clamp(2rem,4vw,3.25rem);margin:0 0 .5rem;letter-spacing:-.02em;text-shadow:0 0 18px rgba(0,229,255,0.12),0 0 32px rgba(0,229,255,0.06);background:linear-gradient(90deg,#7ef0ff,#00a2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);margin-bottom:1rem}
.cta{text-decoration:none;padding:.8rem 1.2rem;border-radius:12px;background:linear-gradient(90deg, rgba(0,229,255,0.12), rgba(0,162,255,0.08));border:1px solid rgba(0,162,255,0.15);color:var(--accent);font-weight:600;box-shadow:0 6px 24px rgba(0,162,255,0.03)}

/* Cards */
.overview .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.25rem}
.card{background:linear-gradient(180deg,var(--glass), transparent);padding:1.25rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);transition:transform .28s ease, box-shadow .28s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.6)}

/* Services */
.services .service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.service{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:1rem;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}

/* Contact form */
.contact form{max-width:720px;margin-top:1rem;display:grid;gap:.6rem}
input,textarea{background:#071018;border:1px solid rgba(255,255,255,0.03);padding:.75rem;border-radius:8px;color:inherit;outline:none}
input:focus,textarea:focus{box-shadow:0 0 0 4px rgba(0,229,255,0.04);border-color:rgba(0,162,255,0.28)}
.btn{padding:.8rem 1rem;border-radius:10px;border:none;background:linear-gradient(90deg,var(--accent),#0077b6);color:#012;cursor:pointer;font-weight:700}

/* Footer */
.site-footer{height: 1rem; padding:1.5rem 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02);margin-top:2rem}

/* Utility */
h2{margin-top:0}

/* back btn */

.back-btn{
  background:linear-gradient(90deg,#4e41ff,#ff4b2b);
  color:#fff;
  padding:10px 25px;
  border-radius:30px;
  text-decoration:none;
  position:absolute;
  top:20px;
  right:20px;
  font-weight:400;
  margin-top: -13px;
}

.bck-btn{
  background:linear-gradient(90deg,#4e41ff,#c6ff2b);
  color:#fff;
  margin-top: 10px;
  margin-bottom:10px ;
}

.bck-btn:hover {
  background:linear-gradient(90deg,#f58f0a,#ff416c);
  transform:translateY(-2px);
}

.upload-btn{
  background:linear-gradient(90deg,#4e41ff,#c6ff2b);
  color:#fff;
  margin-top: 10px;
  margin-bottom:10px ;
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.upload-btn:hover {
  background:linear-gradient(90deg,#f58f0a,#41ff61);
  transform:translateY(-2px);
}


/* ===== Responsive Navbar ===== */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}
.menu-toggle div {
  width: 25px;
  height: 3px;
  background: #091974;
  margin: 1px 4px;
  border-radius: 3px;
}

@media (max-width: 768px) {
  .nav {
    display: none;
    flex-direction: row;
    width: 100%;
    position: absolute;
    background: #ffffff;
    position: absolute;
    top: 60px;
    left: 0;
    text-align: center;
    padding-bottom: 10px;
    gap:.5rem;flex-wrap:wrap
  }

  .nav a{
    margin-left:1rem;
    text-decoration:none;
    color: #0c1591;
    padding:.5rem .6rem;
    border-radius:8px
  }

  .nav.active {
    display: flex;
  }
  .menu-toggle {
    display: flex;
  }
  .back-btn {
    display:block;
    width:35%;
    max-width:110px;
    margin:0 auto;
    text-align:center;
    margin-top: -12px;
  }
}

/* Logout Button */

.logout-btn {
    background:linear-gradient(90deg,#ff416c,#ff4b2b);
    color:#fff;
    padding:10px 25px;
    border-radius:30px;
    text-decoration:none;
    position:absolute;
    top:20px;
    right:20px;
    font-weight:600;
}
.logout-btn:hover {
    background:linear-gradient(90deg,#f58f0a,#ff416c);
    transform:translateY(-2px);
}

/* index.php style code*/


    .hero {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50vh;
      text-align: center;
      color: #fff;
      position: relative;
    }
    .hero .glow {
      font-size: 4rem;
      color: #f8f672ff;
      text-shadow: 0 0 10px rgba(6, 6, 248, 1), 0 0 20px rgba(238, 255, 1, 1), 0 0 30px rgba(60, 60, 248, 1), 0 0 40px #00f;
    }
    .hero .lead {
      font-size: 1.5rem;
      margin-top: 1rem;
    }
    .hero .cta {
      display: inline-block;
      margin-top: 2rem;
      padding: 1rem 2rem;
      background-color: #007BFF;
      color: #ffffffff;
      text-decoration: none;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }
    .hero .cta:hover {
      background-color: #0056b3;
    }

    /* services style css*/

    .services-short-container {
      max-width: 1100px;
      margin: 50px auto;
      padding: 20px;
    }

    .services-title {
      text-align: center;
      font-size: 32px;
      margin-bottom: 30px;
      color: #007bff;
      font-weight: 700;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }

    .service-card {
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: 0.3s;
    }

    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.12);
    }

    .service-card h3 {
      margin: 0 0 10px;
      color: #111;
      font-size: 20px;
    }

    .service-card p {
      margin: 0;
      font-size: 15px;
      color: #555;
      line-height: 1.6;
    }

    /* clients logo style css*/

    .clientslogo{
      align-items: center; 
      margin: 0 auto;
    }
/* index.php style code end */