*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
}
html{
  scroll-behavior: smooth;
}
body{
  background:#0f0c29;
  color:white;
}

/* CONTAINER */
.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

/* NAVBAR */
.navbar{
  padding:20px 0;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
}

.logo-icon{
  width:22px;
  height:22px;
  background:linear-gradient(45deg,#ff7a18,#ff00cc);
  border-radius:50%;
}

nav a{
  margin:0 12px;
  color:#bbb;
  cursor:pointer;
}

.btn{
  background:linear-gradient(45deg,#ff7a18,#ff00cc);
  padding:10px 22px;
  border-radius:25px;
  border:none;
  color:white;
  font-weight:600;
  cursor:pointer;
}

/* HERO */
.hero{
  padding:80px 0;
  background: radial-gradient(circle at 70% 20%, #2a2456, #0f0c29);
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

/* LEFT */
.tag{
  color:#ff7a18;
  font-size:12px;
  letter-spacing:2px;
}

h1{
  font-size:58px;
  margin:20px 0;
  line-height:1.2;
}

.outline{
  color:transparent;
  -webkit-text-stroke:1px #fff;
}

/* SMART BOX */
.smart-box{
  margin-top:30px;
  height:220px;
  border-radius:80px;
  background:#eee;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

/* TEXT */
.smart-box h3{
  color:#111;
  font-size:28px;
  font-weight:600;
  z-index:2;
  transition:0.4s;
}

/* ICON ANIMATION */
.icons{
  position:absolute;
  width:100%;
  height:100%;
}

.dot{
  width:20px;
  height:20px;
  border-radius:50%;
  background:#ff7a18;
  position:absolute;
  animation:float 5s infinite;
}

.dot.small{
  width:10px;
  height:10px;
  background:#ff00cc;
}

.dot.big{
  width:30px;
  height:30px;
  background:#333;
}

/* POSITIONS */
.dot:nth-child(1){ top:20%; left:15%;}
.dot:nth-child(2){ top:70%; right:20%;}
.dot:nth-child(3){ bottom:20%; left:40%;}

/* FLOAT */
@keyframes float{
  0%{ transform:translateY(0);}
  50%{ transform:translateY(-15px);}
  100%{ transform:translateY(0);}
}

/* RIGHT */
.image-wrap{
  border-radius:200px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,0.2);
}

.image-wrap img{
  width:100%;
}

.right p{
  margin-top:20px;
  color:#ccc;
  line-height:1.6;
}

.divider{
  margin:20px 0;
  height:1px;
  background:rgba(255,255,255,0.2);
}

.cta{
  display:flex;
  align-items:center;
  gap:20px;
}

.avatars{
  display:flex;
}

.avatars img{
  width:35px;
  height:35px;
  border-radius:50%;
  border:2px solid #0f0c29;
  margin-left:-10px;
}

.clients span{
  margin-left:10px;
  font-size:14px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .hero-grid{
    grid-template-columns:1fr;
  }

  h1{
    font-size:34px;
  }

  nav{
    display:none;
  }
}/* ABOUT SECTION */
.about{
  padding:100px 0;
  background:#140f2d;
}

.about-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
}

/* LEFT */
.about-left h2{
  font-size:42px;
  margin:20px 0;
}

.about-left p{
  color:#ccc;
  line-height:1.7;
  margin-bottom:15px;
}

/* CTA */
.about-cta{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:20px;
}

.founder{
  display:flex;
  align-items:center;
  gap:10px;
}

.founder img{
  width:45px;
  height:45px;
  border-radius:50%;
}

.founder h4{
  font-size:14px;
}

.founder span{
  font-size:12px;
  color:#aaa;
}

/* DIVIDER */
.about-divider{
  margin:30px 0;
  height:1px;
  background:rgba(255,255,255,0.2);
  position:relative;
}

.about-divider::after{
  content:'✦';
  position:absolute;
  left:50%;
  top:-10px;
  transform:translateX(-50%);
  color:#ff7a18;
}

/* STATS */
.stats{
  display:flex;
  justify-content:space-between;
}

.stats h3{
  font-size:36px;
}

.stats p{
  font-size:12px;
  color:#aaa;
}

/* RIGHT */
.about-right{
  position:relative;
}

/* BIG IMAGE */
.big-img{
  border-radius:200px;
  overflow:hidden;
}

.big-img img{
  width:100%;
}

/* SMALL IMAGE */
.small-img{
  position:absolute;
  bottom:-40px;
  left:-40px;
  width:180px;
  border-radius:30px;
  overflow:hidden;
}

.small-img img{
  width:100%;
}

/* BADGE */
.badge{
  position:absolute;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:120px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:rotate 8s linear infinite;
}

.badge span{
  font-size:10px;
  text-align:center;
}

@keyframes rotate{
  from{transform:translateX(-50%) rotate(0deg);}
  to{transform:translateX(-50%) rotate(360deg);}
}

/* RESPONSIVE */
@media(max-width:768px){
  .about-grid{
    grid-template-columns:1fr;
  }

  .small-img{
    position:relative;
    left:0;
    bottom:0;
    margin-top:20px;
  }

  .badge{
    display:none;
  }
}
.small-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
}
/* SERVICES */
.services{
  padding:100px 0;
  background:#140f2d;
}

.services-grid{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:60px;
}

/* LEFT */
.services-left h2{
  font-size:42px;
  margin:20px 0;
}

.services-left p{
  color:#ccc;
  line-height:1.7;
  margin-bottom:20px;
}

/* RIGHT */
.services-right{
  display:flex;
  flex-direction:column;
  gap:40px;
}

/* SERVICE BOX */
.service-box{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  border-bottom:1px dashed rgba(255,255,255,0.2);
  padding-bottom:25px;
  gap:20px;
}

.number{
  font-size:60px;
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px #ff7a18;
  min-width:80px;
}

.service-content h3{
  font-size:24px;
  margin-bottom:10px;
}

.service-content p{
  color:#bbb;
  font-size:14px;
  line-height:1.6;
}

/* SMALL BUTTON */
.btn.small{
  padding:10px 20px;
  font-size:12px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .services-grid{
    grid-template-columns:1fr;
  }

  .service-box{
    flex-direction:column;
  }

  .number{
    font-size:40px;
  }
}
/* WHY SECTION CLEAN FIX */
.why{
  padding:100px 0;
  background:#140f2d;
  text-align:center;
}

/* TOP */
.why-top{
  max-width:800px;
  margin:0 auto 60px;
}

.why-top h2{
  font-size:42px;
  margin:20px 0;
}

.why-top p{
  color:#bbb;
  line-height:1.7;
}

/* GRID */
.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:60px;
  align-items:center;
}

/* LEFT + RIGHT */
.why-col{
  display:flex;
  flex-direction:column;
  gap:50px;
}

/* BOX */
.why-box{
  text-align:center;
}

.why-box i{
  font-size:26px;
  color:#ff7a18;
  margin-bottom:10px;
}

.why-box h3{
  font-size:20px;
  margin-bottom:10px;
}

.why-box p{
  font-size:14px;
  color:#bbb;
  line-height:1.6;
}

/* CENTER IMAGE */
.why-center{
  display:flex;
  justify-content:center;
  align-items:center;
}

.circle-img{
  position:relative;
  width:340px;
  height:420px;
  border-radius:50% / 40%;
  overflow:hidden;
  border:2px solid rgba(255,255,255,0.2);
}

.circle-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* PLAY BUTTON */
.play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:70px;
  height:70px;
  border-radius:50%;
  background:linear-gradient(45deg,#ff7a18,#ff4e50);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

/* RESPONSIVE */
@media(max-width:768px){
  .why-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .circle-img{
    width:260px;
    height:320px;
  }
}
/* PROCESS SECTION */
.process{
  padding:100px 0;
  background:#0f0c29;
  position:relative;
}

/* GRID */
.process-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

/* LEFT GRID (FIXED SIZE PERFECT DESIGN) */
.process-left{
  display:grid;
  grid-template-columns:repeat(2, 260px);
  justify-content:center;
  gap:30px;
}

/* BOX */
.process-box{
  height:200px;
  padding:30px;
  border-radius:20px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:0.4s;
}

/* NUMBER */
.process-box h2{
  font-size:48px;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,0.6);
}

/* TEXT */
.process-box p{
  margin-top:10px;
  color:#ddd;
}

/* ACTIVE (ORANGE BOX) */
.process-box.active{
  background:#d97a5c;
  color:#fff;
}

.process-box.active h2{
  -webkit-text-stroke:1px #fff;
}

/* PURPLE BOX */
.process-box.highlight{
  background:linear-gradient(135deg,#7f5af0,#9f7aea);
}

/* RIGHT SIDE */
.process-right h2{
  font-size:44px;
  margin:20px 0;
}

.process-right p{
  color:#bbb;
  line-height:1.7;
  margin-bottom:20px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .process-grid{
    grid-template-columns:1fr;
  }

  .process-left{
    grid-template-columns:1fr;
  }
}
/* PROCESS SECTION */
.process{
  padding:100px 0;
  background:#0f0c29;
}

.process-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.process-left{
  display:grid;
  grid-template-columns:repeat(2, 260px);
  justify-content:center;
  gap:30px;
}

.process-box{
  height:200px;
  padding:30px;
  border-radius:20px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:0.4s;
}

.process-box h2{
  font-size:48px;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,0.6);
}

.process-box p{
  margin-top:10px;
  color:#ddd;
}

.process-box.active{
  background:#d97a5c;
  color:#fff;
}

.process-box.active h2{
  -webkit-text-stroke:1px #fff;
}

.process-box.highlight{
  background:linear-gradient(135deg,#7f5af0,#9f7aea);
}

.process-right h2{
  font-size:44px;
  margin:20px 0;
}

.process-right p{
  color:#bbb;
  line-height:1.7;
  margin-bottom:20px;
}

@media(max-width:768px){
  .process-grid{
    grid-template-columns:1fr;
  }

  .process-left{
    grid-template-columns:1fr;
  }
}
/* TESTIMONIALS */
.testimonials{
  padding:100px 0;
  background:#140f2d;
}

.testimonials-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:center;
}

/* LEFT IMAGE */
.testimonial-img{
  border-radius:200px;
  overflow:hidden;
  border:2px dashed rgba(255,255,255,0.2);
}

.testimonial-img img{
  width:100%;
  display:block;
}

/* RIGHT */
.testimonial-right h2{
  font-size:44px;
  margin:20px 0;
}

.subtitle{
  color:#bbb;
  margin-bottom:30px;
  line-height:1.7;
}

/* CARD */
.testimonial-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  padding:30px;
  border-radius:20px;
}

