@media (width<=480px){.container{padding:0 15px}}*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6}.container{width:90%;max-width:1200px;margin:0 auto;padding:0 20px}.header{z-index:1000;background-color:#fff;width:100%;position:fixed;top:0;box-shadow:0 2px 10px #0000001a}.header .container{justify-content:space-between;align-items:center;padding:20px 0;display:flex}.logo h2{color:#2563eb;font-size:24px;font-weight:700}.desktop-nav ul{list-style:none;display:flex}.desktop-nav li{margin:0 15px}.desktop-nav a{color:#333;font-weight:500;text-decoration:none;transition:color .3s}.desktop-nav a:hover{color:#2563eb}.menu-toggle{cursor:pointer;flex-direction:column;padding:5px;display:none}.bar{background-color:#333;width:25px;height:3px;margin:3px 0;transition:all .3s}.bar.active{background-color:#2563eb}.hero{background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);margin-top:70px;padding:150px 0 100px}.hero-content h1{color:#1e40af;margin-bottom:20px;font-size:3rem}.hero-content p{color:#4b5563;width:100%;max-width:none;margin-bottom:30px;font-size:1.2rem}.hero-buttons{gap:20px;display:flex}.btn{cursor:pointer;border:none;border-radius:5px;padding:12px 30px;font-weight:600;text-decoration:none;transition:all .3s}.btn.primary{color:#fff;background-color:#2563eb}.btn.primary:hover{background-color:#1d4ed8;transform:translateY(-2px);box-shadow:0 4px 12px #2563eb33}.btn.secondary{color:#2563eb;background-color:#0000;border:2px solid #2563eb}.btn.secondary:hover{color:#fff;background-color:#2563eb;transform:translateY(-2px)}section{padding:80px 0}h2{text-align:center;color:#1e40af;margin-bottom:60px;font-size:2.5rem}.about{background-color:#f8fafc}.about-content{align-items:center;gap:40px;display:flex}.about-text p{color:#4b5563;margin-bottom:20px;font-size:1.1rem}.services{background-color:#fff}.services-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;display:grid}.service-card{background-color:#f0f9ff;border-radius:10px;padding:30px;transition:transform .3s;box-shadow:0 4px 6px #0000000d}.service-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0000001a}.service-card h3{color:#1e40af;margin-bottom:15px;font-size:1.5rem}.portfolio{background-color:#f8fafc}.portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;display:grid}.portfolio-item{background-color:#fff;border-radius:10px;transition:transform .3s;overflow:hidden;box-shadow:0 4px 6px #0000001a}.portfolio-item:hover{transform:translateY(-5px);box-shadow:0 10px 20px #00000026}.project-image{background-color:#e0f2fe;border-bottom:1px solid #dbeafe;height:200px}.portfolio-item h3{color:#1e40af;padding:20px 20px 10px}.portfolio-item p{color:#4b5563;padding:0 20px 20px}.contact{background-color:#fff}.contact-content{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:50px;display:grid}.contact-info h3{color:#1e40af;margin-bottom:20px;font-size:1.8rem}.contact-info p{color:#4b5563;margin-bottom:30px}.contact-details p{margin-bottom:10px;font-weight:500}.contact-form{flex-direction:column;gap:20px;display:flex}.contact-form input,.contact-form textarea{border:1px solid #d1d5db;border-radius:5px;padding:15px;font-size:1rem}.contact-form input:focus,.contact-form textarea:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 3px #2563eb1a}.footer{color:#fff;text-align:center;background-color:#1e40af;padding:30px 0}.mobile-nav{background-color:#fff;display:none;box-shadow:0 2px 10px #0000001a}.mobile-nav ul{padding:20px 0;list-style:none}.mobile-nav li{border-bottom:1px solid #e5e7eb;padding:15px 0}.mobile-nav a{color:#333;padding:10px 20px;font-weight:500;text-decoration:none;transition:color .3s;display:block}.mobile-nav a:hover{color:#2563eb}@media (width<=768px){.menu-toggle{display:flex}.desktop-nav{display:none}.mobile-nav{display:block}.hero-content h1{font-size:2.5rem}.hero-buttons{flex-direction:column;gap:15px}.hero-content p{font-size:1rem}h2{font-size:2rem}.about-content{flex-direction:column}}@media (width<=480px){.container{padding:0 15px}section{padding:60px 0}.hero{padding:120px 0 80px}.hero-content h1{font-size:2rem}}