/* Basic reset and utilities */
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
body{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height:1.6;
    color:#333;
    background:#fff;
}
a{color:#0066cc; text-decoration:none;}
a:hover{text-decoration:underline;}
.container{width:90%;max-width:1200px;margin:0 auto;}

/* Navbar */
.navbar{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);position:sticky;top:0;z-index:1000;}
.navbar .container{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;}
.hire-btn{margin-left:1.5rem;padding:.6rem 1.2rem;font-weight:700;border-radius:4px;}
@media(max-width:768px){
    .hire-btn{display:none;}
}
.logo{font-weight:bold;font-size:1.6rem;color:#0066cc;letter-spacing:-.5px;}
.nav-links{display:flex;gap:1.5rem;align-items:center;}
.nav-links a{padding:.5rem .75rem;transition:color .2s,background .2s;border-radius:4px;color:#333;font-weight:500;}
.nav-links a:hover{color:#0066cc;background:#f0f7ff;}
.menu-toggle{display:none;border:none;background:none;cursor:pointer;width:32px;height:32px;flex-direction:column;justify-content:space-around;align-items:center;padding:0;position:relative;}
.menu-toggle span{display:block;width:100%;height:2.5px;background:#333;border-radius:1px;transition:all .3s ease;}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(8px, 8px);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px, -7px);}

/* Hero */
.hero{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:0 0 100px;text-align:center;background:linear-gradient(135deg,#0066cc 0%,#004a99 100%);color:#fff;}
.hero h1{font-size:3rem;margin-bottom:1rem;}
.hero .cta-buttons{margin-top:1.5rem;}
.welcome-badge{display:inline-block;background:#fef3c7;color:#92400e;padding:.5rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600;margin-bottom:1rem;}
.hero p{max-width:600px;margin:0 auto 1.5rem;}
.cta-buttons .btn{margin:0 .5rem;}

/* Buttons */
.btn{display:inline-block;padding:.75rem 1.5rem;border-radius:4px;font-weight:600;}
.primary{background:#0066cc;color:#fff;}
.secondary{background:#fff;color:#0066cc;border:2px solid #0066cc;}
.tertiary{background:#333;color:#fff;}

/* Sections */
section{padding:60px 0;}
section:nth-of-type(even){background:#f9f9f9;}
.about-content{display:flex;gap:2rem;align-items:center;flex-wrap:wrap;}
.about-content img{max-width:100%;border-radius:8px;}
/* Ensure about image keeps aspect ratio and is responsive */
.about-image{flex:0 0 520px;max-width:520px;width:100%;height:360px;object-fit:cover;border-radius:8px;margin:0 auto;}
@media(max-width:1024px){
    .about-image{max-width:420px;height:320px;}
}
@media(max-width:768px){
    .about-image{flex:1 1 auto;max-width:100%;height:240px;margin:0;}
}
.stats{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2rem;}
.stat{text-align:center;flex:1 1 120px;}
.stat h3{font-size:2rem;color:#0066cc;}

.services .service-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;}
.card{background:#fff;padding:1.5rem;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s;}
.card .icon{font-size:3rem;margin-bottom:.5rem;opacity:1;display:block;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:#f0f4f8;border-radius:8px;color:#0066cc;font-weight:700;}
.card .icon-web::after{content:'WEB';font-size:.9rem;}
.card .icon-mobile::after{content:'APP';font-size:.9rem;}
.card .icon-design::after{content:'UI/UX';font-size:.8rem;}
.card .icon-backend::after{content:'API';font-size:.9rem;}
.card .icon-ecommerce::after{content:'ECM';font-size:.9rem;}
.card .icon-consulting::after{content:'CSL';font-size:.9rem;}
.card:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(0,0,0,.15);}
.card h3{margin-bottom:.5rem;}

.projects .project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;}
.project{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s;position:relative;}
.project:hover{transform:translateY(-5px);box-shadow:0 4px 8px rgba(0,0,0,.15);}
.project:hover .project-overlay{opacity:1;}
.project img{width:100%;display:block;height:220px;object-fit:cover;border-bottom:1px solid rgba(0,0,0,.04);}
.project-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;gap:1rem;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;}
.overlay-btn{display:inline-block;padding:.5rem 1rem;background:#fff;color:#0066cc;border-radius:4px;text-decoration:none;font-weight:600;transition:all .2s;}
.overlay-btn:hover{background:#0066cc;color:#fff;}
.project h4{padding:1rem;}
.project p{padding:0 1rem 1rem;}
.project .category{position:absolute;top:1rem;left:1rem;background:#0066cc;color:#fff;padding:.25rem .5rem;font-size:.75rem;border-radius:3px;}
.project .btn.tertiary{margin:0 1rem 1rem;display:inline-block;}

.articles .article-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}
.articles article{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s;position:relative;}
.articles article:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(0,0,0,.15);}
.articles .badge{position:absolute;top:0.75rem;left:0.75rem;background:#0066cc;color:#fff;padding:.25rem .5rem;font-size:.75rem;border-radius:3px;z-index:1;}
.articles img{width:100%;display:block;height:180px;object-fit:cover;border-bottom:1px solid rgba(0,0,0,.04);}
.article-meta{padding:.75rem 1rem 0;display:flex;gap:1rem;font-size:.85rem;color:#999;}
.articles h4{padding:0.5rem 1rem 0;}
.articles p{padding:.5rem 1rem 0;}
.read-more{display:block;margin:0.5rem 1rem 1rem;color:#0066cc;font-weight:600;}

.clients .client-logos{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;}
.clients .logo{background:#0066cc;color:#fff;width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:bold;}

.workflow .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin:2rem 0;}
.step{background:#fff;padding:2rem;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.08);text-align:center;position:relative;transition:transform .3s,box-shadow .3s;}
.step:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0,0,0,.12);}
.step .icon{font-size:3rem;margin-bottom:1rem;width:auto;height:auto;display:block;background:none;border-radius:0;color:#0066cc;font-weight:700;}
.step h4{margin-bottom:.75rem;color:#333;}
.step p{color:#666;font-size:.9rem;line-height:1.6;}

.contact-grid{display:flex;gap:2rem;flex-wrap:wrap;}
.contact-info{flex:1 1 300px;}

.contact-info{flex:1 1 300px;}
.contact-info h3{margin-bottom:.5rem;font-size:1.5rem;}
.contact-info p{color:#666;margin-bottom:1.5rem;line-height:1.6;}
.contact-item{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:flex-start;}
.contact-icon{width:50px;height:50px;background:#0066cc;color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;font-weight:700;min-width:50px;}
.email-icon::before{content:'@';font-size:1.8rem;}
.phone-icon::before{content:'+';font-size:1.8rem;}
.location-icon::before{content:'L';font-size:1.2rem;}
.contact-label{font-size:.85rem;color:#999;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.contact-value{font-weight:600;color:#333;margin-top:.25rem;}
.whatsapp-btn{background:#25d366!important;color:#fff!important;border-radius:8px;margin-top:1.5rem;width:100%;text-align:center;padding:.75rem 1.5rem!important;}
.whatsapp-btn:hover{background:#20ba58!important;}
.contact-form{flex:1 1 300px;display:flex;flex-direction:column;gap:.75rem;}
.contact-form input,
.contact-form textarea{padding:.75rem;border:1px solid #ccc;border-radius:4px;width:100%;}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:#999;}
.contact-form button{width:100%;}

.map{margin-top:2rem;}

.footer{background:#1e293b;color:#cbd5e1;padding:3rem 0;}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem;}
.footer-section h5{color:#f1f5f9;margin-bottom:1rem;font-weight:700;}
.footer-section ul{list-style:none;}
.footer-section li{margin-bottom:.5rem;}
.footer-section a{color:#cbd5e1;transition:color .2s;}
.footer-section a:hover{color:#0066cc;}
.footer .about p{margin-bottom:1rem;}
.footer .social{display:flex;gap:.75rem;margin-top:1rem;}
.footer .social a{display:inline-block;padding:.4rem .8rem;background:rgba(255,255,255,.1);border-radius:4px;font-size:.85rem;color:#cbd5e1;transition:all .2s;border:1px solid rgba(255,255,255,.15);}
.footer .social a:hover{background:#0066cc;color:#fff;border-color:#0066cc;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);font-size:.9rem;}
.heart{color:#ef4444;}

/* responsive adjustments */
@media(max-width:768px){
    .navbar .container{padding:.5rem 0;}
    .nav-links{display:none;flex-direction:column;background:#fff;position:fixed;top:60px;left:0;right:0;padding:1rem;box-shadow:0 4px 12px rgba(0,0,0,.15);width:100%;max-height:calc(100vh - 60px);overflow-y:auto;border-bottom:1px solid #e0e0e0;}
    .nav-links.open{display:flex;}
    .nav-links a{padding:.75rem 1rem;display:block;border-bottom:1px solid #f0f0f0;}
    .nav-links a:last-child{border-bottom:none;}
    .menu-toggle{display:flex;}
    .about-content{flex-direction:column;}
    .contact-grid{flex-direction:column;}
    .hero h1{font-size:2rem;}
    .hero p{font-size:0.9rem;}
    .footer-bottom{flex-direction:column;gap:1rem;text-align:center;}
    .logo{font-size:1.4rem;}
}



@media(max-width:768px){
    .project img{height:160px;}
    .articles img{height:140px;}
    .about-image{max-height:320px;}
}


@media(max-width:480px){
    .project img{height:140px;}
    .articles img{height:120px;}
}

/* some AOS defaults overrides */
[aos-init]{opacity:0;transition-property:opacity,transform;}

/* Floating WhatsApp Button */
.floating-whatsapp{position:fixed;bottom:30px;right:30px;width:56px;height:56px;background:linear-gradient(135deg,#25d366 0%,#1fa856 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;box-shadow:0 4px 12px rgba(37,211,102,.3),0 0 0 0 rgba(37,211,102,.2);transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:999;text-decoration:none;border:none;cursor:pointer;animation:pulse 2s infinite;}
.floating-whatsapp:hover{transform:scale(1.12);box-shadow:0 6px 20px rgba(37,211,102,.5),0 0 0 6px rgba(37,211,102,.15);}
.floating-whatsapp:active{transform:scale(0.95);}
@keyframes pulse{
    0%{box-shadow:0 4px 12px rgba(37,211,102,.3),0 0 0 0 rgba(37,211,102,.2);}
    50%{box-shadow:0 4px 12px rgba(37,211,102,.3),0 0 0 8px rgba(37,211,102,.0);}
    100%{box-shadow:0 4px 12px rgba(37,211,102,.3),0 0 0 0 rgba(37,211,102,.2);}
}
@media(max-width:768px){
    .floating-whatsapp{bottom:20px;right:20px;width:54px;height:54px;font-size:.9rem;}
}