:root {
    --gray: #454545;
    --graypara: #767676;
    --red: #dd1403;
    --white: #ffffff;
    --slide-size: 450px;
    --radius: 20px;
    --gap: 20px;
    --speed: 40s;
    --panel-dark: #2f2f2f;
    --text-white: #ffffff;
    --collapsed-width: 100px;
    --transition: 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    --cs-card-bg: #ffffff;
    --cs-card-radius: 18px;
    --cs-card-shadow: 0 16px 40px rgba(16, 24, 40, 0.08);
    --cs-muted: #667085;
    --cs-title: #101828;

    --cs-active: #e11d2e;
    /* red border */
    --cs-rail-bg: #f6f7f9;
    --cs-thumb-radius: 12px;

    --cs-gap: 18px;
    --cs-thumb-h: 92px;
    --cs-thumb-w: 170px;
}

body {
    background: #f8f8f8 !important;
    overflow-x: hidden;
}

.global-container {
    max-width: 1600px;
    width: 95%;
    margin: 0 auto;
}

body .section-label {
    background-color: #f0f0f0 !important;
}



/* Attention Animation */
@keyframes pulseGlow {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes floatUpDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes arrowMove {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }

    100% {
        transform: translateX(0);
    }
}

/* Target only this specific button */
a.white-btn-contact.btn-contact {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ===== RED SHINE EFFECT (#dd1403) ===== */
a.white-btn-contact.btn-contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(221, 20, 3, 0) 0%,
            rgba(221, 20, 3, 0.6) 50%,
            rgba(221, 20, 3, 0) 100%);
    transform: skewX(-20deg);
    animation: redShineMove 3s infinite;
}

/* Shine animation */
@keyframes redShineMove {
    0% {
        left: -120%;
    }

    100% {
        left: 150%;
    }
}

/* ===== SOFT PULSE ===== */
a.white-btn-contact.btn-contact.attention {
    animation: softPulseRed 2s ease-in-out infinite;
}

@keyframes softPulseRed {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Arrow movement */
a.white-btn-contact.btn-contact.attention i {
    animation: arrowMove 1.5s ease-in-out infinite;
}

@keyframes arrowMove {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }
}

/* Stop animation on hover */
a.white-btn-contact.btn-contact:hover {
    animation: none;
}

a.white-btn-contact.btn-contact:hover::before {
    animation: none;
}



body.service-detail.business-operation section.benefits-business-value.why-choose-us-sec .service-gif {
    margin-top: 0;
}

/* Apply animation */

body.tech-page.dig-tech-body section.benefits-business-value.why-choose-us-sec .service-gif {
    max-width: 100%;
}

body.service-detail.business-operation section.services-section.stretegy-section.inner-sec-about {
    padding-bottom: 30px;
}

body.service-detail.business-operation section.benefits-business-value.why-choose-us-sec {
    padding-top: 0;
}



/* Base button setup */
.btn-contact {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* === SHINE EFFECT === */
.btn-contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: shineMove 3s infinite;
}

body.service-detail.business-solution section.delivering-section .section-label {
    max-width: 165px !important;
}

section.hero-banner a.white-btn-contact.btn-contact {
    padding: 10px 20px;
}

/* Shine animation */
@keyframes shineMove {
    0% {
        left: -100%;
    }

    100% {
        left: 150%;
    }
}

/* === SLIGHT PULSE EFFECT === */
.btn-contact.attention {
    animation: softPulse 2s ease-in-out infinite;
}

@keyframes softPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
    }
}

/* Arrow subtle movement */
.btn-contact.attention i {
    animation: arrowMove 1.5s ease-in-out infinite;
}

@keyframes arrowMove {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }
}

/* Stop animation on hover (important for UX) */
.btn-contact:hover {
    animation: none;
}

.btn-contact:hover::before {
    animation: none;
}

.value-card {
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.4s ease;
    cursor: pointer;
}

/* Remove default p margin */
.value-para p {
    margin: 0;
}

/* Hide content completely */
.value-card {
    position: relative;
    isolation: isolate;
    /* Creates a new stacking context */
}

/* Ensure cards are isolated and don't affect each other */
.value-card {
    position: relative;
    isolation: isolate;
    /* Creates a new stacking context */
}

/* Hide content completely */
.value-para {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    margin-top: 0;
}

body.about-us section.values-section {
    align-items: flex-start;
    padding-bottom: 45px !important;
    position: relative;

}

section.values-section:before {
    content: '';
    height: 15%;
    width: 100%;
    position: absolute;
    top: -4px;
    background: linear-gradient(to bottom, rgba(248, 248, 248, 1) 0%, rgba(248, 248, 248, 0) 100%);
    z-index: 2;
}

section.values-section:after {
    content: '';
    height: 15%;
    width: 100%;
    position: absolute;
    bottom: -12px;
    background: linear-gradient(to bottom, rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 1) 100%);
    z-index: 3;
}

/* Show on hover - only for the specific card being hovered */
.value-card:hover .value-para {
    max-height: 200px;
    /* adjust if needed */
    opacity: 1;
    margin-top: 15px;
}

/* Ensure grid layout doesn't cause issues */
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    /* Adjust gap as needed */
    align-items: start;
    /* Important: align to start so cards don't stretch */
}

/* Show on hover */
.value-card:hover .value-para {
    max-height: 200px;
    /* adjust if needed */
    opacity: 1;
    margin-top: 15px;
}

p {
    color: #767676;
    font-size: 18px;
    line-height: 1.7em;
}

section {
    padding: 50px 0;
}

.parent.mobile {
    display: none;
}

h1,
h2,
h3,
h4 {
    text-transform: capitalize;
}

@font-face {
    font-family: 'tahoma';
    src: url('../font/tahoma.ttf') format('woff2');
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Source-Serif';
    src: url('../font/SourceSerifPro-It.otf') format('woff2');
    font-style: normal;
    font-display: swap;
    font-weight: 700;
}


/* WHITE BUTTON ANIMATION  */
.white-btn-contact {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.35s ease;
}

main.contact-page-wrapper p.start strong a {
    color: #dd1403 !important;
}

main.contact-page-wrapper section.hero-banner .global-container {
    display: flex;
    gap: 60px;
    align-items: center;
}

.contact-page-wrapper section.benefits-business-value.why-choose-us-sec.our-work.contact-us-our-work .section-label {
    background-color: #f7cecb !important;
}

main.contact-page-wrapper h1.start {
    font-size: 38px;
}

main.contact-page-wrapper section.hero-banner .global-container .image-container {
    max-width: 750px;
}

main.contact-page-wrapper .image-container img {
    border-radius: 16px;
}

main.contact-page-wrapper section.hero-banner {
    gap: 55px;
    padding: 0;
    margin: 0 !important;
    width: 100%;
    padding: 50px 0;
}

.white-btn-contact::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #dd1403;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;

    transition: transform 0.45s ease-in-out;
}

.white-btn-contact:hover::after {
    transform: scaleX(1);
}

.white-btn-contact:hover,
.white-btn-contact:hover i {
    color: #fff !important;
}

/* WHITE BUTTON ANIMATION  */

/* RED BUTTON HOVER EFFECT  */
.red-btn-hover-effect {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.35s ease;
}

.red-btn-hover-effect::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #b40c02;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;

    transition: transform 0.45s ease-in-out;
}

.red-btn-hover-effect:hover::after {
    transform: scaleX(1);
}

.red-btn-hover-effect:hover {
    border: 1px solid #dd1403;
}

.red-btn-hover-effect:hover,
.red-btn-hover-effect:hover i {
    color: #fff !important;
}

/* RED BUTTON HOVER EFFECT  */


/* 2. Apply it to your website */
* {
    font-family: 'tahoma';
    letter-spacing: 0;
}

h1,
h2,
h3,
h4 {
    font-weight: 500 !important;
}

/* tab scroll  */
/* Default (Desktop) */
.tabs-wrapper {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    /* desktop par normal wrap */
}

/* Mobile Only */
/* EXTRA  */


body.service-detail.business-solution section.delivering-section .laptop-container {
    max-width: 460px;
    margin: 0 auto;
}


body.service-detail.business-solution section.use-cases-section.inner-service {
    padding-bottom: 0;
}



section.extra-work-sec .global-container {
    z-index: 3;
}

/* EXTRA  */
body.about-us .service-card {
    box-shadow: none;
}

body.service-page.ui-ux-body section.hero-banner.service-banner {
    padding-bottom: 100px;
}

section.hero-finance img.hero-logo {
    max-width: 150px;
}

body.service-detail.business-solution section.services-section.stretegy-section.inner-sec-about .row.centered-row .section-label {
    max-width: 341px !important;
}

div#qr {
    max-width: 100px !important;
}

div#lending {
    max-width: 120px !important;
}

div#digital-products {
    max-width: 167px !important;
}


/* tab scroll  */
/* ================= BANNER ================= */
body.home .hero-banner,
body.about-us .hero-banner,
body.contact-page .contact-page-wrapper .hero-banner {
    background: url(../images/dotted-bg.png);
    background-repeat: no-repeat;
    padding: 35px 0;
    position: relative;
    overflow: hidden;
    animation: moveDots 20s linear infinite;
}

body.digital-marketing section.impact-section.extra-work-sec.marketing-services {
    padding-top: 50px;
}

body .main-tab-content {
    display: none;
}

body .main-tab-content.active {
    display: block;
}

/* All Banners  */
body.service-detail.business-solution .hero-banner {
    background: url(../images/solution-banner.png);
    padding: 70px 20px;
    background-repeat: no-repeat;

}

body.privacy-policy section.hero-banner.service-banner {
    background: url(../images/privacy-banner.png);
    padding: 100px 20px;
    background-repeat: no-repeat;
}

body.terms section.hero-banner.service-banner {
    background: url(../images/terms-banner.png);
    padding: 100px 20px;
    background-repeat: no-repeat;
}

body.ai-tabs.ai-dig-body .hero-banner {
    background: url(../images/AI-Banner.webp);
    padding: 70px 20px;
    background-repeat: no-repeat;
}

body.service-detail.business-operation .hero-banner.service-banner.service-detail-banner {
    background: url(../images/operation-banner.png);
    padding: 70px 20px;
    background-repeat: no-repeat;
}

body.digital-marketing main.contact-page-wrapper section.hero-banner {
    background: url(../images/marketing-banner.png);
    padding: 70px 20px;
    background-repeat: no-repeat;
}

body.service-page.ui-ux-body section.hero-banner.service-banner {
    background: url(../images/ui-ux-banner.png);
    padding: 70px 20px;
    background-repeat: no-repeat;
}

body.tech-page.dig-tech-body.digital-technology section.hero-banner.service-banner {
    background: url(../images/digital-technology.png);
    padding: 70px 20px;
    background-repeat: no-repeat;
}

body.service-detail.business-solution .hero-banner h1,
body.service-detail.business-solution .hero-banner h1 span,
body.service-detail.business-solution .hero-banner p {
    color: #fff;
}

body.ai-tabs.ai-dig-body .hero-banner h1,
body.ai-tabs.ai-dig-body .hero-banner h1 span,
body.ai-tabs.ai-dig-body .hero-banner p {
    color: #fff;
}

body.service-detail.business-operation .hero-banner.service-banner.service-detail-banner h1,
body.service-detail.business-operation .hero-banner.service-banner.service-detail-banner h1 span,
body.service-detail.business-operation .hero-banner.service-banner.service-detail-banner p {
    color: #fff;
}

body.digital-marketing main.contact-page-wrapper section.hero-banner h1,
body.digital-marketing main.contact-page-wrapper section.hero-banner h1 span,
body.digital-marketing main.contact-page-wrapper section.hero-banner p {
    color: #fff;
}

body.service-page.ui-ux-body section.hero-banner.service-banner h1,
body.service-page.ui-ux-body section.hero-banner.service-banner h1 span,
body.service-page.ui-ux-body section.hero-banner.service-banner p {
    color: #fff;
}

body.tech-page.dig-tech-body.digital-technology section.hero-banner.service-banner h1,
body.tech-page.dig-tech-body.digital-technology section.hero-banner.service-banner h1 span,
body.tech-page.dig-tech-body.digital-technology section.hero-banner.service-banner p {
    color: #fff;
}

body.privacy-policy section.hero-banner.service-banner h1,
body.privacy-policy section.hero-banner.service-banner h1 span.highlight-text,
body.privacy-policy section.hero-banner.service-banner p {
    color: #fff;
}

body.terms section.hero-banner.service-banner h1,
body.terms section.hero-banner.service-banner h1 span.highlight-text,
body.terms section.hero-banner.service-banner p {
    color: #fff;
}

body.privacy-policy ul li {
    color: #767676;
    font-size: 18px;
    line-height: 1.7em;
}

.featured-desc h6 {
    color: #454545;
    font-weight: 700;
    padding: 10px 0;
}

body.ai-tabs.ai-dig-body .case-studies .section-label {
    max-width: 356px;
    margin: 0 auto 20px auto;

}

body.service-detail.business-solution .cont h2,
body.service-detail.business-solution .cont p {
    text-align: center;
}

body.service-detail.business-solution section#portfolioTwoProjects {
    text-align: left;
}

body.ai-tabs.ai-dig-body .case-studies h2.h2 {
    margin: 0 auto 40px auto;
    text-align: center;

}

body.service-detail.business-solution .impact-row-num .stat-box {
    text-align: left;
}

body.ai-tabs.ai-dig-body .case-studies .featured-title {
    font-size: clamp(22px, 2.2vw, 34px);
}

/* All Banners  */

@keyframes moveDots {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 50px 50px;
    }

    100% {
        background-position: 0 0;
    }
}

.hero-banner * {
    position: relative;
    z-index: 1;
}

@keyframes floatDots {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-40px, -40px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.service-gif img {
    width: 100%;
}

body.tech-page.dig-tech-body section.logo-slider {
    margin-top: 50px;
}

body.tech-page.dig-tech-body .service-gif img {
    width: 100%;
}

.hero-banner h1 {
    font-size: 54px;
    line-height: 1.25;
    margin-bottom: 16px;
    color: var(--gray);
}

body.tech-page.dig-tech-body section.main-marketing.dig-main-market {
    padding-top: 0;
}

.highlight-text {
    color: var(--red);
    font-family: 'tahoma';
    font-weight: 700;
    letter-spacing: 2px;
}

.bottom-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-banner p {
    margin: 0 auto 32px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--graypara);
}

.hero-banner p strong {
    color: var(--red);
}

.rating {
    font-size: 16px;
    color: #767676;
    padding-left: 10px;
}

section.section-padding.what-we-do-sec h2,
section.section-padding.what-we-do-sec p {
    text-align: center;
}

.rating-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rating-wrap {
    display: flex;
}

span.rate-digit {
    background-color: #171717;
    border-radius: 50px;
    padding: 5px;
    color: #fff;
    font-size: 10px;
    margin-left: 10px;
}

ul.list-unstyled li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 18px;
}

ul.list-unstyled li:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    background-image: url("../images/tick.webp");
    background-size: contain;
}

/* body .case-studies {
    display: none;
} */

body #portfolio {
    display: none;
}

body.service-page.ui-ux-body .case-studies {
    display: block;
}

a.white-btn-contact.btn-contact {
    color: #454545;
    background-color: #fff;
    border: 1.5px solid #E1E1E1;
    font-weight: 500;
    padding: 10px 15px 10px 10px;
    margin-top: 10px;

}

.rating i {
    color: #f4b400;
    font-size: 12px;
}

.btn-connect {
    border: 1px solid #ddd;
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 14px;
    color: var(--gray);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

section.services-section.home-service-sec .service-card {
    min-height: 485px;
}

section.services-section.home-service-sec .service-card a {
    position: absolute;
    bottom: 25px;
}

.btn-connect:hover {
    background: #f8f8f8;
}

/* ===== SLIDER WRAPPER ===== */
.slider-wrapper {
    width: 100vw;
    overflow: hidden;
    padding: 40px 0;
}

/* ===== SLIDER TRACK ===== */
.slider-track {
    display: flex;
    width: max-content;
    gap: var(--gap);
    animation: scroll var(--speed) linear infinite;
}

/* 2. PAUSE ON HOVER */
.slider-wrapper:hover .slider-track {
    animation-play-state: paused;
}

/* ===== SLIDE ITEM ===== */
.slide {
    flex: 0 0 var(--slide-size);
    height: var(--slide-size);
    border-radius: var(--radius);
    overflow: hidden;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}

.logo-slider {
    text-align: center;
}

/* IMAGE SECTION  */
.logo-slider p {
    padding-bottom: 10px;
}

.logo-wrap {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.logo-wrap a img {
    max-width: 60px;
}

.logo-wrap a {
    margin: 0 20px;
    text-decoration: none;
}

.logo-wrap a:hover {
    filter: grayscale(0);
}

.slide-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    align-items: start;
    background-color: #fff;
    padding: 41px;
    border-radius: 25px;
    position: relative;
}

.reliable-partner-about h2,
.reliable-partner-about p {
    text-align: center;
}

.illustration-wrapper {
    margin-top: 20px;
    width: 100%;
    max-width: 732px;
    position: absolute;
    right: 0;
    bottom: -100px;
}

/* Left Section: Case Studies */
.case-studies-section {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.case-study-card {
    background-color: #f7f7f7;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

.case-study-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.case-study-title {
    color: var(--gray);
    font-size: 18px;
    font-weight: 500 !important;
    margin-bottom: 15px;
    line-height: 1.3;
}

.case-study-text {
    color: var(--gray);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
}

/* Right Section: Problem Statement */
.problem-statement-section {
    display: flex;
    flex-direction: column;
    gap: 25px;
}



.problem-label {
    display: inline-block;
    background-color: #F0F0F0;
    color: var(--gray);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    width: fit-content;
}

.problem-heading {
    color: var(--gray);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.problem-heading .highlight-text {
    color: var(--red);
    font-weight: 700;
}

.problem-description {
    color: var(--text-light);
    font-size: 16px;
    line-height: 1.8;
    max-width: 90%;
    margin-top: 10px;
}



.maze-illustration {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ===== ANIMATION ===== */
/* 1. INFINITE LOOP CALCULATION */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* We move the track by exactly 5 slides + 5 gaps */
        /* This makes the "Cloned Slide 1" sit exactly where "Original Slide 1" started */
        transform: translateX(calc(-1 * ((var(--slide-size) * 5) + (var(--gap) * 5))));
    }
}

/* SERVICE SECTION  */
.services-section {
    position: relative;
    padding: 50px 0 80px 0;
}

section.services-section.why-choose-us-sec {
    padding: 0;
    background: linear-gradient(90deg, #0A0A0A 0%, #6A0600 100%);
}

.background-svg {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.2;
    overflow: hidden;
}

body h2 {
    font-size: 40px !important;
}

section.extra-work-sec:before {
    content: '';
    height: 20%;
    width: 100%;
    position: absolute;
    top: -21px;
    background: linear-gradient(to bottom, rgba(248, 248, 248, 1) 0%, rgba(248, 248, 248, 0) 100%);
    z-index: 2;
}

section.extra-work-sec {
    padding-top: 50px;
    position: relative;
}

section.slider-wrapper .slider-track .slide img {
    max-height: 400px;
    object-fit: cover;
}

.service-card.discovery-card,
.service-card.wireframes-card {
    flex-direction: column-reverse;
    justify-content: center;
}

section.impact-section.extra-sec.extra-work-sec.benefits-business-value.why-choose-us-sec .row h2 {
    text-align: left;
}

section.impact-section.extra-sec.extra-work-sec.benefits-business-value.why-choose-us-sec {
    padding: 0;
}

section.impact-section.extra-sec.extra-work-sec.benefits-business-value.why-choose-us-sec .s-box {
    text-align: left;
}

section.impact-section.extra-sec.extra-work-sec.benefits-business-value.why-choose-us-sec .s-box ul {
    padding-left: 20px;
}

section.impact-section.extra-sec.extra-work-sec.benefits-business-value.why-choose-us-sec .s-box ul li {
    color: #767676;
}

section.impact-section.extra-sec.extra-work-sec.benefits-business-value.why-choose-us-sec .row .section-label {
    margin: 0px 0 15px 0;
}

section.use-cases-section.inner-service.grey .service-card p.service-text {
    color: #767676 !important;
}

body.service-detail.business-solution section.use-cases-section.inner-service p.service-text {
    color: #000;
}

article.service-card.wireframes-card.ux-card.grid-wireframes {
    padding-top: 0;
}

article.service-card.design-system-card.ux-card.grid-design,
article.service-card.info-arc-card.ux-card.grid-info,
article.service-card.wireframes-card.ux-card.grid-wireframes {
    padding-bottom: 30px;
}

section.slider-wrapper .slider-track .slide {
    max-height: 400px;
}

section.logo-slider {
    padding-top: 0;
}

/* SVG ANIMATION  */
/* ===============================
   FAST CONTINUOUS SVG ANIMATION
   =============================== */

.background-svg svg path {
    stroke: var(--gray);
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: 0.5;
    animation: drawLoop 4.5s linear infinite;
}

.background-svg svg circle {
    fill: var(--red);
    opacity: 0.6;

    animation: dotPulseFast 2.2s ease-in-out infinite;
}

section.extra-work-sec .global-container {
    z-index: 3;
    position: relative;
}


section.impact-section .global-container:before {
    content: '';
    height: 20%;
    width: 110%;
    position: absolute;
    bottom: -83px;
    left: 0;
    background: linear-gradient(to top, rgba(248, 248, 248, 1) 0%, rgba(248, 248, 248, 0) 100%);
    z-index: 2;
    right: 0;
    left: -60px;
}

/* ===============================
   KEYFRAMES
   =============================== */

@keyframes drawLoop {
    0% {
        stroke-dashoffset: 1000;
        opacity: 0.3;
    }

    40% {
        stroke-dashoffset: 0;
        opacity: 0.7;
    }

    70% {
        stroke-dashoffset: 0;
        opacity: 0.7;
    }

    100% {
        stroke-dashoffset: 1000;
        opacity: 0.3;
    }
}

@keyframes dotPulseFast {
    0% {
        opacity: 0.4;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0.4;
        transform: scale(0.85);
    }
}

/* ===============================
   PERFORMANCE BOOST
   =============================== */

.background-svg svg * {
    will-change: stroke-dashoffset, opacity, transform;
}

/* SVG ANIMATION  */
.services-container {
    position: relative;
    z-index: 1;
}

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

.section-label {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 12px;
    background-color: #fff;
    padding: 5px 20px;
    border-radius: 50px;
    text-align: center;
    color: #454545;
    max-width: 115px;
}

.service-card:hover a.white-btn-contact.btn-contact {
    margin-top: 80px;
}

.section-title {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--gray);
}

body.home section.services-section.text-center.why-choose-us-sec h3.section-label {
    color: #454545;
}

body.service-detail.business-solution section.services-section.text-center.why-choose-us-sec h3.section-label {
    max-width: 275px !important;
    color: #454545;
}

.section-title .highlight {
    color: var(--red);
}

body .impact-row-num {
    padding: 80px;
}

.section-description {
    font-size: 18px;
    line-height: 1.6;
    color: #666;
    max-width: 575px;
    margin-left: auto;
}

.hero-social img:hover {
    filter: brightness(0) saturate(100%) invert(23%) sepia(96%) saturate(5643%) hue-rotate(355deg) brightness(95%) contrast(104%);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.service-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 1.5s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
} */

.service-card {
    position: relative;
}

.service-card:hover .service-icon {
    display: none;
}


.service-card:hover::before {
    opacity: 1;
}

.service-card:hover .service-icon,
.service-card:hover .service-title,
.service-card:hover .service-description,
.service-card:hover .service-list,
.service-card:hover .service-list li,
.service-card:hover .learn-more-btn {
    position: relative;
    z-index: 2;
    color: var(--white);
}

.service-card:hover .service-icon {
    background: var(--red);
}

.service-card:hover .learn-more-btn {
    border-color: var(--white);
    color: var(--white);
}

.service-card:hover .service-list li::before {
    background: var(--white);
}

.service-icon {
    width: 50px;
    height: 50px;
    background: #f7f7f7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.service-content {
    padding: 25px 32px;
    z-index: 2;
}

.service-icon svg {
    width: 30px;
    height: 30px;
    fill: var(--white);
}

.service-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #000;
    transition: color 0.3s ease;
}

.service-description {
    font-size: 16px;
    line-height: 1.4;
    color: #767676;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.service-list {
    list-style: none;
    margin-bottom: 10px;
    transition: color 0.3s ease;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    text-transform: capitalize;
}

.service-list li {
    font-size: 14px;
    line-height: 1.8;
    color: var(--gray);
    margin-bottom: 10px;
    padding-left: 24px;
    position: relative;
    transition: color 0.3s ease;
    background-color: #F0F0F0;
    border-radius: 25px;
    margin-right: 9px;
    padding: 3px 12px 3px 20px;
}

.service-card:hover .service-list li {
    background-color: #4f4e4b;
}

.service-card:hover .service-list li::before {
    background: var(--red);

}

body.service-page.ui-ux-body .service-gif img {
    border-radius: 12px;
    max-width: 404px;
    margin-left: auto;
}

.service-list li::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 13px;
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    transition: background 0.3s ease;
}

.background-img {
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 1;
}

.background-img img {
    width: 100%;
    height: calc(100% + 5px);
}

.service-card:hover .background-img {
    visibility: visible;
}

.learn-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid #e0e0e0;
    background: transparent;
    color: var(--gray);
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    width: fit-content;
}

.learn-more-btn:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(219, 49, 39, 0.05);
}

.learn-more-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.learn-more-btn:hover svg {
    transform: translateX(4px);
}

.about-principle-row:first-child {
    width: 43%;
}

.about-principle-row:nth-child(2) {
    width: 61%;
}

.view-all-btn {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    transform: translate(0px, 28px);
}

.view-all-btn button {
    border: none;
}

button#viewAllBtn {
    padding: 11px 29px;
}

.view-all-btn button:hover:not(:disabled) {
    background: #c0291f;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(219, 49, 39, 0.3);
}

.view-all-btn button:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.view-all-btn button svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.view-all-btn button:hover:not(:disabled) svg {
    transform: translateX(4px);
}

.loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
}

/* Add overflow hidden to services-section */
.services-section {
    overflow: hidden;
    /* Add this line to clip partially visible cards */
}

/* Add these new styles for partially visible cards */
.service-card.partially-visible {
    opacity: 0.3;
    transform: translateY(5%);
    pointer-events: none;
    transition: all 0.2s ease;
}

.service-card.fully-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* SERVICE SECTION  */
/* video animation section  */
.impact-section {
    display: flex;
    align-items: center;
    padding: 0px 0 50px 0;
}

.impact-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    padding: 0 !important;
    margin: 0 auto;
    right: 0;
    border-radius: 50px;
}

.impact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
    z-index: 2;
    padding: 0;
    margin: 0 auto;
    right: 0;
    border-radius: 50px;
}

.impact-section .impact-content-row p {
    max-width: 69%;
    margin: 0 auto;
}

.impact-section .container {
    z-index: 3;
}

.impact-heading {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}

.impact-highlight {
    color: var(--red);
    font-style: italic;
    position: relative;
}

.impact-description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--white);
    opacity: 0.9;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

body.service-detail.business-solution section.use-cases-section.inner-service section.financial-digital-section .row .stat-box .section-label {
    max-width: 175px !important;
}

body.service-detail.business-solution section.use-cases-section.inner-service section.financial-digital-section .row .state-col-box:first-child .stat-box .section-label {
    max-width: 380px !important;
}

body .hero-banner h1 {
    font-size: 46px !important;
    line-height: 1.25 !important;
}

h2.section-title {
    font-size: 40px;
}

body .hero-banner h1 br {
    display: none;
}

.stat-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 1.2rem 1.2rem;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-left: 0.1px solid #fff;
    border-right: 0.1px solid #fff;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.stat-number span.small {
    font-size: 32px;
    font-style: italic;
    font-weight: 500;
}

body.service-detail.business-solution .impact-row-num .stat-box .section-label {
    margin: 0 0 20px 0;
}

body.service-detail.business-solution .impact-row-num .stat-box .section-label {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    color: #fff;
    border: 1px solid #fff;
    font-weight: 600;
}

.stat-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1rem;
    line-height: 1;
    font-family: 'Source-Serif';
    font-style: italic;
    font-style: italic;
    display: flex;
    flex-direction: column;
}

section.services-section.text-center.why-choose-us-sec h3.section-label {
    background-color: #ffffff6e;
    color: #fff;
}

