/* Process Section About Page */
 .process-icon {
      font-size: 48px;
      margin-bottom: 20px;
    }

    .process-title {
      font-weight: 800;
      text-transform: uppercase;
      margin-bottom: 15px;
    }

    .process-description {
      color: #6c757d;
      font-weight: 500;
      font-size: 15px;
    }

    .process-box {
      padding: 30px 20px;
      transition: 0.09s;
    }

/* About page client cards */
      *,::before,::after{
            margin: 0;
        }

        @property --angle {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: true;
        }

        /* general styling */
        .radio-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

        .main-body {
            margin: 0;
            font: 1rem system-ui;
        }

        .container-card {
           
            display: grid;
            place-content: center;
            padding: 1rem;
        }

        .testimonial-about-cards{
            --img-w: 200px;
            --duration: 300ms;
            --img-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
            width: min(100% - 4rem, 800px);
            margin-inline: auto;
            display: grid;
            counter-reset: my-counter;
        }

        .testimonial-card-review{
            --cards-grid-cols: auto;
            --cards-grid-rows: var(--img-w) auto;
            --cards-grid-gap: 2rem;
            --cards-footer-justify: center;
            
            grid-area: 1/1;
            display: grid;
            place-items: center; 
            grid-template-columns: var(--cards-grid-cols);
            grid-template-rows: var(--cards-grid-rows);
            gap: var(--cards-grid-gap);
        }

        /* Card angle classes */
        .card-angle-4 {
            --angle: 4deg;
        }

        .card-angle-neg8 {
            --angle: -8deg;
        }

        .card-angle-neg7 {
            --angle: -7deg;
        }

        .card-angle-11 {
            --angle: 11deg;
        }

        .card-angle-13 {
            --angle: 13deg;
        }

        .card-angle-neg17 {
            --angle: -17deg;
        }

        .card-angle-20 {
            --angle: 20deg;
        }

        @media (600px < width){
            .testimonial-card-review{
                --cards-grid-cols: var(--img-w) auto;
                --cards-grid-rows: auto;
                --cards-grid-gap: 4rem;
                --cards-footer-justify: start;
            }
        }

        .card-img{
            width: 200px;
            height: 200px;
            aspect-ratio: 1 / 1 ;
            rotate: var(--angle, 0deg);
            border-radius: 10px;
            border: 3px solid #FFF;
            overflow: hidden;
            transform-origin: center;
            object-fit: cover;
            box-shadow: 0 0 5px 3px rgba(0 0 0 / .05);
        }

        /* Radio button state animations - converted from input:nth-of-type to proper classes */
        .radio-1:checked + .testimonial-card-review ~ .testimonial-card-review > .card-img{
            animation: straighten-img-1 calc(var(--duration) * 2) forwards;
            animation-timing-function: var(--img-easing);
        }
        .testimonial-card-review:has(~.radio-2:checked) > .card-img,
        .radio-2:checked + .testimonial-card-review ~ .testimonial-card-review > .card-img{
            animation: straighten-img-2 calc(var(--duration) * 2) forwards;
            animation-timing-function: var(--img-easing);
        }
        .testimonial-card-review:has(~.radio-3:checked) > .card-img,
        .radio-3:checked + .testimonial-card-review ~ .testimonial-card-review > .card-img{
            animation: straighten-img-3 calc(var(--duration) * 2) forwards;
            animation-timing-function: var(--img-easing);
        }
        .testimonial-card-review:has(~.radio-4:checked) > .card-img,
        .radio-4:checked + .testimonial-card-review ~ .testimonial-card-review > .card-img{
            animation: straighten-img-4 calc(var(--duration) * 2) forwards;
            animation-timing-function: var(--img-easing);
        }
        .testimonial-card-review:has(~.radio-5:checked) > .card-img,
        .radio-5:checked + .testimonial-card-review ~ .testimonial-card-review > .card-img{
            animation: straighten-img-5 calc(var(--duration) * 2) forwards;
            animation-timing-function: var(--img-easing);
        }
        .testimonial-card-review:has(~.radio-6:checked) > .card-img,
        .radio-6:checked + .testimonial-card-review ~ .testimonial-card-review > .card-img{
            animation: straighten-img-6 calc(var(--duration) * 2) forwards;
            animation-timing-function: var(--img-easing);
        }
        .testimonial-card-review:has(~.radio-7:checked) > .card-img,
        .radio-7:checked + .testimonial-card-review ~ .testimonial-card-review > .card-img{
            animation: straighten-img-7 calc(var(--duration) * 2) forwards;
            animation-timing-function: var(--img-easing);
        }

        /* Animation keyframes */
        @keyframes straighten-img-1 { 50%{ --angle: 0deg;} }
        @keyframes straighten-img-2 { 50%{ --angle: 0deg;} }
        @keyframes straighten-img-3 { 50%{ --angle: 0deg;} }
        @keyframes straighten-img-4 { 50%{ --angle: 0deg;} }
        @keyframes straighten-img-5 { 50%{ --angle: 0deg;} }
        @keyframes straighten-img-6 { 50%{ --angle: 0deg;} }
        @keyframes straighten-img-7 { 50%{ --angle: 0deg;} }

        /* Z-index stacking - converted from input:checked to class-based */
        .testimonial-card-review{
            z-index: -1;
        }
        .radio-input:checked + .testimonial-card-review{
            z-index:10 !important;
        }
        .testimonial-card-review:has(+.radio-input:checked){
            z-index:9;
        }
        .testimonial-card-review:has(+.radio-input + .testimonial-card-review + .radio-input:checked){
            z-index:8;
        }
        .testimonial-card-review:has(+.radio-input + .testimonial-card-review +.radio-input + .testimonial-card-review + .radio-input:checked){
            z-index:7;
        }
        .testimonial-card-review:has(+.radio-input + .testimonial-card-review +.radio-input + .testimonial-card-review +.radio-input + .testimonial-card-review + .radio-input:checked){
            z-index:6;
        }
        .testimonial-card-review:has(+.radio-input + .testimonial-card-review +.radio-input + .testimonial-card-review +.radio-input + .testimonial-card-review +.radio-input + .testimonial-card-review + .radio-input:checked){
            z-index:5;
        }
        .testimonial-card-review:has(+.radio-input + .testimonial-card-review +.radio-input + .testimonial-card-review +.radio-input +.radio-input + .testimonial-card-review +.radio-input + .testimonial-card-review +.radio-input + .testimonial-card-review + .radio-input:checked){
            z-index:4;
        }
        .testimonial-card-review:has(+.radio-input + .testimonial-card-review +.radio-input + .testimonial-card-review +.radio-input  + .testimonial-card-review +.radio-input +.radio-input + .testimonial-card-review +.radio-input + .testimonial-card-review +.radio-input + .testimonial-card-review + .radio-input:checked){
            z-index:3;
        }

        .card-data{
            display: grid;
            gap: 1rem;
        }
        .card-num{
            opacity: var(--data-opacity, 0);
            font-size: .8rem;
            color: #666;
        }
        .card-text{
            font-size: 0.9rem;
        }
        .card-title,
        .card-text{
          color: #000;
            transition: var(--duration) ease-in-out;
            transition-delay: var(--data-delay,0ms);
            opacity: var(--data-opacity, 0);
            translate: 0 var(--data-y, 20px);
        }
        .card-footer{
            display: flex;
            justify-content: var(--cards-footer-justify);
            gap: 2rem;
        }
        .nav-label{
            margin-block-start: auto;
            cursor: pointer;
            pointer-events: var(--card-events, none);
            opacity: var(--data-opacity, 0);
            transition: color var(--duration) ease-in-out;
            color: var(--label-clr-txt,#000);
            background-color:var(--label-clr-bg,#EEE);
            border-radius: 50%;
            width: 32px;
            height: 32px;
            aspect-ratio: 1/1;
            display: grid;
            place-content: center;
            transition: background-color 300ms ease-in-out,color  300ms ease-in-out;
        }

        .radio-input:checked:focus-visible + .testimonial-card-review > .card-data > .card-footer .nav-label,
        .nav-label:hover{
            --label-clr-txt: #FFF;
            --label-clr-bg: steelblue;
        }

        .radio-input:checked + .testimonial-card-review{
            --data-opacity: 1;
            --data-y: 0;
            --data-delay: var(--duration);
            --card-events: auto;
            transition: z-index;
            transition-delay: 300ms;
        }

        .radio-input:checked +.testimonial-card-review > .card-img{
            animation: reveal-img calc(var(--duration) * 2) forwards;
        }

        @keyframes reveal-img{
            50%{
                translate: -150% 0;
                --angle: 0deg;
            }
        }


/* Why Choose Us in Service page */



.section-head h4 span {
  font-weight: 700;
  padding-bottom: 5px;
  color:#2f2f2f
}
p.service_text{
  color:#cccccc !important;
  font-size:16px;
  line-height:28px;
  text-align:center;    
}
.section-head p, p.awesome_line{
  color:#818181;
  font-size:16px;
  line-height:28px;
  text-align:center;  
}

.extra-text {
    font-size:34px;
    font-weight: 700;
    color:#2f2f2f;
    margin-bottom: 25px;
    position:relative;
    text-transform: none;
}
.extra-text::before {
    content: '';
    width: 60px;
    height: 3px;
    background: #1fbecc;
    position: absolute;
    left: 0px;
    bottom: -10px;
    right: 0;
    margin: 0 auto;
}
.extra-text span {
    font-weight: 700;
    color:#1fbecc;
}
.item {
    background: #fff;
        min-height: 325px;
    text-align: center;
    padding: 30px 25px;
    -webkit-box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
    box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    border:5px solid rgba(0, 0, 0, 0.07);
    margin-bottom: 30px;
    -webkit-transition: all .5s ease 0;
    transition: all .5s ease 0;
    transition: all 0.5s ease 0s;
}
.item:hover{
    background:#1fbecc;
    box-shadow:0 8px 20px 0px rgba(0, 0, 0, 0.2);
    -webkit-transition: all .5s ease 0;
    transition: all .5s ease 0;
    transition: all 0.5s ease 0s;
}
.item:hover .item, .item:hover span.icon{
    background:#fff;
    border-radius:10px;
    -webkit-transition: all .5s ease 0;
    transition: all .5s ease 0;
    transition: all 0.5s ease 0s;
}
.item:hover h6, .item:hover p{
    color:#fff;
    -webkit-transition: all .5s ease 0;
    transition: all .5s ease 0;
    transition: all 0.5s ease 0s;
}
.item .icon {
    font-size: 40px;
    margin-bottom:25px;
    color: #1fbecc;   
    width: 90px;
    height: 90px;
    line-height: 96px;
    border-radius: 50px;
}
.item .feature_box_col_one{
    background:rgba(247, 198, 5, 0.20);
    color:#1fbecc
}
.item .feature_box_col_two{
    background:rgba(255, 77, 28, 0.15);
    color:#1fbecc
}
.item .feature_box_col_three{
    background:rgba(0, 147, 38, 0.15);
    color:#1fbecc
}
.item .feature_box_col_four{
    background:rgba(0, 108, 255, 0.15);
    color:#1fbecc
}
.item .feature_box_col_five{
    background:rgba(146, 39, 255, 0.15);
    color:#1fbecc
}
.item .feature_box_col_six{
    background:rgba(23, 39, 246, 0.15);
    color:#1fbecc
}
.item p{
    font-size:15px;
    line-height:26px;
}
.item h6 {
    margin-bottom:20px;
    color:#2f2f2f;
}
.mission p {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 28px;
    font-weight: 500;
}
.mission i {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #1fbecc;
    border-radius: 50%;
    color: #fff;
    font-size: 25px;
}
.mission .small-text {
    margin-left: 10px;
    font-size: 13px;
    color: #666;
}
.skills {
    padding-top:0px;
}
.skills .prog-item {
    margin-bottom: 25px;
}
.skills .prog-item:last-child {
    margin-bottom: 0;
}
.skills .prog-item p {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 10px;
}
.skills .prog-item .skills-progress {
    width: 100%;
    height: 10px;
    background: #e0e0e0;
    border-radius:20px;
    position: relative;
}
.skills .prog-item .skills-progress span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #1fbecc;
    width: 10%;
    border-radius: 10px;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.skills .prog-item .skills-progress span:after {
    content: attr(data-value);
    position: absolute;
    top: -5px;
    right: 0;
    font-size: 10px;
    font-weight:600;    
    color: #fff;
    background:rgba(0, 0, 0, 0.9);
    padding: 3px 7px;
    border-radius: 30px;
}

/* Our Process Section Service Page */
/* from youth-vit dev code / you dont need this */

.centered {
  text-align: center;
}

.orange {
  background-color: rgb(245, 246, 250);
  color: #00054A;
}

/* new styles for process section */

.orange { padding: 60px 0 100px; }

.row { max-width: 100%; }

#process { 
  padding: 125px 0 0 0;
  display: flex;
    justify-content: center;
    align-items: center;
 }

.processBlock::before {
  content: '';
  position: relative;
  top: -5px;
  left: 93px;
  height: 4px;
  width: 109%;
  background: #ecf0f1;
}

.processBlock:before, .processBlock:after {
  content: " ";
  display: table;
}

.processDot {
  position: relative;
  top: -17px;
  left: 75px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #1fbecc;
  opacity: 0;
  background: #fff;
}

.processDot.lastDot { top: -14px; }

.processBlock .topProcess { position: relative; top: -94px; }

.processText {
  opacity: 0;
  text-transform: uppercase;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 21px;
  padding-left: 15px;
}

/* processDot */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.animated .processDot, .animated .processText {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.processBlock.one .processText {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.processBlock.two .processDot {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay:0.8s;
  animation-delay: 0.8s;
}

.processBlock.two .processText {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}

.processBlock.three .processDot {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.processBlock.three .processText {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}

.processBlock.four .processDot {
  -webkit-animation-delay: 2.4s;
  -moz-animation-delay: 2.4s;
  animation-delay: 2.4s;
}

.processBlock.four .processText {
  -webkit-animation-delay: 2.8s;
  -moz-animation-delay: 2.8s;
  animation-delay: 2.8s;
}

.processLast.five .processDot {
  -webkit-animation-delay: 3.2s;
  -moz-animation-delay: 3.2s;
  animation-delay: 3.2s;
}

.processLast.five .processText {
  -webkit-animation-delay: 3.6s;
  -moz-animation-delay: 3.6s;
  animation-delay: 3.6s;
}
.processLast.five .processDot {
  -webkit-animation-delay: 3.6s;
  -moz-animation-delay: 3.6s;
  animation-delay: 3.6s;
}

.processLast.five .processText {
  -webkit-animation-delay: 4.0s;
  -moz-animation-delay: 4.0s;
  animation-delay: 4.0s;
}

/* process line */
@-webkit-keyframes mymove { from { width: 0; opacity: 0 } to { width: 115%; opacity: 1; } }
@-moz-keyframes mymove { from { width: 0; opacity: 0 } to { width: 110%; opacity: 1; } }
@keyframes mymove { from { width: 0; opacity: 0 } to { width: 110%; opacity: 1; } }

.animated .processBlock::before {
  width: 0;
  opacity: 0;
  -webkit-animation:mymove ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:mymove ease-in 1;
  animation:mymove ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.processBlock.one::before {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.processBlock.two::before {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay:1.5s;
  animation-delay: 1.5s;
}

.processBlock.three::before {
  -webkit-animation-delay: 2.3s;
  -moz-animation-delay: 2.3s;
  animation-delay: 2.3s;
}

.processBlock.four::before {
  -webkit-animation-delay: 3.1s;
  -moz-animation-delay: 3.1s;
  animation-delay: 3.1s;
}
.processBlock.five::before {
  -webkit-animation-delay: 3.9s;
  -moz-animation-delay: 3.9s;
  animation-delay: 3.9s;
}


@media screen and (max-width: 767px) {
  
  .processBlock, .processLast { 
    height: 80px;
    width: 65%;
    margin: 0 auto;
  }
  
  .animated .processBlock::before {
    ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 1;
    
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
    
    height: 4px;
    width: 64px;
    top: 40px;
    left: 0;
  }
  
  .animated .processDot { 
    left: 22px;
    top: -10px;
    opacity: 1;    
    
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
  }
  
  .processDot.lastDot { left: 23px; top: -10px; }

  .processBlock .topProcess {
    position: inherit;
    top: inherit;
  }
  
  .animated .processText {
    opacity: 1;
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
    
    font-size: 22px;
    font-weight: 300;
    top: -37px !important;
    position: relative !important;
    text-align: left;
    padding-left: 80px;
  }
  
  .processText br { display: none; }
  
  #process { padding: 60px 0 0 0; }
  .orange { padding: 60px 0 25px; }
  
}

@media screen and (max-width: 480px) {
  
    .processBlock, .processLast { 
    width: 95%;
    margin-left: 5%;
  }
  
}

@media screen and (max-width: 320px) {
  
    .processBlock, .processLast { 
    width: 100%;
    margin-left: 0;
  }
  
}

.processBlock.six .processDot {
  -webkit-animation-delay: 4.4s;
  -moz-animation-delay: 4.4s;
  animation-delay: 4.4s;
}

.processBlock.six .processText {
  -webkit-animation-delay: 4.8s;
  -moz-animation-delay: 4.8s;
  animation-delay: 4.8s;
}

.processBlock.six::before {
  -webkit-animation-delay: 4.7s;
  -moz-animation-delay: 4.7s;
  animation-delay: 4.7s;
}


/* Service Details style */
        /* Hero Section */
        .hero {
            padding: 120px 0 80px;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.3);
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            opacity: 0;
            animation: fadeInUp 1s ease forwards;
        }

        .hero p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 0;
            animation: fadeInUp 1s ease 0.3s forwards;
        }

        .service-icon {
            width: 80px;
            height: 80px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 2rem;
            font-size: 2.5rem;
            opacity: 0;
            animation: fadeInUp 1s ease 0.1s forwards;
        }

        /* Main Content */
        .main-content {
           
            
        
            position: relative;
            z-index: 3;
            overflow: hidden;
        }

   

        .section-title {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 1rem;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            border-radius: 2px;
        }

        .section-subtitle {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 3rem;
        }

        /* Features Grid */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }

        .feature-card {
           
            padding: 2rem;
            border-radius: 15px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(102, 126, 234, 0.1);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
        }

        .feature-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .feature-card h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: #333;
        }

        .feature-card p {
            color: #666;
            line-height: 1.6;
        }

        /* Process Section */
   

        .service-details-process-steps {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3rem;
            position: relative;
        }

   

        .process-step {
            text-align: center;
            position: relative;
            z-index: 2;
            flex: 1;
        }

        .step-number {
            width: 60px;
            height: 60px;
            background-color: #1fbecc;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            margin: 0 auto 1rem;
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
        }

        .step-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .step-description {
            color: #666;
            font-size: 0.9rem;
            padding: 0px 15px;
        }

        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 4rem 3rem;
            text-align: center;
            color: white;
        }

        .cta-title {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .cta-description {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .service-detail-btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background: white;
            color: #667eea;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(255,255,255,0.3);
        }

        .btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid white;
        }

        .btn-secondary:hover {
            background: white;
            color: #667eea;
            transform: translateY(-2px);
        }

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

        /* Responsive */
        @media (max-width: 768px) {
            .service-detail-hero h1 {
                font-size: 2.5rem;
            }
            
            .service-detail-hero p {
                font-size: 1.1rem;
            }
            
.service-details-section-head{
  text-align: start !important;
}
            
            .service-details-process-steps {
                flex-direction: column;
                gap: 2rem;
            }
            
            .service-details-process-steps::before {
                display: none;
            }
            
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
            
        
        }

        /* Scroll animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }