:root{
  --bg:#061024;
  --card:#0b1220;
  --muted:#94a3b8;
  --accent:#06b6d4;
  --accent-2:#7c3aed;
  --glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: Inter, system-ui, Arial, sans-serif;
  background: linear-gradient(180deg,var(--bg) 0%, #071226 60%);
  color:#e6eef8;
  line-height:1.6;
}
.container{max-width:1100px;margin:0 auto;padding:20px;}

header{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
/* Logo styles */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-img {
  max-width: 50px;
  max-height: 50px;
  width: 150px;
  height: 150px;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3),
              -5px -5px 15px rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, #4a90e2, #63b8ff);
  padding: 5px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-img:hover {
  transform: translateY(-2px);
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.4),
              -7px -7px 20px rgba(255, 255, 255, 0.6);
}

.brand-text .brand-name{font-weight:700}
.brand-text .brand-sub{font-size:12px;color:var(--muted)}

nav ul{display:flex;gap:14px;list-style:none;align-items:center}
nav a{color:var(--muted);padding:8px;border-radius:8px;text-decoration: none;}
nav a.cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04212a;padding:8px 12px}
.hamburger{display:none;color:var(--accent);font-size:22px;cursor:pointer}
@media(max-width:800px){nav ul{display:none;position:absolute;top:64px;right:20px;background:var(--card);flex-direction:column;padding:12px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.8)}.hamburger{display:block}nav ul.show{display:flex}}

/* hero */
.hero{padding:36px 0;text-align:center}
.hero .lead{color:var(--muted);margin-top:8px}

/* sections */
section{padding:32px 0}
section h2{color:var(--accent);text-align:center;margin-bottom:18px}
.muted{color:var(--muted)}
.centered{text-align:center}

/* grid/cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--glass);padding:16px;border-radius:12px;box-shadow:0 6px 18px rgba(2,6,23,0.6);text-align:center}
.card img{max-width:90px;margin-bottom:12px;border-radius:8px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:14px}

/* pricing */
#pricingIntro{margin-bottom:12px;color:var(--muted)}
.pricing-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:12px}
.pricing-card h4{margin-bottom:8px}
.pricing-card .price{color:var(--accent);font-weight:700;margin-bottom:10px}
.pricing-card ul{list-style:none;padding:0;margin:0;text-align:left;color:var(--muted)}

/* inputs */
input[type="text"], textarea, select{width:100%;max-width:420px;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:var(--card);color:#fff;margin:0 auto 14px;display:block}
.contact-form{max-width:700px;margin:0 auto}

/* form actions */
.form-actions{display:flex;gap:12px;justify-content:center;margin-top:8px}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04212a;padding:10px 14px;border-radius:8px;border:0;cursor:pointer;font-weight:600}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

/* faq */
.faq-item{background:var(--glass);padding:14px;border-radius:10px;margin-bottom:10px;cursor:pointer}
.faq-question{font-weight:700}
.faq-answer{display:none;margin-top:10px;color:var(--muted)}

/* testimonials iframe */
.testi-frame iframe{max-width:760px;height:420px;border-radius:10px}

/* footer */
footer{padding:18px 0;text-align:center;margin-top:30px;color:var(--muted)}

/* small screens */
@media(max-width:520px){
  .testi-frame iframe{height:220px}
  .card img{max-width:70px}
  
}
/* common styles from other projects */
#contact {
  padding: 60px 20px;
  background: #0a0a0a;
  border-radius: 15px;
  margin: 40px auto;
  max-width: 700px;
  text-align: center;
}

#contact h2 {
  color: #0ff;
  text-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
  margin-bottom: 20px;
}

#contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#contact-form input,
#contact-form textarea {
  background: #111;
  border: 1px solid #0ff;
  color: #fff;
  padding: 12px;
  border-radius: 10px;
  outline: none;
  transition: 0.3s;
  font-size: 16px;
}

#contact-form input:focus,
#contact-form textarea:focus {
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
}

#contact-form button {
  background: #0ff;
  color: #111;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  padding: 14px 20px;
  transition: 0.3s;
  cursor: pointer;
}

#contact-form button:hover {
  background: #fff;
  color: #111;
  box-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
}

.form-note {
  margin-top: 15px;
  font-size: 14px;
  color: #aaa;
}
/* End of common styles */
/* Neon Card Style */
.card, .pricing-card {
  background:#111;
  border:1px solid var(--accent);
  border-radius:15px;
  padding:20px;
  color:#fff;
  text-align:center;
  transition:0.3s ease-in-out;
  box-shadow:0 0 10px rgba(0,255,255,0.2);
}
.card:hover, .pricing-card:hover {
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 0 15px var(--accent), 0 0 30px var(--accent);
}
.card img { max-width:80px; margin-bottom:12px; filter:drop-shadow(0 0 10px var(--accent)); }
.pricing-card h3 { color:var(--accent); text-shadow:0 0 8px var(--accent); }
.pricing-card .price { font-size:1.8rem; font-weight:bold; color:var(--accent); }

/* Buttons */
button {
  background: var(--accent);
  color:#111;
  font-weight:bold;
  border:none;
  border-radius:10px;
  padding:10px 16px;
  margin-top:10px;
  cursor:pointer;
  transition:0.3s;
}
button:hover {
  background:#fff;
  color:#111;
  box-shadow:0 0 20px var(--accent),0 0 40px var(--accent);
}
/* Team Section */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.social-icons a {
  font-size: 20px;
  color: #aaa;
  transition: all 0.3s ease;
}

.social-icons a.active {
  color: #fff;
  text-shadow: 0 0 8px #0ff;
}

.social-icons a.inactive {
  color: #555;
  opacity: 0.4;
  pointer-events: none;
}
.team-card {
  background: #111;
  border: 1px solid var(--accent);
  border-radius: 15px;
  padding: 20px;
  color: #fff;
  text-align: center;
  transition: 0.3s ease-in-out;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
  max-width: 250px;
  margin: 0 auto;
}
.team-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 0 15px var(--accent), 0 0 30px var(--accent);
}
.team-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
  border: 2px solid #0ff;
}
/* Testimonials Carousel */
#testimonialsWrapper {
  display: flex;
  overflow: hidden;
  gap: 20px;
  padding: 10px;
  scroll-behavior: smooth;
}

.testimonial-video {
  flex: 0 0 auto;
  width: 250px;
  height: 450px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  margin: 10px;
  transition: transform 0.3s ease;
}

.testimonial-video:hover {
  transform: scale(1.05);
}

.testimonial-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Auto scroll animation */
@keyframes scrollLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.auto-scroll {
  display: flex;
  animation: scrollLeft 25s linear infinite;
}

#testimonialsWrapper:hover .auto-scroll {
  animation-play-state: paused;
}
/* Responsive */
@media(max-width:600px){
  .team-card { max-width: 100%; }
  .testimonial-video { width: 200px; height: 360px; }
}
/* End of Team Section */