.stat-text {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    color: var(--white);
    opacity: 0.9;
    line-height: 1.4;
    min-height: 50px;
}

/* video animation section  */
/* ===== RESPONSIVE ===== */

/* WHY CHOOSE US  */
.choose-us-right-col .why-choose-us-content {
    padding: 0 100px;
}

section.services-section.text-center.why-choose-us-sec h3.section-label {
    max-width: 178px;
}

.why-choose-us-content h2.why-choose-us-title .highlight-text {
    color: #fff;
}

/* Why Choose Us Section Styles */




/* Left Column */
.choose-us-left-col {
    padding: 0;
}

.choose-us-left-col img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 1075px;
}

/* Right Column */
.choose-us-right-col {
    padding: 0 100px 0 150px;
}

.why-choose-us-content {
    text-align: left;
    width: 100%;
}

/* Subtitle */
.why-choose-us-subtitle {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 15px;
    opacity: 0.9;
}

/* Main Title */
.why-choose-us-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin: 35px 0;
}

.why-choose-us-title em {
    font-style: italic;
    font-weight: 400;
}

/* Grid Layout */
.why-choose-us-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 30px;
    margin-top: 20px;
}

/* Individual Items */
.why-choose-us-item {
    display: flex;
    flex-direction: column;
}

.why-choose-us-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #ffffff;
}

.why-choose-us-icon svg {
    width: 24px;
    height: 24px;
}

.why-choose-us-item-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 15px 0;
    line-height: 1.3;
    position: relative;
}

.why-choose-us-item-title:before {
    content: '';
    background-image: url(../images/white-line.webp);
    width: 235px;
    height: 2px;
    position: absolute;
    top: -20px;
}

.why-choose-us-item-text {
    font-size: 15px;
    line-height: 1.6;
    color: #ffffff;
    opacity: 0.9;
    margin: 0;
}

/* Responsive Design */
.choose-us-left-col {
    background-image: url("../images/about-us-left-background.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background: border-box;
}

.image-wrapper {
    text-align: center;
    margin: 0 auto;
}

.image-wrapper img {
    width: 100%;
    border-radius: 16px;
}

.why-choose-us {
    width: 100%;
    background-color: #f5f5f5;
    /* Very subtle geometric network pattern */
    background-image:
        linear-gradient(45deg, rgba(0, 0, 0, 0.015) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 0, 0, 0.015) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.015) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.015) 75%);
    background-size: 50px 50px;
    background-position: 0 0, 0 25px, 25px -25px, -25px 0px;
    padding: 100px 0;
    position: relative;
}

p.supporting-text {
    max-width: 750px;
    margin: 0 auto 44px auto;
}

.middle-img {
    z-index: 2;
}

section.services-section .row {
    z-index: 4;
    position: relative;
    align-items: center;
}

.why-choose-us-sec .background-svg {
    opacity: 0.2;
    height: 100%;
}

.info-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 25px 15px;
    text-align: left;
    margin: 30px 0;
}

h3.card-title {
    font-size: 24px;
}

p.card-text {
    font-size: 16px;
}

.why-choose-us-sec p.section-label {
    text-align: center;
}

section.services-section.why-choose-us-sec p.section-label {
    margin: 0 auto;
    max-width: 100%;
}

/* WHY CHOOSE US  */

/* portfolio section  */
.image-box {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.image-box img {
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.image-box:hover img {
    transform: scale(1.05);
}

.hover-content {
    position: absolute;
    bottom: 0;
    left: 30px;
    right: 30px;
    background: #fff;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    border-radius: 14px;
}

.image-box:hover .hover-content {
    transform: translateY(-27px);
}

section.services-section.FAQ-SECTION {
    margin-top: 0;
    padding: 0;
}

.hover-content h5 {
    margin: 0 0 5px 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.hover-content p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

section.services-section.portfolio-section .row .col-md-4.col-sm-6.col-12 {
    margin-bottom: 30px;
}

/* portfolio section  */

/* FAQ SECTION  */
.accordion {
    --bs-accordion-bg: #f5f5f5;
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-radius: 12px;
    --bs-accordion-inner-border-radius: 12px;
    --bs-accordion-btn-padding-x: 20px;
    --bs-accordion-btn-padding-y: 18px;
    --bs-accordion-body-padding-x: 20px;
    --bs-accordion-body-padding-y: 18px;
    --bs-accordion-active-color: #333;
    --bs-accordion-btn-focus-border-color: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    gap: 12px;
}

.accordion-item {
    background-color: #f8f8f8;
    border: none;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.accordion-item:last-child {
    margin-bottom: 0;
}

section.main-marketing.dig-main-market .marketing-services {
    max-width: 100%;
    padding: 0;
}

div#faqAccordion .accordion-item button.accordion-button {
    background-color: #f8f8f8;
    color: #454545;
    padding: 28px 22px;
    box-shadow: none;
}

.accordion-button {
    background-color: #f8f8f8;
    color: #333;
    font-weight: 600;
    font-size: 16px;
    border: none;
    box-shadow: none;
    padding: 18px 20px;
}

section.services-section.FAQ-SECTION div#faqAccordion .accordion-item {
    border: none;
    background-color: #f8f8f8;
}

.accordion-button:not(.collapsed) {
    background-color: #f8f8f8;
    color: #333;
    box-shadow: none;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M0 7h16v2H0z'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    transform: none;
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%23dd1403' d='M0 7h16v2H0z'/></svg>") !important;
    transform: none;
}

.accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23dd1403' d='M7 0h2v16H7z'/%3E%3Cpath fill='%23dd1403' d='M0 7h16v2H0z'/%3E%3C/svg%3E") !important;
}

section.services-section.FAQ-SECTION .accordion-button::after {
    background-size: 15px;
    background-position: center;
    border-radius: 15px;
    width: 25px;
    height: 25px;
    background-color: #fff;
}

.accordion-body {
    color: #767676;
    font-size: 15px;
    line-height: 1.6;
    padding: 18px 20px;
    position: relative;
}

.accordion-body:before {
    content: '';
    position: absolute;
    border: 1px solid #a9a9a9;
    top: 0;
    left: 0;
    right: 0;
    width: 94%;
    margin: 0 auto;
}

a.btn-contact:hover i {
    transform: rotate(-2deg);
}

div#faqAccordion {
    background-color: #fff;
    border-radius: 12px;
    padding: 25px;
}

.accordion-collapse {
    border: none;
}

.hero-box h2 {
    font-size: 56px;

}

.hero-box h2,
.hero-box p.hero-text {
    color: #fff;
}

section.hero-finance {
    padding-bottom: 0;
}

/* FAQ SECTION  */
section.services-section.why-choose-us-sec p.section-label {
    background: transparent;
}

.hero-box {
    background: linear-gradient(90deg, #dd1403 0%, #F47871 100%);
}

body .hero-box h2.hero-title span.highlight-text {
    color: #fff;
    font-weight: 500;
}

/* INNER PAGES  */
/* SERVICE  */


.parent {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    position: relative;
}

.child-parent {
    position: relative;
    width: 150px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

/* Step icon wrapper - always centered */
.step-icon-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 5;
    margin: 0 0 10px 0;
}

.step-icon-wrapper img {
    max-width: 115px;
    height: auto;
    transition: transform 0.3s ease;
}

.child-parent:hover .step-icon-wrapper img {
    transform: scale(1.05);
}

/* Line wrap positioning fixes */
.line-wrap {
    position: absolute;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Connector SVG styling */
.connector-svg {
    width: 100%;
    height: auto;
    max-width: 200px;
}

/* Step content - absolute positioned to not take space by default */
.step-content {
    position: absolute;
    width: 300px;
    padding: 0;
    border-radius: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 10;
    pointer-events: none;
}

/* Show content on hover */
.child-parent:hover .step-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    padding: 20px;
}

/* Position content for odd/even steps */
.child-parent:nth-child(odd) .step-content {
    top: -244px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
}

.child-parent:nth-child(odd):hover .step-content {
    transform: translateX(-50%) translateY(0);
}

.child-parent:nth-child(even) .step-content {
    bottom: -240px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
}

.child-parent:nth-child(even):hover .step-content {
    transform: translateX(-50%) translateY(0);
}

.child-parent:nth-child(2) .step-content {
    bottom: -180px;
}



/* Title wrap styling */
.title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
}

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

/* SVG Icon Styles */
.step-icon-svg {
    display: block;
    min-height: 40px;
    transition: all 0.3s ease;
}

.step-icon-svg-hover {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
}

.child-parent:hover .step-icon-svg {
    display: none;
}

.child-parent:hover .step-icon-svg-hover {
    display: block;
    animation: slideUpFadeIn 0.3s ease forwards;
}

/* Description styling */
.step-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    word-wrap: break-word;
    padding-left: 24px;
}

body .child-parent svg.step-icon-svg-hover {
    height: 190px;
}

/* Connector fill animation */
.connector-fill-path {
    transition: clip-path 0.4s ease;
    clip-path: inset(0 100% 0 0);
}

/* Hover state for visited */
.child-parent.visited .step-content {
    opacity: 1;
    visibility: visible;
    padding: 20px;
}

.child-parent.visited .step-icon-svg {
    display: none;
}

.child-parent.visited .step-icon-svg-hover {
    display: block;
}

/* Animation */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* Remove old positioning styles */
.child-parent:first-child .line-wrap,
.child-parent:nth-child(2) .line-wrap,
.child-parent:nth-child(3) .line-wrap,
.child-parent:nth-child(4) .line-wrap,
.child-parent:nth-child(5) .line-wrap,
.child-parent:nth-child(6) .line-wrap {
    left: auto;
    width: 179.6px;
}

.parent .child-parent:nth-child(odd) .line-wrap {
    top: -35px;
}

.parent .child-parent:nth-child(even) .line-wrap {
    bottom: -17px;
}


/* slider sec  */
.export-slider__container {
    overflow: hidden;
    width: 100%;
}

.export-carousel {
    cursor: grab;
}

.export-carousel:active {
    cursor: grabbing;
}

.export-carousel__track {
    display: flex;
    will-change: transform;
    gap: 25px;
}

.export-carousel__slide {
    flex: 0 0 calc(100% / 2.5);
    width: calc(100% / 2.5);
    height: 350px;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
    border-radius: 24px;
}

.Export-service-row {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.Export-service-row p {
    max-width: 1260px;
    margin-bottom: 50px;
}

/* slider sec  */
/* SERVICE  */

/* CHALLENGES SECTION  */
/* Service Cards */
.service-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

section.services-section.stretegy-section .row div:nth-child(2) {
    padding-left: 40px;
}

section.hero-banner.service-banner.service-detail-banner .section-label {
    max-width: 200px;
}

section.services-section.home-service-sec div#servicesGrid .service-card {
    padding: 0;
}

section.services-section.FAQ-SECTION {
    padding-top: 50px;
}

/* .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
} */

/* Card Image Wrapper */
.card-image-wrapper {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: right;
    align-items: center;
    flex-shrink: 0;
}

/* Full height cards - larger image area */
.service-card.h-100 .card-image-wrapper {
    min-height: 200px;
}

/* Half height cards - smaller image area */
.service-card:not(.h-100) .card-image-wrapper,
.col-md-6>.row .service-card .card-image-wrapper {
    min-height: 120px;
}

