html{scroll-behavior:smooth}
body{opacity: 0;
  transition: opacity 0.8s ease-in-out;font-family:'Poppins',sans-serif;color:#111827;background:#fff;line-height:1.6}

body.loaded {
  opacity: 1;
}
img{max-width:100%;height:auto}
a{text-decoration:none;transition:.3s ease}
a:hover{opacity:.85}
.section{padding:6rem 1.5rem}
.container{max-width:1200px;margin:0 auto}
.navbar{position:fixed;top:0;left:0;width:100%;background:#fff;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;z-index:1000;transition:.4s ease;box-shadow:none}
.navbar.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.1)}
.nav-logo{display:flex;align-items:center;font-size:1.5rem;font-weight:700;color:#2563eb}
.nav-logo img{height:40px;margin-right:8px}
.nav-menu{display:flex;gap:2rem}
.nav-menu li a{color:#333;font-weight:500}
.cta-btn-sm{padding:.5rem 1.5rem;background:linear-gradient(to right,#2563eb,#4f46e5);color:#fff;border-radius:8px;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:.3s ease}
.cta-btn-sm:hover{transform:scale(1.05)}
.hero-section{position:relative;height:100vh;display:flex;justify-content:center;align-items:center;text-align:center;color:#fff;background:url('../img/hero-bg.jpg') center/cover no-repeat}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.hero-pattern{position:absolute;inset:0;background:url('../img/diagonal-stripes.png') repeat;opacity:.2}
.hero-content{position:relative;z-index:2;max-width:800px}
.hero-title{font-size:3rem;font-weight:800}
.hero-subtitle{margin:1.5rem 0;font-size:1.2rem}
.highlight{color:#facc15;font-weight:600}
.cta-btn{display:inline-block;padding:1rem 2rem;font-weight:700;border-radius:12px;background:linear-gradient(to right,#facc15,#f97316);color:#111827;transition:.3s ease}
.cta-btn:hover{transform:scale(1.05)}
.section-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem}
.section-sub{max-width:700px;margin:0 auto;font-size:1.1rem;color:#4b5563}
.service-card{background:#fff;padding:2rem;border-radius:1.5rem;box-shadow:0 6px 16px rgba(0,0,0,.08);text-align:center;transition:.3s ease}
.service-card:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(0,0,0,.15)}
.service-card img{height:80px;margin-bottom:1.2rem}
.service-card h3{font-size:1.4rem;font-weight:700;margin-bottom:.8rem}

     .flip-card {
    perspective: 1000px;
    height: 350px;
  }
  .flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  .flip-card:hover .flip-inner {
    transform: rotateY(180deg);
  }
  .flip-front, .flip-back {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    border-radius: 1rem;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  }
  .flip-front {
    background: #fff;
    padding: 2rem;
  }
  .flip-back {
    background: linear-gradient(to right, #2563eb, #4f46e5);
    color: #fff;
    transform: rotateY(180deg);
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tag {
    padding: 0.4rem 0.8rem;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    font-size: 0.8rem;
    border-radius: 9999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
  }
  .tag:hover { transform: scale(1.1); }
   .tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 2rem; justify-items: center; } .tech-icon { transition: transform 0.3s ease; } .tech-icon:hover { transform: scale(1.15); }
.testimonial-card{opacity:0;transform:translateY(40px);transition:.8s ease}
.testimonial-card.visible{opacity:1;transform:translateY(0)}
.faq-item{border:1px solid #e5e7eb;border-radius:.75rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.faq-item button{width:100%;padding:1rem;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.faq-content{padding:1rem;color:#4b5563}
.whatsapp-float{position:fixed;width:60px;height:60px;bottom:20px;right:20px;background:#25D366;color:#fff;border-radius:50%;text-align:center;font-size:30px;z-index:100;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.2);transition:.3s}
.whatsapp-float:hover{transform:scale(1.1)}

 .testimonial-card {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
  }
  .testimonial-card.visible {
    opacity: 1;
    transform: translateY(0);
  }