


.service-hero {
 background:linear-gradient(135deg, var(--primary-color) 0%, var(--background-dark) 100%);
 color:var(--text-light);
 padding:120px 0 80px;
 text-align:center;
 position:relative;
 overflow:hidden;
}


.service-hero-video-background {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index:1;
}

.service-hero-video {
 width:100%;
 height:100%;
 object-fit:cover;
 position:absolute;
 top:0;
 left:0;
}

.service-hero-video-overlay {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(0, 0, 0, 0.4);
 z-index:2;
}

.service-hero-content {
 max-width:800px;
 margin:0 auto;
 position:relative;
 z-index:3;
}


.service-hero-video-background + .container .service-hero-content {
 mix-blend-mode:difference;
 color:white;
}

.service-hero-video-background + .container .service-hero-title {
 -webkit-text-fill-color:white;
 background:white;
 -webkit-background-clip:text;
 background-clip:text;
}

.service-hero-video-background + .container .service-hero-subtitle {
 color:white;
}

.service-hero-video-background + .container .btn-back {
 color:white;
}

.service-hero-video-background + .container .btn-back:hover {
 color:white;
}

.service-hero-video-background + .container .sale-banner {
 mix-blend-mode:difference;
 background:white;
 color:black;
}

.back-link {
 margin-bottom:2rem;
 text-align:left;
}

.btn-back {
 color:var(--secondary-color);
 text-decoration:none;
 font-weight:500;
 transition:var(--transition);
 display:inline-flex;
 align-items:center;
 gap:0.5rem;
}

.btn-back:hover {
 color:var(--text-light);
 transform:translateX(-5px);
}

.service-hero-title {
 font-size:clamp(2.5rem, 5vw, 4rem);
 font-weight:700;
 margin-bottom:1.5rem;
 background:linear-gradient(135deg, var(--text-light), var(--secondary-color));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}

.service-hero-subtitle {
 font-size:1.3rem;
 margin-bottom:2rem;
 opacity:0.9;
}

.sale-banner {
 display:inline-flex;
 align-items:center;
 gap:0.5rem;
 background:linear-gradient(135deg, #ff6b35, #ff8e53);
 color:var(--text-light);
 padding:1rem 2rem;
 border-radius:50px;
 font-weight:600;
 font-size:1.1rem;
 box-shadow:0 4px 15px rgba(255, 107, 53, 0.3);
 animation:pulse 2s infinite;
}

.sale-icon {
 font-size:1.2rem;
}

@keyframes pulse {
 0%, 100% {transform:scale(1)}
 50% {transform:scale(1.05)}
}


.service-card-clickable {
 cursor:pointer;
 transition:all 0.3s ease;
 position:relative;
 overflow:hidden;
}

.service-card-clickable::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:linear-gradient(135deg, rgba(16, 28, 40, 0.05), rgba(42, 63, 82, 0.05));
 opacity:0;
 transition:var(--transition);
}

.service-card-clickable:hover::before {
 opacity:1;
}

.service-card-clickable:hover {
 transform:translateY(-8px) scale(1.02);
 box-shadow:0 12px 30px rgba(0, 0, 0, 0.2);
}

