:root {
     --primary: #2a4f6a;
     --secondary: #0e2b6c;
     --accent: #e4353a;
     --light: #f3f4f6;
     --dark: #2a4f6a;
     --success: #10b981;
     --gray: #777;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 body {
     line-height: 1.6;
     color: var(--dark);
     background-color: #f9fafb;
     overflow-x: hidden;
 }

 .container-service {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* Page Header */
 .pageHeader {
     background: linear-gradient(rgba(14, 43, 108, 0.8), rgba(14, 43, 108, 0.9)), url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
     color: white;
     padding: 5rem 0;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .pageHeader::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.3);
     z-index: 0;
 }

 .pageHeaderContent {
     max-width: 800px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
     animation: fadeInUp 1s ease;
 }

 .pageHeader h1 {
     font-size: 2.8rem;
     margin-bottom: 1rem;
     animation: fadeInUp 1s ease 0.2s both;
 }

 .breadcrumb {
     display: flex;
     justify-content: center;
     list-style: none;
     animation: fadeInUp 1s ease 0.4s both;
 }

 .breadcrumb li {
     margin: 0 0.5rem;
 }

 .breadcrumb a {
     color: white;
     text-decoration: none;
 }



 /* Section Styles */
 section {
     padding: 5rem 0;
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.8s ease, transform 0.8s ease;
 }

 section.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .sectionTitle {
     text-align: center;
     margin-bottom: 3rem;
 }

 .sectionTitle h2 {
     font-size: 2.2rem;
     color: var(--secondary);
     margin-bottom: 1rem;
     position: relative;
     display: inline-block;
 }

 .sectionTitle h2::after {
     content: '';
     position: absolute;
     width: 60px;
     height: 3px;
     background-color: var(--accent);
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
 }

 .sectionTitle p {
     color: var(--gray);
     max-width: 700px;
     margin: 1.5rem auto 0;
 }

 /* Service Intro */
 .serviceIntro {
     background-color: white;
 }

 .introContent {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 3rem;
 }

 .introText {
     flex: 1;
     min-width: 300px;
 }

 .introText p {
     margin-bottom: 1.5rem;
     font-size: 1.1rem;
 }

 .introImage {
     flex: 1;
     min-width: 300px;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
     transition: all 0.5s ease;
 }

 .introImage:hover {
     transform: translateY(-5px) scale(1.02);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }

 .introImage img {
     width: 100%;
     height: auto;
     display: block;
     transition: transform 0.5s ease;
 }

 .introImage:hover img {
     transform: scale(1.05);
 }

 /* What We Do */
 .whatWeDo {
     background-color: var(--light);
 }

 .servicesGrid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
 }

 .serviceCard {
     background: white;
     padding: 2rem;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .serviceCard::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 5px;
     background: linear-gradient(90deg, var(--primary), var(--secondary));
     transform: scaleX(0);
     transform-origin: right;
     transition: transform 0.3s ease;
 }

 .serviceCard:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .serviceCard:hover::after {
     transform: scaleX(1);
     transform-origin: left;
 }

 .serviceIcon {
     font-size: 2.5rem;
     color: var(--primary);
     margin-bottom: 1rem;
     transition: all 0.3s ease;
 }

 .serviceCard:hover .serviceIcon {
     color: var(--accent);
     transform: scale(1.1);
 }

 /* Why Outsource */
 .whyOutsource {
     background-color: white;
 }

 .benefitsGrid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
 }

 .benefitCard {
     background: var(--light);
     padding: 2rem;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     border-left: 4px solid var(--primary);
 }

 .benefitCard:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     border-left: 4px solid var(--accent);
 }

 .benefitIcon {
     font-size: 2rem;
     color: var(--primary);
     margin-bottom: 1rem;
 }

 /* How It Works */
 .howItWorks {
     background-color: var(--light);
 }

 .steps {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 2rem;
     margin-top: 3rem;
 }

 .stepCard {
     background: white;
     border-radius: 10px;
     padding: 2rem;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     flex: 1;
     min-width: 250px;
     max-width: 350px;
     text-align: center;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .stepCard::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 5px;
     background: linear-gradient(90deg, var(--primary), var(--secondary));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s ease;
 }

 .stepCard:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .stepCard:hover::before {
     transform: scaleX(1);
 }

 .stepIcon {
     font-size: 3rem;
     color: var(--primary);
     margin-bottom: 1rem;
     transition: all 0.3s ease;
 }

 .stepCard:hover .stepIcon {
     color: var(--secondary);
     transform: scale(1.1);
 }

 .stepNumber {
     background-color: var(--primary);
     color: white;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1rem;
     font-weight: bold;
     transition: all 0.3s ease;
 }

 .stepCard:hover .stepNumber {
     background-color: var(--accent);
     transform: rotate(360deg);
 }

 /* CTA Section */
 .ctaSection {
     background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
     color: white;
     text-align: center;
     padding: 4rem 0;
     position: relative;
     overflow: hidden;
 }

 .ctaSection::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     transform: rotate(30deg);
     animation: shimmer 8s infinite linear;
 }

 .ctaSection h2 {
     font-size: 2.2rem;
     margin-bottom: 1.5rem;
     position: relative;
 }

 .ctaSection p {
     max-width: 700px;
     margin: 0 auto 2rem;
     font-size: 1.1rem;
     position: relative;
 }

 .ctaButton {
     background-color: var(--accent);
     color: white;
     padding: 0.6rem 1.5rem;
     border-radius: 30px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s;
     display: inline-block;
     position: relative;
     overflow: hidden;
     z-index: 1;
 }

 .ctaButton::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: all 0.4s ease;
     z-index: -1;
 }

 .ctaButton:hover {
     background-color: #e03600;
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .ctaButton:hover::before {
     left: 100%;
 }

 /* Animations */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes shimmer {
     from {
         transform: translateX(-100%) rotate(30deg);
     }

     to {
         transform: translateX(100%) rotate(30deg);
     }
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .pageHeader h1 {
         font-size: 2.2rem;
     }

     .sectionTitle h2 {
         font-size: 1.8rem;
     }

     .introContent,
     .steps {
         flex-direction: column;
     }

     .stepCard {
         max-width: 100%;
     }
 }