.card-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Card Title */
.card-title {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* Card Text */
.card-text {
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
    flex-grow: 1;
}

.service-card .card-text {
    font-size: 22px;
    line-height: 1.5;
}

.service-card.audit-card.ux-card {
    min-height: 310px;
}

.service-card.audit-card.ux-card .card-image-wrapper {
    height: 220px;
}

/* Background Colors for Each Card */
.discovery-card {
    background: #FFF6F1;
    padding: 0;
}

.service-card.discovery-card .ux-content-wrap {
    padding: 0 25px;
}

.service-card.audit-card.ux-card img.card-image {
    object-fit: cover;
    height: 100%;
}


.design-system-card {
    background: #f5f5f5;
}

.wireframes-card .card-image-wrapper {
    margin-left: auto;
}

.info-arc-card {
    background: #f0f0f0;
}

.wireframes-card .ux-audit {
    padding: 0 25px;
}

.wireframes-card {
    background: #fff1f0;
    padding: 0;
}

.col-md-6>.row .service-card {
    padding: 1.5rem;
}

.ux-main-row {
    background-color: #FFF;
    padding: 25px;
    border-radius: 25px;
}

.service-card.design-system-card {
    display: flex;
    flex-direction: row;
}

.ux-card {
    display: flex;
    flex-direction: row-reverse;
}

.service-card.info-arc-card {
    display: flex;
    flex-direction: row;
}

.ux-main-row h3.card-title {
    font-size: 36px;
    font-weight: 500;
    color: #454545;
    font-family: 'Source-Serif';
    font-style: italic;
    margin-bottom: 25px;
}

/* ===== Challenges section grid ===== */
.challanges-section .ux-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

/* Desktop layout to match screenshot 2 */
.challanges-section .grid-discovery {
    grid-column: span 5;
}

.challanges-section .grid-audit {
    grid-column: span 4;
}

.challanges-section .grid-design {
    grid-column: span 3;
}

.challanges-section .grid-usability {
    grid-column: span 3;
}

.challanges-section .grid-info {
    grid-column: span 3;
}

.challanges-section .grid-wireframes {
    grid-column: span 6;
}

/* Card base */
.challanges-section .ux-card {
    position: relative;
    overflow: hidden;
    min-height: 270px;
    border-radius: 14px;
    padding: 22px 0px 0px 24px;
    flex-direction: column-reverse;
    justify-content: space-between;
    box-shadow: none;
}

.challanges-section .discovery-card,
.challanges-section .wireframes-card {
    background: #f8ece9;
}

.challanges-section .card-title {
    margin: 0 0 14px;
    font-size: clamp(28px, 2.1vw, 42px);
    line-height: 1.05;
    font-weight: 500;
    font-style: italic;
    color: #252525;
}

article.service-card.wireframes-card.ux-card.grid-wireframes .ux-audit p.card-text {
    max-width: 350px;
}

.challanges-section .card-text {
    margin: 0;
    max-width: 88%;
    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.45;
    color: #767676;
}

/* Image placement */
.challanges-section .card-image-wrapper {
    width: 100%;
    pointer-events: none;
    margin: 0;
}

.challanges-section .grid-design .card-image-wrapper {
    top: 8px;
    right: 10px;
    bottom: auto;
}

.challanges-section .card-image {
    display: block;
    width: clamp(110px, 18vw, 245px);
    height: auto;
    opacity: 0.95;
}

/* Slightly smaller text area for narrow cards */
.challanges-section .grid-design .card-text,
.challanges-section .grid-info .card-text,
.challanges-section .grid-usability .card-text {
    max-width: 78%;
}

section.challanges-section h2.section-title {
    text-align: center;
    margin-bottom: 70px;
}

.ux-main-row p.card-text {
    font-size: 20px;
    font-weight: 400;
}

/* CHALLENGES SECTION  */

/* black slider  */
/* ============================= */
/* Wrapper & Container */
/* ============================= */

.pillar-slider-wrapper {
    background: #000;
    overflow: hidden;
    padding: 0;
}

.pillar-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ============================= */
/* Slides */
/* ============================= */

.pillar-slide {
    position: absolute;
    top: 0;
    height: 100%;
    width: var(--collapsed-width);
    background: linear-gradient(to right, #0A0A0A 0%, #6A0600 100%);
    color: var(--text-white);
    display: flex;
    cursor: pointer;
    overflow: hidden;

    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1),
        width 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden;
    gap: 0;
    /* ← Add this to remove any flex gaps */
    margin: 0;
}

/* body.service-page section.hero-banner.service-banner {
    background: #f7f7f7 !important;
} */
.logo-wrap a {
    pointer-events: none;
}

body.service-detail.business-operation p.service-text {
    font-size: 16px;
}

body.service-detail.business-operation .service-card h5 {
    font-weight: 700;
}

body.service-page section.hero-banner.service-banner {
    padding-top: 100px;
}

body.service-page section.logo-slider {
    padding-bottom: 20px;
}

.pillar-slide.active {
    width: calc(100% - (4 * var(--collapsed-width)));
    background: linear-gradient(to right, #0A0A0A 0%, #6A0600 100%);

    z-index: 5;
}

/* ============================= */
/* Pillar Label (LEFT BAR) */
/* ============================= */

.pillar-label {
    width: var(--collapsed-width);
    height: 100%;
    background: linear-gradient(to bottom, #000 0%, #1a1a1a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    flex-shrink: 0;
    /* ← Prevent shrinking */
    margin: 0;
}

/* Number on top */
.pillar-number {
    font-size: 28px;
    font-style: italic;
    color: #fff;
    margin-bottom: 40px;
    opacity: 0.9;
}

span.tag:before {
    content: '.';
    position: absolute;
    left: 9px;
    font-size: 40px;
    width: 100%;
    height: 100%;
    top: -23px;
    color: #dd1403;
}

span.tag {
    background-color: #545454;
    padding: 6px 17px 6px 25px;
    border-radius: 50px;
    position: relative;
    font-size: 14px;
}

.service-card.usability-card.ux-card .card-image-wrapper {
    margin-bottom: 0;
}

.service-card.design-system-card .card-image-wrapper {
    margin-bottom: 0;
    max-width: 170px;
    transform: translate(0px, 20px);
    margin: 0 auto;
}

/* Vertical title (bottom → top) */
.pillar-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 14px;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    margin-top: 140px;
}

/* Active pillar contrast */
.pillar-slide.active .pillar-label {
    background: #000;

}

/* ============================= */
/* Content Area */
/* ============================= */

.pillar-content {
    padding: 110px 80px;
    min-width: 720px;
    flex: 1;
    margin-left: 0;
    /* ← Override Bootstrap row negative margin */
    margin-right: 0;
}

.pillar-slide .row.pillar-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Or more specifically */
.pillar-slide .row.pillar-content {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    min-width: 792px !important;
}

.pillar-content h2 {
    font-size: 42px;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 28px;
}

section.main-marketing .marketing-services .services-grid .row .card {
    width: calc(100% / 3 - 15px);
    min-height: 428px;
}

section.main-marketing .marketing-services .services-grid .row {
    display: flex;
    justify-content: center;
}

.pillar-content p,
.pillar-content ul li {
    font-size: 15.5px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.75);
    max-width: 600px;
}

.pillar-content ul {
    padding-left: 20px;
}

/* black slider  */

/* SERVICE DETAIL  */
section.use-cases-section .service-card {
    padding: 1.4rem 2rem;
}

section.benefits-business-value .section-label {
    max-width: 266px;
}

.s-detail-box-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 50px;
}

section.benefits-business-value.why-choose-us-sec .service-gif {
    margin-top: 150px;
}

.s-detail-box-wrap .s-box h6 {
    font-size: 22px;
    font-weight: 500;
    color: #000;
}

body.tech-page section.benefits-business-value.why-choose-us-sec {
    padding-top: 0;
}

body.tech-page .section-label {
    max-width: 224px;
}

.marketing-services .badge-and-title {
    text-align: center;
}

section.main-marketing.dig-main-market .marketing-services .section-label {
    margin-right: auto;
}

.marketing-services .badge-and-title .badge {
    margin: 35px auto 0 auto;
}

.s-detail-box-wrap .s-box h4 {
    font-size: 40px;
    font-weight: 700 !important;

}

.s-detail-box-wrap .s-box {
    width: calc(100% / 2 - 20px);
    background-color: #f7f7f7;
    border-radius: 15px;
    padding: 10px 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
}

section.use-cases-section .service-card:hover {
    transform: none;
}

section.use-cases-section .service-card:hover .service-icon {
    display: block;
    background: transparent;
}

section.use-cases-section .service-icon {
    margin-bottom: 15px;
}

section.use-cases-section .section-label {
    margin: 0 auto 15px auto;
}

section.benefits-sec h2 {
    text-transform: none;
}

body.service-detail.business-solution .section-label {
    max-width: 150px;
}

body .business-col .section-label {
    max-width: 250px !important;
}

section.use-cases-section p.service-text {
    text-align: left;
    font-weight: 500;
    font-size: 24px;
    color: #767676;
    line-height: 27px;
}

section.use-cases-section {
    text-align: center;
}

.strategy-left-img img {
    width: 100%;
    max-height: 563px;
    object-fit: cover;
    overflow: hidden;
    border-radius: 26px;
}

.strategy-left-img {
    max-width: 795px;
}

section.services-section.stretegy-section.inner-sec-about {
    padding-top: 50px;
}

section.benefits-business-value.why-choose-us-sec {
    position: relative;
}

body .padding-left {
    padding-left: 50px;
}

section.delivering-section .section-label {
    background-color: #454545 !important;
    color: #fff;
}

section.benefits-business-value.why-choose-us-sec .service-gif {
    max-width: 660px;
}

/* SERVICE DETAIL  */

/* DELIVERING SECTION  */
/* Main Section */
.delivering-section {
    background-color: #171717;
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

body.service-detail.business-solution section.benefits-sec .service-gif {
    max-width: 800px;
}

body.service-detail.business-solution section.key-capibilities img.img-fluid {
    max-width: 850px;
    width: 100%;
}

body.service-detail.business-solution section.use-cases-section.inner-service .service-card p.service-text {
    font-size: 16px;
    color: #767676;
}

section.delivering-section .section-label {
    margin: 0 auto;
}

/* How it works Button */
.btn-how-it-works {
    background-color: #2C2C2C;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-how-it-works:hover {
    background-color: #3A3A3A;
    color: #FFFFFF;
}

/* Main Heading */
.main-heading {
    color: #FFFFFF;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
}

.main-heading em {
    font-style: italic;
    font-weight: inherit;
}

/* Main Description */
.main-description {
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Laptop Container */
.laptop-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.laptop-image {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Benefits Container */
.benefits-container {
    position: relative;
    padding-left: 30px;
    padding-top: 20px;
}

/* .red-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #DC143C;
} */

/* Benefits List */
.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-list li {
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 24px;
    padding-left: 20px;
    position: relative;
}

.benefits-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #FFFFFF;
    font-size: 24px;
    line-height: 1.2;
}

.benefits-list li:last-child {
    margin-bottom: 0;
}

section.delivering-section ul.benefits-list li:before {
    display: none;
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

section.services-section.portfolio-section.inner-service-portfolio {
    padding-bottom: 0;
}

.inner-sec-about .section-header {
    padding: 30px;
    background-color: #fff;
    border-radius: 30px;
}



.row.centered-row {
    text-align: center;
    margin-bottom: 50px;
}

.row.centered-row .section-label {
    margin: 0 auto 20px;
}

body.about-us .services-grid .service-card:hover .service-icon,
body.service-detail.business-solution section.use-cases-section.inner-service .service-icon {
    background: #f7f7f7 !important;
}

body.service-detail.business-solution section.use-cases-section.inner-service .service-icon {
    display: flex;
}

/* DELIVERING SECTION  */

/* SERVICE TABS SECTION  */
/* Tabs Container */
.tabs-container {
    padding: 40px 0;
    width: 100%;
}

.background-img:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0.16%, rgba(0, 0, 0, 0.80) 50%);
}

.tabs-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    flex-wrap: wrap;
}

/* Tab Item */
.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-width: 120px;
}

/* Tab Icon Wrapper */
.tab-icon-wrapper {

    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    background-color: #E8E8E8;
    border: 2px solid transparent;
}

.tab-item.active .tab-icon-wrapper {
    background-color: #FFF5F5;
}

.tab-item:not(.active) .tab-icon-wrapper {
    background-color: #F0F0F0;
    padding: 5px;
    border-radius: 4px;
}

.tab-item.active .tab-icon-wrapper {
    background-color: #DB31271A;
    padding: 5px;
    border-radius: 4px;
}

body.service-detail.business-solution section.delivering-section .row .section-label {
    max-width: 325px !important;
}

body.service-detail.business-solution section.services-section.stretegy-section.inner-sec-about .section-label {
    max-width: 120px !important;
}

body.service-detail.business-solution section.use-cases-section.inner-service .section-label {
    max-width: 140px !important;
}

body.service-detail.business-solution section.services-section.stretegy-section.inner-sec-about .section-label,
body.service-detail.business-solution section.use-cases-section.inner-service .section-label {
    max-width: 155px !important;
}

/* Tab Icon */
.tab-icon {
    width: 32px;
    height: 32px;
    transition: all 0.3s ease;
}

.tab-item.active .tab-icon {
    color: #DC2626;
}

body.service-detail.business-solution section.delivering-section .global-container .section-label {
    max-width: 160px !important;
}

.tab-item:not(.active) .tab-icon {
    color: #4A4A4A;
}

/* Tab Label */
.tab-label {
    font-size: 14px;
    font-weight: 400;
    color: #4A4A4A;
    text-align: center;
    line-height: 1.4;
    transition: color 0.3s ease;
    max-width: 200px;
}

.tab-item.active .tab-label {
    color: #4A4A4A;
}

/* Tab Indicator (Red Line) */
.tab-indicator {
    width: 0;
    height: 3px;
    background-color: #DC2626;
    margin-top: 8px;
    transition: width 0.3s ease;
    border-radius: 2px;
}

section.services-section.stretegy-section.inner-sec-about .section-header .section-label {
    background-color: #f8f8f8;
}

body.ai-tabs .industry-col-right {
    padding-left: 40px;
}

.hero-finance a {
    text-decoration: none;
}

body.ai-tabs section.industry-serve-sec {
    padding-top: 100px;
}

body.ai-tabs section.benefits-business-value.why-choose-us-sec img {
    mix-blend-mode: multiply;
}

body.ai-tabs section.industry-serve-sec p {
    margin: 10px 0;
}


body.ai-tabs h2 {
    font-size: 48px;
}

.bottom-bar p,
.bottom-bar a {
    font-size: 14px;
}

.our-work-wrapper {
    background-color: #fff;
    padding: 50px;
    border-radius: 16px;
}

section.contact-info-section span {
    text-transform: math-auto;
}

body.ai-tabs section.benefits-business-value.why-choose-us-sec .service-gif img {
    max-height: 427px;
    object-fit: contain;
}

body.ai-tabs section.benefits-business-value.why-choose-us-sec .service-gif {
    margin-top: 0;
}



.expertise-row-wrap .expertise-icon-wrap {
    max-width: 50px;
    margin: 0 auto 10px auto;
    background-color: #f7f7f7;
    padding: 10px;
}

section.benefits-business-value.why-choose-us-sec.core-expertise ul.expertise-box-ul,
section.benefits-business-value.why-choose-us-sec.core-expertise .expertise-content {
    text-align: left;
}

body.ai-tabs .expertise-icon-wrap {
    max-width: 50px;
    margin: 0 0 20px 0;
}

body.ai-tabs section.benefits-business-value.why-choose-us-sec.core-expertise h3.case-study-title {
    margin: 30px 0;
}

body.ai-tabs section.benefits-business-value.why-choose-us-sec ul li:before {
    color: #d92f29;
    background-color: transparent;
    font-size: 26px;
}

section.benefits-business-value.why-choose-us-sec.core-expertise ul.expertise-box-ul li {
    font-size: 16px;
}

body .expertise-inner-wrap {
    display: flex;
    width: 100%;
    gap: 30px;
}

body.ai-tabs section.benefits-business-value.why-choose-us-sec.core-expertise ul li:before {
    color: #d92f29;
    background-color: transparent;
    font-size: 26px;
}

body.ai-tabs .expertise-box {
    background-color: #fff;
    padding: 30px;
    font-size: 18px;
    border-radius: 18px;
    width: 100%;
}

body.ai-tabs section.benefits-business-value.why-choose-us-sec.core-expertise p {
    margin-top: 15px;
}

body.ai-tabs .icon-wrapper {
    margin-bottom: 20px;
    background-color: #fff;
    max-width: 30px;
    padding: 12px 25px;
    display: flex;
    justify-content: center;
    border-radius: 4px;
}

body section.case-studies {
    padding-top: 70px;
}

main.contact-page-wrapper section.contact-info-section .section-label {
    max-width: 270px;
}

body.ai-tabs section.case-studies {

    background-color: #F5F5F5;
}

body.about-us section.hero.hero-banner.about-us {
    text-align: center;
}

body.ai-tabs.ai-dig-body section.hero-banner.service-banner.service-detail-banner .section-label {
    max-width: 270px;
}

body.about-us section.section-padding.what-we-do-sec .d-flex.w-100 {
    justify-content: center;
}

body.ai-tabs section.benefits-business-value.why-choose-us-sec {
    background-color: #F5F5F5;
}