/* STARS */
.stars{
  color:#ff7a18;
  margin-bottom:15px;
  font-size:18px;
}

/* TEXT */
.testimonial-card p{
  color:#ddd;
  line-height:1.7;
  margin-bottom:20px;
}

/* CLIENT */
.client-info{
  font-size:14px;
  color:#bbb;
}

/* RESPONSIVE */
@media(max-width:768px){
  .testimonials-grid{
    grid-template-columns:1fr;
  }
}
/* CTA SECTION */
.cta-section{
  position:relative;
  padding:120px 0;
  text-align:center;
  background:url('https://images.unsplash.com/photo-1555949963-aa79dcee981c') center/cover no-repeat;
  overflow:hidden;
}

/* DARK OVERLAY */
.cta-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,#140f2d 40%, rgba(20,15,45,0.7));
  z-index:1;
}

/* CONTENT */
.cta-content{
  position:relative;
  z-index:2;
}

.cta-content h2{
  font-size:48px;
  line-height:1.3;
  margin-bottom:20px;
}

.cta-content p{
  color:#ccc;
  margin-bottom:30px;
  font-size:16px;
}

/* BUTTON already exists (.btn) */

/* RESPONSIVE */
@media(max-width:768px){
  .cta-content h2{
    font-size:28px;
  }
}
/* PREMIUM FOOTER */
.footer{
  position:relative;
  background:#0f0c29;
  padding:100px 0 30px;
  color:#ccc;
  overflow:hidden;
}

