.main-container{max-width:1400px;margin:100px auto 0;padding:30px 20px;perspective:1000px}.ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:40px;padding:10px;background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:60px;box-shadow:0 10px 30px #0000000d}.ul li{margin:0;padding:12px 28px;border:none;border-radius:40px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:600;color:#4a5568;position:relative;overflow:hidden}.ul li:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#15803d 0% 100%);opacity:0;transition:opacity .3s ease;z-index:-1}.ul li:hover{color:#15803d;transform:translateY(-2px)}.ul li.selected-category{background:linear-gradient(135deg,#15803d 0% 100%);color:#fff;box-shadow:0 10px 20px #10b9814d}.ul li.selected-category:hover{transform:translateY(-2px);box-shadow:0 15px 30px #10b98166}.imagess{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;margin-top:20px}.website-card{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 20px 40px #00000014;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(16,185,129,.1)}.website-card{display:flex;flex-direction:column;height:100%}.website-card:hover{transform:translateY(-10px);box-shadow:0 30px 60px #10b98126;border-color:#10b9814d}.website-image-container{position:relative;overflow:hidden;height:280px}.website-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}.website-card:hover .website-image{transform:scale(1.1)}.website-image-container:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,rgba(0,0,0,.1),transparent);opacity:0;transition:opacity .3s ease}.website-card:hover .website-image-container:after{opacity:1}.website-info{padding:24px;background:linear-gradient(135deg,#fff,#fafafa);display:flex;flex-direction:column;flex:1 1 auto}.website-name{font-size:1.2rem!important;font-weight:600;color:#1e293b;margin-bottom:8px;line-height:1.3}.website-description{color:#64748b;font-size:.95rem;line-height:1.6;margin-bottom:20px}.promotional-banner{background:linear-gradient(135deg,#15803d,#15803d);color:#fff;padding:3px;margin-bottom:20px;overflow:hidden;box-shadow:0 4px 15px #10b9814d}.marquee{display:inline-block;white-space:nowrap;animation:scroll-left 15s linear infinite;font-weight:400;letter-spacing:.5px;font-size:13px}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.package-includes-section{margin:20px 0;padding:16px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:16px;border-left:4px solid #15803d}.package-includes-title{font-size:1rem;font-weight:700;color:#1e293b;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.package-content{transition:all .4s ease-in-out;overflow:hidden}.package-content.collapsed{max-height:90px}.package-content.expanded{max-height:300px}.package-line{font-size:.9rem;color:#475569;padding:8px 0 8px 24px;border-bottom:1px solid #e2e8f0;position:relative}.package-line:before{content:"✓";position:absolute;left:0;color:#15803d;font-weight:700;font-size:1rem}.package-line:last-child{border-bottom:none}.more-btn{background:none;border:none;color:#15803d;font-size:.9rem;font-weight:600;cursor:pointer;padding:10px 0 0;margin-top:8px;transition:all .3s ease;display:flex;align-items:center;gap:4px}.more-btn:hover{color:#15803d;gap:8px}.more-btn:after{content:"→";transition:transform .3s ease}.more-btn:hover:after{transform:translate(4px)}.website-buttons{display:flex;gap:12px;margin-top:auto}.add-to-cart-btn,.details-btn{flex:1;min-height:46px;padding:12px 16px;border:none;border-radius:12px;font-weight:700;font-size:.9rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:center;text-decoration:none;letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;line-height:1.2;position:relative;overflow:hidden}.add-to-cart-btn{background:linear-gradient(135deg,#15803d,#15803d);color:#fff;box-shadow:0 4px 15px #10b9814d}.add-to-cart-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #10b98166}.details-btn{background:linear-gradient(135deg,#22c55e,#16a34a);color:#000;border:1px solid #15803d;margin-top:0;box-shadow:0 10px 22px #16a34a3d}.details-btn:hover{background:linear-gradient(135deg,#4ade80,#22c55e);color:#000;transform:translateY(-3px);box-shadow:0 14px 28px #16a34a57}.details-btn:focus-visible{outline:3px solid rgba(34,197,94,.35);outline-offset:3px}.details-btn:active{transform:translateY(-1px);box-shadow:0 8px 18px #16a34a42}.image{position:relative;border-radius:24px;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 20px 40px #00000014;height:280px}.image img,.image video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}.image:hover{transform:translateY(-10px) rotateY(5deg);box-shadow:0 30px 60px #10b98133}.image:hover img,.image:hover video{transform:scale(1.1)}.image:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#10b9814d,#0596691a);opacity:0;transition:opacity .4s ease;z-index:1}.image:hover:before{opacity:1}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .3s ease}.modal-content{background:#fff;border-radius:32px;max-width:1200px;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:zoomIn .4s cubic-bezier(.4,0,.2,1);scrollbar-width:thin;scrollbar-color:#15803d #e2e8f0}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background:#e2e8f0;border-radius:4px}.modal-content::-webkit-scrollbar-thumb{background:#15803d;border-radius:4px}.close-modal{position:absolute;top:20px;right:20px;width:48px;height:48px;background:#fff;border:none;border-radius:50%;font-size:24px;color:#1e293b;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;transition:all .3s ease;z-index:10}.close-modal:hover{transform:rotate(90deg);background:#15803d;color:#fff}.modal-image-container{position:relative;background:#f8fafc;padding:20px}.modal-main-image{width:100%;max-height:60vh;-o-object-fit:contain;object-fit:contain;border-radius:20px}.image-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;background:#fff;border:none;border-radius:50%;font-size:28px;color:#1e293b;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;transition:all .3s ease}.image-nav:hover{background:#15803d;color:#fff;transform:translateY(-50%) scale(1.1)}.image-nav.prev{left:20px}.image-nav.next{right:20px}.image-thumbnails{display:flex;gap:12px;justify-content:center;margin-top:20px;overflow-x:auto;padding:10px 0}.thumbnail{width:80px;height:60px;-o-object-fit:cover;object-fit:cover;border-radius:12px;cursor:pointer;transition:all .3s ease;opacity:.6;border:2px solid transparent}.thumbnail:hover{opacity:.8;transform:translateY(-2px)}.thumbnail.active{opacity:1;border-color:#15803d;transform:scale(1.05)}.modal-details{padding:30px}.modal-details h2{font-size:2rem;font-weight:800;color:#1e293b;margin-bottom:8px;line-height:1.2}.modal-details h3{font-size:1.2rem;color:#64748b;margin-bottom:20px;font-weight:500}.modal-pricing-section{background:linear-gradient(135deg,#f0fdf4,#dcfce7);padding:24px;border-radius:24px;margin:24px 0;text-align:center;border:1px solid rgba(16,185,129,.2)}.modal-original-price{text-decoration:line-through;color:#94a3b8;font-size:1.2rem;margin-bottom:8px}.modal-current-price{font-size:3rem;font-weight:800;color:#15803d;margin-bottom:12px;line-height:1.2}.modal-discount-badge{display:inline-block;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;padding:8px 24px;border-radius:40px;font-size:1rem;font-weight:700;margin-bottom:12px;box-shadow:0 4px 15px #ef44444d}.modal-savings{font-size:1rem;color:#ef4444;font-weight:600}.modal-description{font-size:1.1rem;line-height:1.8;color:#475569;margin:24px 0;padding:20px;background:#f8fafc;border-radius:16px}.modal-section{margin:30px 0}.modal-section h4{font-size:1.3rem;font-weight:700;color:#1e293b;margin-bottom:16px;display:flex;align-items:center;gap:8px}.modal-section h4:before{content:"";width:4px;height:24px;border-radius:2px}.modal-section ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}.overflow-x-auto{-webkit-overflow-scrolling:touch;scroll-behavior:smooth;margin-top:20px}.modal-section ul li{padding:12px 16px;background:#f8fafc;border-radius:12px;color:#475569;font-size:1rem;display:flex;align-items:center;gap:8px;transition:all .3s ease}.modal-section ul li:hover{background:#e2e8f0;transform:translate(4px)}.modal-section ul li:before{content:"✓";color:#15803d;font-weight:700}.modal-actions{display:flex;gap:16px;margin-top:30px}.modal-live-demo{flex:1;padding:16px 24px;background:linear-gradient(135deg,#15803d,#15803d);color:#fff;text-decoration:none;border-radius:50px;font-weight:700;font-size:1.1rem;text-align:center;transition:all .3s ease;box-shadow:0 4px 15px #10b9814d;border:none;cursor:pointer}.modal-live-demo:hover{transform:translateY(-2px);box-shadow:0 8px 25px #10b98166}.digital-marketing-portfolio{padding:40px 0}.digital-marketing-portfolio h2{background:linear-gradient(135deg,#1e293b,#15803d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.5rem;margin-bottom:16px}.fixed.bottom-6.right-6 button{background:linear-gradient(135deg,#15803d,#15803d);color:#fff;padding:16px 32px;border-radius:60px;font-weight:700;font-size:1.1rem;box-shadow:0 10px 30px #10b98166;border:none;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:12px;animation:pulse 2s infinite}.fixed.bottom-6.right-6 button:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 20px 40px #10b98180}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.typing-effect p{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid #15803d;width:0;animation:typing 4s steps(40) 1s forwards;color:#475569;font-size:1.1rem;margin:8px 0}@keyframes typing{0%{width:0}to{width:100%}}.fixed.top-4.right-4{border-radius:16px;padding:16px 24px;box-shadow:0 10px 30px #00000026;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.main-container{margin-top:80px;padding:20px 15px}.ul{border-radius:30px;padding:8px;gap:8px}.ul li{padding:8px 16px;font-size:.9rem}.imagess{grid-template-columns:1fr;gap:20px}.website-name{font-size:1.3rem}.modal-content{width:95%;border-radius:20px}.modal-details h2{font-size:1.5rem}.modal-current-price{font-size:2rem}.modal-section ul{grid-template-columns:1fr}.website-buttons{flex-direction:column}.image-nav{width:40px;height:40px;font-size:20px}.fixed.bottom-6.right-6 button{padding:12px 20px;font-size:.9rem}}@media (max-width: 480px){.ul li{padding:6px 12px;font-size:.85rem}.modal-details{padding:20px}.modal-pricing-section{padding:16px}.modal-current-price{font-size:1.8rem}}.loading{position:relative;overflow:hidden}.loading:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:loading 1.5s infinite}@keyframes loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media print{.modal-overlay{position:static;background:none}.modal-content{box-shadow:none;max-height:none;overflow:visible}.close-modal,.image-nav,.modal-actions{display:none}}.btn2{background-color:#15803d!important}
