@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

* {margin: 0; padding: 0; box-sizing: border-box;}
html{scroll-behavior:smooth}
body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 500; color:#111827; background:#fff; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;}

h2{line-height: 1.2; font-size: 3rem; margin-bottom: 1rem !important;}

/* ================WHO WE ARE SECTION================ */

/* Main Section Container */
.who-we-are-section {
    padding: 5rem 0;
    background: linear-gradient(to bottom, white 0%, rgba(239, 246, 255, 0.3) 50%, white 100%);
    position: relative;
    overflow: hidden;
}

/* Decorative Background Elements */
.who-bg-deco-1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 24rem;
    height: 24rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 50%;
    filter: blur(60px);
}

.who-bg-deco-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24rem;
    height: 24rem;
    background: linear-gradient(45deg, rgba(0, 166, 81, 0.05), rgba(0, 102, 204, 0.05));
    border-radius: 50%;
    filter: blur(60px);
}

/* Container */
.who-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
}

/* Header Section (Centered) */
.who-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Badge */
.who-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.15), rgba(0, 166, 81, 0.15));
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 102, 204, 0.2);
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.1);
}

.who-badge svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.who-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Title */
.who-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    background: linear-gradient(to right, black, rgba(0, 0, 0, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2;
}

/* Description Paragraphs */
.who-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 1.5rem;
    line-height: 1.75;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

.who-description:last-of-type {
    margin-bottom: 0;
}

/* Content Grid (Image + Features) */
.who-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

/* Image Column */
.who-image-column {
    position: relative;
}

.who-image-wrapper {
    position: relative;
    transition: all 0.5s ease;
}

/* Image Glow Effect */
.who-image-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1.5rem;
    filter: blur(40px);
    opacity: 0.2;
    transition: opacity 0.5s ease;
}

.who-image-wrapper:hover .who-image-glow {
    opacity: 0.3;
}

/* Image Border Container */
.who-image-border {
    position: relative;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
    padding: 0.75rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

/* Actual Image */
.who-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 1rem;
    transform: scale(1);
    transition: transform 0.5s ease;
}

.who-image-wrapper:hover .who-image {
    transform: scale(1.02);
}

/* Floating Stats Badge */
.who-stats-badge {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    border: 2px solid rgba(0, 102, 204, 0.1);
    text-align: center;
}

.who-stats-number {
    font-size: 2.25rem;
    margin-bottom: 0.25rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    line-height: 1;
}

.who-stats-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
}

/* Features Column */
.who-features-column {
    /* No specific styles needed */
}

.who-intro-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 2rem;
    line-height: 1.75;
    font-weight: 500;
}

/* Features List */
.who-features-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.who-feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease;
}

.who-feature-item:hover {
    transform: translateX(0.5rem);
}

/* Feature Checkmark Icon */
.who-feature-icon {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(0, 102, 204, 0.4);
    transition: all 0.3s ease;
}

.who-feature-item:hover .who-feature-icon {
    box-shadow: 0 6px 16px -2px rgba(0, 102, 204, 0.5);
    transform: scale(1.1);
}

.who-feature-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

/* Feature Text */
.who-feature-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 500;
}

/* CTA Button */
.who-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    border-radius: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3);
    transition: all 0.3s ease;
}

.who-cta-button:hover {
    box-shadow: 0 20px 40px rgba(0, 102, 204, 0.4);
    transform: scale(1.05);
    color: white;
}

.who-cta-button i {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.who-cta-button:hover i {
    transform: translateX(0.25rem);
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (min-width: 1024px) {
    .who-we-are-section {
        padding: 5rem 0;
    }

    .who-container {
        padding: 0 3rem;
    }

    .who-content-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .who-title {
        font-size: 3rem;
    }
}

@media (max-width: 1023px) {
    .who-title {
        font-size: 2.25rem;
    }

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

    .who-content-grid {
        gap: 2rem;
    }

    .who-stats-badge {
        bottom: -1rem;
        right: -1rem;
        padding: 1rem;
    }

    .who-stats-number {
        font-size: 1.75rem;
    }

    .who-bg-deco-1,
    .who-bg-deco-2 {
        width: 16rem;
        height: 16rem;
    }
}

@media (max-width: 640px) {
    .who-we-are-section {
        padding: 3rem 0;
    }

    .who-header {
        margin-bottom: 2rem;
    }

    .who-title {
        font-size: 1.875rem;
    }

    .who-description {
        font-size: 0.9375rem;
    }

    .who-features-list {
        gap: 0.75rem;
    }

    .who-cta-button {
        width: 100%;
    }
}


/* ================OUR SERVICES SECTION================ */

/* Main Section */
.services-section {
    padding: 5rem 0;
    background: white;
}

/* Container */
.services-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header Section */
.services-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Badge */
.services-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.5rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

.services-badge svg {
    width: 1rem;
    height: 1rem;
    color: #0066CC;
}

.services-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Title */
.services-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: black;
    line-height: 1.2;
}

/* Description */
.services-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    max-width: 48rem;
    margin: 0 auto;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Service Card */
.service-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.5s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.service-card:hover {
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3), 0 20px 40px -10px rgba(0, 102, 204, 0.2);
    transform: translateY(-4px);
}

/* Service Icon */
.service-icon-wrapper {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: all 0.5s ease;
    box-shadow: 0 4px 16px -2px rgba(0, 102, 204, 0.4);
}

.service-card:hover .service-icon-wrapper {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 8px 24px -4px rgba(0, 102, 204, 0.5);
}

.service-icon-wrapper svg {
    width: 1.75rem;
    height: 1.75rem;
    color: white;
}

/* Icon Gradient Variations */
.service-icon-gradient-1 {
    background: linear-gradient(135deg, #0066CC, #0052A3);
}

.service-icon-gradient-2 {
    background: linear-gradient(135deg, #00A651, #008A44);
}

.service-icon-gradient-3 {
    background: linear-gradient(135deg, #0066CC, #00A651);
}

.service-icon-gradient-4 {
    background: linear-gradient(135deg, #00A651, #0066CC);
}

.service-icon-gradient-5 {
    background: linear-gradient(135deg, #0052A3, #0066CC);
}

.service-icon-gradient-6 {
    background: linear-gradient(135deg, #008A44, #00A651);
}

/* Service Title */
.service-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: black;
    transition: color 0.3s ease;
}

.service-card:hover .service-card-title {
    color: #0066CC;
}

/* Service Description */
.service-card-description {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Learn More Link */
.service-learn-more {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066CC;
    transition: gap 0.3s ease;
}

.service-card:hover .service-learn-more {
    gap: 1rem;
}

.service-learn-more-text {
    font-size: 0.875rem;
    font-weight: 600;
}

.service-learn-more i {
    width: 1rem;
    height: 1rem;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Medium screens and up */
@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large screens and up */
@media (min-width: 1024px) {
    .services-section {
        padding: 5rem 0;
    }

    .services-container {
        padding: 0 3rem;
    }

    .services-title {
        font-size: 3rem;
    }

    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .services-section {
        padding: 3rem 0;
    }

    .services-header {
        margin-bottom: 2rem;
    }

    .services-title {
        font-size: 1.875rem;
    }

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

    .service-card {
        padding: 1.5rem;
    }
}


/* ========================================
   APPLIED AI RESEARCH & INNOVATION SECTION
   ======================================== */

/* Main Section */
.research-section {
    padding: 5rem 0;
    background: white;
}

/* Container */
.research-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header Section */
.research-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Badge */
.research-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.15), rgba(0, 166, 81, 0.15));
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 102, 204, 0.2);
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.1);
}

.research-badge svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.research-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Title */
.research-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    background: linear-gradient(to right, black, rgba(0, 0, 0, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2;
}

/* Description */
.research-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 2rem;
    line-height: 1.75;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

/* Content Grid (2 Columns) */
.research-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 4rem;
}

/* Left Content Column */
.research-content-left {
    /* No specific styles needed */
}

/* Features List */
.research-features-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.research-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Feature Checkmark Icon */
.research-feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    background: linear-gradient(135deg, #00A651, #008A44);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px -2px rgba(0, 166, 81, 0.4);
}

.research-feature-icon svg {
    width: 1rem;
    height: 1rem;
    color: white;
}

/* Feature Text */
.research-feature-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 500;
}

/* CTA Button */
.research-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3);
    text-decoration: none;
}

.research-cta-button:hover {
    box-shadow: 0 20px 40px rgba(0, 102, 204, 0.4);
    transform: translateY(-2px);
    color: white;
}

.research-cta-button i {
    width: 1.25rem;
    height: 1.25rem;
}

/* Right Image Column */
.research-image-column {
    /* No specific styles needed */
}

.research-image-wrapper {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
    border-radius: 1.5rem;
    padding: 0.5rem;
}

.research-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 1rem;
    display: block;
}

/* Closing Statement */
.research-closing {
    text-align: center;
    margin-top: 4rem;
}

.research-closing-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.75;
    max-width: 64rem;
    margin: 0 auto;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Large screens and up */
@media (min-width: 1024px) {
    .research-section {
        padding: 5rem 0;
    }

    .research-container {
        padding: 0 3rem;
    }

    .research-title {
        font-size: 3rem;
    }

    .research-content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium to large screens */
@media (min-width: 768px) and (max-width: 1023px) {
    .research-title {
        font-size: 2.5rem;
    }
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .research-section {
        padding: 3rem 0;
    }

    .research-header {
        margin-bottom: 2rem;
    }

    .research-title {
        font-size: 2.25rem;
    }

    .research-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .research-content-grid {
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .research-features-list {
        gap: 0.625rem;
        margin-bottom: 1.5rem;
    }

    .research-closing {
        margin-top: 2rem;
    }

    .research-closing-text {
        font-size: 1rem;
    }
}

@media (max-width: 640px) {
    .research-title {
        font-size: 1.875rem;
    }

    .research-badge {
        padding: 0.5rem 1rem;
    }

    .research-badge-text {
        font-size: 0.8125rem;
    }

    .research-cta-button {
        width: 100%;
        justify-content: center;
    }
}


/* ========================================
   INDUSTRIES SECTION
   ======================================== */

/* Main Section */
.industries-section {
    padding: 5rem 0;
    background: white;
}

/* Container */
.industries-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header Section */
.industries-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Badge */
.industries-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.5rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

.industries-badge svg {
    width: 1rem;
    height: 1rem;
    color: #0066CC;
}

.industries-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Title */
.industries-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: black;
    line-height: 1.2;
}

/* Description */
.industries-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    max-width: 48rem;
    margin: 0 auto;
}

/* Industries Grid */
.industries-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Industry Card */
.industry-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.5s ease;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
}

.industry-card:hover {
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3), 0 20px 40px -10px rgba(0, 102, 204, 0.2);
    transform: translateY(-4px);
}

/* Industry Icon */
.industry-icon-wrapper {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.5s ease;
    box-shadow: 0 4px 20px -2px rgba(0, 102, 204, 0.4);
}

.industry-card:hover .industry-icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 8px 28px -4px rgba(0, 102, 204, 0.5);
}

.industry-icon-wrapper svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

/* Icon Gradient Variations */
.industry-icon-gradient-1 {
    background: linear-gradient(135deg, #0066CC, #0052A3);
}

.industry-icon-gradient-2 {
    background: linear-gradient(135deg, #00A651, #008A44);
}

.industry-icon-gradient-3 {
    background: linear-gradient(135deg, #0066CC, #00A651);
}

.industry-icon-gradient-4 {
    background: linear-gradient(135deg, #00A651, #0066CC);
}

.industry-icon-gradient-5 {
    background: linear-gradient(135deg, #0052A3, #0066CC);
}

.industry-icon-gradient-6 {
    background: linear-gradient(135deg, #008A44, #00A651);
}

.industry-icon-gradient-7 {
    background: linear-gradient(135deg, #0066CC, #008A44);
}

.industry-icon-gradient-8 {
    background: linear-gradient(135deg, #00A651, #0052A3);
}

/* Industry Title */
.industry-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: black;
    transition: color 0.3s ease;
}

.industry-card:hover .industry-card-title {
    color: #0066CC;
}

/* Industry Description */
.industry-card-description {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.5;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Medium screens and up (2 columns) */
@media (min-width: 768px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large screens and up (4 columns) */
@media (min-width: 1024px) {
    .industries-section {
        padding: 5rem 0;
    }

    .industries-container {
        padding: 0 3rem;
    }

    .industries-title {
        font-size: 3rem;
    }

    .industries-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .industries-title {
        font-size: 2.5rem;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .industries-section {
        padding: 3rem 0;
    }

    .industries-header {
        margin-bottom: 2rem;
    }

    .industries-title {
        font-size: 1.875rem;
    }

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

    .industry-card {
        padding: 1.5rem;
    }

    .industry-icon-wrapper {
        width: 3.5rem;
        height: 3.5rem;
        margin-bottom: 1rem;
    }

    .industry-icon-wrapper i {
        width: 1.75rem;
        height: 1.75rem;
    }

    .industry-card-title {
        font-size: 1.125rem;
    }
}



/* ========================================
   BUSINESS SOLUTIONS SECTION
   ======================================== */

/* Main Section */
.business-solutions-section {
    padding: 5rem 0;
    background: white;
}

/* Container */
.business-solutions-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header Section */
.business-solutions-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Badge */
.business-solutions-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.5rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

.business-solutions-badge svg {
    width: 1rem;
    height: 1rem;
    color: #0066CC;
}

.business-solutions-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Title */
.business-solutions-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: black;
    line-height: 1.2;
}

/* Description */
.business-solutions-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    max-width: 48rem;
    margin: 0 auto;
}

/* Solutions Grid */
.business-solutions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Solution Card */
.business-solution-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.5s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.business-solution-card:hover {
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3), 0 20px 40px -10px rgba(0, 102, 204, 0.2);
    transform: translateY(-4px);
}

/* Solution Icon */
.business-solution-icon-wrapper {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: all 0.5s ease;
    box-shadow: 0 4px 16px -2px rgba(0, 102, 204, 0.4);
}

.business-solution-card:hover .business-solution-icon-wrapper {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 8px 24px -4px rgba(0, 102, 204, 0.5);
}

.business-solution-icon-wrapper svg {
    width: 1.75rem;
    height: 1.75rem;
    color: white;
}

/* Icon Gradient Variations */
.business-solution-gradient-1 {
    background: linear-gradient(135deg, #0066CC, #0052A3);
}

.business-solution-gradient-2 {
    background: linear-gradient(135deg, #00A651, #008A44);
}

.business-solution-gradient-3 {
    background: linear-gradient(135deg, #0066CC, #00A651);
}

.business-solution-gradient-4 {
    background: linear-gradient(135deg, #00A651, #0066CC);
}

.business-solution-gradient-5 {
    background: linear-gradient(135deg, #0052A3, #0066CC);
}

.business-solution-gradient-6 {
    background: linear-gradient(135deg, #008A44, #00A651);
}

/* Solution Title */
.business-solution-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: black;
    transition: color 0.3s ease;
}

.business-solution-card:hover .business-solution-card-title {
    color: #0066CC;
}

/* Solution Description */
.business-solution-card-description {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Explore Link */
.business-solution-explore {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066CC;
    transition: gap 0.3s ease;
}

.business-solution-card:hover .business-solution-explore {
    gap: 1rem;
}

.business-solution-explore-text {
    font-size: 0.875rem;
    font-weight: 600;
}

.business-solution-explore i {
    width: 1rem;
    height: 1rem;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Medium screens and up (2 columns) */
@media (min-width: 768px) {
    .business-solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large screens and up (3 columns) */
@media (min-width: 1024px) {
    .business-solutions-section {
        padding: 5rem 0;
    }

    .business-solutions-container {
        padding: 0 3rem;
    }

    .business-solutions-title {
        font-size: 3rem;
    }

    .business-solutions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .business-solutions-title {
        font-size: 2.5rem;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .business-solutions-section {
        padding: 3rem 0;
    }

    .business-solutions-header {
        margin-bottom: 2rem;
    }

    .business-solutions-title {
        font-size: 1.875rem;
    }

    .business-solutions-description {
        font-size: 1rem;
    }

    .business-solution-card {
        padding: 1.5rem;
    }
}


/* ========================================
   PLATFORM INNOVATION SECTION
   ======================================== */

/* Main Section */
.platform-innovation-section {
    padding: 5rem 0;
    background: white;
}

/* Container */
.platform-innovation-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header Section */
.platform-innovation-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Badge */
.platform-innovation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.5rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

.platform-innovation-badge svg {
    width: 1rem;
    height: 1rem;
    color: #0066CC;
}

.platform-innovation-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Title */
.platform-innovation-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: black;
    line-height: 1.2;
}

/* Description */
.platform-innovation-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    max-width: 48rem;
    margin: 0 auto;
}

/* Platforms Container */
.platform-innovation-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Platform Row */
.platform-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

/* Image Column */
.platform-image-column {
    order: 2;
}

.platform-image-column.image-left {
    order: 1;
}

.platform-image-wrapper {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
    border-radius: 1.5rem;
    padding: 0.5rem;
    overflow: hidden;
}

.platform-image {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    display: block;
}

/* Content Column */
.platform-content-column {
    order: 1;
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.5s ease;
}

.platform-content-column.content-right {
    order: 2;
}

.platform-content-column:hover {
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3), 0 20px 40px -10px rgba(0, 102, 204, 0.2);
}

/* Platform Icon */
.platform-icon-wrapper {
    display: inline-flex;
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px -2px rgba(0, 102, 204, 0.4);
}

.platform-icon-wrapper svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

/* Icon Gradient Variations */
.platform-icon-gradient-1 {
    background: linear-gradient(135deg, #0066CC, #0052A3);
}

.platform-icon-gradient-2 {
    background: linear-gradient(135deg, #00A651, #008A44);
}

.platform-icon-gradient-3 {
    background: linear-gradient(135deg, #0066CC, #00A651);
}

/* Platform Title */
.platform-content-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: black;
    line-height: 1.2;
}

/* Platform Subtitle */
.platform-content-subtitle {
    font-size: 1.125rem;
    color: #0066CC;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Platform Description */
.platform-content-description {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Features Grid */
.platform-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.platform-feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Feature Checkmark Icon */
.platform-feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px -1px rgba(0, 102, 204, 0.4);
}

.platform-feature-icon svg {
    width: 0.75rem;
    height: 0.75rem;
    color: white;
}

/* Feature Text */
.platform-feature-text {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 500;
}

/* CTA Button */
.platform-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    border-radius: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3);
}

.platform-cta-button:hover {
    box-shadow: 0 20px 40px rgba(0, 102, 204, 0.4);
    transform: translateY(-2px);
    color: white;
}

.platform-cta-button i {
    width: 1.25rem;
    height: 1.25rem;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Large screens and up (2 column layout) */
@media (min-width: 1024px) {
    .platform-innovation-section {
        padding: 5rem 0;
    }

    .platform-innovation-container {
        padding: 0 3rem;
    }

    .platform-innovation-title {
        font-size: 3rem;
    }

    .platform-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Image position for even platforms (image right) */
    .platform-image-column.image-right {
        order: 2;
    }

    /* Content position for even platforms (content left) */
    .platform-content-column.content-left {
        order: 1;
    }

    /* Image position for odd platforms (image left) */
    .platform-image-column.image-left {
        order: 1;
    }

    /* Content position for odd platforms (content right) */
    .platform-content-column.content-right {
        order: 2;
    }

    .platform-content-title {
        font-size: 2rem;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .platform-innovation-title {
        font-size: 2.5rem;
    }

    .platform-content-title {
        font-size: 1.75rem;
    }
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .platform-innovation-section {
        padding: 3rem 0;
    }

    .platform-innovation-header {
        margin-bottom: 2rem;
    }

    .platform-innovation-title {
        font-size: 1.875rem;
    }

    .platform-innovation-description {
        font-size: 1rem;
    }

    .platform-innovation-list {
        gap: 2rem;
    }

    .platform-content-column {
        padding: 1.5rem;
    }

    .platform-content-title {
        font-size: 1.5rem;
    }

    .platform-content-subtitle {
        font-size: 1rem;
    }

    .platform-features-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    /* Reset order for mobile - always image first, then content */
    .platform-image-column,
    .platform-image-column.image-left,
    .platform-image-column.image-right {
        order: 1;
    }

    .platform-content-column,
    .platform-content-column.content-left,
    .platform-content-column.content-right {
        order: 2;
    }
}

@media (max-width: 640px) {
    .platform-cta-button {
        width: 100%;
        justify-content: center;
    }
}


/* ========================================
   CLIENT TESTIMONIALS SECTION
   ======================================== */

/* Main Section */
.testimonials-section {
    padding: 5rem 0;
    background: white;
}

/* Container */
.testimonials-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header Section */
.testimonials-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Badge */
.testimonials-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.5rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

.testimonials-badge svg {
    width: 1rem;
    height: 1rem;
    color: #0066CC;
}

.testimonials-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Title */
.testimonials-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: black;
    line-height: 1.2;
}

/* Description */
.testimonials-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    max-width: 48rem;
    margin: 0 auto;
}

/* Key Points Pills */
.testimonials-key-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.testimonials-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.testimonials-pill svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.testimonials-pill-text {
    color: rgba(0, 0, 0, 0.8);
    font-weight: 500;
}

/* Slider Container */
.testimonials-slider-wrapper {
    position: relative;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 3rem;
}

/* Testimonial Card */
.testimonial-card {
    margin: 0 1rem;
    outline: none;
}

.testimonial-card-inner {
    position: relative;
    background: white;
    border-radius: 1.5rem;
    padding: 3rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.5s ease;
}

.testimonial-card-inner:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Gradient Overlay on Hover */
.testimonial-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.testimonial-card-inner:hover .testimonial-gradient-overlay {
    opacity: 1;
}

/* Content */
.testimonial-content {
    position: relative;
    z-index: 10;
}

/* Quote Icon */
.testimonial-quote-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 4px 20px -2px rgba(0, 102, 204, 0.5);
    transition: all 0.5s ease;
}

.testimonial-card-inner:hover .testimonial-quote-icon {
    transform: scale(1.1) rotate(6deg);
    box-shadow: 0 8px 28px -4px rgba(0, 102, 204, 0.6);
}

.testimonial-quote-icon svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

/* Quote Text */
.testimonial-quote-text {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 2rem;
    font-style: italic;
    line-height: 1.8;
    text-align: center;
}

/* Star Rating */
.testimonial-rating {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

.testimonial-star {
    width: 1.25rem;
    height: 1.25rem;
    fill: #FFD700;
}

/* Divider */
.testimonial-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin-bottom: 1.5rem;
}

/* Author Info */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.testimonial-author-image-wrapper {
    position: relative;
}

.testimonial-author-image-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 50%;
    filter: blur(12px);
    opacity: 0.5;
    transition: opacity 0.5s ease;
}

.testimonial-card-inner:hover .testimonial-author-image-glow {
    opacity: 1;
}

.testimonial-author-image {
    position: relative;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.testimonial-author-info {
    text-align: center;
}

.testimonial-author-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: black;
    transition: color 0.3s ease;
}

.testimonial-card-inner:hover .testimonial-author-name {
    color: #0066CC;
}

.testimonial-author-position {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.4;
}

.testimonial-author-company {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Decorative Corner Element */
.testimonial-corner-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), transparent);
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.testimonial-card-inner:hover .testimonial-corner-decoration {
    opacity: 1;
}

/* ========================================
   SLICK SLIDER CUSTOMIZATION
   ======================================== */

/* Slider Dots */
.testimonials-slider-wrapper .slick-dots {
    bottom: -3.5rem;
    display: flex !important;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}

.testimonials-slider-wrapper .slick-dots li {
    margin: 0;
    width: auto;
    height: auto;
}

.testimonials-slider-wrapper .slick-dots li button {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #0066CC;
    opacity: 0.3;
    cursor: pointer;
    font-size: 0;
    transition: all 0.3s ease;
}

.testimonials-slider-wrapper .slick-dots li button:before {
    display: none;
}

.testimonials-slider-wrapper .slick-dots li.slick-active button {
    opacity: 1;
    width: 2rem;
    border-radius: 999px;
}

.testimonials-slider-wrapper .slick-dots li button:hover {
    opacity: 0.7;
}

/* Slider Arrows */
.testimonials-slider-wrapper .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    font-size: 0;
}

.testimonials-slider-wrapper .slick-arrow:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 102, 204, 0.3);
}

.testimonials-slider-wrapper .slick-arrow:before {
    display: none;
}

.testimonials-slider-wrapper .slick-arrow:after {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    border-top: 2px solid white;
    border-right: 2px solid white;
    display: block;
}

.testimonials-slider-wrapper .slick-prev {
    left: 0;
}

.testimonials-slider-wrapper .slick-prev:after {
    transform: rotate(-135deg);
    margin-left: 0.25rem;
}

.testimonials-slider-wrapper .slick-next {
    right: 0;
}

.testimonials-slider-wrapper .slick-next:after {
    transform: rotate(45deg);
    margin-right: 0.25rem;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Large screens and up */
@media (min-width: 1024px) {
    .testimonials-section {
        padding: 5rem 0;
    }

    .testimonials-container {
        padding: 0 3rem;
    }

    .testimonials-title {
        font-size: 3rem;
    }

    .testimonial-card-inner {
        padding: 3rem;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .testimonials-title {
        font-size: 2.5rem;
    }

    .testimonial-quote-text {
        font-size: 1.125rem;
    }

    .testimonials-slider-wrapper {
        padding: 0 4rem;
    }

    .testimonials-slider-wrapper .slick-prev {
        left: 0;
    }

    .testimonials-slider-wrapper .slick-next {
        right: 0;
    }
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .testimonials-section {
        padding: 3rem 0;
    }

    .testimonials-header {
        margin-bottom: 2rem;
    }

    .testimonials-title {
        font-size: 1.875rem;
    }

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

    .testimonials-key-points {
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    .testimonials-pill {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .testimonial-card-inner {
        padding: 2rem;
    }

    .testimonial-quote-text {
        font-size: 1rem;
    }

    .testimonials-slider-wrapper {
        padding: 0 2.5rem;
    }

    .testimonials-slider-wrapper .slick-arrow {
        width: 2.5rem;
        height: 2.5rem;
    }

    .testimonials-slider-wrapper .slick-prev {
        left: 0;
    }

    .testimonials-slider-wrapper .slick-next {
        right: 0;
    }
}

@media (max-width: 640px) {
    .testimonials-slider-wrapper {
        padding: 0 1rem;
    }

    .testimonial-card {
        margin: 0 0.5rem;
    }

    .testimonials-slider-wrapper .slick-prev {
        left: -0.5rem;
    }

    .testimonials-slider-wrapper .slick-next {
        right: -0.5rem;
    }

    .testimonial-author {
        flex-direction: column;
        text-align: center;
    }

    .testimonial-author-info {
        text-align: center;
    }
}


/* ========================================
   TRUST & CREDIBILITY SECTION
   ======================================== */

/* Main Section */
.trust-section {
    padding: 5rem 0;
    background: white;
}

/* Container */
.trust-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header Section */
.trust-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Badge */
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 102, 204, 0.2);
}

.trust-badge svg {
    width: 1rem;
    height: 1rem;
    color: #0066CC;
}

.trust-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Title */
.trust-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: black;
    line-height: 1.2;
}

/* Description */
.trust-description {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    max-width: 48rem;
    margin: 0 auto;
}

/* Stats Grid */
.trust-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* Stat Card */
.trust-stat-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

.trust-stat-card:hover {
    border-color: rgba(0, 102, 204, 0.3);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    transform: translateY(-0.5rem);
}

/* Stat Icon */
.trust-stat-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px -2px rgba(0, 102, 204, 0.4);
}

.trust-stat-card:hover .trust-stat-icon {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 8px 24px -4px rgba(0, 102, 204, 0.5);
}

.trust-stat-icon svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

/* Icon Color Variations */
.trust-stat-icon-blue {
    background: linear-gradient(135deg, #0066CC, #0066CC);
}

.trust-stat-icon-green {
    background: linear-gradient(135deg, #00A651, #00A651);
}

.trust-stat-icon-blue-green {
    background: linear-gradient(135deg, #0066CC, #00A651);
}

.trust-stat-icon-green-blue {
    background: linear-gradient(135deg, #00A651, #0066CC);
}

/* Stat Value */
.trust-stat-value {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: black;
    line-height: 1;
}

/* Stat Label */
.trust-stat-label {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Medium screens (2 columns) */
@media (min-width: 768px) {
    .trust-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large screens and up (4 columns) */
@media (min-width: 1024px) {
    .trust-section {
        padding: 5rem 0;
    }

    .trust-container {
        padding: 0 3rem;
    }

    .trust-title {
        font-size: 3rem;
    }

    .trust-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .trust-stat-value {
        font-size: 3rem;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .trust-title {
        font-size: 2.5rem;
    }

    .trust-stat-value {
        font-size: 2.5rem;
    }
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .trust-section {
        padding: 3rem 0;
    }

    .trust-header {
        margin-bottom: 2rem;
    }

    .trust-title {
        font-size: 2.25rem;
    }

    .trust-description {
        font-size: 1.125rem;
    }

    .trust-stats-grid {
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .trust-title {
        font-size: 1.875rem;
    }

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

    .trust-stat-value {
        font-size: 2.5rem;
    }

    .trust-stat-label {
        font-size: 0.875rem;
    }
}

/* ========================================
   DELIVERY FRAMEWORK SECTION
   ======================================== */

/* Main Section */
.delivery-framework-section {
    padding: 5rem 0;
    background: white;
}

/* Container */
.delivery-framework-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header Section */
.delivery-framework-header {
    text-align: center;
    margin-bottom: 5rem;
}

/* Badge */
.delivery-framework-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 102, 204, 0.2);
}

.delivery-framework-badge svg {
    width: 1rem;
    height: 1rem;
    color: #0066CC;
}

.delivery-framework-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Title */
.delivery-framework-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: black;
    line-height: 1.2;
}

/* Description */
.delivery-framework-description {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    max-width: 48rem;
    margin: 0 auto;
}

/* Steps Grid */
.delivery-framework-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

/* Step Card */
.delivery-framework-step-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    height: 100%;
}

.delivery-framework-step-card:hover {
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3), 0 20px 40px -10px rgba(0, 102, 204, 0.2);
    transform: translateY(-0.25rem);
}

/* Step Number Badge */
.delivery-framework-step-number {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px -2px rgba(0, 102, 204, 0.4);
    transition: all 0.3s ease;
}

.delivery-framework-step-card:hover .delivery-framework-step-number {
    box-shadow: 0 8px 24px -4px rgba(0, 102, 204, 0.5);
    transform: scale(1.1);
}

.delivery-framework-step-number-text {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Number Badge Color Variations */
.delivery-framework-step-number-blue {
    background: linear-gradient(135deg, #0066CC, #0066CC);
}

.delivery-framework-step-number-green {
    background: linear-gradient(135deg, #00A651, #00A651);
}

.delivery-framework-step-number-blue-green {
    background: linear-gradient(135deg, #0066CC, #00A651);
}

.delivery-framework-step-number-green-blue {
    background: linear-gradient(135deg, #00A651, #0066CC);
}

/* Step Content */
.delivery-framework-step-content {
    margin-bottom: 1.25rem;
}

/* Step Title */
.delivery-framework-step-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: black;
    line-height: 1.3;
}

/* Step Description */
.delivery-framework-step-description {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.7;
}

/* Bottom Statement */
.delivery-framework-bottom-statement {
    margin-top: 4rem;
    text-align: center;
}

.delivery-framework-bottom-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    max-width: 56rem;
    margin: 0 auto;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Medium screens (2 columns) */
@media (min-width: 768px) {
    .delivery-framework-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large screens and up (3 columns) */
@media (min-width: 1024px) {
    .delivery-framework-section {
        padding: 5rem 0;
    }

    .delivery-framework-container {
        padding: 0 3rem;
    }

    .delivery-framework-title {
        font-size: 3rem;
    }

    .delivery-framework-steps-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .delivery-framework-title {
        font-size: 2.5rem;
    }

    .delivery-framework-step-title {
        font-size: 1.375rem;
    }
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .delivery-framework-section {
        padding: 3rem 0;
    }

    .delivery-framework-header {
        margin-bottom: 2rem;
    }

    .delivery-framework-title {
        font-size: 2.25rem;
    }

    .delivery-framework-description {
        font-size: 1.125rem;
    }

    .delivery-framework-steps-grid {
        gap: 1.5rem;
    }

    .delivery-framework-step-card {
        padding: 2rem;
    }

    .delivery-framework-bottom-statement {
        margin-top: 2rem;
    }
}

@media (max-width: 640px) {
    .delivery-framework-title {
        font-size: 1.875rem;
    }

    .delivery-framework-description {
        font-size: 1rem;
    }

    .delivery-framework-step-title {
        font-size: 1.25rem;
    }

    .delivery-framework-step-description {
        font-size: 0.9375rem;
    }

    .delivery-framework-bottom-text {
        font-size: 1rem;
    }
}


/* ========================================
   WHY CHOOSE US SECTION
   ======================================== */

/* Main Section */
.why-choose-us-section {
    padding: 5rem 0;
    background: white;
}

/* Container */
.why-choose-us-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header Section */
.why-choose-us-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Badge */
.why-choose-us-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 102, 204, 0.2);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.why-choose-us-badge svg {
    width: 1rem;
    height: 1rem;
    color: #0066CC;
}

.why-choose-us-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Title */
.why-choose-us-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: black;
    line-height: 1.2;
}

/* Description */
.why-choose-us-description {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.7;
    max-width: 48rem;
    margin: 0 auto;
}

/* Features Grid */
.why-choose-us-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
}

/* Feature Card */
.why-choose-us-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
}

.why-choose-us-feature-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Feature Icon */
.why-choose-us-feature-icon {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.why-choose-us-feature-card:hover .why-choose-us-feature-icon {
    transform: scale(1.1);
}

.why-choose-us-feature-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    color: white;
}

/* Feature Content */
.why-choose-us-feature-content {
    flex: 1;
}

/* Feature Title */
.why-choose-us-feature-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: black;
    line-height: 1.4;
}

/* Feature Description */
.why-choose-us-feature-description {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Large screens and up (2 columns) */
@media (min-width: 1024px) {
    .why-choose-us-section {
        padding: 5rem 0;
    }

    .why-choose-us-container {
        padding: 0 3rem;
    }

    .why-choose-us-title {
        font-size: 3rem;
    }

    .why-choose-us-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .why-choose-us-title {
        font-size: 2.5rem;
    }

    .why-choose-us-description {
        font-size: 1.125rem;
    }
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .why-choose-us-section {
        padding: 3rem 0;
    }

    .why-choose-us-header {
        margin-bottom: 2rem;
    }

    .why-choose-us-title {
        font-size: 2.25rem;
    }

    .why-choose-us-description {
        font-size: 1.125rem;
    }
}

@media (max-width: 640px) {
    .why-choose-us-title {
        font-size: 1.875rem;
    }

    .why-choose-us-description {
        font-size: 1rem;
    }

    .why-choose-us-feature-card {
        padding: 1.25rem;
    }

    .why-choose-us-feature-icon {
        width: 3rem;
        height: 3rem;
    }

    .why-choose-us-feature-icon i {
        width: 1.5rem;
        height: 1.5rem;
    }

    .why-choose-us-feature-title {
        font-size: 1rem;
    }

    .why-choose-us-feature-description {
        font-size: 0.8125rem;
    }
}


/* ========================================
   INSIGHTS & RESOURCES SECTION
   ======================================== */

/* Main Section */
.insights-resources-section {
    padding: 5rem 0;
    background: white;
}

/* Container */
.insights-resources-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ========================================
   BLOG POSTS SUBSECTION
   ======================================== */

.blog-posts-subsection {
    margin-bottom: 8rem;
}

/* Blog Header */
.blog-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* Badge */
.blog-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.5rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

.blog-badge svg {
    width: 1rem;
    height: 1rem;
    color: #0066CC;
}

.blog-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Blog Title */
.blog-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: black;
    line-height: 1.2;
}

/* Blog Description */
.blog-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    max-width: 48rem;
    margin: 0 auto;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* Blog Card */
.blog-card {
    position: relative;
    background: white;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.5s ease;
    text-decoration: none;
    display: block;
}

.blog-card:hover {
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3), 0 20px 40px -10px rgba(0, 102, 204, 0.2);
    transform: translateY(-0.5rem);
}

/* Card Gradient Overlay */
.blog-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.blog-card:hover .blog-card-overlay {
    opacity: 1;
}

/* Blog Image Container */
.blog-image-container {
    position: relative;
    height: 14rem;
    overflow: hidden;
}

/* Image Overlay Gradient */
.blog-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 10;
}

.blog-card:hover .blog-image-overlay {
    opacity: 1;
}

.blog-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.blog-card:hover .blog-image {
    transform: scale(1.1);
}

/* Category Badge */
.blog-category-badge1 { display: flex;     max-width: max-content; margin-bottom:15px;
    z-index: 20 !important;
    padding: 0.5rem 1rem !important;
    color: white !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; position: relative !important; left: 0px !important; top: 0px 
    !important;
}

.blog-category-badge1 svg{margin-right: 10px;}

/* Sparkle Icon */
.blog-sparkle-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    opacity: 0;
    transition: all 0.5s ease;
}

.blog-card:hover .blog-sparkle-icon {
    opacity: 1;
    transform: rotate(12deg);
}

.blog-sparkle-icon-inner {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.blog-sparkle-icon-inner i {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

/* Blog Content */
.blog-content {
    position: relative;
    padding: 1.5rem;
}

.blog-post-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: black;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card:hover .blog-post-title {
    color: #0066CC;
}

.blog-excerpt {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blog Footer */
.blog-footer {
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.blog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
}

.blog-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(0, 0, 0, 0.5);
}

.blog-date-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #0066CC;
    border-radius: 50%;
}

.blog-read-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #00A651;
}

.blog-read-time i {
    width: 1rem;
    height: 1rem;
}

/* Read More Link */
.blog-read-more {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066CC;
    transition: gap 0.3s ease;
}

.blog-card:hover .blog-read-more {
    gap: 1rem;
}

.blog-read-more-text {
    font-size: 0.875rem;
    font-weight: 600;
}

.blog-read-more i {
    width: 1rem;
    height: 1rem;
}

/* Corner Decoration */
.blog-corner-decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 6rem;
    height: 6rem;
    background: linear-gradient(to top right, rgba(0, 102, 204, 0.05), transparent);
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.blog-card:hover .blog-corner-decoration {
    opacity: 1;
}

/* View All Button */
.blog-view-all-container {
    text-align: center;
    margin-top: 4rem;
}

.blog-view-all-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    border-radius: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3);
}

.blog-view-all-button:hover {
    box-shadow: 0 20px 40px rgba(0, 102, 204, 0.4);
    transform: scale(1.05);
    color: white;
}

.blog-view-all-button i {
    width: 1.25rem;
    height: 1.25rem;
}

/* ========================================
   CASE STUDIES SUBSECTION
   ======================================== */

.case-studies-subsection {
    position: relative;
}

/* Background Decoration */
.case-studies-bg-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 18rem;
    height: 18rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
}

/* Case Studies Header */
.case-studies-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* Case Studies Badge */
.case-studies-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.5rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

.case-studies-badge svg {
    width: 1rem;
    height: 1rem;
    color: #0066CC;
}

.case-studies-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Case Studies Title */
.case-studies-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: black;
    line-height: 1.2;
}

/* Case Studies Description */
.case-studies-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    max-width: 48rem;
    margin: 0 auto;
}

/* Case Studies Grid */
.case-studies-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* Case Study Card */
.case-study-card {
    position: relative;
    background: white;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.5s ease;
    text-decoration: none;
    display: block;
}

.case-study-card:hover {
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3), 0 20px 40px -10px rgba(0, 102, 204, 0.2);
    transform: translateY(-0.5rem);
}

/* Case Study Card Overlay */
.case-study-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), transparent, rgba(0, 166, 81, 0.05));
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 10;
}

.case-study-card:hover .case-study-card-overlay {
    opacity: 1;
}

/* Case Study Image Container */
.case-study-image-container {
    position: relative;
    height: 18rem;
    overflow: hidden;
}

.case-study-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.case-study-card:hover .case-study-image {
    transform: scale(1.1);
}

/* Case Study Image Gradient */
.case-study-image-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), transparent);
}

/* Case Study Image Content */
.case-study-image-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
}

/* Industry Badge */
.case-study-industry-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
}

.case-study-industry-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #00A651;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Client Name */
.case-study-client-name {
    font-size: 1.875rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.case-study-card:hover .case-study-client-name {
    color: #00A651;
}

/* Trophy Icon */
.case-study-trophy-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    opacity: 0;
    transition: all 0.5s ease;
}

.case-study-card:hover .case-study-trophy-icon {
    opacity: 1;
    transform: scale(1.1) rotate(12deg);
}

.case-study-trophy-icon-inner {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.case-study-trophy-icon-inner i {
    width: 1.75rem;
    height: 1.75rem;
    color: white;
}

/* Case Study Content */
.case-study-content {
    position: relative;
    padding: 2rem;
}

/* Results Box */
.case-study-results-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1rem;
    border: 1px solid rgba(0, 102, 204, 0.1);
}

.case-study-results-icon {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3);
    transition: all 0.5s ease;
}

.case-study-card:hover .case-study-results-icon {
    transform: scale(1.1) rotate(6deg);
}

.case-study-results-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.case-study-results-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0.25rem;
}

.case-study-results-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0066CC;
    line-height: 1.4;
}

/* Case Study Read More */
.case-study-read-more {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066CC;
    transition: gap 0.3s ease;
}

.case-study-card:hover .case-study-read-more {
    gap: 0.75rem;
}

.case-study-read-more-text {
    font-size: 0.875rem;
    font-weight: 600;
}

.case-study-read-more svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s ease;
}

.case-study-card:hover .case-study-read-more i {
    transform: translateX(0.25rem);
}

/* Corner Decoration */
.case-study-corner-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 166, 81, 0.05), transparent);
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.case-study-card:hover .case-study-corner-decoration {
    opacity: 1; color: #fff;
}

/* View All Case Studies Button */
.case-studies-view-all-container {
    text-align: center;
    margin-top: 4rem;
}

.case-studies-view-all-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    border-radius: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3);
}

.case-studies-view-all-button:hover {
    box-shadow: 0 20px 40px rgba(0, 102, 204, 0.4);
    transform: scale(1.05);
    color: white;
}

.case-studies-view-all-button svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Medium screens (3 columns for blog, 2 for case studies) */
@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large screens and up */
@media (min-width: 1024px) {
    .insights-resources-section {
        padding: 5rem 0;
    }

    .insights-resources-container {
        padding: 0 3rem;
    }

    .blog-title,
    .case-studies-title {
        font-size: 3rem;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .blog-title,
    .case-studies-title {
        font-size: 2.5rem;
    }
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .insights-resources-section {
        padding: 3rem 0;
    }

    .blog-posts-subsection {
        margin-bottom: 4rem;
    }

    .blog-header,
    .case-studies-header {
        margin-bottom: 2rem;
    }

    .blog-title,
    .case-studies-title {
        font-size: 1.875rem;
    }

    .blog-description,
    .case-studies-description {
        font-size: 1rem;
    }

    .blog-grid,
    .case-studies-grid {
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .blog-post-title {
        font-size: 1.125rem;
    }

    .blog-excerpt {
        font-size: 0.9375rem;
    }

    .case-study-client-name {
        font-size: 1.5rem;
    }

    .case-study-results-text {
        font-size: 1rem;
    }
}


/* ========================================
   SUPPORT / FAQ SECTION
   ======================================== */

/* Main Section */
.faq-section {
    padding: 5rem 0;
    background: white;
}

/* Container */
.faq-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.faq-inner-container {
    max-width: 56rem;
    margin: 0 auto;
}

/* Header Section */
.faq-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Badge */
.faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.5rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

.faq-badge svg {
    width: 1rem;
    height: 1rem;
    color: #0066CC;
}

.faq-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Title */
.faq-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: black;
    line-height: 1.2;
}

/* Description */
.faq-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

/* FAQ List */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* FAQ Item */
.faq-item {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.08), 0 3px 8px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3), 0 8px 20px -5px rgba(0, 102, 204, 0.15);
}

/* FAQ Question Button */
.faq-question-button {
    width: 100%;
    padding: 1.5rem 2rem;
    display: inline-block;
    align-items: center;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.faq-question-button:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.faq-question-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: black;
    padding-right: 2rem;
    line-height: 1.4; float: left;
}

/* Chevron Icon */
.faq-chevron-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
    flex-shrink: 0;
    transition: transform 0.3s ease; float: right;
}

.faq-item.active .faq-chevron-icon {
    transform: rotate(180deg);
}

/* FAQ Answer Container */
.faq-answer-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer-container {
    max-height: 500px;
}

/* FAQ Answer Content */
.faq-answer-content {
    padding: 0 2rem 1.5rem 2rem;
    padding-top: 0.5rem;
}

.faq-answer-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Large screens and up */
@media (min-width: 1024px) {
    .faq-section {
        padding: 5rem 0;
    }

    .faq-container {
        padding: 0 3rem;
    }

    .faq-title {
        font-size: 3rem;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .faq-title {
        font-size: 2.5rem;
    }
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .faq-section {
        padding: 3rem 0;
    }

    .faq-header {
        margin-bottom: 2rem;
    }

    .faq-title {
        font-size: 1.875rem;
    }

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

@media (max-width: 640px) {
    .faq-question-button {
        padding: 1.25rem 1.5rem;
    }

    .faq-question-text {
        font-size: 1rem;
        padding-right: 1rem;
    }

    .faq-answer-content {
        padding: 0 1.5rem 1.25rem 1.5rem;
    }

    .faq-answer-text {
        font-size: 0.9375rem;
    }
}


/* ========================================
   LET'S GET STARTED / CTA SECTION
   ======================================== */

/* Main Section */
.cta-section {
    position: relative;
    overflow: hidden;
}

/* Container */
.cta-container {
    margin: 0 auto;
}

.cta-inner-container {
    margin: 0 auto;
}

/* Gradient Box */
.cta-gradient-box {
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    position: relative;
    overflow: hidden;
}

/* Dotted Pattern Overlay */
.cta-pattern-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.2;
}

.cta-pattern-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

/* Blur Circles */
.cta-blur-circle-top {
    position: absolute;
    top: 0;
    right: 0;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(80px);
}

.cta-blur-circle-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(80px);
}

/* Content Container */
.cta-content {
    padding: 5rem 1.5rem;
    position: relative;
    z-index: 10;
}

.cta-content-inner {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}

/* Badge */
.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-badge svg {
    width: 1rem;
    height: 1rem;
    color: white;
}

.cta-badge-text {
    font-size: 0.875rem;
    color: white;
    font-weight: 600;
}

/* Title */
.cta-title {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* Description */
.cta-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

/* Bullet Points List */
.cta-bullet-list {
    text-align: left;
    max-width: 42rem;
    margin: 0 auto 1.5rem auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cta-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
}

.cta-bullet-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

/* Bottom Description */
.cta-bottom-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

/* CTA Buttons Container */
.cta-buttons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Primary CTA Button */
.cta-button-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    background: white;
    color: #0066CC;
    border-radius: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.cta-button-primary:hover {
    box-shadow: 0 35px 60px rgba(0, 0, 0, 0.35);
    transform: scale(1.05);
}

.cta-button-primary i {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.cta-button-primary:hover .cta-icon-sparkles {
    transform: rotate(12deg);
}

.cta-button-primary:hover .cta-icon-arrow {
    transform: translateX(0.25rem);
}

/* Secondary CTA Button */
.cta-button-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
}

.cta-button-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    color: white;
}

.cta-button-secondary i {
    width: 1.25rem;
    height: 1.25rem;
}

/* Trust Indicators */
.cta-trust-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

.cta-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cta-trust-icon {
    width: 1rem;
    height: 1rem;
    color: #00A651;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Large screens */
@media (min-width: 1024px) {
    .cta-section {
        padding: 5rem 0 0 0;
    }

    .cta-container {
        
    }

    .cta-content {
        padding: 8rem 3rem;
    }

    .cta-title {
        font-size: 3rem;
    }

    .cta-buttons-container {
        flex-direction: row;
    }
}

/* Small screens (tablets) */
@media (min-width: 640px) {
    .cta-buttons-container {
        flex-direction: row;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .cta-title {
        font-size: 2.5rem;
    }

    .cta-description,
    .cta-bottom-description {
        font-size: 1.125rem;
    }

    .cta-bullet-item {
        font-size: 1rem;
    }
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .cta-section {
        padding: 3rem 0;
    }

    .cta-gradient-box {
        border-radius: 2rem;
    }

    .cta-content {
        padding: 3rem 1.5rem;
    }

    .cta-title {
        font-size: 2.25rem;
    }

    .cta-description,
    .cta-bottom-description {
        font-size: 1.125rem;
    }

    .cta-bullet-item {
        font-size: 1rem;
    }

    .cta-trust-indicators {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 640px) {
    .cta-title {
        font-size: 1.875rem;
    }

    .cta-description,
    .cta-bottom-description {
        font-size: 1rem;
    }

    .cta-bullet-item {
        font-size: 0.9375rem;
    }

    .cta-button-primary,
    .cta-button-secondary {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
        font-size: 0.9375rem;
    }

    .cta-buttons-container {
        width: 100%;
    }

    .cta-blur-circle-top,
    .cta-blur-circle-bottom {
        width: 16rem;
        height: 16rem;
    }
}

/* ========================================
   FOOTER SECTION
   ======================================== */

/* Footer Container */
.footer-container {
    max-width: 87.5rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

/* Main Footer Content Grid */
.footer-main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

/* Company Info Column */
.footer-company-info {
    grid-column: span 1;
}

/* Company Logo */
.footer-logo {
    height: 4rem;
    margin-bottom: 1rem;
    display: block;
}

/* Company Description */
.footer-description {
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 1.5rem;
    margin-top: -0.5rem;
    line-height: 1.6;
}

/* Contact Info List */
.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(0, 0, 0, 0.7);
}

.footer-contact-icon {
    width: 1rem;
    height: 1rem;
}

.footer-contact-text {
    font-size: 0.875rem;
}

.footer-contact-text a{
    color: #333; text-decoration: none;
}


/* Social Media Links */
.footer-social-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-social-link {
    width: 2.5rem;
    height: 2.5rem;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: black;
}

.footer-social-link:hover {
    background: black;
    color: white;
    border-color: black;
}

.footer-social-link svg {
    width: 1rem;
    height: 1rem;
}

/* Quick Links Section */
.footer-links-section {
    display: flex;
    flex-direction: column;
}

.footer-links-heading {
    color: black;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
}

.footer-links-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin: 0;
}

.footer-link {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: black;
}

/* Bottom Bar */
.footer-bottom-bar {
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-bottom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Copyright Text */
.footer-copyright {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.5);
}

/* Legal Links */
.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-legal-link {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal-link:hover {
    color: black;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Medium screens (2 columns) */
@media (min-width: 768px) {
    .footer-main-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom-content {
        flex-direction: row;
    }
}

/* Large screens (5 columns) */
@media (min-width: 1024px) {
    .footer-container {
        padding: 5rem 3rem;
    }

    .footer-main-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .footer-company-info {
        grid-column: span 2;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .footer-legal-links {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}

/* ========================================
   HERO SECTION
   ======================================== */

/* Main Hero Section */
.hero-section {
    position: relative;
    padding-top: 7rem;
    padding-bottom: 4rem;
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    overflow: hidden;
    min-height: 100vh;
}

/* Background Pattern */
.hero-pattern-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.2;
}

.hero-pattern-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

/* Decorative Box Borders */
.hero-decorative-box-1 {
    position: absolute;
    top: 5rem;
    right: 5rem;
    width: 8rem;
    height: 8rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    transform: rotate(12deg);
}

.hero-decorative-box-2 {
    position: absolute;
    bottom: 5rem;
    left: 5rem;
    width: 10rem;
    height: 10rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    transform: rotate(-12deg);
}

.hero-decorative-box-3 {
    position: absolute;
    top: 50%;
    left: 25%;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    transform: rotate(45deg);
}

/* Floating Orbs */
.hero-floating-orb-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(80px);
}

.hero-floating-orb-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(80px);
}

/* Hero Container */
.hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
}

.hero-content {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
}

/* Hero Title */
.hero-title {
    font-size: 3rem;
    color: white;
    margin-bottom: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

/* Key Highlights Grid */
.hero-highlights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero-highlight-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-highlight-text {
    font-size: 1rem;
    color: white;
    font-weight: 600;
}

/* Platform Slider Container */
.hero-slider-wrapper {
    margin-bottom: 2rem;
}

.hero-slider-container {
    max-width: 42rem;
    margin: 0 auto;
    position: relative;
}

/* Slider Slide */
.hero-slider-slide {
    padding: 0 0.75rem;
    outline: none;
}

/* Platform Card */
.hero-platform-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
}

.hero-platform-image-wrapper {
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    overflow: hidden;
}

.hero-platform-image {
    width: 100%;
    height: 22rem;
    object-fit: cover;
    display: block;
}

.hero-platform-title {
    color: white;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.hero-platform-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Platform Buttons */
.hero-platform-buttons {
    display: flex;
    gap: 0.75rem;
    padding: 0 0.75rem;
    justify-content: center;
}

.hero-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(to right, white, #eff6ff);
    color: #0066CC;
    border-radius: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.hero-button-primary:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    transform: scale(1.05);
    background: linear-gradient(to right, #eff6ff, white);
}

.hero-button-primary i {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.hero-button-primary:hover i {
    transform: translateX(0.25rem);
}

.hero-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.hero-button-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* ========================================
   SLICK SLIDER CUSTOMIZATION
   ======================================== */

/* Slider Dots */
.hero-slider-container .slick-dots {
    bottom: -2.5rem;
    display: flex !important;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}

.hero-slider-container .slick-dots li {
    margin: 0;
    width: auto;
    height: auto;
}

.hero-slider-container .slick-dots li button {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    font-size: 0;
    transition: all 0.3s ease;
}

.hero-slider-container .slick-dots li button:before {
    display: none;
}

.hero-slider-container .slick-dots li.slick-active button {
    background: white;
    width: 2rem;
    border-radius: 999px;
}

.hero-slider-container .slick-dots li button:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Slider Arrows */
.hero-slider-container .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    font-size: 0;
}

.hero-slider-container .slick-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.hero-slider-container .slick-arrow:before {
    display: none;
}

.hero-slider-container .slick-arrow:after {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    border-top: 2px solid white;
    border-right: 2px solid white;
    display: block;
}

.hero-slider-container .slick-prev {
    left: -4rem;
}

.hero-slider-container .slick-prev:after {
    transform: rotate(-135deg);
    margin-left: 0.25rem;
}

.hero-slider-container .slick-next {
    right: -4rem;
}

.hero-slider-container .slick-next:after {
    transform: rotate(45deg);
    margin-right: 0.25rem;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Medium screens (2 columns for highlights) */
@media (min-width: 768px) {
    .hero-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large screens */
@media (min-width: 1024px) {
    .hero-section {
        padding-top: 9rem;
        padding-bottom: 6rem;
    }

    .hero-container {
        padding: 0 3rem;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-highlights-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-slider-container .slick-prev {
        left: -3rem;
    }

    .hero-slider-container .slick-next {
        right: -3rem;
    }
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .hero-title {
        font-size: 2.25rem;
    }

    .hero-decorative-box-1,
    .hero-decorative-box-2,
    .hero-decorative-box-3 {
        display: none;
    }

    .hero-floating-orb-1,
    .hero-floating-orb-2 {
        width: 16rem;
        height: 16rem;
    }

    .hero-slider-container .slick-prev {
        left: 0.5rem;
    }

    .hero-slider-container .slick-next {
        right: 0.5rem;
    }

    .hero-slider-container .slick-arrow {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 640px) {
    .hero-title {
        font-size: 1.875rem;
    }

    .hero-highlight-text {
        font-size: 0.875rem;
    }

    .hero-platform-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-button-primary,
    .hero-button-secondary {
        width: 100%;
    }
}

/* ========================================
   HEADER SECTION
   ======================================== */

/* Main Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
}

/* Scrolled State */
.site-header.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Header Container */
.header-container {
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header Inner */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}

/* Logo */
.header-logo-wrapper {
    flex-shrink: 0;
}

.header-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.header-logo-link:hover {
    transform: scale(1.05);
}

.header-logo {
    height: 4.6875rem;
    transition: transform 0.3s ease;
}

/* Desktop Navigation */
.header-nav {
    display: none;
    align-items: center;
    gap: 2rem;
}

/* Nav Item */
.nav-item {
    position: relative;
    padding: 0.5rem 0;
}

/* Nav Link */
.nav-link {
    position: relative;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem; background-color: transparent; border: 0px;
}

.nav-link:hover {
    color: #0066CC;
}

/* Nav Link Underline */
.nav-link-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, #0066CC, #00A651);
    transition: width 0.3s ease;
}

.nav-link:hover .nav-link-underline {
    width: 100%;
}

/* Chevron Icon */
.nav-chevron {
    width: 0.75rem;
    height: 0.75rem;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dropdown-content {
    width: 20rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px);
    border-radius: 1rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1.5rem 2rem;
}

.dropdown-title {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(0, 102, 204, 0.6);
    margin-bottom: 1rem;
}

.dropdown-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dropdown-item {
    margin: 0;
}

.dropdown-link {
    display: block;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.8);
    text-decoration: none;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    position: relative;
}

.dropdown-link:hover {
    color: #0066CC;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
}

.dropdown-link-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown-arrow {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0;
    transform: translateX(-0.5rem);
    transition: all 0.2s ease;
}

.dropdown-link:hover .dropdown-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* CTA Button Container */
.header-cta-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* CTA Button */
.header-cta-button {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3);
}

.header-cta-button:hover {
    background: linear-gradient(to right, #0052A3, #008A44);
    box-shadow: 0 15px 35px rgba(0, 166, 81, 0.5);
    transform: scale(1.05);
}

.header-cta-icon {
    width: 1rem;
    height: 1rem;
}

/* Mobile Menu Button */
.mobile-menu-button {
    display: flex;
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mobile-menu-button:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mobile-menu-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(0, 0, 0, 0.7);
}

/* Mobile Menu Overlay */
.mobile-menu {
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 999;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-menu.active {
    transform: translateX(0);
}

/* Mobile Menu Content */
.mobile-menu-content {
    padding: 1.5rem;
}

/* Mobile Nav List */
.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Mobile Nav Link */
.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    text-decoration: none;
    font-weight: 600;
}

.mobile-nav-link:hover {
    color: #0066CC;
}

/* Mobile Dropdown Toggle */
.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0;
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-weight: 600;
}

.mobile-dropdown-chevron {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.mobile-dropdown-toggle.active .mobile-dropdown-chevron {
    transform: rotate(180deg);
}

/* Mobile Dropdown Content */
.mobile-dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-dropdown-content.active {
    max-height: 1000px;
}

.mobile-dropdown-list {
    list-style: none;
    padding: 0 0 1rem 1rem;
    margin: 0;
}

.mobile-dropdown-item {
    margin-bottom: 0.5rem;
}

.mobile-dropdown-link {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.mobile-dropdown-link:hover {
    color: #0066CC;
    background: rgba(0, 102, 204, 0.05);
}

/* Mobile CTA Button */
.mobile-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none; position: fixed; bottom: 0px; z-index: 9999;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Large screens */
@media (min-width: 1024px) {
    .header-inner {
        height: 5rem;
    }

    .header-logo {
        height: 4rem;
    }

    .header-nav {
        display: flex;
    }

    .header-cta-button {
        display: flex;
    }

    .mobile-menu-button {
        display: none;
    }

    .mobile-menu {
        display: none;
    }

    .header-container {
        padding: 0 3rem;
    }
    .mobile-cta-button{display: none;}
}

/* Tablet and below */
@media (max-width: 1023px) {
    .header-cta-container {
        gap: 0.5rem;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .header-logo {
        height: 4rem;
    }
}

.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 55px;
  border: none;
  background: transparent;
  cursor: pointer;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 999;
}

.scroll-top-btn.show {
  transform: translateY(0);
  opacity: 1;
}

.scroll-top-btn svg {
  transform: rotate(-90deg);
}

.progress-bg {
  fill: none;
  stroke: #e9ecef;
  stroke-width: 8;
}

.progress-bar {
  fill: none;
  stroke: #0d6efd;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.2s linear;
}

.arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #0d6efd;
}

/* ========================================
   CONTACT POPUP / MODAL
   ======================================== */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.modal-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    background: white;
    border-radius: 2rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-container {
    transform: scale(1);
}

/* Modal Header */
.modal-header {
    position: relative;
    padding: 2.5rem 2rem 2rem 2rem;
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    overflow: hidden;
}

/* Header Pattern */
.modal-header-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

/* Header Content */
.modal-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.modal-header-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.modal-header-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    color: white;
}

.modal-title {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.modal-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

/* Close Button */
.modal-close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
}

.modal-close-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.modal-close-button i {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

/* Modal Body */
.modal-body {
    padding: 2rem;
    max-height: 70vh;
    overflow-y: auto;
}

/* Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Form Group */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Form Label */
.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
}

.form-required {
    color: #e53e3e;
    margin-left: 0.25rem;
}

/* Form Input */
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    color: black;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: #0066CC;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Form Row (for side-by-side fields) */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.form-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    cursor: pointer;
    accent-color: #0066CC;
}

.checkbox-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.5;
}

.checkbox-label a {
    color: #0066CC;
    text-decoration: underline;
}

/* Submit Button */
.form-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3);
}

.form-submit-button:hover:not(:disabled) {
    box-shadow: 0 15px 35px rgba(0, 166, 81, 0.4);
    transform: translateY(-2px);
}

.form-submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-submit-button i {
    width: 1.25rem;
    height: 1.25rem;
}

/* Success Message */
.success-message {
    display: none;
    text-align: center;
    padding: 2rem;
}

.success-message.active {
    display: block;
}

.success-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.success-icon i {
    width: 2rem;
    height: 2rem;
    color: white;
}

.success-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: black;
    margin-bottom: 0.5rem;
}

.success-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.success-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.success-button:hover {
    transform: scale(1.05);
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Medium screens */
@media (min-width: 768px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-body {
        padding: 2.5rem;
    }
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .modal-header {
        padding: 2rem 1.5rem 1.5rem 1.5rem;
    }

    .modal-title {
        font-size: 1.5rem;
    }

    .modal-subtitle {
        font-size: 0.875rem;
    }

    .modal-body {
        padding: 1.5rem;
        max-height: 60vh;
    }

    .form-submit-button {
        padding: 0.875rem 1.5rem;
        font-size: 0.9375rem;
    }
}

/* Scrollbar Styling */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 102, 204, 0.3);
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 102, 204, 0.5);
}

/* ========================================
   CONTACT POPUP - PHONE SECTION
   ======================================== */

.contact-popup-phone-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: rgba(0, 0, 0, 0.6);
}

.contact-popup-phone-icon {
    width: 1rem;
    height: 1rem;
}

.contact-popup-phone-text {
    font-size: 0.875rem;
}

.contact-popup-phone-link {
    color: #0066CC;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-popup-phone-link:hover {
    color: #00A651;
}

.contact-popup-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin: 1.5rem 0;
}

/* ========================================
   PLATFORM ICON BOX
   ======================================== */

.platform-icon-box {
    display: inline-flex;
    width: 4rem;
    height: 4rem;
    background: linear-gradient(to bottom right, #0066CC, #00A651);
    border-radius: 1rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px -2px rgba(0, 102, 204, 0.4);
    transition: all 0.3s ease;
}

.platform-icon-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px -2px rgba(0, 102, 204, 0.6);
}

.platform-icon-box-icon {
    width: 2rem;
    height: 2rem;
    color: white;
}




/* Hero Section */
.marketing-hero-section {
    position: relative;
    padding-top: 7rem;
    padding-bottom: 3rem;
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #00A651 100%);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .marketing-hero-section {
        padding-top: 8.5rem;
    }
}

@media (max-width: 1000px) {
    .marketing-hero-section {
        padding-top: 4rem;
    }
}

.marketing-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.2;
}

.marketing-hero-pattern-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

/* Hero Decorative Elements */
.marketing-hero-decoration-1 {
    position: absolute;
    top: 5rem;
    right: 5rem;
    width: 8rem;
    height: 8rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    transform: rotate(12deg);
}

.marketing-hero-decoration-2 {
    position: absolute;
    bottom: 5rem;
    left: 5rem;
    width: 10rem;
    height: 10rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    transform: rotate(-12deg);
}

.marketing-hero-decoration-3 {
    position: absolute;
    top: 50%;
    left: 25%;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    transform: rotate(45deg);
}

.marketing-hero-content {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
}

.marketing-hero-title {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
    color: white;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .marketing-hero-title {
        font-size: 3rem;
    }
}

.marketing-hero-description {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    font-size: 17px;
    line-height: 1.6;
}

/* ========================================
   INTRODUCTION SECTION
   ======================================== */

.marketing-intro-section {
    position: relative;
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .marketing-intro-section {
        padding: 6rem 0;
    }
}

.marketing-intro-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.08;
}

.marketing-intro-pattern-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, black 1px, transparent 0);
    background-size: 40px 40px;
}

.marketing-intro-content {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
}

.marketing-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.marketing-section-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.marketing-section-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

.marketing-intro-heading {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .marketing-intro-heading {
        font-size: 2.25rem;
    }
}

.marketing-intro-text {
    margin-bottom: 2rem;
}

.marketing-intro-text-large {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.8); margin-top: 10px;
}

@media (min-width: 1024px) {
    .marketing-intro-text-large {
        font-size: 1.1875rem;
    }
}

.marketing-intro-text-highlight {
    font-weight: 600;
}

.marketing-intro-text-secondary {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .marketing-intro-text-secondary {
        font-size: 1.25rem;
    }
}

/* CTA Buttons */
.marketing-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .marketing-cta-buttons {
        flex-direction: row;
    }
}

.marketing-cta-button-primary {
    background: linear-gradient(to right, #0066CC, #0052A3);
    color: white;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3);
}

.marketing-cta-button-primary:hover {
    box-shadow: 0 15px 35px rgba(0, 102, 204, 0.5);
    transform: translateY(-2px);
}

.marketing-cta-button-secondary {
    background: linear-gradient(to right, #00A651, #008A44);
    color: white;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 166, 81, 0.3);
}

.marketing-cta-button-secondary:hover {
    box-shadow: 0 15px 35px rgba(0, 166, 81, 0.5);
    transform: translateY(-2px);
}

.marketing-cta-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Microcopy with Gradient Animation */
.marketing-microcopy {
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.6;
    background: linear-gradient(90deg, #0066CC 0%, #00A651 25%, #0066CC 50%, #00A651 75%, #0066CC 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

/* ========================================
   CONTENT SECTIONS (Reusable Styles)
   ======================================== */

.marketing-content-section {
    padding: 5rem 0;
}

@media (min-width: 1024px) {
    .marketing-content-section {
        padding: 6rem 0;
    }
}

.marketing-content-section-alt {
    padding: 5rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .marketing-content-section-alt {
        padding: 6rem 0;
    }
}

.marketing-section-container {
    max-width: 1280px;
    margin: 0 auto;
}

.marketing-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .marketing-section-header {
        margin-bottom: 4rem;
    }
}

.marketing-section-title {
    font-size: 1.875rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .marketing-section-title {
        font-size: 3rem;
    }
}

.marketing-section-description {
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 1.5rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    line-height: 1.6;
}

/* Feature Grid */
.marketing-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .marketing-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

     .marketing-feature-grids1 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.marketing-feature-grids1 article h2 a{font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: black;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; line-height: 1.4;
    overflow: hidden;}


.marketing-feature-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.marketing-feature-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.marketing-feature-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.marketing-feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.marketing-feature-text {
    font-size: 1.125rem;
    line-height: 1.7;
}

/* Highlighted Box */
.marketing-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.marketing-highlight-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    text-align: center;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .marketing-highlight-text {
        font-size: 1.25rem;
    }
}

/* ========================================
   INDUSTRIES SECTION
   ======================================== */

.marketing-industries-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .marketing-industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .marketing-industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.marketing-industry-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.marketing-industry-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.marketing-industry-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.marketing-industry-icon-wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC 0%, #00A651 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.marketing-industry-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.marketing-industry-name {
    font-size: 1.125rem;
    line-height: 1.7;
    padding-top: 0.5rem;
}

/* Regions Grid */
.marketing-regions-wrapper {
    text-align: center;
    color: rgba(0, 0, 0, 0.8);
    font-size: 1.125rem;
    margin-bottom: 2rem;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .marketing-regions-wrapper {
        font-size: 1.25rem;
    }
}

.marketing-regions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .marketing-regions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .marketing-regions-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.marketing-region-item {
    text-align: center;
}

.marketing-region-icon-wrapper {
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC 0%, #00A651 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}

.marketing-region-icon {
    width: 2rem;
    height: 2rem;
    color: white;
}

.marketing-region-name {
    font-size: 0.875rem;
    font-weight: 600;
}

/* ========================================
   CASE STUDIES SECTION
   ======================================== */

.marketing-case-studies-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.marketing-case-study-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.marketing-case-study-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

.marketing-case-study-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 1024px) {
    .marketing-case-study-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Case Study Image */
.marketing-case-study-image-wrapper {
    position: relative;
    height: 16rem;
}

@media (min-width: 1024px) {
    .marketing-case-study-image-wrapper {
        height: 100%;
    }
}

.marketing-case-study-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marketing-case-study-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
}

/* Case Study Content */
.marketing-case-study-content {
    padding: 2rem;
}

@media (min-width: 1024px) {
    .marketing-case-study-content {
        padding: 2.5rem;
    }
}

.marketing-case-study-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.marketing-case-study-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.marketing-case-study-section {
    margin-bottom: 1rem;
}

.marketing-case-study-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.marketing-case-study-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
}

.marketing-case-study-outcome {
    font-size: 1.125rem;
    color: #00A651;
    line-height: 1.7;
    font-weight: 600;
}

.marketing-case-study-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066CC;
    margin-top: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.marketing-case-study-link:hover {
    gap: 0.75rem;
}

.marketing-case-study-link-icon {
    width: 1rem;
    height: 1rem;
}

.marketing-view-all-wrapper {
    text-align: center;
    margin-top: 3rem;
}

.marketing-view-all-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    border-radius: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3);
}

.marketing-view-all-button:hover {
    box-shadow: 0 15px 35px rgba(0, 102, 204, 0.4);
    transform: scale(1.05);
}

.marketing-view-all-text {
    font-size: 1.125rem;
}

.marketing-view-all-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* ========================================
   FAQ SECTION
   ======================================== */

.marketing-faq-section {
    padding: 5rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .marketing-faq-section {
        padding: 8rem 0;
    }
}

.marketing-faq-container {
    max-width: 56rem;
    margin: 0 auto;
}

.marketing-faq-header {
    text-align: center;
    margin-bottom: 4rem;
}

.marketing-faq-title {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    font-weight: 700;
}

@media (min-width: 1024px) {
    .marketing-faq-title {
        font-size: 3rem;
    }
}

.marketing-faq-subtitle {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 1rem;
    text-align: center;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .marketing-faq-subtitle {
        font-size: 1.25rem;
    }
}

.marketing-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.marketing-faq-item {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease;
}

.marketing-faq-item:hover {
    border-color: rgba(0, 102, 204, 0.2);
}

.marketing-faq-button {
    width: 100%;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.marketing-faq-button:hover {
    background: rgba(0, 0, 0, 0.02);
}

.marketing-faq-question {
    font-size: 1.125rem;
    padding-right: 2rem;
    font-weight: 600;
    line-height: 1.5;
}

.marketing-faq-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
    flex-shrink: 0;
}

.marketing-faq-answer {
    padding: 0 2rem 1.5rem 2rem;
}

.marketing-faq-answer-text {
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
}

/* ========================================
   DESIGN SYSTEM SECTION
   ======================================== */

.marketing-design-system-section {
    padding: 5rem 0;
}

@media (min-width: 1024px) {
    .marketing-design-system-section {
        padding: 6rem 0;
    }
}

.marketing-design-system-container {
    max-width: 80rem;
    margin: 0 auto;
}

.marketing-design-system-header {
    text-align: center;
    margin-bottom: 3rem;
}

.marketing-design-system-title {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .marketing-design-system-title {
        font-size: 3rem;
    }
}

.marketing-design-system-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .marketing-design-system-description {
        font-size: 1.25rem;
    }
}

.marketing-design-system-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
    margin-top: -1.875rem;
}

@media (min-width: 1024px) {
    .marketing-design-system-box {
        padding: 3rem;
    }
}

.marketing-design-system-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .marketing-design-system-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.marketing-design-system-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.marketing-design-system-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.marketing-design-system-text {
    font-size: 1.125rem;
    line-height: 1.7;
}

.marketing-design-system-footer {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    text-align: center;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .marketing-design-system-footer {
        font-size: 1.25rem;
    }
}

/* ========================================
   FINAL CTA SECTION
   ======================================== */

.marketing-final-cta-section {
    position: relative;
    padding: 4rem 0;
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #00A651 100%);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .marketing-final-cta-section {
        padding: 5rem 0;
    }
}

.marketing-final-cta-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
}

.marketing-final-cta-pattern-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

/* CTA Decorative Elements */
.marketing-final-cta-decoration-1 {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 6rem;
    height: 6rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    transform: rotate(12deg);
}

.marketing-final-cta-decoration-2 {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    width: 8rem;
    height: 8rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    transform: rotate(-12deg);
}

.marketing-final-cta-content {
    max-width: 64rem;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
}

.marketing-final-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    border-radius: 9999px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.marketing-final-cta-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.marketing-final-cta-badge-text {
    font-size: 0.875rem;
    color: white;
    font-weight: 600;
}

.marketing-final-cta-title {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
    color: white;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .marketing-final-cta-title {
        font-size: 3rem;
    }
}

.marketing-final-cta-features {
    max-width: 50rem;
    margin: 0 auto 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .marketing-final-cta-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

.marketing-final-cta-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.marketing-final-cta-feature-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: white;
    flex-shrink: 0;
}

.marketing-final-cta-feature-text {
    color: white;
    font-size: 16px; text-align: left;
    line-height: 1.4;
}

.marketing-final-cta-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.marketing-final-cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 640px) {
    .marketing-final-cta-buttons {
        flex-direction: row;
    }
}

.marketing-final-cta-button-white {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: white;
    color: #0066CC;
    border: 2px solid white;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.marketing-final-cta-button-white:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.marketing-final-cta-button-transparent {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.marketing-final-cta-button-transparent:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.marketing-final-cta-button-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .container {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Mobile devices */
@media (max-width: 640px) {
    .marketing-hero-decoration-1,
    .marketing-hero-decoration-2,
    .marketing-hero-decoration-3 {
        display: none;
    }
    
    .marketing-final-cta-decoration-1,
    .marketing-final-cta-decoration-2 {
        display: none;
    }
}

/* Tablet devices */
@media (min-width: 641px) and (max-width: 1023px) {
    .marketing-hero-decoration-1 {
        top: 3rem;
        right: 3rem;
        width: 6rem;
        height: 6rem;
    }
    
    .marketing-hero-decoration-2 {
        bottom: 3rem;
        left: 3rem;
        width: 7rem;
        height: 7rem;
    }
}

/* ========================================
   TRAVEL SYSTEM OVERVIEW SECTION
   ======================================== */

.travel-system-overview-section {
    padding: 5rem 0;
}

@media (min-width: 1024px) {
    .travel-system-overview-section {
        padding: 6rem 0;
    }
}

.travel-system-overview-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* Header */
.travel-system-overview-header {
    text-align: center;
    margin-bottom: 4rem;
}

.travel-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.travel-section-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.travel-section-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

.travel-system-overview-title {
    font-size: 1.875rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .travel-system-overview-title {
        font-size: 3rem;
    }
}

.travel-system-overview-description {
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 1.5rem;
    text-align: center;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    line-height: 1.6;
}

/* Two Column Grid */
.travel-system-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: stretch;
}

@media (min-width: 1024px) {
    .travel-system-overview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

/* Left Side - Content */
.travel-system-overview-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: flex-start;
    margin-top: 0;
    padding-top: 0;
}

.travel-system-overview-intro-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
}

/* Feature List */
.travel-system-overview-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.travel-system-overview-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.travel-system-overview-item-icon-wrapper {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 166, 81, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.travel-system-overview-item-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.travel-system-overview-item-text {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.8);
}

.travel-system-overview-closing-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    font-style: italic;
    line-height: 1.8;
}

/* Right Side - Image */
.travel-system-overview-image-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.travel-system-overview-image-container {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    height: 100%;
}

.travel-system-overview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.travel-system-overview-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
}

/* Decorative Element */
.travel-system-overview-decoration {
    position: absolute;
    z-index: -1;
    bottom: -1.5rem;
    left: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 166, 81, 0.1) 100%);
    border-radius: 1.5rem;
}

/* ========================================
   UTILITY - CONTAINER
   ======================================== */

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .container {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 640px) {
    .travel-system-overview-title {
        font-size: 1.5rem;
    }
    
    .travel-system-overview-description {
        font-size: 16px;
    }
    
    .travel-system-overview-intro-text,
    .travel-system-overview-closing-text {
        font-size: 1rem;
    }
}

/* ========================================css ======================================== */

.gform-theme--foundation .gform-grid-col.gform-grid-col--size-auto{text-align:left !important;}

.gfield{text-align:left !important;}

.gform_required_legend{display:none;}

.gform_button {display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    padding: 1.3rem 2rem !important;
    background: linear-gradient(to right, #0066CC, #00A651) !important;
    color: white !important;
    border: none !important;
    border-radius: 0.75rem !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important; margin-top: 15px;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3) !important;}



.large, #input_1_1_3, #input_2_1_3, #input_3_14_6, #input_3_1_3, #input_4_1_3, #input_4_14_6{width: 100% !important;
    padding: 0.875rem 1rem !important;
    font-size: 1rem !important;
    color: black !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s ease !important; height: 50px !important; box-shadow:none !important;}

    .large::placeholder{color: #888 !important; font-size: 14px;}

     #input_1_1_3::placeholder, #input_2_1_3::placeholder, #input_3_14_6::placeholder, #input_3_1_3::placeholder, #input_4_1_3::placeholder, #input_4_14_6::placeholder{color: #888 !important; font-size: 14px;}

.gfield_label{font-size: 0.875rem;
    font-weight: 600 !important;
    color: rgba(0, 0, 0, 0.8)!important;}

#gform_fields_1{display: inline-block !important;}

#gform_fields_1 .gfield{margin: 10px 10px !important; float:left !important; width: 46%;}

#input_1_6, #input_2_7, #input_2_11, #input_3_11, #input_3_7, #input_3_14_6, #input_4_14_6, #input_4_7{line-height: 1.5; color: #888 !important; font-size: 14px !important;}

.gform_validation_errors{padding: 10px 0px !important; margin-bottom: 20px !important;}
.gform_validation_errors h2{margin: 0px 5px !important; font-size: 12px;}
.gfield_description{font-size: 12px;}

#gform_fields_2, #gform_fields_3, #gform_fields_4{gap:1.3rem}

#input_3_14, #input_4_14{display: inherit !important;}

.gform_title{display: none;}

#input_4_14_6_container, #input_3_14_6_container{padding-inline:0px !important}

/* ========================================Theme Edit ======================================== */
.abtsection2 p:last-child{ margin:0px !important; }

.subadbox1 p:last-child{margin:0px !important;}

.subprivacysection1 p:last-child{margin:0px !important;}

.casesection1 p:last-child{margin:0px !important;}

.ecomsec1 p:last-child{margin:0px !important;}

.section10 p:last-child{margin:0px !important;}

.entry-content p:last-child{margin:0px !important;}

.maincasebg p:last-child{margin:0px !important;}

.philbox1 p:last-child{margin:0px !important;}

.cloudbox1 p:last-child{margin:0px !important;}

.entry-title{display: none;}

/* ========================================
   FEATURE CARD WITH CHECKMARK
   ======================================== */

.digital-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.digital-feature-card-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.digital-feature-card-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.8);
}

/* Responsive */
@media (max-width: 640px) {
    .digital-feature-card {
        padding: 0.875rem 1.25rem;
    }
    
    .digital-feature-card-text {
        font-size: 1rem;
    }
}

/* ========================================
   ECIP PAGE - COMPLETE CSS
   ======================================== */

.ecip-problem-content-box {
    background: linear-gradient(135deg, white 0%, rgba(0, 0, 0, 0.02) 100%);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .ecip-problem-content-box {
        padding: 3rem;
    }
}

.ecip-problem-box-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    font-weight: 600;
}

@media (min-width: 1024px) {
    .ecip-problem-box-title {
        font-size: 1.875rem;
    }
}

.ecip-problem-steps {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ecip-problem-step-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ecip-problem-step-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.ecip-problem-step-number {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
}

.ecip-problem-step-content {
    flex: 1;
}

.ecip-problem-step-text {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.7;
}

.ecip-adaptation-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
    margin-left: 3.5rem;
}

@media (min-width: 768px) {
    .ecip-adaptation-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ecip-adaptation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ecip-adaptation-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #0066CC;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.ecip-adaptation-text {
    font-size: 1rem;
    line-height: 1.7;
}

.ecip-impact-statement {
    background: linear-gradient(to right, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.2);
}

.ecip-impact-text {
    font-size: 1.25rem;
    color: white;
    font-weight: 600;
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .ecip-impact-text {
        font-size: 1.5rem;
    }
}

.ecip-impact-number {
    font-size: 1.875rem;
    font-weight: 700;
}

@media (min-width: 1024px) {
    .ecip-impact-number {
        font-size: 2.25rem;
    }
}

.ecip-variation-title {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
}

.ecip-variation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .ecip-variation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .ecip-variation-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .ecip-variation-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.ecip-variation-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.ecip-variation-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ecip-variation-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #0066CC;
    flex-shrink: 0;
}

.ecip-variation-text {
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.5;
    font-weight: 500;
}

.ecip-final-statement {
    background: linear-gradient(135deg, #fef2f2 0%, #fed7aa 100%);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid #fecaca;
    text-align: center;
}

.ecip-final-statement-text {
    font-size: 1.25rem;
    color: #7f1d1d;
    font-style: italic;
    line-height: 1.8;
    font-weight: 600;
}

/* ========================================
   DEFINITION SECTION (WHAT IS ECIP)
   ======================================== */

.ecip-definition-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .ecip-definition-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ecip-definition-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ecip-definition-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ecip-definition-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ecip-definition-text {
    font-size: 1rem;
    line-height: 1.7;
}

.ecip-definition-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecip-logo-box {
    width: 16rem;
    height: 16rem;
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 50px rgba(124, 58, 237, 0.3);
}

.ecip-logo-icon {
    width: 8rem;
    height: 8rem;
    color: white;
    stroke-width: 1.5;
}

.ecip-combines-section {
    margin-bottom: 3rem;
}

.ecip-combines-title {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
}

.ecip-combines-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 80rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .ecip-combines-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ecip-combines-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.ecip-combines-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ecip-combines-icon-wrapper {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecip-combines-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
    stroke-width: 2;
}

.ecip-combines-text {
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.5;
    font-weight: 500;
}

.ecip-closing-statement {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.ecip-closing-text {
    font-size: 1.125rem;
    line-height: 1.8;
}

.ecip-download-section {
    margin-top: 2rem;
    text-align: center;
}

.ecip-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ecip-download-btn:hover {
    box-shadow: 0 25px 50px rgba(0, 102, 204, 0.3);
    transform: translateY(-2px);
}

.ecip-download-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.ecip-download-btn:hover .ecip-download-icon {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ========================================
   WHY DIFFERENT SECTION
   ======================================== */

.ecip-different-content-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1024px) {
    .ecip-different-content-box {
        padding: 3rem;
    }
}

.ecip-different-intro {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    font-weight: 600;
}

.ecip-different-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    .ecip-different-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ecip-different-column-title {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.ecip-different-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ecip-different-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ecip-different-icon-check {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ecip-different-icon-cross {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ecip-different-icon-cross::before {
    content: '';
    width: 0.75rem;
    height: 0.125rem;
    background: #ef4444;
}

.ecip-different-text {
    font-size: 1rem;
    line-height: 1.7;
}

.ecip-different-bottom {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 2px solid rgba(0, 0, 0, 0.05);
}

.ecip-different-highlight {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 600;
}

.ecip-different-subtext {
    font-size: 1.125rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
}

/* ========================================
   CAPABILITIES SECTION
   ======================================== */
.ecip-capabilities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .ecip-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ecip-capabilities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ecip-capability-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.ecip-capability-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

.ecip-capability-icon-wrapper {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 166, 81, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.ecip-capability-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: #0066CC;
}

.ecip-capability-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.ecip-capability-description {
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.7;
}

/* ========================================
   COST REDUCTION SECTION
   ======================================== */

.ecip-cost-content-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .ecip-cost-content-box {
        padding: 3rem;
    }
}

.ecip-cost-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .ecip-cost-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ecip-cost-intro {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    font-weight: 600;
}

.ecip-cost-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ecip-cost-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.ecip-cost-number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #00A651 0%, #008A44 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
}

.ecip-cost-text {
    font-size: 1.125rem;
    padding-top: 0.25rem;
    line-height: 1.7;
}

.ecip-cost-image-wrapper {
    position: relative;
}

.ecip-cost-image-container {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.ecip-cost-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px;
    display: block;
}

.ecip-cost-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
}

.ecip-cost-bottom-statement {
    background: linear-gradient(135deg, rgba(0, 166, 81, 0.05) 0%, rgba(0, 102, 204, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ecip-cost-bottom-text {
    font-size: 1.125rem;
    text-align: center;
    line-height: 1.8;
}

/* ========================================
   TARGET AUDIENCE SECTION
   ======================================== */
.ecip-audience-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .ecip-audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ecip-audience-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ecip-audience-title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.ecip-audience-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ecip-audience-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ecip-audience-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ecip-audience-text {
    font-size: 1rem;
    line-height: 1.7;
}

/* ========================================
   GOVERNANCE SECTION
   ======================================== */

.ecip-governance-section {
    padding: 5rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .ecip-governance-section {
        padding: 5rem 0;
    }
}

.ecip-governance-container {
    max-width: 1280;
    margin: 0 auto;
}

.ecip-governance-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .ecip-governance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ecip-governance-header {
    margin-bottom: 2rem;
}

.ecip-governance-title {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

@media (min-width: 1024px) {
    .ecip-governance-title {
        font-size: 2.25rem;
    }
}

.ecip-governance-content-box {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ecip-governance-intro {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.ecip-governance-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.ecip-governance-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ecip-governance-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ecip-governance-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ecip-governance-text {
    font-size: 1rem;
    line-height: 1.7;
}

.ecip-governance-closing {
    font-size: 1rem;
    margin-top: 1.5rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
}


.ecip-cta-intro {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    line-height: 1.6;
}


.ecip-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.ecip-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 640px) {
    .ecip-section-title {
        font-size: 1.5rem;
    }
    
    .ecip-intro-title {
        font-size: 1.5rem;
    }
    
    .ecip-hero-title {
        font-size: 2rem;
    }
    
    .ecip-cta-title {
        font-size: 1.5rem;
    }
}

.ecip-governance-title {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

@media (min-width: 1024px) {
    .ecip-governance-title {
        font-size: 2.25rem;
    }
}


/* ========================================
   TRAVEL TECHNOLOGY PLATFORM - COMPLETE CSS
   ======================================== */

.ttp-platform-intro-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.ttp-platform-intro-text {
    font-size: 1.25rem;
    text-align: center;
    font-weight: 600;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .ttp-platform-intro-text {
        font-size: 1.5rem;
    }
}

.ttp-platform-features-box {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.ttp-platform-features-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.ttp-platform-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .ttp-platform-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ttp-platform-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ttp-platform-feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ttp-platform-feature-text {
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.ttp-platform-statement {
    background: linear-gradient(to right, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.ttp-platform-statement-text {
    font-size: 1.25rem;
    color: white;
    font-weight: 600;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .ttp-platform-statement-text {
        font-size: 1.5rem;
    }
}

/* ========================================
   OUTGROW SECTION
   ======================================== */


.ttp-outgrow-intro-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.ttp-outgrow-intro-text {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 600;
    line-height: 1.8;
}

.ttp-outgrow-intro-subtext {
    font-size: 1.25rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
}

.ttp-outgrow-problems-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .ttp-outgrow-problems-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ttp-outgrow-problem-card {
    background: #fef2f2;
    border: 2px solid #fecaca;
    border-radius: 1rem;
    padding: 2rem;
}

.ttp-outgrow-problem-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ttp-outgrow-problem-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: #ef4444;
    border-radius: 50%;
}

.ttp-outgrow-problem-title {
    font-size: 1.25rem;
    color: #7f1d1d;
    font-weight: 600;
}

.ttp-outgrow-problem-text {
    color: rgba(127, 29, 29, 0.8);
    line-height: 1.6;
}

.ttp-outgrow-statement {
    background: linear-gradient(to right, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.ttp-outgrow-statement-text {
    font-size: 1.25rem;
    color: white;
    font-weight: 600;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.ttp-outgrow-statement-text:last-child {
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .ttp-outgrow-statement-text {
        font-size: 1.5rem;
    }
}

/* ========================================
   ARCHITECTURE SECTION
   ======================================== */

.ttp-architecture-intro-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.ttp-architecture-intro-text {
    font-size: 1.25rem;
    text-align: center;
    font-weight: 600;
    line-height: 1.8;
}

.ttp-architecture-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ttp-architecture-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ttp-architecture-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s ease;
}

.ttp-architecture-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.ttp-architecture-number {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
}

.ttp-architecture-blue {
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 100%);
}

.ttp-architecture-green {
    background: linear-gradient(135deg, #00A651 0%, #008A44 100%);
}

.ttp-architecture-mixed {
    background: linear-gradient(135deg, #0066CC 0%, #00A651 100%);
}

.ttp-architecture-number-text {
    font-size: 1.875rem;
    color: white;
    font-weight: 700;
}

.ttp-architecture-card-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.ttp-architecture-card-description {
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

.ttp-architecture-statement {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.ttp-architecture-statement-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

/* ========================================
   BACKEND SECTION
   ======================================== */


.ttp-backend-content-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
}

.ttp-backend-intro-text {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 600;
    line-height: 1.8;
}

.ttp-backend-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ttp-backend-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ttp-backend-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ttp-backend-feature-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.ttp-backend-feature-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.ttp-backend-feature-icon-wrapper {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #0066CC 0%, #00A651 100%);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.ttp-backend-feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.ttp-backend-feature-title {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.ttp-backend-feature-description {
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.875rem;
    line-height: 1.6;
}

.ttp-backend-why-box {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ttp-backend-why-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
}

.ttp-backend-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ttp-backend-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ttp-backend-why-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ttp-backend-why-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ttp-backend-why-item-title {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.ttp-backend-why-item-text {
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

/* ========================================
   EXTRANET SECTION
   ======================================== */


.ttp-extranet-content-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
}

.ttp-extranet-intro-text {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 600;
    line-height: 1.8;
}

.ttp-extranet-features-box {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.ttp-extranet-features-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
}

.ttp-extranet-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .ttp-extranet-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ttp-extranet-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 0.75rem;
    padding: 1rem;
}

.ttp-extranet-feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ttp-extranet-feature-text {
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.ttp-extranet-statement {
    background: linear-gradient(to right, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.ttp-extranet-statement-text {
    font-size: 1.25rem;
    color: white;
    font-weight: 600;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .ttp-extranet-statement-text {
        font-size: 1.5rem;
    }
}

.ttp-extranet-image-box {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ttp-extranet-image {
    width: 100%;
    height: 16rem;
    object-fit: cover;
    border-radius: 0.75rem;
    display: block;
}

/* ========================================
   B2B SECTION
   ======================================== */


.ttp-b2b-content-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ttp-b2b-intro-text {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 600;
    line-height: 1.8;
}

.ttp-b2b-features-box {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.ttp-b2b-features-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
}

.ttp-b2b-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .ttp-b2b-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ttp-b2b-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 0.75rem;
    padding: 1rem;
}

.ttp-b2b-feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ttp-b2b-feature-text {
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.ttp-b2b-benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ttp-b2b-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ttp-b2b-benefit-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.ttp-b2b-benefit-icon-wrapper {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #0066CC 0%, #00A651 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
}

.ttp-b2b-benefit-icon {
    width: 2rem;
    height: 2rem;
    color: white;
}

.ttp-b2b-benefit-title {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.ttp-b2b-benefit-text {
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.875rem;
    line-height: 1.6;
}

.ttp-b2b-statement {
    background: linear-gradient(to right, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.ttp-b2b-statement-text {
    font-size: 1.25rem;
    color: white;
    font-weight: 600;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .ttp-b2b-statement-text {
        font-size: 1.5rem;
    }
}

/* ========================================
   OPERATIONS SECTION
   ======================================== */

.ttp-operations-content-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ttp-operations-intro-text {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 600;
    line-height: 1.8;
}

.ttp-operations-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.ttp-operations-step {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ttp-operations-step-number {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #0066CC 0%, #00A651 100%);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
}

.ttp-operations-step-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.ttp-operations-statement {
    background: linear-gradient(to right, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.ttp-operations-statement-text-1,
.ttp-operations-statement-text-2 {
    font-size: 1.25rem;
    color: white;
    font-weight: 600;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.ttp-operations-statement-text-2 {
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .ttp-operations-statement-text-1,
    .ttp-operations-statement-text-2 {
        font-size: 1.5rem;
    }
}

/* ========================================
   GLOBAL SECTION
   ======================================== */

.ttp-global-content-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
}

.ttp-global-intro-text {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 600;
    line-height: 1.8;
}

.ttp-global-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ttp-global-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ttp-global-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ttp-global-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.ttp-global-feature-item:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.ttp-global-feature-icon-wrapper {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #0066CC 0%, #00A651 100%);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ttp-global-feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.ttp-global-feature-text {
    color: rgba(0, 0, 0, 0.8);
    font-weight: 500;
    line-height: 1.4;
}

.ttp-global-statement {
    background: linear-gradient(to right, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.ttp-global-statement-text {
    font-size: 1.25rem;
    color: white;
    font-weight: 600;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .ttp-global-statement-text {
        font-size: 1.5rem;
    }
}

.ttp-global-image-box {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ttp-global-image {
    width: 100%;
    height: 24rem;
    object-fit: cover;
    border-radius: 0.75rem;
    display: block;
}

/* ========================================
   IMPACT SECTION
   ======================================== */

.ttp-impact-content-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ttp-impact-box-title {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 600;
}

@media (min-width: 1024px) {
    .ttp-impact-box-title {
        font-size: 1.875rem;
    }
}

.ttp-impact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 64rem;
    margin: 0 auto 2rem auto;
}

@media (min-width: 768px) {
    .ttp-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ttp-impact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.ttp-impact-item:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.ttp-impact-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ttp-impact-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.ttp-impact-statement {
    background: linear-gradient(to right, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.ttp-impact-statement-text {
    font-size: 1.25rem;
    color: white;
    font-weight: 600;
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .ttp-impact-statement-text {
        font-size: 1.5rem;
    }
}

/* ========================================
   AUDIENCE SECTION
   ======================================== */


.ttp-audience-content-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ttp-audience-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ttp-audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ttp-audience-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ttp-audience-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    text-align: center;
}

.ttp-audience-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.ttp-audience-icon-wrapper {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #0066CC 0%, #00A651 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
}

.ttp-audience-icon {
    width: 2rem;
    height: 2rem;
    color: white;
}

.ttp-audience-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
}

.ttp-audience-statement {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid rgba(0, 102, 204, 0.2);
}

.ttp-audience-statement-text {
    font-size: 1.25rem;
    text-align: center;
    font-weight: 600;
    line-height: 1.8;
}

.ttp-audience-statement-highlight {
    color: #0066CC;
}

/* ========================================
   WHATSAPP AUTOMATION PLATFORM - COMPLETE CSS
   ======================================== */

.wa-intro-section {
    position: relative;
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .wa-intro-section {
        padding: 6rem 0;
    }
}

.wa-intro-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: radial-gradient(circle at 2px 2px, black 1px, transparent 0);
    background-size: 40px 40px;
}

.wa-intro-content {
    position: relative;
    z-index: 10;
}

.wa-intro-inner {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
}

.wa-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.wa-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.wa-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

.wa-intro-text-block {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.wa-intro-title {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

@media (min-width: 1024px) {
    .wa-intro-title {
        font-size: 2.25rem;
    }
}

.wa-intro-paragraph {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.8);
}

@media (min-width: 1024px) {
    .wa-intro-paragraph {
        font-size: 19px;
    }
}

.wa-intro-paragraph-highlight {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.7);
}

@media (min-width: 1024px) {
    .wa-intro-paragraph-highlight {
        font-size: 1.25rem;
    }
}

.wa-intro-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 48rem;
    margin: 0 auto 2rem auto;
}

@media (min-width: 768px) {
    .wa-intro-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wa-intro-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.wa-intro-feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.wa-intro-feature-text {
    font-size: 0.875rem;
    line-height: 1.7;
}

.wa-intro-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .wa-intro-cta-buttons {
        flex-direction: row;
    }
}

.wa-btn-primary,
.wa-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wa-btn-primary {
    background: linear-gradient(to right, #0066CC, #0052A3);
    color: white;
}

.wa-btn-primary:hover {
    box-shadow: 0 25px 50px rgba(0, 102, 204, 0.3);
    transform: translateY(-2px);
}

.wa-btn-secondary {
    background: linear-gradient(to right, #00A651, #008A44);
    color: white;
}

.wa-btn-secondary:hover {
    box-shadow: 0 25px 50px rgba(0, 166, 81, 0.3);
    transform: translateY(-2px);
}

.wa-btn-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.wa-intro-microcopy {
    font-size: 0.875rem;
    text-align: center;
    font-weight: 600;
    background: linear-gradient(90deg, #0066CC, #00A651);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-fade 3s ease infinite;
}

@keyframes gradient-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ========================================
   SHARED SECTION STYLES
   ======================================== */

.wa-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.wa-section-title {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .wa-section-title {
        font-size: 3rem;
    }
}

/* ========================================
   PLATFORM ADVANTAGE SECTION
   ======================================== */

.wa-advantage-section {
    padding: 5rem 0;
    background: white;
}

@media (min-width: 1024px) {
    .wa-advantage-section {
        padding: 5rem 0;
    }
}

.wa-advantage-container {
    max-width: 1280;
    margin: 0 auto;
}

.wa-advantage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .wa-advantage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wa-advantage-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.wa-advantage-intro {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.wa-advantage-limitations {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wa-advantage-limitation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.wa-advantage-cross-icon {
    width: 0.75rem;
    height: 0.125rem;
    background: #ef4444;
    flex-shrink: 0;
    margin-top: 0.625rem;
}

.wa-advantage-limitation-text {
    line-height: 1.7;
}

.wa-advantage-highlight {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.wa-advantage-highlight-text {
    color: #0066CC;
}

.wa-advantage-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wa-advantage-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.wa-advantage-feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.wa-advantage-feature-text {
    line-height: 1.7;
}

.wa-advantage-image-wrapper {
    position: relative;
}

.wa-advantage-image-container {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.wa-advantage-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 500px;
    display: block;
}

.wa-advantage-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
}

.wa-advantage-summary {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.wa-advantage-summary-text {
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.8;
}

/* ========================================
   CHATBOT FLOW SECTION
   ======================================== */

.wa-chatbot-section {
    padding: 5rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .wa-chatbot-section {
        padding: 5rem 0;
    }
}

.wa-chatbot-container {
    max-width: 1280;
    margin: 0 auto;
}

.wa-chatbot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .wa-chatbot-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wa-chatbot-image-wrapper {
    position: relative;
}

.wa-chatbot-image-container {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.wa-chatbot-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 500px;
    display: block;
}

.wa-chatbot-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
}

.wa-chatbot-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.wa-chatbot-intro {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.wa-chatbot-capabilities {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wa-chatbot-capability-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.wa-chatbot-capability-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.wa-chatbot-capability-text {
    line-height: 1.7;
}

.wa-chatbot-usecases-section {
    text-align: center;
    margin-bottom: 2rem;
}

.wa-chatbot-usecases-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.wa-chatbot-usecases-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 64rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .wa-chatbot-usecases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .wa-chatbot-usecases-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.wa-chatbot-usecase-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.05));
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.wa-chatbot-usecase-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.wa-chatbot-usecase-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #0066CC;
}

.wa-chatbot-usecase-text {
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.5;
    font-weight: 500;
}

.wa-chatbot-summary {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 166, 81, 0.05) 100%);
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.wa-chatbot-summary-text {
    font-size: 1.125rem;
    line-height: 1.8;
}

/* ========================================
   SALES & MARKETING SECTION
   ======================================== */

.wa-sales-section {
    padding: 5rem 0;
    background: white;
}

@media (min-width: 1024px) {
    .wa-sales-section {
        padding: 5rem 0;
    }
}

.wa-sales-container {
    max-width: 1280;
    margin: 0 auto;
}

.wa-sales-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .wa-sales-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wa-sales-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.wa-sales-intro {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.wa-sales-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wa-sales-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.wa-sales-feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.wa-sales-feature-text {
    line-height: 1.7;
}

.wa-sales-ideal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.wa-sales-ideal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .wa-sales-ideal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wa-sales-ideal-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to bottom right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.wa-sales-ideal-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #0066CC;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

.wa-sales-ideal-text {
    line-height: 1.7;
}

.wa-sales-image-wrapper {
    position: relative;
}

.wa-sales-image-container {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.wa-sales-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px;
    display: block;
}

.wa-sales-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
}

/* ========================================
   BULK MESSAGING SECTION
   ======================================== */

.wa-bulk-section {
    padding: 5rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .wa-bulk-section {
        padding: 5rem 0;
    }
}

.wa-bulk-container {
    max-width: 1280;
    margin: 0 auto;
}

.wa-bulk-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .wa-bulk-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wa-bulk-image-wrapper {
    position: relative;
}

.wa-bulk-image-container {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.wa-bulk-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px;
    display: block;
}

.wa-bulk-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
}

.wa-bulk-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.wa-bulk-intro {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.wa-bulk-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wa-bulk-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.wa-bulk-feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.wa-bulk-feature-text {
    line-height: 1.7;
}

.wa-bulk-summary {
    background: linear-gradient(to bottom right, rgba(0, 166, 81, 0.05), rgba(0, 102, 204, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.wa-bulk-summary-text {
    font-size: 1.125rem;
    text-align: center;
    line-height: 1.8;
    font-weight: 600;
}

/* ========================================
   CRM INTEGRATION & DASHBOARD SECTION
   ======================================== */

.wa-integration-section {
    padding: 5rem 0;
    background: white;
}

@media (min-width: 1024px) {
    .wa-integration-section {
        padding: 5rem 0;
    }
}

.wa-integration-container {
    max-width: 1280;
    margin: 0 auto;
}

.wa-integration-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .wa-integration-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wa-integration-box {
    display: flex;
    flex-direction: column;
}

.wa-integration-title {
    font-size: 1.875rem;
    margin-bottom: 2rem;
    font-weight: 600;
    line-height: 1.3;
}

@media (min-width: 1024px) {
    .wa-integration-title {
        font-size: 2.25rem;
    }
}

.wa-integration-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.wa-integration-card-title {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.wa-integration-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.wa-integration-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.wa-integration-feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.wa-integration-feature-text {
    line-height: 1.7;
}

.wa-integration-card-footer {
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
}

/* ========================================
   USE CASES SECTION
   ======================================== */

.wa-usecases-section {
    padding: 5rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .wa-usecases-section {
        padding: 5rem 0;
    }
}

.wa-usecases-container {
    max-width: 1280;
    margin: 0 auto;
}

.wa-usecases-subtitle {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    max-width: 48rem;
    margin: 0 auto;
}

.wa-usecases-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .wa-usecases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .wa-usecases-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.wa-usecase-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.wa-usecase-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.wa-usecase-icon-wrapper {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #0066CC 0%, #00A651 100%);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.wa-usecase-card:hover .wa-usecase-icon-wrapper {
    transform: scale(1.1);
}

.wa-usecase-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.wa-usecase-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
}

/* ========================================
   GLOBAL MARKETS SECTION
   ======================================== */

.wa-global-section {
    padding: 5rem 0;
    background: white;
}

@media (min-width: 1024px) {
    .wa-global-section {
        padding: 5rem 0;
    }
}

.wa-global-container {
    max-width: 1280;
    margin: 0 auto;
}

.wa-global-subtitle {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 2rem;
}

.wa-global-markets-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .wa-global-markets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .wa-global-markets-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.wa-global-market-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.wa-global-market-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.wa-global-market-icon-wrapper {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #0066CC 0%, #00A651 100%);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.wa-global-market-card:hover .wa-global-market-icon-wrapper {
    transform: scale(1.1);
}

.wa-global-market-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.wa-global-market-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.wa-global-search-box {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.wa-global-search-title {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
}

.wa-global-search-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .wa-global-search-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wa-global-search-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.wa-global-search-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.wa-global-search-text {
    line-height: 1.7;
}

.wa-global-summary {
    background: linear-gradient(to bottom right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.wa-global-summary-text {
    font-size: 1.125rem;
    line-height: 1.8;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 640px) {
    .wa-section-title {
        font-size: 1.5rem;
    }
    
    .wa-intro-title {
        font-size: 1.5rem;
    }
    
    .wa-hero-title {
        font-size: 2rem;
    }
    
    .wa-cta-title {
        font-size: 1.5rem;
    }
}

/* ========================================
   TRAVEL & HOSPITALITY - COMPLETE CSS
   ======================================== */
.th-intro-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: radial-gradient(circle at 2px 2px, black 1px, transparent 0);
    background-size: 40px 40px;
}

.th-intro-content {
    position: relative;
    z-index: 10;
}

.th-intro-inner {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
}

.th-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.th-section-badge-center {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.th-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.th-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

.th-intro-text-block {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.th-intro-title {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

@media (min-width: 1024px) {
    .th-intro-title {
        font-size: 2.25rem;
    }
}

.th-intro-paragraph {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.8);
}

@media (min-width: 1024px) {
    .th-intro-paragraph {
        font-size: 19px;
    }
}

.th-intro-support-title {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 0.5rem;
}

@media (min-width: 1024px) {
    .th-intro-support-title {
        font-size: 19px;
    }
}

.th-intro-support-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 64rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .th-intro-support-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.th-intro-support-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.th-intro-support-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.th-intro-support-text {
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* ========================================
   SHARED SECTION STYLES
   ======================================== */

.th-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.th-section-title {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.th-section-title-center {
    text-align: center;
}

@media (min-width: 1024px) {
    .th-section-title {
        font-size: 2.25rem;
    }
}

/* ========================================
   FUTURE OF TRAVEL SECTION
   ======================================== */

.th-future-section {
    position: relative;
    padding: 4rem 0;
    background: white;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .th-future-section {
        padding: 6rem 0;
    }
}

.th-future-container {
    max-width: 80rem;
    margin: 0 auto;
}

.th-future-content-box {
    background: linear-gradient(to bottom right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .th-future-content-box {
        padding: 2.5rem;
    }
}

.th-future-intro-text {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 1.5rem; text-align: left;
}

@media (min-width: 1024px) {
    .th-future-intro-text {
        font-size: 17px;
    }
}

.th-future-demands-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .th-future-demands-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.th-future-demand-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.th-future-demand-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.th-future-demand-text {
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.th-future-warning {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;
    margin-bottom: 1.5rem; text-align: left;
}

@media (min-width: 1024px) {
    .th-future-warning {
        font-size: 17px;
    }
}

.th-future-ecosystem-intro {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 1rem; text-align: left;
}

@media (min-width: 1024px) {
    .th-future-ecosystem-intro {
        font-size: 17px;
    }
}

.th-future-ecosystem-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .th-future-ecosystem-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.th-future-ecosystem-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.th-future-ecosystem-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.th-future-ecosystem-text {
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* ========================================
   SERVICES SECTION
   ======================================== */

.th-services-section {
    position: relative;
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .th-services-section {
        padding: 6rem 0;
    }
}

.th-services-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: radial-gradient(circle at 2px 2px, black 1px, transparent 0);
    background-size: 40px 40px;
}

.th-services-content {
    position: relative;
    z-index: 10;
}

.th-services-container {
    max-width: 80rem;
    margin: 0 auto;
}

.th-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.th-service-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

@media (min-width: 1024px) {
    .th-service-card {
        padding: 2.5rem;
    }
}

.th-service-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.th-service-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.th-service-icon-wrapper {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, #0066CC 0%, #00A651 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.th-service-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: white;
}

.th-service-title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.th-service-description {
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

.th-service-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .th-service-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.th-service-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.th-service-feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.th-service-feature-text {
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.th-service-types-section {
    margin-bottom: 1rem;
}

.th-service-types-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .th-service-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.th-service-type-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.th-service-type-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.th-service-type-text {
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.th-service-integrated-section {
    margin-bottom: 1rem;
}

.th-service-integrated-title {
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.th-service-integrated-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .th-service-integrated-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.th-service-integrated-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.th-service-integrated-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.th-service-integrated-text {
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.th-service-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.th-service-platform-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 0.5rem;
}

.th-service-platform-icon {
    width: 1rem;
    height: 1rem;
    color: #0066CC;
}

.th-service-platform-text {
    color: rgba(0, 0, 0, 0.8);
}

.th-service-features-title {
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 1rem;
    font-weight: 600;
}

.th-service-note {
    color: #0066CC;
    margin-top: 1rem;
    font-style: italic;
}

.th-service-keywords {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.th-service-keywords-title {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.th-service-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.th-service-keyword {
    padding: 0.375rem 0.75rem;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
}


/* ========================================
   WHY CHOOSE SECTION
   ======================================== */

.th-whychoose-section {
    position: relative;
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .th-whychoose-section {
        padding: 6rem 0;
    }
}

.th-whychoose-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: radial-gradient(circle at 2px 2px, black 1px, transparent 0);
    background-size: 40px 40px;
}

.th-whychoose-content {
    position: relative;
    z-index: 10;
}

.th-whychoose-container {
    max-width: 80rem;
    margin: 0 auto;
}

.th-whychoose-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .th-whychoose-box {
        padding: 2.5rem;
    }
}

.th-whychoose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .th-whychoose-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.th-whychoose-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.th-whychoose-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.th-whychoose-text {
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.th-whychoose-footer {
    color: rgba(0, 0, 0, 0.7);
    margin-top: 1.5rem;
    line-height: 1.6;
}

/* ========================================
   GLOBAL MARKETS SECTION
   ======================================== */

.th-global-section {
    padding: 5rem 0;
    background: white;
}

@media (min-width: 1024px) {
    .th-global-section {
        padding: 5rem 0;
    }
}

.th-global-container {
    max-width: 1280;
    margin: 0 auto;
}

.th-global-title {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    text-align: center;
    font-weight: 700;
}

@media (min-width: 1024px) {
    .th-global-title {
        font-size: 3rem;
    }
}

.th-global-subtitle {
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 1rem;
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
}

.th-global-markets-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .th-global-markets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .th-global-markets-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.th-global-market-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.th-global-market-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.th-global-market-icon-wrapper {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #0066CC 0%, #00A651 100%);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.th-global-market-card:hover .th-global-market-icon-wrapper {
    transform: scale(1.1);
}

.th-global-market-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.th-global-market-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.th-global-summary {
    background: linear-gradient(to bottom right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.th-global-summary-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    text-align: center;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .th-global-summary-text {
        font-size: 1.25rem;
    }
}

/* ========================================
   FINAL CTA SECTION
   ======================================== */

.th-cta-section {
    position: relative;
    padding: 4rem 0;
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #00A651 100%);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .th-cta-section {
        padding: 5rem 0;
    }
}

.th-cta-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

.th-cta-decoration-1 {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 6rem;
    height: 6rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    transform: rotate(12deg);
}

.th-cta-decoration-2 {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    width: 8rem;
    height: 8rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    transform: rotate(-12deg);
}

.th-cta-content {
    position: relative;
    z-index: 10;
}

.th-cta-inner {
    max-width: 64rem;
    margin: 0 auto;
    text-align: center;
}

.th-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 9999px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.th-cta-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.th-cta-badge-text {
    font-size: 0.875rem;
    color: white;
    font-weight: 600;
}

.th-cta-title {
    font-size: 1.875rem;
    color: white;
    margin-bottom: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

@media (min-width: 1024px) {
    .th-cta-title {
        font-size: 3rem;
    }
}

.th-cta-intro {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.th-cta-looking-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 48rem;
    margin: 0 auto 1.5rem auto;
    text-align: left;
}

@media (min-width: 768px) {
    .th-cta-looking-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.th-cta-looking-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.th-cta-looking-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.th-cta-looking-text {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.th-cta-delivery {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.th-cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 640px) {
    .th-cta-buttons {
        flex-direction: row;
    }
}

.th-cta-btn-white,
.th-cta-btn-transparent {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    border: 2px solid white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.th-cta-btn-white {
    background: white;
    color: #0066CC;
}

.th-cta-btn-white:hover {
    box-shadow: 0 25px 50px rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.th-cta-btn-transparent {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    backdrop-filter: blur(10px);
}

.th-cta-btn-transparent:hover {
    background: rgba(255, 255, 255, 0.2);
}

.th-cta-btn-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 640px) {
    .th-section-title {
        font-size: 1.5rem;
    }
    
    .th-intro-title {
        font-size: 1.5rem;
    }
    
    .th-hero-title {
        font-size: 2rem;
    }
    
    .th-cta-title {
        font-size: 1.5rem;
    }
    
    .th-casestudies-title {
        font-size: 2rem;
    }
    
    .th-global-title {
        font-size: 2rem;
    }
}


/* ========================================
   INTRODUCTION SECTION
   ======================================== */

.ls-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.ls-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.ls-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}


/* ========================================
   SHARED SECTION STYLES
   ======================================== */

.ls-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.ls-section-title {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 1024px) {
    .ls-section-title {
        font-size: 3rem;
    }
}

/* ========================================
   DIGITAL SHIFT / CHALLENGE SECTION
   ======================================== */

.ls-challenge-section {
    padding: 5rem 0;
    background: white;
}

@media (min-width: 1024px) {
    .ls-challenge-section {
        padding: 5rem 0;
    }
}

.ls-challenge-container {
    max-width: 1280;
    margin: 0 auto;
}

.ls-challenge-title {
    font-size: 1.875rem;
    margin-bottom: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .ls-challenge-title {
        font-size: 3rem;
    }
}

.ls-challenge-box {
    background: linear-gradient(to bottom right, white, rgba(0, 0, 0, 0.02));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .ls-challenge-box {
        padding: 3rem;
    }
}

.ls-challenge-intro {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.ls-pressures-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ls-pressures-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ls-pressure-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(255, 237, 237, 1), rgba(255, 247, 237, 1));
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(255, 0, 0, 0.1);
}

.ls-pressure-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #EF4444;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.ls-pressure-text {
    line-height: 1.7;
}

.ls-challenge-requirements-title {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.ls-requirements-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ls-requirements-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ls-requirement-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ls-requirement-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ls-requirement-text {
    line-height: 1.7;
}

.ls-challenge-footer {
    font-size: 1.125rem;
    text-align: center;
    line-height: 1.8;
}

/* ========================================
   SOLUTIONS SECTION
   ======================================== */

.ls-solutions-section {
    padding: 3rem 0 5rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .ls-solutions-section {
        padding: 5rem 0 5rem 0;
    }
}

.ls-solutions-container {
    max-width: 1280;
    margin: 0 auto;
}

.ls-solution-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
    transition: all 0.3s ease;
}

@media (min-width: 1024px) {
    .ls-solution-card {
        padding: 3rem;
    }
}

.ls-solution-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.ls-solution-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ls-solution-icon-wrapper {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 166, 81, 0.1) 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ls-solution-icon {
    width: 2rem;
    height: 2rem;
    color: #0066CC;
}

.ls-solution-title-block {
    flex: 1;
}

.ls-solution-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

@media (min-width: 1024px) {
    .ls-solution-title {
        font-size: 1.875rem;
    }
}

.ls-solution-description {
    font-size: 1.125rem;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.7);
}

.ls-solution-label {
    font-weight: 600;
    margin-bottom: 1rem;
}

.ls-solution-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .ls-solution-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ls-solution-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ls-solution-feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ls-solution-feature-text {
    line-height: 1.7;
}

.ls-solution-note {
    font-style: italic;
    color: rgba(0, 0, 0, 0.7);
    margin-top: 1rem;
    line-height: 1.8;
}

.ls-solution-keywords {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.ls-solution-keywords-title {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.ls-solution-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ls-solution-keyword {
    padding: 0.375rem 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 9999px;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.7);
}


/* ========================================
   WHY CHOOSE SECTION
   ======================================== */

.ls-whychoose-section {
    padding: 5rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .ls-whychoose-section {
        padding: 5rem 0;
    }
}

.ls-whychoose-container {
    max-width: 1280;
    margin: 0 auto;
}

.ls-whychoose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .ls-whychoose-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ls-whychoose-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ls-whychoose-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.ls-whychoose-item:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.ls-whychoose-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ls-whychoose-text {
    font-weight: 500;
    line-height: 1.7;
}

.ls-whychoose-footer-box {
    background: linear-gradient(to bottom right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.ls-whychoose-footer-text {
    font-size: 1.125rem;
    line-height: 1.8;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 640px) {
    .ls-section-title {
        font-size: 1.5rem;
    }
    
    .ls-intro-title {
        font-size: 1.5rem;
    }
    
    .ls-hero-title {
        font-size: 2rem;
    }
    
    .ls-cta-title {
        font-size: 1.5rem;
    }
    
    .ls-casestudies-title {
        font-size: 2rem;
    }
    
    .ls-global-title {
        font-size: 1.5rem;
    }
    
    .ls-challenge-title {
        font-size: 1.5rem;
    }
}


/* ========================================
   INTRODUCTION SECTION
   ======================================== */
.re-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.re-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.re-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* ========================================
   SHARED SECTION STYLES
   ======================================== */

.re-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.re-section-title {
    font-size: 1.875rem;
    margin-bottom: 2rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 1024px) {
    .re-section-title {
        font-size: 3rem;
    }
}

/* ========================================
   DIGITAL EVOLUTION / CHALLENGE SECTION
   ======================================== */

.re-challenge-section {
    padding: 5rem 0 3rem 0;
    background: white;
}

@media (min-width: 1024px) {
    .re-challenge-section {
        padding: 5rem 0 4rem 0;
    }
}

.re-challenge-container {
    max-width: 1280;
    margin: 0 auto;
}

.re-challenge-title {
    font-size: 1.875rem;
    margin-bottom: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .re-challenge-title {
        font-size: 3rem;
    }
}

.re-challenge-box {
    background: linear-gradient(to bottom right, white, rgba(0, 0, 0, 0.02));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .re-challenge-box {
        padding: 3rem;
    }
}

.re-challenge-intro {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.re-transformations-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .re-transformations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.re-transformation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(255, 237, 237, 1), rgba(255, 247, 237, 1));
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(255, 0, 0, 0.1);
}

.re-transformation-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #EF4444;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.re-transformation-text {
    line-height: 1.7;
}

.re-challenge-traditional {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.re-challenge-requirements-title {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.re-requirements-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .re-requirements-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.re-requirement-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.re-requirement-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.re-requirement-text {
    line-height: 1.7;
}

.re-challenge-footer {
    font-size: 1.125rem;
    text-align: center;
    line-height: 1.8;
}

/* ========================================
   SOLUTIONS SECTION
   ======================================== */

.re-solutions-section {
    padding: 3rem 0 5rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .re-solutions-section {
        padding: 4rem 0 5rem 0;
    }
}

.re-solutions-container {
    max-width: 1280;
    margin: 0 auto;
}

.re-solution-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
    transition: all 0.3s ease;
}

@media (min-width: 1024px) {
    .re-solution-card {
        padding: 3rem;
    }
}

.re-solution-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.re-solution-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.re-solution-icon-wrapper {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 166, 81, 0.1) 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.re-solution-icon {
    width: 2rem;
    height: 2rem;
    color: #0066CC;
}

.re-solution-title-block {
    flex: 1;
}

.re-solution-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

@media (min-width: 1024px) {
    .re-solution-title {
        font-size: 1.875rem;
    }
}

.re-solution-description {
    font-size: 1.125rem;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.7);
}

.re-solution-label {
    font-weight: 600;
    margin-bottom: 1rem;
}

.re-solution-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .re-solution-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.re-solution-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.re-solution-feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.re-solution-focus-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.re-solution-feature-text {
    line-height: 1.7;
}

.re-solution-note {
    font-style: italic;
    color: rgba(0, 0, 0, 0.7);
    margin-top: 1rem;
    line-height: 1.8;
}

.re-solution-keywords {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.re-solution-keywords-title {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.re-solution-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.re-solution-keyword {
    padding: 0.375rem 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 9999px;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.7);
}


/* ========================================
   WHY CHOOSE SECTION
   ======================================== */

.re-whychoose-section {
    padding: 5rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .re-whychoose-section {
        padding: 5rem 0;
    }
}

.re-whychoose-container {
    max-width: 1280;
    margin: 0 auto;
}

.re-whychoose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .re-whychoose-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .re-whychoose-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.re-whychoose-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.re-whychoose-item:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.re-whychoose-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.re-whychoose-text {
    font-weight: 500;
    line-height: 1.7;
}

.re-whychoose-footer-box {
    background: linear-gradient(to bottom right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.re-whychoose-footer-text {
    font-size: 1.125rem;
    line-height: 1.8;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 640px) {
    .re-section-title {
        font-size: 1.5rem;
    }
    
    .re-intro-title {
        font-size: 1.5rem;
    }
    
    .re-hero-title {
        font-size: 2rem;
    }
    
    .re-cta-title {
        font-size: 1.5rem;
    }
    
    .re-casestudies-title {
        font-size: 2rem;
    }
    
    .re-global-title {
        font-size: 1.5rem;
    }
    
    .re-challenge-title {
        font-size: 1.5rem;
    }
}


/* ========================================
   INTRODUCTION SECTION
   ======================================== */
.mo-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.mo-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.mo-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* ========================================
   SHARED SECTION STYLES
   ======================================== */

.mo-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.mo-section-title {
    font-size: 1.875rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 1024px) {
    .mo-section-title {
        font-size: 3rem;
    }
}

/* ========================================
   DIGITAL EVOLUTION / CHALLENGE SECTION
   ======================================== */

.mo-challenge-section {
    padding: 5rem 0 3rem 0;
    background: white;
}

@media (min-width: 1024px) {
    .mo-challenge-section {
        padding: 5rem 0 4rem 0;
    }
}

.mo-challenge-container {
    max-width: 1280;
    margin: 0 auto;
}

.mo-challenge-title {
    font-size: 1.875rem;
    margin-bottom: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .mo-challenge-title {
        font-size: 3rem;
    }
}

.mo-challenge-box {
    background: linear-gradient(to bottom right, white, rgba(0, 0, 0, 0.02));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .mo-challenge-box {
        padding: 3rem;
    }
}

.mo-challenge-intro {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.mo-shifts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .mo-shifts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mo-shift-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(255, 237, 237, 1), rgba(255, 247, 237, 1));
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(255, 0, 0, 0.1);
}

.mo-shift-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #EF4444;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.mo-shift-text {
    line-height: 1.7;
}

.mo-challenge-requirements-title {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.mo-requirements-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .mo-requirements-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mo-requirement-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.mo-requirement-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.mo-requirement-text {
    line-height: 1.7;
}

.mo-challenge-footer {
    font-size: 1.125rem;
    text-align: center;
    line-height: 1.8;
}

/* ========================================
   SOLUTIONS SECTION
   ======================================== */

.mo-solutions-section {
    padding: 3rem 0 5rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .mo-solutions-section {
        padding: 4rem 0 5rem 0;
    }
}

.mo-solutions-container {
    max-width: 1280;
    margin: 0 auto;
}

.mo-solution-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
    transition: all 0.3s ease;
}

@media (min-width: 1024px) {
    .mo-solution-card {
        padding: 3rem;
    }
}

.mo-solution-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.mo-solution-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.mo-solution-icon-wrapper {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 166, 81, 0.1) 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mo-solution-icon {
    width: 2rem;
    height: 2rem;
    color: #0066CC;
}

.mo-solution-title-block {
    flex: 1;
}

.mo-solution-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

@media (min-width: 1024px) {
    .mo-solution-title {
        font-size: 1.875rem;
    }
}

.mo-solution-description {
    font-size: 1.125rem;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.7);
}

.mo-solution-label {
    font-weight: 600;
    margin-bottom: 1rem;
}

.mo-solution-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .mo-solution-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mo-solution-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.mo-solution-feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.mo-solution-focus-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.mo-solution-feature-text {
    line-height: 1.7;
}

.mo-solution-note {
    font-style: italic;
    color: rgba(0, 0, 0, 0.7);
    margin-top: 1rem;
    line-height: 1.8;
}

.mo-solution-keywords {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.mo-solution-keywords-title {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.mo-solution-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mo-solution-keyword {
    padding: 0.375rem 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 9999px;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.7);
}


/* ========================================
   WHY CHOOSE SECTION
   ======================================== */

.mo-whychoose-section {
    padding: 5rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .mo-whychoose-section {
        padding: 5rem 0;
    }
}

.mo-whychoose-container {
    max-width: 1280;
    margin: 0 auto;
}

.mo-whychoose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .mo-whychoose-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .mo-whychoose-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mo-whychoose-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.mo-whychoose-item:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.mo-whychoose-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.mo-whychoose-text {
    font-weight: 500;
    line-height: 1.7;
}

.mo-whychoose-footer-box {
    background: linear-gradient(to bottom right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.mo-whychoose-footer-text {
    font-size: 1.125rem;
    line-height: 1.8;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 640px) {
    .mo-section-title {
        font-size: 1.5rem;
    }
    
    .mo-intro-title {
        font-size: 1.5rem;
    }
    
    .mo-hero-title {
        font-size: 2rem;
    }
    
    .mo-cta-title {
        font-size: 1.5rem;
    }
    
    .mo-casestudies-title {
        font-size: 2rem;
    }
    
    .mo-global-title {
        font-size: 1.5rem;
    }
    
    .mo-challenge-title {
        font-size: 1.5rem;
    }
}

/* INTRO SECTION */
.hc-section-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: linear-gradient(to right, rgba(0,102,204,0.1), rgba(0,166,81,0.1)); border-radius: 9999px; margin-bottom: 1.5rem; }
.hc-badge-icon { width: 1.25rem; height: 1.25rem; color: #0066CC; }
.hc-badge-text { font-size: 0.875rem; color: #0066CC; font-weight: 600; }

/* SHARED SECTION STYLES */
.hc-section-header { text-align: center; margin-bottom: 3rem; }
.hc-section-title { font-size: 1.875rem; margin-bottom: 1.5rem; font-weight: 700; line-height: 1.2; text-align: center; }
@media (min-width: 1024px) { .hc-section-title { font-size: 3rem; } }

/* CHALLENGE SECTION */
.hc-challenge-section { padding: 5rem 0 3rem; background: white; }
@media (min-width: 1024px) { .hc-challenge-section { padding: 5rem 0 4rem; } }
.hc-challenge-container { max-width: 1280; margin: 0 auto; }
.hc-challenge-title { font-size: 1.875rem; margin-bottom: 2rem; font-weight: 700; line-height: 1.2; }
@media (min-width: 1024px) { .hc-challenge-title { font-size: 3rem; } }
.hc-challenge-box { background: linear-gradient(to bottom right, white, rgba(0,0,0,0.02)); border-radius: 1.5rem; padding: 2rem; border: 2px solid rgba(0,0,0,0.05); }
@media (min-width: 1024px) { .hc-challenge-box { padding: 3rem; } }
.hc-challenge-intro { font-size: 1.125rem; margin-bottom: 1.5rem; line-height: 1.8; }
.hc-shifts-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .hc-shifts-grid { grid-template-columns: repeat(2, 1fr); } }
.hc-shift-item { display: flex; align-items: flex-start; gap: 0.75rem; background: linear-gradient(to right, rgba(255,237,237,1), rgba(255,247,237,1)); border-radius: 0.75rem; padding: 1rem; border: 1px solid rgba(255,0,0,0.1); }
.hc-shift-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #EF4444; margin-top: 0.5rem; flex-shrink: 0; }
.hc-shift-text { line-height: 1.7; }
.hc-challenge-traditional { font-size: 1.125rem; margin-bottom: 1.5rem; line-height: 1.8; }
.hc-challenge-requirements-title { font-size: 1.125rem; margin-bottom: 1.5rem; font-weight: 600; }
.hc-requirements-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .hc-requirements-grid { grid-template-columns: repeat(2, 1fr); } }
.hc-requirement-item { display: flex; align-items: flex-start; gap: 0.75rem; background: linear-gradient(to right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 0.75rem; padding: 1rem; border: 1px solid rgba(0,0,0,0.05); }
.hc-requirement-icon { width: 1.25rem; height: 1.25rem; color: #00A651; flex-shrink: 0; margin-top: 0.125rem; }
.hc-requirement-text { line-height: 1.7; }
.hc-challenge-footer { font-size: 1.125rem; text-align: center; line-height: 1.8; }

/* SOLUTIONS SECTION */
.hc-solutions-section { padding: 3rem 0 5rem; background: rgba(0, 0, 0, 0.02); }
@media (min-width: 1024px) { .hc-solutions-section { padding: 4rem 0 5rem; } }
.hc-solutions-container { max-width: 1280; margin: 0 auto; }
.hc-solution-card { background: white; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 2px solid rgba(0,0,0,0.05); margin-bottom: 3rem; transition: all 0.3s ease; }
@media (min-width: 1024px) { .hc-solution-card { padding: 3rem; } }
.hc-solution-card:hover { box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
.hc-solution-header { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.5rem; }
.hc-solution-icon-wrapper { width: 4rem; height: 4rem; background: linear-gradient(135deg, rgba(0,102,204,0.1) 0%, rgba(0,166,81,0.1) 100%); border-radius: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hc-solution-icon { width: 2rem; height: 2rem; color: #0066CC; }
.hc-solution-title-block { flex: 1; }
.hc-solution-title { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 600; line-height: 1.3; }
@media (min-width: 1024px) { .hc-solution-title { font-size: 1.875rem; } }
.hc-solution-description { font-size: 1.125rem; line-height: 1.8; color: rgba(0,0,0,0.7); }
.hc-solution-label { font-weight: 600; margin-bottom: 1rem; }
.hc-solution-features-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .hc-solution-features-grid { grid-template-columns: repeat(2, 1fr); } }
.hc-solution-feature-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.hc-solution-feature-icon { width: 1.25rem; height: 1.25rem; color: #00A651; flex-shrink: 0; margin-top: 0.125rem; }
.hc-solution-focus-icon { width: 1.25rem; height: 1.25rem; color: #0066CC; flex-shrink: 0; margin-top: 0.125rem; }
.hc-solution-feature-text { line-height: 1.7; }
.hc-solution-note { font-style: italic; color: rgba(0,0,0,0.7); margin-top: 1rem; line-height: 1.8; }
.hc-solution-keywords { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.05); }
.hc-solution-keywords-title { font-size: 0.875rem; color: rgba(0,0,0,0.6); margin-bottom: 0.75rem; font-weight: 600; }
.hc-solution-keywords-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hc-solution-keyword { padding: 0.375rem 0.75rem; background: linear-gradient(to right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 9999px; font-size: 0.875rem; color: rgba(0,0,0,0.7); }

/* CASE STUDIES */
.hc-casestudies-section { position: relative; padding: 5rem 0; background: white; overflow: hidden; }
@media (min-width: 1024px) { .hc-casestudies-section { padding: 5rem 0; } }
.hc-casestudies-pattern { position: absolute; inset: 0; opacity: 0.08; background-image: radial-gradient(circle at 2px 2px, black 1px, transparent 0); background-size: 40px 40px; }
.hc-casestudies-content { position: relative; z-index: 10; }
.hc-casestudies-container { max-width: 1280; margin: 0 auto; }
.hc-casestudies-title { font-size: 2.5rem; margin-bottom: 0.75rem; line-height: 1.2; font-weight: 700; }
@media (min-width: 1024px) { .hc-casestudies-title { font-size: 3rem; } }


/* WHY CHOOSE */
.hc-whychoose-section { padding: 5rem 0; background: rgba(0, 0, 0, 0.02); }
@media (min-width: 1024px) { .hc-whychoose-section { padding: 5rem 0; } }
.hc-whychoose-container { max-width: 1280; margin: 0 auto; }
.hc-whychoose-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .hc-whychoose-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hc-whychoose-grid { grid-template-columns: repeat(3, 1fr); } }
.hc-whychoose-item { display: flex; align-items: flex-start; gap: 0.75rem; background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 2px solid rgba(0,0,0,0.05); transition: all 0.3s ease; }
.hc-whychoose-item:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.hc-whychoose-icon { width: 1.5rem; height: 1.5rem; color: #00A651; flex-shrink: 0; margin-top: 0.25rem; }
.hc-whychoose-text { font-weight: 500; line-height: 1.7; }
.hc-whychoose-footer-box { background: linear-gradient(to bottom right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 1.5rem; padding: 2.5rem; border: 2px solid rgba(0,0,0,0.05); text-align: center; }
.hc-whychoose-footer-text { font-size: 1.125rem; line-height: 1.8; }

/* RESPONSIVE */
@media (max-width: 640px) {
    .hc-section-title, .hc-intro-title, .hc-challenge-title, .hc-global-title, .hc-cta-title { font-size: 1.5rem; }
    .hc-hero-title { font-size: 2rem; }
    .hc-casestudies-title { font-size: 2rem; }
}

/* INTRO */ .cm-section-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: linear-gradient(to right, rgba(0,102,204,0.1), rgba(0,166,81,0.1)); border-radius: 9999px; margin-bottom: 1.5rem; } .cm-badge-icon { width: 1.25rem; height: 1.25rem; color: #0066CC; } .cm-badge-text { font-size: 0.875rem; color: #0066CC; font-weight: 600; }

/* SHARED */ .cm-section-header { text-align: center; margin-bottom: 3rem; } .cm-section-title { font-size: 1.875rem; margin-bottom: 1.5rem; font-weight: 700; line-height: 1.2; text-align: center; } @media (min-width: 1024px) { .cm-section-title { font-size: 3rem; } }

/* CHALLENGE */ .cm-challenge-section { padding: 5rem 0 3rem; background: white; } @media (min-width: 1024px) { .cm-challenge-section { padding: 5rem 0 4rem; } } .cm-challenge-container { max-width: 1280; margin: 0 auto; } .cm-challenge-title { font-size: 1.875rem; margin-bottom: 2rem; font-weight: 700; line-height: 1.2; } @media (min-width: 1024px) { .cm-challenge-title { font-size: 3rem; } } .cm-challenge-box { background: linear-gradient(to bottom right, white, rgba(0,0,0,0.02)); border-radius: 1.5rem; padding: 2rem; border: 2px solid rgba(0,0,0,0.05); } @media (min-width: 1024px) { .cm-challenge-box { padding: 3rem; } } .cm-challenge-intro { font-size: 1.125rem; margin-bottom: 1.5rem; line-height: 1.8; } .cm-shifts-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } @media (min-width: 768px) { .cm-shifts-grid { grid-template-columns: repeat(2, 1fr); } } .cm-shift-item { display: flex; align-items: flex-start; gap: 0.75rem; background: linear-gradient(to right, rgba(255,237,237,1), rgba(255,247,237,1)); border-radius: 0.75rem; padding: 1rem; border: 1px solid rgba(255,0,0,0.1); } .cm-shift-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #EF4444; margin-top: 0.5rem; flex-shrink: 0; } .cm-shift-text { line-height: 1.7; } .cm-challenge-requirements-title { font-size: 1.125rem; margin-bottom: 1.5rem; font-weight: 600; } .cm-requirements-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } @media (min-width: 768px) { .cm-requirements-grid { grid-template-columns: repeat(2, 1fr); } } .cm-requirement-item { display: flex; align-items: flex-start; gap: 0.75rem; background: linear-gradient(to right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 0.75rem; padding: 1rem; border: 1px solid rgba(0,0,0,0.05); } .cm-requirement-icon { width: 1.25rem; height: 1.25rem; color: #00A651; flex-shrink: 0; margin-top: 0.125rem; } .cm-requirement-text { line-height: 1.7; } .cm-challenge-footer { font-size: 1.125rem; text-align: center; line-height: 1.8; }

/* SOLUTIONS */ .cm-solutions-section { padding: 3rem 0 5rem; background: rgba(0, 0, 0, 0.02); } @media (min-width: 1024px) { .cm-solutions-section { padding: 4rem 0 5rem; } } .cm-solutions-container { max-width: 1280; margin: 0 auto; } .cm-solution-card { background: white; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 2px solid rgba(0,0,0,0.05); margin-bottom: 3rem; transition: all 0.3s ease; } @media (min-width: 1024px) { .cm-solution-card { padding: 3rem; } } .cm-solution-card:hover { box-shadow: 0 25px 50px rgba(0,0,0,0.15); } .cm-solution-header { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.5rem; } .cm-solution-icon-wrapper { width: 4rem; height: 4rem; background: linear-gradient(135deg, rgba(0,102,204,0.1) 0%, rgba(0,166,81,0.1) 100%); border-radius: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cm-solution-icon { width: 2rem; height: 2rem; color: #0066CC; } .cm-solution-title-block { flex: 1; } .cm-solution-title { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 600; line-height: 1.3; } @media (min-width: 1024px) { .cm-solution-title { font-size: 1.875rem; } } .cm-solution-description { font-size: 1.125rem; line-height: 1.8; color: rgba(0,0,0,0.7); } .cm-solution-label { font-weight: 600; margin-bottom: 1rem; } .cm-solution-features-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1.5rem; } @media (min-width: 768px) { .cm-solution-features-grid { grid-template-columns: repeat(2, 1fr); } } .cm-solution-feature-item { display: flex; align-items: flex-start; gap: 0.75rem; } .cm-solution-feature-icon { width: 1.25rem; height: 1.25rem; color: #00A651; flex-shrink: 0; margin-top: 0.125rem; } .cm-solution-feature-text { line-height: 1.7; } .cm-solution-note { font-style: italic; color: rgba(0,0,0,0.7); margin-top: 1rem; line-height: 1.8; } .cm-solution-keywords { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.05); } .cm-solution-keywords-title { font-size: 0.875rem; color: rgba(0,0,0,0.6); margin-bottom: 0.75rem; font-weight: 600; } .cm-solution-keywords-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .cm-solution-keyword { padding: 0.375rem 0.75rem; background: linear-gradient(to right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 9999px; font-size: 0.875rem; color: rgba(0,0,0,0.7); }

/* WHY CHOOSE */ .cm-whychoose-section { padding: 5rem 0; background: rgba(0, 0, 0, 0.02); } @media (min-width: 1024px) { .cm-whychoose-section { padding: 5rem 0; } } .cm-whychoose-container { max-width: 1280; margin: 0 auto; } .cm-whychoose-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; } @media (min-width: 768px) { .cm-whychoose-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cm-whychoose-grid { grid-template-columns: repeat(3, 1fr); } } .cm-whychoose-item { display: flex; align-items: flex-start; gap: 0.75rem; background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 2px solid rgba(0,0,0,0.05); transition: all 0.3s ease; } .cm-whychoose-item:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .cm-whychoose-icon { width: 1.5rem; height: 1.5rem; color: #00A651; flex-shrink: 0; margin-top: 0.25rem; } .cm-whychoose-text { font-weight: 500; line-height: 1.7; } .cm-whychoose-footer-box { background: linear-gradient(to bottom right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 1.5rem; padding: 2.5rem; border: 2px solid rgba(0,0,0,0.05); text-align: center; } .cm-whychoose-footer-text { font-size: 1.125rem; line-height: 1.8; }

/* RESPONSIVE */ @media (max-width: 640px) { .cm-section-title, .cm-intro-title, .cm-challenge-title, .cm-global-title, .cm-cta-title { font-size: 1.5rem; } .cm-hero-title { font-size: 2rem; } .cm-casestudies-title { font-size: 2rem; } }







/* INTRO */ .cm-section-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: linear-gradient(to right, rgba(0,102,204,0.1), rgba(0,166,81,0.1)); border-radius: 9999px; margin-bottom: 1.5rem; } .cm-badge-icon { width: 1.25rem; height: 1.25rem; color: #0066CC; } .cm-badge-text { font-size: 0.875rem; color: #0066CC; font-weight: 600; }

/* SHARED */ .cm-section-header { text-align: center; margin-bottom: 3rem; } .cm-section-title { font-size: 1.875rem; margin-bottom: 1.5rem; font-weight: 700; line-height: 1.2; text-align: center; } @media (min-width: 1024px) { .cm-section-title { font-size: 3rem; } }

/* CHALLENGE */ .cm-challenge-section { padding: 5rem 0 3rem; background: white; } @media (min-width: 1024px) { .cm-challenge-section { padding: 5rem 0 4rem; } } .cm-challenge-container { max-width: 1280; margin: 0 auto; } .cm-challenge-title { font-size: 1.875rem; margin-bottom: 2rem; font-weight: 700; line-height: 1.2; } @media (min-width: 1024px) { .cm-challenge-title { font-size: 3rem; } } .cm-challenge-box { background: linear-gradient(to bottom right, white, rgba(0,0,0,0.02)); border-radius: 1.5rem; padding: 2rem; border: 2px solid rgba(0,0,0,0.05); } @media (min-width: 1024px) { .cm-challenge-box { padding: 3rem; } } .cm-challenge-intro { font-size: 1.125rem; margin-bottom: 1.5rem; line-height: 1.8; } .cm-shifts-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } @media (min-width: 768px) { .cm-shifts-grid { grid-template-columns: repeat(2, 1fr); } } .cm-shift-item { display: flex; align-items: flex-start; gap: 0.75rem; background: linear-gradient(to right, rgba(255,237,237,1), rgba(255,247,237,1)); border-radius: 0.75rem; padding: 1rem; border: 1px solid rgba(255,0,0,0.1); } .cm-shift-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #EF4444; margin-top: 0.5rem; flex-shrink: 0; } .cm-shift-text { line-height: 1.7; } .cm-challenge-requirements-title { font-size: 1.125rem; margin-bottom: 1.5rem; font-weight: 600; } .cm-requirements-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } @media (min-width: 768px) { .cm-requirements-grid { grid-template-columns: repeat(2, 1fr); } } .cm-requirement-item { display: flex; align-items: flex-start; gap: 0.75rem; background: linear-gradient(to right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 0.75rem; padding: 1rem; border: 1px solid rgba(0,0,0,0.05); } .cm-requirement-icon { width: 1.25rem; height: 1.25rem; color: #00A651; flex-shrink: 0; margin-top: 0.125rem; } .cm-requirement-text { line-height: 1.7; } .cm-challenge-footer { font-size: 1.125rem; text-align: center; line-height: 1.8; }

/* SOLUTIONS */ .cm-solutions-section { padding: 3rem 0 5rem; background: rgba(0, 0, 0, 0.02); } @media (min-width: 1024px) { .cm-solutions-section { padding: 4rem 0 5rem; } } .cm-solutions-container { max-width: 1280; margin: 0 auto; } .cm-solution-card { background: white; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 2px solid rgba(0,0,0,0.05); margin-bottom: 3rem; transition: all 0.3s ease; } @media (min-width: 1024px) { .cm-solution-card { padding: 3rem; } } .cm-solution-card:hover { box-shadow: 0 25px 50px rgba(0,0,0,0.15); } .cm-solution-header { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.5rem; } .cm-solution-icon-wrapper { width: 4rem; height: 4rem; background: linear-gradient(135deg, rgba(0,102,204,0.1) 0%, rgba(0,166,81,0.1) 100%); border-radius: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cm-solution-icon { width: 2rem; height: 2rem; color: #0066CC; } .cm-solution-title-block { flex: 1; } .cm-solution-title { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 600; line-height: 1.3; } @media (min-width: 1024px) { .cm-solution-title { font-size: 1.875rem; } } .cm-solution-description { font-size: 1.125rem; line-height: 1.8; color: rgba(0,0,0,0.7); } .cm-solution-label { font-weight: 600; margin-bottom: 1rem; } .cm-solution-features-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1.5rem; } @media (min-width: 768px) { .cm-solution-features-grid { grid-template-columns: repeat(2, 1fr); } } .cm-solution-feature-item { display: flex; align-items: flex-start; gap: 0.75rem; } .cm-solution-feature-icon { width: 1.25rem; height: 1.25rem; color: #00A651; flex-shrink: 0; margin-top: 0.125rem; } .cm-solution-feature-text { line-height: 1.7; } .cm-solution-note { font-style: italic; color: rgba(0,0,0,0.7); margin-top: 1rem; line-height: 1.8; } .cm-solution-keywords { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.05); } .cm-solution-keywords-title { font-size: 0.875rem; color: rgba(0,0,0,0.6); margin-bottom: 0.75rem; font-weight: 600; } .cm-solution-keywords-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .cm-solution-keyword { padding: 0.375rem 0.75rem; background: linear-gradient(to right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 9999px; font-size: 0.875rem; color: rgba(0,0,0,0.7); }

/* WHY CHOOSE */ .cm-whychoose-section { padding: 5rem 0; background: rgba(0, 0, 0, 0.02); } @media (min-width: 1024px) { .cm-whychoose-section { padding: 5rem 0; } } .cm-whychoose-container { max-width: 1280; margin: 0 auto; } .cm-whychoose-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; } @media (min-width: 768px) { .cm-whychoose-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cm-whychoose-grid { grid-template-columns: repeat(3, 1fr); } } .cm-whychoose-item { display: flex; align-items: flex-start; gap: 0.75rem; background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 2px solid rgba(0,0,0,0.05); transition: all 0.3s ease; } .cm-whychoose-item:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .cm-whychoose-icon { width: 1.5rem; height: 1.5rem; color: #00A651; flex-shrink: 0; margin-top: 0.25rem; } .cm-whychoose-text { font-weight: 500; line-height: 1.7; } .cm-whychoose-footer-box { background: linear-gradient(to bottom right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 1.5rem; padding: 2.5rem; border: 2px solid rgba(0,0,0,0.05); text-align: center; } .cm-whychoose-footer-text { font-size: 1.125rem; line-height: 1.8; }

/* INTRO */ .its-section-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: linear-gradient(to right, rgba(0,102,204,0.1), rgba(0,166,81,0.1)); border-radius: 9999px; margin-bottom: 1.5rem; } .its-badge-icon { width: 1.25rem; height: 1.25rem; color: #0066CC; } .its-badge-text { font-size: 0.875rem; color: #0066CC; font-weight: 600; }

/* SHARED */ .its-section-header { text-align: center; margin-bottom: 3rem; } .its-section-title { font-size: 1.875rem; margin-bottom: 1.5rem; font-weight: 700; line-height: 1.2; text-align: center; } @media (min-width: 1024px) { .its-section-title { font-size: 3rem; } }

/* CHALLENGE */ .its-challenge-section { padding: 5rem 0 3rem; background: white; } @media (min-width: 1024px) { .its-challenge-section { padding: 5rem 0 4rem; } } .its-challenge-container { max-width: 1280; margin: 0 auto; } .its-challenge-title { font-size: 1.875rem; margin-bottom: 2rem; font-weight: 700; line-height: 1.2; } @media (min-width: 1024px) { .its-challenge-title { font-size: 3rem; } } .its-challenge-box { background: linear-gradient(to bottom right, white, rgba(0,0,0,0.02)); border-radius: 1.5rem; padding: 2rem; border: 2px solid rgba(0,0,0,0.05); } @media (min-width: 1024px) { .its-challenge-box { padding: 3rem; } } .its-challenge-intro { font-size: 1.125rem; margin-bottom: 1.5rem; line-height: 1.8; } .its-demands-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } @media (min-width: 768px) { .its-demands-grid { grid-template-columns: repeat(2, 1fr); } } .its-demand-item { display: flex; align-items: flex-start; gap: 0.75rem; background: linear-gradient(to right, rgba(239,246,255,1), rgba(224,242,254,1)); border-radius: 0.75rem; padding: 1rem; border: 1px solid rgba(59,130,246,0.1); } .its-demand-icon { width: 1.25rem; height: 1.25rem; color: #0066CC; flex-shrink: 0; margin-top: 0.125rem; } .its-demand-text { line-height: 1.7; } .its-challenge-statement { font-size: 1.125rem; text-align: center; margin-bottom: 1rem; line-height: 1.8; } .its-challenge-footer { font-size: 1.125rem; text-align: center; line-height: 1.8; }

/* SOLUTIONS */ .its-solutions-section { padding: 3rem 0 5rem; background: rgba(0,0,0,0.02); } @media (min-width: 1024px) { .its-solutions-section { padding: 4rem 0 5rem; } } .its-solutions-container { max-width: 1280; margin: 0 auto; } .its-solution-card { background: white; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 2px solid rgba(0,0,0,0.05); margin-bottom: 3rem; transition: all 0.3s ease; } @media (min-width: 1024px) { .its-solution-card { padding: 3rem; } } .its-solution-card:hover { box-shadow: 0 25px 50px rgba(0,0,0,0.15); } .its-solution-header { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.5rem; } .its-solution-icon-wrapper { width: 4rem; height: 4rem; background: linear-gradient(135deg, rgba(0,102,204,0.1) 0%, rgba(0,166,81,0.1) 100%); border-radius: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .its-solution-icon { width: 2rem; height: 2rem; color: #0066CC; } .its-solution-title-block { flex: 1; } .its-solution-title { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 600; line-height: 1.3; } @media (min-width: 1024px) { .its-solution-title { font-size: 1.875rem; } } .its-solution-description { font-size: 1.125rem; line-height: 1.8; color: rgba(0,0,0,0.7); } .its-solution-label { font-weight: 600; margin-bottom: 1rem; margin-top: 1.5rem; } .its-solution-features-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1.5rem; } @media (min-width: 768px) { .its-solution-features-grid { grid-template-columns: repeat(2, 1fr); } } .its-solution-feature-item { display: flex; align-items: flex-start; gap: 0.75rem; } .its-solution-feature-icon { width: 1.25rem; height: 1.25rem; color: #00A651; flex-shrink: 0; margin-top: 0.125rem; } .its-solution-feature-text { line-height: 1.7; } .its-solution-engagement-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1.5rem; } @media (min-width: 768px) { .its-solution-engagement-grid { grid-template-columns: repeat(2, 1fr); } } .its-solution-engagement-item { display: flex; align-items: flex-start; gap: 0.75rem; } .its-solution-engagement-icon { width: 1.25rem; height: 1.25rem; color: #0066CC; flex-shrink: 0; margin-top: 0.125rem; } .its-solution-engagement-text { line-height: 1.7; } .its-solution-keywords { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.05); } .its-solution-keywords-title { font-size: 0.875rem; color: rgba(0,0,0,0.6); margin-bottom: 0.75rem; font-weight: 600; } .its-solution-keywords-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .its-solution-keyword { padding: 0.375rem 0.75rem; background: linear-gradient(to right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 9999px; font-size: 0.875rem; color: rgba(0,0,0,0.7); }


/* WHY CHOOSE */ .its-whychoose-section { padding: 5rem 0; background: rgba(0,0,0,0.02); } @media (min-width: 1024px) { .its-whychoose-section { padding: 5rem 0; } } .its-whychoose-container { max-width: 1280; margin: 0 auto; } .its-whychoose-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; } @media (min-width: 768px) { .its-whychoose-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .its-whychoose-grid { grid-template-columns: repeat(3, 1fr); } } .its-whychoose-item { display: flex; align-items: flex-start; gap: 0.75rem; background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 2px solid rgba(0,0,0,0.05); transition: all 0.3s ease; } .its-whychoose-item:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .its-whychoose-icon { width: 1.5rem; height: 1.5rem; color: #00A651; flex-shrink: 0; margin-top: 0.25rem; } .its-whychoose-text { font-weight: 500; line-height: 1.7; } .its-whychoose-footer-box { background: linear-gradient(to bottom right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 1.5rem; padding: 2.5rem; border: 2px solid rgba(0,0,0,0.05); text-align: center; } .its-whychoose-footer-text { font-size: 1.125rem; line-height: 1.8; }

/* RESPONSIVE */ @media (max-width: 640px) { .its-section-title, .its-intro-title, .its-challenge-title, .its-global-title, .its-cta-title { font-size: 1.5rem; } .its-hero-title { font-size: 2rem; } .its-casestudies-title { font-size: 2rem; } }


/* INTRO */ .wd-section-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: linear-gradient(to right, rgba(0,102,204,0.1), rgba(0,166,81,0.1)); border-radius: 9999px; margin-bottom: 1.5rem; } .wd-badge-icon { width: 1.25rem; height: 1.25rem; color: #0066CC; } .wd-badge-text { font-size: 0.875rem; color: #0066CC; font-weight: 600; }

/* SHARED */ .wd-section-header { text-align: center; margin-bottom: 3rem; } .wd-section-title { font-size: 1.875rem; margin-bottom: 1.5rem; font-weight: 700; line-height: 1.2; text-align: center; } @media (min-width: 1024px) { .wd-section-title { font-size: 3rem; } }

/* WHY CHOOSE */ .wd-whychoose-section { padding: 5rem 0; background: white; } @media (min-width: 1024px) { .wd-whychoose-section { padding: 5rem 0; } } .wd-whychoose-container { max-width: 1280; margin: 0 auto; } .wd-whychoose-tagline { font-size: 1.25rem; color: rgba(0,0,0,0.7); margin-bottom: 0.5rem; text-align: center; max-width: 64rem; margin-left: auto; margin-right: auto; line-height: 1.6; } .wd-whychoose-intro { font-size: 1.125rem; color: rgba(0,0,0,0.8); margin-bottom: 1.5rem; text-align: center; line-height: 1.6; font-weight: 600; } .wd-whychoose-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; } @media (min-width: 768px) { .wd-whychoose-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wd-whychoose-grid { grid-template-columns: repeat(4, 1fr); } } .wd-whychoose-item { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 2px solid rgba(0,0,0,0.05); transition: all 0.3s ease; } .wd-whychoose-item:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .wd-whychoose-icon-wrapper { width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, #0066CC, #00A651); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .wd-whychoose-icon { width: 1.25rem; height: 1.25rem; color: white; } .wd-whychoose-item p { font-size: 0.875rem; line-height: 1.5; } .wd-whychoose-footer-box { background: linear-gradient(to bottom right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 1.5rem; padding: 2.5rem; border: 2px solid rgba(0,0,0,0.05); text-align: center; } .wd-whychoose-footer-box p { font-size: 1.125rem; line-height: 1.6; }


/* Section */
.wd-service-overview-section {
    padding: 5rem 0;
    background-color: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .wd-service-overview-section {
        padding: 5rem 0;
    }
}

/* Container */
.wd-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .wd-container {
        padding: 0 3rem;
    }
}

/* Max Width */
.wd-max-width {
    max-width: 72rem;
    margin: 0 auto;
}

/* ========================================
   SECTION HEADER
   ======================================== */

.wd-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Badge */
.wd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.wd-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.wd-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

/* Section Title */
.wd-section-title {
    font-size: 2.25rem;
    margin-bottom: 1rem;
    color: #000000;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .wd-section-title {
        font-size: 3rem;
    }
}

/* ========================================
   SERVICE CARDS LIST
   ======================================== */

.wd-services-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Service Card */
.wd-service-card {
    background-color: #ffffff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

@media (min-width: 1024px) {
    .wd-service-card {
        padding: 2.5rem;
    }
}

.wd-service-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Card Layout */
.wd-card-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .wd-card-layout {
        flex-direction: row;
    }
}

/* ========================================
   ICON SECTION
   ======================================== */

.wd-icon-container {
    flex-shrink: 0;
}

.wd-icon-box {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: linear-gradient(to bottom right, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.wd-service-card:hover .wd-icon-box {
    transform: scale(1.1);
}

.wd-icon {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

/* ========================================
   CARD CONTENT
   ======================================== */

.wd-card-content {
    flex: 1;
}

/* Card Title */
.wd-card-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #000000;
    font-weight: 600;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .wd-card-title {
        font-size: 1.875rem;
    }
}

/* Card Description */
.wd-card-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 1rem;
    line-height: 1.7;
}

/* ========================================
   IDEAL FOR SECTION
   ======================================== */

.wd-ideal-for {
    margin-bottom: 1rem;
}

.wd-ideal-label {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0.75rem;
}

/* ========================================
   FEATURES SECTION
   ======================================== */

.wd-features {
    margin-bottom: 1rem;
}

/* ========================================
   LIST GRID
   ======================================== */

.wd-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    list-style: none;
}

@media (min-width: 768px) {
    .wd-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* List Item */
.wd-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Check Icon */
.wd-check-icon {
       width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* List Text */
.wd-list-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.5;
}

/* ========================================
   NOTE SECTION
   ======================================== */

.wd-note {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    font-style: italic;
    margin-top: 1rem;
    line-height: 1.5;
}

/* ========================================
   KEYWORDS SECTION
   ======================================== */

.wd-keywords {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.wd-keywords-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5rem;
}

/* Keywords List */
.wd-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Keyword Tag */
.wd-keyword-tag {
    padding: 0.25rem 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
}

/* TECHNOLOGIES */ .wd-tech-section { padding: 5rem 0; background: white; } @media (min-width: 1024px) { .wd-tech-section { padding: 5rem 0; } } .wd-tech-container { max-width: 1280; margin: 0 auto; } .wd-tech-subtitle { font-size: 1.125rem; color: rgba(0,0,0,0.6); max-width: 48rem; margin: 0 auto; line-height: 1.6; text-align: center; } @media (min-width: 1024px) { .wd-tech-subtitle { font-size: 1.25rem; } } .wd-tech-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3rem; } @media (min-width: 768px) { .wd-tech-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wd-tech-grid { grid-template-columns: repeat(4, 1fr); } } .wd-tech-card { background: white; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 2px solid rgba(0,0,0,0.05); transition: all 0.3s ease; } .wd-tech-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .wd-tech-icon-wrapper { width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; transition: transform 0.3s ease; } .wd-tech-card:hover .wd-tech-icon-wrapper { transform: scale(1.1); } .wd-tech-icon-blue { background: linear-gradient(135deg, #0066CC, #0052A3); } .wd-tech-icon-green { background: linear-gradient(135deg, #0066CC, #00A651); } .wd-tech-icon-green2 { background: linear-gradient(135deg, #00A651, #008A44); } .wd-tech-icon-mixed { background: linear-gradient(135deg, #00A651, #0066CC); } .wd-tech-icon { width: 1.75rem; height: 1.75rem; color: white; } .wd-tech-title { font-size: 1.25rem; margin-bottom: 1.25rem; font-weight: 600; color: rgba(0,0,0,0.9); } .wd-tech-list { display: flex; flex-direction: column; gap: 0.75rem; } .wd-tech-list li { display: flex; align-items: center; gap: 0.75rem; } .wd-tech-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: linear-gradient(to right, #0066CC, #00A651); flex-shrink: 0; } .wd-tech-list span { font-size: 1rem; color: rgba(0,0,0,0.7); } .wd-tech-footer-box { margin-top: 3rem; background: linear-gradient(to bottom right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 1.5rem; padding: 2.5rem; border: 2px solid rgba(0,0,0,0.05); text-align: center; } .wd-tech-footer-box p { font-size: 1.125rem; color: rgba(0,0,0,0.8); line-height: 1.6; }

/* PROCESS */ .wd-process-section { padding: 5rem 0; background: rgba(0,0,0,0.02); } @media (min-width: 1024px) { .wd-process-section { padding: 5rem 0; } } .wd-process-container { max-width: 1280; margin: 0 auto; } .wd-process-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .wd-process-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wd-process-grid { grid-template-columns: repeat(3, 1fr); } } .wd-process-card { background: white; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 2px solid rgba(0,0,0,0.05); transition: all 0.3s ease; } .wd-process-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .wd-process-number { width: 3.5rem; height: 3.5rem; background: linear-gradient(135deg, #0066CC, #00A651); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; } .wd-process-title { font-size: 1.25rem; margin-bottom: 1rem; font-weight: 600; color: rgba(0,0,0,0.9); } .wd-process-description { font-size: 1rem; color: rgba(0,0,0,0.6); line-height: 1.6; }

/* RESPONSIVE */ @media (max-width: 640px) { .wd-section-title, .wd-intro-title { font-size: 1.5rem; } .wd-hero-title { font-size: 2rem; } .wd-faq-title { font-size: 2rem; } .wd-cta-title { font-size: 1.5rem; } }

/* Section Styles */
.gh-section {
    padding: 5rem 0;
    background: white;
}

@media (min-width: 1024px) {
    .gh-section {
        padding: 5rem 0;
    }
}

.gh-container {
    max-width: 1280;
    margin: 0 auto;
}

/* Header */
.gh-header {
    text-align: center;
    margin-bottom: 4rem;
}

.gh-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.gh-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #0066CC;
}

.gh-badge-text {
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 600;
}

.gh-title {
    font-size: 1.875rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.9);
}

@media (min-width: 1024px) {
    .gh-title {
        font-size: 3rem;
    }
}

.gh-subtitle {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.6);
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* Features Grid */
.gh-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .gh-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Feature Card */
.gh-feature-card {
    position: relative;
    background: white;
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gh-feature-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Gradient Overlay */
.gh-feature-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    opacity: 0;
    transition: opacity 0.5s ease;
}

.gh-overlay-green {
    background: linear-gradient(to bottom right, rgba(0, 166, 81, 0.05), rgba(0, 102, 204, 0.05));
}

.gh-feature-card:hover .gh-feature-overlay {
    opacity: 1;
}

/* Feature Content */
.gh-feature-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Icon Wrapper */
.gh-feature-icon-wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.5s ease;
}

.gh-feature-card:hover .gh-feature-icon-wrapper {
    transform: scale(1.1);
}

.gh-icon-blue {
    background: linear-gradient(135deg, #0066CC, #0052A3);
}

.gh-icon-green {
    background: linear-gradient(135deg, #00A651, #008A44);
}

.gh-icon-mixed {
    background: linear-gradient(135deg, #0066CC, #00A651);
}

.gh-icon-green-mixed {
    background: linear-gradient(135deg, #00A651, #0066CC);
}

.gh-feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

/* Feature Title */
.gh-feature-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    line-height: 1.3;
}

/* Decorative Glow */
.gh-feature-glow {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 6rem;
    height: 6rem;
    background: linear-gradient(to bottom right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 50%;
    filter: blur(2rem);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.gh-glow-green {
    background: linear-gradient(to bottom right, rgba(0, 166, 81, 0.1), rgba(0, 102, 204, 0.1));
}

.gh-feature-card:hover .gh-feature-glow {
    opacity: 1;
}

/* Summary Box */
.gh-summary-box {
    position: relative;
    background: linear-gradient(to bottom right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .gh-summary-box {
        padding: 3rem;
    }
}

/* Decorative Background Elements */
.gh-summary-deco-1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(0, 102, 204, 0.1), transparent);
    border-radius: 50%;
    filter: blur(3rem);
}

.gh-summary-deco-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to top right, rgba(0, 166, 81, 0.1), transparent);
    border-radius: 50%;
    filter: blur(3rem);
}

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

.gh-summary-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .gh-summary-text {
        font-size: 1.25rem;
    }
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .gh-title {
        font-size: 1.5rem;
    }
    
    .gh-subtitle {
        font-size: 1rem;
    }
    
    .gh-feature-title {
        font-size: 1rem;
    }
    
    .gh-summary-text {
        font-size: 1rem;
    }
}

/* INTRO */.sd-section-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: linear-gradient(to right, rgba(0,102,204,0.1), rgba(0,166,81,0.1)); border-radius: 9999px; margin-bottom: 1.5rem; } .sd-badge-icon { width: 1.25rem; height: 1.25rem; color: #0066CC; } .sd-badge-text { font-size: 0.875rem; color: #0066CC; font-weight: 600; }

/* SHARED */ .sd-section-header { text-align: center; margin-bottom: 3rem; }

/* WHY CHOOSE */ .sd-whychoose-section { padding: 5rem 0; background: white; } @media (min-width: 1024px) { .sd-whychoose-section { padding: 5rem 0; } } .sd-whychoose-container { max-width: 1280; margin: 0 auto; } .sd-whychoose-title { font-size: 1.875rem; margin-bottom: 1rem; font-weight: 700; line-height: 1.2; } @media (min-width: 1024px) { .sd-whychoose-title { font-size: 3rem; } } .sd-whychoose-subtitle { color: rgba(0,0,0,0.7); font-size: 20px; line-height: 1.6; max-width: 64rem; margin: 0 auto 0.5rem; } .sd-whychoose-label { font-size: 1.125rem; color: rgba(0,0,0,0.8); margin-bottom: 1.5rem; text-align: center; font-weight: 600; line-height: 1.6; } .sd-differentiators-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1rem; } @media (min-width: 768px) { .sd-differentiators-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .sd-differentiators-grid { grid-template-columns: repeat(4, 1fr); } } .sd-differentiator-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 2px solid rgba(0,0,0,0.05); transition: all 0.3s ease; } .sd-differentiator-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .sd-differentiator-icon-wrapper { width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, #0066CC, #00A651); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .sd-differentiator-icon { width: 1.25rem; height: 1.25rem; color: white; } .sd-differentiator-text { font-size: 0.875rem; line-height: 1.5; } .sd-whychoose-footer-box { background: linear-gradient(to bottom right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 1.5rem; padding: 2.5rem; border: 2px solid rgba(0,0,0,0.05); text-align: center; margin-top: 3rem; } .sd-whychoose-footer-text { font-size: 1.125rem; color: rgba(0,0,0,0.8); line-height: 1.6; }

/* SERVICES */ .sd-services-section { padding: 5rem 0; background: rgba(0,0,0,0.02); } @media (min-width: 1024px) { .sd-services-section { padding: 5rem 0; } } .sd-services-container { max-width: 1280; margin: 0 auto; } .sd-services-title { font-size: 2.5rem; margin-bottom: 1rem; font-weight: 700; line-height: 1.2; } @media (min-width: 1024px) { .sd-services-title { font-size: 3rem; } } .sd-service-card { background: white; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 2px solid rgba(0,0,0,0.05); margin-bottom: 2rem; transition: all 0.3s ease; } @media (min-width: 1024px) { .sd-service-card { padding: 2.5rem; } } .sd-service-card:hover { border-color: rgba(0,102,204,0.2); box-shadow: 0 25px 50px rgba(0,0,0,0.15); } .sd-service-header { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 1024px) { .sd-service-header { flex-direction: row; } } .sd-service-icon-wrapper { width: 4rem; height: 4rem; background: linear-gradient(135deg, #0066CC, #00A651); border-radius: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.3s ease; } .sd-service-card:hover .sd-service-icon-wrapper { transform: scale(1.1); } .sd-service-icon { width: 2rem; height: 2rem; color: white; } .sd-service-content-wrapper { flex: 1; } .sd-service-title { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 600; line-height: 1.3; } @media (min-width: 1024px) { .sd-service-title { font-size: 1.875rem; } } .sd-service-description { font-size: 1.125rem; color: rgba(0,0,0,0.7); margin-bottom: 1rem; line-height: 1.7; } .sd-service-description-secondary { font-size: 1.125rem; color: rgba(0,0,0,0.7); margin-bottom: 1rem; line-height: 1.7; } .sd-service-label { margin-bottom: 0.75rem; color: rgba(0,0,0,0.6); } .sd-service-features-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-bottom: 1rem; } @media (min-width: 768px) { .sd-service-features-grid { grid-template-columns: repeat(2, 1fr); } } .sd-service-feature-item { display: flex; align-items: flex-start; gap: 0.5rem; } .sd-service-feature-icon { width: 1.25rem; height: 1.25rem; color: #00A651; flex-shrink: 0; margin-top: 0.125rem; } .sd-service-feature-text { color: rgba(0,0,0,0.7); } .sd-service-note { font-size: 1rem; color: rgba(0,0,0,0.6); font-style: italic; margin-top: 1rem; } .sd-service-keywords { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.05); } .sd-service-keywords-label { font-size: 0.875rem; color: rgba(0,0,0,0.5); margin-bottom: 0.5rem; } .sd-service-keywords-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .sd-service-keyword { padding: 0.25rem 0.75rem; background: linear-gradient(to right, rgba(0,102,204,0.1), rgba(0,166,81,0.1)); border-radius: 9999px; font-size: 0.875rem; color: rgba(0,0,0,0.6); }

/* TECHNOLOGIES */ .sd-technologies-section { padding: 5rem 0; background: linear-gradient(to bottom right, white, rgba(0,102,204,0.02), rgba(0,166,81,0.02)); } @media (min-width: 1024px) { .sd-technologies-section { padding: 5rem 0; } } .sd-technologies-container { max-width: 1280; margin: 0 auto; } .sd-technologies-title { font-size: 2.5rem; margin-bottom: 1rem; font-weight: 700; line-height: 1.2; } @media (min-width: 1024px) { .sd-technologies-title { font-size: 3rem; } } .sd-technologies-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; } @media (min-width: 768px) { .sd-technologies-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .sd-technologies-grid { grid-template-columns: repeat(4, 1fr); } } .sd-technology-card { background: white; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 2px solid rgba(0,0,0,0.05); transition: all 0.3s ease; } .sd-technology-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .sd-technology-icon-wrapper { width: 3.5rem; height: 3.5rem; background: linear-gradient(135deg, #0066CC, #00A651); border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; transition: transform 0.3s ease; } .sd-technology-card:hover .sd-technology-icon-wrapper { transform: scale(1.1); } .sd-technology-icon { width: 1.75rem; height: 1.75rem; color: white; } .sd-technology-title { font-size: 1.25rem; margin-bottom: 1.25rem; font-weight: 600; color: rgba(0,0,0,0.9); } .sd-technology-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .sd-technology-item { display: flex; align-items: center; gap: 0.75rem; } .sd-technology-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: linear-gradient(to right, #0066CC, #00A651); flex-shrink: 0; } .sd-technology-text { font-size: 1rem; color: rgba(0,0,0,0.7); } .sd-technologies-footer { background: linear-gradient(to bottom right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 1.5rem; padding: 2.5rem; border: 2px solid rgba(0,0,0,0.05); text-align: center; } .sd-technologies-footer-text { font-size: 1.125rem; color: rgba(0,0,0,0.8); line-height: 1.6; }

/* PROCESS */ .sd-process-section { padding: 5rem 0; background: rgba(0,0,0,0.02); } @media (min-width: 1024px) { .sd-process-section { padding: 5rem 0; } } .sd-process-container { max-width: 80rem; margin: 0 auto; } .sd-process-title { font-size: 2.5rem; margin-bottom: 1rem; font-weight: 700; line-height: 1.2; } @media (min-width: 1024px) { .sd-process-title { font-size: 3rem; } } .sd-process-steps { display: flex; flex-direction: column; gap: 1.5rem; } .sd-process-step { background: linear-gradient(to right, white, rgba(0,102,204,0.02)); border-radius: 1rem; padding: 2rem; border: 2px solid rgba(0,0,0,0.05); display: flex; align-items: flex-start; gap: 1.5rem; transition: all 0.3s ease; } .sd-process-step:hover { border-color: rgba(0,102,204,0.2); box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .sd-process-number { width: 3.5rem; height: 3.5rem; background: linear-gradient(135deg, #0066CC, #00A651); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.5rem; color: white; font-weight: 700; } .sd-process-content { flex: 1; } .sd-process-step-title { font-size: 1.25rem; margin-bottom: 0.75rem; font-weight: 600; line-height: 1.3; } @media (min-width: 1024px) { .sd-process-step-title { font-size: 1.5rem; } } .sd-process-step-description { font-size: 1.125rem; color: rgba(0,0,0,0.7); line-height: 1.7; }

/* GLOBAL */ .sd-global-section { padding: 2.5rem 0 5rem; background: white; } @media (min-width: 1024px) { .sd-global-section { padding: 0rem 0 5rem; } } .sd-global-container { max-width: 1280; margin: 0 auto; } .sd-global-intro { color: rgba(0,0,0,0.7); font-size: 17px; line-height: 1.6; margin-bottom: 1rem; text-align: center; } .sd-global-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; } @media (min-width: 768px) { .sd-global-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .sd-global-grid { grid-template-columns: repeat(3, 1fr); } } .sd-global-card { background: white; border-radius: 1rem; padding: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 2px solid rgba(0,0,0,0.05); display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; } .sd-global-card:hover { border-color: rgba(0,102,204,0.2); box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .sd-global-icon-wrapper { width: 3rem; height: 3rem; background: linear-gradient(135deg, #0066CC, #00A651); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.3s ease; } .sd-global-card:hover .sd-global-icon-wrapper { transform: scale(1.1); } .sd-global-icon { width: 1.5rem; height: 1.5rem; color: white; } .sd-global-title { font-size: 1.25rem; font-weight: 600; } .sd-global-footer { background: linear-gradient(to bottom right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 1.5rem; padding: 2.5rem; border: 2px solid rgba(0,0,0,0.05); } .sd-global-footer-text { font-size: 1.125rem; color: rgba(0,0,0,0.8); text-align: center; line-height: 1.8; } @media (min-width: 1024px) { .sd-global-footer-text { font-size: 1.25rem; } }

/* WHY INDIA */ .sd-whyindia-section { padding: 5rem 0; background: white; } @media (min-width: 1024px) { .sd-whyindia-section { padding: 5rem 0; } } .sd-whyindia-container { max-width: 80rem; margin: 0 auto; } .sd-whyindia-title { font-size: 1.875rem; margin-bottom: 1.5rem; font-weight: 700; line-height: 1.2; } @media (min-width: 1024px) { .sd-whyindia-title { font-size: 3rem; } } .sd-whyindia-subtitle { font-size: 1.125rem; color: rgba(0,0,0,0.7); margin-bottom: 1.5rem; line-height: 1.8; } @media (min-width: 1024px) { .sd-whyindia-subtitle { font-size: 1.25rem; } } .sd-whyindia-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; } @media (min-width: 768px) { .sd-whyindia-grid { grid-template-columns: repeat(2, 1fr); } } .sd-whyindia-card { background: white; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 2px solid rgba(0,0,0,0.05); transition: all 0.3s ease; } .sd-whyindia-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .sd-whyindia-content { display: flex; align-items: flex-start; gap: 1rem; } .sd-whyindia-icon { width: 1.5rem; height: 1.5rem; color: #00A651; flex-shrink: 0; margin-top: 0.25rem; } .sd-whyindia-text { font-size: 1.125rem; line-height: 1.7; } .sd-whyindia-footer { background: linear-gradient(to bottom right, rgba(0,102,204,0.05), rgba(0,166,81,0.05)); border-radius: 1.5rem; padding: 2.5rem; border: 2px solid rgba(0,0,0,0.05); text-align: center; } .sd-whyindia-footer-text { font-size: 1.125rem; color: rgba(0,0,0,0.8); line-height: 1.8; }

/* RESPONSIVE */ @media (max-width: 640px) { .sd-intro-title, .sd-whychoose-title, .sd-services-title, .sd-technologies-title, .sd-process-title, .sd-industries-title, .sd-casestudies-title, .sd-testimonials-title, .sd-whyindia-title, .sd-faq-title, .sd-getstarted-title, .sd-cta-title { font-size: 1.5rem; } .sd-hero-title { font-size: 2rem; } }


/* ========================================
   AI & DATA ENGINEERING PAGE - CSS
   ======================================== */
.ai-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.ai-content-wide {
    max-width: 1280px;
    margin: 0 auto;
}

.ai-content-medium {
    max-width: 1024px;
    margin: 0 auto;
}

/* Badge Component */
.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.ai-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.ai-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

.ai-badge-white {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ai-badge-white .ai-badge-icon,
.ai-badge-white .ai-badge-text {
    color: #fff;
}

/* Section Headers */
.ai-section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.ai-main-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.ai-section-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* Why Section */
.ai-why-section {
    padding: 5rem 0 8rem;
}

.ai-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.ai-why-col h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.ai-why-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.ai-why-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.ai-why-list {
    list-style: none;
}

.ai-why-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ai-why-item span {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
}

.ai-red-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #ef4444;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

/* Highlight Box */
.ai-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.ai-highlight-box p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Services Section */
.ai-services-section {
    padding: 5rem 0 8rem;
    background: rgba(0, 0, 0, 0.02);
}

.ai-services-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ai-service-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem 2.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.ai-service-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ai-service-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ai-service-icon-wrapper {
    flex-shrink: 0;
}

.ai-service-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.ai-service-card:hover .ai-service-icon {
    transform: scale(1.1);
}

.ai-service-icon svg {
    color: white;
}

.ai-service-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.ai-service-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.ai-service-subtext {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0.75rem;
}

.ai-service-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    list-style: none;
}

.ai-service-items li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.ai-service-check {
    width: 20px;
    height: 20px;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ai-service-items span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
}

.ai-service-note {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    font-style: italic;
    margin-top: 1rem;
}

.ai-service-keywords {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.ai-keywords-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5rem;
}

.ai-keywords-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ai-keyword-tag {
    padding: 0.25rem 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
}

/* Technologies Section */
.ai-tech-section {
    padding: 5rem 0 5rem;

}

.ai-tech-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.ai-tech-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.ai-tech-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.ai-tech-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s;
}

.ai-tech-card:hover .ai-tech-icon {
    transform: scale(1.1);
}

.ai-tech-icon svg {
    color: white;
}

.ai-tech-icon-blue {
    background: linear-gradient(135deg, #0066CC, #0052A3);
}

.ai-tech-icon-blue-green {
    background: linear-gradient(135deg, #0066CC, #00A651);
}

.ai-tech-icon-green {
    background: linear-gradient(135deg, #00A651, #008A44);
}

.ai-tech-icon-green-blue {
    background: linear-gradient(135deg, #00A651, #0066CC);
}

.ai-tech-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1.25rem;
}

.ai-tech-list {
    list-style: none;
}

.ai-tech-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ai-tech-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: linear-gradient(to right, #0066CC, #00A651);
    flex-shrink: 0;
}

.ai-tech-list span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
}

.ai-tech-bottom-box {
    margin-top: 3rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.ai-tech-bottom-box p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Process Section */
.ai-process-section {
    padding: 5rem 0 5rem;
    background: rgba(0, 0, 0, 0.02);
}

.ai-process-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ai-process-card {
    background: linear-gradient(to right, white, rgba(0, 102, 204, 0.02));
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    transition: all 0.3s;
}

.ai-process-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.ai-process-number {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.ai-process-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.ai-process-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
}

/* Why Choose Section */
.ai-why-choose-section {
    padding: 5rem 0 8rem;
    background: white;
}

.ai-choose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.ai-choose-card {
    background: linear-gradient(135deg, white, rgba(0, 102, 204, 0.02));
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: all 0.3s;
}

.ai-choose-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.ai-choose-check {
    width: 24px;
    height: 24px;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ai-choose-card p {
    font-size: 1rem;
    line-height: 1.6;
}

.ai-choose-bottom-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.ai-choose-bottom-box p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Build Section */
.ai-build-section {
    padding: 5rem 0 5rem;
    background: linear-gradient(135deg, white, rgba(0, 102, 204, 0.02), rgba(0, 166, 81, 0.02));
}

.ai-build-subtitle {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.ai-build-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.ai-build-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s;
}

.ai-build-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.ai-build-check {
    width: 24px;
    height: 24px;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ai-build-card p {
    font-size: 1.125rem;
    line-height: 1.7;
}

.ai-build-bottom-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.ai-build-bottom-box p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}


/* Responsive Design */
@media (min-width: 640px) {
    .ai-cta-buttons,
    .ai-final-cta-buttons {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .ai-intro-list,
    .ai-service-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-countries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-build-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-case-study-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .ai-case-study-image-wrapper {
        height: auto;
    }

    .ai-service-content {
        flex-direction: row;
    }

    .ai-testimonial-prev {
        left: -4rem;
    }

    .ai-testimonial-next {
        right: -4rem;
    }
}

@media (min-width: 1024px) {
    .ai-hero-title {
        font-size: 3rem;
    }

    .ai-intro-para {
        font-size: 19px;
    }

    .ai-main-title {
        font-size: 3rem;
        margin-bottom: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .ai-section-title {
        font-size: 2.5rem;
    }

    .ai-why-title {
        font-size: 1.875rem;
    }

    .ai-service-title {
        font-size: 1.875rem;
    }

    .ai-tech-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .ai-industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ai-countries-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ai-choose-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ai-intro-section {
        padding: 6rem 0;
    }

    .ai-why-section,
    .ai-services-section,
    .ai-tech-section,
    .ai-process-section,
    .ai-industries-section,
    .ai-case-studies-section,
    .ai-testimonials-section,
    .ai-why-choose-section,
    .ai-faq-section,
    .ai-build-section {
        padding: 5rem 0;
    }

    .ai-service-card {
        padding: 2.5rem;
    }

    .ai-testimonial-quote {
        font-size: 1.5rem;
    }

    .ai-final-cta-title {
        font-size: 3rem;
    }

    .ai-final-cta-text {
        font-size: 1.25rem;
    }
}


/* ========================================
   BADGE COMPONENT
   ======================================== */

   /* Container System */
.cd-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.cd-content-medium {
    max-width: 1024px;
    margin: 0 auto;
}


.cd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.cd-badge-blue .cd-badge-text,
.cd-badge-blue .cd-badge-icon {
    color: #0066CC;
}

.cd-badge-green .cd-badge-text,
.cd-badge-green .cd-badge-icon {
    color: #00A651;
}

.cd-badge-light {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cd-badge-light .cd-badge-icon,
.cd-badge-light .cd-badge-text {
    color: white;
}

.cd-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.cd-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

/* ========================================
   SERVICE SECTIONS (3-11)
   ======================================== */
.cd-service-section {
    padding: 5rem 0 5rem;
    background: white;
}

.cd-service-alt {
    background: rgba(0, 0, 0, 0.02);
}

.cd-service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

.cd-service-image-wrapper {
    position: relative;
}

.cd-service-image-container {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.cd-service-image {
    width: 100%;
    height: 100%;
    min-height: 450px;
    object-fit: cover;
    display: block;
}

.cd-service-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.cd-service-image-decoration {
    position: absolute;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
    z-index: -1;
    top: -1.5rem;
    left: -1.5rem;
}

.cd-decoration-right {
    top: auto;
    left: auto;
    bottom: -1.5rem;
    right: -1.5rem;
}

.cd-service-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.cd-service-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.cd-service-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cd-service-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.cd-item-accent {
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), transparent);
    border-left: 4px solid #0066CC;
}

.cd-service-item p {
    font-size: 1rem;
}

.cd-keyword-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-top: 1.5rem;
}

.cd-keyword-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cd-keyword-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
}

/* ========================================
   SECTION 12: OFFSHORE SERVICES
   ======================================== */
.cd-offshore-section {
    padding: 5rem 0 5rem;
    background: white;
}

.cd-offshore-header {
    text-align: center;
    margin-bottom: 3rem;
}

.cd-offshore-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.cd-offshore-subtitle {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 2rem;
}

.cd-offshore-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.cd-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.cd-highlight-box p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
}

/* ========================================
   SECTION 14: WHY INNOVATOR
   ======================================== */
.cd-why-section {
    padding: 5rem 0 5rem;
    background: white;
}

.cd-why-header {
    text-align: center;
    margin-bottom: 4rem;
}

.cd-why-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.cd-why-divider {
    width: 6rem;
    height: 0.25rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    margin: 0 auto;
    border-radius: 9999px;
}

.cd-why-reasons {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem 3rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 4rem;
}

.cd-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.cd-why-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.cd-why-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.cd-why-icon svg {
    color: white;
}

.cd-why-item p {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.7;
}

.cd-quote-box {
    position: relative;
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    border-radius: 1.5rem;
    padding: 3rem 4rem;
    color: white;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.cd-quote-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 30px 30px;
}

.cd-quote-circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
}

.cd-quote-circle-1 {
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    transform: translate(50%, -50%);
}

.cd-quote-circle-2 {
    bottom: 0;
    left: 0;
    width: 10rem;
    height: 10rem;
    transform: translate(-50%, 50%);
}

.cd-quote-content {
    position: relative;
    z-index: 10;
}

.cd-quote-line {
    width: 4rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 9999px;
    margin: 0 auto 1.5rem;
}

.cd-quote-text {
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (min-width: 640px) {
    .cd-cta-buttons,
    .cd-final-cta-buttons {
        flex-direction: row;
    }

    .cd-offshore-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .cd-expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cd-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cd-industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cd-markets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cd-hero-title {
        font-size: 3rem;
    }

    .cd-section-title,
    .cd-offshore-title,
    .cd-why-title,
    .cd-faq-title {
        font-size: 3rem;
    }

    .cd-service-title {
        font-size: 3rem;
    }

    .cd-final-cta-title {
        font-size: 3rem;
    }

    .cd-final-cta-subtitle {
        font-size: 1.5rem;
    }

    .cd-service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }

    .cd-industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cd-markets-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cd-intro-section,
    .cd-service-section,
    .cd-offshore-section,
    .cd-industries-section,
    .cd-why-section,
    .cd-faq-section,
    .cd-final-cta {
        padding: 5rem 0;
    }
}


/* Container */
.dm-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ===========================================
   BADGE COMPONENT
   =========================================== */
.dm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.dm-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.dm-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

/* ===========================================
   SECTION 3: WHY CHOOSE US
   =========================================== */
.dm-why-section {
    padding: 5rem 0 5rem;
    background: white;
}

.dm-why-content {
    max-width: 1280px;
    margin: 0 auto;
}

.dm-why-header {
    text-align: center;
    margin-bottom: 3rem;
}

.dm-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.dm-why-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.dm-why-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.dm-why-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dm-why-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.dm-check-icon-large {
        width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.dm-why-item span {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
}

.dm-why-image {
    position: relative;
    height: 16rem;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.dm-why-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
}

.dm-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.dm-highlight-box p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

/* ===========================================
   SECTION 4-6: SERVICES
   =========================================== */
.dm-services-section {
    padding: 5rem 0 5rem;
    background: rgba(0, 0, 0, 0.02);
}

.dm-services-content {
    max-width: 1280px;
    margin: 0 auto;
}

.dm-services-header {
    text-align: center;
    margin-bottom: 4rem;
}

.dm-service-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem 2.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
    transition: all 0.3s;
}

.dm-service-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.dm-service-header {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.dm-service-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.dm-service-card:hover .dm-service-icon {
    transform: scale(1.1);
}

.dm-service-icon svg {
    color: white;
}

.dm-service-title-block {
    flex: 1;
}

.dm-service-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.dm-service-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
}

.dm-service-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.dm-service-section {
    /* Each subsection */
}

.dm-service-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.dm-service-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.dm-service-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.dm-service-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
}

/* Keywords Section */
.dm-keywords-section {
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.dm-keywords-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5rem;
}

.dm-keywords-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dm-keyword-tag {
    padding: 0.5rem 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */
@media (min-width: 640px) {
    .dm-cta-buttons {
        flex-direction: row;
    }

    .dm-service-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .dm-specialization-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dm-why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }

    .dm-why-image {
        height: auto;
    }
}

@media (min-width: 1024px) {
    .dm-hero-title {
        font-size: 3rem;
    }

    .dm-section-title {
        font-size: 3rem;
    }

    .dm-service-title {
        font-size: 1.875rem;
    }

    .dm-intro-section,
    .dm-why-section,
    .dm-services-section {
        padding: 5rem 0;
    }
}

/* Additional sections would continue with similar styling patterns */

/* ===========================================
   SECTION 7: AI & DATA-DRIVEN MARKETING
   =========================================== */
.dm-ai-section {
    padding: 5rem 0 5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(0, 102, 204, 0.02), rgba(0, 166, 81, 0.02));
}

.dm-ai-content {
    max-width: 1280px;
    margin: 0 auto;
}

.dm-ai-header {
    text-align: center;
    margin-bottom: 3rem;
}

.dm-ai-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.dm-ai-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dm-ai-feature-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: all 0.3s;
}

.dm-ai-feature-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.dm-feature-icon {
    width: 24px;
    height: 24px;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.dm-ai-feature-card p {
    font-size: 1rem;
    line-height: 1.6;
}

.dm-ai-footer {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
    line-height: 1.7;
    margin-top: 2rem;
}

/* ===========================================
   SECTION 10: WHY INDIA
   =========================================== */
.dm-why-india-section {
    padding: 5rem 0 8rem;
    background: white;
}

.dm-why-india-content {
    max-width: 1280px;
    margin: 0 auto;
}

.dm-why-india-header {
    text-align: center;
    margin-bottom: 3rem;
}

.dm-why-india-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.dm-advantages-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dm-advantage-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: all 0.3s;
}

.dm-advantage-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.dm-advantage-icon {
       width: 1.25rem;
    height: 1.25rem;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.dm-advantage-card p {
    font-size: 1.125rem;
    line-height: 1.7;
}


/* ===========================================
   RESPONSIVE UPDATES
   =========================================== */
@media (min-width: 640px) {
    .dm-ai-features-grid,
    .dm-advantages-grid,
    .dm-countries-grid,
    .dm-search-terms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .dm-industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dm-countries-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .dm-case-study-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dm-case-study-image {
        height: auto;
    }

    .dm-testimonial-prev {
        left: -4rem;
    }

    .dm-testimonial-next {
        right: -4rem;
    }
}

@media (min-width: 1024px) {
    .dm-final-cta-title {
        font-size: 3rem;
    }

    .dm-final-cta-subtitle {
        font-size: 1.5rem;
    }

    .dm-industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .dm-ai-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .dm-ai-section,
    .dm-industries-section,
    .dm-case-studies-section,
    .dm-why-india-section,
    .dm-testimonials-section,
    .dm-faq-section,
    .dm-final-cta {
        padding: 5rem 0;
    }

    .dm-testimonial-quote {
        font-size: 1.5rem;
    }
}



/* ===========================================
   BADGE COMPONENT
   =========================================== */
.it-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.it-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.it-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

/* ===========================================
   SECTION 3: WHY BUSINESSES NEED IT CONSULTING
   =========================================== */
.it-why-section {
    padding: 5rem 0 5rem;
    background: white;
}

.it-why-content {
    max-width: 1280px;
    margin: 0 auto;
}

.it-why-header {
    text-align: center;
    margin-bottom: 3rem;
}

.it-why-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.it-challenge-benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.it-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.it-challenge-list,
.it-benefit-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.it-challenge-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.it-challenge-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: rgba(239, 68, 68, 0.1);
    color: rgb(220, 38, 38);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.it-challenge-item span {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
}

.it-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.it-check-icon-large {
    width: 24px;
    height: 24px;
    color: #00A651;
    flex-shrink: 0;
}

.it-benefit-item span {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
}

.it-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.it-highlight-box p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

/* ===========================================
   SECTIONS 4-8: SERVICES
   =========================================== */
.it-services-section {
    padding: 5rem 0 5rem;
    background: rgba(0, 0, 0, 0.02);
}

.it-services-content {
    max-width: 1280px;
    margin: 0 auto;
}

.it-services-header {
    text-align: center;
    margin-bottom: 4rem;
}

.it-service-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem 2.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
    transition: all 0.3s;
}

.it-service-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.it-service-header {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.it-service-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.it-service-card:hover .it-service-icon {
    transform: scale(1.1);
}

.it-service-icon svg {
    color: white;
}

.it-service-title-block {
    flex: 1;
}

.it-service-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.it-service-description {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
}

.it-service-sections {
    margin-bottom: 1.5rem;
}

.it-service-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.it-service-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.it-service-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.it-service-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
}

/* Keywords Section */
.it-keywords-section {
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.it-keywords-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5rem;
}

.it-keywords-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.it-keyword-tag {
    padding: 0.5rem 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
}

/* ===========================================
   SECTION 9: ENGAGEMENT MODELS
   =========================================== */
.it-engagement-section {
    padding: 5rem 0 5rem;
    background: white;
}

.it-engagement-content {
    max-width: 1280px;
    margin: 0 auto;
}

.it-engagement-header {
    text-align: center;
    margin-bottom: 3rem;
}

.it-engagement-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.it-engagement-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.it-engagement-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.it-engagement-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: transform 0.3s;
}

.it-engagement-card:hover .it-engagement-icon {
    transform: scale(1.1);
}

.it-engagement-icon svg {
    color: white;
}

.it-engagement-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.it-engagement-description {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

/* ===========================================
   SECTION 12: WHY CHOOSE INNOVATOR
   =========================================== */
.it-why-choose-section {
    padding: 5rem 0 5rem;
    background: rgba(0, 0, 0, 0.02);
}

.it-why-choose-content {
    max-width: 1280px;
    margin: 0 auto;
}

.it-why-choose-header {
    text-align: center;
    margin-bottom: 3rem;
}

.it-why-choose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.it-why-choose-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.it-why-choose-item:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.it-why-choose-item span {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */
@media (min-width: 640px) {
    .it-cta-buttons {
        flex-direction: row;
    }

    .it-service-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .it-engagement-grid,
    .it-search-terms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .it-help-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .it-challenge-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .it-industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .it-countries-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .it-case-study-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .it-case-study-image {
        height: auto;
    }

    .it-why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .it-testimonial-prev {
        left: -4rem;
    }

    .it-testimonial-next {
        right: -4rem;
    }
}

@media (min-width: 1024px) {
    .it-hero-title {
        font-size: 3rem;
    }

    .it-section-title {
        font-size: 3rem;
    }

    .it-service-title {
        font-size: 1.875rem;
    }

    .it-final-cta-title {
        font-size: 3rem;
    }

    .it-final-cta-subtitle {
        font-size: 1.5rem;
    }

    .it-industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .it-intro-section,
    .it-why-section,
    .it-services-section,
    .it-engagement-section,
    .it-industries-section,
    .it-case-studies-section,
    .it-why-choose-section,
    .it-testimonials-section,
    .it-faq-section,
    .it-final-cta {
        padding: 5rem 0;
    }

    .it-testimonial-quote {
        font-size: 1.5rem;
    }
}

/* ===========================================
   AI & MACHINE LEARNING PAGE - COMPLETE CSS
   Matching exact design from AIMachineLearning.tsx
   =========================================== */
.aiml-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .aiml-container {
        padding: 0 3rem;
    }
}

/* ===========================================
   SECTION 2: INTRODUCTION
   =========================================== */

/* Badge */
.aiml-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.aiml-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.aiml-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

.aiml-badge-green .aiml-badge-icon,
.aiml-badge-green .aiml-badge-text {
    color: #00A651;
}

.aiml-section-title {
    font-size: 2.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.aiml-section-title-center {
    font-size: 2.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    text-align: center;
}

@media (min-width: 1024px) {
    .aiml-section-title,
    .aiml-section-title-center {
        font-size: 3rem;
    }
}


/* ===========================================
   SECTIONS 3-9: SERVICE SECTIONS
   =========================================== */
.aiml-section {
    padding: 5rem 0 5rem;
}

.aiml-section-white {
    background: #fff;
}

.aiml-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .aiml-section {
        padding: 5rem 0;
    }
}

.aiml-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* Two Column Layout */
.aiml-two-col {
    display: inline-flex;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .aiml-two-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.aiml-img-col {
    position: relative;
}

.aiml-order-1 {
    order: 1;
}

.aiml-order-2 {
    order: 2;
}

@media (min-width: 1024px) {
    .aiml-order-1 {
        order: 2;
    }
    
    .aiml-order-2 {
        order: 1;
    }
}

.aiml-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.aiml-img {
    width: 100%;
    height: auto;
    min-height: 450px;
    object-fit: cover;
    display: block;
}

.aiml-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.aiml-img-decoration {
    position: absolute;
    z-index: -10;
    top: -1.5rem;
    left: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

.aiml-decoration-right {
    top: auto;
    left: auto;
    bottom: -1.5rem;
    right: -1.5rem;
}

/* Content Column */
.aiml-content-col {
    /* No specific styles needed - inherits from grid */
}

.aiml-content-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .aiml-content-title {
        font-size: 3rem;
    }
}

.aiml-content-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Service List */
.aiml-service-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.aiml-service-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.aiml-service-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.aiml-zap-icon,
.aiml-lock-icon {
    width: 20px;
    height: 20px;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* Feature List */
.aiml-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.aiml-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), transparent);
    border-radius: 0.75rem;
    padding: 1.5rem;
    border-left: 4px solid #0066CC;
}

.aiml-feature-list-green .aiml-feature-item {
    background: linear-gradient(to right, rgba(0, 166, 81, 0.05), transparent);
    border-left-color: #00A651;
}

.aiml-feature-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Highlight Boxes */
.aiml-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-top: 1.5rem;
}

.aiml-highlight-gradient {
    background: linear-gradient(135deg, #0066CC, #00A651);
    color: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.aiml-highlight-box p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.8);
}

.aiml-highlight-gradient p {
    color: white;
}

/* Keywords Box */
.aiml-keywords-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-top: 1.5rem;
}

.aiml-keywords-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 0.5rem;
}

.aiml-keywords-text {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.8);
}

/* ===========================================
   SECTION 5: MACHINE LEARNING
   =========================================== */
.aiml-ml-section {
    max-width: 1536px;
    margin: 0 auto;
}

.aiml-ml-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .aiml-ml-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.aiml-ml-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.aiml-ml-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.aiml-ml-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aiml-ml-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.aiml-ml-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.aiml-ml-image {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.aiml-ml-image .aiml-img {
    min-height: 400px;
}

/* ===========================================
   SECTION 10: WHY INNOVATOR
   =========================================== */
.aiml-why-section {
    max-width: 1536px;
    margin: 0 auto;
}

.aiml-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .aiml-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .aiml-why-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.aiml-why-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.aiml-why-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.aiml-why-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s;
}

.aiml-why-card:hover .aiml-why-icon {
    transform: scale(1.1);
}

.aiml-why-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.aiml-why-text {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.9);
}

.aiml-why-highlight {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1.5rem;
    padding: 3.5rem 2.5rem;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.aiml-why-highlight-text {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.6;
    color: white;
}

@media (min-width: 1024px) {
    .aiml-why-highlight-text {
        font-size: 1.875rem;
    }
}


/* ==========================================
   DATA SCIENCE & ANALYTICS - COMPLETE CSS
   Matching exact design from DataScienceAnalytics.tsx
   ========================================== */

.dsa-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .dsa-container {
        padding: 0 3rem;
    }
}

/* Badge */
.dsa-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.dsa-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.dsa-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

.dsa-badge-green .dsa-badge-icon,
.dsa-badge-green .dsa-badge-text {
    color: #00A651;
}

.dsa-badge-cta {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
}

.dsa-badge-cta .dsa-badge-icon,
.dsa-badge-cta .dsa-badge-text {
    color: white;
}

/* ==========================================
   SECTIONS: SERVICE SECTIONS
   ========================================== */
.dsa-section {
    padding: 5rem 0 5rem;
}

.dsa-section-white {
    background: #fff;
}

.dsa-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .dsa-section {
        padding: 5rem 0;
    }
}

.dsa-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* Two Column Layout */
.dsa-two-col {
    display: inline-flex;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .dsa-two-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.dsa-img-col {
    position: relative;
}

.dsa-order-1 {
    order: 1;
}

.dsa-order-2 {
    order: 2;
}

@media (min-width: 1024px) {
    .dsa-order-1 {
        order: 2;
    }
    
    .dsa-order-2 {
        order: 1;
    }
}

.dsa-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.dsa-img {
    width: 100%;
    height: auto;
    min-height: 450px;
    object-fit: cover;
    display: block;
}

.dsa-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.dsa-img-decoration {
    position: absolute;
    z-index: -10;
    top: -1.5rem;
    left: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

.dsa-decoration-right {
    top: auto;
    left: auto;
    bottom: -1.5rem;
    right: -1.5rem;
}

/* Content Column */
.dsa-content-col {
    /* No specific styles needed - inherits from grid */
}

.dsa-content-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .dsa-content-title {
        font-size: 3rem;
    }
}

.dsa-content-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Service List */
.dsa-service-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dsa-service-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.dsa-service-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.dsa-check-icon {
    width: 20px;
    height: 20px;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.dsa-check-icon-blue {
    color: #0066CC;
}

/* Feature List */
.dsa-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dsa-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), transparent);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    border-left: 4px solid #0066CC;
}

.dsa-feature-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Keywords Box */
.dsa-keywords-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-top: 1.5rem;
}

.dsa-keywords-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 0.5rem;
}

.dsa-keywords-text {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.8);
}

/* Applications Grid */
.dsa-applications-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.dsa-applications-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.dsa-application-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: white;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.dsa-application-item span {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.5;
}


/* ==========================================
   WEB & MOBILE ENGINEERING - COMPLETE CSS
   Matching exact design from WebMobileEngineering.tsx
   ========================================== */
/* Container */
.wme-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .wme-container {
        padding: 0 3rem;
    }
}

/* ==========================================
   INTRODUCTION SECTION
   ========================================== */

/* Badge */
.wme-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.wme-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.wme-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

.wme-badge-green .wme-badge-icon,
.wme-badge-green .wme-badge-text {
    color: #00A651;
}


/* ==========================================
   SECTIONS
   ========================================== */
.wme-section {
    padding: 5rem 0 5rem;
}

.wme-section-white {
    background: #fff;
}

.wme-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .wme-section {
        padding: 5rem 0;
    }
}

.wme-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* Enterprise Engineering Section */
.wme-enterprise-section {
    max-width: 1536px;
    margin: 0 auto;
}

.wme-enterprise-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 2rem;
}

.wme-enterprise-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .wme-enterprise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wme-enterprise-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.wme-enterprise-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.wme-enterprise-highlight {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.wme-enterprise-highlight p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
}

/* Two Column Layout */
.wme-two-col {
    display: inline-flex;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .wme-two-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.wme-img-col {
    position: relative;
}

.wme-order-1 {
    order: 1;
}

.wme-order-2 {
    order: 2;
}

@media (min-width: 1024px) {
    .wme-order-1 {
        order: 2;
    }
    
    .wme-order-2 {
        order: 1;
    }
}

.wme-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.wme-img {
    width: 100%;
    height: auto;
    min-height: 450px;
    object-fit: cover;
    display: block;
}

.wme-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.wme-img-decoration {
    position: absolute;
    z-index: -10;
    top: -1.5rem;
    left: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

.wme-decoration-right {
    top: auto;
    left: auto;
    bottom: -1.5rem;
    right: -1.5rem;
}

/* Content Column */
.wme-content-col {
    /* Inherits from grid */
}

.wme-content-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .wme-content-title {
        font-size: 3rem;
    }
}

.wme-content-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Service List */
.wme-service-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wme-service-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.wme-service-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Feature List */
.wme-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wme-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), transparent);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    border-left: 4px solid #0066CC;
}

.wme-feature-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.wme-feature-list-green .wme-feature-item {
    background: linear-gradient(to right, rgba(0, 166, 81, 0.05), transparent);
    border-left-color: #00A651;
}

/* Keywords Box */
.wme-keywords-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-top: 1.5rem;
}

.wme-keywords-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 0.5rem;
}

.wme-keywords-text {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.8);
}

/* Gradient Highlight */
.wme-gradient-highlight {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 1.5rem;
    color: white;
    margin-top: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.wme-gradient-highlight p {
    font-size: 1rem;
    line-height: 1.7;
}

/* Full-Stack Section */
.wme-fullstack-section {
    max-width: 1536px;
    margin: 0 auto;
}

.wme-fullstack-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 3rem;
}

.wme-tech-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .wme-tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.wme-tech-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.wme-tech-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.wme-tech-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wme-tech-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.wme-tech-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.wme-fullstack-keywords {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

/* Mobile Section */
.wme-mobile-section {
    max-width: 1536px;
    margin: 0 auto;
}

.wme-mobile-subsection {
    margin-bottom: 4rem;
}

.wme-subsection-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .wme-subsection-title {
        font-size: 1.875rem;
    }
}

.wme-enterprise-mobility {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.wme-enterprise-mobility-title {
    font-size: 1.875rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
}

.wme-enterprise-mobility-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    text-align: center;
    margin-bottom: 2rem;
}

.wme-enterprise-mobility-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .wme-enterprise-mobility-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wme-mobility-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.wme-mobility-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Offshore Section */
.wme-offshore-section {
    max-width: 1536px;
    margin: 0 auto;
}

.wme-offshore-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 2rem;
}

.wme-offshore-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .wme-offshore-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wme-offshore-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.wme-offshore-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.wme-offshore-highlight {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.wme-offshore-highlight p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
}

/* ==========================================
   ENTERPRISE PLATFORMS - COMPLETE CSS
   Salesforce, SAP & SharePoint Consulting
   ========================================== */

/* Container */
.ep-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .ep-container {
        padding: 0 3rem;
    }
}

/* Badge */
.ep-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.ep-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.ep-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

.ep-badge-green .ep-badge-icon,
.ep-badge-green .ep-badge-text {
    color: #00A651;
}

.ep-badge-cta {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
}

.ep-badge-cta .ep-badge-icon,
.ep-badge-cta .ep-badge-text {
    color: white;
}

/* ==========================================
   SECTIONS
   ========================================== */
.ep-section {
    padding: 5rem 0 5rem;
}

.ep-section-white {
    background: #fff;
}

.ep-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .ep-section {
        padding: 5rem 0;
    }
}

.ep-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* Strategy Section */
.ep-strategy-section {
    max-width: 1280px;
    margin: 0 auto;
}

.ep-strategy-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 2rem;
}

.ep-consulting-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .ep-consulting-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ep-consulting-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ep-consulting-item p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Keywords Box */
.ep-keywords-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-top: 1.5rem;
    text-align: center;
}

.ep-keywords-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 0.5rem;
}

.ep-keywords-text {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.8);
}

/* Two Column Layout */
.ep-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .ep-two-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.ep-img-col {
    position: relative;
}

.ep-order-1 {
    order: 1;
}

.ep-order-2 {
    order: 2;
}

@media (min-width: 1024px) {
    .ep-order-1 {
        order: 2;
    }
    
    .ep-order-2 {
        order: 1;
    }
}

.ep-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ep-img {
    width: 100%;
    height: auto;
    min-height: 450px;
    object-fit: cover;
    display: block;
}

.ep-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.ep-img-decoration {
    position: absolute;
    z-index: -10;
    top: -1.5rem;
    left: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

.ep-decoration-right {
    top: auto;
    left: auto;
    bottom: -1.5rem;
    right: -1.5rem;
}

/* Content Column */
.ep-content-col {
    /* Inherits from grid */
}

.ep-content-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .ep-content-title {
        font-size: 3rem;
    }
}

.ep-content-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Service List */
.ep-service-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ep-service-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), transparent);
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-left: 4px solid #0066CC;
}

.ep-service-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Feature List */
.ep-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ep-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ep-feature-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* DevOps Section */
.ep-devops-section {
    max-width: 1280px;
    margin: 0 auto;
}

.ep-devops-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 2rem;
}

.ep-devops-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ep-devops-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ep-devops-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ep-devops-item p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* SAP Modernization Section */
.ep-sap-modern-section {
    max-width: 1280px;
    margin: 0 auto;
}

.ep-sap-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 2rem;
}

.ep-sap-modern-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .ep-sap-modern-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ep-sap-modern-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ep-sap-modern-item p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* SAP Resources */
.ep-sap-resources {
    text-align: center;
    margin-bottom: 2rem;
}

.ep-sap-resources-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.ep-sap-resources-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 1.5rem;
}

.ep-sap-resources-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ep-sap-resources-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ep-sap-resource-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ep-sap-resource-item p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Workflow Section */
.ep-workflow-section {
    max-width: 1280px;
    margin: 0 auto;
}

.ep-workflow-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 2rem;
}

.ep-workflow-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ep-workflow-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ep-workflow-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ep-workflow-item p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Integration Section */
.ep-integration-section {
    max-width: 1280px;
    margin: 0 auto;
}

.ep-integration-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 2rem;
}

.ep-integration-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .ep-integration-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ep-integration-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ep-integration-item p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Modernization Section */
.ep-modernization-section {
    max-width: 1280px;
    margin: 0 auto;
}

.ep-modernization-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 2rem;
}

.ep-modernization-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .ep-modernization-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ep-modernization-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ep-modernization-item p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* Methodology Section */
.ep-methodology-section {
    max-width: 1280px;
    margin: 0 auto;
}

.ep-methodology-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 3rem;
}

.ep-methodology-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .ep-methodology-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ep-methodology-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ep-methodology-card {
    background: white;
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s;
}

.ep-methodology-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ep-methodology-number {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 auto 1rem;
    transition: transform 0.3s;
}

.ep-methodology-card:hover .ep-methodology-number {
    transform: scale(1.1);
}

.ep-methodology-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.9);
}

.ep-methodology-highlight {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.ep-methodology-highlight p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
}

/* Offshore Section */
.ep-offshore-section {
    max-width: 1280px;
    margin: 0 auto;
}

.ep-offshore-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 768px;
    margin: 0 auto 2rem;
}

.ep-offshore-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ep-offshore-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ep-offshore-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ep-offshore-item p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

/* ==========================================
   RESEARCH & INNOVATION - COMPLETE CSS
   AI Research & Innovation Lab
   ========================================== */

/* Container */
.ri-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .ri-container {
        padding: 0 3rem;
    }
}

/* ==========================================
   INTRODUCTION SECTION
   ========================================== */
.ri-intro {
    padding: 4rem 0 6rem;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.ri-intro-content {
    max-width: 1280px;
    margin: 0 auto;
}

/* Badge */
.ri-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.ri-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.ri-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

.ri-badge-cta {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ri-badge-cta .ri-badge-icon,
.ri-badge-cta .ri-badge-text {
    color: white;
}

.ri-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.ri-section-title-center {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 2rem;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .ri-section-title-center {
        font-size: 3rem;
    }
}

.ri-intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .ri-intro-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ri-intro-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ri-intro-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.ri-intro-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.ri-intro-text {
    /* Grid column */
}

.ri-intro-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.ri-initiatives-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.ri-initiatives-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.ri-initiatives-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ri-initiative-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ri-initiative-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

.ri-check-icon {
    width: 20px;
    height: 20px;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ri-check-icon-blue {
    color: #0066CC;
}

.ri-serving-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
}

/* ==========================================
   SECTIONS
   ========================================== */
.ri-section {
    padding: 4rem 0 6rem;
}

.ri-section-white {
    background: #fff;
}

.ri-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .ri-section {
        padding: 6rem 0;
    }
}

/* Research Section */
.ri-research-section {
    max-width: 1280px;
    margin: 0 auto;
}

.ri-research-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .ri-research-card {
        padding: 3rem;
    }
}

.ri-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .ri-card-title {
        font-size: 1.875rem;
    }
}

.ri-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .ri-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ri-card-content {
    /* Grid column */
}

.ri-card-desc {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.ri-bullet-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.ri-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ri-bullet-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #0066CC;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

.ri-bullet-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

.ri-card-img-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ri-card-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

@media (min-width: 1024px) {
    .ri-card-img {
        height: 300px;
    }
}

.ri-insight-box {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.05), rgba(6, 182, 212, 0.05));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(59, 130, 246, 0.1);
    margin-bottom: 1.5rem;
}

.ri-insight-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.ri-insight-text:last-child {
    margin-bottom: 0;
}

.ri-card-highlight {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.ri-card-highlight-center {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    text-align: center;
}

/* Features Grid */
.ri-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ri-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ri-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 0.75rem;
    padding: 1rem;
}

.ri-feature-card span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

.ri-approach-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.ri-approach-box p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
}

/* Impact Grid */
.ri-impact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .ri-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ri-impact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ri-impact-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

.ri-shift-highlight {
    font-size: 1.125rem;
    color: #00A651;
    font-weight: 600;
    text-align: center;
    line-height: 1.7;
}

/* Enables Box */
.ri-enables-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.ri-enables-title {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.ri-enables-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ri-enables-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ri-enables-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

.ri-confidential-note {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.7;
    text-align: center;
}

/* ==========================================
   INNOVATION SECTION
   ========================================== */
.ri-innovation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .ri-innovation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ri-innovation-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .ri-innovation-card {
        padding: 2.5rem;
    }
}

.ri-innovation-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .ri-innovation-title {
        font-size: 1.875rem;
    }
}

.ri-innovation-desc {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.ri-innovation-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ri-innovation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ri-innovation-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

.ri-innovation-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.ri-innovation-footer p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
}

.ri-proprietary-note {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.05), rgba(6, 182, 212, 0.05));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(59, 130, 246, 0.1);     margin-top: 2rem;
}

.ri-proprietary-note p {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.7;
}

.ri-governance-highlight {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05); margin-top: 2rem;
}

.ri-governance-highlight p {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.7;
}

/* ==========================================
   FINAL CTA
   ========================================== */
.ri-cta {
    position: relative;
    padding: 4rem 0 5rem;
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    overflow: hidden;
}

.ri-cta-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

.ri-cta-box {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
}

.ri-cta-box-1 {
    top: 2rem;
    right: 2rem;
    width: 6rem;
    height: 6rem;
    transform: rotate(12deg);
}

.ri-cta-box-2 {
    bottom: 2rem;
    left: 2rem;
    width: 8rem;
    height: 8rem;
    transform: rotate(-12deg);
}

@media (min-width: 1024px) {
    .ri-cta {
        padding: 5rem 0;
    }
}

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

.ri-cta-title {
    font-size: 1.875rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .ri-cta-title {
        font-size: 3rem;
    }
}

.ri-cta-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.ri-cta-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 768px;
    margin: 0 auto 2rem;
    text-align: left;
}

@media (min-width: 768px) {
    .ri-cta-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ri-cta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ri-cta-item span {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.ri-cta-item .ri-check-icon {
    color: white;
    margin-top: 0.25rem;
}

.ri-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

@media (min-width: 640px) {
    .ri-cta-buttons {
        flex-direction: row;
    }
}

.ri-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.ri-btn-white-cta {
    background: white;
    color: #0066CC;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ri-btn-white-cta:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    transform: scale(1.05);
}

.ri-btn-outline-cta {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.ri-btn-outline-cta:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================
   ABOUT INNOVATOR - COMPLETE CSS
   Intelligent Business Systems
   ========================================== */

/* Container */
.ai-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .ai-container {
        padding: 0 3rem;
    }
}


/* ==========================================
   SECTIONS
   ========================================== */
.ai-section {
    padding: 5rem 0 5rem;
}

.ai-section-white {
    background: #fff;
}

.ai-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .ai-section {
        padding: 5rem 0;
    }
}

/* Section Headers */
.ai-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.ai-section-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.ai-section-title-center {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-align: center;
}

.ai-section-subtitle {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.ai-section-subtitle-large {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
}

.ai-section-subtitle-xlarge {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .ai-section-title,
    .ai-section-title-center {
        font-size: 3rem;
    }
    
    .ai-section-subtitle-large {
        font-size: 1.25rem;
    }
    
    .ai-section-subtitle-xlarge {
        font-size: 1.5rem;
    }
}

/* Badge */
.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.ai-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.ai-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

.ai-check-icon {
    width: 24px;
    height: 24px;
    color: #00A651;
    flex-shrink: 0;
}

.ai-check-icon-large {
    width: 28px;
    height: 28px;
    color: #00A651;
    flex-shrink: 0;
}

.ai-highlight-blue {
    color: #0066CC;
    font-weight: 600;
}

.ai-highlight-blue-strong {
    color: #0066CC;
    font-weight: 700;
}

/* ==========================================
   INTRODUCTION SECTION - WHO WE ARE
   ========================================== */
.ai-intro {
    padding: 5rem 0 5rem;
    background: #fff;
}

@media (min-width: 1024px) {
    .ai-intro {
        padding: 5rem 0;
    }
}

.ai-intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .ai-intro-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.ai-intro-text {
    /* Grid column */
}

.ai-intro-desc {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ai-intro-desc p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .ai-intro-desc p {
        font-size: 1.25rem;
    }
}

.ai-intro-img-container {
    position: relative;
}

.ai-intro-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ai-intro-img {
    width: 100%;
    min-height: 400px;
    object-fit: cover;
    display: block;
}

.ai-intro-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
}

.ai-intro-img-decoration {
    position: absolute;
    z-index: -10;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

/* ==========================================
   OUR BELIEF SECTION
   ========================================== */
.ai-belief-content {
    max-width: 1280px;
    margin: 0 auto;
}

.ai-belief-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .ai-belief-card {
        padding: 4rem;
    }
}

.ai-belief-main-text {
    font-size: 1.5rem;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .ai-belief-main-text {
        font-size: 1.875rem;
    }
}

.ai-belief-icons-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .ai-belief-icons-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ai-belief-icon-item {
    text-align: center;
}

.ai-belief-icon-box {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ai-belief-icon-box svg {
    color: white;
}

.ai-belief-icon-item p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

.ai-belief-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ai-belief-highlight-box p {
    font-size: 1.25rem;
    line-height: 1.8;
    text-align: center;
}

@media (min-width: 1024px) {
    .ai-belief-highlight-box p {
        font-size: 1.5rem;
    }
}

/* ==========================================
   WHAT WE DO SECTION
   ========================================== */
.ai-what-we-do-grid {
    display: inline-flex !important;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .ai-what-we-do-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.ai-what-img-container {
    position: relative;
    order: 2;
}

@media (min-width: 1024px) {
    .ai-what-img-container {
        order: 1;
    }
}

.ai-what-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ai-what-img {
    width: 100%;
    min-height: 450px;
    object-fit: cover;
    display: block;
}

.ai-what-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.ai-what-img-decoration {
    position: absolute;
    z-index: -10;
    top: -1.5rem;
    left: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

.ai-what-content {
    order: 1;
}

@media (min-width: 1024px) {
    .ai-what-content {
        order: 2;
    }
}

.ai-what-intro {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.ai-what-subtitle {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.ai-capabilities-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.ai-capability-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), transparent);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    border-left: 4px solid #0066CC;
}

.ai-capability-item .ai-check-icon {
    margin-top: 0.25rem;
}

.ai-capability-item p {
    font-size: 1.125rem;
    line-height: 1.7;
}

.ai-what-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-top: 2rem;
}

.ai-what-highlight-box p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7; text-align: center;
}

/* ==========================================
   HOW WE EVOLVED SECTION
   ========================================== */
.ai-evolution-content {
    max-width: 1280px;
    margin: 0 auto;
}

.ai-evolution-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .ai-evolution-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.ai-evolution-timeline {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ai-evolution-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.ai-year-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-year-badge span {
    font-size: 1.125rem;
    color: white;
    font-weight: 700;
}

.ai-evolution-card p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.ai-evolution-insight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ai-insight-text-lg {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.8;
}

.ai-insight-text-xl {
    font-size: 1.5rem;
    text-align: center;
    color: #0066CC;
    font-weight: 600;
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .ai-insight-text-lg {
        font-size: 1.5rem;
    }
    
    .ai-insight-text-xl {
        font-size: 1.875rem;
    }
}

.ai-evolution-quote {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ai-evolution-quote p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
    font-style: italic;
    line-height: 1.8;
}

/* Current Work */
.ai-evolution-current {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ai-current-work-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ai-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.ai-current-work-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-work-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    transition: all 0.3s;
}

.ai-work-item:hover {
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
}

.ai-work-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-work-icon svg {
    color: white;
}

.ai-work-item p {
    font-size: 1rem;
    padding-top: 0.5rem;
    line-height: 1.7;
}

.ai-evolution-gradient-box {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1.5rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ai-evolution-gradient-box p {
    font-size: 1.125rem;
    color: white;
    line-height: 1.8;
}

/* ==========================================
   HOW WE THINK ABOUT TECHNOLOGY
   ========================================== */
.ai-tech-content {
    max-width: 1280px;
    margin: 0 auto;
}

.ai-tech-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .ai-tech-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.ai-tech-approach {
    /* Grid column */
}

.ai-tech-intro {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.ai-tech-points {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.ai-tech-point {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ai-tech-number {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
}

.ai-tech-point p {
    font-size: 1.125rem;
    line-height: 1.7;
}

.ai-tech-gradient-box {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    color: white;
    margin-top: 2rem;
}

.ai-tech-gradient-text-1 {
    font-size: 1.25rem;
    line-height: 1.8;
}

.ai-tech-gradient-text-2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
}

.ai-tech-img-container {
    position: relative;
}

@media (min-width: 1024px) {
    .ai-tech-img-container {
        margin-top: 0rem;
    }
}

.ai-tech-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ai-tech-img {
    width: 100%;
    min-height: 400px;
    object-fit: cover;
    display: block;
}

.ai-tech-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.ai-tech-img-decoration {
    position: absolute;
    z-index: -10;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

/* ==========================================
   WHY INNOVATOR
   ========================================== */
.ai-why-content {
    max-width: 1280px;
    margin: 0 auto;
}

.ai-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .ai-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ai-why-reasons {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ai-why-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: box-shadow 0.3s;
}

.ai-why-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ai-why-card p {
    font-size: 1.125rem;
    line-height: 1.7;
}

.ai-why-quote-container {
    position: relative;
}

.ai-why-quote-card {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1.5rem;
    padding: 3rem;
    text-align: center;
    color: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ai-why-award-icon {
    margin: 0 auto 1.5rem;
}

.ai-why-award-icon svg {
    color: rgba(255, 255, 255, 0.9);
}

.ai-why-quote-text-1 {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 600;
    margin-bottom: 1rem;
}

.ai-why-quote-text-2 {
    font-size: 1.875rem;
    line-height: 1.4;
    font-weight: 700;
}

@media (min-width: 1024px) {
    .ai-why-quote-text-1 {
        font-size: 1.875rem;
    }
    
    .ai-why-quote-text-2 {
        font-size: 2.25rem;
    }
}

.ai-why-quote-decoration {
    position: absolute;
    z-index: -10;
    bottom: -1.5rem;
    left: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
    border-radius: 1.5rem;
}

/* ==========================================
   LOOKING AHEAD
   ========================================== */
.ai-future-content {
    max-width: 1280px;
    margin: 0 auto;
}

.ai-future-section {
    margin-bottom: 3rem;
}

.ai-future-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .ai-future-subtitle {
        font-size: 1.875rem;
    }
}

.ai-future-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ai-future-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ai-future-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s;
}

.ai-future-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ai-future-icon-box {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.ai-future-card:hover .ai-future-icon-box {
    transform: scale(1.1);
}

.ai-future-icon-box svg {
    color: white;
}

.ai-future-card p {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.6;
}

.ai-future-goal-box {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1.5rem;
    padding: 2.5rem;
    text-align: center;
    color: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (min-width: 1024px) {
    .ai-future-goal-box {
        padding: 3.5rem;
    }
}

.ai-future-goal-icon {
    margin: 0 auto 1.5rem;
}

.ai-future-goal-icon svg {
    color: rgba(255, 255, 255, 0.9);
}

.ai-future-goal-text-1 {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.ai-future-goal-text-2 {
    font-size: 1.875rem;
    line-height: 1.4;
    font-weight: 700;
}

@media (min-width: 1024px) {
    .ai-future-goal-text-1 {
        font-size: 1.875rem;
    }
    
    .ai-future-goal-text-2 {
        font-size: 2.25rem;
    }
}

/* ==========================================
   SUMMARY SECTION
   ========================================== */
.ai-summary-content {
    max-width: 1280px;
    margin: 0 auto;
}

.ai-summary-card {
    background: white;
    border-radius: 1.5rem;
    padding: 3rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .ai-summary-card {
        padding: 4rem;
    }
}

.ai-summary-text {
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.5;
    font-weight: 400;
}

@media (min-width: 1024px) {
    .ai-summary-text {
        font-size: 1.875rem;
    }
}

/* ==========================================
   VISION & DIRECTION - COMPLETE CSS
   Simplifying Business Through Intelligent Systems
   ========================================== */

/* Container */
.vd-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .vd-container {
        padding: 0 3rem;
    }
}

/* ==========================================
   SECTIONS
   ========================================== */
.vd-section {
    padding: 5rem 0 5rem;
}

.vd-section-white {
    background: #fff;
}

.vd-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .vd-section {
        padding: 5rem 0;
    }
}

/* Section Headers */
.vd-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.vd-section-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.vd-section-title-center {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-align: center;
}

.vd-section-subtitle {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .vd-section-title,
    .vd-section-title-center {
        font-size: 3rem;
    }
}

/* Badge */
.vd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.vd-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.vd-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

.vd-intro-text {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.vd-check-icon {
    width: 24px;
    height: 24px;
    color: #00A651;
    flex-shrink: 0;
}

.vd-check-icon-large {
    width: 28px;
    height: 28px;
    color: #00A651;
    flex-shrink: 0;
}

.vd-highlight-blue-strong {
    color: #0066CC;
    font-weight: 700;
}

/* ==========================================
   OUR VISION SECTION
   ========================================== */
.vd-vision-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .vd-vision-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.vd-vision-content {
    /* Grid column */
}

.vd-vision-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.vd-vision-paragraphs p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.vd-vision-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.vd-target-icon {
    color: #0066CC;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.vd-vision-highlight-box p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8); text-align: center;
    line-height: 1.7;
}

.vd-vision-img-container {
    position: relative;
}

.vd-vision-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.vd-vision-img {
    width: 100%;
    min-height: 450px;
    object-fit: cover;
    display: block;
}

.vd-vision-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.vd-vision-img-decoration {
    position: absolute;
    z-index: -10;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

/* ==========================================
   OUR DIRECTION SECTION
   ========================================== */
.vd-direction-content {
    max-width: 1280px;
    margin: 0 auto;
}

.vd-direction-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .vd-direction-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vd-direction-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.vd-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.vd-card-icon-box {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vd-card-icon-box svg {
    color: white;
}

.vd-card-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

.vd-direction-card p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.vd-direction-statement-box {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1.5rem;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (min-width: 1024px) {
    .vd-direction-statement-box {
        padding: 3rem;
    }
}

.vd-direction-statement-box p {
    font-size: 1.5rem;
    color: white;
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .vd-direction-statement-box p {
        font-size: 1.875rem;
    }
}

/* ==========================================
   FROM SERVICES TO SYSTEMS SECTION
   ========================================== */
.vd-services-grid {
    display: inline-flex;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .vd-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.vd-services-img-container {
    position: relative;
    order: 2;
}

@media (min-width: 1024px) {
    .vd-services-img-container {
        order: 1;
    }
}

.vd-services-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.vd-services-img {
    width: 100%;
    min-height: 450px;
    object-fit: cover;
    display: block;
}

.vd-services-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.vd-services-img-decoration {
    position: absolute;
    z-index: -10;
    top: -1.5rem;
    left: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

.vd-services-content {
    order: 1;
}

@media (min-width: 1024px) {
    .vd-services-content {
        order: 2;
    }
}

.vd-services-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.vd-services-paragraphs p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.vd-approach-shift-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.vd-approach-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), transparent);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    border-left: 4px solid #0066CC;
}

.vd-approach-item .vd-check-icon {
    margin-top: 0.25rem;
}

.vd-approach-item p {
    font-size: 1.125rem;
    line-height: 1.7;
}

.vd-services-quote-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.vd-services-quote-box p {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    font-weight: 600;
    text-align: center;
}

/* ==========================================
   TECHNOLOGY DIRECTION SECTION
   ========================================== */
.vd-tech-content {
    max-width: 1280px;
    margin: 0 auto;
}

.vd-tech-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .vd-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vd-tech-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.vd-tech-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.vd-tech-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.vd-tech-card:hover .vd-tech-icon-box {
    transform: scale(1.1);
}

.vd-tech-icon-box svg {
    color: white;
}

.vd-tech-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.vd-tech-card p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
}

.vd-tech-ai-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .vd-tech-ai-box {
        padding: 3rem;
    }
}

.vd-tech-ai-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vd-tech-ai-icon svg {
    color: white;
}

.vd-tech-ai-text p {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
}

@media (min-width: 1024px) {
    .vd-tech-ai-text p {
        font-size: 1.5rem;
    }
}

/* ==========================================
   BUSINESS DIRECTION SECTION
   ========================================== */
.vd-business-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .vd-business-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.vd-business-content {
    /* Grid column */
}

.vd-business-focus-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.vd-business-focus-item {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.vd-business-focus-item p {
    font-size: 1.125rem;
    line-height: 1.7;
}

.vd-business-goal-box {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center; margin-top: 50px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.vd-business-goal-box p {
    font-size: 1.25rem;
    color: white;
    line-height: 1.7;
    font-weight: 600;
}

.vd-business-img-container {
    position: relative;
}

.vd-business-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.vd-business-img {
    width: 100%;
    min-height: 500px;
    object-fit: cover;
    display: block;
}

.vd-business-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.vd-business-img-decoration {
    position: absolute;
    z-index: -10;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

/* ==========================================
   LOOKING AHEAD SECTION
   ========================================== */
.vd-future-content {
    max-width: 1280px;
    margin: 0 auto;
}

.vd-future-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .vd-future-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vd-future-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s;
}

.vd-future-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.vd-future-icon-box {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.vd-future-card:hover .vd-future-icon-box {
    transform: scale(1.1);
}

.vd-future-icon-box svg {
    color: white;
}

.vd-future-card p {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.6;
}

.vd-future-goal-box {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1.5rem;
    padding: 2.5rem;
    text-align: center;
    color: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (min-width: 1024px) {
    .vd-future-goal-box {
        padding: 3.5rem;
    }
}

.vd-future-goal-icon {
    margin: 0 auto 1.5rem;
}

.vd-future-goal-icon svg {
    color: rgba(255, 255, 255, 0.9);
}

.vd-goal-text-1 {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.vd-goal-text-2 {
    font-size: 1.875rem;
    line-height: 1.4;
    font-weight: 700;
}

@media (min-width: 1024px) {
    .vd-goal-text-1 {
        font-size: 1.875rem;
    }
    
    .vd-goal-text-2 {
        font-size: 2.25rem;
    }
}

/* ==========================================
   IN ONE STATEMENT SECTION
   ========================================== */
.vd-statement-content {
    max-width: 1280px;
    margin: 0 auto;
}

.vd-statement-card {
    background: white;
    border-radius: 1.5rem;
    padding: 3rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .vd-statement-card {
        padding: 4rem;
    }
}

.vd-statement-card p {
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.5;
    font-weight: 400;
}

@media (min-width: 1024px) {
    .vd-statement-card p {
        font-size: 1.875rem;
    }
}

/* ==========================================
   LEADERSHIP - COMPLETE CSS
   From Gujarat to Global: Leadership Grounded in Simplicity
   ========================================== */
/* Container */
.ld-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .ld-container {
        padding: 0 5cqmax;
    }
}

/* ==========================================
   SECTIONS
   ========================================== */
.ld-section {
    padding: 5rem 0 5rem;
}

.ld-section-white {
    background: #fff;
}

.ld-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

.ld-section-gradient {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
}

@media (min-width: 1024px) {
    .ld-section {
        padding: 5rem 0;
    }
}

/* Section Headers */
.ld-section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.ld-section-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.ld-section-title-center {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-align: center;
}

.ld-section-subtitle {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .ld-section-title,
    .ld-section-title-center {
        font-size: 3rem;
    }
}

/* Badges */
.ld-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.ld-badge-blue {
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
}

.ld-badge-green {
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
}

.ld-badge-white {
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ld-badge-icon {
    width: 20px;
    height: 20px;
}

.ld-badge-blue .ld-badge-icon {
    color: #0066CC;
}

.ld-badge-green .ld-badge-icon {
    color: #00A651;
}

.ld-badge-white .ld-badge-icon {
    color: #0066CC;
}

.ld-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
}

.ld-badge-blue .ld-badge-text {
    color: #0066CC;
}

.ld-badge-green .ld-badge-text {
    color: #00A651;
}

.ld-badge-white .ld-badge-text {
    color: #0066CC;
}

.ld-intro-text {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.ld-check-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.ld-check-green {
    color: #00A651;
}

.ld-check-blue {
    color: #0066CC;
}

/* ==========================================
   A JOURNEY THAT SHAPED A VISION SECTION
   ========================================== */
.ld-journey-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .ld-journey-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.ld-journey-content {
    /* Grid column */
}

.ld-journey-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ld-journey-paragraphs p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.ld-journey-quote {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

.ld-journey-img-container {
    position: relative;
}

.ld-journey-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ld-journey-img {
    width: 100%;
    min-height: 500px;
    object-fit: cover;
    display: block;
}

.ld-journey-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
}

.ld-journey-img-decoration {
    position: absolute;
    z-index: -10;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

/* ==========================================
   BUILDING STEP BY STEP SECTION
   ========================================== */
.ld-building-grid {
    display: inline-flex;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .ld-building-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.ld-building-img-container {
    position: relative;
    order: 2;
}

@media (min-width: 1024px) {
    .ld-building-img-container {
        order: 1;
    }
}

.ld-building-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ld-building-img {
    width: 100%;
    min-height: 500px;
    object-fit: cover;
    display: block;
}

.ld-building-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
}

.ld-building-img-decoration {
    position: absolute;
    z-index: -10;
    top: -1.5rem;
    left: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

.ld-building-content {
    order: 1;
}

@media (min-width: 1024px) {
    .ld-building-content {
        order: 2;
    }
}

.ld-building-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ld-building-paragraphs > p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.ld-building-insight-box {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ld-insight-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.ld-insight-points {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ld-insight-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ld-insight-item .ld-check-icon {
    margin-top: 0.25rem;
}

.ld-insight-item p {
    font-size: 1rem;
    line-height: 1.7;
}

.ld-building-conclusion {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

/* ==========================================
   LEADERSHIP PHILOSOPHY SECTION
   ========================================== */
.ld-philosophy-content {
    max-width: 1280px;
    margin: 0 auto;
}

.ld-philosophy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .ld-philosophy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ld-philosophy-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s;
}

.ld-philosophy-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ld-philosophy-icon-box {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.ld-philosophy-card:hover .ld-philosophy-icon-box {
    transform: scale(1.1);
}

.ld-philosophy-icon-box svg {
    color: white;
}

.ld-philosophy-card p {
    font-size: 1.25rem;
    font-weight: 600;
    padding-top: 0.5rem;
    line-height: 1.6;
}

.ld-philosophy-emphasis-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ld-philosophy-emphasis-box p {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.8);
    text-align: center;
    line-height: 1.8;
}

/* ==========================================
   A BUSINESS-FIRST MINDSET SECTION
   ========================================== */
.ld-business-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .ld-business-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.ld-business-content {
    /* Grid column */
}

.ld-business-focus {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ld-focus-title {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
    line-height: 1.7;
}

.ld-focus-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ld-focus-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ld-focus-number {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
}

.ld-focus-item p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    padding-top: 0.125rem;
    line-height: 1.6;
}

.ld-focus-conclusion {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
    line-height: 1.7;
}

.ld-business-img-container {
    position: relative;
}

.ld-business-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ld-business-img {
    width: 100%;
    min-height: 500px;
    object-fit: cover;
    display: block;
}

.ld-business-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
}

.ld-business-img-decoration {
    position: absolute;
    z-index: -10;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

/* ==========================================
   BUILDING PEOPLE, NOT JUST PLATFORMS SECTION
   ========================================== */
.ld-people-content {
    max-width: 1280px;
    margin: 0 auto;
}

.ld-people-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .ld-people-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ld-people-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ld-people-text p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.ld-culture-values-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem; display: flex;
}

.ld-culture-value {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ld-award-icon {
    width: 24px;
    height: 24px;
    color: #00A651;
}

.ld-culture-value p {
    font-size: 1.125rem;
    font-weight: 600;
}

.ld-people-quote-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.ld-people-quote-box p {
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
    line-height: 1.7;
}

/* ==========================================
   LEADING INTO THE FUTURE SECTION
   ========================================== */
.ld-future-grid {
    display: inline-flex;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .ld-future-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.ld-future-img-container {
    position: relative;
    order: 2;
}

@media (min-width: 1024px) {
    .ld-future-img-container {
        order: 1;
    }
}

.ld-future-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ld-future-img {
    width: 100%;
    min-height: 500px;
    object-fit: cover;
    display: block;
}

.ld-future-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
}

.ld-future-img-decoration {
    position: absolute;
    z-index: -10;
    top: -1.5rem;
    left: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

.ld-future-content {
    order: 1;
}

@media (min-width: 1024px) {
    .ld-future-content {
        order: 2;
    }
}

.ld-future-vision {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ld-future-innovation-box {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ld-innovation-bold {
    font-weight: 600;
    font-size: 1rem;
}

.ld-future-innovation-box p {
    font-size: 1rem;
}

.ld-future-direction-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ld-zap-icon {
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ld-future-direction-box p {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.7;
}

/* ==========================================
   IN REFLECTION SECTION
   ========================================== */
.ld-reflection-content {
    max-width: 1280px;
    margin: 0 auto;
}

.ld-reflection-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ld-reflection-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 1024px) {
    .ld-reflection-box {
        padding: 2.5rem;
    }
}

.ld-reflection-statement {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8; text-align: center;
}

@media (min-width: 1024px) {
    .ld-reflection-statement {
        font-size: 1.5rem;
    }
}

.ld-reflection-journey {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8; text-align: center;
}

.ld-reflection-belief-box {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center; margin-top: 20px;
}

.ld-reflection-belief-box p {
    font-size: 1.5rem;
    color: white;
    font-weight: 600;
    line-height: 1.4;
}

@media (min-width: 1024px) {
    .ld-reflection-belief-box p {
        font-size: 1.2rem;
    }
}

.ld-reflection-values {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ld-reflection-values {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ld-reflection-value-card {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.ld-reflection-value-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
}

.ld-value-icon-box {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: transform 0.3s;
}

.ld-reflection-value-card:hover .ld-value-icon-box {
    transform: scale(1.1);
}

.ld-value-icon-box svg {
    color: white;
}

.ld-reflection-value-card p {
    font-size: 1.25rem;
    font-weight: 600;
}

/* ==========================================
   CLIENTS - COMPLETE CSS
   Partners Who Trust Us for Intelligent Systems
   ========================================== */
/* Container */
.cl-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .cl-container {
        padding: 0 3rem;
    }
}

/* ==========================================
   SECTIONS
   ========================================== */
.cl-section {
    padding: 5rem 0 5rem;
}

.cl-section-white {
    background: #fff;
}

.cl-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

.cl-section-gradient {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
}

@media (min-width: 1024px) {
    .cl-section {
        padding: 5rem 0;
    }
}

/* Section Headers */
.cl-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.cl-section-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.cl-section-title-center {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-align: center;
}

.cl-section-subtitle {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.cl-section-subtitle-max {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    .cl-section-title,
    .cl-section-title-center {
        font-size: 3rem;
    }
}

/* Badges */
.cl-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.cl-badge-blue {
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
}

.cl-badge-green {
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
}

.cl-badge-white {
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.cl-badge-icon {
    width: 20px;
    height: 20px;
}

.cl-badge-blue .cl-badge-icon {
    color: #0066CC;
}

.cl-badge-green .cl-badge-icon {
    color: #00A651;
}

.cl-badge-white .cl-badge-icon {
    color: #0066CC;
}

.cl-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
}

.cl-badge-blue .cl-badge-text {
    color: #0066CC;
}

.cl-badge-green .cl-badge-text {
    color: #00A651;
}

.cl-badge-white .cl-badge-text {
    color: #0066CC;
}

/* Small Badge */
.cl-badge-small {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.cl-badge-icon-small {
    width: 16px;
    height: 16px;
    color: #0066CC;
}

.cl-badge-text-small {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0066CC;
}

.cl-intro-text {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.cl-check-icon {
    width: 20px;
    height: 20px;
    color: #00A651;
    flex-shrink: 0;
}

.cl-highlight-blue {
    color: #0066CC;
}

/* ==========================================
   BUILT ON TRUST SECTION
   ========================================== */
.cl-trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .cl-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

.cl-trust-content {
    /* Grid column */
}

.cl-trust-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cl-trust-paragraphs p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.cl-trust-img-container {
    position: relative;
}

.cl-trust-img-wrapper {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.cl-trust-img {
    width: 100%;
    min-height: 500px;
    object-fit: cover;
    display: block;
}

.cl-trust-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
}

.cl-trust-img-decoration {
    position: absolute;
    z-index: -10;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 1.5rem;
}

/* ==========================================
   HOW WE SUPPORT OUR CLIENTS SECTION
   ========================================== */
.cl-support-content {
    max-width: 1280px;
    margin: 0 auto;
}

.cl-support-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .cl-support-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cl-support-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.cl-support-item:hover {
    border-color: rgba(0, 166, 81, 0.2);
}

.cl-support-item .cl-check-icon {
    margin-top: 0.125rem;
}

.cl-support-item p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
}

.cl-support-cta-box {
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    max-width: 1280px;
    margin: 0 auto;
}

.cl-support-cta-box p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
}

/* ==========================================
   COMPANIES WE'VE WORKED WITH SECTION
   ========================================== */
.cl-companies-content {
    max-width: 1280px;
    margin: 0 auto;
}

.cl-logo-grid-wrapper {
    background: white;
    border-radius: 1.5rem;
    padding: 3rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.cl-logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .cl-logo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .cl-logo-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.cl-logo-placeholder {
    aspect-ratio: 3/2;
    background: white;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    cursor: pointer;
}

.cl-logo-placeholder:hover {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
}

.cl-logo-placeholder svg {
    color: rgba(0, 0, 0, 0.2);
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.cl-logo-placeholder:hover svg {
    color: rgba(0, 102, 204, 0.4);
}

.cl-logo-placeholder p {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.3);
    transition: color 0.3s;
}

.cl-logo-placeholder:hover p {
    color: rgba(0, 0, 0, 0.5);
}

.cl-logo-note {
    text-align: center;
}

.cl-logo-note p {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    font-style: italic;
}

/* ==========================================
   WHAT OUR CLIENTS VALUE SECTION
   ========================================== */
.cl-values-content {
    max-width: 1280px;
    margin: 0 auto;
}

.cl-values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .cl-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cl-values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cl-value-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s;
}

.cl-value-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cl-value-icon-box {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: transform 0.3s;
}

.cl-value-card:hover .cl-value-icon-box {
    transform: scale(1.1);
}

.cl-value-icon-box svg {
    color: white;
}

.cl-value-card p {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
}

.cl-values-statement-box {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1.5rem;
    padding: 2.5rem;
    text-align: center;
    color: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cl-statement-primary {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.cl-statement-secondary {
    font-size: 1.25rem;
    line-height: 1.7;
}

/* ==========================================
   OUR COMMITMENT TO EVERY CLIENT SECTION
   ========================================== */
.cl-commitment-content {
    max-width: 1280px;
    margin: 0 auto;
}

.cl-commitment-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cl-commitment-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .cl-commitment-box {
        padding: 4rem;
    }
}

.cl-commitment-question {
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.5;
}

@media (min-width: 1024px) {
    .cl-commitment-question {
        font-size: 2.25rem;
    }
}

.cl-commitment-approach {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.cl-commitment-promise-box {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1rem;
    padding: 2rem;
    color: white;
}

.cl-commitment-promise-box p {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.7;
}

.cl-commitment-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .cl-commitment-pillars {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cl-pillar-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.cl-pillar-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
}

.cl-pillar-icon-box {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: transform 0.3s;
}

.cl-pillar-card:hover .cl-pillar-icon-box {
    transform: scale(1.1);
}

.cl-pillar-icon-box svg {
    color: white;
}

.cl-pillar-card p {
    font-size: 1.25rem;
    font-weight: 600;
}

/* ==========================================
   CAREERS - COMPLETE CSS
   Build Intelligent Business Systems
   ========================================== */

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.5;
    color: #000;
    background: #fff;
    min-height: 100vh;
}

/* Container */
.cr-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .cr-container {
        padding: 0 3rem;
    }
}

/* ==========================================
   HERO SECTION
   ========================================== */
.cr-hero {
    position: relative;
    padding: 7rem 1.5rem 3rem;
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    overflow: hidden;
}

.cr-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

.cr-hero-box {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
}

.cr-hero-box-1 {
    top: 5rem;
    right: 5rem;
    width: 8rem;
    height: 8rem;
    transform: rotate(12deg);
}

.cr-hero-box-2 {
    bottom: 5rem;
    left: 5rem;
    width: 10rem;
    height: 10rem;
    transform: rotate(-12deg);
}

.cr-hero-box-3 {
    top: 50%;
    left: 25%;
    width: 5rem;
    height: 5rem;
    transform: rotate(45deg);
    border-width: 1px;
}

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

.cr-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
}

.cr-hero-subtitle {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .cr-hero {
        padding: 8rem 3rem 3rem;
    }
    
    .cr-hero-title {
        font-size: 3rem;
    }
}

/* ==========================================
   SECTIONS
   ========================================== */
.cr-section {
    padding: 4rem 0 6rem;
}

.cr-section-white {
    background: #fff;
}

.cr-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .cr-section {
        padding: 6rem 0;
    }
}

/* Section Headers */
.cr-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.cr-section-title-center {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
}

.cr-section-title-left {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.cr-section-subtitle {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    margin-bottom: 0;
}

.cr-section-subtitle-max {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    margin-bottom: 0;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    .cr-section-title-center,
    .cr-section-title-left {
        font-size: 3rem;
    }
}

/* Badges */
.cr-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.cr-badge-blue {
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
}

.cr-badge-left {
    margin-bottom: 2rem;
}

.cr-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.cr-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

.cr-paragraph {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.cr-check-icon {
    width: 20px;
    height: 20px;
    color: #00A651;
    flex-shrink: 0;
}

/* ==========================================
   JOIN SECTION
   ========================================== */
.cr-join-content {
    max-width: 1024px;
    margin: 0 auto;
}

.cr-join-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .cr-join-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

.cr-join-text {
    /* Grid column */
}

.cr-join-img-container {
    position: relative;
}

.cr-join-img-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cr-join-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.cr-join-img-decoration {
    position: absolute;
    z-index: -10;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 6rem;
    height: 6rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
    border-radius: 1rem;
    transform: rotate(12deg);
}

/* ==========================================
   WHY BUILD YOUR CAREER SECTION
   ========================================== */
.cr-why-content {
    max-width: 1024px;
    margin: 0 auto;
}

.cr-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .cr-why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

.cr-why-img-container {
    position: relative;
}

.cr-why-img-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cr-why-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.cr-why-img-decoration {
    position: absolute;
    z-index: -10;
    top: -1.5rem;
    left: -1.5rem;
    width: 6rem;
    height: 6rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
    border-radius: 1rem;
    transform: rotate(-12deg);
}

.cr-why-heading {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.cr-why-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cr-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cr-check-item .cr-check-icon {
    margin-top: 0.25rem;
}

.cr-check-item p {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
}

.cr-why-footnote {
    background: white;
    border-radius: 1rem;
    padding: 2rem 3rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.cr-why-footnote p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
    line-height: 1.8;
}

/* ==========================================
   OPEN ROLES SECTION
   ========================================== */
.cr-roles-content {
    max-width: 1024px;
    margin: 0 auto;
}

.cr-roles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .cr-roles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cr-role-card {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s;
}

.cr-role-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 102, 204, 0.4);
}

.cr-role-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cr-role-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cr-role-icon-box svg {
    color: #0066CC;
}

.cr-role-info {
    flex: 1;
}

.cr-role-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cr-role-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
}

.cr-role-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cr-role-meta svg {
    width: 16px;
    height: 16px;
}

.cr-role-description {
    font-size: 0.9375rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.cr-role-requirements {
    margin-bottom: 1.5rem;
}

.cr-role-requirements h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
    margin-bottom: 0.75rem;
}

.cr-requirements-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cr-requirement-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.cr-requirement-item svg {
    width: 16px;
    height: 16px;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.cr-requirement-item p {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

.cr-apply-btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.cr-apply-btn:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.cr-roles-footnote {
    background: linear-gradient(to right, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(0, 102, 204, 0.2); margin-top: 50px;
}

.cr-roles-footnote p {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
    line-height: 1.8;
}

.awsm-filter-wrap{margin: 0px 0px 10px -10px !important;}

/* ==========================================
   AI, AUTOMATION & DATA SECTION
   ========================================== */
.cr-ai-content {
    max-width: 1024px;
    margin: 0 auto;
}

.cr-ai-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .cr-ai-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cr-ai-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cr-ai-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.cr-ai-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cr-ai-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.cr-ai-icon-box svg {
    color: #0066CC;
}

.cr-ai-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.cr-ai-footnote {
    text-align: center;
}

.cr-ai-footnote p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    max-width: 768px;
    margin: 0 auto;
}

/* ==========================================
   INTERNSHIP SECTION
   ========================================== */
.cr-internship-content {
    max-width: 1024px;
    margin: 0 auto;
}

.cr-internship-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .cr-internship-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cr-internship-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.cr-internship-card {
    background: white;
    border: 2px solid rgba(0, 102, 204, 0.2);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s;
}

.cr-internship-card:hover {
    border-color: rgba(0, 166, 81, 0.4);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.cr-internship-icon-box {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.cr-internship-icon-box svg {
    color: white;
}

.cr-internship-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
}

.cr-internship-footnote {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.cr-internship-footnote p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
    line-height: 1.8;
}

/* ==========================================
   WORK ENVIRONMENT SECTION
   ========================================== */
.cr-environment-content {
    max-width: 1024px;
    margin: 0 auto;
}

.cr-environment-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .cr-environment-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

.cr-environment-intro {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.cr-environment-heading {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.cr-values-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.cr-value-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.cr-value-item span {
    font-size: 1.0625rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
}

.cr-environment-footnote-text {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
}

.cr-environment-img-container {
    position: relative;
}

.cr-environment-img-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cr-environment-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.cr-environment-img-decoration {
    position: absolute;
    z-index: -10;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
    border-radius: 1rem;
    transform: rotate(12deg);
}

/* ==========================================
   HOW TO APPLY SECTION
   ========================================== */
.cr-apply-content {
    max-width: 1024px;
    margin: 0 auto;
}

.cr-apply-box {
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    border-radius: 1rem;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
}

.cr-apply-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

.cr-apply-inner {
    position: relative;
    z-index: 10;
}

.cr-apply-mail-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.cr-apply-mail-icon svg {
    color: white;
}

.cr-apply-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
}

.cr-apply-email-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: white;
    color: #0066CC;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: all 0.3s;
    margin-bottom: 2rem;
}

.cr-apply-email-btn:hover {
    background: rgba(249, 250, 251, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}

.cr-apply-text {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    max-width: 512px;
    margin: 0 auto;
}

/* ==========================================
   APPLICATION FORM MODAL
   ========================================== */
.cr-modal {
    display: none; /* Hidden by default */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cr-modal.active {
    display: flex;
}

.cr-modal-content {
    background: white;
    border-radius: 1rem;
    max-width: 672px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
}

.cr-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.cr-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.cr-modal-close svg {
    color: rgba(0, 0, 0, 0.7);
}

.cr-form-container {
    padding: 2rem;
}

@media (min-width: 1024px) {
    .cr-form-container {
        padding: 3rem;
    }
}

.cr-form-header {
    text-align: center;
    margin-bottom: 2rem;
}

.cr-form-icon-box {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.cr-form-icon-box svg {
    color: white;
}

.cr-form-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

@media (min-width: 1024px) {
    .cr-form-title {
        font-size: 2.25rem;
    }
}

.cr-form-subtitle {
    font-size: 0.9375rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
}

.cr-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cr-form-field {
    /* Individual form field */
}

.cr-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cr-required {
    color: #ef4444;
}

.cr-form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s;
}

.cr-form-input:focus {
    outline: none;
    border-color: #0066CC;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
}

.cr-file-input {
    display: none;
}

.cr-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    border: 2px dashed rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s;
}

.cr-file-label:hover {
    border-color: #0066CC;
    background: rgba(0, 102, 204, 0.05);
}

.cr-file-label svg {
    color: #0066CC;
}

.cr-file-label span {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.7);
}

.cr-file-note {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 0.5rem;
}

.cr-form-buttons {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
}

.cr-btn-cancel {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    background: transparent;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.cr-btn-cancel:hover {
    background: rgba(0, 0, 0, 0.05);
}

.cr-btn-submit {
    flex: 1;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.cr-btn-submit:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}


/* ==========================================
   REQUEST CONSULTATION / DEMO - COMPLETE CSS
   Let's Build a Structured System
   ========================================== */
/* Container */
.rc-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .rc-container {
        padding: 0 3rem;
    }
}

/* ==========================================
   SECTIONS
   ========================================== */
.rc-section {
    padding: 4rem 0 8rem;
}

.rc-section-white {
    background: #fff;
}

.rc-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .rc-section {
        padding: 5rem 0 5rem;
    }
}

/* Section Headers */
.rc-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.rc-section-title-center {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .rc-section-title-center {
        font-size: 3rem;
    }
}

.rc-section-subtitle {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
    max-width: 768px;
    margin: 0 auto;
}

/* Badges */
.rc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.rc-badge-blue {
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
}

.rc-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.rc-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

.rc-required {
    color: #ef4444;
}

/* ==========================================
   START WITH CLEAR CONVERSATION SECTION
   ========================================== */
.rc-conversation-content {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}

.rc-large-paragraph {
    font-size: 1.1875rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.rc-paragraph-last {
    margin-bottom: 2rem;
}

.rc-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .rc-cta-buttons {
        flex-direction: row;
    }
}

.rc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.rc-btn-primary {
    background: linear-gradient(to right, #0066CC, #0052A3);
    color: white;
}

.rc-btn-primary:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.rc-btn-secondary {
    background: linear-gradient(to right, #00A651, #008A44);
    color: white;
}

.rc-btn-secondary:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.rc-gradient-text {
    font-size: 0.875rem;
    line-height: 1.6;
    background: linear-gradient(90deg, #0066CC 0%, #00A651 25%, #0066CC 50%, #00A651 75%, #0066CC 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* ==========================================
   WHAT HAPPENS AFTER YOU CONTACT US SECTION
   ========================================== */
.rc-process-content {
    max-width: 1280px;
    margin: 0 auto;
}

.rc-process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .rc-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rc-process-img-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.rc-process-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rc-process-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
}

.rc-process-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rc-process-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.rc-step-number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(to right, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.rc-step-text {
    font-size: 1.125rem;
    padding-top: 0.25rem;
    line-height: 1.7;
}

.rc-process-footnote {
    max-width: 1280px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.rc-footnote-primary {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.rc-footnote-secondary {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

/* ==========================================
   CONTACT INFORMATION SECTION
   ========================================== */
.rc-contact-content {
    max-width: 1280px;
    margin: 0 auto;
}

.rc-contact-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .rc-contact-box {
        padding: 3rem;
    }
}

.rc-contact-company {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.rc-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .rc-contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rc-contact-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.rc-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.rc-contact-icon-box {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rc-contact-icon-box svg {
    color: white;
}

.rc-contact-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0.25rem;
}

.rc-contact-value {
    font-size: 1.125rem;
    line-height: 1.7;
}

.rc-contact-link {
    font-size: 1.125rem;
    color: #0066CC;
    text-decoration: none;
    line-height: 1.7;
}

.rc-contact-link:hover {
    text-decoration: underline;
}

/* ==========================================
   PROJECT FORM SECTION
   ========================================== */
.rc-form-content {
    max-width: 1280px;
    margin: 0 auto;
}

.rc-form-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .rc-form-box {
        padding: 2.5rem;
    }
}

.rc-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.rc-form-field {
    /* Individual form field */
}

.rc-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 0.5rem;
}

.rc-form-input,
.rc-form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s;
}

.rc-form-input:focus,
.rc-form-textarea:focus {
    outline: none;
    border-color: #0066CC;
}

.rc-form-textarea {
    resize: none;
}

.rc-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .rc-form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rc-form-submit {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(to right, #0066CC, #0052A3);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.rc-form-submit:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.rc-form-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(0, 0, 0, 0.05);
}

.rc-form-microcopy {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    line-height: 1.6;
}

/* ==========================================
   TALK TO SALES - COMPLETE CSS
   Strategic Sales Consultation
   ========================================== */
/* Container */
.ts-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .ts-container {
        padding: 0 3rem;
    }
}

/* ==========================================
   SECTIONS
   ========================================== */
.ts-section {
    padding: 5rem 0 5rem;
}

.ts-section-white {
    background: #fff;
}

.ts-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

/* Section Headers */
.ts-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.ts-section-title-center {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .ts-section-title-center {
        font-size: 3rem;
    }
}

.ts-section-subtitle {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    max-width: 768px;
    margin: 0 auto 2rem;
}

/* Badges */
.ts-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.ts-badge-blue {
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
}

.ts-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.ts-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

.ts-required {
    color: #ef4444;
}

/* ==========================================
   SCHEDULE CONSULTATION SECTION
   ========================================== */
.ts-consultation-content {
    max-width: 1280px;
    margin: 0 auto;
}

.ts-evaluation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 3rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ts-evaluation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ts-evaluation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ts-check-icon {
    width: 20px;
    height: 20px;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ts-evaluation-item p {
    font-size: 1rem;
    line-height: 1.7;
}

.ts-centered-text {
    text-align: center;
    margin-bottom: 2rem;
}

.ts-large-paragraph {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    max-width: 768px;
    margin: 0 auto;
}

.ts-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .ts-cta-buttons {
        flex-direction: row;
    }
}

.ts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.ts-btn-primary {
    background: linear-gradient(to right, #0066CC, #0052A3);
    color: white;
}

.ts-btn-primary:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ts-btn-secondary {
    background: linear-gradient(to right, #00A651, #008A44);
    color: white;
}

.ts-btn-secondary:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ts-gradient-text {
    font-size: 0.875rem;
    line-height: 1.6;
    background: linear-gradient(90deg, #0066CC 0%, #00A651 25%, #0066CC 50%, #00A651 75%, #0066CC 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite; text-align: center;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* ==========================================
   CONSULTATION PROCESS SECTION
   ========================================== */
.ts-process-content {
    max-width: 1280px;
    margin: 0 auto;
}

.ts-process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .ts-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ts-process-img-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ts-process-img {
    width: 100%;
    height: 100%;
    min-height: 450px;
    object-fit: cover;
    display: block;
}

.ts-process-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 102, 204, 0.2), rgba(0, 166, 81, 0.2));
}

.ts-process-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ts-process-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.ts-step-number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(to right, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.ts-step-text {
    font-size: 1.125rem;
    padding-top: 0.25rem;
    line-height: 1.7;
}

.ts-process-footnote {
    max-width: 1280px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.ts-footnote-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

/* ==========================================
   SALES ENQUIRY FORM SECTION
   ========================================== */
.ts-form-content {
    max-width: 1280px;
    margin: 0 auto;
}

.ts-form-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .ts-form-box {
        padding: 2.5rem;
    }
}

.ts-form-heading {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.ts-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ts-form-field {
    /* Individual form field */
}

.ts-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 0.5rem;
}

.ts-form-input,
.ts-form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s;
}

.ts-form-input:focus,
.ts-form-textarea:focus {
    outline: none;
    border-color: #0066CC;
}

.ts-form-textarea {
    resize: none;
}

.ts-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ts-form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Checkbox Container */
.ts-checkbox-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.02);
    padding: 1rem;
    border-radius: 0.75rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ts-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background 0.2s;
}

.ts-checkbox-item:hover {
    background: white;
}

.ts-checkbox {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.25rem;
    accent-color: #0066CC;
    cursor: pointer;
}

.ts-checkbox-item span {
    font-size: 0.875rem;
}

.ts-form-submit {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(to right, #0066CC, #0052A3);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.ts-form-submit:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ts-form-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(0, 0, 0, 0.05);
}

.ts-form-microcopy {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    line-height: 1.6;
}

/* ==========================================
   PARTNER WITH US - COMPLETE CSS
   Strategic Partnership & Collaboration
   ========================================== */

/* Container */
.pw-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .pw-container {
        padding: 0 3rem;
    }
}

/* ==========================================
   SECTIONS
   ========================================== */
.pw-section {
    padding: 5rem 0 5rem;
}

.pw-section-white {
    background: #fff;
}

.pw-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

/* Section Headers */
.pw-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.pw-section-title-center {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .pw-section-title-center {
        font-size: 3rem;
    }
}

.pw-section-subtitle {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    max-width: 768px;
    margin: 0 auto 2rem;
}

/* Badges */
.pw-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.pw-badge-blue {
    background: linear-gradient(to right, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
}

.pw-badge-icon {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.pw-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

.pw-required {
    color: #ef4444;
}

/* ==========================================
   BUILD THE FUTURE TOGETHER SECTION
   ========================================== */
.pw-intro-content {
    max-width: 1280px;
    margin: 0 auto;
}

.pw-partners-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 3rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .pw-partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pw-partner-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.pw-check-icon {
    width: 20px;
    height: 20px;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.pw-partner-item p {
    font-size: 1rem;
    line-height: 1.7;
}

.pw-centered-text {
    text-align: center;
    margin-bottom: 2rem;
}

.pw-large-paragraph {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    max-width: 768px;
    margin: 0 auto;
}

.pw-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .pw-cta-buttons {
        flex-direction: row;
    }
}

.pw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.pw-btn-primary {
    background: linear-gradient(to right, #0066CC, #0052A3);
    color: white;
}

.pw-btn-primary:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.pw-btn-secondary {
    background: linear-gradient(to right, #00A651, #008A44);
    color: white;
}

.pw-btn-secondary:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.pw-gradient-text {
    font-size: 0.875rem;
    line-height: 1.6;
    background: linear-gradient(90deg, #0066CC 0%, #00A651 25%, #0066CC 50%, #00A651 75%, #0066CC 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite; text-align: center;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* ==========================================
   PARTNERSHIP ENQUIRY FORM SECTION
   ========================================== */
.pw-form-content {
    max-width: 1280px;
    margin: 0 auto;
}

.pw-form-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
    .pw-form-box {
        padding: 2.5rem;
    }
}

.pw-form-heading {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.pw-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pw-form-field {
    /* Individual form field */
}

.pw-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 0.5rem;
}

.pw-form-input,
.pw-form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s;
}

.pw-form-input:focus,
.pw-form-textarea:focus {
    outline: none;
    border-color: #0066CC;
}

.pw-form-textarea {
    resize: none;
}

.pw-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .pw-form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pw-form-submit {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(to right, #0066CC, #0052A3);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.pw-form-submit:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.pw-form-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(0, 0, 0, 0.05);
}

.pw-form-microcopy {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    line-height: 1.6;
}

/* ==========================================
   SUPPORT PAGE - COMPLETE CSS
   Customer Support & Help Center
   ========================================== */

/* Container */
.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .sp-container {
        padding: 0 3rem;
    }
}

/* ==========================================
   HERO SECTION
   ========================================== */
.sp-hero {
    position: relative;
    padding: 7rem 1.5rem 3rem;
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    overflow: hidden;
}

.sp-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

.sp-hero-box {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
}

.sp-hero-box-1 {
    top: 5rem;
    right: 5rem;
    width: 8rem;
    height: 8rem;
    transform: rotate(12deg);
}

.sp-hero-box-2 {
    bottom: 5rem;
    left: 5rem;
    width: 10rem;
    height: 10rem;
    transform: rotate(-12deg);
}

.sp-hero-box-3 {
    top: 50%;
    left: 25%;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    transform: rotate(45deg);
}

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

.sp-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
}

.sp-hero-subtitle {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .sp-hero {
        padding: 8rem 3rem 3rem;
    }
    
    .sp-hero-title {
        font-size: 3.75rem;
    }
}

/* ==========================================
   SECTIONS
   ========================================== */
.sp-section {
    padding: 4rem 0 6rem;
}

.sp-section-white {
    background: #fff;
}

.sp-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

/* Section Headers */
.sp-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.sp-section-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .sp-section-title {
        font-size: 2.25rem;
    }
}

.sp-section-subtitle {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
}

.sp-required {
    color: #ef4444;
}

/* ==========================================
   SUPPORT OPTIONS SECTION
   ========================================== */
.sp-options-content {
    max-width: 1280px;
    margin: 0 auto;
}

.sp-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .sp-options-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sp-option-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.sp-option-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1);
}

.sp-option-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: white;
}

.sp-icon-email {
    background: linear-gradient(135deg, #0066CC, #0052A3);
}

.sp-icon-phone {
    background: linear-gradient(135deg, #00A651, #008A44);
}

.sp-icon-chat {
    background: linear-gradient(135deg, #0066CC, #00A651);
}

.sp-option-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.sp-option-description {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.sp-option-detail {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.sp-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.75rem;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
}

.sp-btn-email {
    background: linear-gradient(to right, #0066CC, #0052A3);
}

.sp-btn-phone {
    background: linear-gradient(to right, #00A651, #008A44);
}

.sp-btn-chat {
    background: linear-gradient(to right, #0066CC, #00A651);
}

.sp-option-btn:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

/* Submit Ticket Button */
.sp-submit-ticket-wrapper {
    text-align: center;
}

.sp-submit-ticket-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: black;
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.sp-submit-ticket-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ==========================================
   SUPPORT FEATURES SECTION
   ========================================== */
.sp-features-content {
    max-width:1280px;
    margin: 0 auto;
}

.sp-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .sp-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sp-features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sp-feature-item {
    text-align: center;
}

.sp-feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #0066CC;
}

.sp-feature-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.sp-feature-description {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
}

/* ==========================================
   CTA SECTION
   ========================================== */
.sp-cta {
    position: relative;
    padding: 4rem 1.5rem 5rem;
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    overflow: hidden;
}

.sp-cta-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

.sp-cta-box {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
}

.sp-cta-box-1 {
    top: 2rem;
    right: 2rem;
    width: 6rem;
    height: 6rem;
    transform: rotate(12deg);
}

.sp-cta-box-2 {
    bottom: 2rem;
    left: 2rem;
    width: 8rem;
    height: 8rem;
    transform: rotate(-12deg);
}

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

.sp-cta-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .sp-cta-title {
        font-size: 3rem;
    }
}

.sp-cta-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.sp-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .sp-cta-buttons {
        flex-direction: row;
    }
}

.sp-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.sp-cta-btn-primary {
    background: white;
    color: #0066CC;
    border: 2px solid white;
}

.sp-cta-btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

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

.sp-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ==========================================
   TERMS OF SERVICE - COMPLETE CSS
   Legal Terms & Conditions
   ========================================== */ 

/* Container */
.tos-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .tos-container {
        padding: 0 3rem;
    }
}

/* Content Width */
.tos-content-narrow {
    max-width: 1280px;
    margin: 0 auto;
}

/* ==========================================
   HERO SECTION
   ========================================== */
.tos-hero {
    position: relative;
    padding: 7rem 1.5rem 3rem;
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    overflow: hidden;
}

.tos-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

.tos-hero-box {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
}

.tos-hero-box-1 {
    top: 5rem;
    right: 5rem;
    width: 8rem;
    height: 8rem;
    transform: rotate(12deg);
}

.tos-hero-box-2 {
    bottom: 5rem;
    left: 5rem;
    width: 10rem;
    height: 10rem;
    transform: rotate(-12deg);
}

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

.tos-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
}

.tos-hero-subtitle {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .tos-hero {
        padding: 6rem 3rem 3rem;
    }
    
    .tos-hero-title {
        font-size: 3.75rem;
    }
}

.tos-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tos-hero-badge svg {
    width: 20px;
    height: 20px;
    color: white;
}

.tos-hero-badge span {
    font-size: 0.9375rem;
    color: white;
}

/* ==========================================
   SECTIONS
   ========================================== */
.tos-section {
    padding: 4rem 0 5rem;
}

.tos-section-white {
    background: #fff;
}

.tos-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

.tos-section-contact {
    padding: 4rem 0 6rem;
}

/* Section Headers */
.tos-section-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.tos-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.tos-section-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

@media (min-width: 1024px) {
    .tos-section-title {
        font-size: 2.25rem;
    }
}

/* Section Content */
.tos-section-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ==========================================
   INTRODUCTION
   ========================================== */
.tos-intro-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.tos-intro-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

/* ==========================================
   TEXT STYLES
   ========================================== */
.tos-paragraph {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.tos-paragraph-mb {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.tos-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
}

.tos-company-name {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.tos-spacing {
    margin-top: 1.5rem;
}

.tos-mt {
    margin-top: 1rem;
}

/* ==========================================
   LISTS
   ========================================== */
.tos-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tos-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.tos-check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.tos-check-green {
    color: #00A651;
}

.tos-check-blue {
    color: #0066CC;
}

.tos-list-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
}

/* ==========================================
   CONTACT SECTION (Section 12)
   ========================================== */
.tos-contact-box {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1.5rem;
    padding: 2.5rem;
    color: white;
}

@media (min-width: 1024px) {
    .tos-contact-box {
        padding: 3rem;
    }
}

.tos-contact-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tos-contact-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.tos-contact-title {
    font-size: 1.875rem;
    font-weight: 600;
    color: white;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 1024px) {
    .tos-contact-title {
        font-size: 2.25rem;
    }
}

.tos-contact-info {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tos-contact-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.tos-contact-cta {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.tos-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: white;
    color: #0066CC;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.tos-contact-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

.tos-contact-text a{color: #fff; text-decoration: none;}

/* ==========================================
   PRIVACY POLICY - COMPLETE CSS
   Privacy & Data Protection
   ========================================== */

/* Container */
.pp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .pp-container {
        padding: 0 3rem;
    }
}

/* Content Width */
.pp-content-narrow {
    max-width: 1280px;
    margin: 0 auto;
}

/* ==========================================
   HERO SECTION
   ========================================== */
.pp-hero {
    position: relative;
    padding: 7rem 1.5rem 3rem;
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    overflow: hidden;
}

.pp-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

.pp-hero-box {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
}

.pp-hero-box-1 {
    top: 5rem;
    right: 5rem;
    width: 8rem;
    height: 8rem;
    transform: rotate(12deg);
}

.pp-hero-box-2 {
    bottom: 5rem;
    left: 5rem;
    width: 10rem;
    height: 10rem;
    transform: rotate(-12deg);
}

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

.pp-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .pp-hero {
        padding: 5rem 3rem 3rem;
    }
    
    .pp-hero-title {
        font-size: 3.75rem;
    }
}

.pp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 1.5rem;
}

.pp-hero-badge svg {
    width: 20px;
    height: 20px;
    color: white;
}

.pp-hero-badge span {
    font-size: 0.9375rem;
    color: white;
}

/* ==========================================
   SECTIONS
   ========================================== */
.pp-section {
    padding: 4rem 0 5rem;
}

.pp-section-white {
    background: #fff;
}

.pp-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

.pp-section-contact {
    padding: 4rem 0 6rem;
}

/* Section Headers */
.pp-section-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.pp-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.pp-section-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .pp-section-title {
        font-size: 2.25rem;
    }
}

/* Section Content */
.pp-section-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ==========================================
   INTRODUCTION
   ========================================== */
.pp-intro-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.pp-intro-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

/* ==========================================
   SUBSECTIONS
   ========================================== */
.pp-subsection {
    /* Individual subsection */
}

.pp-subsection-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ==========================================
   TEXT STYLES
   ========================================== */
.pp-paragraph {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.pp-paragraph-mb {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.pp-link {
    color: #0066CC;
    font-weight: 600;
    text-decoration: none;
}

.pp-link:hover {
    text-decoration: underline;
}

/* ==========================================
   LISTS
   ========================================== */
.pp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pp-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.pp-check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.pp-check-green {
    color: #00A651;
}

.pp-check-blue {
    color: #0066CC;
}

.pp-list-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
}

.pp-spacing-mb {
    margin-bottom: 1.5rem;
}

/* ==========================================
   HIGHLIGHT BOXES
   ========================================== */
.pp-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.pp-highlight-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.pp-highlight-bold .pp-highlight-text {
    font-weight: 600;
}

/* ==========================================
   CONTACT SECTION (Section 11)
   ========================================== */
.pp-contact-box {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1.5rem;
    padding: 2.5rem;
    color: white;
}

@media (min-width: 1024px) {
    .pp-contact-box {
        padding: 3rem;
    }
}

.pp-contact-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pp-contact-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.pp-contact-title {
    font-size: 1.875rem;
    font-weight: 600;
    color: white;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 1024px) {
    .pp-contact-title {
        font-size: 2.25rem;
    }
}

.pp-contact-info {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pp-contact-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.pp-contact-cta {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.pp-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: white;
    color: #0066CC;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.pp-contact-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* ==========================================
   COOKIE POLICY - COMPLETE CSS
   Cookie Usage & Management
   ========================================== */

/* Container */
.cp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .cp-container {
        padding: 0 3rem;
    }
}

/* Content Width */
.cp-content-narrow {
    max-width: 1280px;
    margin: 0 auto;
}

/* ==========================================
   HERO SECTION
   ========================================== */
.cp-hero {
    position: relative;
    padding: 7rem 1.5rem 3rem;
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    overflow: hidden;
}

.cp-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

.cp-hero-box {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
}

.cp-hero-box-1 {
    top: 5rem;
    right: 5rem;
    width: 8rem;
    height: 8rem;
    transform: rotate(12deg);
}

.cp-hero-box-2 {
    bottom: 5rem;
    left: 5rem;
    width: 10rem;
    height: 10rem;
    transform: rotate(-12deg);
}

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

.cp-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .cp-hero {
        padding: 5rem 3rem 3rem;
    }
    
    .cp-hero-title {
        font-size: 3.75rem;
    }
}

.cp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 1.5rem;
}

.cp-hero-badge svg {
    width: 20px;
    height: 20px;
    color: white;
}

.cp-hero-badge span {
    font-size: 0.9375rem;
    color: white;
}

/* ==========================================
   SECTIONS
   ========================================== */
.cp-section {
    padding: 5rem 0 5rem;
}

.cp-section-white {
    background: #fff;
}

.cp-section-gray {
    background: rgba(0, 0, 0, 0.02);
}

.cp-section-contact {
    padding: 4rem 0 6rem;
}

/* Section Headers */
.cp-section-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cp-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.cp-section-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .cp-section-title {
        font-size: 2.25rem;
    }
}

/* Section Content */
.cp-section-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ==========================================
   INTRODUCTION
   ========================================== */
.cp-intro-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.cp-intro-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

/* ==========================================
   COOKIE TYPES (Section 2)
   ========================================== */
.cp-cookie-type {
    /* Individual cookie type */
}

.cp-cookie-type-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cp-cookie-type-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

/* ==========================================
   TEXT STYLES
   ========================================== */
.cp-paragraph {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.cp-paragraph-mb {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* ==========================================
   LISTS
   ========================================== */
.cp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cp-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cp-check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.cp-check-green {
    color: #00A651;
}

.cp-check-blue {
    color: #0066CC;
}

.cp-list-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
}

.cp-spacing-mb {
    margin-bottom: 1.5rem;
}

/* ==========================================
   HIGHLIGHT BOXES
   ========================================== */
.cp-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.cp-highlight-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

/* ==========================================
   CONTACT SECTION (Section 7)
   ========================================== */
.cp-contact-box {
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 1.5rem;
    padding: 2.5rem;
    color: white;
}

@media (min-width: 1024px) {
    .cp-contact-box {
        padding: 3rem;
    }
}

.cp-contact-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cp-contact-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.cp-contact-title {
    font-size: 1.875rem;
    font-weight: 600;
    color: white;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 1024px) {
    .cp-contact-title {
        font-size: 2.25rem;
    }
}

.cp-contact-info {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 2rem;
}

.cp-contact-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.cp-contact-cta {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cp-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: white;
    color: #0066CC;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.cp-contact-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* ==========================================
   CLOUD & DEVOPS SERVICES - COMPLETE CSS
   Modern Apple-Style Design
   ========================================== */

/* Container */
.cloud-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .cloud-container {
        padding: 0 3rem;
    }
}

/* ==========================================
   SECTIONS
   ========================================== */
.cloud-section {
    padding: 4rem 0 5rem;
}

@media (min-width: 1024px) {
    .cloud-section {
        padding: 5rem 0 5rem;
    }
}

.cloud-intro-section {
    position: relative;
    background: rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.cloud-intro-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: radial-gradient(circle at 2px 2px, black 1px, transparent 0);
    background-size: 40px 40px;
}

.cloud-why-section {
    background: white;
}

.cloud-services-section {
    background: rgba(0, 0, 0, 0.02);
}

.cloud-migration-section {
    background: white;
}

.cloud-devops-section {
    background: rgba(0, 0, 0, 0.02);
}

.cloud-platforms-section {
    background: white;
}

.cloud-security-section {
    background: rgba(0, 0, 0, 0.02);
}

.cloud-cost-section {
    background: white;
}

.cloud-cases-section {
    background: rgba(0, 0, 0, 0.02);
}

/* Badge */
.cloud-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(90deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 50px;
    margin-bottom: 1.5rem;
}

.cloud-badge svg {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.cloud-badge span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

/* ==========================================
   INTRODUCTION SECTION
   ========================================== */
.cloud-intro-content {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.cloud-intro-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .cloud-intro-title {
        font-size: 2.25rem;
    }
}

.cloud-intro-text {
    font-size: 0.9375rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .cloud-intro-text {
        font-size: 1.1875rem;
    }
}

.cloud-intro-text strong {
    font-weight: 600;
}

.cloud-intro-help {
    margin: 2rem 0;
}

.cloud-help-title {
    font-size: 0.9375rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .cloud-help-title {
        font-size: 1.1875rem;
    }
}

.cloud-help-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 1280px;
    margin: 0 auto;
    list-style: none;
}

@media (min-width: 768px) {
    .cloud-help-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cloud-help-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cloud-check-icon {
    width: 20px;
    height: 20px;
    color: #00A651;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.cloud-help-item span {
    color: rgba(0, 0, 0, 0.8);
}

/* CTA Buttons */
.cloud-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    margin: 3rem 0 2rem;
}

@media (min-width: 640px) {
    .cloud-cta-buttons {
        flex-direction: row;
    }
}

.cloud-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.cloud-btn svg {
    width: 20px;
    height: 20px;
}

.cloud-btn-blue {
    background: linear-gradient(90deg, #0066CC, #0052A3);
    color: white;
}

.cloud-btn-blue:hover {
    box-shadow: 0 20px 40px rgba(0, 102, 204, 0.3);
}

.cloud-btn-green {
    background: linear-gradient(90deg, #00A651, #008A44);
    color: white;
}

.cloud-btn-green:hover {
    box-shadow: 0 20px 40px rgba(0, 166, 81, 0.3);
}

.cloud-experience-text {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
    text-align: center;
    animation: gradient-shift 3s ease infinite;
    background: linear-gradient(90deg, #0066CC 0%, #00A651 25%, #0066CC 50%, #00A651 75%, #0066CC 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (min-width: 1024px) {
    .cloud-experience-text {
        font-size: 1rem;
    }
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* ==========================================
   WHY CLOUD & DEVOPS SECTION
   ========================================== */
.cloud-why-content {
    max-width: 1280px;
    margin: 0 auto; text-align: center;
}

.cloud-section-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .cloud-section-title {
        font-size: 3.75rem;
    }
}

.cloud-comparison {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 3rem 0;
}

@media (min-width: 768px) {
    .cloud-comparison {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cloud-compare-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.cloud-compare-highlight {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border: 2px solid rgba(0, 102, 204, 0.1);
}

.cloud-compare-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem; text-align: left;
}

.cloud-compare-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cloud-compare-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cloud-x-icon {
    width: 20px;
    height: 20px;
    color: #CC0000;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.cloud-compare-item span {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
}

.cloud-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.cloud-highlight-box p {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .cloud-highlight-box p {
        font-size: 1.25rem;
    }
}

/* ==========================================
   SERVICES SECTION
   ========================================== */
.cloud-services-content {
    max-width: 1536px;
    margin: 0 auto; text-align: center;
    
}

.cloud-service-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
    transition: all 0.3s;
}

@media (min-width: 1024px) {
    .cloud-service-card {
        padding: 2.5rem;
    }
}

.cloud-service-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.cloud-service-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    margin-bottom: 1.5rem;
    transition: transform 0.3s;
}

.cloud-service-card:hover .cloud-service-icon {
    transform: scale(1.1);
}

.cloud-service-content {
    flex: 1; text-align: left;
}

.cloud-service-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem; 
}

@media (min-width: 1024px) {
    .cloud-service-title {
        font-size: 1.875rem;
    }
}

.cloud-service-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.cloud-service-details {
    margin-bottom: 1.5rem;
}

.cloud-service-label {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.cloud-service-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cloud-service-list-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .cloud-service-list-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cloud-service-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.cloud-service-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
}

.cloud-service-note {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-top: 1rem;
}

/* Keywords */
.cloud-keywords {
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.cloud-keywords-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5rem;
}

.cloud-keywords-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cloud-keyword-tag {
    padding: 0.5rem 0.75rem;
    background: linear-gradient(90deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 50px;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
}

/* DevOps Title */
.cloud-devops-title {
    margin-bottom: 3rem;
}

/* ==========================================
   CLOUD PLATFORMS SECTION
   ========================================== */
.cloud-platform-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.cloud-platform-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem; text-align: l;
}

.cloud-platform-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cloud-platform-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cloud-platform-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
}

/* ==========================================
   SECURITY & COST SECTIONS
   ========================================== */
.cloud-section-desc {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    text-align: center;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.cloud-section-note {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-top: 2rem;
    text-align: center;
}

.cloud-security-list,
.cloud-cost-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 1280px;
    margin: 0 auto 2rem;
}

@media (min-width: 768px) {
    .cloud-security-list,
    .cloud-cost-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cloud-security-item,
.cloud-cost-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cloud-security-item span,
.cloud-cost-item span {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */
@media (max-width: 767px) {
    .cloud-hero-box-1,
    .cloud-hero-box-2,
    .cloud-hero-box-3 {
        display: none;
    }
}

/* ==========================================
   THANK YOU
   ========================================== */
/* Container */
.ty-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .ty-container {
        padding: 0 3rem;
    }
}

/* ==========================================
   SECTIONS
   ========================================== */
.ty-section {
    padding: 5rem 0 5rem;
}

@media (min-width: 1024px) {
    .ty-section {
        padding: 5rem 0 6rem;
    }
}

.ty-confirmation-section {
    position: relative;
    background: rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.ty-confirmation-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: radial-gradient(circle at 2px 2px, black 1px, transparent 0);
    background-size: 40px 40px;
}

.ty-next-section {
    background: white;
}

.ty-contact-section {
    background: rgba(0, 0, 0, 0.02);
}

.ty-explore-section {
    background: white;
}

.ty-cta-section {
    background: rgba(0, 0, 0, 0.02);
}

/* Badge */
.ty-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(90deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 50px;
    margin-bottom: 1.5rem;
}

.ty-badge svg {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.ty-badge span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066CC;
}

/* Section Title */
.ty-section-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .ty-section-title {
        font-size: 2.5rem;
    }
}

/* ==========================================
   CONFIRMATION SECTION
   ========================================== */
.ty-confirmation-content {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
}

.ty-confirmation-box {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.05);
    margin-top: 2rem;
}

.ty-confirmation-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ty-confirmation-icon svg {
    width: 48px;
    height: 48px;
    color: white;
}

.ty-confirmation-text {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
}

/* ==========================================
   WHAT HAPPENS NEXT SECTION
   ========================================== */
.ty-next-content {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}

.ty-timeline {
    max-width: 800px;
    margin: 3rem auto 0;
    position: relative;
}

.ty-timeline-item {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
    position: relative;
}

.ty-timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 2rem;
    top: 4rem;
    width: 2px;
    height: calc(100% + 3rem);
    background: linear-gradient(180deg, #0066CC, #00A651);
    opacity: 0.2;
}

@media (max-width: 767px) {
    .ty-timeline-item {
        gap: 1rem;
    }
    
    .ty-timeline-item:not(:last-child)::after {
        left: 1.5rem;
    }
}

.ty-timeline-marker {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

@media (max-width: 767px) {
    .ty-timeline-marker {
        width: 3rem;
        height: 3rem;
    }
}

.ty-timeline-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

@media (max-width: 767px) {
    .ty-timeline-number {
        font-size: 1.25rem;
    }
}

.ty-timeline-content {
    flex: 1;
    text-align: left;
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.ty-timeline-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ty-timeline-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

/* ==========================================
   CONTACT SECTION
   ========================================== */
.ty-contact-content {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}

.ty-contact-subtitle {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 3rem;
}

.ty-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .ty-contact-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ty-contact-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.ty-contact-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px);
}

.ty-contact-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ty-contact-icon svg {
    width: 32px;
    height: 32px;
    color: white;
}

.ty-contact-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.ty-contact-card-text {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
}

.ty-contact-card-text a{color: rgba(0, 0, 0, 0.7); text-decoration: none;}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */
@media (max-width: 767px) {
    .ty-hero-circle-1,
    .ty-hero-circle-2,
    .ty-hero-box {
        display: none;
    }
}

/* JOB GRID */

.awsm-job-post-title:before{
content:"</>";
background:#eef4ff;
color:#1e73be;
font-weight:700;
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
margin-bottom:12px;
}

.awsm-job-post-title a{color:#333; text-decoration: none; font-size: 22px !important;}

.awsm-job-listings{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:40px;
}

/* JOB CARD */

.awsm-job-item{
background:#fff;
border-radius:14px;
padding:30px;
box-shadow:0 12px 28px rgba(0,0,0,0.08);
transition:all .3s ease;
border:1px solid #eef2f7;
}

.awsm-job-item:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

/* JOB TITLE */

.awsm-job-item h3{
font-size:22px;
font-weight:600;
margin-bottom:8px;
color:#111;
}

/* JOB META */

.awsm-job-specification{
font-size:15px;
color:#6b7280;
margin-bottom:15px;
}

/* DESCRIPTION */

.awsm-job-item p{
font-size: 0.9375rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
}

/* REQUIREMENTS TITLE */

.awsm-job-item strong{
display:block;
margin-top:14px;
margin-bottom:8px;
color:#2563eb;
}

/* REQUIREMENT LIST */

.awsm-job-item ul{
list-style:none;
padding-left:0;
}

.awsm-job-item ul li{
position:relative;
padding-left:24px;
margin-bottom:6px;
font-size:14px;
color:#374151;
}

.awsm-job-item ul li:before{
content:"✓";
position:absolute;
left:0;
top:0;
color:#16a34a;
font-weight:700;
}

/* APPLY BUTTON */

.awsm-apply-btn{
display:inline-block;
margin-top:18px;
padding:12px 22px;
border-radius:8px;
background:linear-gradient(90deg,#1e73be,#16a34a);
color:#fff;
font-weight:500;
text-decoration:none;
transition:.3s;
}

.awsm-apply-btn:hover{
opacity:.9;
}

/* MOBILE */

@media(max-width:768px){

.awsm-job-listings{
grid-template-columns:1fr;
}

}

.awsm-list-right-col{float: initial !important;
    width: 100% !important;
    text-align: left !important;}

    .awsm-job-specification-wrapper{    font-size: 15px !important; font-weight: 500 !important;  
   }

    .awsm-job-specification-item{margin: 5px 10px 5px 0px !important;
    
}

    .entry-content1  .awsm-job-specification-item{margin: 5px 10px 5px 0px !important; width: 20%; color: #444; font-size: 1rem;}

        .entry-content1  .awsm-job-specification-item:last-child{width: 40%;}

    .entry-content1 .awsm-job-specification-wrapper{display: inline-flex;
    width: 100%;}

    .awsm-list-left-col{float: initial !important;
    width: 100% !important;}

    .awsm-job-more{width: 100% !important;
    padding: 10px 15px  !important;
    background: linear-gradient(to right, #0066CC, #00A651) !important;
    color: white !important;
    border: none !important;
    border-radius: 0.75rem !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; text-decoration: none;
    gap: 0.5rem !important;
    transition: all 0.3s !important;}

    .awsm-job-more-container{margin-top: 15px !important;}

    .awsm-lists{border: none !important;}

    .awsm-job-item h2.awsm-job-post-title{margin: 0px 0px 10px 0px !important;}

    .awsm-job-listing-item{margin:20px 0px 0px 0px !important;}

    .awsm-job-listings{margin-top: 0px !important;}

    .my-post-space{margin-top: 0px;}

    .casestudiesdetail .entry-title{display: inline; color: #fff; font-size: 3rem;     margin-bottom: 0.75rem;
    font-weight: 700;
    line-height: 1.2;}

    .insecspace .entry-meta{display: none;}

    .entry-meta a{color: #fff !important; font-size: 14px !important; text-decoration: none;}

    .entry-meta svg{color: #fff; font-size: 16px;  fill: #ffffff;}

    .entry-meta .byline{display: none;}

    .posted-on{display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 1.5rem;}

    .posted-on .updated{display: none;}

    .awsm-job-entry-content{color: #333;
    line-height: 1.6;
    font-size: 16px;}

    .awsm-job-form-inner{border-bottom: 1px solid rgba(0, 0, 0, .13) !important; border-radius: 14px;
    padding: 20px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    transition: all .3s ease;
    border: 1px solid #eef2f7 !important;}

    .awsm-job-single-wrap {
    margin-bottom: 5em !important;
}

.awsm-job-entry-content p{line-height: 1.6;     margin-top: 10px;
    color: rgba(0, 0, 0, 0.8); font-size: 1.1875rem;}

    .awsm-job-entry-content li{line-height: 2;     
    color: rgba(0, 0, 0, 0.8); font-size: 1.1875rem;}

.awsm-job-form-inner h2{font-size: 2.25rem !important; line-height: 1.2; font-weight: 600 !important; margin-bottom: 25px !important;
    text-transform: capitalize;}

   .awsm-job-form-group label {font-weight: 600 !important;
    color: rgba(0, 0, 0, 0.8) !important; font-size: 0.875rem ;}

    .awsm-job-form-group input, .awsm-job-form-group textarea{    width: 100% !important;
    padding: 0.875rem 1rem !important;
    font-size: 1rem;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.75rem;
    transition: all 0.3s ease !important;
    height: 50px !important;
    box-shadow: none !important;
}

.awsm-job-inline-group{    display: inline-flex; margin: 10px 0px 0px 0px;
    width: 100%;
    text-align: left;}

    .awsm-job-inline-group input{width: 1.5% !important; 
    position: relative;
    top: -14px;
}

.awsm-application-submit-btn{width: 100% !important;
    padding: 10px 15px  !important;
    background: linear-gradient(to right, #0066CC, #00A651) !important;
    color: white !important;
    border: none !important;
    border-radius: 0.75rem !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; text-decoration: none;
    gap: 0.5rem !important;
    transition: all 0.3s !important; position: relative; top: 0px;}

    .awsm-job-entry-content ul{    margin: 5px 0px 10px 30px;}

    .awsm-job-entry-content h4{    font-size: 24px;
    margin-top: 10px;}

    .post .entry-title{display: inline !important;}

    .blogdisplay{    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);}

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

    .subblogdisplay{    max-width: 1280px;
    margin: 0 auto;}

    .marketing-feature-grid article{    background: white; margin-top: 20px; padding-bottom: 0px;
    border-radius: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;}

    .marketing-feature-grid article h2{font-size: 1.65rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: black;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;}

    .marketing-feature-grid article h2 a{text-decoration: none;   color: black;}

   .marketing-feature-grid .entry-footer .byline, .marketing-feature-grid .entry-footer .comments-link{display: none;}

   .marketing-feature-grid .entry-footer .posted-on{margin: 0px 0px !important; padding: 0.50rem 0px !important;}

   .entry-footer a{color: rgba(0, 0, 0, 0.7); text-decoration: none;}

   .entry-footer svg{font-size: 16px;  fill: #0066CC;}

   .cat-links{margin-left: 10px; display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);}

    .post-thumbnail-inner img{width: 100% !important; height: auto !important; border-radius: 30px 30px 0px 0px !important;}

    .entry-content1 p{    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-box-orient: vertical;}

    .more-link{    font-size: 1rem;
    font-weight: 600; margin-bottom: 1rem; text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066CC;
    transition: gap 0.3s ease;}

    .marketing-feature-grid .entry-header, .marketing-feature-grid .entry-footer, .marketing-feature-grid .entry-content1{padding: 0px 1.5rem;}

    .comment-count{display: none;}

    .byline{display: none;}

    .post-thumbnail{text-align: center !important; margin-top:-5%;}

      .post-thumbnail img{border-radius: 30px; width: 50%; height: 50%;}

      .my-post-space .entry-footer{display: none;}
      .post-navigation{margin: 0rem 2.5rem 5rem 2.5rem;}

      .nav-links a{text-decoration: none;}

      .nav-links{display: inline-block;
    width: 100%;}

    .nav-previous{float: left; width: 49%; margin-right: 2%;}

    .nav-next{float: right; width: 49%;}

    .type-post .entry-footer{display: none;}

 /* ==========================================
   BLOG DETAIL PAGE - COMPLETE CSS
   Modern Apple-Style Design with 3-Column Layout
   Fixed Sidebars on Scroll
   ========================================== */

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #000;
    background: #fff;
    min-height: 100vh;
}

/* Container */
.blog-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .blog-container {
        padding: 0 3rem;
    }
}

/* Full width container for 3-column layout */
.blog-full-container {
    width: 100%;
   padding: 2rem 2rem;
}

@media (min-width: 1024px) {
    .blog-full-container {
        padding: 2rem 2rem;
              
    }
}

.myblogdivi{  display: inline-flex;}

/* ==========================================
   HERO SECTION
   ========================================== */
.blog-hero {
    position: relative;
    padding: 7rem 1.5rem 4rem;
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .blog-hero {
        padding: 3rem 3rem 1rem 3rem;
        margin-top: 2.5rem;
    }
}

.blog-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

.blog-hero-content {
    margin: 0 auto;
    position: relative;
    z-index: 10;
    width: 80%;
    float: left; margin-right: 3%;
}

/* Breadcrumb */
.blog-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.blog-breadcrumb-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s;
}

.blog-breadcrumb-link:hover {
    color: white;
}

.blog-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.blog-breadcrumb-current {
    color: white;
    font-size: 0.875rem;
}

/* Category Badge */
.blog-category-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 20;
    padding: 0.5rem 1rem;
    background: linear-gradient(to right, #0066CC, #00A651);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.blog-category-badge svg {
    width: 16px;
    height: 16px;
    color: white;
}

.blog-category-badge span {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
}

/* Hero Title */
.blog-hero-title {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .blog-hero-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .blog-hero-title {
        font-size: 3rem;
    }
}

/* Meta Info */
.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.blog-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
}

.blog-meta-item svg {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.8);
}

/* Social Share */
.blog-social-share {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.blog-share-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.blog-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s;
}

.blog-share-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* ==========================================
   CONTENT SECTION - 3 Column Layout
   ========================================== */
.blog-content-section {
    padding: 2rem 0;
    background: white;
}

@media (min-width: 1024px) {
    .blog-content-section {
        padding: 5rem 0;
    }
}

.blog-content-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .blog-content-wrapper {
        grid-template-columns: 280px 1fr 320px;
        gap: 3rem;
        align-items: start;
    }
}

/* ==========================================
   TABLE OF CONTENTS - LEFT SIDEBAR (STICKY)
   ========================================== */
.blog-toc-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .blog-toc-sidebar {
        display: block;
        position: -webkit-sticky;
        position: sticky;
        top: 2rem;
        align-self: start;
        height: fit-content;
    }
}

.blog-toc-sticky {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding-right: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 102, 204, 0.3) transparent;
}

/* Scrollbar styling for TOC */
.blog-toc-sticky::-webkit-scrollbar {
    width: 4px;
}

.blog-toc-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.blog-toc-sticky::-webkit-scrollbar-thumb {
    background: rgba(0, 102, 204, 0.3);
    border-radius: 4px;
}

.blog-toc-sticky::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 102, 204, 0.5);
}

.blog-toc-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #000;
}

.blog-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.blog-toc-nav li{margin: 10px 0px;}

.blog-toc-link {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-left: 2px solid transparent;
    transition: all 0.3s;
    display: block;
}

.blog-toc-link:hover {
    color: #0066CC;
    border-left-color: #0066CC;
    padding-left: 1rem;
}

.blog-toc-link-active {
    color: #0066CC;
    border-left-color: #0066CC;
    font-weight: 600;
}

/* ==========================================
   ARTICLE - MIDDLE COLUMN (SCROLLABLE)
   ========================================== */
.blog-article {
    max-width: 800px;
}

.blog-section {
    margin-bottom: 3rem;
}

.blog-section-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #000;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .blog-section-title {
        font-size: 2rem;
    }
}

.blog-paragraph {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.blog-paragraph strong {
    font-weight: 600;
    color: #000;
}

/* Lists */
.blog-list {
    list-style: none;
    margin: 1.5rem 0;
    padding-left: 0;
}

.blog-list-item {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    margin-bottom: 0.75rem;
    padding-left: 2rem;
    position: relative;
}

.blog-list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066CC, #00A651);
}

/* Highlight Box */
.blog-highlight-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    border-left: 4px solid #0066CC;
    border-radius: 0.5rem;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
}

.blog-highlight-box p {
    font-size: 1.0625rem;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    margin: 0;
}

.blog-highlight-box strong {
    font-weight: 600;
    color: #000;
}

/* Challenge Items */
.blog-challenge-item {
    margin-bottom: 0rem;
}

.blog-challenge-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0066CC;
    margin-bottom: 0.75rem;
}

/* Feature Items */
.blog-feature-item {
    margin-bottom: 0rem;
}

.blog-feature-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0066CC;
    margin-bottom: 0.75rem;
}

/* Author Bio */
.blog-author-bio {
    display: flex;
    gap: 1.5rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 1rem;
    padding: 2rem;
    margin: 3rem 0;
}

.blog-author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066CC, #00A651);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.blog-author-avatar svg {
    width: 48px;
    height: 48px;
    color: white;
}

.blog-author-info {
    flex: 1;
}

.blog-author-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.blog-author-desc {
    font-size: 0.9375rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

/* Tags */
.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.blog-tag {
    padding: 0.5rem 1rem;
    background: linear-gradient(90deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 50px;
    font-size: 0.875rem;
    color: #0066CC;
    font-weight: 500;
}

/* ==========================================
   RELATED SIDEBAR - RIGHT COLUMN (STICKY)
   ========================================== */
.blog-related-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .blog-related-sidebar {
        display: block;
        position: -webkit-sticky;
        position: sticky;
        top: 2rem;
        align-self: start;
        height: fit-content;
    }
}

.blog-related-sticky {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding-right: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 102, 204, 0.3) transparent;
}

/* Scrollbar styling for Related sticky content */
.blog-related-sticky::-webkit-scrollbar {
    width: 4px;
}

.blog-related-sticky::-webkit-scrollbar-track {
    background: transparent;
}

.blog-related-sticky::-webkit-scrollbar-thumb {
    background: rgba(0, 102, 204, 0.3);
    border-radius: 4px;
}

.blog-related-sticky::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 102, 204, 0.5);
}

.blog-related-sidebar-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #000;
}

.blog-related-sidebar-card {
    background: white;
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    position: relative;
}

.blog-related-sidebar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0066CC, #00A651);
    border-radius: 1rem 1rem 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}

.blog-related-sidebar-card:hover::before {
    transform: scaleX(1);
}

.blog-related-sidebar-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

.blog-related-sidebar-category {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(90deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 50px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #0066CC;
    margin-bottom: 0.75rem;
}

.blog-related-sidebar-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    color: #000;
}

.blog-related-sidebar-card-desc {
    font-size: 0.8125rem !important; 
    color: rgba(0, 0, 0, 0.7) !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem;
}

.blog-related-sidebar-meta {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.5);
}

.blog-related-sidebar-card a {
    text-decoration: none;
    color: inherit;
}

/* ==========================================
   CTA SECTION
   ========================================== */
.blog-cta-section {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .blog-cta-section {
        padding: 5rem 0;
    }
}

.blog-cta-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(135deg, #0066CC, #00A651);
    border-radius: 2rem;
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .blog-cta-content {
        padding: 4rem 3rem;
    }
}

.blog-cta-content::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 40px 40px;
}

.blog-cta-title {
    font-size: 2rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .blog-cta-title {
        font-size: 2.5rem;
    }
}

.blog-cta-text {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.blog-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    position: relative;
    z-index: 1;
}

@media (min-width: 640px) {
    .blog-cta-buttons {
        flex-direction: row;
    }
}

.blog-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.blog-cta-btn svg {
    width: 20px;
    height: 20px;
}

.blog-cta-btn-blue {
    background: white;
    color: #0066CC;
}

.blog-cta-btn-blue:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.blog-cta-btn-outline {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.blog-cta-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* ==========================================
   RELATED POSTS SECTION (Bottom - Optional)
   ========================================== */
.blog-related-section {
    padding: 4rem 0;
    background: white;
}

@media (min-width: 1024px) {
    .blog-related-section {
        padding: 5rem 0;
    }
}

.blog-related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.blog-related-title {
    font-size: 2rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .blog-related-title {
        font-size: 2.5rem;
    }
}

.blog-related-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066CC;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: gap 0.3s;
}

.blog-related-link:hover {
    gap: 0.75rem;
}

.blog-related-link svg {
    width: 18px;
    height: 18px;
}

.blog-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .blog-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .blog-related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.blog-related-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    position: relative;
}

.blog-related-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0066CC, #00A651);
    border-radius: 1.5rem 1.5rem 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}

.blog-related-card:hover::before {
    transform: scaleX(1);
}

.blog-related-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px);
}

.blog-related-category {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(90deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0066CC;
    margin-bottom: 1rem;
}

.blog-related-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.blog-related-card-desc {
    font-size: 0.9375rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog-related-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.5);
}

.blog-related-date,
.blog-related-read {
    display: flex;
    align-items: center;
}

.blog-related-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066CC;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: gap 0.3s;
}

.blog-related-card-link:hover {
    gap: 0.75rem;
}

.blog-related-card-link svg {
    width: 16px;
    height: 16px;
}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */
@media (max-width: 1023px) {
    /* Mobile TOC - Can be added as a dropdown or modal if needed */
    .blog-toc-mobile {
        display: block;
        margin-bottom: 2rem;
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Selection */
::selection {
    background: rgba(0, 102, 204, 0.2);
}



.blogimage{    float: right;
    width: 32%;}

.blogimage img{max-width: 100%; border-radius: 30px;}

.blog-sidebar-related{
display:flex;
flex-direction:column;
gap:20px;
}

.related-card{
 background: white;
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    position: relative; padding-bottom: 0px;
}

.blog-cat{
font-size:12px;
background:#eef3ff;
padding:4px 10px;
border-radius:20px;
color:#2563eb;
}

.related-card h4{
 font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    color: #000; margin-top: 10px;
}

.related-card a{
text-decoration:none;
 color: #000;
}

.blog-meta{
font-size:13px;
color:#777;
}

.related-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0066CC, #00A651);
    border-radius: 1rem 1rem 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}

.related-card:hover::before {
    transform: scaleX(1);
}

.related-card:hover {
    border-color: rgba(0, 102, 204, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}


.awsm-jobs-single-title{display: inherit; color: #fff; font-size: 3rem;
    padding: 10px 20px;  font-weight: 500;
    border-radius: 30px;
    margin-bottom: 20px;}

.awsm-job-container{margin: 4% auto 0px auto !important;}

#post-372 .entry-title{display: none !important;}

.myimgae .post-thumbnail{display: none !important;}


.insight-grid-wrapper{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.insight-card{
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
transition:0.3s;
}

.insight-card:hover{
transform:translateY(-6px);
}

.insight-thumb{
position:relative;
}

.insight-thumb img{
width:100%;
height:220px;
object-fit:cover;
}

.insight-tag{
position:absolute;
top:15px;
left:15px;
background:linear-gradient(90deg,#0d6efd,#00b894);
color:#fff;
padding:6px 14px;
border-radius:20px;
font-size:12px;
}

.insight-body{
padding:20px;
}

.insight-heading{
font-size:18px;
margin-bottom:10px;
}

.insight-heading a{
text-decoration:none;
color:#222;
}

.insight-summary{
font-size:14px;
color:#666;
margin-bottom:15px;
}

.insight-meta{
font-size:13px;
color:#777;
margin-bottom:12px;
}

.insight-link{
font-weight:600;
color:#0d6efd;
text-decoration:none;
}



.career-hero-section{
width:100%;
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 50%, #00A651 100%);
padding:80px 0;
color:#fff;
}

.career-hero-inner{
max-width:1280px;
margin:auto;
padding:0 20px;
}

.career-container{
max-width:1280px;
margin:auto;
padding:60px 20px;
}


.career-apply{
background:#fff;
padding:30px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.career-apply{display: none;}



/* ==========================================
   CASE STUDY SECTION
   ========================================== */
.case-study-section {
    padding: 5rem 1.5rem;
    background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 50%, #f5f5f7 100%);
    position: relative;
}

@media (min-width: 1024px) {
    .case-study-section {
        padding: 7rem 3rem;
    }
}

.case-study-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* ==========================================
   HEADER
   ========================================== */
.case-study-header {
    text-align: center;
    margin-bottom: 4rem;
}

.case-study-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #0066CC;
    background: linear-gradient(90deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
}

.case-study-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

@media (min-width: 768px) {
    .case-study-title {
        font-size: 3.5rem;
    }
}

@media (min-width: 1024px) {
    .case-study-title {
        font-size: 4rem;
    }
}

.case-study-highlight {
    background: linear-gradient(135deg, #0066CC, #00A651);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.case-study-subtitle {
    font-size: 1.125rem;
    color: rgba(29, 29, 31, 0.7);
    max-width: 700px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .case-study-subtitle {
        font-size: 1.25rem;
    }
}

.case-study-subtitle strong {
    font-weight: 600;
    color: #1d1d1f;
}

.case-study-title-underline {
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, #0066CC, #00A651);
    margin: 0 auto;
    border-radius: 4px;
}

/* ==========================================
   CARD GRID
   ========================================== */
.case-study-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .case-study-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .case-study-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* ==========================================
   CASE STUDY CARDS
   ========================================== */
.case-study-card {
    background: white;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.case-study-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0066CC, #00A651);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-study-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 102, 204, 0.2);
}

.case-study-card:hover::before {
    transform: scaleX(1);
}

/* Card Image */
.case-study-card-image {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
}

.case-study-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-study-card:hover .case-study-card-image img {
    transform: scale(1.08);
}

.case-study-card-icon {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 64px;
    height: 64px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(20px);
    transition: all 0.4s;
}

/* Card Color Variants */
.case-study-card-blue .case-study-card-icon {
    background: rgba(0, 102, 204, 0.9);
    color: white;
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.4);
}

.case-study-card-teal .case-study-card-icon {
    background: rgba(0, 166, 81, 0.9);
    color: white;
    box-shadow: 0 8px 20px rgba(0, 166, 81, 0.4);
}

.case-study-card-purple .case-study-card-icon {
    background: rgba(102, 51, 204, 0.9);
    color: white;
    box-shadow: 0 8px 20px rgba(102, 51, 204, 0.4);
}

.case-study-card:hover .case-study-card-icon {
    transform: rotate(5deg) scale(1.1);
}

/* Card Content */
.case-study-card-content {
    padding: 2rem;
}

.case-study-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.case-study-card-category {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.case-study-card-blue .case-study-card-category {
    color: #0066CC;
}

.case-study-card-teal .case-study-card-category {
    color: #00A651;
}

.case-study-card-purple .case-study-card-category {
    color: #6633CC;
}

/* Card Details */
.case-study-card-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.case-study-detail-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.case-study-detail-icon {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.case-study-card-blue .case-study-detail-icon {
    background: rgba(0, 102, 204, 0.1);
    color: #0066CC;
}

.case-study-card-teal .case-study-detail-icon {
    background: rgba(0, 166, 81, 0.1);
    color: #00A651;
}

.case-study-card-purple .case-study-detail-icon {
    background: rgba(102, 51, 204, 0.1);
    color: #6633CC;
}

.case-study-detail-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(29, 29, 31, 0.6);
    margin-bottom: 0.25rem;
}

.case-study-detail-text {
    font-size: 0.9375rem;
    color: #1d1d1f;
    line-height: 1.4;
    font-weight: 500;
}

/* Card Result */
.case-study-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s;
}

.case-study-card-blue .case-study-result {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    color: #0066CC;
}

.case-study-card-teal .case-study-result {
    background: linear-gradient(135deg, rgba(0, 166, 81, 0.05), rgba(0, 102, 204, 0.05));
    color: #00A651;
}

.case-study-card-purple .case-study-result {
    background: linear-gradient(135deg, rgba(102, 51, 204, 0.05), rgba(0, 102, 204, 0.05));
    color: #6633CC;
}

.case-study-result svg {
    flex-shrink: 0;
}

.case-study-result-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.case-study-result-text {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(29, 29, 31, 0.7);
}

/* Card Button */
.case-study-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    border: 2px solid;
}

.case-study-card-blue .case-study-card-btn {
    background: rgba(0, 102, 204, 0.05);
    color: #0066CC;
    border-color: rgba(0, 102, 204, 0.2);
}

.case-study-card-blue .case-study-card-btn:hover {
    background: #0066CC;
    color: white;
    border-color: #0066CC;
    gap: 0.75rem;
}

.case-study-card-teal .case-study-card-btn {
    background: rgba(0, 166, 81, 0.05);
    color: #00A651;
    border-color: rgba(0, 166, 81, 0.2);
}

.case-study-card-teal .case-study-card-btn:hover {
    background: #00A651;
    color: white;
    border-color: #00A651;
    gap: 0.75rem;
}

.case-study-card-purple .case-study-card-btn {
    background: rgba(102, 51, 204, 0.05);
    color: #6633CC;
    border-color: rgba(102, 51, 204, 0.2);
}

.case-study-card-purple .case-study-card-btn:hover {
    background: #6633CC;
    color: white;
    border-color: #6633CC;
    gap: 0.75rem;
}

/* ==========================================
   VIEW ALL BUTTON
   ========================================== */
.case-study-view-all {
    text-align: center;
    margin-bottom: 2.5rem;
}

.case-study-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 2.5rem;
    background: linear-gradient(135deg, #0066CC, #00A651);
    color: white;
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 102, 204, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.case-study-btn-primary::before {
    inset: 0;
    background: linear-gradient(135deg, #0052A3, #008C44);
    transition: opacity 0.4s;
}

.case-study-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 102, 204, 0.4);
    gap: 1rem;  color: white; text-decoration: none;
}

.case-study-btn-primary:hover::before {
    opacity: 1; color: white;
}

.case-study-btn-primary svg {
    position: relative;
    z-index: 1; color: white;
}

/* ==========================================
   INDUSTRIES TRUST BAR
   ========================================== */
.case-study-trust {
    text-align: center;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.case-study-trust-label {
    font-size: 0.875rem;
    color: rgba(29, 29, 31, 0.6);
    font-weight: 500;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

.case-study-industries {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .case-study-industries {
        gap: 2.5rem;
    }
}

.case-study-industry {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    cursor: default;
}

.case-study-industry:hover {
    border-color: rgba(0, 102, 204, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.case-study-industry svg {
    width: 20px;
    height: 20px;
    color: #0066CC;
}

.case-study-industry span {
    font-size: 0.800rem;
    font-weight: 600;
    color: #1d1d1f;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 767px) {
    .case-study-card-content {
        padding: 1.5rem;
    }
    
    .case-study-industries {
        gap: 1rem;
    }
    
    .case-study-industry {
        padding: 0.75rem 1rem;
    }
}

.loadingsoon{font-size: 25px; text-align: center; color: #000; margin: 50px 0px 0px 0px;}








.cs-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* CARD */
.cs-card {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    transition: 0.4s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.cs-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0066CC, #00A651);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 102, 204, 0.2);
}

.cs-card:hover::before {
    transform: scaleX(1);
}


/* IMAGE */
.cs-img {
    height: 200px;
    background-size: cover;
    position: relative;
}

/* TOP ICON */
.cs-top-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    position: absolute;
    top: 15px;
    left: 15px; 
}

.cs-top-icon svg{    color: #fff;
    width: 45px;
    height: 45px;
}


/* COLORS */
.blue .cs-top-icon {     background: linear-gradient(to right, #0066CC, #00A651); }
.green .cs-top-icon { background:#22c55e; }
.purple .cs-top-icon { background:#8b5cf6; }

/* CONTENT */
.cs-content {
    padding: 20px;
}

.cs-content h3{font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 0.25rem;
    line-height: 1.3;}

.cs-tag {
        font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    line-height: 1.4;
        color: #0066CC;
}

/* ROW */
.cs-row {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.cs-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.cs-icon svg{
    padding: 4px 0px 0px 4px;     width: 23px;
    height: 23px;}


.problem {     background: rgba(0, 102, 204, 0.1); color: #0066CC;     position: relative;
    top: 6px;}
.solution {     background: rgba(0, 166, 81, 0.1);
    color: #00A651;     position: relative;
    top: 6px;}

/* EFFECT BOX */
.cs-effect {
    margin-top: 22px;
    padding: 12px;
    border-radius: 10px;
        background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 166, 81, 0.05));
    font-weight: bold;
        display: inline-block;
    width: 100%;
}

.effect{    float: left;
    width: 16%;
}

.effect svg{    width: 40px !important;
    height: 40px !important;
    color: #0066CC;
    position: relative;
    top: -8px;}


    .effecttxt{float: left;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(29, 29, 31, 0.9);
    margin-top: 3px;}


/* BUTTON */
.cs-btn {
   display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    border: 2px solid; margin-top: 15px; margin-bottom: 5px;
}

.cs-btn.blue { background: rgba(0, 102, 204, 0.05);
    color: #0066CC;
    border-color: rgba(0, 102, 204, 0.2); }
.cs-btn.green { border:1px solid #22c55e; color:#22c55e; }
.cs-btn.purple { border:1px solid #8b5cf6; color:#8b5cf6; }

.cs-btn:hover {
    color:#fff;
}

.cs-btn.blue:hover { background:#0066CC; }
.cs-btn.green:hover { background:#22c55e; }
.cs-btn.purple:hover { background:#8b5cf6; }

.probtxt{    font-size: 0.9375rem;
    color: #1d1d1f;
    line-height: 1.5;
    font-weight: 500;
}
.probtxt span{font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(29, 29, 31, 0.6);}


        /* ==========================================
   CASE STUDY DESIGN
   ========================================== */
/* Container */
.cs-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media (max-width: 768px) {
    .cs-container {
        padding: 0 1.5rem;
    }
}

/* ==========================================
   HERO SECTION - ENHANCED
   ========================================== */
.cs-hero {
    position: relative;
    padding-top: 4rem;
    padding-bottom: 4rem;
    background: linear-gradient(135deg, #0066CC, #0052A3, #00A651);
    overflow: hidden;
     color: white;
}

.cs-hero-overlay {
   position: absolute;
    inset: 0;
    opacity: 0.2;
}

.cs-hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
}


/* Hero Content */
.cs-hero-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .cs-hero-content {
        grid-template-columns: 1fr 380px;
        gap: 4rem;
        align-items: center;
    }
}

.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    width: fit-content;
}

.cs-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .cs-hero-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .cs-hero-title {
        font-size: 3.5rem;
    }
}

.cs-hero-subtitle {
    font-size: 1.125rem !important;
    opacity: 0.95;
    margin-bottom: 2rem;
    line-height: 1.6 !important; color: #fff !important;
    font-weight: 400;
}

@media (min-width: 768px) {
    .cs-hero-subtitle {
        font-size: 1.25rem;
    }
}

/* CTA Button */
.cs-hero-cta {
    margin-top: 2rem;
}

.cs-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 2.5rem;
    background: white;
    color: #0066CC;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.cs-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    gap: 1rem;
}

/* Hero Stats */
.cs-hero-stats {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cs-stat-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 1rem;
    padding: 1.75rem;
    transition: all 0.3s; display: inline-flex;
}

.cs-stat-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(8px);
}

.cs-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem; margin-right: 15px;
}

.cs-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
}


.cs-stat-label {
    font-size: 0.9375rem;
    opacity: 0.95;
}

/* Project Info Bar */
.cs-project-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.cs-info-label {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.cs-info-value {
    font-size: 1rem;
    font-weight: 600;
}

/* ==========================================
   MAIN CONTENT
   ========================================== */
.cs-main {
    padding: 5rem 0;
    background: #f8f9fa;
}

.cs-section {
    background: white;
    padding: 3rem;
    border-radius: 1.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
    .cs-section {
        padding: 2rem 1.5rem;
    }
}

.cs-section:last-child {
    margin-bottom: 0;
}

/* Section Header */
.cs-section-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.cs-section-number {
    font-size: 1rem;
    font-weight: 700;
    color: #0066CC;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    border: 2px solid rgba(0, 102, 204, 0.2); margin-top: 7px;
}

.cs-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .cs-section-title {
        font-size: 2.25rem;
    }
}

.cs-title-underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #0066CC, #00A651);
    border-radius: 4px;
}

.cs-section-content {
    max-width: 100%;
}

/* Text Content */
.cs-text-content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: rgba(29, 29, 31, 0.85);
    margin-bottom: 2.5rem;
}

.cs-text-content p {
    margin-bottom: 1.5rem;
}

.cs-text-content p:last-child {
    margin-bottom: 0;
}

.cs-text-content strong {
    color: #0066CC;
    font-weight: 600;
}

.cs-subsection-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 2.5rem 0 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(0, 102, 204, 0.1);
}

/* ==========================================
   PROBLEM CARDS
   ========================================== */
.cs-problem-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .cs-problem-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cs-problem-card {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    padding: 2rem;
    border-radius: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    border-left: 4px solid #0066CC;
    transition: all 0.3s;
}

.cs-problem-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border-left-color: #00A651;
}

.cs-problem-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    color: #0066CC;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.cs-problem-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.cs-problem-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(29, 29, 31, 0.75);
}

/* ==========================================
   FEATURE CARDS
   ========================================== */
.cs-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .cs-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cs-feature-card {
    background: white;
    padding: 2.5rem;
    border-radius: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.cs-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0066CC, #00A651);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}

.cs-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 102, 204, 0.15);
    border-color: rgba(0, 102, 204, 0.3);
}

.cs-feature-card:hover::before {
    transform: scaleX(1);
}

.cs-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    color: #0066CC;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: all 0.3s;
}

.cs-feature-card:hover .cs-feature-icon {
    background: linear-gradient(135deg, #0066CC, #00A651);
    color: white;
    transform: scale(1.1);
}

.cs-feature-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.cs-feature-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(29, 29, 31, 0.75);
}

/* ==========================================
   TECHNOLOGY STACK
   ========================================== */

.cs-tech-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .cs-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cs-tech-item {
    background: white;
    padding: 1.75rem;
    border-radius: 0.75rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.cs-tech-item:hover {
    border-color: rgba(0, 102, 204, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.cs-tech-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(29, 29, 31, 0.6);
    margin-bottom: 0.75rem;
}

.cs-tech-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0066CC;
}

/* ==========================================
   TIMELINE
   ========================================== */
.cs-timeline {
    position: relative;
    padding-left: 3rem;
    margin-top: 2.5rem;
}

.cs-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    border-radius: 3px;
}

.cs-timeline-item {
    position: relative;
    margin-bottom: 2.5rem;
}

.cs-timeline-item:last-child {
    margin-bottom: 0;
}

.cs-timeline-marker {
    position: absolute;
    left: -3rem;
    top: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066CC, #00A651);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
    border: 3px solid white;
}

.cs-timeline-content {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.03), rgba(0, 166, 81, 0.03));
    padding: 1.75rem;
    border-radius: 1rem;
    border-left: 3px solid #0066CC;
    transition: all 0.3s;
}

.cs-timeline-content:hover {
    background: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateX(8px);
}

.cs-timeline-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 0.5rem;
}

.cs-timeline-text {
    font-size: 0.9375rem;
    color: rgba(29, 29, 31, 0.75);
    line-height: 1.7;
}

/* ==========================================
   IMPACT CARDS
   ========================================== */
.cs-impact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
}

@media (min-width: 640px) {
    .cs-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cs-impact-card {
    background: linear-gradient(135deg, #ffffff, #f9fafb);
    padding: 2.5rem;
    border-radius: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s;
}

.cs-impact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 102, 204, 0.15);
    border-color: rgba(0, 102, 204, 0.3);
}

.cs-impact-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 166, 81, 0.1));
    color: #0066CC;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.cs-impact-card:hover .cs-impact-icon {
    background: linear-gradient(135deg, #0066CC, #00A651);
    color: white;
    transform: scale(1.1) rotate(5deg);
}

.cs-impact-number {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #0066CC, #00A651);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.cs-impact-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 0.75rem;
}

.cs-impact-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(29, 29, 31, 0.75);
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 767px) {
    .cs-hero {
        padding: 2rem 0 3rem;
    }
    
    .cs-main,
    .cs-related {
        padding: 3rem 0;
    }
    
    .cs-timeline {
        padding-left: 2.5rem;
    }
    
    .cs-timeline::before {
        left: 16px;
    }
    
    .cs-timeline-marker {
        left: -2.5rem;
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .cs-section-header {
        flex-direction: column;
        gap: 1rem;
    }
}

.footer-social-link svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 1.5;
  color: #000 !important; /* soft gray like your UI */
  transition: all 0.3s ease;
}

.footer-social-link:hover svg {
  color: #fff !important; /* your brand blue */
}