/* GLOW BACKGROUND EFFECT */
.footer::before{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  background:radial-gradient(circle, rgba(255,122,24,0.3), transparent);
  top:-100px;
  left:-100px;
  filter:blur(120px);
}

.footer::after{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  background:radial-gradient(circle, rgba(255,0,204,0.3), transparent);
  bottom:-100px;
  right:-100px;
  filter:blur(120px);
}

/* GRID */
.footer-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:50px;
}

/* LOGO */
.footer-about p{
  margin:20px 0;
  line-height:1.7;
}

/* SOCIAL PREMIUM */
.socials{
  display:flex;
  gap:12px;
}

.socials a{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  transition:0.3s;
}

.socials a:hover{
  background:linear-gradient(45deg,#ff7a18,#ff00cc);
  transform:translateY(-5px) scale(1.1);
  box-shadow:0 10px 20px rgba(255,0,204,0.3);
}

.socials i{
  color:white;
}

/* LINKS */
.footer-links h3,
.footer-contact h3,
.footer-newsletter h3{
  color:#fff;
  margin-bottom:15px;
}

.footer-links ul{
  list-style:none;
}

.footer-links li{
  margin-bottom:10px;
  transition:0.3s;
  cursor:pointer;
}

.footer-links li:hover{
  color:#ff7a18;
  transform:translateX(5px);
}

/* CONTACT */
.footer-contact p{
  margin-bottom:12px;
  display:flex;
  align-items:center;
}

.footer-contact i{
  color:#ff7a18;
  margin-right:10px;
}

/* NEWSLETTER */
.footer-newsletter input{
  width:100%;
  padding:12px;
  border-radius:30px;
  border:none;
  outline:none;
  margin:10px 0;
  background:rgba(255,255,255,0.05);
  color:#fff;
}

.footer-newsletter input::placeholder{
  color:#aaa;
}

/* BUTTON GLOW */
.footer-newsletter .btn{
  width:100%;
  border-radius:30px;
  transition:0.3s;
}

.footer-newsletter .btn:hover{
  box-shadow:0 10px 30px rgba(255,0,204,0.4);
  transform:translateY(-2px);
}

/* BOTTOM */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:50px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  font-size:14px;
  position:relative;
  z-index:2;
}

