/* service-page.css mein .service-hero ke purane code ko isse replace karein */
.service-hero {
    padding: 120px 0; /* Thodi zyada padding */
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    background-image: url('images/services/graphic-design.webp');
    background-size: cover;
    background-position: center;
}
.service-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Ek dark overlay taaki text aache se dikhe */
    background: rgba(10, 15, 25, 0.7); 
    z-index: 1;
}
.service-hero .container { 
    position: relative; 
    z-index: 2; 
}
.service-hero .sub-heading { color: #00aaff; font-weight: bold; }
.service-hero h1 { font-size: 3.5rem; margin-bottom: 20px; }
.service-hero .description { max-width: 600px; margin: 0 auto; color: #ccc; }


.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
}
/* Platforms Section */
.platforms-section { padding: 80px 0; background-color: #f9f9f9; }
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px; }
.platform-item { text-align: center; }
.platform-item img { height: 60px; margin-bottom: 15px; }
.platform-item span { font-weight: 600; }

/* Portfolio Section */
.portfolio-section { padding: 80px 0; }
.portfolio-slider { width: 100%; padding-top: 50px; padding-bottom: 50px; }
.portfolio-slider .swiper-slide { background-position: center; background-size: cover; width: 320px; height: 320px; }
.portfolio-card { position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; }
.portfolio-card img { width: 100%; height: 100%; object-fit: cover; }
.card-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); padding: 40px 20px 20px; color: #fff; }
.card-overlay h3 { margin: 0; }

/* Pricing Section */
.pricing-section { padding: 80px 0; background-color: #f9f9f9; }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.pricing-card { background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-align: center; }
.pricing-card h3 { font-size: 1.5rem; }
.pricing-card .price { font-size: 3rem; font-weight: bold; color: #007bff; margin: 10px 0; }
.pricing-card .per-item { color: #777; margin-bottom: 20px; }
.pricing-card ul { list-style: none; padding: 0; text-align: left; }
.pricing-card ul li { margin-bottom: 10px; }

/* CTA Section */
.cta-section { padding: 80px 0; text-align: center; background: #111; color: #fff; }
.cta-section h2 { font-size: 2.5rem; }
.cta-section p { margin-bottom: 30px; }
.cta-button { /* Re-use your existing button style or add new */
    background: #007bff; color: #fff; padding: 15px 30px; border-radius: 5px; text-decoration: none; font-weight: bold;
}

@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; }
}
/* service-page.css ke neeche yeh code add karein */

.pricing-card .whatsapp-cta {
    display: inline-block;
    background-color: #25D366; /* WhatsApp Green */
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px; /* Pill shape */
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card .whatsapp-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}