html,body{
  margin:0;
  width:100%;
  overflow-x:hidden;
  font-family:Inter,sans-serif;
  background:#F9FAFB;
  color:#111827;
}

img{max-width:100%;height:auto;display:block}
section{padding:90px 6%}
.center{text-align:center}
h1,h2,h3{font-family:Poppins,sans-serif}
p{color:#6B7280}

/* HEADER */
header{
  background:#fff;
  position:sticky;
  top:0;
  border-bottom:1px solid #E5E7EB;
  z-index:100;
}
.nav{
  max-width:1200px;
  margin:auto;
  padding:0 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.logo img{height:75px}

/* NAV */
nav{display:flex;gap:22px}
nav a{font-weight:500;position:relative;text-decoration: none;color: #111827;}
nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#2563EB;
  transition:.3s;
}
nav a:hover::after{width:100%}

/* MENU BTN */
/* ================= MENU BUTTON ================= */
.menu-btn{
  display:none;
  width:34px;
  height:26px;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  z-index:1001;
}

.menu-btn span{
  height:4px;
  width:100%;
  background:#111827;
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}

/* OPEN (X) STATE */
.menu-btn.open span:nth-child(1){
  transform:translateY(11px) rotate(45deg);
}

.menu-btn.open span:nth-child(2){
  opacity:0;
}

.menu-btn.open span:nth-child(3){
  transform:translateY(-11px) rotate(-45deg);
}

@media(max-width:900px){
  .menu-btn{
    display:flex;
  }

  nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:18px;
    transform:translateY(-100%);
    transition:.35s ease;
    z-index:1000;

  }

  nav.active{
    transform:translateY(0);
  }

  nav a{
    font-size:22px;
  }
}


/* HERO */
.hero{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}

/* BUTTON */
.btn{
  display:inline-block;
  margin-top:20px;
  padding:14px 28px;
  border-radius:999px;
  background:linear-gradient(135deg,#2563EB,#EC4899);
  color:#fff;
  font-weight:600;
  transition:.3s;
}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 35px rgba(37,99,235,.35);
}

/* SERVICES */
.services{background:#F3F4F6}
.service-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  align-items:center;
}

/* CARD */
.card{
  background:#fff;
  padding:40px;
  border-radius:18px;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
  transition:.35s;
}
.card:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 60px rgba(0,0,0,.15);
}

/* WORK AUTO SCROLL */
.work-track{
  display:flex;
  gap:30px;
  width:max-content;
  animation:workScroll 25s linear infinite;
}
.work-track:hover{animation-play-state:paused}

@keyframes workScroll{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
.work-track img{width:120px;margin:0 auto 12px}

/* CLIENT SCROLL */
.clients{background:#F3F4F6}
.logo-scroll{
  display:flex;
  gap:40px;
  animation:scrollLeft 5s linear infinite;
}
.logo-scroll:hover{animation-play-state:paused}
@keyframes scrollLeft{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* REVIEWS */
.review-scroll{
  display:flex;
  gap:30px;
  animation:scrollRight 5s linear infinite;
}
.review-scroll:hover{animation-play-state:paused}
@keyframes scrollRight{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
.review-card{
  background:#fff;
  padding:30px;
  border-radius:16px;
  min-width:300px;
}

/* ABOUT */
.about-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}


/* ================= CONTACT ================= */
.contact{background:#F3F4F6}

.contact-wrap{
  max-width:1000px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}

form{
  background:#fff;
  padding:40px;
  border-radius:18px;
  box-shadow:0 25px 50px rgba(0,0,0,.08);
}

form div{
  margin-bottom:18px;
}

label{
  font-weight:600;
  font-size:14px;
  margin-bottom:6px;
  display:block;
}

input,
textarea{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid #E5E7EB;
  font-size:15px;
  font-family:Inter,sans-serif;
  transition:border .25s, box-shadow .25s;
}

input:focus,
textarea:focus{
  outline:none;
  border-color:#2563EB;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

textarea{
  height:120px;
  resize:none;
}

.success{
  padding:20px;
  background:#ECFEFF;
  border-radius:12px;
  color:#065F46;
  font-weight:600;
  text-align:center;
}

/* Mobile form spacing */
@media(max-width:900px){
  form{
    padding:40px;
  }
}


/* WHATSAPP */
.wa{
  position:fixed;
  bottom:24px;
  right:24px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#2563EB;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;

  z-index:9999;                 /* 🔥 MOST IMPORTANT */
  pointer-events:auto;

  animation:pulse 2.5s infinite;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.6)}
  70%{box-shadow:0 0 0 20px rgba(37,99,235,0)}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}
}

/* RESPONSIVE */
@media(max-width:900px){
  .menu-btn{display:flex}
  nav{
    position:fixed;
    inset:0;
    background:#fff;
    flex-direction:column;
    justify-content:center;
    transform:translateY(-100%);
    transition:.35s;
  }
  nav.active{transform:none}

  .hero,.service-grid,.about-grid,.contact-wrap{
    grid-template-columns:1fr;
    text-align:center;
  }


 #work{
    overflow:hidden; 
      overflow:visible;              /* background stays fixed */
  }

  .work-track{
    position:relative;
    width:80%;
    height:340px;              /* enough for card height */
    animation:none;    
                      /* stop desktop scroll */
  }

  .work-track .card{
   text-align: center;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    opacity:0;
    transform:translateX(100%);
    transition:
      transform .6s ease,
      opacity .6s ease;
      /* text-align: center; */
  }

  .work-track .card.active{
    opacity:1;
    transform:translateX(0);
    z-index:2;
  }

  .work-track .card.prev{
    transform:translateX(-100%);
    opacity:0;
    z-index:1;
  }

  section{padding:60px 16px}


}

/* ================= FOOTER ================= */
footer{
  background:#111827;
  color:#F9FAFB;
  padding:40px 6%;
}

.footer-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr); /* ✅ ORIGINAL DESKTOP */
  gap:30px;
  align-items:start;
}

footer h4{
  margin-bottom:12px;
  font-family:Poppins,sans-serif;
  font-size:16px;
}

footer p{
  font-size:14px;
  line-height:1.6;
  color:#9CA3AF;
}

footer a{
  font-size:14px;
  color:#9CA3AF;
  text-decoration:none;
  transition:color .3s;
}

footer a:hover{
  color:#FFFFFF;
}

/* Footer logo */
footer img{
  display:block;
  height:36px;
}

/* ================= MOBILE FOOTER ================= */
@media(max-width:900px){
  .footer-grid{
    grid-template-columns:1fr;   /* ✅ STACK ONLY */
    text-align:center;
  }

  footer img{
    margin:0 auto 12px;
  }
}


/* ================= FLOAT ANIMATION ================= */
.float-img{
  animation: floatY 6s ease-in-out infinite;
  will-change: transform;
  transform: translate3d(0,0,0); /* 🔥 forces GPU layer */
  backface-visibility: hidden;
}

/* Use translate3d instead of translateY */
@keyframes floatY{
  0%,100%{
    transform: translate3d(0,0,0);
  }
  50%{
    transform: translate3d(0,-12px,0);
  }
}


/* ================= REVEAL BASE ================= */
.reveal-img{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s ease, transform .8s ease;
}

.reveal-img.show{
  opacity:1;
  transform:none;
}

/* ================= MOBILE OVERRIDE ================= */
/* @media (max-width:900px){
  .reveal-img{
    opacity:1 !important;
    transform:none !important;
  }
} */