.footer-bottom span{
  cursor:pointer;
  transition:0.3s;
}

.footer-bottom span:hover{
  color:#ff7a18;
}

/* RESPONSIVE */
@media(max-width:768px){
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .socials{
    justify-content:center;
  }

  .footer-bottom{
    flex-direction:column;
    gap:10px;
    text-align:center;
  }
}
/* CONTACT */
.contact{
  padding:100px 0;
  background:#140f2d;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}

.contact-left h2{
  font-size:40px;
  margin-bottom:20px;
}

.contact-left p{
  color:#bbb;
  margin-bottom:20px;
}

.contact-info p{
  margin:10px 0;
  color:#fff;
}

.contact-info i{
  color:#ff7a18;
  margin-right:10px;
}

/* FORM */
.contact-right form{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.contact-right input,
.contact-right textarea{
  padding:15px;
  border:none;
  border-radius:10px;
  background:rgba(255,255,255,0.05);
  color:#fff;
}

.contact-right textarea{
  height:120px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .contact-grid{
    grid-template-columns:1fr;
  }
}*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
}
.logo img{
  height:45px;
  object-fit:contain;
}
.logo img{
  height:70px;
  width:auto;
  object-fit:contain;
}.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 50px;  /* increase spacing */
}.logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo span{
  font-size:20px;
  font-weight:600;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo img{
  height:55px;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.logo span{
  font-size:22px;
  font-weight:600;
  color:#fff;
  letter-spacing:0.5px;
}/* ===== LOGO FIX FINAL ===== */

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* logo container */
.logo{
  display:flex;
  align-items:center;
  gap:6px; /* gap kam kiya */
}

/* logo image (bird icon) */
.logo img{
  height:75px; /* bird bada kiya */
  width:auto;
  object-fit:contain;
}

/* text */
.logo span{
  font-size:22px;
  font-weight:600;
  color:#fff;
}

/* agar center aa raha ho to force left */
.navbar .logo{
  margin-right:auto;
}.logo{
  display:flex;
  align-items:center;
}

.logo img{
  height:80px;
  width:auto;
  object-fit:contain;
}.logo img{
  height:85px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
/* LOGO FIX COMPLETE */
.logo {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* left side */
}

.logo img {
  height: 100px;   /* logo بڑا */
  width: auto;
  object-fit: contain;
}

/* optional: header alignment */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}