.tab-item.active .tab-indicator {
    width: 100%;
}

/* Tab Content */
.main-tab-content {
    display: none;
}

.main-tab-content.active {
    display: block;
}

.main-tab-content h2 {
    margin: 0;
}

.section-label.longer-text {
    max-width: 210px;
}

section.services-section.stretegy-section.inner-sec-about .row.centered-row p {
    padding: 0 26%;
}

section.case-section {
    padding-top: 0;
}

/* SERVICE TABS SECTION  */
.case-card {
    background: var(--cs-card-bg);
    border-radius: var(--cs-card-radius);
    box-shadow: var(--cs-card-shadow);
    padding: clamp(18px, 2.2vw, 28px);
}

.featured-media {
    border-radius: 14px;
    overflow: hidden;
    background: #f2f4f7;
}

.featured-img {
    width: 100%;
    display: block;
    transform: translateZ(0);
    transition: opacity 240ms ease, transform 240ms ease;
}

.featured-content {
    padding: clamp(0px, 0.6vw, 6px);
}

.featured-title {
    color: var(--cs-title);
    font-weight: 650;
    letter-spacing: -0.02em;
    font-size: clamp(22px, 2.2vw, 34px);
    line-height: 1.15;
    transition: opacity 200ms ease, transform 200ms ease;
}

.featured-desc {
    color: var(--cs-muted);
    transition: opacity 200ms ease, transform 200ms ease;
}

.featured-desc p {
    margin-bottom: 10px;
    font-size: 16px;
}

/* Fade/slide transitions */
.is-fading .featured-img,
.is-fading .featured-title,
.is-fading .featured-desc {
    opacity: 0;
    transform: translateY(6px);
}

/* Thumbnail strip */
/* Updated Thumbnail Styles - 264px × 180px with 6 visible + half slides */
/* Thumbnail strip - Fixed width to show exactly 6 thumbnails */
/* Fixed - No blank space at start/end */
/* Alternative: Use wrapper to clip the viewport */
.thumb-strip {
    position: relative;
    width: 100%;
    max-width: 1770px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 56px;
    /* Space for nav buttons */
}

.thumb-rail {
    padding: 14px 0;
    /* No horizontal padding */
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    user-select: none;
    padding-left: 0;
    padding-right: 0;
}

.thumb-rail::-webkit-scrollbar {
    display: none;
}

/* Create half-visible effect with margin */

section.services-section.FAQ-SECTION .row {
    display: flex;
    align-items: flex-start;
}

.thumb {
    flex: 0 0 264px;
    width: 285px;
    height: 180px;
    border-radius: var(--cs-thumb-radius);
    overflow: hidden;
    position: relative;
    border: 0;
    box-shadow: none !important;
    cursor: pointer;
    transition: none !important;
    scroll-snap-align: center;
    pointer-events: auto;
    z-index: 1;
    background: transparent;
    border-radius: 8px;
    overflow: hidden !important;
}

.thumb img {
    border-radius: 8px;
}

/* Rest of your thumb styles... */
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}

.thumb:focus-visible {
    outline: 3px solid rgba(225, 29, 46, 0.35);
    outline-offset: 3px;
}

.thumb.is-active {
    border-color: var(--cs-active);
    transform: scale(1.02);
    box-shadow: 0 10px 26px rgba(225, 29, 46, 0.18),
        0 10px 26px rgba(16, 24, 40, 0.10);
    padding: 5px;
    border: 3px solid #e11d2e;
}

.thumb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(16, 24, 40, 0.12);
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
    z-index: 2;
}

.thumb-nav:hover {
    transform: translateY(-50%) scale(1.03);
}

.thumb-nav:active {
    transform: translateY(-50%) scale(0.98);
}

.thumb-nav--left {
    left: 8px;
}

.thumb-nav--right {
    right: 8px;
}

.thumb-nav span {
    font-size: 22px;
    line-height: 1;
    color: #1f2937;
}

body .hero-banner.service-banner.service-detail-banner .service-gif video,
.ai-tabs .service-gif video {
    mix-blend-mode: multiply;
    width: 100%;
}

.ai-content {
    text-align: center;
    margin: 50px 0 100px 0;
}

body.ai-tabs section.benefits-business-value.why-choose-us-sec ul li {
    position: relative;
    margin-bottom: 15px;
    list-style: none;
    padding-left: 0;
    color: #767676;
    font-size: 18px;
    line-height: 1.7em;
}

body.ai-tabs section.benefits-business-value.why-choose-us-sec ul li:before {
    content: "✓";
    position: absolute;
    left: -33px;
    top: 4px;
    width: 20px;
    height: 20px;
    background-color: #129953;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.ai-tabs section.benefits-business-value.why-choose-us-sec p {
    margin: 30px 0;
    color: #767676;
}

body.ai-tabs section.benefits-business-value.why-choose-us-sec .section-label {
    max-width: 152px;
    background-color: #f0f0f0;
    margin-bottom: 25px;
}

body.home section.services-section.stretegy-section.inner-sec-about {
    padding-bottom: 0;
}

body.home section.case-studies {
    padding-top: 0;
}



section.raw-section {
    padding-top: 50px;
}

body.service-page.ui-ux-body section.logo-slider {
    padding-top: 50px;
}

section.raw-section .section-label {
    max-width: 200px;
}

section.raw-section {
    padding: 50px 0 0 0;
}

.service-gif {
    max-width: 404px;
    margin-left: auto;
}

body.service-detail.business-solution section.benefits-sec .section-label {
    max-width: 250px !important;
}

body.tech-page .featured-content .section-label {
    background-color: #e4e0e0f2;
}

.services-grid .card h5 {
    margin: 4px 0;
}


/* Responsive adjustments */
@media (max-width: 1200px) {
    .thumb-rail {
        /* For smaller screens, adjust to show fewer thumbnails */
        width: 100%;
        max-width: 100%;
        padding-left: 132px;
        padding-right: 132px;
    }
}

section.case-studies {
    padding-top: 0;
}

.artificial-intelligence {
    margin-bottom: 70px;
}

article.service-card.discovery-card.ux-card.grid-discovery .card-image-wrapper,
article.service-card.audit-card.ux-card.grid-audit .card-image-wrapper {
    justify-content: flex-end;
}

section.main-marketing .services-grid ul {
    padding-left: 20px;
}

.services-grid .row .card .inner .icon-wrapper img {
    mix-blend-mode: multiply;
}

body.tech-page section.benefits-business-value.why-choose-us-sec .section-label {
    background-color: #f0f0f0;
    max-width: 180px;
}

body.tech-page section.hero-banner.service-banner h1 br {
    display: none;
}

.red-section {
    background: linear-gradient(90deg, #0A0A0A 0%, #6A0600 100%);
}

body.service-detail.business-operation section.hero-banner.service-banner.service-detail-banner .section-label {
    max-width: 218px;
}

.red-section .grid-image {
    background-image: url('Group 1000001641.webp');
    background-repeat: repeat;
    background-size: 12vw;
    opacity: 0.9;
}

.red-section .second-image {
    left: 0%;
}

.col-lg-6.imp-list {
    padding-left: 50px;
}

body.service-detail.business-solution section.logo-slider.service-logo-slider {
    padding-top: 50px;
}

body.service-page.ui-ux-body section.process-section.service-process {
    padding: 300px 0;
}

body.service-detail.business-solution .section-label {
    max-width: 200px !important;
}

body.service-detail.business-solution section.benefits-business-value.why-choose-us-sec .section-label {
    max-width: 250px !important;
}

body.service-detail.business-solution section.delivering-section .section-label {
    max-width: 345px !important;
}

body .benefits-can-sec p {
    color: #ffffffbd;
}

body section.hero-banner a.white-btn-contact.btn-contact {
    margin: 30px 0 10px 0 !important;
}

body.ai-tabs.ai-dig-body section.industry-serve-sec .industry-col-right .service-gif,
body.service-detail.business-solution section.benefits-sec .service-gif {
    margin: 0 auto;
}

body.service-detail.business-solution section.services-section.stretegy-section.inner-sec-about {
    padding-bottom: 0;
}

section.benefits-business-value.why-choose-us-sec.our-work.contact-us-our-work {
    width: 100%;
}

section.benefits-business-value.why-choose-us-sec.our-work.contact-us-our-work .our-work-wrapper {
    background-color: #f5e5e4;
    padding: 0 50px;
}

section.benefits-business-value.why-choose-us-sec.our-work.contact-us-our-work .our-work-wrapper .service-gif {
    margin: 0;
    max-width: 566px;
    margin-left: auto;
}

section.benefits-business-value.why-choose-us-sec.our-work.contact-us-our-work .section-label {
    background: #fad0cd;
    max-width: 180px;
}

section.benefits-business-value.why-choose-us-sec.our-work.contact-us-our-work .our-work-wrapper p {
    margin: 15px 0;
}

section.hero-banner.complaint-form-sec .explore-div {
    margin: 0 auto;
}

section.hero-banner.complaint-form-sec .explore-div h1.start,
section.hero-banner.complaint-form-sec .explore-div p {
    text-align: center;
}

section.hero-banner.complaint-form-sec .explore-div button.submit-btn {
    justify-content: center;
    align-items: center;
    align-self: anchor-center;
}

body.service-detail.business-operation section.benefits-can-sec .section-label {
    max-width: 134px;
    background-color: #363636 !important;
    color: #fff;
}

.key-capibilities li span {
    color: #454545;
    font-size: 24px;
}

section.key-capibilities ul.list-unstyled {
    margin-top: 55px;
}

body.service-detail.business-operation section.benefits-business-value.why-choose-us-sec {
    padding-top: 50px;
    padding-bottom: 100px;
}

body.service-detail.business-operation .service-gif {
    margin: 0 auto;
}

body.service-detail.business-operation section.benefits-business-value.why-choose-us-sec .service-gif {
    max-width: 586px;
}

body.service-detail.business-operation section.delivering-section .section-label {
    max-width: 175px;
}

body.service-detail.business-operation section.delivering-section .laptop-container {
    max-width: 650px;
    max-height: 650px;
}

body.service-detail.business-operation .key-capibilities .section-label {
    max-width: 178px;
}

.key-capibilities li span {
    color: #454545;
    font-size: 24px;
}

body.service-detail.business-operation section.benefits-can-sec .row.align-items-center {
    background-image: url("../images/new-banner.png");
    background-repeat: no-repeat;
    padding: 50px 0 201px 50px;
    background-size: 100% 100%;
    min-height: 647px;
}

.ben-col-1 {
    transform: translate(0px, 100px);
}

.pillar-slider-wrapper {
    position: relative;
    overflow: hidden;
}

.pillar-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.pillar-slide {
    position: absolute;
    left: 0;
    width: 100%;
    transition: transform 0.6s ease, width 0.6s ease, height 0.6s ease;
}

.pillar-slider-wrapper {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.pillar-slider {
    position: relative;
    height: 100%;
}

.pillar-slide {
    position: absolute;
    width: 100%;
    left: 0;
    transition: transform .6s ease, height .6s ease, width .6s ease;
}

section.services-section.stretegy-section.inner-sec-about .section-label {
    max-width: 165px;
}

body.digital-marketing .section-label {
    max-width: 190px;
}

body.tech-page.dig-tech-body section.case-section .section-label {
    max-width: 125px;
}

.desc {
    color: #767676;
}

body.service-detail.business-operation section.services-section.stretegy-section.inner-sec-about h2.section-title,
body.service-detail.business-solution section.services-section.stretegy-section.inner-sec-about h2.section-title {
    font-size: 34px;
}


body.service-detail.business-operation .service-card:hover .service-icon {
    display: flex;
    background: #f7f7f7;
}

body.service-detail.business-operation section.delivering-section .section-label {
    max-width: 175px;
    background-color: #454545 !important;
    color: #fff;
    letter-spacing: 1px;
}

body.service-detail.business-solution section.mobile-web .section-label {
    max-width: 250px !important;
}

body ul.list-unstyled li span {
    color: #454545;
    font-weight: 500;
    font-size: 16px;
}

body.service-detail.business-solution section.delivering-section.ecommerce-sec .global-container .row.justify-content-center .section-label {
    max-width: 340px !important;
}

body.service-detail.business-solution section.benefits-business-value.why-choose-us-sec.organization-sec .section-label {
    max-width: 125px !important;
}

section.delivering-section ul.list-unstyled li {
    color: #fff;
}

body.ai-tabs.ai-dig-body section.industry-serve-sec .row .case-studies-section {
    flex-wrap: wrap;
    flex-direction: row;
}

body.ai-tabs.ai-dig-body section.industry-serve-sec .row .case-studies-section .case-study-card {
    width: calc(100% / 2 - 20px);
}

.c-col {
    z-index: 99;
}

#twoProjThumbRail {
    display: flex;
    gap: 14px;
}

/* Arrows */
.thumb-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}


/* Mobile carousel behavior */


/* Optional active state */
.thumb.is-active {
    border: 2px solid #000;
}
/* body .delivering-section .benefits-container .red-line {
    display: none;
} */
body.service-detail.business-solution .service-gif img {
    border-radius: 15px;
}

body.ai-tabs.ai-dig-body section.industry-serve-sec.impact-section.benefits-business-value.why-choose-us-sec .row.align-items-center .c-col {
    z-index: 2;
}

/* Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
}

/* Show modal */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Box */
.modal-box {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    transform: translateY(40px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-overlay.active .modal-box {
    transform: translateY(0);
}

/* Icon */
.modal-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    background: #dd1403;
    color: #fff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    animation: pop 0.4s ease;
}

@keyframes pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Text */
.modal-box h2 {
    margin-bottom: 10px;
    font-size: 22px;
    color: #222;
}

.modal-box p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

/* Button */
.modal-btn {
    background: #dd1403;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s ease;
}

.modal-btn:hover {
    background: #b01002;
}


.form-row.terms-div a {
    text-decoration: auto;
    color: var(--clr-primary);
}
.form-row.terms-div {
    margin: 0;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .modal-box {
        padding: 25px 15px;
    }
}

/* HOME LAST SLIDER  */
@media screen and (max-width: 1920px) and (min-width: 1651px) {

    body .child-parent:first-child .line-wrap,
    body .child-parent:nth-child(2) .line-wrap,
    body .child-parent:nth-child(3) .line-wrap,
    body .child-parent:nth-child(4) .line-wrap,
    body .child-parent:nth-child(5) .line-wrap,
    body .child-parent:nth-child(6) .line-wrap {
        width: 198.6px;
    }

    body .parent .child-parent:nth-child(even) .line-wrap {
        bottom: -25px;
    }

    body .parent .child-parent:nth-child(odd) .line-wrap {
        top: -45px;
    }

    body .child-parent {
        width: 152px;
    }
}

@media screen and (max-width: 1650px) and (min-width: 981px) {


    h3.step-title {
        font-size: 1.15rem;
    }

    p.step-description {
        padding-left: 24px;
        font-size: 12px;
    }

    .parent {
        gap: 15px;
    }

    body .global-container {
        width: 90%;
    }

    body .pillar-slider-wrapper {
        height: 767px;
    }
}


@media (max-width: 1200px) {
    :root {
        --slide-size: 360px;
    }

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


    .slide-wrapper {
        gap: 40px;
    }

    .problem-heading {
        font-size: 36px;
    }

    .challanges-section .ux-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .challanges-section .grid-discovery,
    .challanges-section .grid-wireframes {
        grid-column: span 2;
    }

    .challanges-section .grid-audit,
    .challanges-section .grid-design,
    .challanges-section .grid-usability,
    .challanges-section .grid-info {
        grid-column: span 1;
    }

    .challanges-section .ux-card {
        min-height: 250px;
    }
}

@media (max-width: 1024px) {
    .illustration-wrapper {
        position: static;
        margin: 10px 0;
    }

    .tabs-wrapper {
        gap: 30px;
    }



    .tab-icon {
        width: 28px;
        height: 28px;
    }

    .tab-label {
        font-size: 13px;
        max-width: 180px;
    }

    section.main-marketing .marketing-services .services-grid .row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {

    section.values-section:before,
    section.values-section:after {
        display: none;
    }

    body.privacy-policy section.hero-banner.service-banner {
        background-size: cover;
        background-position: center;
    }

    body.terms section.hero-banner.service-banner {
        background-size: cover;
        background-position: center;
    }

    body.service-detail.business-solution .hero-banner.service-banner.service-detail-banner {
        background: url(../images/solution-mobile.png);
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: 50px;
    }

    body.ai-tabs.ai-dig-body .hero-banner.service-banner.service-detail-banner {
        background: url(../images/ai-mobile.png) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        padding-top: 50px !important;
    }

    body.service-detail.business-operation .hero-banner.service-banner.service-detail-banner {
        background: url(../images/operation-mobile.png) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        padding-top: 50px !important;
    }

    body.service-detail.business-operation .hero-banner.service-banner.service-detail-banner {
        background: url(../images/operation-mobile.png) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        padding-top: 50px !important;
    }

    body.service-page.ui-ux-body section.hero-banner.service-banner {
        background: url(../images/ui-ux-mobile.png) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        padding-top: 50px !important;
    }

    body.tech-page.dig-tech-body.digital-technology section.hero-banner.service-banner {
        background: url(../images/digital-mobile.png) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        padding-top: 50px !important;
    }

    .pillar-slide {
        overflow: hidden;
    }

    /* Completely remove content from layout when inactive */
    .pillar-slide .pillar-content {
        display: none !important;
    }

    /* Show only active slide content */
    .pillar-slide.active .pillar-content {
        display: flex !important;
        /* row class keeps layout */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pillar-slider-wrapper {
        height: 100vh;
    }

    body.ai-tabs.ai-dig-body section.benefits-business-value.why-choose-us-sec.core-expertise {
        padding-bottom: 50px;
    }

    body .our-work-wrapper {
        padding: 30px 25px;
    }

    body.service-page.ui-ux-body section.process-section.service-process {
        padding: 0 0 50px 0;
    }

    section.responsive-padding {
        padding-top: 0;
    }

    body.about-us .about-principle-cont {
        flex-direction: column;
    }

    body.about-us .about-principle-cont .about-principle-row {
        width: 100%;
        padding: 0 !important;
    }

    body .featured-content ul.list-unstyled li {
        padding-left: 32px;
        margin-bottom: 12px;
    }

    body.about-us .about-principle-cont .about-principle-row p {
        max-width: 100% !important;
        margin-bottom: 25px !important;
    }

    body .featured-content ul.list-unstyled li::before {
        top: 2px;
    }

    p.ourvalue-para {
        margin-bottom: 25px !important;
    }

    section.benefits-business-value.why-choose-us-sec.core-expertise .expertise-box ul.expertise-box-ul li {
        padding-left: 0;
    }

    section.values-section .global-container.about-principle-cont .values-grid.about-principle-row {
        margin-top: 0;
        padding-top: 0 !important;
    }

    body .expertise-inner-wrap {
        flex-wrap: wrap;
    }

    body.ai-tabs .industry-col-right {
        padding: 59px 8px 0 12px;
    }

    .choose-us-right-col {
        padding: 50px 40px;
        margin-top: 30px;
    }

    .why-choose-us-title {
        font-size: 36px;
        margin-bottom: 40px;
    }

    .why-choose-us-grid {
        gap: 30px 25px;
    }

    .why-choose-us-item-title {
        font-size: 18px;
    }

    .why-choose-us-item-text {
        font-size: 14px;
    }

    .pillar-slider-wrapper {
        height: 100vh;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .pillar-slider {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .pillar-slide {
        position: absolute;
        left: 0;
        width: 100%;
        height: var(--collapsed-height, 80px);
        color: var(--text-white);
        display: flex;
        flex-direction: column;
        cursor: pointer;
        overflow: hidden;
        transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1),
            height 1.2s cubic-bezier(0.77, 0, 0.175, 1);
        gap: 0;
        margin: 0;
    }

    .pillar-slide.active {
        height: calc(100vh - (4 * var(--collapsed-height, 80px)));
        background: linear-gradient(to right, #0A0A0A 0%, #6A0600 100%);
        z-index: 5;
    }

    /* Horizontal Label at Top */
    .pillar-label {
        width: 100%;
        height: var(--collapsed-height, 80px);
        background: #000;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 0 20px;
        flex-shrink: 0;
        margin: 0;
        gap: 15px;
    }

    .pillar-number {
        font-size: 24px;
        font-style: italic;
        color: #fff;
        margin-bottom: 0;
        margin-right: 0;
        opacity: 0.9;
    }

    .pillar-title {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 13px;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 0.85);
        white-space: nowrap;
        margin-top: 0;
    }

    .pillar-slide.active .pillar-label {
        background: linear-gradient(to right, #0b0b0b 0%, #222 100%);
    }

    /* Content Area - Full Width */
    .pillar-content {
        padding: 40px 30px;
        min-width: auto;
        flex: 1;
        margin-left: 0;
        margin-right: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pillar-content h2 {
        font-size: 32px;
        font-weight: 500;
        line-height: 1.25;
        margin-bottom: 20px;
    }

    .pillar-content p {
        font-size: 14px;
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.75);
        max-width: 100%;
    }

    .service-tags {
        margin-bottom: 30px;
    }

    .white-btn-contact {
        margin-top: 20px;
    }

    section.process-section.service-process {
        margin: 0;
    }

    .parent.mobile {
        display: block;
        max-width: 760px;
        margin: 0 auto;
    }

    .parent.mobile img {
        width: 100%;
    }

    .parent.desktop {
        display: none;
    }

    .value-section {
        padding: 60px 0;
    }

    .main-heading {
        font-size: 36px;
    }

    .main-description {
        font-size: 16px;
    }

    .benefits-list li {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .benefits-container {
        padding-left: 25px;
        margin-top: 40px;
    }

    .strategy-left-img {
        min-height: auto;
    }

    section.services-section.stretegy-section .row div:nth-child(2) {
        padding: 40px 14px 0 14px;
    }

    section.challanges-section .global-container .ux-main-row .service-card {
        flex-direction: column-reverse;
    }

    .ux-audit {
        margin-bottom: 30px;
    }

    .row.first-row {
        flex-direction: column;
    }

    .slide-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .case-studies-section {
        order: 2;
    }

    .problem-statement-section {
        order: 1;
    }

    .problem-description {
        max-width: 100%;
    }

    .why-choose-us {
        padding: 60px 0;
    }

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

    .main-heading {
        font-size: 36px;
    }

    .why-choose-us .row.align-items-center>[class*="col-"] {
        padding: 12px;
    }

    .info-card {
        padding: 25px;
        margin-bottom: 20px;
    }

    .image-wrapper {
        padding-top: 120%;
        margin-bottom: 30px;
        max-width: 350px;
    }

    .hero-banner {
        padding: 90px 15px 10px;
    }

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

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

    .impact-section {
        padding: 4rem 0;
    }

    .stat-box {
        padding: 2rem 1.5rem;
    }

    .impact-section .impact-content-row p {
        max-width: 100%;
        margin: 0 auto;
    }

    section.services-section.why-choose-us-sec {
        padding: 50px 0 0px 0;
    }

    section.impact-section {
        padding-bottom: 0;
    }

    section.impact-section {
        padding-top: 0;
    }

    .service-card {
        padding: 1.5rem;
    }

    .service-card.h-100 .card-image-wrapper {
        min-height: 180px;
    }

    .col-md-6>.row .service-card .card-image-wrapper {
        min-height: 100px;
    }

    .card-title {
        font-size: 1.25rem;
    }

    .card-text {
        font-size: 0.9rem;
    }

    .pillar-content {
        padding: 70px 40px;
    }

    .pillar-content h2 {
        font-size: 30px;
    }

    main.contact-page-wrapper section.hero-banner .global-container {
        flex-direction: column;
    }

    main.contact-page-wrapper section.hero-banner .global-container .image-container {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
     #twoProjThumbRail {
        overflow-x: auto;
        scroll-behavior: smooth;
        justify-content: flex-start;
    }

    #twoProjThumbRail .thumb {
        flex: 0 0 auto;
    }
    body.service-detail.business-solution .s-detail-box-wrap .s-box ul li {
        list-style: disc;
    }

    body.service-detail.business-solution .s-detail-box-wrap .s-box {
        padding-left: 35px;
    }

    section.impact-section .global-container::before {
        display: none;
    }

    body .challanges-section .grid-design .card-text,
    body .challanges-section .grid-info .card-text,
    body .challanges-section .grid-usability .card-text {
        max-width: 100%;
    }

    body .challanges-section .ux-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .challanges-section .grid-discovery,
    .challanges-section .grid-audit,
    .challanges-section .grid-design,
    .challanges-section .grid-usability,
    .challanges-section .grid-info,
    .challanges-section .grid-wireframes {
        grid-column: span 1;
    }

    .challanges-section .ux-card {
        min-height: auto;
        padding: 18px 16px 70px;
    }

    .challanges-section .card-title {
        margin-bottom: 10px;
    }

    .challanges-section .card-text {
        max-width: 100%;
        font-size: 14px;
    }

    .challanges-section .card-image {
        width: 130px;
    }

    .challanges-section .grid-design .card-image-wrapper {
        top: auto;
        bottom: 0;
    }

    section.benefits-business-value.why-choose-us-sec.our-work.contact-us-our-work .our-work-wrapper {
        padding: 20px;
    }

    body.digital-marketing section.hero-banner .content {
        margin-bottom: 50px;
    }

    .bottom-wrap .hero-social {
        margin-bottom: 20px;
    }

    .bottom-wrap {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    section.section-padding.what-we-do-sec h2,
    section.section-padding.what-we-do-sec p {
        text-align: left;
    }

    section.logo-slider.service-logo-slider p {
        text-align: center;
        margin: 0 auto 20px auto;
    }

    body p,
    body h1,
    body h2 {
        text-align: left;
    }

    body .section-label {
        margin: 0 0 15px 0 !important;
    }

    body.home section.hero-banner {
        padding-bottom: 35px;
    }

    body .impact-overlay,
    body video.impact-video {
        border-radius: 15px;
    }

    body .rating-box {
        justify-content: left;
    }

    section.hero-banner a.white-btn-contact.btn-contact {
        padding: 10px 20px;
        display: block;
        max-width: 166px;
    }



    body.about-us section.hero.hero-banner.about-us .tagline {
        text-align: left;
    }

    body.about-us .reliable-partner-about h2,
    body.about-us .reliable-partner-about p {
        text-align: left;
    }

    section.main-marketing.dig-main-market .inner {
        padding: 15px !important;
    }

    body .explore-div {
        width: 100%;
    }

    section.main-marketing.dig-main-market {
        padding-bottom: 50px;
    }

    body.service-detail.business-operation section.hero-banner.service-banner.service-detail-banner .section-label {
        max-width: 187px;
    }

    .choose-us-left-col img {
        max-height: 550px;
    }

    body.service-detail.business-operation section.hero-banner.service-banner.service-detail-banner {
        padding-top: 30px;
    }

    body.service-detail.business-operationsection.benefits-business-value.why-choose-us-sec {
        padding-top: 0;
    }

    body .col-lg-6.imp-list {
        padding-left: 15px;
    }

    body.service-detail.business-operation section.benefits-business-value.why-choose-us-sec .service-gif {
        max-width: 250px;
        margin: 30px auto 0 auto;
    }

    body.service-detail.business-operation section.use-cases-section.inner-service .section-label {
        max-width: 110px;
    }

    .business-operation-col {
        padding-top: 30px;
    }

    body.service-detail.business-operation .section-label {
        max-width: 225px;
    }

    body.service-detail .tabs-container {
        margin-top: 50px;
    }

    body.ai-tabs section.hero-banner.service-banner.service-detail-banner {
        padding-top: 55px;
    }

    main.contact-page-wrapper .main-marketing .services-grid .row {
        margin: 0;
    }

    body.ai-tabs section.hero-banner.service-banner.service-detail-banner,
    body.service-detail section.hero-banner.service-banner.service-detail-banner {
        background-image: none;
        padding-top: 10px;
    }

    .marketing-hero.hero-banner {
        padding-top: 0;
    }

    .marketing-hero.hero-banner {
        background-image: none;
        padding-top: 30px;
    }

    main.contact-page-wrapper .marketing-hero.hero-banner {
        padding-bottom: 0;
        padding-top: 0;
    }

    body.tech-page section.hero-banner.service-banner {
        background-image: none;
    }

    .tabs-wrapper {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }

    /* Hide Scrollbar */
    .tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .tabs-wrapper {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .tab-item {
        flex: 0 0 auto;
        min-width: 220px;
        /* adjust width as needed */
    }

    section.main-marketing .marketing-services .services-grid .row .card {
        width: 100%;
    }

    .hero-banner h1 {
        font-size: 32px !important;
        font-weight: 500 !important;
    }

    body.service-detail.business-solution section.hero-banner.service-banner.service-detail-banner .section-label {
        max-width: 150px;
    }

    .hero-banner h1 br {
        display: none;
    }

    section.main-marketing .services-grid .row {
        margin: 0;
    }

    section.hero-finance h2 {
        font-size: 36px;
    }

    section.main-marketing .marketing-services .header-wrapper .header-content .badge-and-title {
        gap: 15px;
    }

    body.tech-page .header-content {
        margin-bottom: 0;
    }

    body.tech-page section.case-section {
        padding-bottom: 0;
    }

    body.tech-page section.benefits-business-value.why-choose-us-sec {
        padding: 0;
    }

    body.tech-page section.benefits-business-value.why-choose-us-sec .service-gif {
        margin-top: 0;
    }

    body.tech-page .services-grid {
        margin-bottom: 0;
    }

    section.main-marketing {
        padding-bottom: 0;
    }

    body.tech-page section.hero-banner.service-banner {
        padding-top: 50px;
    }

    .logo-wrap a img {
        margin-bottom: 31px;
    }

    section.services-section.stretegy-section.inner-sec-about .row.centered-row p {
        padding: 0;
    }

    .thumb-strip {
        /* Visible width ≈ 3 thumbs + 2 gaps so center one is full, sides are cut */
        max-width: calc(264px * 3 + 28px);
        /* 3 * 264px + 2 * 14px gap */
        margin: 0 auto;
        overflow: hidden;
        padding: 0 24px;
        /* small padding for arrows */
    }

    .thumb-rail {
        padding: 14px 0;
        /* no big side padding, slider body only */
        gap: 14px;
    }

    .thumb {
        flex: 0 0 264px;
        /* keep thumbnail size fixed */
        width: 264px;
        height: 180px;
    }

    /* Optional: slightly larger arrows on mobile if needed */
    .thumb-nav {
        width: 40px;
        height: 40px;
    }

    .choose-us-right-col .why-choose-us-content {
        padding: 0 30px;
    }

    .choose-us-right-col {
        padding: 40px 25px;
        margin-top: 20px;
    }

    .why-choose-us-subtitle {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .why-choose-us-title {
        font-size: 28px;
        margin-bottom: 35px;
    }

    .why-choose-us-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .why-choose-us-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 15px;
    }

    .why-choose-us-item-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .why-choose-us-item-text {
        font-size: 14px;
    }

    .tabs-container {
        padding: 30px 0;
    }

    .tabs-wrapper {
        gap: 20px;
        overflow-x: auto;
        padding: 0 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .tab-item {
        min-width: 100px;
        flex-shrink: 0;
    }

    .tab-icon-wrapper {
        margin-bottom: 10px;
    }

    .tab-icon {
        width: 24px;
        height: 24px;
    }

    .tab-label {
        font-size: 12px;
        max-width: 120px;
    }

    .tab-indicator {
        height: 2px;
        margin-top: 6px;
    }

    .value-section {
        padding: 40px 0;
    }

    .main-heading {
        font-size: 28px;
    }

    .main-description {
        font-size: 15px;
    }

    .btn-how-it-works {
        padding: 10px 20px;
        font-size: 14px;
    }

    .benefits-list li {
        font-size: 15px;
        margin-bottom: 16px;
    }

    .benefits-container {
        padding-left: 20px;
    }



    .service-card {
        padding: 1.5rem;
    }

    .card-image-wrapper {
        min-height: 150px;
    }

    .card-title {
        font-size: 1.25rem;
    }

    .card-text {
        font-size: 0.9rem;
    }

    .slide-wrapper {
        gap: 35px;
    }

    .case-study-card {
        padding: 25px;
        border-radius: 10px;
    }

    .case-study-title {
        font-size: 22px;
    }

    .case-study-text {
        font-size: 14px;
    }

    .problem-heading {
        font-size: 32px;
    }

    .problem-description {
        font-size: 15px;
    }

    .problem-label {
        font-size: 12px;
        padding: 6px 16px;
    }

    :root {
        --slide-size: 300px;
    }

    .services-section {
        padding: 60px 0;
    }

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

    .section-description {
        font-size: 16px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

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

    .impact-section {
        padding: 3rem 0;
    }

    .impact-heading {
        margin-bottom: 1.5rem !important;
    }

    .stat-box {
        padding: 1.75rem 1.25rem;
    }

    .why-choose-us {
        padding: 50px 0;
    }

    .why-choose-us .container {
        padding: 0 15px;
    }

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

    .section-label {
        font-size: 13px;
    }

    .main-heading {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .supporting-text {
        font-size: 15px;
        padding: 0 10px;
    }

    .why-choose-us .row.align-items-center>[class*="col-"] {
        padding: 10px;
    }

    /* Image appears first on mobile (order-1) */
    .image-wrapper {
        padding-top: 0;
        margin-bottom: 30px;
        max-width: 300px;
    }

    /* Cards stack below image */
    .info-card {
        padding: 22px;
        margin-bottom: 18px;
    }

    .card-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .card-text {
        font-size: 14px;
    }

    .faq-container {
        padding: 15px;
    }

    .accordion-button {
        font-size: 15px;
        padding: 16px 18px;
    }

    .accordion-body {
        font-size: 14px;
        padding: 16px 18px;
    }

    body .impact-row-num {
        padding: 50px;
    }

    .service-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .service-card.h-100 .card-image-wrapper {
        min-height: 150px;
    }

    .col-md-6>.row .service-card .card-image-wrapper {
        min-height: 100px;
    }

    .card-title {
        font-size: 1.2rem;
    }

    body.service-page section.case-studies {
        padding-top: 0;
    }

    section.challanges-section h3.card-title {
        font-size: 26px;
        margin: 20px 0;
    }

    .service-card.audit-card.ux-card .card-image-wrapper {
        position: static;
    }

    .card-text {
        font-size: 0.85rem;
    }

    .pillar-slider-wrapper {
        height: auto;
        padding: 0;
    }

    .pillar-slide,
    .pillar-slide.active {
        position: relative;
        width: 100%;
        transform: none !important;
        flex-direction: column;
        height: 100% !important;
    }

    .pillar-label {
        width: 100%;
        height: 60px;
        flex-direction: row;
        justify-content: center;
        padding: 0;
    }

    .pillar-title {
        writing-mode: horizontal-tb;
        transform: none;
        margin-left: 12px;
    }

    .pillar-number {
        margin-bottom: 0;
    }

    .pixel-slider .slider-slide {
        flex: 0 0 200px;
        width: 200px;
        height: 136px;
    }

    .pixel-slider .slider-nav-btn {
        width: 36px;
        height: 36px;
    }

    .pixel-slider .slider-nav-left {
        left: 5px;
    }

    .pixel-slider .slider-nav-right {
        right: 5px;
    }

    section.main-marketing .marketing-services .services-grid .row {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 576px) {
    body.ai-tabs.ai-dig-body .tabs-wrapper {
        padding-left: 250px;
    }

    body.service-detail.business-solution section.services-section.stretegy-section.inner-sec-about {
        padding: 20px 0 !important;
    }

    body.service-detail.business-solution section.hero-finance {
        padding-top: 10px;
    }

    body.service-detail.business-solution section.use-cases-section.inner-service section.financial-digital-section {
        padding-top: 16px;
    }

    body.service-detail.business-solution section.benefits-sec {
        padding-top: 20px;
    }

    body.service-detail.business-solution .service-gif {
        margin-top: 25px;
        text-align: center;
    }

    body.service-detail.business-solution .service-gif img {
        max-width: 100%;
    }

    body.service-detail.business-solution .s-detail-box-wrap .s-box {
        text-align: left;
    }

    body.service-detail.business-solution .s-detail-box-wrap .s-box ul {
        list-style: none;
        padding-left: 0;
    }

    body.service-detail.business-solution section.impact-section .stat-box {
        gap: 25px;
        justify-content: center;
    }

    body.service-detail.business-solution section.impact-section .stat-number {
        font-size: 32px;
    }

    body.service-detail.business-solution section.delivering-section .section-label.mb-4 {
        max-width: 150px;
    }

    body.service-detail.business-solution .tabs-container .tabs-wrapper {
        padding-left: 145px;
    }





    body.service-detail.business-solution section.key-capibilities img.img-fluid {
        max-width: 434px;
    }


    body.service-detail.business-solution section.benefits-sec .service-gif img {
        transform: translate(-14px, 0);
    }

    body .mega-menu .col-md-6 {
        margin: 10px 0 !important;
    }

    body .logo-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px;
    }

    body .logo-wrap a {
        margin: 0 10px;
        text-decoration: none;
        width: 70px;
        height: 70px;
        background: #FFF;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    body .logo-wrap a img {
        width: 55px;
        height: 55px;
        margin-bottom: 0;
    }

    .choose-us-right-col {
        padding: 35px 20px;
    }

    .why-choose-us-title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .why-choose-us-grid {
        gap: 25px;
    }

    .why-choose-us-icon {
        width: 40px;
        height: 40px;
    }

    .why-choose-us-item-title {
        font-size: 16px;
    }

    .why-choose-us-item-text {
        font-size: 13px;
    }



    .tab-item:nth-last-child(-n + 2) {
        margin-bottom: 0;
    }

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

    .tabs-wrapper {
        gap: 15px;
        padding: 0 15px 0 183px;
    }

    .tab-icon {
        width: 22px;
        height: 22px;
    }

    .tab-label {
        max-width: 100px;
        min-height: 40px;
    }



    .main-tab-content h2 {
        font-size: 24px;
    }

    section.use-cases-section.inner-service {
        padding-top: 0;
    }

    section.hero-banner.service-banner.service-detail-banner .service-gif {
        max-height: 281px;
    }

    section.hero-banner.service-banner.service-detail-banner p.mt-3,
    section.hero-banner.service-banner.service-detail-banner .col-lg-6.mt-4.mt-lg-0 {
        margin: 0 !important;
    }

    section.services-section.stretegy-section.inner-sec-about .section-header .section-label {
        background-color: #a4919163;
    }

    section.logo-slider.service-logo-slider {
        padding-bottom: 0;
    }

    .pillar-label {
        height: var(--collapsed-height, 70px);
        padding: 0 15px;
        gap: 12px;
    }

    .pillar-number {
        font-size: 20px;
    }

    .pillar-title {
        font-size: 12px;
        letter-spacing: 0.8px;
    }

    .pillar-slide {
        height: var(--collapsed-height, 70px);
    }

    .pillar-slide.active {
        height: calc(100vh - (4 * var(--collapsed-height, 70px)));
    }

    .pillar-content {
        padding: 30px 20px;
    }

    .pillar-content h2 {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .pillar-content p {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .service-tags .tag {
        font-size: 12px;
        padding: 5px 14px 5px 22px;
    }

    ul.navbar-nav.nav-pill li.nav-item:last-child {
        border-bottom: 0;
    }

    ul.navbar-nav.nav-pill li.nav-item {
        border-bottom: 1px solid #00000017;
        padding: 6px 0;
        width: 95%;
        margin: 0 auto;
    }

    div#mainNav ul {
        padding: 0;
        border-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    div#mainNav {
        position: absolute;
        width: 100%;
        top: 85px;
        border-radius: 0;
    }

    .main-heading {
        font-size: 24px;
    }

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

    .benefits-list li {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .s-detail-box-wrap .s-box {
        width: 100%;
    }

    .s-detail-box-wrap {
        gap: 15px;
    }

    section.benefits-business-value.why-choose-us-sec .service-gif {
        margin-top: 30px;
    }

    .service-card {
        padding: 1.25rem;
    }

    .card-image-wrapper {
        min-height: 120px;
        margin-bottom: 1rem;
    }

    .card-title {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .card-text {
        font-size: 0.85rem;
    }

    .case-study-card {
        padding: 20px;
    }

    .case-study-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .case-study-text {
        font-size: 13px;
    }

    .problem-heading {
        font-size: 28px;
    }

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

    .problem-label {
        font-size: 11px;
        padding: 5px 14px;
    }

    body .impact-row-num {
        padding: 15px;
    }

    body .logo-slider p {
        padding: 10px;
    }

    body .hero-banner {
        padding: 10px 15px 10px;
    }

    .hero-box h2 {
        font-size: 35px;
    }

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

    .view-all-btn button {
        padding: 14px 36px;
        font-size: 15px;
    }

    .image-box img {
        height: 200px;
    }

    .hover-content {
        padding: 15px;
    }

    .hover-content h5 {
        font-size: 1.1rem;
    }

    .hover-content p {
        font-size: 0.85rem;
    }

    .view-all-btn {
        transform: translate(0px, 20px);
    }

    section.impact-section .row {
        margin: 0;
    }

    .service-card {
        padding: 1.25rem;
    }

    .col-md-6>.row .service-card {
        padding: 1.25rem;
    }

    .service-card.h-100 .card-image-wrapper {
        min-height: 120px;
        margin-bottom: 1rem;
        margin-left: 0;
    }

    .col-md-6>.row .service-card .card-image-wrapper {
        min-height: 80px;
        margin: 0 auto 20px auto;
    }

    .card-title {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .ux-main-row p.card-text {
        font-size: 18px;
    }

    .col-md-6>.row .service-card .card-title {
        margin-bottom: 0.5rem;
    }

    .card-text {
        font-size: 0.8rem;
    }

    .pixel-slider .slider-slide {
        flex: 0 0 160px;
        width: 160px;
        height: 109px;
    }

    .pixel-slider .slider-nav-btn {
        width: 32px;
        height: 32px;
    }

    .pixel-slider .slider-nav-btn svg {
        width: 18px;
        height: 18px;
    }


}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@media (min-width: 1200px) {
    .why-choose-us .container {
        max-width: 1400px;
    }

    .why-choose-us .row.align-items-center>[class*="col-"] {
        padding: 20px;
    }
}

@media only screen and (max-width:480px) {
    body.about-us section.section-padding.what-we-do-sec .values-pill {
        margin-right: auto;
    }

    .modal-box h2 {
        text-align: center;
    }

    body.ai-tabs.ai-dig-body section.industry-serve-sec .row.align-items-center {
        flex-direction: column-reverse !important;
    }

    body.ai-tabs.ai-dig-body section.industry-serve-sec .row.align-items-center .c-col {
        padding-bottom: 20px;
    }

    body.ai-tabs.ai-dig-body .row.align-items-center .industry-col-right {
        padding: 0 8px 50px 8px;
    }

    body.service-detail.business-solution .cont h2,
    body.service-detail.business-solution .cont p {
        text-align: left;
    }

    section.impact-section.extra-sec.extra-work-sec.benefits-business-value.why-choose-us-sec .s-box ul {
        padding-left: 0;
    }

    body.service-detail.business-solution section.impact-section.extra-work-sec.benefits-business-value.why-choose-us-sec {
        padding: 30px 0;
    }

    body.ai-tabs.ai-dig-body .case-studies {
        padding-top: 0;
    }

    body.ai-tabs.ai-dig-body .case-studies h2.h2 {
        text-align: left;
    }

    body h2 {
        font-size: 22px !important;
    }

    body.digital-marketing section.impact-section.position-relative.overflow-hidden.extra-work-sec.marketing-services div#marketing-services {
        margin: 0 auto 25px 0 !important;
    }

    body.tech-page.dig-tech-body section.main-marketing.dig-main-market {
        padding-top: 50px;
    }

    body.digital-marketing section.impact-section.position-relative.overflow-hidden.extra-work-sec.marketing-services {
        padding-top: 0;
    }

    body.contact-page form.contact-form .form-row {
        display: flex;
    }

    body .hero-banner h1 {
        font-size: 28px !important;
    }

    body.ai-tabs.ai-dig-body section.industry-serve-sec .row .case-studies-section .case-study-card {
        width: 100%;
    }

    body .bottom-bar {
        flex-direction: column;
    }

    body.service-detail.business-solution section.hero-banner.service-banner.service-detail-banner .service-gif {
        max-height: 100%;
    }

    body .delivering-section ul.list-unstyled li:before {
        top: 2px;
    }

    section.impact-section.extra-sec.extra-work-sec.benefits-business-value.why-choose-us-sec {
        padding: 50px 0 0 0;
    }

    body .padding-left {
        padding-left: 0;
    }

    body .laptop-image {
        width: 100%;
        max-width: 800px;
        height: 315px;
        border-radius: 8px;
        box-shadow: none;
        object-fit: cover;
    }

    body.service-detail.business-operation section.benefits-business-value.why-choose-us-sec {
        padding-top: 0;
        padding-bottom: 50px;
    }

    body.service-detail.business-operation section.services-section.stretegy-section.inner-sec-about .section-label {
        max-width: 110px;
    }

    body .key-capibilities li span {
        font-size: 16px;
    }

    body.service-detail.business-operation section.benefits-can-sec .row.align-items-center {
        background-size: cover;
        min-height: auto;
    }

    .ben-col-1 {
        transform: none;
    }

    body.service-detail.business-operation section.benefits-can-sec {
        padding: 0 10px 0 10px !important;
    }

    body.service-detail.business-operation section.key-capibilities .key-cap-col img {
        height: 100%;
        max-height: 350px;
        object-fit: cover;
        width: 100%;
        border-radius: 15px !important;
    }

    body.digital-marketing .main-marketing .marketing-services {
        padding: 0 20px 57px;
    }

    body.digital-marketing section.impact-section.extra-work-sec.marketing-services .global-container {
        width: 100%;
        padding: 0;
    }

    body.digital-marketing section.hero-finance {
        padding-top: 0;
    }

    body.digital-marketing section.impact-section.extra-work-sec.marketing-services .global-container::before {
        display: none;
    }

    body article.service-card.design-system-card.ux-card.grid-design,
    body article.service-card.info-arc-card.ux-card.grid-info,
    body article.service-card.wireframes-card.ux-card.grid-wireframes {
        flex-direction: column;
    }

    body .service-card.audit-card.ux-card .card-image-wrapper {
        height: fit-content;
    }

    body .card-image-wrapper {
        justify-content: center;
    }

    body article.service-card.discovery-card.ux-card.grid-discovery .card-image-wrapper,
    body article.service-card.audit-card.ux-card.grid-audit .card-image-wrapper {
        justify-content: center;
    }

    body .pillar-slide .row.pillar-content {
        min-width: 100% !important;
    }

    body.service-detail.business-operation section.benefits-can-sec .row.align-items-center {
        background-color: #000;
        padding: 50px 0 50px 15px;
        border-radius: 15px;
    }

    body .hero-box h2.hero-title br {
        display: none;
    }

    body section.hero-banner a.white-btn-contact.btn-contact {
        margin: 30px 0 0px 0 !important;
        max-width: 142px;
        padding: 8px 0px 8px 18px;
    }

    body.service-detail.business-solution .section-label {
        max-width: 165px !important;
    }

    body.service-detail.business-solution section.benefits-sec .section-label {
        max-width: 250px !important;
    }

    body.service-detail.business-solution section.delivering-section .section-label {
        max-width: 140px !important;
    }

    body.digital-marketing section.hero-banner {
        padding: 15px 0 0 0;
    }


    section.main-marketing.dig-main-market .desc {
        font-size: 16px !important;
    }

    section.main-marketing.dig-main-market .desc {
        font-size: 16px !important;
    }

    body.digital-marketing section.hero-banner {
        background: none;
    }

    body.tech-page.dig-tech-body section.case-section .section-label {
        max-width: 110px;
    }

    body .values-section .about-principle-row {
        width: 100%;
    }

    body.about-us section.values-section {
        width: 89%;
        padding: 25px 0 !important;
    }

    .form-group {
        flex: none !important;
    }

    .container-wide {
        padding: 0 24px 0 24px !important;
    }

    body .values-section {
        width: 80%;
    }

    section.services-section.home-service-sec .service-card {
        min-height: 600px;
    }

    a.navbar-brand img {
        max-width: 75px;
        object-fit: contain;
    }

    p {
        font-size: 16px !important;
    }

    section#portfolio2 p {
        font-size: 16px;
    }

    .thumb {
        flex: 0 0 264px;
        width: 285px;
        height: 180px;
        border-radius: var(--cs-thumb-radius);
        overflow: hidden;
        position: relative;
        border: 0;
        box-shadow: none !important;
        cursor: pointer;
        transition: none !important;
        scroll-snap-align: center;
        pointer-events: auto;
        z-index: 1;
        background: transparent;
        border-radius: 8px;
        overflow: hidden !important;
    }

    /* Rest of your thumb styles... */
    .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
        user-select: none;
        border-radius: 8px;
    }

    .thumb.is-active {
        box-shadow: none;
    }

    .Export-service-row h2.section-title br {
        display: none;
    }

    body.service-page.ui-ux-body .slide-wrapper {
        padding: 15px;
    }

    body.service-page.ui-ux-body h2.section-title {
        margin-bottom: 30px;
    }

    body.service-page.ui-ux-body section.slider-wrapper {
        padding-bottom: 0;
    }

    body.service-page.ui-ux-body section.challanges-section.extra-work-sec {
        padding-top: 0;
    }

    body.service-page.ui-ux-body section#portfolio2 {
        padding-bottom: 0;
    }

    body.service-page.ui-ux-body section.services-section.stretegy-section.inner-sec-about.pb-0 .row.centered-row {
        margin-bottom: 25px;
    }

    body.service-page.ui-ux-body section.services-section.stretegy-section.inner-sec-about {
        padding-top: 0;
    }

    body.service-page.ui-ux-body section.raw-section {
        padding-top: 0;
    }

    body .hero-banner {
        background-size: inherit;
        background: none;
    }

    body.service-page.ui-ux-body .logo-slider p {
        text-align: left;
        max-width: 90%;
        margin: 0 auto 20px auto;
    }

    body.service-page.ui-ux-body section.hero-banner.service-banner {
        padding-bottom: 50px;
    }

    section.benefits-business-value.why-choose-us-sec.core-expertise .expertise-icon-wrap {
        border-radius: 12px;
    }

    body.ai-tabs section.benefits-business-value.why-choose-us-sec {
        padding-top: 30px !important;
    }

    .ai-content {
        margin: 50px 0 44px 0;
    }

    .global-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .logo-wrap a {
        width: calc(100% / 3 - 50px);
    }

    .tabs-container .tab-item .tab-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    body span.tag:before {
        top: -28px;
    }

    body h2 {
        font-size: 26px !important;
    }

    .our-work-wrapper.row {
        width: 98%;
        margin: 0 auto;
    }

    body.ai-tabs section.benefits-business-value.why-choose-us-sec ul li {
        position: relative;
        font-size: 16px;
        margin-bottom: 18px;
        line-height: 26px;
        list-style: none;
        padding-left: 4px;
    }

    body.ai-tabs section.benefits-business-value.why-choose-us-sec.core-expertise {
        padding-bottom: 0;
    }

    body.ai-tabs section.industry-serve-sec {
        padding-top: 50px;
    }

    body.ai-tabs section.benefits-business-value.why-choose-us-sec {
        padding-top: 0;
    }

    section.benefits-business-value.why-choose-us-sec.our-work {
        padding-top: 50px !important;
    }

    body.service-page section.hero-banner.service-banner {
        padding-top: 25px;
    }
}

/* haris css  */

.main-marketing {
    & .marketing-hero {
        width: 100%;
        max-width: 1620px;
        height: 540px;
        margin: 0 auto;
        padding: 0 40px;

        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 171px;

        /* ────────────── nested classes ────────────── */
        & .content {
            width: 793px;
            display: flex;
            flex-direction: column;
            gap: 40px;

            & .headline-group {
                display: flex;
                flex-direction: column;
                gap: 32px;

                & .badge-and-title {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;

                    & .badge {
                        display: inline-flex;
                        align-items: center;
                        padding: 4px 16px;
                        background: #f0f0f0;
                        border-radius: 64px;
                        font-size: 16px;
                        font-weight: 600;
                        color: #454545;
                        max-width: 158px;
                    }




                }

                & .description {
                    font-size: 18px;
                    font-weight: 400;
                    line-height: 24px;
                    color: #767676;
                    max-width: 620px;
                }
            }

            & .btn-get-started {
                position: relative;
                width: 150px;
                height: 50px;
                padding: 8px 16px;
                border-radius: 100px;
                border: 1px solid #e1e1e1;
                background: white;
                overflow: hidden;

                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;

                font-family: 'IBM Plex Sans', sans-serif;
                font-size: 16px;
                font-weight: 500;
                color: #454545;
                text-decoration: none;
                cursor: pointer;

                &::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    width: 166px;
                    height: 166px;
                    left: 145px;
                    top: -58px;
                    background: #dd1403;
                    border-radius: 9999px;
                    transition: left 0.4s ease, top 0.4s ease;
                    z-index: -1;
                }

                &:hover::before {
                    left: -20px;
                    top: -58px;
                }

                & .icon {
                    width: 20px;
                    height: 20px;

                    & svg {
                        width: 100%;
                        height: 100%;
                        stroke: #5d5d5d;
                        stroke-width: 1.8;
                        stroke-linecap: round;
                        stroke-linejoin: round;
                    }
                }
            }
        }

        & .image-wrapper {
            flex: 1;
            max-width: 656px;
            height: 100%;
            background: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, #fafafa 100%);
            border-radius: 21.44px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

            & .image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 16px;
            }
        }

        /* Responsive */
        @media (max-width: 1400px) {
            gap: 80px;
            padding: 0 30px;
        }

        @media (max-width: 1100px) {


            & .content,
            & .image-wrapper {
                width: 100%;
                max-width: none;
            }


        }
    }

    & .marketing-services {
        width: 100%;
        max-width: 1620px;
        margin: 0 auto;
        padding: 0 15px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;

        & .header-wrapper {
            align-self: stretch;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 60px;

            & .header-content {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 60px;

                & .badge-and-title {
                    align-self: stretch;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    & .badge {
                        padding: 4px 16px;
                        background: white;
                        border-radius: 64px;
                        font-size: 16px;
                        font-weight: 600;
                        color: #454545;
                        margin-right: auto;
                    }

                    & .title-group {
                        display: flex;
                        gap: 12px;
                        margin-right: auto;

                        & .title {
                            font-size: 48px;
                            font-weight: 500;
                            line-height: 46.8px;
                            color: #454545;
                        }

                        & .highlight {
                            font-family: 'Source Serif 4', serif;
                            font-style: italic;
                            font-size: 50px;
                            line-height: 46.8px;
                            color: #dd1403;
                        }
                    }
                }

                & .description {
                    width: 100%;
                    max-width: 1226px;
                    text-align: center;
                    font-size: 22px;
                    font-weight: 400;
                    line-height: 26px;
                    color: #767676;
                }
            }
        }

        & .services-grid {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 16px;

            & .row {

                gap: 16px;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                width: 100%;

                & .card {
                    background: #fff;
                    border: 1px solid #E1E1E1;
                    border-radius: 16px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    min-height: 253px;

                    & .inner {
                        flex: 1;
                        padding: 32px;
                        flex-direction: column;
                        gap: 32px;

                        & .icon-wrapper {
                            width: 50px;
                            height: 50px;
                            padding: 11.36px;
                            background: #f7f7f7;
                            border-radius: 4px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-bottom: 15px;
                        }

                        & .content {
                            display: flex;
                            flex-direction: column;
                            gap: 12px;

                            & .title {
                                font-size: 24px;
                                font-weight: 500;
                                line-height: 26.4px;
                                text-transform: capitalize;
                                color: #000;
                            }

                            & .subtitle {
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 26.4px;
                                color: #000;
                            }


                        }
                    }
                }
            }
        }

        /* ────────────── Responsive ────────────── */
        @media (max-width: 1200px) {
            padding: 0 30px 60px;

            & .services-grid .row {
                flex-wrap: wrap;

                & .card {
                    flex-basis: calc(50% - 8px);
                }
            }
        }

        @media (max-width: 768px) {
            & .header-wrapper .header-content .title-group {
                flex-direction: column;
                gap: 8px;

                & .title,
                & .highlight {
                    font-size: 38px;
                    line-height: 1.15;
                }

                & .highlight {
                    font-size: 42px;
                }
            }

            & .services-grid .row {
                flex-direction: column;
                gap: 16px;

                & .card {
                    min-height: auto;
                }
            }
        }
    }
}

/* haris css  */