.btn-special {
 background:linear-gradient(135deg, #ff6b35, #ff8e53);
 color:var(--text-light);
 border:none;
 position:relative;
 overflow:hidden;
}

.btn-special:hover {
 background:linear-gradient(135deg, #ff8e53, #ff6b35);
 transform:translateY(-2px);
}


.packages {
 padding:100px 0;
 background:var(--background-light);
}

.packages-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:2rem;
 margin-top:3rem;
}

.package-card {
 background:var(--text-light);
 border-radius:20px;
 padding:2.5rem 2rem;
 box-shadow:var(--shadow);
 transition:var(--transition);
 position:relative;
 border:2px solid transparent;
}

.package-card:hover {
 transform:translateY(-5px);
 box-shadow:var(--shadow-hover);
}

.package-card.popular {
 border-color:#ff6b35;
 transform:scale(1.05);
}

.package-card.popular:hover {
 transform:scale(1.05) translateY(-5px);
}

.popular-badge {
 position:absolute;
 top:-10px;
 left:50%;
 transform:translateX(-50%);
 background:linear-gradient(135deg, #ff6b35, #ff8e53);
 color:var(--text-light);
 padding:0.5rem 1.5rem;
 border-radius:20px;
 font-size:0.9rem;
 font-weight:600;
}

.package-header {
 text-align:center;
 margin-bottom:2rem;
}

.package-header h3 {
 font-size:1.5rem;
 font-weight:600;
 color:var(--primary-color);
 margin-bottom:1rem;
}

.package-icon {
 font-size:3rem;
 margin-bottom:1rem;
}

.package-pricing {
 text-align:center;
 margin-bottom:2rem;
}

.price-original {
 font-size:1.2rem;
 color:#999;
 text-decoration:line-through;
 margin-bottom:0.5rem;
}

.price-sale {
 font-size:2.5rem;
 font-weight:700;
 color:var(--primary-color);
 margin-bottom:0.5rem;
}

.price-monthly {
 font-size:2rem;
 font-weight:700;
 color:var(--primary-color);
}

.price-sale span,
.price-monthly span {
 font-size:1rem;
 font-weight:400;
 color:#666;
}

.savings {
 background:#e8f5e8;
 color:#2d5a2d;
 padding:0.3rem 1rem;
 border-radius:15px;
 font-size:0.9rem;
 font-weight:600;
 display:inline-block;
}

.package-features h4 {
 color:var(--primary-color);
 margin-bottom:1rem;
 font-size:1.1rem;
}

.package-features ul {
 list-style:none;
 margin-bottom:2rem;
}

.package-features li {
 padding:0.5rem 0;
 position:relative;
 padding-left:1.5rem;
 color:var(--text-dark);
}

.package-features li::before {
 content:'✓';
 position:absolute;
 left:0;
 color:#28a745;
 font-weight:bold;
}

.package-delivery {
 text-align:center;
 margin-bottom:2rem;
}

.delivery-badge {
 background:var(--accent-color);
 color:var(--text-light);
 padding:0.5rem 1rem;
 border-radius:20px;
 font-size:0.9rem;
 font-weight:500;
}

.btn-package {
 width:100%;
 padding:1rem;
 font-size:1.1rem;
 font-weight:600;
 border-radius:50px;
 border:2px solid var(--primary-color);
 background:transparent;
 color:var(--primary-color);
 transition:var(--transition);
}

.btn-package:hover {
 background:var(--primary-color);
 color:var(--text-light);
 transform:translateY(-2px);
}

.btn-popular {
 background:linear-gradient(135deg, #ff6b35, #ff8e53);
 color:var(--text-light);
 border-color:transparent;
}

.btn-popular:hover {
 background:linear-gradient(135deg, #ff8e53, #ff6b35);
}

.btn-insurance {
 background:var(--accent-color);
 color:var(--text-light);
 border-color:var(--accent-color);
}

.btn-insurance:hover {
 background:var(--primary-color);
 border-color:var(--primary-color);
}


.btn-tertiary {
 background:#6c757d;
 color:white;
 border:2px solid #6c757d;
 padding:12px 24px;
 border-radius:8px;
 font-weight:600;
 text-decoration:none;
 cursor:pointer;
 transition:all 0.3s ease;
 display:inline-block;
 text-align:center;
}

.btn-tertiary:hover {
 background:#5a6268;
 border-color:#5a6268;
 transform:translateY(-2px);
}




.modal-actions {
 display:flex;
 gap:1rem;
 flex-wrap:wrap;
 margin-top:1.5rem;
}

.modal-actions .btn {
 flex:1;
 min-width:120px;
}

.package-card.insurance {
 background:linear-gradient(135deg, rgba(42, 63, 82, 0.05), rgba(16, 28, 40, 0.05));
 grid-column:1 / -1;
 display:flex;
 align-items:center;
 gap:2rem;
 padding:2rem 3rem;
 min-height:200px;
}

.package-card.insurance .package-content {
 display:flex;
 align-items:center;
 gap:3rem;
 width:100%;
}

.package-card.insurance .package-left {
 display:flex;
 align-items:center;
 gap:2rem;
 flex:1;
}

.package-card.insurance .package-center {
 flex:2;
 text-align:left;
}

.package-card.insurance .package-right {
 flex:1;
 text-align:center;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:1rem;
}

.package-card.insurance .package-header {
 margin-bottom:0;
 text-align:left;
}

.package-card.insurance .package-pricing {
 margin-bottom:0;
 text-align:center;
}

.package-card.insurance .package-features {
 margin-bottom:0;
}

.package-card.insurance .package-features h4 {
 margin-bottom:0.5rem;
}

.package-card.insurance .package-features ul {
 margin-bottom:0;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:0.3rem 1rem;
}

.package-card.insurance .package-delivery {
 margin-bottom:0;
}

.package-card.insurance .btn-package {
 width:auto;
 padding:0.8rem 2rem;
 white-space:nowrap;
}


.enterprise {
 padding:100px 0;
 background:var(--primary-color);
 color:var(--text-light);
}

.enterprise .section-title {
 color:var(--text-light);
}

.enterprise .section-subtitle {
 color:var(--secondary-color);
}

.enterprise-grid {
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:4rem;
 margin-top:3rem;
 align-items:start;
}

.enterprise-features h3 {
 font-size:1.5rem;
 margin-bottom:1.5rem;
 color:var(--secondary-color);
}

.enterprise-features ul {
 list-style:none;
}

.enterprise-features li {
 padding:0.7rem 0;
 position:relative;
 padding-left:1.5rem;
 color:var(--text-light);
 opacity:0.9;
}

.enterprise-features li::before {
 content:'→';
 position:absolute;
 left:0;
 color:var(--secondary-color);
 font-weight:bold;
}

.enterprise-cta {
 background:rgba(217, 217, 217, 0.1);
 padding:2.5rem;
 border-radius:20px;
 text-align:center;
}

.enterprise-cta h3 {
 font-size:1.5rem;
 margin-bottom:1rem;
 color:var(--secondary-color);
}

.enterprise-cta p {
 margin-bottom:2rem;
 opacity:0.9;
 line-height:1.6;
}

.btn-enterprise {
 background:var(--secondary-color);
 color:var(--primary-color);
 border:none;
 padding:1rem 2rem;
 border-radius:50px;
 font-weight:600;
 transition:var(--transition);
}

.btn-enterprise:hover {
 background:var(--text-light);
 transform:translateY(-2px);
}


.technology {
 padding:100px 0;
 background:var(--background-light);
 overflow:hidden;
}

.tech-carousel{margin-top:3rem;overflow:hidden;position:relative;scroll-behavior:smooth;scrollbar-width:none}.tech-carousel::-webkit-scrollbar{display:none}.tech-carousel:hover .tech-track{animation-play-state:running}.tech-item[data-tooltip]:hover::before,.tech-item[data-tooltip]:hover::after{display:none!important;content:none!important}.tech-logo:hover,.tech-link:hover{background:transparent!important;box-shadow:none!important;transform:none!important}.tech-logo:hover .tech-icon,.tech-link:hover .tech-icon{transform:none!important}.tech-logo:hover .tech-name,.tech-link:hover .tech-name{color:var(--primary-color)!important}.tech-logo.webflow:hover,.tech-logo.woocommerce:hover,.tech-logo.wordpress:hover,.tech-logo.wix:hover,.tech-logo.framer:hover,.tech-logo.html5:hover,.tech-logo.css3:hover,.tech-logo.javascript:hover,.tech-logo.python:hover,.tech-logo.react:hover,.tech-logo.nodejs:hover,.tech-logo.shopify:hover{background:transparent!important;box-shadow:none!important;transform:none!important}.tech-logo.webflow:hover .tech-name,.tech-logo.woocommerce:hover .tech-name,.tech-logo.wordpress:hover .tech-name,.tech-logo.wix:hover .tech-name,.tech-logo.framer:hover .tech-name,.tech-logo.html5:hover .tech-name,.tech-logo.css3:hover .tech-name,.tech-logo.javascript:hover .tech-name,.tech-logo.python:hover .tech-name,.tech-logo.react:hover .tech-name,.tech-logo.nodejs:hover .tech-name,.tech-logo.shopify:hover .tech-name{color:var(--primary-color)!important}

.tech-track {
 display:flex;
 animation:scroll 45s linear infinite!important;
 gap:2rem;
}

.tech-item {
 flex-shrink:0;
 width:150px;
 position:relative;
}

.tech-item[data-tooltip]:hover::before {
 content:attr(data-tooltip);
 position:absolute;
 top:-40px;
 left:50%;
 transform:translateX(-50%);
 background:var(--primary-color);
 color:var(--text-light);
 padding:0.5rem 1rem;
 border-radius:8px;
 font-size:0.8rem;
 white-space:nowrap;
 z-index:10;
 box-shadow:var(--shadow);
}

.tech-item[data-tooltip]:hover::after {
 content:'';
 position:absolute;
 top:-8px;
 left:50%;
 transform:translateX(-50%);
 border:6px solid transparent;
 border-top-color:var(--primary-color);
 z-index:10;
}

.tech-logo {
 background:transparent;
 padding:0;
 border-radius:0;
 box-shadow:none;
 height:auto;
 gap:.25rem;
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 overflow:visible;
}

.tech-logo::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
 opacity:0;
 transition:var(--transition);
}

.tech-logo:hover::before {
 opacity:1;
}

.tech-logo:hover {
 transform:none;
 box-shadow:none;
}

.tech-icon {
 width:50px;
 height:50px;
 transition:var(--transition);
}

.tech-logo:hover .tech-icon {
 transform:scale(1.1);
}

.tech-name {
 font-weight:600;
 color:var(--primary-color);
 font-size:0.8rem;
 text-align:center;
 line-height:1.2;
}


.tech-logo.webflow:hover {
 background:linear-gradient(135deg, #4353ff, #5663ff);
}

.tech-logo.webflow:hover .tech-name {
 color:white;
}

.tech-logo.woocommerce:hover {
 background:linear-gradient(135deg, #7b4397, #8e4aa8);
}

.tech-logo.woocommerce:hover .tech-name {
 color:white;
}

.tech-logo.wordpress:hover {
 background:linear-gradient(135deg, #21759b, #2e85b3);
}

.tech-logo.wordpress:hover .tech-name {
 color:white;
}

.tech-logo.wix:hover {
 background:linear-gradient(135deg, #0c6ebd, #1a7bc7);
}

.tech-logo.wix:hover .tech-name {
 color:white;
}

.tech-logo.framer:hover {
 background:linear-gradient(135deg, #000, #333);
}

.tech-logo.framer:hover .tech-name {
 color:white;
}

.tech-logo.html5:hover {
 background:linear-gradient(135deg, #e34f26, #f16539);
}

.tech-logo.html5:hover .tech-name {
 color:white;
}

.tech-logo.css3:hover {
 background:linear-gradient(135deg, #1572b6, #2e87c8);
}

.tech-logo.css3:hover .tech-name {
 color:white;
}

.tech-logo.javascript:hover {
 background:linear-gradient(135deg, #f7df1e, #f9e55a);
}

.tech-logo.javascript:hover .tech-name {
 color:#000;
}

.tech-logo.python:hover {
 background:linear-gradient(135deg, #3776ab, #4a87c2);
}

.tech-logo.python:hover .tech-name {
 color:white;
}

.tech-logo.react:hover {
 background:linear-gradient(135deg, #61dafb, #7ee3fc);
}

.tech-logo.react:hover .tech-name {
 color:#000;
}

.tech-logo.nodejs:hover {
 background:linear-gradient(135deg, #8cc84b, #a1d45e);
}

.tech-logo.nodejs:hover .tech-name {
 color:white;
}

.tech-logo.shopify:hover {
 background:linear-gradient(135deg, #7ab55c, #8fc46f);
}

.tech-logo.shopify:hover .tech-name {
 color:white;
}

@keyframes scroll {
 0% {transform:translateX(0)}
 100% {transform:translateX(-100%)}
}


.cta-section {
 padding:80px 0;
 background:linear-gradient(135deg, var(--primary-color), var(--accent-color));
 color:var(--text-light);
 text-align:center;
}

.cta-content h2 {
 font-size:2.5rem;
 margin-bottom:1rem;
 font-weight:700;
}

.cta-content p {
 font-size:1.2rem;
 margin-bottom:2rem;
 opacity:0.9;
}

.cta-buttons {
 display:flex;
 gap:1rem;
 justify-content:center;
 flex-wrap:wrap;
}

.btn-cta-primary {
 background:var(--secondary-color);
 color:var(--primary-color);
 border:none;
 padding:1rem 2rem;
 border-radius:50px;
 font-weight:600;
 transition:var(--transition);
}

.btn-cta-primary:hover {
 background:var(--text-light);
 transform:translateY(-2px);
}

.btn-cta-secondary {
 background:transparent;
 color:var(--secondary-color);
 border:2px solid var(--secondary-color);
 padding:1rem 2rem;
 border-radius:50px;
 font-weight:600;
 transition:var(--transition);
}

.btn-cta-secondary:hover {
 background:var(--secondary-color);
 color:var(--primary-color);
 transform:translateY(-2px);
}


@media (max-width:768px) {
 .packages-grid {
 grid-template-columns:1fr;
 gap:1.5rem;
 }
 
 .package-card.popular {
 transform:none;
 }
 
 .package-card.popular:hover {
 transform:translateY(-5px);
 }
 
 .package-card.insurance {
 flex-direction:column;
 text-align:center;
 padding:2rem;
 min-height:auto;
 }
 
 .package-card.insurance .package-content {
 flex-direction:column;
 gap:1.5rem;
 }
 
 .package-card.insurance .package-left {
 flex-direction:column;
 gap:1rem;
 text-align:center;
 }
 
 .package-card.insurance .package-center,
 .package-card.insurance .package-right {
 flex:none;
 text-align:center;
 }
 
 .package-card.insurance .package-features ul {
 grid-template-columns:1fr;
 }
 
 .package-card.insurance .btn-package {
 width:100%;
 }
 
 .enterprise-grid {
 grid-template-columns:1fr;
 gap:2rem;
 }
 
 .service-hero {
 padding:100px 0 60px;
 }
 
 .cta-buttons {
 flex-direction:column;
 align-items:center;
 }
 
 .tech-item {
 width:120px;
 }
 
 .tech-logo {
 height:60px;
 }
 
 .tech-name {
 font-size:0.8rem;
 }
}

@media (max-width:480px) {
 .package-card {
 padding:2rem 1.5rem;
 }
 
 .enterprise-cta {
 padding:2rem 1.5rem;
 }
 
 .sale-banner {
 flex-direction:column;
 gap:0.3rem;
 padding:1rem 1.5rem;
 font-size:1rem;
 }
} 

.tech-link{display:flex;flex-direction:column;align-items:center;text-decoration:none;pointer-events:auto;cursor:pointer}.tech-item,.tech-logo,.tech-logo *{pointer-events:auto} 

.tech-logo::before,.tech-logo:hover::before{display:none!important} 

.tech-item[data-tooltip]::before,.tech-item[data-tooltip]::after,.tech-item[data-tooltip]:hover::before,.tech-item[data-tooltip]:hover::after{display:none!important;content:none!important}.tech-item{pointer-events:auto}.tech-track{display:flex;gap:2rem;animation:scroll 45s linear infinite!important} 

.tech-name{display:none!important} 

