.bg-blue .what-we-do-app {
    padding: 30px;
    background: #fff;
    height: 100%;
}
.metaverse_pos img {
    width: 80%;
}
.metaverse_pos {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
}
.let-why-choose {
    position: relative;
}
.what-we-do {
    padding: 150px 0 100px;
    position: relative;
}
.what-we-do .title-wrap:before {
    content: "";
    position: absolute;
    top: -50px;
    left: -50px;
    width: 428px;
    height: 391px;
    background-image: url(../images/left-pattern1.webp);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
    z-index: 0;
}
.what-we-do .techstack h2 {
    color: #ff6c1a !important;
    font-size: 24px;
    line-height: 30px;
    margin: 0;
    padding-bottom: 20px;
}
.process-num {
    position: absolute;
    left: 0;
    top: -55px;
    color: #0000000d;
    font-size: 80px;
    z-index: -1;
    font-weight: 800;
    line-height: 1;
}
.sticky .what-we-do-app .process-num {
    left: 15%;
    top: 38px;
    color: #192a44;
    font-size: 214px;
    z-index: 0;
    opacity: .02;
}
.sticky .what-we-do-app .process-num {
    left: 18%;
    top: 38px;
    font-size: 100px;
}
.tech-stack-details {
    margin: 0 auto !important;
    text-align: center;
}
.tech-stack-details img {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 15px !important;
    object-fit: contain !important;
}
.no-white .what-we-do-app h3 {
    color: #192a44;
    font-weight: 700;
}
ul.techstack {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}
.techstack li.tech-list {
    margin: 0 10px 20px;
    display: inline-block;
}
.techstack li.tech-list .actives,.techstack li.tech-list .active, .techstack .actives-tech, .techstack .tech-list a:hover, .techstack li.tech-list .a:hover, .techstack .tech-list a:focus, .techstack li.tech-list .a:focus {
    background: #ffe1d1 !important;
    color: #ff6c1a !important;
    border: 1px solid #ffe1d1 !important;
}
.techstack .tech-list a, .techstack .tech-list .a {
    border: 1px solid #f3f6f9;
    padding: 12px 30px;
    font-weight: 500 !important;
    font-size: 20px;
    color: #777;
    background: #f3f6f9;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}
.techstack li.tech-list a, .techstack li.tech-list .a {
    display: block;
}
.tech-stack-details .common-service img {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
.tech-stack-details .mobileapps-text-wrap p {
    font-weight: 400;
}
/****************** clients-scroll *****************/
.clients-scroll-section .scroller__wrapper  {
	/* How long one slide is visible on screen (from entering screen to leaving it) */
	--scrolling-gallery-item-duration: 20s;
	/* How many items we want to see on screen at once */
	--scrolling-gallery-items-visible: 5;
	/* How many items are to scroll */
	--scrolling-gallery-items-total: 5;
	overflow: hidden;
	will-change: transform;
}
@media (max-width: 991px) {
    .clients-scroll-section .scroller__wrapper  {
    /* How many items we want to see on screen at once */
    --scrolling-gallery-items-visible: 3;
    /* How long one slide is visible on screen (from entering screen to leaving it) */
    --scrolling-gallery-item-duration: 10s;
    }
}

@media (max-width: 600px) {
    .clients-scroll-section .scroller__wrapper  {
    /* How many items we want to see on screen at once */
    --scrolling-gallery-items-visible: 2;
    /* How long one slide is visible on screen (from entering screen to leaving it) */
    --scrolling-gallery-item-duration: 10s;
    }
    .clients-section .clients-scroller img {
        max-width: 180px;
    }
}
	
.clients-scroll-section .blockx-client-scroller {
    animation-duration: calc(var(--scrolling-gallery-item-duration, 1s) / var(--scrolling-gallery-items-visible) * var(--scrolling-gallery-items-total));
    animation-timing-function: linear;
    animation-name: scrolling-gallery;
    animation-iteration-count: infinite;
    display: flex;
    /* white-space: nowrap; */
}

.clients-scroll-section .scroller__container {
    /* Without this, scroll will jump on desktop if any vertical scrollbar is shown */
    width: 100%;

}

.clients-scroll-section .scroller__item {
    flex: 0 0 calc(100% / var(--scrolling-gallery-items-visible));
    /* Without this, block elements will take width from their contents and thus making wrong calculations,
        so this just force elements to take only exact part of the container (screen) and equal for all */
    width: 0px;
    /* If you want to have it continuous without any spaces, remove two lines below */
    box-sizing: border-box;
    padding: 0.5em;
}

.clients-scroll-section .blockx-client-scroller img {
    display: block;
    height: auto;
    object-position: center;
    margin: auto;
    width: 100%;
}


@keyframes scrolling-gallery {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(var(--scrolling-gallery-items-total) * -100% / var(--scrolling-gallery-items-visible)));
    }
}

.clients-scroll-section .blockx-client-scroller:hover,
.clients-scroll-section .blockx-client-scroller:focus {
    animation-play-state: paused;
}
/************** clients-scroll-end **************/






@media screen and (max-width: 1600px) {
    .business-growth .what-we-do-app h3 {
        font-size: 26px;
        line-height: 38px;
        margin: 0 0 15px;
    }
}
@media screen and (max-width: 1199px) {
    .metaverse_pos {
        position: absolute;
        bottom: 0;
        width: 45%;
        right: 0;
    }
    .what-we-do .techstack h2 {
        font-size: 20px;
        padding-bottom: 15px;
    }
    .tech-stack-details img {
        height: 70px !important;
        width: 70px !important;
        margin-bottom: 10px !important;
    }
}
@media screen and (max-width: 991px) {
    .what-we-do .title-wrap:before {
        top: -35px;
        left: -40px;
        width: 300px;
        height: 240px;
    }
    .metaverse_pos {
        position: relative;
        width: 100%;
        top: 25px;
    }
    .what-we-do {
        padding: 60px 0;
    }
    .techstack .tech-list a, .techstack .tech-list .a {
        padding: 10px 20px;
        font-size: 17px;
    }
    .business-growth .what-we-do-app h3 {
        font-size: 21px;
        line-height: 32px;
    }
    .sticky .what-we-do-app .process-num {
        left: 18%;
        top: 38px;
        font-size: 80px;
    }
    
}
@media screen and (max-width: 767px) {
    .bg-blue .what-we-do-app {
        padding: 20px;
    }
    .what-we-do {
        padding: 40px 0;
    }
    .tech-stack-details img {
        height: 50px !important;
        width: 50px !important;
        margin-bottom: 10px !important;
    }
    .techstack .tech-list a, .techstack .tech-list .a {
        padding: 6px 15px;
        font-size: 16px;
    }
    .techstack li.tech-list {
        margin: 0 5px 10px;
    }
}
@media screen and (max-width: 576px) {
    .what-we-do .title-wrap:before {
        content: unset;
    }
    .what-we-do .techstack h2 {
        font-size: 17px;
        line-height: 28px;
    }
    .what-we-do.wwd-sticky hr {
        margin: 5px 0 20px !important;
    }
    
}
@media screen and (max-width: 480px) {
    .technolgies-stack .col-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .techstack .tech-list a, .techstack .tech-list .a {
        padding: 4px 8px;
        font-size: 14px;
        color: var(--secondrycolor);
    }
    .business-growth .what-we-do-app h3 {
        font-size: 18px;
        line-height: 28px;
    }
}
@media screen and (max-width: 380px) {
    .business-growth .what-we-do-app h3 {
        font-size: 17px;
        line-height: 26px;
    }
}