/* onboard-css */

        
       .banner-onboard {
            
            min-height: 700px;
            padding: 80px 0 60px;
            position: relative;
            overflow: hidden; */
        } *

        /* Background Beams Animation */
/*         //.background-beams {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 1;
        }

        .beam {
            position: absolute;
            width: 2px;
            height: 200px;
            background: linear-gradient(180deg, 
                rgba(255, 87, 51, 0) 0%, 
                rgba(255, 87, 51, 0.4) 50%, 
                rgba(255, 87, 51, 0) 100%);
            animation: beam-fall linear infinite;
            opacity: 0;
        }

        @keyframes beam-fall {
            0% {
                transform: translateY(-200px);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(100vh);
                opacity: 0;
            }
        } */

        /* Decorative elements */
        .decorative-element {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: rgba(255, 87, 51, 0.3);
            border-radius: 50%;
            z-index: 5;
        }

        .decorative-element.diamond {
            transform: rotate(45deg);
            border-radius: 2px;
        }

        .banner-content {
            text-align: center;
            position: relative;
            z-index: 10;
        }

        .banner-title {
            font-size: 48px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 20px;
            line-height: 1.2;
            letter-spacing: -0.5px;
        }

        .banner-title .highlight {
            color: #ff5733;
            font-weight: 600;
        }

        .banner-description {
            font-size: 15px;
            font-weight: 400;
            color: #6b7280;
            line-height: 1.6;
            margin-bottom: 35px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .button-group {
            display: flex;
            gap: 15px;
            justify-content: center;
            align-items: center;
/*             margin-bottom: 60px; */
        }

        .btn-primary-custom {
            background-color: #ff5733;
            color: #ffffff;
            border: none;
            padding: 13px 32px;
            font-size: 15px;
            font-weight: 500;
            border-radius: 16px;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .btn-primary-custom:hover {
            background-color: #e64a2e;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255, 87, 51, 0.3);
            color: #ffffff;
        }

        .btn-secondary-custom {
            background-color: transparent;
            color: #ff5733;
            border: 1.5px solid #ff5733;
            padding: 12px 32px;
            font-size: 15px;
            font-weight: 500;
            border-radius: 16px;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .btn-secondary-custom:hover {
            background-color: #ff5733;
            color: #ffffff;
            transform: translateY(-1px);
        }

        .banner-image-container {
            text-align: center;
            margin-top: 50px;
            position: relative;
            z-index: 10;
        }

        .banner-image {
           max-width: 700px;
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 991px) {
            .banner-title {
                font-size: 40px;
            }

          .banner-image {
                max-width: 600px;
            } 
        }

        @media (max-width: 767px) {
            .banner-onboard {
                min-height: 600px;
                padding: 60px 0 40px;
            }

            .banner-title {
                font-size: 32px;
            }

            .banner-description {
                font-size: 14px;
            }

            .button-group {
                flex-direction: column;
                gap: 12px;
            }

            .btn-primary-custom,
            .btn-secondary-custom {
                width: 100%;
                max-width: 280px;
            }

            .banner-image {
                max-width: 100%;
            }
        }


/*onboarding-section*/


        .onboarding-section {
            background-color: #2B2323;
            border-radius: 22px;
            padding: 70px 40px;
            text-align: center;
            color: #fff;
            margin: 80px auto;
            max-width: 1500px;
        }
        
        .onboarding-title {
            font-size: 2.2rem;
            font-weight: 600;
            color: #F37124;
            margin-bottom: 12px;
        }
        
        .onboarding-description {
            font-size: 1.05rem;
            color: #bfbfbf;
            margin-bottom: 70px;
        }
        
        .onboarding-steps {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            position: relative;
            gap: 2rem;
        }
        
        .onboarding-connector {
            position: absolute;
            top: 35px;
            left: 13%;
            right: 13%;
            height: 2px;
            background: #4a4a4a;
            z-index: 0;
        }
        
        /* Animated line that flows */
        .onboarding-connector::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent 0%,
                #F37124 40%,
                #F37124 60%,
                transparent 100%
            );
            animation: flowLine 12s ease-in-out infinite;
            box-shadow: 0 0 15px rgba(243, 113, 36, 0.6);
        }
        
        @keyframes flowLine {
            0% {
                width: 0%;
                left: 0%;
            }
            33.33% {
                width: 33.33%;
                left: 0%;
            }
            33.34% {
                width: 0%;
                left: 33.33%;
            }
            66.66% {
                width: 33.33%;
                left: 33.33%;
            }
            66.67% {
                width: 0%;
                left: 66.66%;
            }
            100% {
                width: 33.34%;
                left: 66.66%;
            }
        }
        
        .onboarding-step {
            flex: 1;
            min-width: 200px;
            max-width: 280px;
            position: relative;
            z-index: 1;
        }
        
        .onboarding-icon-wrapper {
            width: 70px;
            height: 70px;
            margin: 0 auto 18px;
            border-radius: 50%;
            border: 2px dashed #8a8a8a;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s ease;
            position: relative;
        }
        
        /* Glow effect for active circles */
        .onboarding-icon-wrapper.active {
            border-color: #F37124;
            background-color: #F37124;
            box-shadow: 0 0 25px rgba(243, 113, 36, 0.8),
                        0 0 40px rgba(243, 113, 36, 0.5);
            animation: rotateCircle 0.8s ease-in-out;
        }
        
        @keyframes rotateCircle {
            0% {
                transform: rotate(0deg) scale(1);
            }
            50% {
                transform: rotate(180deg) scale(1.15);
            }
            100% {
                transform: rotate(360deg) scale(1);
            }
        }
        
        /* Pulse effect for connecting circles */
        .onboarding-icon-wrapper.connecting {
            border-color: #F37124;
            animation: pulseGlow 1s ease-in-out infinite;
        }
        
        @keyframes pulseGlow {
            0%, 100% {
                box-shadow: 0 0 10px rgba(243, 113, 36, 0.4);
            }
            50% {
                box-shadow: 0 0 20px rgba(243, 113, 36, 0.7);
            }
        }
        
        .onboarding-icon {
            font-size: 32px;
            color: #000;
            transition: color 0.5s ease;
        }
        
        .onboarding-icon-wrapper.active .onboarding-icon {
            color: #fff;
        }
        
        .onboarding-step-title {
            font-size: 1.25rem;
            color: #fff;
            font-weight: 600;
            margin-bottom: 7px;
        }
        
        .onboarding-step-description {
            font-size: 0.96rem;
            color: #c6c6c6;
            line-height: 1.4;
        }
        
        .onboarding-step-highlight .onboarding-icon-wrapper {
            background-color: #F37124;
            border-color: #F37124;
        }
        
        .onboarding-step-highlight .onboarding-icon {
            color: #fff;
        }
        
        @media (max-width: 768px) {
            .onboarding-connector {
                display: none;
            }
            
            .onboarding-section {
                padding: 50px 20px;
            }
            
            .onboarding-steps {
                gap: 3rem;
            }
        }

    /* semeless-integration */


        .seamless-integration {
            padding: 80px 0;
            background-color: #fafafa;
            overflow: hidden;
        }

        .integration-heading {
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 24px;
            color: #1a1a1a;
        }

        .integration-heading-highlight {
            color: #ff6b3d;
        }

        .integration-description {
            font-size: 1.1rem;
            line-height: 1.7;
            color: #666;
            margin-bottom: 40px;
        }

        .integration-features-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .integration-feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            font-size: 1rem;
            color: #444;
        }

        .integration-feature-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #ff6b3d;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            flex-shrink: 0;
            position: relative;
        }

        .integration-feature-icon::before {
            content: '✓';
            color: #ff6b3d;
            font-size: 12px;
            font-weight: bold;
            line-height: 1;
        }

        .integration-visual-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 500px;
        }

        .integration-orbit-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            aspect-ratio: 1;
        }

        /* Orbit paths */
        .integration-orbit-outer {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            height: 90%;
            border: 2px solid #ff6b3d;
            border-radius: 50%;
            opacity: 0.2;
        }

        .integration-orbit-inner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 65%;
            height: 65%;
            border: 2px solid #ff6b3d;
            border-radius: 50%;
            opacity: 0.2;
        }

        .integration-center-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .integration-logo-placeholder {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #ff6b3d 0%, #ff8f6b 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
        }

        /* Orbiting icons container */
        .orbit-path {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
        }

        /* Outer orbit (larger circle) */
        .orbit-path-outer {
            width: 90%;
            height: 90%;
        }

        /* Inner orbit (smaller circle) */
        .orbit-path-inner {
            width: 65%;
            height: 65%;
        }

        .integration-platform-icon {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            transition: all 0.3s ease;
            /* Start from top center of the orbit */
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .integration-platform-icon:hover {
            transform: translate(-50%, -50%) scale(1.15);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
            z-index: 20;
        }

        /* Platform icon backgrounds */
        .integration-icon-teams {
            background: #5558AF;
        }

        .integration-icon-slack {
            background: white;
            border: 2px solid #f0f0f0;
        }

        .integration-icon-workday {
            background: #0066CC;
            color: white;
        }

        .integration-icon-bamboo {
            background: #73C41D;
        }

        .integration-icon-loading {
            background: white;
            border: 2px solid #f0f0f0;
        }

        .integration-icon-azure {
            background: #00B8E6;
        }

        @media (max-width: 991px) {
            .seamless-integration {
                padding: 60px 0;
            }

            .integration-heading {
                font-size: 2rem;
            }

            .integration-visual-wrapper {
                margin-top: 40px;
                min-height: 400px;
            }

            .integration-orbit-container {
                max-width: 400px;
            }

            .integration-center-logo {
                width: 100px;
                height: 100px;
            }

            .integration-logo-placeholder {
                width: 60px;
                height: 60px;
                font-size: 20px;
            }

            .integration-platform-icon {
                width: 50px;
                height: 50px;
                font-size: 24px;
            }
        }

        @media (max-width: 767px) {
            .integration-heading {
                font-size: 1.75rem;
            }

            .integration-description {
                font-size: 1rem;
            }

            .integration-visual-wrapper {
                min-height: 350px;
            }

            .integration-orbit-container {
                max-width: 320px;
            }

            .integration-platform-icon {
                width: 45px;
                height: 45px;
                font-size: 20px;
            }
        }

      /* end-to-end-section */
        
      .end-to-end {
            background-color: #fafafa;
            padding: 80px 0;
            min-height: 650px;
        }

        .section-title {
            font-size: 36px;
            font-weight: 500;
            color: #3a3a3a;
            margin-bottom: 15px;
            letter-spacing: -0.5px;
        }

        .section-title .highlight {
            color: #ff5733;
            font-weight: 600;
        }

        .section-description {
            font-size: 14px;
            font-weight: 400;
            color: #6b7280;
            line-height: 1.6;
            margin-bottom: 50px;
        }

        .feature-item {
            margin-bottom: 25px;
            padding: 10px 25px 10px 20px;
            transition: all 0.5s ease;
            cursor: pointer;
            position: relative;
        }

        .feature-item.active {
            border-color: #e5e7eb;
            border-left-color: #ff5733;
            background-color: #fff9f7;
            box-shadow: 0 8px 24px rgba(255, 87, 51, 0.15);
            transform: translateX(5px);
        }

        .feature-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 12px;
        }

        .feature-icon {
            width: 40px;
            height: 40px;
            background-color: #fff5f2;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .feature-item.active .feature-icon {
            background-color: #ff5733;
            transform: scale(1.1);
        }

        .feature-icon svg {
            width: 22px;
            height: 22px;
            fill: #ff5733;
            transition: all 0.3s ease;
        }

        .feature-item.active .feature-icon svg {
            fill: #ffffff;
        }

        .feature-title {
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
            margin: 0;
            letter-spacing: -0.2px;
        }

        .feature-description {
            font-size: 13px;
            font-weight: 400;
            color: #6b7280;
            line-height: 1.6;
            margin: 0;
            padding-right: 10px;
        }

        .content-image {
            text-align: center;
            padding: 40px;
            background-color: #f3f4f6;
            border-radius: 16px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .content-image img {
            max-width: 100%;
            height: auto;
            opacity: 0;
            transition: opacity 0.5s ease;
            position: absolute;
        }

        .content-image img.active {
            opacity: 1;
            position: relative;
        }

        @media (max-width: 991px) {
            .content-image {
                margin-top: 40px;
                min-height: 350px;
            }
        }

        @media (max-width: 767px) {
            .end-to-end {
                padding: 60px 0;
            }

            .section-title {
                font-size: 28px;
            }

            .feature-title {
                font-size: 17px;
            }

            .feature-item {
                padding: 20px;
            }
        }



        /* customer-success-stories */

        .success-stories-section {
            padding: 80px 0;
            background-color: #f8f9fa;
        }

        .stories-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .stories-title {
            font-size: 2.5rem;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 20px;
        }

        .stories-title-highlight {
            color: #ea6e35;
        }

        .stories-subtitle {
            font-size: 1.1rem;
            color: #718096;
            margin: 0;
        }

        .carousel-container {
            position: relative;
            padding: 0 60px;
        }

        .stories-carousel {
            overflow: hidden;
            position: relative;
        }

        .carousel-track {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .story-card {
            min-width: calc(33.333% - 20px);
            margin-right: 30px;
            background: white;
            border-radius: 12px;
            padding: 35px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            flex-shrink: 0;
        }

        .story-card-header {
            margin-bottom: 20px;
        }

        .story-meta {
            font-size: 0.85rem;
            color: #ea6e35;
            margin-bottom: 12px;
            font-weight: 500;
        }

        .story-company {
            font-size: 1.5rem;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 20px;
        }

        .story-quote {
            font-size: 1rem;
            color: #4a5568;
            line-height: 1.7;
            margin-bottom: 25px;
            font-style: italic;
        }

        .story-results-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 15px;
        }

        .story-results-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .story-result-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 12px;
            font-size: 0.95rem;
            color: #4a5568;
        }

        .result-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #ea6e35;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .result-icon::before {
            content: '✓';
            color: #ea6e35;
            font-size: 11px;
            font-weight: bold;
        }

        .carousel-controls {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 15px;
            margin-top: 40px;
            padding: 0 60px;
        }

        .carousel-progress {
            flex: 1;
            height: 4px;
            background: #e2e8f0;
            border-radius: 2px;
            position: relative;
            overflow: hidden;
        }

        .carousel-progress-bar {
            height: 100%;
            background: #2d3748;
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .carousel-nav-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: none;
            background: #ea6e35;
            color: white;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .carousel-nav-btn:hover {
            background: #ea6e35;
            transform: scale(1.05);
        }

        .carousel-nav-btn:disabled {
            background: #cbd5e0;
            cursor: not-allowed;
            transform: scale(1);
        }

        .carousel-nav-btn i {
            margin: 0;
        }

        @media (max-width: 1199px) {
            .story-card {
                min-width: calc(50% - 15px);
            }
        }

        @media (max-width: 991px) {
            .success-stories-section {
                padding: 60px 0;
            }

            .stories-title {
                font-size: 2rem;
            }

            .carousel-container {
                padding: 0 40px;
            }

            .carousel-controls {
                padding: 0 40px;
            }
        }

        @media (max-width: 767px) {
            .stories-title {
                font-size: 1.75rem;
            }

            .stories-subtitle {
                font-size: 1rem;
            }

            .story-card {
                min-width: calc(100% - 20px);
                margin-right: 20px;
            }

            .carousel-container {
                padding: 0 20px;
            }

            .carousel-controls {
                padding: 0 20px;
                flex-wrap: wrap;
            }

            .carousel-progress {
                order: 3;
                width: 100%;
                margin-top: 15px;
            }

            .story-company {
                font-size: 1.25rem;
            }

            .story-card {
                padding: 25px;
            }
        }

        /* streamline-css */

     /* Outer section stays neutral so container controls left/right spacing */
.streamline-section {
  background-color: #ffffff; /* page background (neutral) */
  padding: 48px 0; /* vertical rhythm */
}

/* Container controls the left/right margins as requested */
.streamline-container {
  /* Bootstrap container handles horizontal spacing at all breakpoints */
}

/* Main promo panel with exact orange background */
.streamline-content {
  background-color: #ff6a00; /* bright orange matching the banner */
  border-radius: 16px;
  padding: 40px 36px;
}

/* Row and columns (explicit class names on each element) */
.streamline-row { }
.streamline-col-left { }
.streamline-col-right { }

/* Heading: bold white, strong presence */
.streamline-heading {
  color: #ffffff;
  font-weight: 800;
  font-size: 2.4rem;       /* ~38px for clarity and emphasis */
  line-height: 1.2;
  margin-bottom: 16px;
}

/* Description: slightly softer white for contrast separation */
.streamline-description {
  color: #fffefa;          /* warm near-white to match design feel */
  font-size: 1.125rem;     /* ~18px for readability */
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Brand name in description stays white and bold */
.streamline-brand {
  color: #ffffff;
  font-weight: 600;
}

/* CTA: white pill button with dark text, subtle shadow like the banner */
.streamline-cta-wrap { }

.streamline-button {
  background-color: #ffffff;
  color: #1c1c1c;
  border: 1px solid #ffffff;
  border-radius: 10px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  display: inline-block;
}

.streamline-button:hover {
  background-color: #f7f7f7;
  color: #0f0f0f;
}

/* Laptop on black pedestal */
.streamline-laptop-wrap {
  background-color: #000000;
  border-radius: 14px;
  padding: 14px;
  display: inline-block;
}

.streamline-laptop {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Spacing tweaks on larger screens to mimic banner proportions */
@media (min-width: 992px) {
  .streamline-content {
    padding: 56px 52px;
  }
  .streamline-heading {
    font-size: 2.7rem;
    margin-bottom: 18px;
  }
  .streamline-description {
    font-size: 1.125rem;
    margin-bottom: 28px;
  }
}


/* roi-css */

        
       /* Base Card Styling */
.roi-card {
    background-color: #ffffff;
    border-radius: 12px;
    transition: transform 0.3s ease-out; /* Smooth transition for non-wobble changes */
    border: 1px solid #eee;
}

/* Specific Card Data Styling */
.roi-card .data-point {
/*     font-size: 2.5rem; */
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.roi-card .sub-header {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* Wobble Effect Keyframes (The effect is slight, mimicking the 3D tilt) */
@keyframes wobble {
    0%, 100% { transform: rotate(0deg) translate3d(0, 0, 0); }
    15% { transform: rotate(-0.5deg) translate3d(-1px, 0, 0); }
    30% { transform: rotate(0.5deg) translate3d(1px, 0, 0); }
    45% { transform: rotate(-0.5deg) translate3d(-1px, 0, 0); }
    60% { transform: rotate(0.5deg) translate3d(1px, 0, 0); }
    75% { transform: rotate(-0.25deg) translate3d(-0.5px, 0, 0); }
}

/* Class to apply the animation */
.wobbling {
    animation: wobble 0.6s ease-in-out;
}

/* Ensure the large card fills the height on desktop */
@media (min-width: 992px) {
    .col-lg-6:nth-child(2) .roi-card {
        height: 100%;
        min-height: calc(100% + 1.25rem); /* Adjusting for the gap-4 */
    }
}



        /* solution-off-boarding */
        
        .section-offboarding {
            padding: 60px 0;
            background-color: var(--light-bg);
            overflow: hidden;
        }
        
        .offboarding-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-right: 40px;
        }
        
        .offboarding-heading {
            font-size: 3rem;
            font-weight: 600;
            color: var(--dark-text);
            margin-bottom: 24px;
            line-height: 1.2;
            letter-spacing: -0.02em;
        }
        
        .offboarding-heading-highlight {
            color: var(--primary-orange);
            display: block;
        }
        
        .offboarding-description {
            font-size: 1.0625rem;
            font-weight: 400;
            color: var(--light-text);
            line-height: 1.7;
            margin-bottom: 32px;
            max-width: 540px;
        }
        
        .offboarding-button-group {
            display: flex;
            gap: 16px;
            align-items: center;
        }
        
        .btn-primary-offboarding {
            background: var(--primary-orange);
            color: #FFFFFF;
            padding: 15px 32px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.9375rem;
            border: none;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            box-shadow: 0 2px 8px rgba(255, 107, 74, 0.2);
        }
        
        .btn-primary-offboarding:hover {
            background: #FF5533;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 107, 74, 0.35);
            color: #FFFFFF;
        }
        
        .btn-secondary-offboarding {
            background: transparent;
            color: var(--primary-orange);
            padding: 15px 32px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.9375rem;
            border: 2px solid var(--primary-orange);
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }
        
        .btn-secondary-offboarding:hover {
            background: var(--primary-orange);
            color: #FFFFFF;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 107, 74, 0.35);
        }
        
        .offboarding-image-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 500px;
        }
        
        .offboarding-image {
            width: 100%;
            height: auto;
            max-width: 600px;
            object-fit: contain;
            object-position: center;
            display: block;
        }
        
        /* Responsive Design */
        @media (max-width: 1199px) {
            .offboarding-heading {
                font-size: 2.5rem;
            }
            
            .offboarding-image-wrapper {
                min-height: 450px;
            }
        }
        
        @media (max-width: 991px) {
            .section-offboarding {
                padding: 80px 0;
            }
            
            .offboarding-content {
                padding-right: 0;
                margin-bottom: 40px;
            }
            
            .offboarding-heading {
                font-size: 2.25rem;
            }
            
            .offboarding-description {
                font-size: 1rem;
                max-width: 100%;
            }
            
            .offboarding-image-wrapper {
                min-height: 400px;
            }
        }
        
        @media (max-width: 767px) {
            .section-offboarding {
                padding: 60px 0;
            }
            
            .offboarding-heading {
                font-size: 2rem;
            }
            
            .offboarding-description {
                font-size: 0.9375rem;
            }
            
            .offboarding-button-group {
                flex-direction: column;
                gap: 12px;
                width: 100%;
            }
            
            .btn-primary-offboarding,
            .btn-secondary-offboarding {
                width: 100%;
                max-width: 320px;
                text-align: center;
                padding: 14px 28px;
            }
            
            .offboarding-image-wrapper {
                min-height: 350px;
            }
            
            .offboarding-image {
                max-width: 100%;
            }
        }
        
        @media (max-width: 575px) {
            .offboarding-heading {
                font-size: 1.75rem;
            }
            
            .offboarding-description {
                font-size: 0.875rem;
            }
            
            .offboarding-image-wrapper {
                min-height: 300px;
            }
        }



        /* all-in-one-platform */

        .section-retrieve-secure {
            padding: 60px 0px;
            background-color: var(--light-bg);
            overflow: hidden;
        }
        
        .main-heading {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 600;
            color: var(--dark-text);
            margin-bottom: 16px;
            letter-spacing: -0.02em;
        }
        
        .main-heading-highlight {
            color: var(--primary-orange);
        }
        
        .main-description {
            text-align: center;
            font-size: 1rem;
            color: var(--light-text);
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
        }
        
        /* Sticky Cards Container */
        .sticky-cards-container {
            position: relative;
            padding-top: 50px;
        }
        
        .sticky-card {
            position: sticky;
            top: 100px;
            margin-bottom: 40px;
            transition: all 0.3s ease;
        }
        
        .sticky-card:nth-child(1) {
            top: 100px;
        }
        
        .sticky-card:nth-child(2) {
            top: 120px;
        }
        
        .sticky-card:nth-child(3) {
            top: 140px;
        }
        
        .card-inner {
            background:#f0f4f8;
            border-radius: 24px;
            padding: 80px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.4s ease;
        }
        
        .sticky-card.card-alt .card-inner {
            background: var(--card-alt-bg);
        }
        
        .sticky-card.stacked {
            transform: scale(0.95);
            opacity: 0.7;
        }
        
        .card-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .card-heading {
            font-size: 40px;
            font-weight: 600;
            color: #40424D;
            margin-bottom: 16px;
            line-height:48px;
        }
        
        .card-description {
            font-size: 1rem;
            color: var(--light-text);
            margin-bottom: 28px;
            line-height: 1.6;
        }
        
        .card-features-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .card-feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 14px;
            font-size: 0.9375rem;
            color: var(--medium-text);
			gap:8px;
        }
		.card-description-v{
			font-size: 20px;
			font-weight: 500;
			color: #6E7180;
			line-height: 28px;
		}

        .card-feature-icon {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--primary-orange);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .card-feature-icon::before {
            content: '✓';
            color: #FFFFFF;
            font-size: 11px;
            font-weight: bold;
        }
        
        .card-image-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            
        }
        
        .card-image {
            width: 100%;
/*             max-width: 450px;  */
            height: auto;
            object-fit: contain;
            object-position: center;
            border-radius: 16px;
			padding:0 20px;
        }

          .card-image-roi {
	        width: 100%;
/*             max-width: 450px;  */
            height: auto;
            object-fit: contain;
            object-position: center;
            border-radius: 16px;
          }
        
        /* Responsive Design */
        @media (max-width: 991px) {
            .section-retrieve-secure {
                padding: 80px 0 100px;
            }
            
            .main-heading {
                font-size: 2.25rem;
            }
            
            .card-inner {
                padding: 50px 40px;
            }
            
            .sticky-card {
                top: 80px;
                margin-bottom: 30px;
            }
            
            .sticky-card:nth-child(1) { top: 80px; }
            .sticky-card:nth-child(2) { top: 90px; }
            .sticky-card:nth-child(3) { top: 100px; }
            
            .card-heading {
                font-size: 1.625rem;
            }
        }
        
        @media (max-width: 767px) {
            .section-retrieve-secure {
                padding: 60px 0 80px;
            }
            
            .main-heading {
                font-size: 1.875rem;
            }
            
            .main-description {
                font-size: 0.9375rem;
                margin-bottom: 60px;
            }
            
            .card-inner {
                padding: 40px 30px;
            }
            
            .sticky-card {
                position: relative;
                top: 0 !important;
                margin-bottom: 30px;
            }
            
            .sticky-card.stacked {
                transform: scale(1);
                opacity: 1;
            }
            
            .card-heading {
                font-size: 1.5rem;
            }
            
            .card-description {
                font-size: 0.9375rem;
            }
            
            .card-feature-item {
                font-size: 0.875rem;
            }
            
            .card-image-wrapper {
                margin-top: 30px;
                order: 2;
            }
            
            .card-content {
                order: 1;
            }
        }

        /* ROI-OFFBOARDING */
    
  
        .section-measurable-roi {
            padding: 60px 0;
            background-color: #F5F5F5;
        }
        
        .roi-card-wrapper {
            background-color:#30282b;
            border-radius: 20px;
            padding: 50px 40px 48px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
            margin: 0 auto;
        }
        
        .roi-main-heading {
            text-align: center;
            font-size: 2.25rem;
            font-weight: 500;
            color:#ffff;
            margin-bottom: 16px;
            letter-spacing: -0.01em;
            line-height: 1.2;
        }
        
        .roi-main-heading-highlight {
            color: var(--primary-orange);
        }
        
        .roi-main-description {
            text-align: center;
            font-size: 0.9375rem;
            color: var(--description-text);
            margin-bottom: 52px;
            max-width: 680px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.5;
            font-weight: 400;
        }
        
        .roi-stats-container {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 0;
        }
        
        .roi-stat-item {
            flex: 1;
            text-align: center;
            padding: 0 24px;
            position: relative;
        }
        
        .roi-stat-item:not(:last-child)::after {
            content: '';
    position: absolute;
    right: 0;
    top: 0%;
    bottom: -6%;
    width: 1px;
    background-color: #ffff;
    }
        
        .roi-stat-number {
            font-size: 30px;
            font-weight: 600;
            color: var(--primary-orange);
            margin-bottom: 14px;
            line-height: 1;
            letter-spacing: -0.015em;
        }
        
        .roi-stat-title {
            font-size: 1.0625rem;
            font-weight: 600;
            color: #ffff;
            margin-bottom: 10px;
            line-height: 1.3;
        }
        
        .roi-stat-description {
            font-size: 0.8125rem;
            color: var(--description-text);
            line-height: 1.4;
            max-width: 180px;
            margin: 0 auto;
            font-weight: 400;
        }
        
        /* Responsive Design */
        @media (max-width: 1199px) {
            .roi-card-wrapper {
                max-width: 960px;
            }
            
            .roi-stat-number {
                font-size: 2.875rem;
            }
            
            .roi-stat-item {
                padding: 0 20px;
            }
        }
        
        @media (max-width: 991px) {
            .section-measurable-roi {
                padding: 60px 0;
            }
            
            .roi-card-wrapper {
                padding: 45px 35px;
                max-width: 720px;
            }
            
            .roi-main-heading {
                font-size: 2rem;
            }
            
            .roi-main-description {
                font-size: 0.875rem;
                margin-bottom: 45px;
            }
            
            .roi-stats-container {
                flex-wrap: wrap;
            }
            
            .roi-stat-item {
                flex: 0 0 50%;
                padding: 28px 20px;
            }
            
            .roi-stat-item:nth-child(1)::after,
            .roi-stat-item:nth-child(3)::after {
                display: none;
            }
            
            .roi-stat-item:nth-child(2)::after {
                display: block;
            }
            
            .roi-stat-item:nth-child(1),
            .roi-stat-item:nth-child(2) {
                border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            }
            
            .roi-stat-number {
                font-size: 2.625rem;
            }
        }
        
        @media (max-width: 767px) {
            .roi-card-wrapper {
                padding: 40px 28px;
                border-radius: 18px;
            }
            
            .roi-main-heading {
                font-size: 1.75rem;
            }
            
            .roi-main-description {
                font-size: 0.8125rem;
                margin-bottom: 38px;
            }
            
            .roi-stats-container {
                flex-direction: column;
            }
            
            .roi-stat-item {
                flex: 0 0 100%;
                padding: 28px 20px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            }
            
            .roi-stat-item:last-child {
                border-bottom: none;
            }
            
            .roi-stat-item::after {
                display: none !important;
            }
            
            .roi-stat-number {
                font-size: 2.375rem;
            }
            
            .roi-stat-title {
                font-size: 1rem;
            }
            
            .roi-stat-description {
                font-size: 0.75rem;
                max-width: 240px;
            }
        }
        
        @media (max-width: 575px) {
            .roi-card-wrapper {
                padding: 35px 24px;
            }
            
            .roi-main-heading {
                font-size: 1.5rem;
            }
            
            .roi-stat-number {
                font-size: 2.125rem;
            }
        }

        /* it-asset-offboard */


       .it-asset-offboard {
            padding: 80px 0;
            background-color: #fafafa;
            position: relative;
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title {
            font-size: 36px;
            font-weight: 700;
            color: #FF6B4A;
            margin-bottom: 12px;
        }

        .section-subtitle {
            font-size: 15px;
            font-weight: 400;
            color: #666666;
            line-height: 1.6;
        }

        .workflow-container {
            position: relative;
            max-width: 900px;
            margin: 0 auto;
        }

        .workflow-card {
            background: #ffffff;
            border: 2px solid #e5e5e5;
            border-radius: 12px;
            padding: 28px 24px;
            text-align: center;
            transition: all 0.4s ease;
            position: relative;
            z-index: 2;
        }

        .workflow-card.active {
            border-color: #FF6B4A;
            box-shadow: 0 8px 24px rgba(255, 107, 74, 0.15);
            transform: translateY(-4px);
        }

        .card-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 16px;
            background: #FFF5F3;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s ease;
        }

        .workflow-card.active .card-icon {
            background: #FF6B4A;
        }

        .card-icon svg {
            width: 28px;
            height: 28px;
            stroke: #FF6B4A;
            transition: all 0.4s ease;
        }

        .workflow-card.active .card-icon svg {
            stroke: #ffffff;
        }

        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: #333333;
            margin-bottom: 10px;
        }

        .card-description {
            font-size: 13px;
            font-weight: 400;
            color: #666666;
            line-height: 1.5;
        }

        .center-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            max-width: 320px;
            width: 100%;
        }

        .center-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Connecting Lines */
        .connection-line {
            position: absolute;
            background: #e5e5e5;
            z-index: 1;
            transition: all 0.6s ease;
        }

        .connection-line.active {
            background: #FF6B4A;
        }

        .line-1 {
            width: 2px;
            height: 80px;
            top: 240px;
            left: 23%;
        }

        .line-2 {
            width: 180px;
            height: 2px;
            top: 320px;
            left: 23%;
        }

        .line-3 {
            width: 2px;
            height: 80px;
            top: 240px;
            right: 23%;
        }

        .line-4 {
            width: 180px;
            height: 2px;
            top: 320px;
            right: 23%;
        }

        .line-5 {
            width: 2px;
            height: 80px;
            bottom: 240px;
            left: 23%;
        }

        .line-6 {
            width: 180px;
            height: 2px;
            bottom: 320px;
            left: 23%;
        }

        .line-7 {
            width: 2px;
            height: 80px;
            bottom: 240px;
            right: 23%;
        }

        .line-8 {
            width: 180px;
            height: 2px;
            bottom: 320px;
            right: 23%;
        }

        @media (max-width: 991px) {
            .it-asset-offboard {
                padding: 60px 0;
            }

            .section-title {
                font-size: 30px;
            }

            .center-image {
                max-width: 260px;
            }

            .workflow-card {
                padding: 24px 20px;
            }

            .card-icon {
                width: 48px;
                height: 48px;
            }

            .card-icon svg {
                width: 24px;
                height: 24px;
            }
        }

        @media (max-width: 767px) {
            .it-asset-offboard {
                padding: 40px 0;
            }

            .section-header {
                margin-bottom: 40px;
            }

            .section-title {
                font-size: 26px;
            }

            .section-subtitle {
                font-size: 14px;
            }

            .workflow-card {
                margin-bottom: 20px;
            }

            .center-image {
                position: relative;
                margin: 30px auto;
                max-width: 240px;
            }

            .connection-line {
                display: none;
            }
        }


        /* semeless-integration */

        .seamless-integration {
            padding: 80px 0;
            background-color: #fafafa;
            overflow: hidden;
        }

        .integration-heading {
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 24px;
            color: #1a1a1a;
        }

        .integration-heading-highlight {
            color: #ff6b3d;
        }

        .integration-description {
            font-size: 1.1rem;
            line-height: 1.7;
            color: #666;
            margin-bottom: 40px;
        }

        .integration-features-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .integration-feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            font-size: 1rem;
            color: #444;
        }

        .integration-feature-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #ff6b3d;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            flex-shrink: 0;
            position: relative;
        }

        .integration-feature-icon::before {
            content: '✓';
            color: #ff6b3d;
            font-size: 12px;
            font-weight: bold;
            line-height: 1;
        }

        .integration-visual-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 500px;
        }

        .integration-orbit-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            aspect-ratio: 1;
        }

        /* Orbit paths */
        .integration-orbit-outer {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            height: 90%;
            border: 2px solid #ff6b3d;
            border-radius: 50%;
            opacity: 0.2;
        }

        .integration-orbit-inner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 65%;
            height: 65%;
            border: 2px solid #ff6b3d;
            border-radius: 50%;
            opacity: 0.2;
        }

        .integration-center-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .integration-logo-placeholder {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #ff6b3d 0%, #ff8f6b 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
        }

        /* Orbiting icons container */
        .orbit-path {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
        }

        /* Outer orbit (larger circle) */
        .orbit-path-outer {
            width: 90%;
            height: 90%;
        }

        /* Inner orbit (smaller circle) */
        .orbit-path-inner {
            width: 65%;
            height: 65%;
        }

        .integration-platform-icon {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            transition: all 0.3s ease;
            /* Start from top center of the orbit */
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .integration-platform-icon:hover {
            transform: translate(-50%, -50%) scale(1.15);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
            z-index: 20;
        }

        /* Platform icon backgrounds */
        .integration-icon-teams {
            background: #5558AF;
        }

        .integration-icon-slack {
            background: white;
            border: 2px solid #f0f0f0;
        }

        .integration-icon-workday {
            background: #0066CC;
            color: white;
        }

        .integration-icon-bamboo {
            background: #73C41D;
        }

        .integration-icon-loading {
            background: white;
            border: 2px solid #f0f0f0;
        }

        .integration-icon-azure {
            background: #00B8E6;
        }

        @media (max-width: 991px) {
            .seamless-integration {
                padding: 60px 0;
            }

            .integration-heading {
                font-size: 2rem;
            }

            .integration-visual-wrapper {
                margin-top: 40px;
                min-height: 400px;
            }

            .integration-orbit-container {
                max-width: 400px;
            }

            .integration-center-logo {
                width: 100px;
                height: 100px;
            }

            .integration-logo-placeholder {
                width: 60px;
                height: 60px;
                font-size: 20px;
            }

            .integration-platform-icon {
                width: 50px;
                height: 50px;
                font-size: 24px;
            }
        }

        @media (max-width: 767px) {
            .integration-heading {
                font-size: 1.75rem;
            }

            .integration-description {
                font-size: 1rem;
            }

            .integration-visual-wrapper {
                min-height: 350px;
            }

            .integration-orbit-container {
                max-width: 320px;
            }

            .integration-platform-icon {
                width: 45px;
                height: 45px;
                font-size: 20px;
            }
        }


        /* solution-it-asset */


        /* it-asset-banner */



        .it-asset-banner {
            background-color: #fafafa;
            background-image: url('/wp-content/uploads/2025/11/bg-banner-scaled.png'); /* Add your background image URL here */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 600px;
            padding: 80px 0 60px;
            position: relative;
            overflow: hidden;
        }

        .banner-content {
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
        }

        .banner-title {
            font-size: 48px;
            font-weight: 500;
            color: #3a3a3a;
            margin-bottom: 20px;
            line-height: 1.2;
            letter-spacing: -0.5px;
        }

        .banner-title .highlight {
            color: #ea6e35;
            font-weight: 600;
            display: block;
        }

        .banner-description {
            font-size: 15px;
            font-weight: 400;
            color: #6b7280;
            line-height: 1.6;
            margin-bottom: 35px;
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
        }

        .button-group {
            display: flex;
            gap: 15px;
            justify-content: center;
            align-items: center;
/*             margin-bottom: 60px; */
        }

        .btn-primary-custom {
            background-color: #ea6e35;
            color: #ffffff;
            border: none;
            padding: 13px 32px;
            font-size: 15px;
            font-weight: 500;
            border-radius: 16px;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .btn-primary-custom:hover {
            background-color: #e64a2e;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255, 87, 51, 0.3);
            color: #ffffff;
        }

        .btn-secondary-custom {
            background-color: transparent;
            color: #ea6e35;
            border: 1.5px solid #ea6e35;
            padding: 12px 32px;
            font-size: 15px;
            font-weight: 500;
            border-radius: 16px;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .btn-secondary-custom:hover {
            background-color: #ea6e35;
            color: #ffffff;
            transform: translateY(-1px);
        }

        .banner-image-container {
            text-align: center;
            margin-top: 50px;
            position: relative;
            z-index: 10;
        }

        .banner-image {
/*             max-width: 600px; */
            width: 100%;
            height: auto;
        }

        /* Background Beams Animation */
        .background-beams {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 1;
        }

        .beam {
            position: absolute;
            width: 2px;
            height: 200px;
            background: linear-gradient(180deg, 
                rgba(255, 87, 51, 0) 0%, 
                rgba(255, 87, 51, 0.4) 50%, 
                rgba(255, 87, 51, 0) 100%);
            animation: beam-fall linear infinite;
            opacity: 0;
        }

        @keyframes beam-fall {
            0% {
                transform: translateY(-200px);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(100vh);
                opacity: 0;
            }
        }

        /* Decorative dots/elements like in design */
        .decorative-element {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: rgba(255, 87, 51, 0.3);
            border-radius: 50%;
            z-index: 5;
        }

        .decorative-element.diamond {
            transform: rotate(45deg);
            border-radius: 2px;
        }

        @media (max-width: 991px) {
            .banner-title {
                font-size: 40px;
            }

            .banner-image {
                max-width: 500px;
            }
        }

        @media (max-width: 767px) {
            .it-asset-banner {
                min-height: 600px;
                padding: 60px 0 40px;
            }

            .banner-title {
                font-size: 32px;
            }

            .banner-description {
                font-size: 14px;
            }

            .button-group {
                flex-direction: column;
                gap: 12px;
            }

            .btn-primary-custom,
            .btn-secondary-custom {
                width: 100%;
                max-width: 280px;
            }

            .banner-image {
                max-width: 100%;
            }
        }

        /* it-all-in-one-platform */

        .it-all-in-one {
            background-color: #fafafa;
            padding: 80px 0;
            min-height: 900px;
        }

        .section-title {
            font-size: 36px;
            font-weight: 500;
            color: #ea6e35;
            text-align: center;
            margin-bottom: 15px;
            letter-spacing: -0.5px;
        }

        .section-title .highlight {
            color: #ea6e35;
            font-weight: 500;
        }

        .section-description {
            font-size: 14px;
            font-weight: 400;
            color: #6b7280;
            text-align: center;
            line-height: 1.6;
            margin-bottom: 70px;
            max-width: 750px;
            margin-left: auto;
            margin-right: auto;
        }

        /* .feature-item {
            margin-bottom: 80px;
        } */

        .feature-icon {
            width: 44px;
            height: 44px;
            background-color: #fff5f2;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .feature-icon svg {
            width: 24px;
            height: 24px;
            fill: #ea6e35;
        }

        .feature-title {
            font-size: 22px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 15px;
            letter-spacing: -0.3px;
        }

        .feature-description {
            font-size: 14px;
            font-weight: 400;
            color: #6b7280;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .feature-list li {
            font-size: 13px;
            font-weight: 400;
            color: #4b5563;
            margin-bottom: 12px;
            padding-left: 28px;
            position: relative;
            line-height: 1.5;
        }

        .feature-list li:before {
            content: '';
            position: absolute;
            left: 0;
            top: 6px;
            width: 16px;
            height: 16px;
            border: 2px solid #ea6e35;
            border-radius: 50%;
            background-color: transparent;
        }

        .feature-list li:after {
            content: '';
            position: absolute;
            left: 5px;
            top: 11px;
            width: 6px;
            height: 6px;
            background-color: #ea6e35;
            border-radius: 50%;
        }

        .feature-image {
            text-align: center;
            /* padding: 40px;
            background-color: #f3f4f6; */
            border-radius: 16px;
        }

        .feature-image img {
            max-width: 100%;
            height: auto;
            max-height: 280px;
        }

        @media (max-width: 991px) {
            .feature-item {
                margin-bottom: 60px;
            }

            .feature-image {
                margin-top: 30px;
            }
        }

        @media (max-width: 767px) {
            .it-all-in-one {
                padding: 60px 0;
            }

            .section-title {
                font-size: 28px;
            }

            .feature-title {
                font-size: 20px;
            }
        }

        /* it-asset */

        /* it-asset-offboard */
        .it-asset {
            background-color: #fafafa;
            padding: 60px 0px;
        }

        .section-title-it {
            font-size: 32px;
            font-weight: 600;
            color: #EA6e35;
            text-align: center;
            margin-bottom: 12px;
            letter-spacing: -0.3px;
        }

        .section-description {
            font-size: 14px;
            font-weight: 400;
            color: #6b7280;
            text-align: center;
            margin-bottom: 30px;
            line-height: 1.5;
        }

        @media (max-width: 767px) {
            .section-title {
                font-size: 26px;
            }
            
            .it-asset {
                padding: 50px 0 30px;
            }
        }

        /* it-asset-roi-solution */

        /* Data Block Styling */
.roi-data-block {
    /* Ensures blocks are spaced correctly */
    padding: 10px 0;
}
.roi-data-block .data-point {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}
.roi-data-block .data-title {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 0.35rem;
}
.roi-data-block .data-description {
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Globe Container and Image */
.globe-container {
    position: relative;
    width: 100%;
    /* Ensures the container is square or near-square for the globe */
    padding-bottom: 100%; 
    max-width: 450px; 
    margin: 0 auto;
}
.roi-globe-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5; /* Above the beams, but below the content if needed */
}

/* --- Globe Beams Animation Overlay --- */
.globe-beams-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%; /* Confines beams to the circular area */
    pointer-events: none;
    z-index: 10; /* Above the globe image */
    /* Optional: Slightly darker radial gradient over the globe for effect */
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.05) 100%);
}

.globe-beam {
    position: absolute;
    width: 2px;
    height: 100%; /* Spans the height of the container */
    background: linear-gradient(0deg, 
        rgba(233, 72, 25, 0) 0%, 
        rgba(233, 72, 25, 0.6) 50%, 
        rgba(233, 72, 25, 0) 100%);
    opacity: 0;
    
    /* Animation: Horizontal rotation/translation */
    animation: globe-scan linear infinite; 
    transform-origin: center center;
}

@keyframes globe-scan {
    0% {
        transform: translateX(-50%) rotateY(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.5; /* Fade in */
    }
    50% {
        transform: translateX(-50%) rotateY(360deg);
        opacity: 0.8;
    }
    90% {
        opacity: 0.5; /* Fade out */
    }
    100% {
        transform: translateX(-50%) rotateY(720deg);
        opacity: 0;
    }
}